/* SPOJITI BRAND IDENTITY — ONE SOURCE (b262). Every spojiti.world page links this file; NO page may define these rules inline. Born 2026-08-26 after the CEO caught the footer wordmark not matching the header: 14 self-contained pages had grown two .brand img variants, two .grad recipes and a one-off footer size. Same cure as the logo (mark-v5, canonical source): brand identity is copied by REFERENCE, never by hand. Versioned name because assets cache for SEVEN DAYS — a change here ships under a NEW filename plus a link bump in every page, never an in-place edit. v1 -> v2 on the same day this file was born, because the hover rules were appended to v1 after v1 was already deployed: the box served the new bytes, every browser that had loaded the page once kept the old ones, and the CEO saw hovers that would not change. Third time this cache has bitten (mark.svg, screenshots, this) — the rule is not optional. Pages own their palette vars (--green/--cyan/--blue/ --purple, light + dark); this file only consumes them. */ .grad{background:linear-gradient(100deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent} /* The lockup — header (.brand) and footer (.fbrand) are IDENTICAL: 34px mark, 30px gradient wordmark, same gap, same glow. */ .brand,.fbrand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.3px;white-space:nowrap} .brand{flex:0 0 auto} .fbrand{margin-bottom:8px} .brand img,.fbrand img{width:34px;height:34px;display:block;filter:drop-shadow(0 0 10px rgba(11,106,239,.45))} .brand>span,.fbrand>span{font-size:30px;line-height:34px;letter-spacing:-.6px;background:linear-gradient(100deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent} .brand small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.4px;color:var(--muted);margin-top:-3px} /* The tagline — footer size (.dots) and hero size (.tagline). Green Private · blue Secure · purple Direct, dot before each word, everywhere. */ .dots span{font-weight:700;font-size:13px;margin-right:14px} .dots span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px} .tagline{display:flex;gap:26px;justify-content:center;margin:14px 0 26px;font-weight:600;font-size:17px} .tagline span::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:8px} .dg,.tg{color:var(--green)}.dg::before,.tg::before{background:var(--green)} .db,.tb{color:var(--blue)}.db::before,.tb::before{background:var(--blue)} .dp,.tp{color:var(--purple)}.dp::before,.tp::before{background:var(--purple)} /* NAV + FOOTER LINK BEHAVIOUR (CEO, 2026-08-26). Shared here for the same reason the wordmark is: a hover that differs per page is the same scatter. Menu item on hover = brand gradient TEXT, no grey plate. 90deg here, not the lockup's 100deg: a one-word box is wider than it is tall, and at 100deg the sweep runs mostly vertically so the word shows only the middle of the ramp. Horizontal puts the whole green-to-purple sweep across it. The active item's gradient underline (.links a.on::after) is a child element and is unaffected by the text clip, so hovering the current page still shows both. Footer links go brand purple — var(--purple) is the deep #9003CE on the light theme and the bright #A504EC on dark, so it reads as dark purple where the CEO asked for it and stays legible where it could not. */ .links a{transition:color .16s ease,background-color .16s ease} .links a:hover,.links a.on:hover{background:linear-gradient(90deg,var(--green),var(--cyan) 34%,var(--blue) 64%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent} footer.site a{transition:color .16s ease} footer.site a:hover,.fcols a:hover{color:var(--purple)} /* b266 (2026-08-27, CEO): the HEADER lockup two sizes smaller — mark 34->28, word 30->24. Footer (.fbrand) keeps the original scale on purpose. New filename (v2->v3) per the 7-day asset-cache rule. */ .brand img{width:28px;height:28px} .brand>span{font-size:24px;line-height:28px;letter-spacing:-.45px} /* ─────────────────────────────────────────────────────────────────────────── v4 (2026-08-29) · THE BETA MARK. v3 plus one addition: a small "Beta" tag riding after the wordmark, so a visitor knows in the first half-second that this is not the finished product. CEO ask, 2026-08-29. NEW FILE = NEW NAME (brand-v5.css next time). Assets are cached seven days and this file has no fingerprint in its content, so re-cutting brand-v3.css in place would have left every returning visitor on the old stylesheet for a week while the box served the new one perfectly. That exact failure cost us the second-freeze logo rollout — see the Caddyfile note. Deliberately NOT the brand gradient. The wordmark owns the gradient; a status tag that competed with it would read as part of the name rather than a note about the build. Muted, outlined, lowercase-height — a label, not a badge, and it disappears the day production goes live by removing one span. ─────────────────────────────────────────────────────────────────────────── */ /* 2026-08-30 (CEO) · THE BETA BADGE IS THE PLAN-CARD BADGE. Same thing, smaller: a FILLED brand-gradient capsule with white text, drifting on the same 5.5s cycle as .pbadge in subscribe.html. My first pass made it gradient TEXT on a bordered pill, which is a different object that merely uses the same colours — the CEO asked for the badge, not a cousin of it. ⚠ inline-flex + line-height:1 is what centres the word in the capsule. Inline-block leaves the glyphs sitting on a text baseline inside a box sized by the font's line box, so an all-caps word with no descenders rides high — visible at 10.5px and impossible to unsee once noticed. The padding is symmetric because the flexbox, not the baseline, is doing the centring. background-size:220% is what gives the gradient room to move. */ .brand .beta,.fbrand .beta{ display:inline-flex; align-items:center; justify-content:center; align-self:center; margin-left:6px; /* ⚠ 4.75px TOP, 2px BOTTOM, AND THE FRACTION IS DELIBERATE. An all-caps word has no descenders, so its ink sits high inside the font's line box; symmetric padding renders BETA visibly above the centre of its capsule, which is what the CEO spotted. Optical centring here is a measurement, not a guess: the rendered badge was pixel-scanned at 4x and the top/bottom padding difference walked until the white ink was centred. 3/5 → 4.75px high 3/3 → 2.75px high 4/2 → 0.75px high 5/2 → 1.25px LOW 4.75/2 → 0.25px high ← this one A quarter of a pixel is below anything a screen can show. Whole-pixel padding cannot get closer, which is the entire reason for the fraction. */ padding:4.75px 10px 2px; border:0; border-radius:100px; background:linear-gradient(100deg,#00E5A0,#22C7E0 34%,#0B6AEF 64%,#A504EC); background-size:220% 100%; box-shadow:0 2px 10px rgba(11,106,239,.35); color:#fff; font-size:10px; font-weight:800; letter-spacing:.06em; line-height:1; text-transform:uppercase; white-space:nowrap; vertical-align:middle; animation:betaShimmer 5.5s ease-in-out infinite; } @keyframes betaShimmer{0%,100%{background-position:0% 0}50%{background-position:100% 0}} @media (prefers-reduced-motion: reduce){ .brand .beta,.fbrand .beta{animation:none} } @media (max-width:700px){ .brand .beta,.fbrand .beta{font-size:9px;padding:3px 8px;margin-left:4px} } /* ─────────────────────────────────────────────────────────────────────────── v6 (2026-09-07) · THE CHROME REVAMP (CEO, website items 1, 6, 9). Same file as v5 plus this block. NEW FILE = NEW NAME — assets cache seven days; every page's moved v5 -> v6 in the same commit (tools/site-chrome.py stamps the header, the footer and this link on every page, so the chrome can no longer drift page by page). 1 · The menu right-aligns and joins the theme toggle. Pages still carry the old centred rule inline; this comes later in the cascade at the same specificity, scoped to desktop so the mobile dropdown (a page rule inside its own media query) is untouched. 6 · Three tones: header lighter than the body, footer darker. The dark body lifts from pure black to #030712 so the footer CAN be darker — nothing is darker than black (CEO agreed 2026-09-07). 9 · Footer: the lockup at HEADER size, left-aligned, five even columns (brand + Spojiti · Resources · Legal · Connect). ─────────────────────────────────────────────────────────────────────────── */ @media (min-width:761px){ .links{position:static;transform:none;margin-left:auto;gap:2px} .navend{margin-left:8px} } :root{--bg:#030712;--headerbg:rgba(10,21,38,.86);--footerbg:#000000} [data-theme="light"]{--bg:#F6F8FC;--headerbg:rgba(255,255,255,.9);--footerbg:#E9EEF6} body{background:var(--bg)} header.site{background:var(--headerbg)} footer.site{background:var(--footerbg);border-top:1px solid var(--border)} .fcols{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:26px;align-items:start} @media (max-width:980px){.fcols{grid-template-columns:1.5fr 1fr 1fr}} @media (max-width:700px){.fcols{grid-template-columns:1fr 1fr}} @media (max-width:460px){.fcols{grid-template-columns:1fr}} .fbrand{margin-bottom:10px} .fbrand img{width:28px;height:28px} .fbrand>span{font-size:24px;line-height:28px;letter-spacing:-.45px} .fcols h4{margin:4px 0 10px} .fcols a{margin:7px 0;font-size:14px} .fline{text-align:left;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between} /* ─────────────────────────────────────────────────────────────────────────── v7 (2026-09-07) · WEB-1c chrome corrections (CEO review of the beta site). NEW FILE = NEW NAME — assets cache seven days. a · The footer spans the HEADER's container (1280, 14px gutters), so the footer lockup sits under the header lockup and the Connect column ends where the menu ends; the toggle allowance on the right keeps Connect under "Support". Link rows are a touch tighter (7 -> 6). The tagline (Private · Secure · Direct) never wraps. b · Card grids that lose symmetry (3 + 1, 3 + 2) centre the short last row instead of leaving a hole on the right. c · One button family: .sbtn (white on the brand gradient) and .sbtn.ghost (gradient text inside a gradient border). Hovering the solid one shows the gradient border; hovering the ghost fills it. ─────────────────────────────────────────────────────────────────────────── */ footer.site>.wrap{max-width:1280px;padding:0 14px} @media (max-width:900px){footer.site>.wrap{padding:0 18px}} .fcols{grid-template-columns:1.55fr 1fr 1fr 1fr auto;gap:26px 34px} @media (min-width:981px){.fcols{padding-right:64px}} @media (max-width:980px){.fcols{grid-template-columns:1.5fr 1fr 1fr;padding-right:0}} @media (max-width:700px){.fcols{grid-template-columns:1fr 1fr}} @media (max-width:460px){.fcols{grid-template-columns:1fr}} .fcols a{margin:6px 0} .fcols .dots{white-space:nowrap} .fcols .dots span:last-child{margin-right:0} .fcols p[data-c="footer.blurb"]{max-width:340px} .cols,.steps,.tgrid,.pqgrid{display:flex;flex-wrap:wrap;justify-content:center} .cols>*,.steps>*{flex:1 1 260px;max-width:calc((100% - 32px)/3);box-sizing:border-box} .tgrid>*,.pqgrid>*{flex:1 1 300px;max-width:calc((100% - 16px)/2);box-sizing:border-box} @media (max-width:900px){.cols>*,.steps>*{max-width:calc((100% - 16px)/2)}} @media (max-width:600px){.cols>*,.steps>*,.tgrid>*,.pqgrid>*{max-width:100%}} .sbtn{display:inline-block;position:relative;padding:12px 24px;border-radius:14px;border:0;font-weight:800;font-size:15px;line-height:1.2;color:#fff;text-decoration:none;cursor:pointer;background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--purple));box-shadow:0 10px 30px rgba(11,106,239,.28);transition:background-color .16s ease,color .16s ease,box-shadow .16s ease} .sbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--purple));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} .sbtn:hover{background:var(--card);color:transparent;box-shadow:none} .sbtn:hover>span,.sbtn.ghost>span{background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent} .sbtn.ghost{background:var(--card);color:transparent;box-shadow:none} .sbtn.ghost:hover{background:linear-gradient(100deg,var(--green),var(--blue) 55%,var(--purple));box-shadow:0 10px 30px rgba(11,106,239,.28)} .sbtn.ghost:hover>span{background:none;-webkit-text-fill-color:#fff;color:#fff} .cols:has(>:nth-child(2):last-child)>*{max-width:calc((100% - 16px)/2)} .cols:has(>:only-child)>*{max-width:100%} /* ─────────────────────────────────────────────────────────────────────────── v8 (2026-09-07) · THE BRAND DROPDOWN (CEO: "the Issue drop-down is the stock one"). A native