/* ═══════════════════════════════════════════════════════════════ dotsai.in — Home page styles Theme is CSS-variable driven: :root holds the light token map, html.dark overrides it. Toggling the .dark class on re-themes the whole page (inline styles use var(--x, fallback) throughout). A pre-paint inline script in sets html.dark to avoid any flash. Tokens/fonts come from tokens.css. ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: #FDFCFA; } html.dark body { background: #13131D; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img { max-width: 100%; display: block; } /* ───────────────────────── Theme token maps ───────────────────────── Verbatim from the design's light/dark objects + Iris mood accents, plus logo color vars. */ :root { --bg:#FDFCFA; --surface:#FFFFFF; --navbg:rgba(253,252,250,.82); --border:#E8E6E0; --fg:#191924; --muted:#4A4842; --faint:#6E6B62; --grid:#E8E6E0; --strip:rgba(248,247,244,.55); --footbg:#F4F2EC; --eb:#5B3FD4; --ebline:#C9BCF0; --chipbg:#FFFFFF; --slogan:#2D1B4E; --navlink:#4A4842; --glassbg:rgba(255,255,255,.55); --glassbd:rgba(25,25,36,.10); --revaccent:#5B3FD4; --card:#FFFFFF; --panel:#F4F2EC; /* logo */ --logo-text:#191924; --logo-d:#5B3FD4; --logo-o:#1F7A5C; --logo-t:#A8521A; --logo-s:#1E5B9C; --logo-sep:#D4D1C9; --logo-ghost:rgba(25,25,36,.09); } html.dark { --bg:#13131D; --surface:#1E1E2E; --navbg:rgba(20,20,30,.72); --border:#2A2A3C; --fg:#FDFCFA; --muted:#CFCBDA; --faint:#918D82; --grid:#262636; --strip:rgba(255,255,255,.04); --footbg:#191924; --eb:#C8B6FF; --ebline:#3A3A4A; --chipbg:#1E1E2E; --slogan:#E8E6E0; --navlink:#CFCBDA; --glassbg:rgba(255,255,255,.05); --glassbd:rgba(255,255,255,.14); --revaccent:#C8B6FF; --card:#1E1E2E; --panel:#191924; --logo-text:#FDFCFA; --logo-d:#C8B6FF; --logo-o:#B8E0D2; --logo-t:#FFCDB2; --logo-s:#A2D2FF; --logo-sep:rgba(255,255,255,.22); --logo-ghost:rgba(255,255,255,.09); } #o1-root { background-color: var(--bg); color: var(--fg); } /* ───────────────────────── Brand logo ───────────────────────── 3×3 dot-matrix (D·O·T diagonal lit) + ZEROONE / D·O·T·S AI wordmark. Color comes from theme vars; size from the size modifier class. */ .o1-logo { display:inline-flex; align-items:center; line-height:1; } .o1-logo .dots { display:grid; flex-shrink:0; } .o1-logo .dots > span { border-radius:50%; background: var(--logo-ghost); } .o1-logo .dots .ld { background: var(--logo-d); } .o1-logo .dots .lo { background: var(--logo-o); } .o1-logo .dots .lt { background: var(--logo-t); } .o1-logo .word { display:flex; flex-direction:column; line-height:1; } .o1-logo .l1 { font-family:'Chubbo',sans-serif; font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:.04em; white-space:nowrap; color: var(--logo-text); } .o1-logo .l2 { display:flex; align-items:baseline; white-space:nowrap; font-family:'Chubbo',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .o1-logo .l2 .cd { color: var(--logo-d); } .o1-logo .l2 .co { color: var(--logo-o); } .o1-logo .l2 .ct { color: var(--logo-t); } .o1-logo .l2 .cs { color: var(--logo-s); } .o1-logo .l2 .sep { color: var(--logo-sep); } .o1-logo .l2 .ai { margin-left:.3em; color: var(--logo-text); } .o1-logo-sm .dots { grid-template-columns:repeat(3,9px); grid-template-rows:repeat(3,9px); gap:4px; margin-right:12px; } .o1-logo-sm .l1 { font-size:22px; } .o1-logo-sm .l2 { font-size:13px; margin-top:4px; } .o1-logo-md .dots { grid-template-columns:repeat(3,12px); grid-template-rows:repeat(3,12px); gap:5px; margin-right:16px; } .o1-logo-md .l1 { font-size:30px; } .o1-logo-md .l2 { font-size:18px; margin-top:5px; } /* Dark-mode toggle knob position (logo recolors via vars automatically). */ #o1-knob { left:2px; background-color:#191924; } html.dark #o1-knob { left:30px; background-color:#C8B6FF; } /* ───────────────────────── Hero keyframes ───────────────────────── */ @keyframes o1-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } @keyframes o1-griddrift { to{ background-position:46px 46px,46px 46px; } } @keyframes o1-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } } @keyframes o1-rise { from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } } .o1-stripwrap:hover .o1-track{ animation-play-state:paused; } .o1-burger{ display:none; } .o1-foot-grid > div{ min-width:0; } /* ───────────────────────── Responsive ───────────────────────── */ @media (max-width:880px){ .o1-navlinks{ display:none !important; } .o1-only-desk{ display:none !important; } .o1-burger{ display:inline-flex !important; } .o1-h1{ font-size:30px !important; } .o1-h1 span{ white-space:normal !important; } .o1-foot-grid{ grid-template-columns:1fr 1fr !important; gap:30px 24px !important; } #o1-glass{ display:none !important; } } @media (min-width:881px){ .o1-mobile-menu{ display:none !important; } } @media (max-width:560px){ .o1-foot-grid{ grid-template-columns:1fr !important; } } @media (hover:none),(pointer:coarse){ #o1-root{ cursor:auto !important; } #o1-cursor{ display:none !important; } } @media (min-width:900px){ .o1-paths-grid{ grid-template-columns:0.92fr 1.08fr !important; gap:72px !important; align-items:start !important; } .o1-paths-grid > [data-reveal]:first-child{ position:sticky; top:140px; } } @media (prefers-reduced-motion:reduce){ .o1-grid, #o1-glass [data-gi]{ animation:none !important; } }