/* Lava Home — cleaned from design/index.html (G1).
* - Removed dead .t3d-* rules (Tripo leftover).
* - Renamed --t3d-* -> --lava-*.
* - Media consolidated to 359/600/900/901 (+ reduced-motion/contrast/landscape kept).
* - Globals scoped to body.lava-home; dropped logo/button !important.
* Google Fonts (choose one): add in or enqueue in functions.php:
*
*/
/* ==========================================================
TRIPO3D TUTORIAL CENTER — STATIC RECONSTRUCTION
Style references: public tutorial hub + supplied CSS tokens.
Page-local classes are prefixed with t3d to avoid theme clash.
========================================================== */
:root{
--lava-bg:#000;
--lava-surface:#0c0d10;
--lava-surface-2:#101114;
--lava-surface-3:#1b1d20;
--lava-border:#27292c;
--lava-text:#f2f2f2;
--lava-muted:#a5a7ab;
--lava-soft:#74777d;
--lava-yellow:#f9cf00;
--lava-yellow-pale:#fff2b2;
--lava-radius:12px;
--lava-container:1280px;
--lava-gutter:clamp(20px,4.2vw,64px);
}body.lava-home *{box-sizing:border-box}body.lava-home html{scroll-behavior:smooth;scroll-padding-top:92px;background:var(--lava-bg)}body.lava-home{margin:0;background:var(--lava-bg);color:var(--lava-text);font-family:"Noto Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body.lava-home, body.lava-home button, body.lava-home a{font-family:"Noto Sans",system-ui,sans-serif}body.lava-home img{display:block;width:100%;max-width:100%;height:auto}body.lava-home a{color:inherit;text-decoration:none}body.lava-home button{font:inherit}
/* Wide and tablet breakpoints use the supplied stylesheet's scale:
40rem / 48rem / 64rem / 80rem / 96rem. */
@media (max-width:900px){}
@media (max-width:900px){:root{--lava-gutter:32px}}
@media (max-width:900px){:root{--lava-gutter:22px}body.lava-home html{scroll-padding-top:20px}}
@media (max-width:600px){:root{--lava-gutter:16px}}
@media (prefers-reduced-motion:reduce){body.lava-home html{scroll-behavior:auto}}/* ==========================================================
INTEGRATED TRIPO-STYLE MOBILE OFF-CANVAS NAVIGATION
Drawer remains dark to match Tripo.ai; page itself stays light.
========================================================== */
:root{
--onm-bg: #101114;
--onm-panel: #101114;
--onm-text: #fff;
--onm-muted: rgb(255 255 255 / 62%);
--onm-hover: rgb(255 255 255 / 8%);
--onm-border: rgb(255 255 255 / 9%);
--onm-yellow: #f9cf00;
--onm-header-height: 56px;
--onm-drawer-width: min(75vw, 384px);
--onm-motion: cubic-bezier(.22, 1, .36, 1);
}body.onm-lock-scroll{ overflow: hidden; }.onm-trigger-lines{ display: flex; width: 20px; flex-direction: column; gap: 5px; }.onm-trigger-lines i{ display: block; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .16s ease; }.onm-overlay{
position: fixed;
z-index: 99998;
inset: 0;
overflow: hidden;
background: rgb(0 0 0 / 0%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s ease, background .25s ease;
overscroll-behavior: contain;
}.onm-overlay.is-open{
visibility: visible;
pointer-events: auto;
opacity: 1;
background: rgb(0 0 0 / 58%);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}.onm-drawer{
position: absolute;
inset: 0 auto 0 0;
display: flex;
width: var(--onm-drawer-width);
min-width: min(240px, calc(100vw - 24px));
max-width: 384px;
height: 100vh;
height: 100dvh;
flex-direction: column;
padding: 0;
overflow: hidden;
border-right: 1px solid rgb(255 255 255 / 5%);
background: var(--onm-panel);
color: #f4f4f5;
box-shadow: 18px 0 70px rgb(0 0 0 / 28%);
transform: translate3d(-103%, 0, 0);
transition: transform .32s var(--onm-motion);
will-change: transform;
outline: none;
touch-action: pan-y;
font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.5;
}.onm-overlay.is-open .onm-drawer{ transform: translate3d(0, 0, 0); }.onm-drawer *, .onm-drawer *::before, .onm-drawer *::after{ box-sizing: border-box; }.onm-drawer a{ color: inherit; text-decoration: none; }.onm-drawer-header{
display: flex;
height: var(--onm-header-height);
min-height: var(--onm-header-height);
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 16px;
border-bottom: 1px solid transparent;
}.onm-drawer-brand{ display: inline-flex; min-width: 0; align-items: center; flex: 0 0 auto; gap: 7px; padding: 6px; border-radius: 7px; }.onm-drawer-brand img{ display: block; width: auto; max-width: none; height: 20px; object-fit: contain; }.onm-drawer-brand .onm-logo-symbol{ width: 20px; height: 20px; }.onm-drawer-brand .onm-logo-wordmark{ width: 72px; height: 20px; }.onm-close{
display: inline-flex;
width: 34px;
height: 34px;
flex: 0 0 34px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 7px;
background: transparent;
color: #77787c;
cursor: pointer;
transition: color .18s ease, background .18s ease;
-webkit-tap-highlight-color: transparent;
}.onm-close:hover, .onm-close:focus-visible{ color: #fff; background: #292b30; outline: none; }.onm-close svg{ display: block; }.onm-drawer-scroll{
flex: 1 1 auto;
min-height: 0;
padding: 0 12px 18px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: #38393d transparent;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
}.onm-drawer-scroll::-webkit-scrollbar{ width: 4px; }.onm-drawer-scroll::-webkit-scrollbar-track{ background: transparent; }.onm-drawer-scroll::-webkit-scrollbar-thumb{ border-radius: 4px; background: #38393d; }.onm-menu{ display: flex; flex-direction: column; gap: 18px; padding: 14px 0 8px; }.onm-menu-group{ display: flex; min-width: 0; flex-direction: column; margin: 0; }.onm-menu-group h2{ margin: 0 0 6px; padding: 0 6px; color: #fff; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .025em; }.onm-menu-group a{
display: block;
min-height: 36px;
padding: 8px 6px;
border-radius: 8px;
color: var(--onm-muted);
font-size: 13px;
font-weight: 400;
line-height: 20px;
overflow-wrap: anywhere;
transition: color .16s ease, background .16s ease;
-webkit-tap-highlight-color: transparent;
}.onm-menu-group a:hover, .onm-menu-group a:focus-visible{ color: rgb(255 255 255 / 94%); background: var(--onm-hover); outline: none; }.onm-menu-group a:active{ background: rgb(255 255 255 / 12%); }.onm-external{ padding-left: 3px; color: #77787c; font-size: 12px; }.onm-drawer a:focus-visible, .onm-close:focus-visible{ outline: 2px solid var(--onm-yellow); outline-offset: 2px; }
@media (max-width:900px){}
@media (max-width:359px){:root{ --onm-drawer-width: 82vw; }.onm-drawer-header{ padding-inline: 12px; }.onm-drawer-scroll{ padding-inline: 9px; }}
@media (min-width: 901px){.onm-overlay{ display: none !important; }}
@media (prefers-reduced-motion: reduce){.onm-overlay, .onm-drawer, .onm-trigger, .onm-trigger-lines i, .onm-menu-group a, .onm-close{ transition-duration: .01ms !important; }}/* ==========================================================
OFFSET NAVIMOBILE — LIGHT MODE MODIFIER
Activate by adding class "light-mode" to .onm-drawer: