/* Melkorexim — shared stylesheet. Palettes keyed by . */ :root{ --disp:"Libre Baskerville",Georgia,serif; --sans:"Archivo",system-ui,-apple-system,sans-serif; --wrap:1120px; /* signature tab colours (consistent across all pages) — light */ --t-hofol:#2C5A38; --t-mesirom:#1E3E77; --t-ajaho:#8A6A16; --t-compliance:#46566A; --t-contact:#6B4A28; } @media(prefers-color-scheme:dark){:root{ --t-hofol:#8FC79E; --t-mesirom:#7FA8E4; --t-ajaho:#E0BE55; --t-compliance:#9DB0C4; --t-contact:#C7A365; }} /* ---- PER-PAGE PALETTES ---- */ /* Home + Contact — Brown (default) */ body,body[data-page="home"],body[data-page="contact"]{ --paper:#F1EADD; --panel:#FBF6EC; --ink:#241C13; --navy:#5A3E22; --navy-deep:#2C1D10; --gold:#9C7A3C; --gold-lt:#C6A253; --rule:#DBCDB4; --muted:#6B5A45; } /* Hofol — Green */ body[data-page="hofol"]{ --paper:#E9F0E4; --panel:#F4F8F0; --ink:#15221A; --navy:#2C5A38; --navy-deep:#123019; --gold:#8A7A2E; --gold-lt:#B79A45; --rule:#C6D7BE; --muted:#4E6053; } /* Mesirom — Blue */ body[data-page="mesirom"]{ --paper:#E7ECF4; --panel:#F3F6FC; --ink:#101826; --navy:#1E3E77; --navy-deep:#0D1D3A; --gold:#3B7CC0; --gold-lt:#6BA3DC; --rule:#C5D1E5; --muted:#4B5771; } /* Ajaho — Yellow */ body[data-page="ajaho"]{ --paper:#F5EFDB; --panel:#FCF9EB; --ink:#282108; --navy:#8A6A16; --navy-deep:#463607; --gold:#C89A1E; --gold-lt:#E0C04A; --rule:#E1D3A6; --muted:#6E5F30; } /* Compliances — Grey & Steel */ body[data-page="compliances"]{ --paper:#EAEDF0; --panel:#F5F6F8; --ink:#171B21; --navy:#384656; --navy-deep:#1C232C; --gold:#5E7488; --gold-lt:#8598A9; --rule:#CCD2D9; --muted:#57616D; } @media(prefers-color-scheme:dark){ body,body[data-page="home"],body[data-page="contact"]{ --paper:#161009; --panel:#201910; --ink:#ECE3D3; --navy:#C9A567; --navy-deep:#0D0904; --gold:#C6A253; --gold-lt:#DCC07A; --rule:#33291A; --muted:#AA9D87;} body[data-page="hofol"]{ --paper:#0C130E; --panel:#131C16; --ink:#E1EADD; --navy:#8FC79E; --navy-deep:#060C08; --gold:#B79A45; --gold-lt:#D0B968; --rule:#233029; --muted:#93A797;} body[data-page="mesirom"]{ --paper:#090E19; --panel:#101726; --ink:#E4E9F2; --navy:#7FA8E4; --navy-deep:#05090F; --gold:#5B9BDD; --gold-lt:#8FBEEC; --rule:#202B41; --muted:#909BB4;} body[data-page="ajaho"]{ --paper:#141005; --panel:#1D1708; --ink:#EEE6CE; --navy:#E0BE55; --navy-deep:#0B0802; --gold:#E0C04A; --gold-lt:#EED577; --rule:#322811; --muted:#AC9C6E;} body[data-page="compliances"]{ --paper:#0B0E12; --panel:#141922; --ink:#E3E7EC; --navy:#9DB0C4; --navy-deep:#06090D; --gold:#7E93A6; --gold-lt:#A6B7C7; --rule:#232B35; --muted:#8A94A1;} } *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.68;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.2;margin:0;text-wrap:balance} p{margin:0} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px} .label{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)} .muted{color:var(--muted)} .rule{height:1px;background:var(--rule);border:0} .btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;padding:.85em 1.5em;border:1.5px solid var(--navy);text-decoration:none;background:var(--navy);color:var(--paper);transition:background .15s,color .15s} .btn:hover{background:transparent;color:var(--navy)} .btn-o{background:transparent;color:var(--navy)} .btn-o:hover{background:var(--navy);color:var(--paper)} .btn-gold{background:var(--gold);border-color:var(--gold);color:#FBF7EA} .btn-gold:hover{background:transparent;color:var(--gold)} .emblem{display:inline-block;vertical-align:middle} /* header */ header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)} .bar{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)} .brand .wm{font-family:var(--disp);font-weight:700;font-size:1.24rem;letter-spacing:.06em} nav.links{display:flex;gap:22px;font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase} nav.links a{text-decoration:none;color:var(--muted);padding-bottom:2px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s} nav.links a.t-hofol{color:var(--t-hofol)} nav.links a.t-mesirom{color:var(--t-mesirom)} nav.links a.t-ajaho{color:var(--t-ajaho)} nav.links a.t-compliance{color:var(--t-compliance)} nav.links a.t-contact{color:var(--t-contact)} nav.links a.t-hofol:hover,nav.links a.t-hofol.active{border-color:var(--t-hofol)} nav.links a.t-mesirom:hover,nav.links a.t-mesirom.active{border-color:var(--t-mesirom)} nav.links a.t-ajaho:hover,nav.links a.t-ajaho.active{border-color:var(--t-ajaho)} nav.links a.t-compliance:hover,nav.links a.t-compliance.active{border-color:var(--t-compliance)} nav.links a.t-contact:hover,nav.links a.t-contact.active{border-color:var(--t-contact)} @media(max-width:900px){nav.links{gap:14px;font-size:.68rem;flex-wrap:wrap;justify-content:flex-end}} @media(max-width:560px){.brand .wm{font-size:1.05rem}} section{padding:80px 0} /* hero */ .hero{border-bottom:1px solid var(--rule);background:var(--panel)} .hero .wrap{text-align:center;max-width:920px;padding-top:56px;padding-bottom:64px} .estline{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase} .estline::before,.estline::after{content:"";height:1px;width:46px;background:var(--gold);opacity:.6} .hero h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-top:26px;letter-spacing:-.01em} .hero h1 em{font-style:italic} .hero .lede{font-size:1.08rem;color:var(--muted);max-width:60ch;margin:22px auto 0} .hero-cta{display:flex;gap:14px;justify-content:center;margin-top:32px;flex-wrap:wrap} .crest{margin:0 auto 6px} /* page intro (non-home hero) */ .phead{background:var(--panel);border-bottom:1px solid var(--rule)} .phead .wrap{padding-top:48px;padding-bottom:48px} .phead .estline{justify-content:flex-start} .phead h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:16px} .phead .lede{font-size:1.06rem;color:var(--muted);max-width:66ch;margin:18px 0 0} /* section heading */ .sh{display:flex;align-items:baseline;gap:16px;border-bottom:1.5px solid var(--ink);padding-bottom:14px} .sh .no{font-family:var(--disp);font-size:1rem;color:var(--gold);font-weight:700;letter-spacing:.1em} .sh h2{font-size:clamp(1.5rem,3vw,2.1rem)} .sh .st{margin-left:auto;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .st-live{color:var(--gold)} .lead{margin-top:22px;color:var(--muted);font-size:1.05rem;max-width:66ch} /* verticals grid (home) */ .verts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border:1px solid var(--rule)} .vert{padding:30px;border-right:1px solid var(--rule);border-top:3px solid var(--vc,var(--navy));text-decoration:none;color:inherit;transition:background .15s;background:var(--panel)} .vert:last-child{border-right:0} .vert:hover{background:color-mix(in srgb,var(--vc,var(--navy)) 8%,var(--panel))} .vert .ic{width:40px;height:40px;color:var(--vc,var(--navy));margin-bottom:16px} .vert .no{font-family:var(--disp);color:var(--vca,var(--gold));font-weight:700} .vert h3{font-size:1.35rem;margin:6px 0 0} .vert .dom{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px} .vert p{color:var(--muted);font-size:.94rem;margin-top:14px} .vert .tag{display:inline-block;margin-top:16px;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vc,var(--muted));border:1px solid var(--vc,var(--rule));padding:.3em .7em} .v-hofol{--vc:var(--t-hofol);--vca:#8A7A2E} .v-mesirom{--vc:var(--t-mesirom);--vca:#3B7CC0} .v-ajaho{--vc:var(--t-ajaho);--vca:#C89A1E} @media(prefers-color-scheme:dark){.v-hofol{--vca:#B79A45}.v-mesirom{--vca:#6BA3DC}.v-ajaho{--vca:#E0C04A}} @media(max-width:820px){.verts{grid-template-columns:1fr}.vert{border-right:0;border-bottom:1px solid var(--rule)}.vert:last-child{border-bottom:0}} /* dark product band */ .band{background:var(--navy-deep);color:#ECE7DA;border-top:3px double var(--gold)} .band .label{color:var(--gold-lt)} .band h2,.band h3{color:#F5F0E4} .band .muted{color:rgba(236,231,218,.72)} .band .sh{border-color:rgba(255,255,255,.22)} .band .sh .st{color:rgba(236,231,218,.7)} .prod{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center;margin-top:40px} .prod-fig{border:1px solid rgba(255,255,255,.18);padding:14px;background:rgba(0,0,0,.22)} .prod-fig img{width:100%} .prod-fig figcaption{font-size:.74rem;color:rgba(236,231,218,.7);letter-spacing:.06em;margin-top:10px;text-align:center;text-transform:uppercase} .prod h3{font-size:clamp(1.5rem,3vw,2rem)} .rate{font-size:.86rem;color:rgba(236,231,218,.85);margin:12px 0 0} .rate b{color:#F5F0E4} .attrs{list-style:none;padding:0;margin:22px 0 0;border-top:1px solid rgba(255,255,255,.18)} .attrs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:.95rem} .attrs li span{color:rgba(236,231,218,.7)} .prod-cta{display:flex;gap:14px;align-items:center;margin-top:24px;flex-wrap:wrap} .qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border:1px solid rgba(255,255,255,.18)} .q{padding:24px;border-right:1px solid rgba(255,255,255,.18)} .q:last-child{border-right:0} .q p{font-size:.94rem;color:rgba(236,231,218,.85);font-style:italic} .q .who{font-size:.8rem;color:rgba(236,231,218,.6);margin-top:12px;font-style:normal} @media(max-width:820px){.prod{grid-template-columns:1fr;gap:24px}.prod-fig{max-width:380px;margin:0 auto}.qgrid{grid-template-columns:1fr}.q{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}.q:last-child{border-bottom:0}} /* notice */ .notice{margin-top:40px;border:1px solid var(--rule);background:var(--panel);padding:30px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center} .notice .ic{width:56px;height:56px;color:var(--navy)} .notice h3{font-size:1.3rem} .notice p{color:var(--muted);margin-top:8px} .notice .stamp{margin-top:16px;display:inline-block;border:1.5px solid var(--gold);color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:.4em .9em;transform:rotate(-1.5deg)} @media(max-width:640px){.notice{grid-template-columns:1fr}} /* mesirom OS feature grid + download */ .feat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border:1px solid var(--rule)} .feat .f{padding:26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--panel)} .feat .f:nth-child(3n){border-right:0} .feat .f:nth-last-child(-n+3){border-bottom:0} .feat .f .ic{width:32px;height:32px;color:var(--navy);margin-bottom:12px} .feat .f h4{font-family:var(--disp);font-weight:700;font-size:1.06rem;margin:0} .feat .f p{color:var(--muted);font-size:.9rem;margin-top:8px} .mono{font-family:ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;font-size:.88em} .feat .f .mono{background:var(--paper);border:1px solid var(--rule);padding:0 .3em} @media(max-width:820px){.feat{grid-template-columns:1fr}.feat .f{border-right:0}.feat .f:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}.feat .f:last-child{border-bottom:0}} .dl{margin-top:44px;border:1.5px solid var(--ink);background:var(--panel)} .dl-head{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;padding:32px;flex-wrap:wrap;border-bottom:1px solid var(--rule)} .dl-head h3{font-size:1.7rem;margin:6px 0 0} .dl-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .dl-sha{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px} .dl-sha:hover{color:var(--gold);border-color:var(--gold)} .dl-facts{border-top:0;padding:10px 32px 18px} .dl-note{margin-top:20px;font-size:.82rem;color:var(--muted);max-width:74ch} @media(max-width:640px){.dl-head{flex-direction:column}.dl-cta{align-items:stretch}} /* facts / particulars */ .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;margin-top:36px} .facts{border-top:1px solid var(--rule)} .facts .row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:.95rem} .facts .row span{color:var(--muted)} @media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:24px}} /* contact */ .cgrid{display:flex;gap:52px;flex-wrap:wrap;margin-top:28px} .cb .l{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .cb a{font-family:var(--disp);font-size:1.05rem;text-decoration:none;color:var(--ink)} .cb a:hover{color:var(--gold)} /* footer */ footer{background:var(--navy-deep);color:rgba(240,236,225,.72);padding:48px 0 34px;border-top:3px double var(--gold)} .fcols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center} .fbrand{display:flex;align-items:center;gap:12px;color:#F5EFE2;font-family:var(--disp);font-weight:700;letter-spacing:.06em} .fcols a{color:rgba(240,236,225,.9)} .fnav{display:flex;gap:18px;flex-wrap:wrap;font-size:.78rem;letter-spacing:.04em} .fnav a{text-decoration:none;color:rgba(240,236,225,.7)} .fnav a:hover{color:#F5EFE2} .fnote{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:rgba(240,236,225,.55)} :focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}