/* ========================================================= DOZO LABS — Tweaks: variant overrides + panel UI Driven by data-* attributes on set by tweaks.js. Numeric/preset tweaks are applied as CSS vars directly in JS. ========================================================= */ /* ----- Reveals off ----- */ html.no-reveal .reveal { opacity: 1 !important; transform: none !important; } /* ----- Hero colour (dark mode): scoped gradient so other deep bands stay put ----- */ html .dz-hero.bg-deep { background-color: var(--hero-bg-3, #11102f); background-image: radial-gradient(120% 130% at 80% -10%, var(--hero-bg-1, #3a35b0) 0%, var(--hero-bg-2, #1a1850) 42%, var(--hero-bg-3, #11102f) 100%); } /* ----- Hero mode: force light on .dz-hero (home + careers) ----- */ html[data-hero="light"] .dz-hero.bg-deep { background-color: var(--c-bg-alt) !important; background-image: none !important; color: var(--c-text) !important; border-bottom: 1px solid var(--c-line); } html[data-hero="light"] .dz-hero .eyebrow.on-dark { color: var(--c-primary); } html[data-hero="light"] .dz-hero .eyebrow.on-dark::before { background: var(--c-accent); } html[data-hero="light"] .dz-hero h1 { color: var(--c-text) !important; } html[data-hero="light"] .dz-hero .lead { color: var(--c-text-muted) !important; } html[data-hero="light"] .dz-hero .grid-bg::after, html[data-hero="light"] .dz-hero.grid-bg::after { display: none !important; } /* swap the light-on-dark ghost button to the light-surface ghost */ html[data-hero="light"] .dz-hero .btn-ghost-light { --fg: var(--c-text); border-color: var(--c-line); } html[data-hero="light"] .dz-hero .btn-ghost-light:hover { --bg: var(--c-paper); color: var(--c-text); border-color: var(--c-line); } /* the home decorative panel is built for dark — hide it on a light hero and let the headline run full width (same as heropanel=none) */ html[data-hero="light"] .home-hero-panel { display: none !important; } html[data-hero="light"] .home-hero-text { flex: 0 0 100% !important; max-width: 100% !important; } html[data-hero="light"] .home-hero-text h1 { max-width: 18ch; } /* ----- Hero visual panel (home) ----- */ html[data-heropanel="graph"] .hero-stats { display: none !important; } html[data-heropanel="stats"] .hero-graph { display: none !important; } html[data-heropanel="none"] .home-hero-panel { display: none !important; } html[data-heropanel="none"] .home-hero-text { flex: 0 0 100% !important; max-width: 100% !important; } html[data-heropanel="none"] .home-hero-text h1 { max-width: 20ch; } /* ----- Card hover behaviour ----- */ html[data-cardhover="none"] .card-dz:hover { transform: none; box-shadow: none; border-color: var(--c-line); } html[data-cardhover="border"] .card-dz:hover { transform: none; box-shadow: none; border-color: var(--c-primary); } html[data-cardhover="border"] .card-dz { transition: border-color .2s ease; } /* ----- Card style variants ----- */ /* numbered: drop the top accent rule, lean on the index numeral */ html[data-cards="numbered"] .card-rule { border-top: 1px solid var(--c-line); } html[data-cards="numbered"] .card-index { font-size: 1.1rem; color: var(--c-indigo-200); font-weight: 600; font-family: var(--f-display); } html[data-cards="numbered"] .card-icon { background: transparent; color: var(--c-primary); padding: 0; } /* filled: deep indigo cards */ html[data-cards="filled"] .card-dz { background: var(--c-indigo-900); border-color: transparent; color: #e7e9f7; } html[data-cards="filled"] .card-dz.card-rule { border-top: 3px solid var(--c-accent); } html[data-cards="filled"] .card-dz h3 { color: #fff; } html[data-cards="filled"] .card-dz p { color: #aeb4dd; } html[data-cards="filled"] .card-dz .card-icon { background: rgba(255,255,255,.08); color: var(--c-accent); } html[data-cards="filled"] .card-dz .card-index { color: rgba(255,255,255,.4); } html[data-cards="filled"] .card-dz:hover { box-shadow: var(--sh-lg); border-color: transparent; } /* ========================================================= Tweaks panel UI (vanilla) ========================================================= */ #dz-tweaks { position: fixed; right: 18px; bottom: 18px; z-index: 2147483646; width: 300px; max-height: calc(100vh - 36px); display: none; flex-direction: column; background: rgba(252,252,254,.86); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: .5px solid rgba(255,255,255,.7); border-radius: 16px; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 50px rgba(17,16,47,.26); font-family: var(--f-body); color: var(--c-ink); overflow: hidden; } #dz-tweaks.open { display: flex; } .dzt-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px 13px 17px; cursor: move; user-select: none; border-bottom: .5px solid rgba(17,16,47,.07); } .dzt-hd b { font-family: var(--f-display); font-size: 13px; font-weight: 600; letter-spacing: -.01em; } .dzt-hd .dzt-sub { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-slate-400); margin-left: 8px; } .dzt-x { appearance: none; border: 0; background: transparent; color: var(--c-slate-500); width: 24px; height: 24px; border-radius: 7px; cursor: pointer; font-size: 13px; } .dzt-x:hover { background: rgba(17,16,47,.06); color: var(--c-ink); } .dzt-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; scrollbar-width: thin; } .dzt-body::-webkit-scrollbar { width: 7px; } .dzt-body::-webkit-scrollbar-thumb { background: rgba(17,16,47,.16); border-radius: 4px; } .dzt-sect { font-family: var(--f-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--c-slate-400); padding: 12px 0 1px; display: flex; align-items: center; gap: 7px; } .dzt-sect:first-child { padding-top: 2px; } .dzt-sect::after { content: ""; flex: 1; height: 1px; background: rgba(17,16,47,.08); } .dzt-row { display: flex; flex-direction: column; gap: 6px; } .dzt-lbl { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; font-weight: 500; color: var(--c-slate-700); } .dzt-lbl .dzt-v { font-family: var(--f-mono); font-size: 10px; color: var(--c-slate-400); } /* segmented */ .dzt-seg { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: rgba(17,16,47,.06); } .dzt-seg button { flex: 1; appearance: none; border: 0; background: transparent; font-family: var(--f-body); font-size: 11px; font-weight: 500; color: var(--c-slate-600); padding: 5px 4px; border-radius: 6px; cursor: pointer; line-height: 1.2; transition: background .14s, color .14s; } .dzt-seg button:hover { color: var(--c-ink); } .dzt-seg button.on { background: #fff; color: var(--c-ink); box-shadow: 0 1px 2px rgba(17,16,47,.12); } /* select */ .dzt-sel { appearance: none; width: 100%; height: 30px; padding: 0 28px 0 10px; border: .5px solid rgba(17,16,47,.14); border-radius: 8px; background: rgba(255,255,255,.7); font-family: var(--f-body); font-size: 11.5px; color: var(--c-ink); cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .dzt-sel:focus { outline: none; border-color: var(--c-primary); } /* slider */ .dzt-slider { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px; background: rgba(17,16,47,.14); outline: none; } .dzt-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--c-primary); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(17,16,47,.3); cursor: pointer; } .dzt-slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--c-primary); border: 2px solid #fff; cursor: pointer; } /* toggle */ .dzt-row-h { flex-direction: row; align-items: center; justify-content: space-between; } .dzt-toggle { position: relative; width: 36px; height: 20px; border: 0; border-radius: 999px; background: rgba(17,16,47,.18); cursor: pointer; padding: 0; transition: background .15s; flex: none; } .dzt-toggle.on { background: var(--c-primary); } .dzt-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .dzt-toggle.on i { transform: translateX(16px); } /* swatches */ .dzt-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(32px, 1fr)); gap: 6px; } .dzt-swatches.dzt-swatches-grid { grid-template-columns: repeat(7, 1fr); } .dzt-sw { position: relative; height: 28px; border-radius: 7px; cursor: pointer; border: 0; box-shadow: 0 0 0 .5px rgba(17,16,47,.16), 0 1px 2px rgba(17,16,47,.08); transition: transform .12s, box-shadow .12s; } .dzt-sw:hover { transform: translateY(-1px); } .dzt-sw.on { box-shadow: 0 0 0 2px var(--c-ink), 0 2px 6px rgba(17,16,47,.18); } .dzt-sw.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.5); } /* footer / reset */ .dzt-foot { padding: 12px 16px; border-top: .5px solid rgba(17,16,47,.07); display: flex; justify-content: space-between; align-items: center; gap: 10px; } .dzt-reset { appearance: none; border: .5px solid rgba(17,16,47,.14); background: rgba(255,255,255,.6); font-family: var(--f-body); font-size: 11px; font-weight: 500; color: var(--c-slate-600); padding: 6px 12px; border-radius: 8px; cursor: pointer; } .dzt-reset:hover { background: #fff; color: var(--c-ink); } .dzt-hint { font-family: var(--f-mono); font-size: 9px; color: var(--c-slate-400); } /* Floating trigger button (production standalone) */ #dz-tweaks-fab { position: fixed; right: 18px; bottom: 18px; z-index: 2147483645; width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c-ink, #0c0e1a); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(17,16,47,.32), 0 2px 4px rgba(17,16,47,.18); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } #dz-tweaks-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17,16,47,.38), 0 2px 6px rgba(17,16,47,.22); } #dz-tweaks-fab:focus-visible { outline: 2px solid var(--c-accent, #a3e635); outline-offset: 3px; } #dz-tweaks-fab svg { display: block; } @media (max-width: 520px) { #dz-tweaks { right: 10px; left: 10px; width: auto; bottom: 70px; } #dz-tweaks-fab { right: 12px; bottom: 12px; } }