/* =========================================================================== iLabs — shared design system Dark is the original design; light is a full alternative. The theme is set on by assets/theme.js (falls back to the OS setting). ===========================================================================*/ :root{ color-scheme:dark; --bg:#0a0c11; --bg-2:#070910; --panel:rgba(17,20,27,0.92); --panel-2:rgba(255,255,255,0.045); --surface:rgba(255,255,255,0.045); --hover:rgba(255,255,255,0.09); --field:rgba(255,255,255,0.05); --field-hi:rgba(255,255,255,0.09); --chrome:#e9edf3; --chrome-2:#8892a3; --chrome-3:#5d6675; --edge:#232833; --edge-hi:#333a48; --accent:#7fd4c1; --accent-2:#ffb86b; --on-accent:#0a0c11; --head-bg:rgba(10,12,17,0.82); --figure:#0b0d13; /* backdrop for the SVG diagram cards — stays dark in both themes */ --shadow:0 24px 60px -22px rgba(0,0,0,0.9); --maxw:1180px; /* element category palette (kept vivid in both themes) */ --c-alkali:#e5674f; --c-alkaline:#e0954b; --c-transition:#5aa9c9; --c-post:#6f7bb0; --c-metalloid:#54a06a; --c-nonmetal:#7fd4c1; --c-halogen:#c9c24b; --c-noble:#b07bd0; --c-lanth:#c96f9e; --c-actin:#c95f6f; --c-unknown:#5d6675; --c-sblock:#e0954b; --c-pblock:#7fd4c1; --c-dblock:#5aa9c9; --c-fblock:#c96f9e; } /* light palette — used when the OS asks for light and the user hasn't forced dark */ @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ color-scheme:light; --bg:#f7f8fa; --bg-2:#eef0f4; --panel:rgba(255,255,255,0.94); --panel-2:rgba(18,26,42,0.035); --surface:rgba(18,26,42,0.04); --hover:rgba(18,26,42,0.065); --field:#ffffff; --field-hi:rgba(18,26,42,0.05); --chrome:#141a24; --chrome-2:#57616f; --chrome-3:#8b95a3; --edge:#e3e6eb; --edge-hi:#d2d7de; --accent:#0e9e83; --accent-2:#d67a24; --on-accent:#ffffff; --head-bg:rgba(247,248,250,0.85); --shadow:0 18px 44px -22px rgba(30,41,59,0.22); } } /* explicit user choices always win, in both directions */ :root[data-theme="light"]{ color-scheme:light; --bg:#f7f8fa; --bg-2:#eef0f4; --panel:rgba(255,255,255,0.94); --panel-2:rgba(18,26,42,0.035); --surface:rgba(18,26,42,0.04); --hover:rgba(18,26,42,0.065); --field:#ffffff; --field-hi:rgba(18,26,42,0.05); --chrome:#141a24; --chrome-2:#57616f; --chrome-3:#8b95a3; --edge:#e3e6eb; --edge-hi:#d2d7de; --accent:#0e9e83; --accent-2:#d67a24; --on-accent:#ffffff; --head-bg:rgba(247,248,250,0.85); --shadow:0 18px 44px -22px rgba(30,41,59,0.22); } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0a0c11; --bg-2:#070910; --panel:rgba(17,20,27,0.92); --panel-2:rgba(255,255,255,0.045); --surface:rgba(255,255,255,0.045); --hover:rgba(255,255,255,0.09); --field:rgba(255,255,255,0.05); --field-hi:rgba(255,255,255,0.09); --chrome:#e9edf3; --chrome-2:#8892a3; --chrome-3:#5d6675; --edge:#232833; --edge-hi:#333a48; --accent:#7fd4c1; --accent-2:#ffb86b; --on-accent:#0a0c11; --head-bg:rgba(10,12,17,0.82); --shadow:0 24px 60px -22px rgba(0,0,0,0.9); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--chrome); font-family:"Space Grotesk", system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; line-height:1.6; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; } img{ max-width:100%; height:auto; } h1,h2,h3,h4{ font-weight:500; line-height:1.25; margin:0 0 .5em; color:var(--chrome); } code,.mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; } /* ---------- shell / nav ---------- */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 20px; } .site-head{ position:sticky; top:0; z-index:50; background:var(--head-bg); backdrop-filter:blur(12px); border-bottom:1px solid var(--edge); } .site-head .wrap{ display:flex; align-items:center; gap:22px; height:56px; } .site-head .logo{ font-weight:500; font-size:1.15rem; color:var(--chrome); } .site-head .logo span{ color:var(--accent); } /* ---------- animated atom mark next to the wordmark ---------- */ .logo{ display:inline-flex; align-items:center; gap:9px; } .logo-atom{ flex:0 0 auto; color:var(--accent); overflow:visible; } .logo-atom .lr{ opacity:.4; } .logo-atom .ln{ transform-box:fill-box; transform-origin:center; animation:logoPulse 2.6s ease-in-out infinite; } .logo-atom .le{ offset-path:path("M 2 14 A 12 4.7 0 1 1 26 14 A 12 4.7 0 1 1 2 14"); animation:logoOrbit linear infinite; } .logo-atom .le1{ animation-duration:2.8s; } .logo-atom .le2{ animation-duration:4s; animation-direction:reverse; } .logo-atom .le3{ animation-duration:5.4s; } @keyframes logoOrbit{ from{ offset-distance:0%; } to{ offset-distance:100%; } } @keyframes logoPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } } @media (prefers-reduced-motion:reduce){ .logo-atom .le,.logo-atom .ln{ animation:none; } .logo-atom .le2{ offset-distance:33%; } .logo-atom .le3{ offset-distance:66%; } } .site-nav{ display:flex; gap:16px; margin-left:auto; flex-wrap:wrap; } .site-nav a{ color:var(--chrome-2); font-size:.9rem; } .site-nav a:hover,.site-nav a[aria-current]{ color:var(--chrome); text-decoration:none; } .theme-toggle{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--edge); border-radius:9px; color:var(--chrome-2); cursor:pointer; transition:background .15s, color .15s; } .theme-toggle:hover{ background:var(--hover); color:var(--chrome); } .theme-toggle .sun{ display:none; } .theme-toggle .moon{ display:block; } :root[data-theme="light"] .theme-toggle .sun{ display:block; } :root[data-theme="light"] .theme-toggle .moon{ display:none; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .theme-toggle .sun{ display:block; } :root:not([data-theme="dark"]) .theme-toggle .moon{ display:none; } } .site-foot{ border-top:1px solid var(--edge); margin-top:64px; padding:28px 0 40px; color:var(--chrome-3); font-size:.82rem; } .site-foot .wrap{ display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; } .site-foot a{ color:var(--chrome-2); } .coffee{ display:inline-flex; align-items:center; gap:7px; margin-left:auto; background:var(--accent-2); color:#141414; font-weight:500; font-size:.82rem; padding:.5em .9em; border-radius:9px; } .coffee:hover{ text-decoration:none; filter:brightness(1.06); } /* ---------- generic content ---------- */ .prose{ max-width:70ch; } .prose p{ color:var(--chrome-2); } .prose ul li, .prose ol li{ color:var(--chrome-2); } .prose strong, .prose b{ color:var(--chrome); } .lead{ font-size:1.12rem; color:var(--chrome); } .crumbs{ font-size:.8rem; color:var(--chrome-3); margin:18px 0 4px; } .crumbs a{ color:var(--chrome-2); } .card{ background:var(--panel-2); border:1px solid var(--edge); border-radius:14px; padding:18px 18px 16px; } .pill{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; padding:.28em .6em; border-radius:6px; background:var(--panel-2); border:1px solid var(--edge); color:var(--chrome-2); } .btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:.9rem; color:var(--chrome); background:var(--surface); border:1px solid var(--edge-hi); border-radius:9px; padding:.6em 1em; cursor:pointer; transition:background .15s; } .btn:hover{ background:var(--hover); text-decoration:none; } .btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:500; } /* ---------- ad units ---------- */ .ad-unit{ margin:26px auto; display:flex; flex-direction:column; align-items:center; width:100%; max-width:728px; } .ad-unit .lbl{ font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--chrome-3); margin-bottom:4px; } .ad-unit .ad-box{ width:100%; min-height:90px; display:flex; align-items:center; justify-content:center; background:var(--panel-2); border:1px dashed var(--edge-hi); border-radius:8px; color:var(--chrome-3); font-size:.72rem; overflow:hidden; } .ad-unit.rect{ max-width:336px; } .ad-unit.rect .ad-box{ min-height:280px; } .ad-unit.inline{ margin:22px auto; } .ad-unit[hidden]{ display:none; } .section-title{ font-size:.62rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--chrome-3); margin:34px 0 12px; display:flex; align-items:center; gap:10px; } .section-title::after{ content:""; flex:1; height:1px; background:var(--edge); } /* ---------- answer-first summary (GEO: the block AI engines quote) ---------- */ .answer{ max-width:72ch; margin:14px 0 4px; padding:14px 16px; background:var(--panel-2); border:1px solid var(--edge); border-left:2px solid var(--accent); border-radius:0 12px 12px 0; } .answer p{ margin:0; color:var(--chrome); font-size:.95rem; line-height:1.6; } .answer p + p{ margin-top:8px; } /* ---------- FAQ ---------- */ .faq{ max-width:72ch; } .faq details{ border-bottom:1px solid var(--edge); padding:2px 0; } .faq summary{ cursor:pointer; padding:12px 2px; font-size:.95rem; color:var(--chrome); list-style:none; display:flex; gap:10px; align-items:flex-start; } .faq summary::-webkit-details-marker{ display:none; } .faq summary::before{ content:"+"; color:var(--accent); font-family:"IBM Plex Mono",monospace; flex:0 0 auto; transition:transform .15s; } .faq details[open] summary::before{ content:"\2212"; } .faq details p{ margin:0 0 12px 24px; color:var(--chrome-2); font-size:.9rem; line-height:1.6; } @media (max-width:720px){ .site-head .wrap{ height:52px; gap:12px; padding:0 14px; } .site-head .logo{ font-size:1.05rem; flex:0 0 auto; } /* one row that scrolls sideways instead of wrapping to 2-3 lines */ .site-nav{ flex-wrap:nowrap; gap:15px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; mask-image:linear-gradient(90deg,#000 90%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent); } .site-nav::-webkit-scrollbar{ display:none; } .site-nav a{ flex:0 0 auto; } .theme-toggle{ flex:0 0 auto; } }