/* ============================================================================= VOCTOS BLOG — the desk archive THE PAGE THAT DID NOT EXIST. On the old blog `/category/seo/` returned a 404: the clusters had no hub at all, which for a site whose job is ranking and being cited was the single biggest architectural gap. This is that page. It does three things, in this order, because a hub has to earn its link: 1. say what this desk is and who runs it 2. START HERE — a chosen handful, not newest-first. Most visitors arrive on a desk from an engine, and the newest post is rarely the right first read. 3. THEN the archive, with real pagination. The folder tab the reader clicked is reused at the top of the page — same radius, same 48×10 nub — so the tab arrives OPENED. ============================================================================= */ .vb-desk-hero { position:relative; background:var(--ink); color:#fff; overflow:hidden; padding-block:120px 44px; } @media (min-width:1024px){ .vb-desk-hero { padding-block:150px 56px; } } /* the same ghost word the front page's ink band uses, so a reader who arrives here from that band recognises the device */ .vb-desk-ghost { position:absolute; inset-inline-start:-.02em; bottom:-.34em; z-index:0; font-size:clamp(80px,14vw,210px); line-height:.8; font-weight:400; letter-spacing:-.04em; color:rgba(255,255,255,.055); white-space:nowrap; pointer-events:none; user-select:none; } .vb-desk-in { position:relative; z-index:1; } /* the opened tab */ .vb-desk-tab { display:inline-flex; align-items:center; gap:10px; position:relative; padding:9px 16px; margin-bottom:22px; background:var(--desk); color:var(--desk-ink); border-radius:10px 0 10px 10px; font-size:12px; } .vb-desk-tab .vb-nub { background:var(--desk); } .vb-desk-tab .vb-ico { display:block; width:20px; height:20px; color:inherit; } .vb-desk-tab img { display:block; height:22px; width:auto; } .vb-desk-h1 { font-size:var(--t1); line-height:1.02; letter-spacing:-.02em; max-width:20ch; } .vb-desk-lede { margin-top:18px; max-width:58ch; font-size:17px; line-height:1.6; color:rgba(255,255,255,.72); } /* the facts row: what this desk has actually produced, counted not typed */ .vb-desk-facts { display:flex; flex-wrap:wrap; gap:14px 44px; margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.16); list-style:none; } .vb-desk-facts b { display:block; font-size:30px; font-weight:400; line-height:1; unicode-bidi:plaintext; } .vb-desk-facts span { display:block; margin-top:8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.45); } /* ── START HERE ─────────────────────────────────────────────── Three chosen pieces, from the desk's sticky posts. If the editor has pinned nothing, this whole block is omitted rather than filled with the newest three — which would defeat its only purpose. */ .vb-start { padding-block:54px 0; } .vb-start-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px; padding-bottom:12px; } .vb-start-line b { font-size:12px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; } .vb-start-line s { text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .vb-start-rule { display:block; height:2px; background:var(--ink); margin-bottom:24px; } .vb-start-grid { display:grid; grid-template-columns:1fr; gap:20px; list-style:none; } @media (min-width:860px){ .vb-start-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } } .vb-start-item { display:grid; gap:14px; } .vb-start-item .vbf-th { border-radius:20px; } .vb-start-item img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; transition:scale .5s var(--ease); } .vb-start-item .vbf-th:hover img { scale:1.05; } .vb-start-item em { font-style:normal; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); } .vb-start-item h3 { margin-top:9px; font-size:var(--t5); line-height:1.3; } .vb-start-item h3 a:hover { color:var(--acc); } .vb-start-item p { margin-top:9px; font-size:14px; line-height:1.55; color:var(--muted); max-width:42ch; } .vb-start-item span { display:block; margin-top:10px; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); } /* ── the archive proper ────────────────────────────────────── 12 per page, server-rendered. The old index put all 150 posts in one document: 149 and about 698 KB of HTML that grew with every post. */ .vb-arch { padding-block:54px 0; } .vb-arch-line { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 18px; margin-bottom:24px; padding-bottom:12px; border-bottom:1px solid var(--rule); } .vb-arch-line b { font-size:12px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; } .vb-arch-line span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } /* ── empty and search states ───────────────────────────────── An archive with nothing in it gets a real sentence and a way out, not a centred "Nothing found." */ .vb-empty { padding-block:110px 90px; max-width:56ch; } .vb-empty h1 { font-size:var(--t3); line-height:1.08; } .vb-empty p { margin-top:16px; font-size:16px; line-height:1.65; color:var(--muted); } .vb-empty .vb-all { margin-top:26px; } .vb-search { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; } .vb-search input { flex:1 1 240px; min-width:0; max-width:380px; border:1px solid var(--rule); border-radius:19px; padding:14px 19px; font-family:inherit; font-size:14px; font-weight:300; color:var(--ink); background:#fff; outline:0; transition:border-color .2s var(--ease); } .vb-search input:focus { border-color:var(--purple); } .vb-search button { flex:none; border:0; border-radius:19px; padding:14px 26px; background:var(--ink); color:#fff; font-family:inherit; font-size:14px; font-weight:400; cursor:pointer; transition:background .2s var(--ease), scale .2s var(--ease); } .vb-search button:hover { background:var(--purple); scale:1.03; } /* the archive head on a plain listing (home, author, date, search) — no ink hero, because those pages have no desk to colour it with */ .vb-list-head { padding-block:120px 0; } @media (min-width:1024px){ .vb-list-head { padding-block:150px 0; } } .vb-list-head h1 { font-size:var(--t3); line-height:1.08; } .vb-list-head p { margin-top:14px; font-size:15px; line-height:1.65; color:var(--muted); max-width:56ch; } /* ============================================================================= THE RESEARCH ARCHIVE NOTHING LIVES HERE ANY MORE, and the deletion is the note. /research/ used to be a port of the same page on voctos.com: an ink head band written from ordinary classes, with the cards underneath built from the agency's own utilities against assets/vendor/agency-main.css. Six selectors served it — .vb-research-head / -eb / -h1 / -empty and .voctos-archive-desc. That page now uses the desk archive's parts instead (.vb-desk-hero and .vb-arch), because a white four-up grid between an ink masthead and an ink footer read as a different website. The six selectors went unreferenced the moment the template changed, so they are gone rather than left in the sheet to be puzzled over later. ============================================================================= */