.elementor-990524 .elementor-element.elementor-element-6ae6343f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:9px;--padding-bottom:9px;--padding-left:24px;--padding-right:24px;}.elementor-990524 .elementor-element.elementor-element-6ae6343f:not(.elementor-motion-effects-element-type-background), .elementor-990524 .elementor-element.elementor-element-6ae6343f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-39113a93{width:initial;max-width:initial;text-align:center;font-family:"Public Sans", sans-serif;font-size:14px;font-weight:400;color:var( --e-global-color-dnwhite );}.elementor-990524 .elementor-element.elementor-element-75d9856d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-dnrule );--border-color:var( --e-global-color-dnrule );--padding-top:8px;--padding-bottom:8px;--padding-left:0px;--padding-right:0px;}.elementor-990524 .elementor-element.elementor-element-75d9856d:not(.elementor-motion-effects-element-type-background), .elementor-990524 .elementor-element.elementor-element-75d9856d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dnwhite );}.elementor-990524 .elementor-element.elementor-element-72a7171{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:12px 24px;--row-gap:12px;--column-gap:24px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-990524 .elementor-element.elementor-element-11b8f578{width:initial;max-width:initial;--e-icon-list-icon-size:12px;--icon-vertical-offset:0px;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(20px/2);}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(20px/2);}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(20px/2);}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-20px/2);}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-20px/2);}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-item:not(:last-child):after{content:"";border-color:var( --e-global-color-dnrule );}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after{border-block-start-style:solid;border-block-start-width:1px;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-style:solid;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-inline-items .elementor-icon-list-item:not(:last-child):after{border-inline-start-width:1px;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-item > a{font-family:"Public Sans", sans-serif;font-size:13px;font-weight:600;}.elementor-990524 .elementor-element.elementor-element-11b8f578 .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-990524 .elementor-element.elementor-element-11b65b21{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:6px 10px;--row-gap:6px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), sans-serif;font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted, .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before, .elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), sans-serif;font-weight:var( --e-global-typography-accent-font-weight );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-990524 .elementor-element.elementor-element-1e8088ea{width:initial;max-width:initial;}.elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu .elementor-item{font-family:"Public Sans", sans-serif;font-size:14px;font-weight:600;}.elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item{color:#3D3D3D;fill:#3D3D3D;padding-left:8px;padding-right:8px;padding-top:2px;padding-bottom:2px;}.elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item:hover, .elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item.highlighted, .elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-primary );fill:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-1e8088ea .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-45095fe1{width:initial;max-width:initial;}.elementor-990524 .elementor-element.elementor-element-45095fe1 .elementor-icon-wrapper{text-align:center;}.elementor-990524 .elementor-element.elementor-element-45095fe1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-45095fe1.elementor-view-framed .elementor-icon, .elementor-990524 .elementor-element.elementor-element-45095fe1.elementor-view-default .elementor-icon{color:var( --e-global-color-accent );border-color:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-45095fe1.elementor-view-framed .elementor-icon, .elementor-990524 .elementor-element.elementor-element-45095fe1.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-45095fe1 .elementor-icon{font-size:15px;}.elementor-990524 .elementor-element.elementor-element-45095fe1 .elementor-icon svg{height:15px;}.elementor-990524 .elementor-element.elementor-element-18d48e9a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:var( --e-global-color-dnrule );--border-color:var( --e-global-color-dnrule );--padding-top:14px;--padding-bottom:14px;--padding-left:0px;--padding-right:0px;}.elementor-990524 .elementor-element.elementor-element-18d48e9a:not(.elementor-motion-effects-element-type-background), .elementor-990524 .elementor-element.elementor-element-18d48e9a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-dnwhite );}.elementor-990524 .elementor-element.elementor-element-27047240{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:12px 26px;--row-gap:12px;--column-gap:26px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-990524 .elementor-element.elementor-element-448e74dc{width:initial;max-width:initial;text-align:start;}.elementor-990524 .elementor-element.elementor-element-448e74dc img{width:180px;}.elementor-990524 .elementor-element.elementor-element-791429c7{width:initial;max-width:initial;--nav-menu-icon-size:22px;}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-menu-toggle{margin:0 auto;}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu .elementor-item{font-family:"Public Sans", sans-serif;font-size:15px;font-weight:500;}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );padding-left:11px;padding-right:11px;padding-top:10px;padding-bottom:10px;}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item:hover, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-791429c7 .e--pointer-framed .elementor-item:before, .elementor-990524 .elementor-element.elementor-element-791429c7 .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:before, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item.elementor-item-active:after{background-color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-791429c7 .e--pointer-framed .elementor-item.elementor-item-active:before, .elementor-990524 .elementor-element.elementor-element-791429c7 .e--pointer-framed .elementor-item.elementor-item-active:after{border-color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-menu-toggle{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown{background-color:var( --e-global-color-dnwhite );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a:hover, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a:focus, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a.elementor-item-active, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a.highlighted, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-menu-toggle:hover, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-menu-toggle:focus{color:var( --e-global-color-primary );}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown .elementor-item, .elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown .elementor-sub-item{font-family:"Public Sans", sans-serif;font-size:16px;font-weight:500;}.elementor-990524 .elementor-element.elementor-element-791429c7 .elementor-nav-menu--dropdown a{padding-left:24px;padding-right:24px;padding-top:15px;padding-bottom:15px;}.elementor-990524 .elementor-element.elementor-element-791429c7 div.elementor-menu-toggle{color:var( --e-global-color-accent );}.elementor-990524 .elementor-element.elementor-element-791429c7 div.elementor-menu-toggle svg{fill:var( --e-global-color-accent );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), sans-serif;font-weight:var( --e-global-typography-accent-font-weight );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-990524 .elementor-element.elementor-element-510ab534 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Public Sans", sans-serif;font-size:15px;font-weight:700;fill:var( --e-global-color-dnwhite );color:var( --e-global-color-dnwhite );border-radius:4px 4px 4px 4px;padding:13px 24px 13px 24px;}.elementor-990524 .elementor-element.elementor-element-510ab534 .elementor-button:hover, .elementor-990524 .elementor-element.elementor-element-510ab534 .elementor-button:focus{background-color:var( --e-global-color-dngrndp );color:#FFFFFF;}.elementor-990524 .elementor-element.elementor-element-510ab534{width:initial;max-width:initial;}.elementor-990524 .elementor-element.elementor-element-510ab534 .elementor-button:hover svg, .elementor-990524 .elementor-element.elementor-element-510ab534 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-990524 .elementor-element.elementor-element-72a7171{--content-width:1200px;}.elementor-990524 .elementor-element.elementor-element-27047240{--content-width:1200px;}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-button .elementor-button{letter-spacing:var( --e-global-typography-accent-letter-spacing );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item{letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-widget-theme-site-logo .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-button .elementor-button{letter-spacing:var( --e-global-typography-accent-letter-spacing );}}/* Start custom CSS *//* * DNExpress — HEADER design layer. * * INSTALL * WPCode > + Add Snippet > Add Your Custom Code (New Snippet) * Title: DNExpress - Header design layer * Code Type: CSS Snippet * Location: Site Wide Header * Save, Activate. * * ⚠ PASTE THIS BEFORE RE-IMPORTING header.json, not after. The new template deliberately * carries no inline colours (non-negotiable 1), so between the import and this snippet the * announcement-bar link would inherit the kit's green `a` colour and go green-on-green. * CSS first, template second, and there is never an ugly window. * * ── WHY THIS FILE EXISTS ───────────────────────────────────────────────────── * Until now there was NO header stylesheet on this project. Every pixel of the header lived in * Elementor widget settings, which is why the one element that appears on all 32 pages, all 146 * blog posts and the whole WooCommerce flow was also the one element carrying none of the paper, * guilloche, foil and thread language that everything beneath it uses. * * ── DESIGN INTENT — "the head of the document" ─────────────────────────────── * An official document does not start with a navigation bar. It starts with a security band, * then an issuing-authority line, then the masthead with the seal. The three header rows already * had exactly that shape; they simply were not dressed as it. * * Row 1 SECURITY BAND green field, white guilloche engraving, foil hairline at its foot * Row 2 ISSUING LINE the contact record, set as a register with hairline dividers * Row 3 MASTHEAD logo, navigation, action — and the one moment of motion * * The one thing to remember: the masthead wears a GOLD FOIL HAIRLINE at rest, and the instant * it sticks that hairline crossfades into the house TRICOLOUR THREAD, drawn left to right. The * document seals itself as you read down it. That thread is not a new motif — it is the same * green/white/red thread homepage.css already draws across service cards on hover, so the header * finally speaks the site's own language instead of standing outside it. * * It also fixes a real defect: the masthead has been sticky on staging since someone added it in * the editor, but with no state change at all — it just sat there. A sticky header that gives no * feedback reads as a rendering bug. * * ── SCOPE ──────────────────────────────────────────────────────────────────── * This snippet loads SITE WIDE (gotcha 18). Every .elementor-990524 below is anchored to a `dn-hdr-*` * class emitted by build-templates.js, so nothing here can reach page content. * * NO DARK MODE. Light only, by decision. Never add a prefers-color-scheme block here. */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · TOKENS Declared on the header's own classes, not :root, so this file is SELF-SUFFICIENT. The header must never depend on a page snippet's load order — it renders above the fold on every request, including ones where homepage.css is not the page layer. ═══════════════════════════════════════════════════════════════════════════ */ .dn-hdr { --dn-hdr-green: var(--e-global-color-primary, #0E7A3E); --dn-hdr-green-deep: var(--e-global-color-dngrndp, #0A5C2E); --dn-hdr-ink: var(--e-global-color-accent, #2C2C2C); --dn-hdr-body: var(--e-global-color-text, #666666); --dn-hdr-rule: var(--e-global-color-dnrule, #E4E4E4); --dn-hdr-gold: var(--e-global-color-dnfoil, #A8862E); --dn-hdr-red: var(--e-global-color-secondary, #CC1212); --dn-hdr-ease: cubic-bezier(0.2, 0.7, 0.3, 1); /* The house thread: green, white, red in flag order, equal thirds. Equal thirds matter — the mark carries both national identities at equal weight and neither may dominate. */ --dn-hdr-thread: linear-gradient( to right, var(--dn-hdr-green) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--dn-hdr-red) 66.66% 100% ); /* Paper tooth. Same fractal noise the page layer uses, redeclared locally. */ --dn-hdr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); /* Guilloche rosette, stroked WHITE. gotcha 38: the shared --dn-guilloche is stroked #0E7A3E, so on a green band it is green-on-green and reads as no pattern at all. The published remedy is a white filter; authoring the asset in the right ink instead is cheaper and has no filter side-effects. */ --dn-hdr-guilloche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='0.7'%3E%3Ccircle cx='120' cy='120' r='112'/%3E%3Ccircle cx='120' cy='120' r='96'/%3E%3Ccircle cx='120' cy='120' r='52'/%3E%3Cg transform='translate(120 120)'%3E%3Cellipse rx='92' ry='38'/%3E%3Cellipse rx='92' ry='38' transform='rotate(15)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(30)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(45)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(60)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(75)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(90)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(105)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(120)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(135)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(150)'/%3E%3Cellipse rx='92' ry='38' transform='rotate(165)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · ROW 1 — THE SECURITY BAND A flat fill reads as unfinished (gotcha 25). This is the FIRST green band a visitor meets on every page of the site and it had no tooth at all. ═══════════════════════════════════════════════════════════════════════════ */ .dn-hdr-announce { position: relative; overflow: hidden; isolation: isolate; background-image: var(--dn-hdr-grain); background-repeat: repeat; background-size: 160px 160px; background-blend-mode: overlay; } /* Engraved rosettes, repeated across the band and fading toward the centre so the copy always sits on clean ground. Explicit background-size — never `cover` here (gotcha 11). */ .dn-hdr-announce::before { content: ""; position: absolute; inset: 0; background-image: var(--dn-hdr-guilloche); background-repeat: repeat-x; background-size: 190px 190px; background-position: center; opacity: 0.09; -webkit-mask-image: linear-gradient(to right, #000 0, transparent 34%, transparent 66%, #000 100%); mask-image: linear-gradient(to right, #000 0, transparent 34%, transparent 66%, #000 100%); pointer-events: none; z-index: 0; } /* Foil edge. A real document's security band is bounded by a foil rule, not by nothing. */ .dn-hdr-announce::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dn-hdr-gold); opacity: 0.45; pointer-events: none; z-index: 2; } .dn-hdr-announce-text { position: relative; z-index: 1; } .dn-hdr-announce .dn-hdr-announce-text p { margin: 0; text-align: center; font-size: clamp(0.75rem, 0.705rem + 0.18vw, 0.8125rem); line-height: 1.5; letter-spacing: 0.012em; color: rgba(255, 255, 255, 0.93); } /* The link. gotcha 34: the kit owns `a` at (0,1,1) and `a:hover` at (0,2,1), both green. Green on a green band is invisible, so BOTH states have to be beaten. The .elementor-990524s below run (0,3,2), which clears the hover tie as well as the resting one. The underline is drawn as a background gradient rather than text-decoration so it can be given foil colour and can thicken on hover. */ .dn-hdr-announce .dn-hdr-announce-text p a, .dn-hdr-announce .dn-hdr-announce-text p a:link, .dn-hdr-announce .dn-hdr-announce-text p a:visited { position: relative; margin-left: 1.65em; color: #FFFFFF; font-weight: 700; text-decoration: none; background-image: linear-gradient(var(--dn-hdr-gold), var(--dn-hdr-gold)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%; padding-bottom: 2px; transition: background-size 0.35s var(--dn-hdr-ease), background-image 0.3s ease; } /* The em dash restores the separation the 👉 emoji used to provide. It is punctuation drawn by the presentation layer, not a word added to the copy — the sentence itself is untouched. Positioned absolutely so the foil underline stays under the words and not under the dash. */ .dn-hdr-announce .dn-hdr-announce-text p a::before { content: "\2014"; position: absolute; left: -1.2em; top: 0; color: rgba(255, 255, 255, 0.42); font-weight: 400; letter-spacing: 0; } .dn-hdr-announce .dn-hdr-announce-text p a:hover, .dn-hdr-announce .dn-hdr-announce-text p a:focus { color: #FFFFFF; background-image: linear-gradient(#FFFFFF, #FFFFFF); background-size: 100% 2px; } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ROW 2 — THE ISSUING LINE Was one

that used     as its layout mechanism. It is now a real icon-list, so this section is mostly a SAFETY NET: gotcha 31 says a guessed control name ships the default in silence, and icon-list is a widget this project has not built with before. Every value set in the template is restated here, scoped. If a control name is wrong, the design still lands. ═══════════════════════════════════════════════════════════════════════════ */ .dn-hdr-contact { position: relative; } .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 0; } .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { margin: 0; padding: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.005em; line-height: 1.4; } /* One divider, not two. This restyles the SAME ::after Elementor's own divider control uses, so whether that control landed or silently defaulted, exactly one hairline is drawn. */ .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child)::after { content: ""; position: static; align-self: center; height: 13px; margin: 0 0 0 20px; border-left: 1px solid var(--dn-hdr-rule); border-right: 0; border-top: 0; border-bottom: 0; } .dn-hdr-contactlist .elementor-icon-list-icon svg, .dn-hdr-contactlist .elementor-icon-list-icon i { width: 12px; height: 12px; font-size: 12px; fill: var(--dn-hdr-green); color: var(--dn-hdr-green); transition: transform 0.25s var(--dn-hdr-ease); } /* Beat the kit on both states (gotcha 34). These run (0,3,1) resting and (0,4,1) on hover. */ .dn-hdr-contactlist .elementor-icon-list-item a, .dn-hdr-contactlist .elementor-icon-list-item a:link, .dn-hdr-contactlist .elementor-icon-list-item a:visited { color: var(--dn-hdr-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; transition: color 0.22s ease; } .dn-hdr-contactlist .elementor-icon-list-item a:hover, .dn-hdr-contactlist .elementor-icon-list-item a:focus { color: var(--dn-hdr-green); } .dn-hdr-contactlist .elementor-icon-list-item a:hover .elementor-icon-list-icon svg { transform: translateY(-1px); } /* ⚠ The language switcher must NEVER collapse into a burger. nav-menu defaults to `toggle: burger` and honours the dropdown breakpoint regardless of how many items the menu has — so below 1024px the one-item Polylang switcher grew a hamburger of its own, and mobile rendered TWO hamburgers, one of them in the contact row (2026-08-26). This is the one place in this file where declaring `display` on a menu-toggle is correct: the .dn-hdr-nav toggle must be left alone because Elementor decides when to show it, but this one is never wanted at any width. !important is required to beat Elementor's own breakpoint rule. build-templates.js now also sets dropdown:'none' on this widget, which produces the same result at the template level; these two rules are what make it true today without a re-import, and they stay as the belt to that braces. */ .dn-hdr-lang .elementor-menu-toggle { display: none !important; } .dn-hdr-lang nav.elementor-nav-menu--main { display: block !important; } .dn-hdr-lang nav.elementor-nav-menu--dropdown { display: none !important; } /* Language switcher: quiet at rest, and its Polylang flag image sized so it cannot push the row taller than the phone numbers. */ .dn-hdr-lang .elementor-nav-menu img { width: 15px; height: auto; border-radius: 1px; vertical-align: -1px; } .dn-hdr-lang .elementor-nav-menu .elementor-item { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; } /* ── The right-hand action group: switcher + cart ────────────────────────── An Elementor container is width:100% by default. On this space-between row that would claim the whole line and drive the contact record onto a row of its own, so the group has to be told to shrink to its contents. This lives here rather than in the template because the container width/flex control names are unverifiable from outside (gotcha 31) and a guessed name would ship the default in silence — CSS is the layer that can be proven. */ .dn-hdr-contact .dn-hdr-actions { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px; width: auto !important; flex: 0 0 auto !important; } /* The cart. One icon, no label, no count — so it has to read as tappable on its own. It gets a 44px touch target (the same minimum the masthead's controls use) without growing the row, because the padding is optical only and the row's height is set by the phone numbers. */ .dn-hdr-cart .elementor-icon-wrapper { display: flex; align-items: center; } .dn-hdr-cart .elementor-icon, .dn-hdr-cart .elementor-icon:link, .dn-hdr-cart .elementor-icon:visited { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 0; color: var(--dn-hdr-ink); transition: color 0.22s ease, transform 0.22s var(--dn-hdr-ease); } .dn-hdr-cart .elementor-icon svg, .dn-hdr-cart .elementor-icon i { width: 15px; height: 15px; font-size: 15px; fill: currentColor; } /* gotcha 34: the kit owns `a` at (0,1,1) and `a:hover` at (0,2,1), both green. The resting state above already runs (0,2,1); the hover pair below repeats .dn-hdr-cart to reach (0,3,1) so the hover tie is cleared too, not just the resting one. Green IS the wanted hover colour here — but it has to be won on purpose, or the next kit change silently owns it. */ .dn-hdr-cart.dn-hdr-cart .elementor-icon:hover, .dn-hdr-cart.dn-hdr-cart .elementor-icon:focus-visible { color: var(--dn-hdr-green); transform: translateY(-1px); } .dn-hdr-cart.dn-hdr-cart .elementor-icon:focus-visible { outline: 2px solid var(--dn-hdr-green); outline-offset: 3px; border-radius: 2px; } /* ═══════════════════════════════════════════════════════════════════════════ 4 · ROW 3 — THE MASTHEAD, AND THE SEAL ═══════════════════════════════════════════════════════════════════════════ */ .dn-hdr-mast { position: relative; transition: padding 0.38s var(--dn-hdr-ease), box-shadow 0.38s ease, background-color 0.38s ease; } /* At rest: a foil hairline, laid over the template's 1px structural border. */ .dn-hdr-mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--dn-hdr-gold); opacity: 0.4; transition: opacity 0.45s ease; pointer-events: none; z-index: 3; } /* Stuck: the thread. Drawn left to right, once, the moment the masthead lifts off the page. 3px, NOT 2px, and the number is not free-hand: it is footer.css's `.dn-ftr-legal::after`, the thread the page closes on. The two are meant to read as one figure — the document opens on a security band and closes on the thread — and at 2px against the footer's 3px the masthead's copy read as a hairline artefact rather than as the same mark. Changed 2026-08-27 on the user's report that it looked "very thin" beside the footer's. ⚠ If the footer's close rule ever moves off 3px, this moves with it. */ .dn-hdr-mast::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--dn-hdr-thread); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--dn-hdr-ease); pointer-events: none; z-index: 4; } /* ── The masthead outranks every other sticky element ────────────────────── ⚠ A TIE, NOT A MISSING VALUE. Reported 2026-09-11: on a blog post the sidebar CTA rides OVER the header instead of sliding under it. Measured with getComputedStyle on a scrolled post: 18d48e9a fixed z=99 <- the masthead 723bfeb5 absolute z=99 <- the post sidebar, sticky_parent: yes Both are Elementor sticky containers and Elementor gives both the SAME 99, so nothing decides the stacking except document order — and the sidebar comes later in the DOM, so it paints on top. The second `relative z=auto` row per id is the sticky SPACER clone, which is why this is scoped to `--active`: putting a z-index on the spacer would give a positioned, invisible box its own stacking order over real content. Raising the masthead rather than lowering the sidebar, because the fix should hold for any sticky element added to any page later, not just this one. !important and the doubled class for the reason given below: Elementor's own rule for this container is (0,2,0), the same as this .elementor-990524, and a tie decided by sheet order is a coin flip under FlyingPress. */ .dn-hdr-mast.elementor-sticky--active { z-index: 200 !important; } /* Elementor Pro adds .elementor-sticky--effects once scroll passes sticky_effects_offset, which build-templates.js now sets to 40. At the old value of 0 this class never had a distinct moment to fire on, which is why the sticky header had no state. !important throughout: Elementor's own generated rule for this container is (0,2,0), the same as these .elementor-990524s, and open decision 33 says FlyingPress may reorder the sheets. A tie decided by load order is a coin flip. */ .dn-hdr-mast.elementor-sticky--effects { padding-top: 8px !important; padding-bottom: 8px !important; background-color: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 1px 2px rgba(20, 30, 24, 0.06), 0 16px 32px -20px rgba(20, 30, 24, 0.32); } /* backdrop-filter on a sticky element repaints the layer behind it on every scroll frame, which is a real cost on low-end Android — and this audience is mobile-heavy. Desktop only. Phones get the same 94% white; they simply do not get the blur behind it. */ @media (min-width: 768px) { .dn-hdr-mast.elementor-sticky--effects { -webkit-backdrop-filter: saturate(1.35) blur(10px); backdrop-filter: saturate(1.35) blur(10px); } } .dn-hdr-mast.elementor-sticky--effects::before { transform: scaleX(1); } .dn-hdr-mast.elementor-sticky--effects::after { opacity: 0; } /* The mark shrinks with the band, so the proportions hold rather than the logo suddenly dominating a shallower masthead. */ .dn-hdr-logo img { transition: max-width 0.38s var(--dn-hdr-ease); } .dn-hdr-mast.elementor-sticky--effects .dn-hdr-logo img { max-width: 146px !important; } /* ── Navigation ──────────────────────────────────────────────────────────── Eight items at a fixed 15px with fixed 11px padding is tight in English and will not fit in Spanish: CLAUDE.md puts Spanish 20-25% longer, so "Consultation" becomes "Consulta gratuita" and "Mail us" becomes "Envíanos tus documentos". Phase 6 would have inherited an overflowing nav. Fluid size and padding buy that slack now, and nowrap stops any item breaking mid-word on the way down. */ .dn-hdr-nav .elementor-nav-menu--main .elementor-item { font-size: clamp(0.8125rem, 0.70rem + 0.30vw, 0.9375rem) !important; padding-left: clamp(6px, 0.05rem + 0.58vw, 12px) !important; padding-right: clamp(6px, 0.05rem + 0.58vw, 12px) !important; letter-spacing: 0.005em; white-space: nowrap; transition: color 0.22s ease; } /* The hover underline was CTA-red. Red is reserved for calls to action, and an underline under every hovered nav item spent that colour on navigation — by the time a visitor reached "Start Now" the red no longer meant anything. Green here; the template sets it too, this is the backup that survives a control-name miss. */ .dn-hdr-nav .e--pointer-underline .elementor-item::before, .dn-hdr-nav .e--pointer-underline .elementor-item::after { background-color: var(--dn-hdr-green) !important; height: 2px !important; } /* Where you are. The menu previously styled hover and current-page identically, so the header never told a visitor which of eight pages they were on. */ .dn-hdr-nav .elementor-nav-menu--main .current-menu-item > .elementor-item, .dn-hdr-nav .elementor-nav-menu--main .current-menu-ancestor > .elementor-item { color: var(--dn-hdr-ink) !important; font-weight: 600 !important; } .dn-hdr-nav .elementor-nav-menu--main .current-menu-item > .elementor-item::after, .dn-hdr-nav .elementor-nav-menu--main .current-menu-ancestor > .elementor-item::after { background-color: var(--dn-hdr-green) !important; transform: scaleX(1) !important; opacity: 1 !important; } /* ── The action ────────────────────────────────────────────────────────── */ .dn-hdr-cta .elementor-button { letter-spacing: 0.02em; box-shadow: 0 1px 2px rgba(10, 60, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15); transition: transform 0.24s var(--dn-hdr-ease), box-shadow 0.24s ease, background-color 0.24s ease; } .dn-hdr-cta .elementor-button:hover, .dn-hdr-cta .elementor-button:focus { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(10, 60, 30, 0.2), 0 12px 22px -12px rgba(10, 60, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .dn-hdr-cta .elementor-button:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(10, 60, 30, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.16); } /* ═══════════════════════════════════════════════════════════════════════════ 5 · MOBILE ═══════════════════════════════════════════════════════════════════════════ */ /* A 44px target, per WCAG 2.5.8. The burger was a bare 22px icon. ⚠ NEVER DECLARE `display` HERE. Elementor hides this toggle on desktop with its own `display: none`, and any display declaration in this block runs at (0,2,0) and overrides that — which put a live hamburger under the desktop navigation on 2026-08-26. Elementor already sets the flex centring itself when the toggle is visible, so min-width/min-height are all that is needed, and they are inert while the element is hidden. Sizing it this way rather than re-showing it inside a max-width query also means the rule keeps working if the nav's dropdown breakpoint is ever moved off tablet. */ .dn-hdr-nav .elementor-menu-toggle { min-width: 44px; min-height: 44px; border-radius: 4px; transition: background-color 0.2s ease; } .dn-hdr-nav .elementor-menu-toggle:hover { background-color: rgba(14, 122, 62, 0.07); } /* ── THE OPEN PANEL ──────────────────────────────────────────────────────── ⚠ THIS SECTION OWNS THE DROPDOWN OUTRIGHT, AND THAT IS DELIBERATE. build-templates.js has carried dropdown_background_color / dropdown_color_menu_item / dropdown_color_menu_item_hover since 2026-08-19. Those are not Elementor's control names for that section, so every one of them was ignored in silence and the widget DEFAULT shipped (gotcha 31) - which is why the mobile menu opened looking untouched while the desktop header looked designed. The template names are corrected, but control names cannot be verified from outside this install, so the design is not left resting on them a second time: everything below is expressed in CSS, where the render is the proof. The !important marks are load-bearing for the same reason - they have to beat both Elementor's own dropdown rules and whatever its defaults put there. The panel is a sheet of paper laid over the page: the house thread across its head, hairlines between items, and real elevation so it never merges into the content behind it. */ .dn-hdr-nav .elementor-nav-menu--dropdown { background-color: #FFFFFF !important; background-image: var(--dn-hdr-thread); background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 0; box-shadow: 0 20px 38px -22px rgba(20, 30, 24, 0.45); /* Eight items clear a phone, but the masthead is sticky and the panel opens beneath it, so it is given a ceiling and its own scroll rather than running off the bottom of the screen. */ max-height: calc(100vh - 108px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Beat the kit on both states (gotcha 34): (0,4,1) resting, (0,5,1) on hover. */ .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item, .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:link, .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:visited { position: relative; display: block; font-family: var(--e-global-typography-text-font-family, "Public Sans"), -apple-system, "Segoe UI", sans-serif; font-size: 1rem !important; font-weight: 500 !important; line-height: 1.35; letter-spacing: 0.005em; color: var(--dn-hdr-ink) !important; background-color: transparent !important; padding: 15px 24px !important; border-bottom: 1px solid var(--dn-hdr-rule); transition: color 0.22s ease, background-color 0.22s ease, padding-left 0.22s var(--dn-hdr-ease); } /* A green marker that wipes down the left edge on touch, and stays put on the current page. Safe to use ::before here: the pointer effect only ever lands on the MAIN nav, which carries .e--pointer-underline - the dropdown never does, so these pseudo-elements are free. */ .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dn-hdr-green); transform: scaleY(0); transform-origin: center top; transition: transform 0.25s var(--dn-hdr-ease); } .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:hover::before, .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:focus::before, .dn-hdr-nav .elementor-nav-menu--dropdown .current-menu-item > a.elementor-item::before, .dn-hdr-nav .elementor-nav-menu--dropdown .current-menu-ancestor > a.elementor-item::before { transform: scaleY(1); } .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:hover, .dn-hdr-nav .elementor-nav-menu--dropdown a.elementor-item:focus { color: var(--dn-hdr-green) !important; background-color: rgba(14, 122, 62, 0.05) !important; padding-left: 28px !important; } .dn-hdr-nav .elementor-nav-menu--dropdown .current-menu-item > a.elementor-item, .dn-hdr-nav .elementor-nav-menu--dropdown .current-menu-ancestor > a.elementor-item { color: var(--dn-hdr-green) !important; font-weight: 600 !important; background-color: rgba(14, 122, 62, 0.04) !important; } .dn-hdr-nav .elementor-nav-menu--dropdown li:last-child > a.elementor-item { border-bottom: 0; } /* Nothing in primary-menu has children today. This is here so that the first submenu somebody adds in Appearance > Menus reads as nested instead of arriving unstyled. */ .dn-hdr-nav .elementor-nav-menu--dropdown .sub-menu a.elementor-item { padding-left: 42px !important; font-size: 0.9375rem !important; color: var(--dn-hdr-body) !important; } /* The burger itself, while the panel is open. */ .dn-hdr-nav .elementor-menu-toggle.elementor-active { background-color: rgba(14, 122, 62, 0.1); } /* ── The masthead is ONE row at every width ──────────────────────────────── Scoped to 1024, not 767: the burger appears at the nav's dropdown breakpoint, which is tablet, so the three-item fit problem starts there too. The container is flex_wrap:wrap, and logo + burger + "Start Now" do not fit a phone, so the CTA was dropping onto a second row and the masthead stood at two storeys. Reordering puts the action between the mark and the burger, where a thumb reaches it, and nowrap keeps the row honest. The CTA is NOT hidden on mobile — it is the conversion path. */ @media (max-width: 1024px) { .dn-hdr-mast .e-con-inner { flex-wrap: nowrap !important; justify-content: space-between !important; gap: 10px !important; } .dn-hdr-logo { order: 1; } .dn-hdr-cta { order: 2; margin-left: auto; } .dn-hdr-nav { order: 3; flex: 0 0 auto; } .dn-hdr-logo img { max-width: 158px !important; } } @media (max-width: 767px) { /* Chrome density. Five stacked rows of header before the page began was a lot of a small screen; with the phantom switcher-burger gone and the masthead down to one row this is three tight rows, and no affordance was dropped to get there. */ .dn-hdr-announce { padding-top: 7px !important; padding-bottom: 7px !important; } .dn-hdr-announce .dn-hdr-announce-text p { line-height: 1.45; } .dn-hdr-contact { padding-top: 5px !important; padding-bottom: 5px !important; } .dn-hdr-mast { padding-top: 10px !important; padding-bottom: 10px !important; } /* The email address goes. Tapping a phone number is the mobile action; an email address is a 26-character string nobody types on a phone, and it is still one tap away in the footer. Anchored to the class, and matched on the item's own href rather than its position, so reordering the list in the editor cannot break it (gotcha 9). */ .dn-hdr-contactlist .elementor-icon-list-item:has(a[href^="mailto:"]) { display: none; } /* Both numbers on ONE line. At 13px the pair plus its divider overran a 375px viewport and broke to two rows; 12px with a tighter gap brings them back onto one. The switcher then takes its own centred line beneath, which is two rows for the whole contact record. */ .dn-hdr-contact .e-con-inner { flex-direction: column !important; align-items: center !important; gap: 3px !important; } .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items { justify-content: center; gap: 0 12px; } .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item { font-size: 0.75rem; } .dn-hdr-contactlist .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child)::after { margin-left: 12px; height: 11px; } .dn-hdr-contactlist .elementor-icon-list-icon svg, .dn-hdr-contactlist .elementor-icon-list-icon i { width: 11px; height: 11px; font-size: 11px; } .dn-hdr-contactlist .elementor-icon-list-item a { padding: 3px 0; } .dn-hdr-lang .elementor-nav-menu .elementor-item { font-size: 0.6875rem; } /* The contact row stacks into a centred column here, so the switcher and the cart take that second line together. The cart tracks the switcher down rather than staying at desktop size and becoming the largest thing on the row. */ .dn-hdr-contact .dn-hdr-actions { gap: 8px; } .dn-hdr-cart .elementor-icon svg, .dn-hdr-cart .elementor-icon i { width: 13px; height: 13px; font-size: 13px; } /* The mark and the action, sized so the pair plus a 44px burger clears a 320px viewport. */ .dn-hdr-logo img { max-width: 132px !important; } .dn-hdr-cta .elementor-button { font-size: 0.8125rem !important; padding: 10px 15px !important; } } @media (max-width: 600px) { /* Below this the announcement wraps, and an absolutely-positioned dash can land at the fold. The link becomes its own line instead, which also gives it a proper tap target. */ .dn-hdr-announce .dn-hdr-announce-text p a { display: inline-block; margin-left: 0; margin-top: 4px; } .dn-hdr-announce .dn-hdr-announce-text p a::before { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 6 · FOCUS AND MOTION The header carried no visible focus state anywhere — not on the nav, not on the burger, not on the CTA. Eight nav items and three links, all invisible to a keyboard. ═══════════════════════════════════════════════════════════════════════════ */ .dn-hdr.dn-hdr a:focus-visible, .dn-hdr .elementor-item:focus-visible, .dn-hdr .elementor-button:focus-visible, .dn-hdr .elementor-menu-toggle:focus-visible { outline: 2px solid var(--dn-hdr-green); outline-offset: 3px; border-radius: 2px; } .dn-hdr-announce.dn-hdr-announce a:focus-visible { outline-color: #FFFFFF; } /* ═══════════════════════════════════════════════════════════════════════════ 7 · SPANISH The nav above was already built fluid against CLAUDE.md's "Spanish runs 20-25% longer". Measured against the real labels on 2026-09-04 it is worse than that: the eight English items are 58 characters, the eight Spanish ones from the client's own /es/ navigation are 83 — +43%, because "FAQ" becomes "Preguntas frecuentes" and "About us" becomes "Sobre nosotros". The burger arrives at 1024px, so 1025-1200px is where eight Spanish items, the logo and "Empezar ahora" have to share one row. Rather than move the dropdown breakpoint — section 5 deliberately does not depend on where it sits — this tightens the same three fluid values for Spanish only. ⚠ The base rule runs (0,3,0) !important, so this must out-specify it: `html[lang^="es"]` adds (0,1,1) for (0,4,1), and keeps the !important (gotcha 49). ⚠ Placed here, ABOVE the reduced-motion block, because that block must stay last in the file (gotcha 43). ⚠ Appearance is the screenshot's word, not curl's (decision 33) — this is sized from character counts and wants confirming on a Spanish desktop render at ~1100px. ═══════════════════════════════════════════════════════════════════════════ */ html[lang^="es"] .dn-hdr-nav .elementor-nav-menu--main .elementor-item { font-size: clamp(0.75rem, 0.66rem + 0.26vw, 0.875rem) !important; padding-left: clamp(4px, 0.02rem + 0.44vw, 9px) !important; padding-right: clamp(4px, 0.02rem + 0.44vw, 9px) !important; letter-spacing: 0; } /* The open mobile panel has a whole column and no fit problem, so it keeps the full size — shrinking it there would be a legibility loss bought for nothing. */ html[lang^="es"] .dn-hdr-nav .elementor-nav-menu--dropdown .elementor-item { font-size: 1rem !important; letter-spacing: 0; } @media (prefers-reduced-motion: reduce) { .dn-hdr, .dn-hdr *, .dn-hdr *::before, .dn-hdr *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* The thread is the sticky state's only signal, so it must still be PRESENT when motion is off — it simply arrives without being drawn. */ .dn-hdr-mast.elementor-sticky--effects::before { transform: scaleX(1); } }/* End custom CSS */