:root{ --bg:#0b0f14; --bg2:#0f1620; --card:#121b26; --text:#e7eef7; --muted:#b5c2d3; --accent:#ffb000; --accent2:#49d3ff; --line:rgba(255,255,255,.08); --shadow:0 12px 30px rgba(0,0,0,.35); --radius:18px; --max:1100px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; } *{box-sizing:border-box} /* Tidy scrollbars */ *{scrollbar-width:thin; scrollbar-color: rgba(80,220,140,.45) rgba(255,255,255,.06)} ::-webkit-scrollbar{height:10px; width:10px} ::-webkit-scrollbar-track{background: rgba(255,255,255,.04)} ::-webkit-scrollbar-thumb{background: rgba(80,220,140,.28); border:1px solid rgba(80,220,140,.35); border-radius:999px} ::-webkit-scrollbar-thumb:hover{background: rgba(80,220,140,.40)} html{overflow-y:scroll} html,body{height:100%} body{ margin:0; font-family:var(--font); color:var(--text); background: radial-gradient(1200px 700px at 20% 0%, rgba(73,211,255,.12), transparent 55%), radial-gradient(900px 600px at 80% 10%, rgba(255,176,0,.10), transparent 50%), linear-gradient(180deg, var(--bg), #070a0e 65%); } /* Subpage rotating background (no tab spam, just vibes) Apply by adding class="subpage" to */ body.subpage{position:relative; overflow-x:hidden} body.subpage::before{ content:""; position:fixed; inset:0; background: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-1.webp") center / cover no-repeat; filter:saturate(1.05) contrast(1.05); z-index:-1; animation: bgRotate 40s steps(1,end) infinite; } @keyframes bgRotate{ 0%{background-image: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-1.webp");} 20%{background-image: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-2.webp");} 40%{background-image: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-3.webp");} 60%{background-image: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-4.webp");} 80%{background-image: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-5.webp");} } a{color:inherit; text-decoration:none} a:hover{opacity:.9} .wrap{max-width:var(--max); margin:0 auto; padding:0 20px} .top{ position:sticky; top:0; background: rgba(11,15,20,.72); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); z-index:10; } .nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0} .brand{display:flex; gap:12px; align-items:center} .logo{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(255,176,0,.18), rgba(73,211,255,.10)); border:1px solid var(--line); box-shadow: var(--shadow); font-weight:800; letter-spacing:.5px; } .logo--img{padding:6px} .brandlogo{width:100%; height:100%; object-fit:contain; display:block} .sales{display:grid; grid-template-columns:120px 1fr; gap:14px; margin-top:10px} @media (max-width: 900px){.sales{grid-template-columns:1fr}} .sales__avatar{width:120px; height:120px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.03); object-fit:cover} .sales__copy p{margin:0 0 10px; color:var(--muted); line-height:1.5} .sales__copy ul{margin:0 0 10px; padding-left:18px; color:var(--muted)} .sales__copy li{margin:6px 0} .brand__name{font-weight:800; letter-spacing:.3px} .brand__tag{font-size:12px; color:var(--muted)} .tag2{opacity:.85; margin-left:8px; white-space:nowrap} @media (max-width: 900px){.tag2{display:none}} .links{display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end} .links a{padding:8px 10px; border-radius:12px; border:1px solid transparent} .links a:hover{border-color:var(--line); background:rgba(255,255,255,.03)} .links .cta{border-color:rgba(255,176,0,.35); background:rgba(255,176,0,.10)} .hero{padding:54px 0 26px; position:relative; overflow:hidden} .hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,15,20,.72), rgba(11,15,20,.88)), url("./assets/bg/desert-circuit-5.webp") center / cover no-repeat; filter: saturate(1.05) contrast(1.05); pointer-events:none; z-index:0; } .hero::before{ content:""; position:absolute; right:-120px; top:-60px; width:520px; height:520px; background: url("./assets/extrememojo/extreme-mojo-ai-logo.png") no-repeat; background-size: contain; opacity: .16; transform: rotate(10deg); filter: saturate(1.10) contrast(1.10) brightness(1.18); pointer-events:none; z-index:1; } @media (max-width: 900px){ .hero::before{right:-180px; top:-90px; width:520px; height:520px; opacity:.12} } .hero__grid{display:grid; grid-template-columns: 1.3fr .9fr; gap:22px; align-items:start; position:relative; z-index:2} @media (max-width: 900px){ .hero__grid{grid-template-columns:1fr} } h1{font-size:46px; line-height:1.05; margin:0 0 12px} .h1{font-size:40px; line-height:1.1; margin:0 0 12px} .lead{font-size:18px; line-height:1.55; color:var(--muted); margin:0 0 18px} .sub{color:var(--muted); font-size:13px; margin:14px 0 0} .hero__buttons{display:flex; gap:12px; flex-wrap:wrap} .button{ display:inline-block; padding:12px 14px; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-weight: 900; } .button.primary{ border-color: rgba(255,176,0,.45); background: linear-gradient(135deg, rgba(255,176,0,.22), rgba(255,255,255,.02)); color: var(--text); } .card{ border:1px solid var(--line); background: linear-gradient(180deg, rgba(18,27,38,.9), rgba(18,27,38,.6)); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); } .card__label{font-size:12px; color:var(--muted)} .card__title{font-size:22px; font-weight:800; margin:6px 0 8px} .card__body ul{margin:0; padding-left:18px; color:var(--muted)} .pillrow{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px} .pill{ font-size:12px; color:var(--text); border:1px solid var(--line); background: rgba(255,255,255,.03); padding:6px 10px; border-radius:999px; } .section{padding:44px 0} .section.alt{background: linear-gradient(180deg, rgba(255,255,255,.02), transparent)} /* Section backgrounds (LAN site assets) */ #services{position:relative; overflow:hidden} #services::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,15,20,.86), rgba(11,15,20,.92)), url("./assets/bg/desert-circuit-3.webp") center / cover no-repeat; filter: saturate(1.05) contrast(1.05); pointer-events:none; z-index:0; } #services .wrap{position:relative; z-index:1} #life{position:relative; overflow:hidden} #life::before{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,15,20,.78), rgba(11,15,20,.90)), url("./assets/bg/desert-circuit-2.webp") center / cover no-repeat; filter: saturate(1.05) contrast(1.05); pointer-events:none; z-index:0; } #life .wrap{position:relative; z-index:1} h2{font-size:28px; margin:0 0 10px} .lead2{color:var(--muted); margin:0 0 18px} /* MojoDesk logo placements */ .mojodeskMark{display:flex; align-items:center; gap:12px; margin:0 0 14px} .mojodeskMark img{width:78px; height:78px; object-fit:contain; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.92); box-shadow: 0 12px 26px rgba(0,0,0,.35); } @media (max-width: 900px){.mojodeskMark img{width:64px; height:64px}} .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px} .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px} @media (max-width: 900px){ .grid2,.grid3{grid-template-columns:1fr} } .mini,.panel{ border:1px solid var(--line); background: rgba(18,27,38,.55); border-radius: var(--radius); padding:16px; } .mini h3,.panel h3{margin:0 0 8px; font-size:16px} .mini p,.panel p, .panel li{color:var(--muted); line-height:1.5} .panel ul{margin:10px 0 0; padding-left:18px} .quote{ border:1px dashed rgba(255,176,0,.35); background: rgba(255,176,0,.06); border-radius: var(--radius); padding:14px 16px; margin:12px 0 18px; } .quote p{margin:6px 0; color:var(--muted)} .contact{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px} @media (max-width: 900px){ .contact{grid-template-columns:1fr} } .contact__box{ border:1px solid var(--line); background: rgba(18,27,38,.55); border-radius: var(--radius); padding:14px; } .contact__box div:last-child{color:var(--muted); margin-top:4px} .footer{ border-top:1px solid var(--line); padding:18px 0 30px; color: var(--muted); } .foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .foot__links{display:flex; gap:14px} .foot__links a{padding:6px 8px; border-radius:10px} .foot__links a:hover{background:rgba(255,255,255,.03)} /* FAQ */ .faq{display:flex; flex-direction:column; gap:10px; margin-top:14px} .faq details{border:1px solid var(--line); border-radius: var(--radius); background: rgba(18,27,38,.55); padding:12px 14px} .faq summary{cursor:pointer; font-weight:900} .faq__body{color:var(--muted); margin-top:10px; line-height:1.55} /* Pro Tips layout */ .protips-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin-top:18px} .protips-col{display:flex; flex-direction:column; gap:12px} .protips-col details{border:1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(18,27,38,.72), rgba(18,27,38,.45)); padding:12px 14px; box-shadow: var(--shadow)} .protips-col details[open]{border-color:rgba(255,176,0,.35); box-shadow:0 12px 24px rgba(0,0,0,.45)} .protips-col summary{cursor:pointer; font-weight:900; letter-spacing:.2px; display:flex; align-items:center; gap:10px} .protips-col summary::after{content:"↧"; font-size:14px; margin-left:auto; color:var(--accent2); transition:transform .2s ease} .protips-col details[open] summary::after{transform:rotate(180deg)} .protips-col .faq__body{margin-top:10px; font-size:14px} /* Chat widget */ .chatfab{position:fixed; right:18px; bottom:18px; z-index:50} .chatfab__btn{ cursor:pointer; border-radius:999px; border:1px solid rgba(255,176,0,.45); background: linear-gradient(135deg, rgba(255,176,0,.22), rgba(255,255,255,.02)); color: var(--text); padding:12px 14px; box-shadow: var(--shadow); font-weight:700; } .chatdlg{ width:min(720px, calc(100% - 24px)); border:1px solid var(--line); border-radius: var(--radius); background: var(--bg2); color: var(--text); padding:0; } .chatdlg::backdrop{background: rgba(0,0,0,.55)} .chatdlg__top{ display:flex; align-items:flex-start; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); } .chatdlg__title{font-weight:900; letter-spacing:.2px} .chatdlg__sub{color:var(--muted); font-size:12px; margin-top:4px} .chatdlg__close{ cursor:pointer; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); padding:8px 10px; border-radius:12px; } .chatdlg__body{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px 16px} @media (max-width: 760px){.chatdlg__body{grid-template-columns:1fr}} .chatdlg__card{ border:1px solid var(--line); background: rgba(18,27,38,.55); border-radius: var(--radius); padding:14px; } .chatdlg__cardtitle{font-weight:800; margin-bottom:6px} .chatdlg__card p{color:var(--muted); margin:6px 0 12px; line-height:1.45}