/* 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');
}
/* ---- Arabic ----------------------------------------------------------------------------------
Alexandria, subsetted to Arabic only (TASKS.md A1, decision 2026-09-24). It comes from the
canonical brand kit, where it is already nominated as the mandatory substitute for
Apple-licensed SF Pro, so this is the brand's own answer rather than a second typographic
decision for one company. OFL, self-hosted: the whole reason these files are local is to keep a
third party off the critical path, and an Adobe Fonts kit would have put one back.
`unicode-range` is what makes this a one-line change everywhere else. The browser downloads
these only when Arabic codepoints are on the page and uses them only for those codepoints, so
Alexandria can sit in the ordinary `--sans` and `--mono` stacks and Latin still renders in
Archivo. No RTL-specific font rules, no `[dir="rtl"]` overrides, nothing to keep in step.
Subsetted from the kit's full faces with pyftsubset: 55 KB -> ~12 KB each, 35 KB for all three.
Latin is stripped entirely, which is belt and braces on top of the unicode-range.
Source: C:\_MyProjects\assets\macrohat-brand\04_Fonts\Web\Alexandria\ */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
src: url(/web/content/410/Alexandria-400-arabic.woff2) format('woff2');
}
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 500;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
src: url(/web/content/411/Alexandria-500-arabic.woff2) format('woff2');
}
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 600;
font-display: swap;
unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
src: url(/web/content/412/Alexandria-600-arabic.woff2) format('woff2');
}
:root{
--bg:#e8eae8; --panel:#f0f2f0; --ink:#12151a; --ink2:#4b5359;
--rule:#c6cbc7; --ac:#1a3f6b; --ac-ink:#e8eae8;
--sans:Archivo,Alexandria,ui-sans-serif,sans-serif;
--mono:"DM Mono",Alexandria,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 .idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.mh .idx li{border-bottom:1px solid var(--rule)}
.mh .idx li:last-child{border-bottom:1px solid var(--ink)}
.mh .idx a{display:grid;grid-template-columns:var(--s9) minmax(0,1fr) auto;gap:var(--s5);
align-items:baseline;padding:var(--s6) var(--s4) var(--s6) 0;text-decoration:none;
transition:background .16s var(--ease)}
.mh .idx a:hover{background:var(--panel)}
.mh .idx-n{font:500 var(--t-label)/1.6 var(--mono);letter-spacing:.12em;color:var(--ac)}
.mh .idx-t{display:block;font:500 var(--t-h3)/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.mh .idx-for{display:block;margin-top:var(--s3);color:var(--ink2);max-width:58ch}
.mh .idx-go{font:500 var(--t-body)/1.6 var(--sans);color:var(--ac);white-space:nowrap;
border-bottom:1px solid transparent;transition:border-color .16s var(--ease)}
.mh .idx a:hover .idx-go{border-bottom-color:var(--ac)}
@media (max-width:900px){.mh .idx a{grid-template-columns:var(--s7) minmax(0,1fr);gap:var(--s3) var(--s4);
padding:var(--s5) 0}
.mh .idx-go{grid-column:2;margin-top:var(--s3)}}
.mh .hero--idx{min-height:0}
.mh .hero--idx .wrap{padding-top:var(--s8);padding-bottom:var(--s8)}
.mh .hero--idx .hero-copy{max-width:52ch}
.mh .idxsec{padding-bottom:var(--s10)}
.mh .sib{margin-top:var(--s5)}
.mh .sib a{font:500 var(--t-body)/1.6 var(--sans);color:var(--ac);text-decoration:none;
border-bottom:1px solid var(--rule);display:inline-flex;align-items:center;min-height:44px;
transition:border-color .16s var(--ease)}
.mh .sib a:hover{border-bottom-color:var(--ac)}
.mh .prose{max-width:66ch}
.mh .prose h3{font:600 var(--t-h3)/1.2 var(--sans);letter-spacing:-.02em;margin-top:var(--s8)}
.mh .prose h3:first-child{margin-top:0}
.mh .prose p{margin-top:var(--s4);color:var(--ink2)}
.mh .prose p:first-child{font-size:var(--t-lead);color:var(--ink)}
.mh.o_wsale_product_page{padding-bottom:var(--s10)}
.mh.o_wsale_product_page .oe_website_sale{max-width:var(--max);margin:0 auto;
padding-inline:var(--gut);padding-top:var(--s7)}
.mh .o_wsale_breadcrumb{font:400 var(--t-label)/1.6 var(--mono);letter-spacing:.12em;
text-transform:uppercase;margin-bottom:var(--s7) !important;background:none;padding:0}
.mh .o_wsale_breadcrumb a{color:var(--ink2);text-decoration:none;
display:inline-flex;align-items:center;min-height:44px;
border-bottom:1px solid transparent;transition:border-color .16s var(--ease)}
.mh .o_wsale_breadcrumb .breadcrumb-item{display:inline-flex;align-items:center}
.mh .o_wsale_breadcrumb a:hover{border-bottom-color:var(--ac);color:var(--ink)}
.mh .o_wsale_breadcrumb .breadcrumb-item.active{color:var(--ac)}
.mh.o_wsale_product_page h1, .mh.o_wsale_product_page h1.h3{font:600 clamp(34px,3.2vw,44px)/1.08 var(--sans);
letter-spacing:-.028em;color:var(--ink);margin-bottom:var(--s4)}
.mh.o_wsale_product_page .oe_price, .mh.o_wsale_product_page .product_price .oe_price{font:500 var(--t-h3)/1.2 var(--mono);
color:var(--ink);letter-spacing:-.01em}
.mh.o_wsale_product_page .product_price{margin-block:var(--s5)}
.mh.o_wsale_product_page .btn-primary, .mh.o_wsale_product_page #add_to_cart, .mh.o_wsale_product_page a#contact_us_wrapper, .mh.o_wsale_product_page #contact_us_wrapper > a{display:inline-flex;align-items:center;
justify-content:center;min-height:48px;padding:0 var(--s5);border-radius:0;
border:1px solid var(--ink);background:var(--ink);color:var(--bg);
font:500 var(--t-body)/1 var(--sans);text-decoration:none;box-shadow:none;
transition:background .16s var(--ease),border-color .16s var(--ease)}
.mh.o_wsale_product_page .btn-primary:hover, .mh.o_wsale_product_page #add_to_cart:hover, .mh.o_wsale_product_page #contact_us_wrapper > a:hover{background:var(--ac);
border-color:var(--ac);color:var(--ac-ink)}
.mh.o_wsale_product_page #o-carousel-product, .mh.o_wsale_product_page .o_wsale_product_images{border:1px solid var(--rule);
background:var(--panel);border-radius:0}
.mh.o_wsale_product_page img{border-radius:0}
.mh #product_full_description{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mh .mh-prod{max-width:72ch;margin-top:var(--s9)}
.mh .mh-prod h2{font:600 var(--t-h2)/1.15 var(--sans);letter-spacing:-.028em;
margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--ink)}
.mh .mh-prod h2:first-child{margin-top:0}
.mh .mh-prod p{margin-top:var(--s4);color:var(--ink2)}
.mh .mh-prod p.lead-in{font-size:var(--t-lead);color:var(--ink)}
.mh .mh-spec{width:100%;border-collapse:collapse;margin-top:var(--s5)}
.mh .mh-spec th, .mh .mh-spec td{text-align:start;vertical-align:top;
padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule)}
.mh .mh-spec th{width:34%;font:400 var(--t-label)/1.6 var(--mono);letter-spacing:.09em;
text-transform:uppercase;color:var(--ink2);font-weight:400}
.mh .mh-spec td{color:var(--ink)}
.mh .mh-spec tr:last-child th, .mh .mh-spec tr:last-child td{border-bottom:1px solid 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(--s3)}
.mh .hero:has(.strip){min-height:calc(100svh - var(--mast-h))}
.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:auto;
flex:1 1 0;min-height:120px;margin-top:var(--s4)}
.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 .eyebrow{margin-bottom:var(--s3)}
.mh h1{font-size:32px;line-height:1.06}
.mh .lede{margin-top:var(--s4);font-size:16.5px;line-height:1.45}
.mh .cta{margin-top:var(--s4);gap:var(--s2)}
.mh .readout{position:absolute;top:auto;inset-inline-end:auto;
inset-block-end:var(--ro-b,104px);inset-inline-start:var(--gut);
margin:0;width:max-content;max-width:calc(100% - var(--gut) * 2);z-index:2;line-height:1.45}
.mh .strip{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x proximity;padding-bottom:var(--s3);padding-top:var(--s2);
gap:var(--s2);border-top-color:var(--rule);
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mh .strip::-webkit-scrollbar{display:none}
.mh .strip button{flex:0 0 auto;min-width:11.5rem;scroll-snap-align:start;
border:1px solid var(--rule);background:var(--panel);
padding:var(--s3) var(--s4)}
.mh .strip button[aria-pressed="true"]{background:var(--bg);border-color:var(--ink)}
.mh .strip button[aria-pressed="true"] b{color:var(--ink)}
.mh .strip span{max-width:none;white-space:nowrap}
.mh .strip.can-scroll-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.mh .strip.can-scroll-start{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[dir="rtl"] .mh .strip.can-scroll-end{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(to left,#000 calc(100% - 40px),transparent)}
[dir="rtl"] .mh .strip.can-scroll-start{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
.mh .strip.can-scroll-start.can-scroll-end{
-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.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 (max-width:900px) and (max-height:620px){.mh h1{font-size:28px}
.mh .lede{font-size:15.5px;line-height:1.4}
.mh #cloud{min-height:96px}
.mh .strip button{min-width:10.5rem}}
[dir="rtl"] .mh .label, [dir="rtl"] .mh .lang, [dir="rtl"] .mh .readout, [dir="rtl"] .mh .strip b{letter-spacing: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 ---------------------------------------------------------------------------------
THE FONT STACK USED TO LIVE HERE and no longer does. It was a system stack --
"Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma -- which meant every Arabic page
rendered in whatever face the visitor happened to own, differently on a phone, a Mac and a
Windows machine. A1 is decided: Alexandria, from the brand kit, Arabic only, self-hosted.
It needs no rule here because it is `unicode-range`d into `--sans` and `--mono` in the scoped
stylesheet, so it arrives wherever Arabic does and Latin stays Archivo. What DOES belong here is
Odoo's own chrome, which is outside `.mh` and therefore outside those tokens: the nav, the
offcanvas and the language switcher all set Arabic text too. */
#wrapwrap > header,
#wrapwrap > header .nav-link,
#wrapwrap > header .navbar-brand,
#wrapwrap > header .offcanvas,
#wrapwrap > #bottom{font-family:var(--sans)}
/* Arabic is a joining script: letter-spacing opens gaps INSIDE a word and breaks the joins, so
the tracking that is right for 11px uppercase Latin reads as broken type in Arabic. */
[dir="rtl"] #wrapwrap > header .js_language_selector,
[dir="rtl"] #wrapwrap > header .js_language_selector a{letter-spacing:0}
/* --- 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}