/* ─────────────────────────────────────────────────────────────────────────────────────────────── namecoat design system — the SINGLE source of truth for the public pages (apex is the reference). Served from https://name.co.at/namecoat.css and linked LAST in every page's so it owns the shared chrome (background, wordmark, sub-label, tools nav, account control, palette). It declares ONLY the shared visual properties on shared selectors, so each page keeps its own layout, sizes and content CSS via the per-property cascade. Edit here once → every namecoat page moves together. ─────────────────────────────────────────────────────────────────────────────────────────────── */ :root{ color-scheme:dark; --bg1:#16131f; --bg0:#0a0a10; --ink:#e8e8f0; --muted:#9a93c8; --faint:#6f6a92; --accent:#7fd1ff; --accent2:#9bb3f0; --ok:#9ad8c0; --okdot:#7fd6a8; --line:#2a2740; --line2:#262338; --card:#13111dcc; --field:#15131fdd; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; --display:'Avenir Next','Avenir',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; } *{box-sizing:border-box} /* shared visual base — background + ink + font only; each page keeps its own body layout/padding */ body{color:var(--ink);font-family:var(--mono); background:radial-gradient(1400px 1000px at 50% 38%,var(--bg1),var(--bg0) 80%) fixed} a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline} /* the glowing wordmark — the brand signature. Treatment (gradient + sheen + face) is unified; SIZE is left to the page so the apex hero can be large while header wordmarks stay small. */ .wm,.home{font-family:var(--display);font-weight:700;letter-spacing:-1px; background:linear-gradient(100deg,transparent 40%,rgba(214,240,255,.45) 50%,transparent 60%), linear-gradient(180deg,var(--accent),var(--accent2)); background-size:240% 100%,100% 100%;background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text;color:transparent; animation:wmsheen 7.5s ease-in-out infinite} .wm:hover,.home:hover{text-decoration:none} @keyframes wmsheen{0%{background-position:135% 0,0 0}55%,100%{background-position:-35% 0,0 0}} @media(prefers-reduced-motion:reduce){.wm,.home{animation:none}} /* the soft radial glow behind the wordmark — unify the colour (size/position stay per page) */ .glow,.bglow{background-image:linear-gradient(120deg,#6f9ec2,#84ada4,#8a9cc6)} /* the uppercase service sub-label under the wordmark */ .label,.sub{color:var(--muted);letter-spacing:3px;text-transform:uppercase} /* the tools pill-nav */ .tools{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2rem} .tools a{font-size:.82rem;color:var(--muted);border:1px solid var(--line);background:#15131f88; border-radius:999px;padding:.32rem .85rem;transition:border-color .18s,color .18s;text-decoration:none} .tools a:hover{border-color:#5a4f9e;color:#fff;text-decoration:none} .tools a.cur,.tools a.here{color:#cdc9e6;border-color:#3a3658} /* ── account control — fixed top-right, refined. Mount
on the page; namecoat.js fills it from the apex /_whoami. Signed out: a clean "sign in"; signed in: ● you ▾ opening a small Panel / Sign out menu. ── */ .nc-acct{position:fixed;top:.85rem;right:1rem;z-index:60;font:500 .8rem var(--mono)} .nc-acct-btn{display:inline-flex;align-items:center;gap:.45rem;font:inherit;line-height:1;cursor:pointer; color:#cfcce0;background:#15131fcc;border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem; transition:border-color .18s,background .18s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .nc-acct-btn:hover{border-color:#5a4f9e;background:#1a1726cc;text-decoration:none;color:#fff} .nc-acct .dot{width:.46rem;height:.46rem;border-radius:50%;background:var(--okdot);box-shadow:0 0 8px #7fd6a8aa;flex:none} .nc-acct .name{color:var(--ok);font-weight:600;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nc-acct .caret{color:var(--faint);font-size:.62rem;transition:transform .18s} .nc-acct.open .caret{transform:rotate(180deg)} .nc-menu{position:absolute;top:calc(100% + .35rem);right:0;min-width:9.5rem;display:none;flex-direction:column; background:#13111df2;border:1px solid var(--line2);border-radius:12px;padding:.3rem; box-shadow:0 18px 44px -18px #000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .nc-acct.open .nc-menu{display:flex} .nc-menu a{padding:.5rem .7rem;border-radius:8px;color:#cfcce0;font-size:.82rem;text-decoration:none} .nc-menu a:hover{background:#1d1b2b;color:#fff;text-decoration:none} @media(max-width:520px){.nc-acct .name{max-width:7rem}}