/* Generated from C:/_Dev/websites/macrohat_io_poc/src by internal/tools/odoo/gen_deploy_a.py. Do not hand-edit: regenerate. */
/* self-hosted: removes a third-party round trip from the critical path */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(/web/content/387/Archivo-400-latin.woff2) format('woff2');
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(/web/content/388/Archivo-500-latin.woff2) format('woff2');
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(/web/content/389/Archivo-600-latin.woff2) format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/web/content/390/DMMono-400-latin.woff2) format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/web/content/391/DMMono-500-latin.woff2) format('woff2');
}
:root{
--bg:#e8eae8; --panel:#f0f2f0; --ink:#12151a; --ink2:#4b5359;
--rule:#c6cbc7; --ac:#1a3f6b; --ac-ink:#e8eae8;
--sans:Archivo,ui-sans-serif,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
--t-label:11px; --t-body:16.5px; --t-lead:20px; --t-h3:27px; --t-h2:36px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:192px;
--gut:clamp(20px,3.2vw,56px); --max:1440px;
--ease:cubic-bezier(.2,0,0,1);
--mast-h:calc(var(--s4) + var(--s3) + 44px + 1px);
}
@media (min-width:1441px){:root{ --max:clamp(1440px,78vw,1920px); }}
.mh, .mh *{box-sizing:border-box}
.mh{-webkit-text-size-adjust:100%}
.mh{margin:0;background:var(--bg);color:var(--ink);
font:400 var(--t-body)/1.62 var(--sans);-webkit-font-smoothing:antialiased}
.mh h1, .mh h2, .mh h3, .mh p, .mh ul, .mh ol, .mh dl, .mh dd, .mh table, .mh figure{margin:0}
.mh a{color:inherit}
.mh :focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.mh .skip{position:absolute;left:0;top:0;transform:translateY(-200%);background:var(--ink);color:var(--bg);
padding:var(--s3) var(--s4);min-height:44px;display:inline-flex;align-items:center;font:500 var(--t-body)/1 var(--sans);z-index:99}
.mh .skip:focus{transform:none;left:var(--s4);top:var(--s2)}
.mh .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mh .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mh .label{font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.mh .mast{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--rule)}
.mh .mast .wrap{display:flex;align-items:center;min-height:44px;gap:var(--s6);flex-wrap:wrap;padding-top:var(--s4);padding-bottom:var(--s3)}
.mh .mark{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font:600 var(--t-lead)/1 var(--sans);letter-spacing:-.022em;text-decoration:none}
.mh .nav{margin-inline-start:auto;display:flex;gap:var(--s5)}
.mh .nav a{display:inline-flex;align-items:center;min-height:44px;font:500 var(--t-body)/1 var(--sans);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .16s var(--ease)}
.mh .nav a:hover{border-bottom-color:var(--ac)}
.mh .lang{font:400 var(--t-label)/1 var(--mono);letter-spacing:.07em;color:var(--ink2);white-space:nowrap;flex:0 0 auto}
.mh .lang a{display:inline-flex;align-items:center;min-height:44px}
.mh .burger{display:none;font:500 var(--t-body)/1 var(--sans)}
.mh .hero{position:relative;min-height:760px;display:flex;flex-direction:column}
@media (min-width:1100px){.mh .hero:has(.strip){min-height:calc(100vh - var(--mast-h))}
.mh .hero:has(.strip){min-height:calc(100svh - var(--mast-h))}}
.mh .hero::before, .mh .hero::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;
opacity:.5;z-index:1}
.mh .hero::before{top:var(--s7);inset-inline-end:var(--gut);border-top:1px solid var(--ink);border-inline-end:1px solid var(--ink)}
.mh .hero::after{bottom:var(--s9);inset-inline-end:var(--gut);border-bottom:1px solid var(--ink);border-inline-end:1px solid var(--ink)}
.mh #cloud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mh .hero .wrap{position:relative;z-index:2;flex:1;width:100%;display:flex;flex-direction:column;padding-top:var(--s9)}
.mh .hero-copy{max-width:40ch}
.mh .eyebrow{margin-bottom:var(--s5)}
.mh h1{font:600 clamp(38px,3.7vw,52px)/1.05 var(--sans);letter-spacing:-.03em;text-wrap:balance}
@media (min-width:1441px){.mh h1{font-size:clamp(52px,2.74vw,70px)}}
.mh h1 em{font-style:normal;color:var(--ac)}
.mh .lede{margin-top:var(--s5);color:var(--ink2);font-size:var(--t-lead);max-width:44ch}
.mh .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.mh .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s5);
font:500 var(--t-body)/1 var(--sans);text-decoration:none;border:1px solid var(--ink);
background:var(--ink);color:var(--bg);border-radius:0;
transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease)}
.mh .btn:hover{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.mh .btn--g{background:transparent;color:var(--ink)}
.mh .btn--g:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.mh .btn--l{background:var(--bg);border-color:var(--bg);color:var(--ink)}
.mh .btn--l:hover{background:var(--ac);border-color:var(--ac);color:var(--ac-ink)}
.mh .readout{position:absolute;inset-inline-end:var(--gut);top:var(--s9);width:clamp(270px,19vw,360px);text-align:end;
font:400 var(--t-label)/2 var(--mono);letter-spacing:.05em;color:var(--ink2);z-index:2}
.mh .readout b{color:var(--ink);font-weight:500;font-size:var(--t-body);letter-spacing:0;
font-family:var(--sans);display:block;line-height:1.3}
.mh .readout .n{color:var(--ac);font-weight:500}
.mh .strip{margin-top:auto;border-top:1px solid var(--ink);display:flex;padding-bottom:var(--s7)}
.mh .strip button{
flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
text-align:start;background:none;border:0;border-inline-end:1px solid var(--rule);
padding:var(--s3) var(--s3) var(--s4) var(--s2);font:inherit;color:inherit;cursor:pointer;
transition:background .16s var(--ease)}
.mh .strip button:last-child{border-inline-end:0}
.mh .strip button:hover, .mh .strip button[aria-pressed="true"]{background:var(--panel)}
.mh .strip b{display:block;font:500 var(--t-label)/1.4 var(--mono);color:var(--ac);letter-spacing:.06em}
.mh .strip span{display:block;margin-top:var(--s2);font-size:var(--t-body);line-height:1.3;color:var(--ink2);max-width:15ch}
.mh .strip button[aria-pressed="true"] span{color:var(--ink)}
.mh .proof{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.mh .proof .wrap{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);align-items:baseline;
padding-top:var(--s4);padding-bottom:var(--s4)}
.mh .proof .partners{display:flex;flex-wrap:wrap;gap:var(--s5);font-weight:500;margin-inline-start:auto}
.mh .proof .partners span{white-space:nowrap}
.mh .sec-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
border-top:1px solid var(--ink);padding-top:var(--s4);margin-bottom:var(--s6)}
.mh .sec-head h2{font:600 var(--t-h2)/1.1 var(--sans);letter-spacing:-.028em}
.mh .sec-head .of{margin-inline-start:auto}
.mh .sec-link{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--ac);white-space:nowrap}
.mh .sec-link:hover{color:var(--ac)}
.mh .streams{padding-top:var(--s9)}
.mh .sgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.mh .stream{border-top:1px solid var(--ink);padding:var(--s8) var(--s6) var(--s8) 0}
.mh .stream+.stream{border-inline-start:1px solid var(--rule);padding-inline-start:var(--s8)}
.mh .stream .n{display:block;color:var(--ac);font:500 var(--t-label)/1 var(--mono);letter-spacing:.1em;margin-bottom:var(--s5)}
.mh .stream h3{font:500 var(--t-h3)/1.15 var(--sans);letter-spacing:-.02em;margin-bottom:var(--s3)}
.mh .stream p{color:var(--ink2);max-width:36ch}
.mh .stream .m{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule);
font:400 var(--t-body)/1.5 var(--mono);color:var(--ink2)}
.mh .tbl{padding-top:var(--s10)}
.mh table{width:100%;border-collapse:collapse}
.mh caption{text-align:start;padding-bottom:var(--s4);color:var(--ink2)}
.mh th, .mh td{text-align:start;vertical-align:top;padding-block:var(--s3);padding-inline:0 var(--s5)}
.mh thead th{font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
color:var(--ink2);border-bottom:1px solid var(--ink);padding-bottom:var(--s2)}
.mh tbody th{font-weight:500;letter-spacing:-.012em;width:30%;border-bottom:1px solid var(--rule)}
.mh tbody td{border-bottom:1px solid var(--rule);color:var(--ink2)}
.mh tbody tr:hover th, .mh tbody tr:hover td{background:var(--panel)}
.mh td.no{width:56px;font:400 var(--t-label)/1.7 var(--mono);color:var(--ac)}
.mh td.eng{font:400 var(--t-body)/1.5 var(--mono);color:var(--ink);white-space:nowrap}
.mh tbody th a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid transparent}
.mh tbody tr:hover th a{border-bottom-color:var(--ac)}
.mh .software{padding-top:var(--s9)}
.mh .sw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:var(--s5) var(--s6);
padding:var(--s6) 0;border-bottom:1px solid var(--rule);align-items:start}
.mh .sw:first-of-type{border-top:1px solid var(--ink)}
.mh .sw .id{display:block;font:400 var(--t-label)/1.6 var(--mono);color:var(--ac);margin-bottom:var(--s2)}
.mh .sw h3{font:500 var(--t-h3)/1.15 var(--sans);letter-spacing:-.02em}
.mh .sw .for{display:block;margin-top:var(--s3);color:var(--ink2)}
.mh .sw p{color:var(--ink2);max-width:52ch}
.mh .sw .act{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-end}
.mh .sw .note{font:400 var(--t-label)/1.6 var(--mono);color:var(--ink2);text-align:end;max-width:24ch}
.mh .ventures{padding-top:var(--s8)}
.mh .vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.mh .v{border-top:1px solid var(--ink);padding:var(--s8) var(--s6) var(--s8) 0}
.mh .v+.v{border-inline-start:1px solid var(--rule);padding-inline-start:var(--s8)}
.mh .v .id{display:block;font:400 var(--t-label)/1.6 var(--mono);color:var(--ac);margin-bottom:var(--s3)}
.mh .v h3{font:500 var(--t-h3)/1.15 var(--sans);letter-spacing:-.02em;margin-bottom:var(--s3)}
.mh .v p{color:var(--ink2);max-width:42ch}
.mh .v a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s4);font-weight:500;
text-decoration:none;border-bottom:1px solid var(--ac)}
.mh .props{margin-top:var(--s11);background:var(--panel);border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);padding:var(--s10) 0}
.mh .props .inner{max-width:60ch;margin:0 auto;padding:0 var(--gut)}
.mh .props h2{font:600 var(--t-h2)/1.15 var(--sans);letter-spacing:-.028em;margin-bottom:var(--s5)}
.mh .props p{margin-bottom:var(--s4)}
.mh .props p:last-of-type{margin-bottom:0}
.mh .props b{font-weight:600}
.mh .props .aside{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);color:var(--ink2)}
.mh .props .aside a{display:inline-flex;align-items:center;min-height:44px;border-bottom:1px solid var(--ac);text-decoration:none}
.mh .closing{position:relative;overflow:hidden;background:var(--ink);color:var(--bg);
margin-top:var(--s10);padding:var(--s2) 0}
.mh #cloud2{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mh .closing .wrap{position:relative;z-index:2}
.mh .closing .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6) var(--s5);
padding-top:var(--s10);padding-bottom:var(--s10)}
.mh .closing h2{grid-column:1/8;font:600 var(--t-h2)/1.12 var(--sans);letter-spacing:-.028em}
.mh .closing .side{grid-column:9/13}
.mh .closing p{color:#b6bbbe;margin-top:var(--s4);max-width:44ch}
.mh .closing .label{color:#8e9498}
.mh footer.site{background:var(--ink);color:#b6bbbe;border-top:1px solid #272b2f}
.mh footer.site .wrap{padding-top:var(--s8);padding-bottom:var(--s7)}
.mh .fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.mh .fcols h3{font:400 var(--t-label)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8e9498;margin-bottom:var(--s4)}
.mh .fcols ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.mh .fcols a{text-decoration:none;color:#d3d6d8;display:inline-flex;align-items:center;min-height:44px}
.mh .fcols a:hover{color:var(--bg)}
.mh .fbase{margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid #272b2f;
display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);align-items:baseline;
font:400 var(--t-body)/1.6 var(--mono);color:#8e9498}
.mh .fbase .cross{margin-inline-start:auto}
.mh .fbase a{display:inline-flex;align-items:center;min-height:44px;color:#d3d6d8;text-decoration:none;border-bottom:1px solid #383d41}
@media (max-width:1100px){.mh .sgrid{grid-template-columns:1fr}
.mh .stream+.stream{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--rule)}
.mh .sw{grid-template-columns:1fr}
.mh .sw .act{align-items:flex-start}
.mh .sw .note{text-align:start}
.mh .readout{position:static;width:auto;text-align:start;margin-top:var(--s6)}}
@media (max-width:900px){.mh .nav{display:none}
.mh .mast .wrap{gap:var(--s4)}
.mh .lang{font-size:var(--t-body)}
.mh .burger{display:inline-flex;align-items:center;margin-inline-start:auto;min-height:44px;
background:none;border:1px solid var(--ink);color:var(--ink);padding:0 var(--s4);border-radius:0}
.mh .hero{min-height:0;display:flex;flex-direction:column;
padding-inline:var(--gut);padding-top:var(--s5)}
.mh .hero .wrap{display:contents}
.mh .hero-copy{order:1}
.mh .cta{order:2}
.mh #cloud{order:3;position:static;display:block;width:100%;height:min(42vh,340px);
margin-top:var(--s7)}
.mh .readout{order:4}
.mh .strip{order:5}
.mh .hero::before{top:var(--s4)}
.mh .cta .btn{flex:1 1 auto;justify-content:center}
.mh .strip{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;padding-bottom:var(--s4);
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mh .strip::-webkit-scrollbar{display:none}
.mh .strip button{flex:0 0 auto;min-width:11rem;scroll-snap-align:start;
border-inline-end:1px solid var(--rule);border-bottom:0}
.mh .strip button:last-child{border-inline-end:0}
.mh .strip span{max-width:none;white-space:nowrap}
.mh .vgrid{grid-template-columns:1fr}
.mh .v+.v{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--rule)}
.mh .closing h2, .mh .closing .side{grid-column:1/13}
.mh .fcols{grid-template-columns:repeat(2,minmax(0,1fr))}
.mh .tbl{padding-top:var(--s8)}
.mh thead{display:none}
.mh tbody tr{display:grid;grid-template-columns:56px 1fr;padding:var(--s4) 0;border-bottom:1px solid var(--rule)}
.mh tbody th, .mh tbody td{border-bottom:0;padding:0 0 var(--s1)}
.mh tbody th{width:auto;grid-column:2}
.mh td.no{grid-row:1;grid-column:1}
.mh tbody td:not(.no){grid-column:2}
.mh .fbase .cross{margin-inline-start:0}}
@media (prefers-reduced-motion:reduce){.mh, .mh *{transition:none!important;animation:none!important}}
/* --- Odoo's own header and footer, wearing the design ---------------------------------------
Deliberately OUTSIDE the .mh scope: this is the site chrome, and the site chrome has to look
like the site. Confined to #wrapwrap so it cannot reach the backend or the login page.
Using Odoo's header and footer rather than our own markup is the standard-methodology choice:
the client can add a menu item or change a footer link through the editor, which they could
not do with our masthead. */
#wrapwrap{background:var(--bg)}
/* Odoo swaps the header to position:fixed with a TRANSPARENT background once you scroll
(o_header_affixed / o_header_is_scrolled), so the CTA buttons and the field showed straight
through it. The design's masthead is opaque and sticky.
THIS IS THE ONE PLACE WE OVERRIDE ODOO RATHER THAN CONFIGURE IT, and it is deliberate:
- `header_overlay` on the page is already False, so this is not the overlay feature
- no ir.ui.view carries the rule, so there is no standard toggle to flip; it is compiled
into web.assets_frontend
- Odoo's own rule is `background: transparent !important` on header.o_header_is_scrolled,
so specificity cannot win and the per-page `header_color` field, which applies an inline
style, cannot either
Matching its !important in our own stylesheet is ordinary CSS authorship in the slot Odoo
provides for it, not a workaround of a setting that exists. */
#wrapwrap > header,
#wrapwrap > header .navbar,
#wrapwrap > header .o_header_standard{background-color:var(--bg)}
#wrapwrap > header.o_header_affixed,
#wrapwrap > header.o_header_is_scrolled,
#wrapwrap > header.o_transitioning.o_header_affixed{background-color:var(--bg) !important}
#wrapwrap > header{border-bottom:1px solid var(--rule);box-shadow:none}
#wrapwrap > header.o_header_affixed{box-shadow:none;border-bottom:1px solid var(--rule)}
/* the inline language selector, styled as the design's EN / AR switch */
#wrapwrap > header .js_language_selector{margin-inline-start:var(--s5)}
#wrapwrap > header .js_language_selector ul,
#wrapwrap > header .js_language_selector .list-inline{display:flex;gap:var(--s2);
margin:0;padding:0;list-style:none;align-items:center}
#wrapwrap > header .js_language_selector li+li::before{content:"·";color:var(--ink2);
margin-inline-end:var(--s2)}
#wrapwrap > header .js_language_selector a{font:400 var(--t-label)/1 var(--mono);
letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px;border:0}
#wrapwrap > header .js_language_selector a.active,
#wrapwrap > header .js_language_selector a:hover{color:var(--ink)}
#wrapwrap > header .navbar,
#wrapwrap > header .o_header_standard{background:transparent;padding-top:var(--s3);padding-bottom:var(--s3)}
#wrapwrap > header .navbar-brand{font:600 var(--t-lead)/1 var(--sans);letter-spacing:-.022em;
color:var(--ink);text-transform:uppercase}
#wrapwrap > header .nav-link{font:500 var(--t-body)/1 var(--sans);color:var(--ink);
border-bottom:1px solid transparent;border-radius:0}
#wrapwrap > header .nav-link:hover,
#wrapwrap > header .nav-link.active{border-bottom-color:var(--ac);background:transparent;color:var(--ink)}
#wrapwrap > header .btn{border-radius:0}
/* With the logo image, search, CTA and phone switched off, and the standard
template_header_default_align_right + navlink_no_background variants activated, the header IS
the design's masthead: wordmark left, menu right, language last. All that is left is sizing.
The design's masthead is 20px wordmark, 44px targets, s4/s3 padding, one hairline rule. */
#wrapwrap > header .navbar-brand img,
#wrapwrap > header .o_nav_entry img{height:20px;width:auto;max-height:20px}
#wrapwrap > header .navbar > .container,
#wrapwrap > header > .container,
#wrapwrap > header .container-fluid{max-width:var(--max);padding-inline:var(--gut)}
#wrapwrap > header .navbar-nav .nav-link{min-height:44px;display:inline-flex;align-items:center}
#wrapwrap > header .navbar{min-height:0}
#wrapwrap > header .navbar-nav{gap:var(--s5)}
#wrapwrap > header .nav-link{padding-inline:0}
#wrapwrap > header .o_header_language_selector,
#wrapwrap > header .js_language_selector{font:400 var(--t-label)/1 var(--mono);letter-spacing:.07em;
text-transform:uppercase;color:var(--ink2)}
#wrapwrap > header .dropdown-toggle::after{display:none}
/* The footer is an oe_structure and now holds the design's own footer as editable content,
so it needs no colour override here -- the scoped stylesheet already styles it. Only strip the
chrome Odoo wraps around it. */
#wrapwrap > #bottom{border:0;padding:0;background:transparent}
#wrapwrap > #bottom > .mh > footer.site .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
#wrapwrap > #bottom .oe_structure_solo{border:0}
/* Odoo's mobile menu is an offcanvas panel 342px wide on a 390px screen -- 88% of the viewport
for six short words. This has to live OUTSIDE the .mh scope: the panel is part of Odoo's header,
so a rule in the scoped stylesheet is rewritten to `.mh #top_menu_collapse_mobile` and never
matches anything.
The floor is measured, not guessed: the widest nav item is "Resources" at 111px, so with a 12px
gutter each side the panel cannot go below ~135px without wrapping a menu label onto two lines.
150px is that floor plus a little air, and 53% of where this started.
The language switcher is the only way to change language on a phone, and at the header's 11px
mono label size it was a pair of 13px words in the corner of the panel. In the offcanvas it
becomes a real row: body-sized, 48px targets, on its own rule. */
@media (max-width:900px){
#top_menu_collapse_mobile.offcanvas,
#wrapwrap > header .offcanvas.offcanvas-end{width:min(38vw,150px)}
#wrapwrap > header .offcanvas .offcanvas-body{padding-inline:var(--s3)}
#wrapwrap > header .offcanvas .o_header_language_selector{margin-top:var(--s5);
border-top:1px solid var(--rule);padding-top:var(--s2)}
#wrapwrap > header .offcanvas .js_language_selector{margin-inline-start:0}
#wrapwrap > header .offcanvas .js_language_selector ul,
#wrapwrap > header .offcanvas .js_language_selector .list-inline{gap:var(--s3);
justify-content:center}
#wrapwrap > header .offcanvas .js_language_selector a{font-size:var(--t-lead);
min-height:48px;min-width:44px;justify-content:center}
/* Odoo's close control is a 34px box, below this design's 44px floor -- and on a phone it is
the only way out of the panel. Not caused by the narrowing; found while measuring it. */
#wrapwrap > header .offcanvas .btn-close{min-width:44px;min-height:44px;
background-position:center}
}
/* The design's switch is "EN · AR". The separator rule written for Odoo's markup never
matched, because the two languages are `a.list-inline-item` siblings inside a single . */
#wrapwrap > header .js_language_selector .list-inline-item + .list-inline-item::before{
content:"·";color:var(--ink2);margin-inline-end:var(--s2)}
/* --- Arabic ---------------------------------------------------------------------------------
Archivo and DM Mono have no Arabic coverage, so Arabic would fall back to whatever the browser
picks. A system stack is a STOPGAP: choosing and self-hosting a real Arabic face is a design
decision (TASKS.md A1), not a font-stack tweak. Noto Sans Arabic and IBM Plex Sans Arabic are
the obvious candidates -- both have the even, unornamented tone the Latin face has. */
[dir="rtl"] .mh,
[dir="rtl"] .mh .lede,
[dir="rtl"] .mh h1,
[dir="rtl"] .mh h2,
[dir="rtl"] .mh h3{font-family:"Noto Sans Arabic","IBM Plex Sans Arabic","Segoe UI",Tahoma,
var(--sans)}
[dir="rtl"] .mh .label,
[dir="rtl"] .mh .readout{font-family:"Noto Sans Arabic","Segoe UI",Tahoma,var(--mono)}
/* --- reconciling with Bootstrap 5, which Odoo loads globally --------------------------------- */
.mh .mark{background:none;padding:0;color:inherit}
.mh .nav{padding-left:0;margin-bottom:0;list-style:none}
.mh .btn{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-border-radius:0;box-shadow:none}
.mh table{--bs-table-bg:transparent;color:inherit}
.mh img{max-width:none}