/* ============================================================ pollhammer.dev — V3 "Immersive / Cinematic" design system Shared across the landing page and the 5 topic start pages. Ported from the design handoff (V3) to plain static CSS. ============================================================ */ :root{ --bg:#05060a; --fg:#eef1f5; --fg-2:#9aa3b2; --fg-3:#59616f; --line:rgba(238,241,245,.12); --line-2:rgba(238,241,245,.26); --accent:oklch(0.82 0.12 218); --accent-ink:#05060a; --surface-hover:rgba(238,241,245,.04); --nav-glass:rgba(5,6,10,.6); --vignette:rgba(5,6,10,.55); --hero-shadow:rgba(5,6,10,.5); --cursor-hover:rgba(238,241,245,.08); color-scheme:dark; } html[data-theme="light"]{ --bg:#eef1f6; --fg:#0c0f15; --fg-2:#48515f; --fg-3:#8b94a2; --line:rgba(12,15,21,.12); --line-2:rgba(12,15,21,.22); --accent:oklch(0.55 0.13 233); --accent-ink:#f4f6fa; --surface-hover:rgba(12,15,21,.045); --nav-glass:rgba(238,241,246,.7); --vignette:rgba(238,241,246,0); --hero-shadow:rgba(12,15,21,.08); --cursor-hover:rgba(12,15,21,.10); color-scheme:light; } *{box-sizing:border-box} /* Background colour lives on only. stays transparent so the fixed WebGL canvas (z-index:-3) is not painted over by the body box's background (which, per CSS paint order, is drawn after negative-z children). */ html{background:var(--bg)} html,body{margin:0;padding:0;color:var(--fg); font-family:'Sora',system-ui,sans-serif;-webkit-font-smoothing:antialiased} body{overflow-x:hidden;background:transparent} a{color:inherit;text-decoration:none} button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer} img,svg{display:block} ::selection{background:var(--accent);color:var(--accent-ink)} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:var(--line-2)} /* OS cursor is hidden only once the custom cursor is actually running. Scoped to + universal !important so it overrides the UA cursor:pointer on links/buttons too. */ html.v3-cursor-on, html.v3-cursor-on *{cursor:none !important} /* No-WebGL fallback background (theme-aware, flat) */ body.v3-nogl{background:var(--bg)} @keyframes pageIn{from{opacity:0}to{opacity:1}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}} @keyframes spin{to{transform:rotate(360deg)}} :root[data-reduce="1"] *{animation:none!important;transition-duration:.001s!important} /* ---------- fixed background chrome (injected by v3.js) ---------- */ .v3-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3;display:block} .v3-vignette{position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(120% 90% at 50% -10%, transparent 40%, var(--vignette) 100%)} .v3-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} .v3-cursor{position:fixed;top:0;left:0;width:12px;height:12px;border:1px solid var(--accent);border-radius:50%; pointer-events:none;z-index:300;transform:translate(-50%,-50%); transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),background .28s; will-change:transform;background:transparent} .v3-cursor.is-hover{width:42px;height:42px;background:var(--cursor-hover)} .v3-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;background:var(--accent); box-shadow:0 0 12px var(--accent);transition:width .1s linear} /* ---------- preloader (home only) ---------- */ .v3-preload{position:fixed;inset:0;z-index:400;background:var(--bg);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:26px;transition:opacity .45s cubic-bezier(.6,0,.2,1)} .v3-preload-brand{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.4rem,4vw,2.2rem);letter-spacing:-.03em} .v3-preload-track{width:min(280px,60vw);height:1px;background:var(--line);position:relative;overflow:hidden} .v3-preload-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .2s ease} .v3-preload-count{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--fg-2)} /* ---------- navigation ---------- */ .v3-nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:16px clamp(18px,5vw,56px);border-bottom:1px solid transparent; transition:background .4s ease,border-color .4s ease} .v3-nav[data-stuck="1"]{background:var(--nav-glass);backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line)} .v3-brand{display:flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:700;font-size:16px; letter-spacing:-.02em;color:var(--fg)} .v3-brand-dot{width:9px;height:9px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);flex:none} .v3-brand-text{display:inline-block;white-space:nowrap;letter-spacing:-.02em} .accent{color:var(--accent)} .v3-navlinks{display:none;align-items:center;gap:24px} @media(min-width:821px){.v3-navlinks{display:flex}} .vlink{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--fg-2);transition:color .25s} .vlink:hover{color:var(--fg)} .vlink.active{color:var(--accent)} .v3-theme{position:relative;display:inline-flex;align-items:center;flex:none;width:58px;height:30px;padding:0; border-radius:999px;border:1px solid var(--line-2);background:var(--surface-hover);cursor:pointer; transition:border-color .25s,background .25s,box-shadow .25s} .v3-theme:hover{border-color:var(--fg-2)} .v3-theme:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)} .v3-theme .ic{position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);z-index:2; color:var(--fg-3);transition:color .3s ease;pointer-events:none} .v3-theme .ic-sun{left:7px} .v3-theme .ic-moon{right:7px} .v3-theme::after{content:"";position:absolute;top:50%;left:3px;width:22px;height:22px;border-radius:50%;z-index:1; transform:translate(0,-50%);background:var(--accent);box-shadow:0 0 12px -2px var(--accent); transition:transform .32s cubic-bezier(.2,.7,.2,1),background .25s} html[data-theme="dark"] .v3-theme::after{transform:translate(28px,-50%)} html[data-theme="dark"] .v3-theme .ic-moon{color:var(--accent-ink)} html[data-theme="light"] .v3-theme .ic-sun{color:var(--accent-ink)} /* ---------- shared layout helpers ---------- */ .wrap{position:relative;max-width:1320px;margin:0 auto} .fade-in{animation:pageIn .3s ease both} .line-mask{display:block;overflow:hidden;padding-bottom:.05em} .line{display:block} /* ---------- home: hero ---------- */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center; gap:clamp(26px,5vh,52px);padding:120px clamp(18px,5vw,56px) 90px;max-width:1320px;margin:0 auto} .eyebrow{display:flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:12px; letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)} .eyebrow-line{width:22px;height:1px;background:var(--accent)} .hero-title{margin:0;font-family:'Sora',sans-serif;font-weight:800;line-height:.98;letter-spacing:-.035em; font-size:clamp(2.6rem,8vw,6.4rem)} .hero-title .line-mask{padding-bottom:.04em} .hero-row{display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap} .hero-lead{margin:0;max-width:460px;font-size:clamp(15px,1.7vw,18px);line-height:1.55;color:var(--fg-2)} .scroll-ind{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column; align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;color:var(--fg-3)} .scroll-ind svg{animation:bob 1.9s ease-in-out infinite} /* ---------- buttons ---------- */ .btn-ghost{display:inline-flex;align-items:center;gap:11px;padding:14px 24px;border:1px solid var(--line-2); font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg); transition:background .3s,border-color .3s,color .3s} .btn-ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .btn-solid{display:inline-flex;align-items:center;gap:11px;padding:15px 28px;background:var(--accent);color:var(--accent-ink); font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; transition:transform .3s,box-shadow .3s;box-shadow:0 14px 40px -14px var(--accent)} .btn-solid:hover{box-shadow:0 20px 50px -14px var(--accent)} .btn-download{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;background:var(--accent);color:var(--accent-ink); font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; transition:transform .25s;white-space:nowrap} /* ---------- home: text sections ---------- */ .section{position:relative;padding:80px clamp(18px,5vw,56px) 90px;max-width:1320px;margin:0 auto} .section-tall{min-height:88vh;display:flex;flex-direction:column;justify-content:center; padding:80px clamp(18px,5vw,56px);position:relative;max-width:1320px;margin:0 auto} .sec-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin-bottom:30px} .h2-statement{margin:0;font-family:'Sora',sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.03em; font-size:clamp(1.8rem,4.6vw,3.6rem);max-width:1040px} .muted{color:var(--fg-3)} .sec-lead{margin:34px 0 0;max-width:520px;font-size:17px;line-height:1.6;color:var(--fg-2)} .h2-approach{margin:0 0 60px;font-family:'Sora',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.03em; font-size:clamp(1.7rem,4.2vw,3.2rem);max-width:900px} .h2-index{margin:0 0 44px;font-family:'Sora',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.03em; font-size:clamp(1.7rem,4.2vw,3.2rem);max-width:760px} /* ---------- home: 01 premise particle sphere ---------- */ .premise{align-items:center} .premise-stage{position:relative;width:min(680px,90vw);height:min(680px,78vh);margin:0 auto} /* opaque WebGL clear (page bg) feathered into the page → no visible panel */ #premiseGL{display:block;width:100%;height:100%; -webkit-mask:radial-gradient(closest-side,#000 58%,transparent 100%); mask:radial-gradient(closest-side,#000 58%,transparent 100%)} /* static fallback when WebGL/Three is unavailable */ .premise-fallback{position:absolute;inset:0;display:none;align-items:center;justify-content:center} .premise-stage.no-gl #premiseGL{display:none} .premise-stage.no-gl .premise-fallback{display:flex} .premise-fallback svg{width:min(440px,74vw);height:auto;overflow:visible} .premise-fallback circle,.premise-fallback ellipse{stroke:var(--accent);stroke-width:1.4;opacity:.5;fill:none} .premise-fallback .core{fill:var(--accent);stroke:none;filter:drop-shadow(0 0 14px var(--accent))} /* mobile: square stage so the sphere isn't clipped/stretched in a tall portrait box */ @media(max-width:640px){ .premise-stage{width:min(460px,86vw);height:auto;aspect-ratio:1/1} } /* ---------- home: pillars ---------- */ .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));border-bottom:1px solid var(--line)} .pillar{position:relative;background:transparent;border-top:1px solid var(--line);padding:34px 28px;min-height:220px; display:flex;flex-direction:column;transition:background .4s,box-shadow .4s,border-color .4s} .pillar:hover{background:var(--surface-hover);border-top-color:var(--line-2);box-shadow:inset 0 3px 0 var(--accent)} .pillar-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);margin-bottom:auto} .pillar-title{font-family:'Sora',sans-serif;font-weight:600;font-size:21px;letter-spacing:-.02em;margin:30px 0 10px} .pillar-desc{font-size:14.5px;line-height:1.55;color:var(--fg-2)} /* ---------- home: track rows / index ---------- */ .tracks{border-top:1px solid var(--line)} .track{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:clamp(14px,3vw,32px); width:100%;text-align:left;padding:clamp(20px,2.6vw,30px) 8px;border-bottom:1px solid var(--line);color:var(--fg); background:transparent;transition:padding-left .45s cubic-bezier(.2,.7,.2,1),background .45s,box-shadow .45s} .track:hover{padding-left:20px;background:var(--surface-hover);box-shadow:inset 2px 0 0 var(--accent)} .track-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--fg-3)} .track-main{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap} .track-label{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(1.7rem,4vw,2.7rem);letter-spacing:-.03em;line-height:1.02} .track-tags{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)} .track-end{display:flex;align-items:center;gap:clamp(14px,2vw,24px)} .track-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--fg-3);white-space:nowrap} .arrow{color:var(--fg-2)} /* ---------- home: closing + footer ---------- */ .closing{position:relative;min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:36px;padding:90px clamp(18px,5vw,56px)} .h2-closing{margin:0;font-family:'Sora',sans-serif;font-weight:800;line-height:1.0;letter-spacing:-.035em; font-size:clamp(2.2rem,7vw,5.4rem);max-width:1000px} .v3-footer{position:relative;border-top:1px solid var(--line);max-width:1320px;margin:0 auto; padding:38px clamp(18px,5vw,56px) 46px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;color:var(--fg-3);text-transform:uppercase} /* ---------- subpages ---------- */ .subpage{padding-top:78px} .sub-head{position:relative;max-width:1320px;margin:0 auto;padding:56px clamp(18px,5vw,56px) 36px} .back-link{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono',monospace;font-size:12px; letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:44px;transition:color .25s} .back-link:hover{color:var(--accent)} .sub-title{margin:0;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.4rem,7.5vw,5.6rem); line-height:.98;letter-spacing:-.035em} .sub-lead{margin:22px 0 0;max-width:460px;font-size:17px;line-height:1.55;color:var(--fg-2)} .sub-list{position:relative;max-width:1320px;margin:0 auto;padding:24px clamp(18px,5vw,56px) 100px} .sub-list.narrow{max-width:1080px} .list-top{border-top:1px solid var(--line)} /* ---------- subpages: tech topics grid ---------- */ .topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));border-top:1px solid var(--line)} .topic{position:relative;display:flex;gap:16px;text-align:left;padding:20px 8px;border-bottom:1px solid var(--line); color:var(--fg);background:transparent; transition:padding-left .35s cubic-bezier(.2,.7,.2,1),background .35s,box-shadow .35s} .topic:hover{padding-left:18px;background:var(--surface-hover);box-shadow:inset 2px 0 0 var(--accent)} .topic-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--fg-3);padding-top:3px} .topic-body{min-width:0} .topic-name{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin-bottom:5px} .topic-desc{display:block;font-size:13.5px;line-height:1.45;color:var(--fg-2)} /* ---------- subpages: generic rows (homeserver / math / health) ---------- */ .row{position:relative;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:clamp(14px,3vw,28px); width:100%;text-align:left;padding:24px 8px;border-bottom:1px solid var(--line);color:var(--fg);background:transparent; transition:padding-left .4s cubic-bezier(.2,.7,.2,1),background .4s,box-shadow .4s} .row:hover{padding-left:18px;background:var(--surface-hover);box-shadow:inset 2px 0 0 var(--accent)} .row-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--fg-3)} .row-body{min-width:0} .row-name{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:5px} .row-desc{display:block;font-size:14px;line-height:1.5;color:var(--fg-2);max-width:620px} .row-desc.health{max-width:640px;margin-bottom:12px} .row-end{display:flex;align-items:center;gap:clamp(14px,2vw,22px)} .row-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--fg-3);border:1px solid var(--line-2);padding:4px 9px;white-space:nowrap} .row-glyph{font-family:'Sora',sans-serif;font-weight:700;font-size:26px;color:var(--accent);line-height:1;padding-right:6px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--fg-3); border:1px solid var(--line-2);padding:3px 9px;text-transform:uppercase} /* ---------- subpages: tools rows ---------- */ .tool-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:clamp(16px,3vw,30px); padding:clamp(22px,3vw,30px) 8px;border-bottom:1px solid var(--line)} .tool-num{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--fg-3)} .tool-body{min-width:0} .tool-name{font-family:'Sora',sans-serif;font-weight:600;font-size:clamp(19px,2.4vw,24px);letter-spacing:-.01em;margin-bottom:6px} .tool-desc{font-size:14px;line-height:1.5;color:var(--fg-2);max-width:520px} @media(max-width:560px){ .track{grid-template-columns:30px 1fr;gap:14px} .track-end{grid-column:2;justify-content:flex-start;margin-top:8px} .tool-row{grid-template-columns:30px 1fr} .tool-row .btn-download{grid-column:2;justify-self:start;margin-top:14px} }