/* Dishio global Header/Footer shell for Elementor Theme Builder. * Fully scoped so it cannot restyle unrelated Elementor/theme content. */ .dishio-global-shell-header, .dishio-global-shell-footer{ --ink:#08090B;--ink2:#101216;--ink3:#171A20; --y:#FFD900;--yt:#FFD900;--m:#00FF88; --fg:255,255,255;--fgc:#fff;--bgc:8,9,11; --mut:rgba(var(--fg),.52);--mut2:rgba(var(--fg),.32); --f:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif; --ease:cubic-bezier(.16,1,.3,1); font-family:var(--f);color:var(--fgc) } html.light .dishio-global-shell-header, html.light .dishio-global-shell-footer{--yt:#6E5300;--ink:#F6F4EE;--ink2:#FFFFFF;--ink3:#ECE9E1;--fg:8,9,11;--fgc:#08090B;--bgc:246,244,238;--mut:rgba(8,9,11,.68);--mut2:rgba(8,9,11,.58);--m:#007A00} .dishio-global-shell-header *, .dishio-global-shell-footer *{box-sizing:border-box} .dishio-global-shell-header a, .dishio-global-shell-footer a{color:inherit;text-decoration:none} .dishio-global-shell-header a:hover, .dishio-global-shell-footer a:hover{color:inherit} .dishio-global-shell-header .wrap, .dishio-global-shell-footer .wrap{width:min(1320px,92vw);margin:0 auto;position:relative;z-index:3} /* Header */ .dishio-global-shell-header .nav{position:fixed;top:0;left:0;right:0;z-index:600;padding:20px 0;transition:.4s var(--ease)} .dishio-global-shell-header .nav.s{padding:12px 0;background:rgba(var(--bgc),.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(var(--fg),.07)} .dishio-global-shell-header .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px} .dishio-global-shell-header .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.16em;font-size:13px;flex:none} .dishio-global-shell-header .brand svg{width:24px;height:24px;fill:var(--fgc)} .dishio-global-shell-header .navl{display:flex;gap:4px;align-items:center} .dishio-global-shell-header .navl>a{font-size:13px;font-weight:700;padding:9px 14px;border-radius:100px;color:var(--mut);transition:.25s var(--ease);white-space:nowrap} .dishio-global-shell-header .navl>a:hover, .dishio-global-shell-header .navl>a.on{color:var(--fgc);background:rgba(var(--fg),.06)} .dishio-global-shell-header .dd{position:relative} .dishio-global-shell-header .ddb{font:inherit;font-size:13px;font-weight:700;padding:9px 12px 9px 14px;border-radius:100px;color:var(--mut);background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.25s var(--ease);white-space:nowrap} .dishio-global-shell-header .ddb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--ease)} .dishio-global-shell-header .dd:hover .ddb, .dishio-global-shell-header .dd.open .ddb, .dishio-global-shell-header .dd.on .ddb{color:var(--fgc);background:rgba(var(--fg),.06)} .dishio-global-shell-header .dd.open .ddb svg{transform:rotate(180deg)} .dishio-global-shell-header .ddm{position:absolute;top:calc(100% + 12px);left:0;min-width:300px;background:var(--ink2);border:1px solid rgba(var(--fg),.1);border-radius:20px;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.3s var(--ease);z-index:700} .dishio-global-shell-header .ddm::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .dishio-global-shell-header .dd.open .ddm{opacity:1;visibility:visible;transform:none} .dishio-global-shell-header .ddm a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;transition:.25s var(--ease)} .dishio-global-shell-header .ddm a b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--fgc)} .dishio-global-shell-header .ddm a span{font-size:12px;font-weight:600;color:var(--mut2)} .dishio-global-shell-header .ddm a:hover, .dishio-global-shell-header .ddm a.on{background:rgba(var(--fg),.06)} .dishio-global-shell-header .ddm a:hover b{color:var(--yt)} html.light .dishio-global-shell-header .ddm{box-shadow:0 30px 60px -20px rgba(0,0,0,.25)} .dishio-global-shell-header .navr{display:flex;align-items:center;gap:10px} .dishio-global-shell-header .chip{font-size:12.5px;font-weight:700;padding:11px 20px;border-radius:100px;border:1px solid rgba(var(--fg),.28);transition:.3s var(--ease);white-space:nowrap} .dishio-global-shell-header .chip:hover{background:var(--fgc);color:var(--ink);border-color:var(--fgc)} .dishio-global-shell-header .chip.solid{background:var(--y);color:#000;border-color:var(--y)} .dishio-global-shell-header .chip.solid:hover{transform:translateY(-2px);box-shadow:0 12px 30px -10px rgba(255,217,0,.6);color:#000} .dishio-global-shell-header .tgl{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--fg),.28);background:none;color:var(--fgc);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;transition:.3s var(--ease);padding:0} .dishio-global-shell-header .tgl:hover{border-color:var(--y);color:var(--yt);background:transparent} .dishio-global-shell-header .tgl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dishio-global-shell-header .tgl .sun{display:none} html.light .dishio-global-shell-header .tgl .sun{display:block} html.light .dishio-global-shell-header .tgl .moon{display:none} .dishio-global-shell-header .dishio-home-only{display:none} body.dishio-page-home .dishio-global-shell-header .dishio-home-only{display:flex} .dishio-global-shell-header .tgl .pause{display:none} .dishio-global-shell-header .tgl.playing .note{display:none} .dishio-global-shell-header .tgl.playing .pause{display:block} /* Footer */ .dishio-global-shell-footer footer{border-top:1px solid rgba(var(--fg),.08);padding:clamp(60px,7vw,96px) 0 40px;font-size:13.5px;color:var(--mut);font-weight:600;position:relative;z-index:3;background:var(--ink)} .dishio-global-shell-footer .ft{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));gap:40px 32px} .dishio-global-shell-footer .ft .ftb p{margin-top:18px;max-width:34ch;line-height:1.6} .dishio-global-shell-footer .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.16em;font-size:13px;flex:none;color:var(--fgc)} .dishio-global-shell-footer .brand svg{width:24px;height:24px;fill:var(--fgc)} .dishio-global-shell-footer .ft h5{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fgc);margin-bottom:18px} .dishio-global-shell-footer .ft ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0} .dishio-global-shell-footer .ft a{transition:.25s} .dishio-global-shell-footer .ft a:hover{color:var(--yt)} .dishio-global-shell-footer .ftsoc{display:flex;gap:10px;margin-top:22px} .dishio-global-shell-footer .ftsoc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--fg),.2);display:flex;align-items:center;justify-content:center;color:var(--fgc)} .dishio-global-shell-footer .ftsoc a:hover{border-color:var(--y);color:var(--yt)} .dishio-global-shell-footer .ftsoc svg{width:16px;height:16px;fill:currentColor} .dishio-global-shell-footer .ftlow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid rgba(var(--fg),.08);font-size:12px;color:var(--mut2)} .dishio-global-shell-footer .ftlow ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin:0;padding:0} .dishio-global-shell-footer .ftlow a{transition:.25s} .dishio-global-shell-footer .ftlow a:hover{color:var(--yt)} @media (max-width:1100px){ .dishio-global-shell-header .navl{display:none} } @media (max-width:980px){ .dishio-global-shell-footer .ft{grid-template-columns:1fr 1fr} .dishio-global-shell-footer .ft .ftb{grid-column:1/-1} } /* ------------------------------------------------------------------------- * Elementor Theme Builder hardening * ------------------------------------------------------------------------- * Keep the Dishio global shell visible when it is rendered by Theme Builder * and remove Elementor container spacing around the HTML widget. The page * itself must use Elementor Full Width (the child theme migrates enabled * Dishio pages from Canvas automatically). */ .dishio-global-shell-header, .dishio-global-shell-footer{ display:block!important; visibility:visible!important; opacity:1!important; } .elementor-location-header .elementor-widget-html, .elementor-location-header .elementor-widget-html .elementor-widget-container, .elementor-location-footer .elementor-widget-html, .elementor-location-footer .elementor-widget-html .elementor-widget-container{ margin:0!important; padding:0!important; } .elementor-location-header .dishio-global-shell-header, .elementor-location-footer .dishio-global-shell-footer{ width:100%!important; max-width:none!important; } /* Global shell responsive behavior. Desktop design is unchanged. */ @media (max-width:760px){ .dishio-global-shell-header .nav{padding:13px 0} .dishio-global-shell-header .nav.s{padding:10px 0} .dishio-global-shell-header .wrap, .dishio-global-shell-footer .wrap{width:min(1320px,94vw)} .dishio-global-shell-header .brand{font-size:12px;letter-spacing:.12em} .dishio-global-shell-header .brand svg{width:22px;height:22px} .dishio-global-shell-header .navr{gap:6px} .dishio-global-shell-header .navr .chip:not(.solid){display:none} .dishio-global-shell-header .chip.solid{font-size:11.5px;padding:9px 14px} .dishio-global-shell-header .tgl{width:34px;height:34px} } @media (max-width:520px){ .dishio-global-shell-header .dishio-home-only{display:none!important} .dishio-global-shell-footer .ft{grid-template-columns:1fr} .dishio-global-shell-footer .ft .ftb{grid-column:auto} .dishio-global-shell-footer .ftlow{align-items:flex-start;flex-direction:column} } /* ======================================================================== Case Studies Archive — light-mode header visibility guard ------------------------------------------------------------------------ The approved Case Studies archive is intentionally dark, while the global shell switches its text/logo tokens to dark ink in light mode. At the very top of the archive the nav is normally transparent, which can place dark header text over the dark archive hero. Keep the global header in its light scheme, but give only this archive route a light translucent nav surface so the header remains readable before and after scroll. This is deliberately scoped to the archive body class and does not touch Case Study singles or any normal WordPress page. ======================================================================== */ html.light body.dishio-page-case-studies .elementor-location-header{ color:#08090B!important; background:transparent!important; } html.light body.dishio-page-case-studies .dishio-global-shell-header .nav{ background:rgba(246,244,238,.92); border-bottom:1px solid rgba(8,9,11,.07); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); } html.light body.dishio-page-case-studies .dishio-global-shell-header .nav.s{ background:rgba(246,244,238,.94); border-bottom-color:rgba(8,9,11,.09); } html.light body.dishio-page-case-studies .dishio-global-shell-header .brand, html.light body.dishio-page-case-studies .dishio-global-shell-header .navl>a, html.light body.dishio-page-case-studies .dishio-global-shell-header .ddb, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip, html.light body.dishio-page-case-studies .dishio-global-shell-header .tgl{ text-decoration:none!important; } html.light body.dishio-page-case-studies .dishio-global-shell-header .brand svg{ fill:var(--fgc)!important; } html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid:link, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid:visited, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid:hover, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid:focus, html.light body.dishio-page-case-studies .dishio-global-shell-header .chip.solid:active{ color:#000!important; background:var(--y)!important; border-color:var(--y)!important; } /* ======================================================================== Normal WordPress pages — fixed Dishio shell (no Day/Night mode) ======================================================================== */ body.dishio-normal-page .dishio-global-shell-header, body.dishio-normal-page .dishio-global-shell-footer, html.light body.dishio-normal-page .dishio-global-shell-header, html.light body.dishio-normal-page .dishio-global-shell-footer{ --yt:#FFD900!important; --ink:#08090B!important; --ink2:#101216!important; --ink3:#15171D!important; --fg:255,255,255!important; --fgc:#FFFFFF!important; --bgc:8,9,11!important; --mut:rgba(255,255,255,.52)!important; --mut2:rgba(255,255,255,.32)!important; --m:#00E88F!important; } body.dishio-normal-page .dishio-global-shell-header .nav, body.dishio-normal-page .dishio-global-shell-header .nav.s{ background:#08090B!important; border-bottom:1px solid rgba(255,255,255,.08)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; } body.dishio-normal-page .dishio-global-shell-header .tgl{display:none!important} body.dishio-normal-page .dishio-global-shell-header .brand, body.dishio-normal-page .dishio-global-shell-header .navl>a, body.dishio-normal-page .dishio-global-shell-header .ddb, body.dishio-normal-page .dishio-global-shell-header .chip{text-decoration:none!important} body.dishio-normal-page .dishio-global-shell-header .brand svg{fill:#fff!important} body.dishio-normal-page .dishio-global-shell-header .chip.solid, body.dishio-normal-page .dishio-global-shell-header .chip.solid:link, body.dishio-normal-page .dishio-global-shell-header .chip.solid:visited, body.dishio-normal-page .dishio-global-shell-header .chip.solid:hover, body.dishio-normal-page .dishio-global-shell-header .chip.solid:focus, body.dishio-normal-page .dishio-global-shell-header .chip.solid:active{ background:#FFD900!important; border-color:#FFD900!important; color:#000!important; } body.dishio-normal-page .dishio-global-shell-footer footer{ background:#08090B!important; color:rgba(255,255,255,.52)!important; }