Changelog
A Overview B Brand Strategy C Verbal Identity D Visual Identity
E Content & Channels F Editorial G Short Video H Photography I Partner + Friend
J Knowledge Base K Piercing Service L Product & Shop M Aftercare N Operations
O Từ điển khái niệm P Assets Library Q Changelog
Type to search across all chapters...
↑↓ navigate ↵ open esc close
Guidelines › Meta › Changelog
Chapter Q

Changelog

Changelog

Version history for the COCKSTOCK Brand Guidelines. Current build: V2.4.5.

V2.4.5 — Chapter skeleton loader + Title Case rule removed CURRENT

Build date: 2026-04-14 · Status: Live

  • Instant skeleton on chapter navigation: Click any chapter link and the content area flips to an animated skeleton (eyebrow bar + title bar + hero block + body lines) the moment the click fires. Previously the old chapter stayed rendered for 100–500ms while the browser fetched the new HTML — felt like a “flash of stale content” especially on mobile after the menu finishes closing. Implementation: src/scripts/chapter-loader.ts listens (capture phase) on all chrome navigation regions (sidebar, mobile menu, prev/next, breadcrumbs, overview cards, cmd+k results, right-toc) and adds a .content-loading class; CSS paints the skeleton via animated ::before. Skeleton is wiped when the new DOM replaces it.
  • Title Case “BANNED” rule removed: Deleted the DON’T alert in Ch C Capitalization Rules (“Title Case as a system-wide default — BANNED”) and the matching line in Ch N Do’s & Don’ts. Title Case is used situationally in the brand (taglines, hero headlines, Shopee product names) — hard-banning it was inaccurate.

V2.4.4 — Fix Alert padding & mobile logo alignment (for real) DEPLOYED

Build date: 2026-04-14 · Status: Live

  • Tailwind utilities actually work now: The :where(*) reset was unlayered, and in CSS cascade layer ordering any unlayered rule beats rules inside @layer utilities regardless of specificity. That silently nuked p-4, px-6, and every other Tailwind utility in Alert/Card/Accordion. Wrapped the reset in @layer base so Tailwind utilities win by layer priority. All Starwind components now have their proper internal padding restored.
  • Mobile topnav padding: Desktop rule set padding: 0 16px 0 0 (logo flush-left), but the @media (max-width: 1100px) override on mobile re-introduced padding: 0 16px — pushing the logo 16px inward on phones/tablets. Both rules now match.
  • Also fixed (from V2.4.3 deploy): floating VersionBadge at bottom-right showing current version + deploy ID. Also caught and fixed a ghost-deploy bug where a corrupted unist-util-visit-parents package made npm run build fail silently for 2 hours while wrangler uploaded last week’s stale dist. Clean reinstall resolved it.

V2.4.3 — Version badge, logo alignment, utility padding fix DEPLOYED

Build date: 2026-04-14 · Status: Live

  • Floating deploy inspector: New <VersionBadge /> pill at the bottom-right of every page shows the current package.json version and deploy fingerprint (Cloudflare commit SHA short, or a build timestamp when the CF env vars aren’t available). Click to copy the full ID. Used to verify at a glance whether a new build has actually rolled out past CDN/browser caching.
  • Main logo flush-left: Topnav padding: 0 16px → 0 16px 0 0. The COCKSTOCK wordmark now hugs the viewport’s left edge instead of floating 16px inward.
  • Alert / Card inner padding restored: global.css universal reset now uses :where(*, *::before, *::after) which has zero specificity, so Tailwind utilities like p-4 always win. Previously the reset’s equal specificity + later source order was wiping out padding inside every Starwind component.

V2.4.2 — Content polish + Assets Library multi-upload DEPLOYED

Build date: 2026-04-14 · Status: Live

  • Tagline EN updated: “Pretty Piercing + Cool Bling” → “Pretty Piercing + Precious Bling” globally. Updated in Ch A (Overview) and Ch C (Verbal Identity Naming Convention).
  • Assets Library multi-upload: #plUploadInput now accepts multiple image files (multiple accept=“image/*”). Uploads run sequentially with per-file progress in the button (“Uploading 3 / 12…”) and a status line listing the generated photo IDs on completion. Failures on individual files don’t stop the batch.
  • Logo asset paths fixed: 10 <img src=“Icons/…”> references across 6 chapters were using relative paths that 404’d when viewed on chapter routes (e.g. /visual/Icons/Logos/CSAftercare.svg). Changed to absolute /Icons/…. Affected: Sub-Brand/Program Logos (CS Aftercare, CSFriends), Product Line Logos (Titanium F136, SS 316L, S925 Silver), 6 Golden Standards icon list, decorative icons.
  • Brand Strategy polish: Removed “RETIRED: V0.3 Jester + Innocent / V2.0 Rebel” callout — concise guidelines don’t need to narrate old archetypes that never shipped. Removed “Nguyên tắc bất biến” section (it was an authoring memo to the AI assistant, not content for readers).
  • COCKSTOCK vs. Piercing Competitors — rewritten: reframed around mission & vision. We compete by being the best at what we do and raising the standard as we grow, not by positioning against others.
  • COCKSTOCK vs. Jewelry Competitors — rewritten: two layered value props — (1) ear styling expertise (curation as product), (2) the smarter material choice (surgical/implant-grade stainless steel, Ti F136, S925 — hypoallergenic, sensitive-skin-safe, accessibly priced).

V2.4.1 — Tailwind v4 + Starwind UI + CMS componentization pilot DEPLOYED

Build date: 2026-04-13 · Status: Live

  • Tailwind v4 integration: Installed @tailwindcss/vite and wired into Astro’s Vite config. Theme variables (—primary, —background, —muted, —radius, font families) bridge directly to COCKSTOCK tokens in tokens.css — single source of truth preserved.
  • Starwind UI for Astro (v1.16+): 10 accessible, copy-paste components installed via CLI — Alert, Accordion, Card, Carousel, Table, Badge, Image, Aspect Ratio, Prose, Button. Rethemed 100% to COCKSTOCK brand by mapping Starwind’s role variables (primary/secondary/muted/accent/border) to —orange / —clay / —cream / —butter / —off-blk-lt / etc.. Dark mode removed.
  • Content wrappers (7 new Astro components): Alert, Card, Accordion, Table, Carousel, PhotoCard, PhotoGrid — thin flat-API wrappers around Starwind’s compound components so MDX authors see one clean prop surface instead of compound children. Each wrapper registered in keystatic.config.ts using the correct content-component factory (wrapper / block / inline) so Keystatic’s MDX editor can parse, edit, and write them back.
  • Ch C Verbal Identity — rewritten with typed components: Every <Badge>, <DataRow>, <Alert>, <Card>, <Table> now a typed component with a Keystatic schema. No raw HTML left in the chapter body. Fully editable in /keystatic.
  • Ch H Photography — rewritten with typed components: Six collapsible photography-type cards (FLATLAY/MIXSET/CATALOGUE/CONCEPT/FEEDBACK/INFOGRAPHICS) replaced by a single <Accordion> with 6 data-driven items. Three carousel blocks (catalogue, concept, mixset) replaced with <Carousel> variants. All photo grids replaced with <PhotoGrid> / <PhotoCard>. Byte-identical visual output, fully CMS-editable.
  • Image pipeline: Figure & ChapterLayout hero now use Astro’s <Image> component with passthroughImageService() and remotePatterns whitelisting the R2 Workers domain. Lazy loading, async decoding, and dimension hints applied to every img across all chapters (~305 raw imgs processed via script).
  • Keystatic fixes: Migrated from generic component() factory to typed wrapper() / block() / inline() from @keystatic/core/content-components. This fixes the createAndFill ProseMirror error and enables Keystatic to render typed editors (title + variant + body fields) for each component instead of the raw MDX text.
  • MDX authoring convention: Wrapper components (DataRow, Card, Alert) must have their opening and closing tags on their own lines so remark-mdx parses them as mdxJsxFlowElement (block) instead of mdxJsxTextElement (inline). Documented in the Keystatic config.
  • Legacy chapters unchanged: 14 other chapters continue to use the legacy component set (DataRow/Badge/Quote/Killed/InfoBox/Figure/Pillars/Pillar) and render identically to V2.4.0. They’ll be migrated chapter-by-chapter in later passes using the pilot library.

V2.4.0 — Content Audit Pass DEPLOYED

Build date: 2026-04-12 · Status: Live

  • Content audit & consolidation: Full re-audit of all 16 chapters to identify duplication, stale content, and excessive nesting carried over from V0.3 → V2.3 iterations. ~20% line-count reduction across the codebase with zero visual regression.
  • Material Tiers consolidation: Previously duplicated verbatim across 5 chapters (A, J, K, L×2). Full spec now lives only in Chapter L as the single source of truth; A, J, K trim to 1-line summaries with cross-links. Edit once, propagate everywhere.
  • Consulting SOPs consolidation: 4 SOP cards (Piercing, Jewelry Sales, Jewelry Change, Medical Check) were duplicated between K.5 and N.1. N.1 deleted, K.5 is now canonical. Chapter N references K.5 instead of re-rendering.
  • E — Content & Channels trimmed: Removed the 40-item FigJam-dump “Content & Format” taxonomy (now maintained in the internal production database). Kept platform map, production standards, V2.2 Content Angles Tree, and operational governance layers.
  • F vs H scope clarified: Chapter F is editorial & conceptual production (quarterly creative brand-building shoots). Chapter H is operational photography (social media flow, KOL & customer feedback, product catalogue). Clear intros added to both.
  • C — Bilingual Strategy updated to match B.9: Previous “code-switching is natural for Gen Z” language conflicted with B.9 Nguyên Tắc Bất Biến #9 (Trong Sáng Ngôn Ngữ). Now one-language-at-a-time is the rule across both chapters, reflecting the move to a more premium segment.
  • D — PENDING blocks removed: Deleted “Photography Styleguide [PENDING]” and “Video Styleguide [PENDING]” from Visual Identity. Photography is fully covered in F/H; video in G. No information lost.
  • I — Booking Guidelines merged: Previously had two PENDING placeholders (KOL/KOC Partnership Guidelines + Booking Guidelines). Merged into one unified “Booking Guidelines” section awaiting input from the Booking Team.
  • K.2 — Ear Curation flagged as CRITICAL PENDING: The Ear Destination framework is the core V2 differentiator. The placeholder is now prominently flagged with explicit content spec for when the consulting team delivers the internal framework (Q2 2026 target). No fake-filling.
  • N.5 — V0.3 Operational Values renamed: “V0.3 Operational Values” → “Operational Values”. Content unchanged; the V0.3 prefix was a leftover artifact marker that implied stale. Trách Nhiệm + Tử Tế remain the operational (HR) layer complementary to Ch B Core Values.
  • Stale content removed: Retired “Clinic + Sensible” visual mood card (Ch B Experience Criteria). Existing retired markers for Jester/Innocent, Rebel/Maverick, Happy New Ear, FF More Pro stayed as one-line notes where appropriate.
  • Next phase — Componentization pilot: After this audit deploys, Chapter C becomes the pilot for migrating raw inline HTML into typed components. Goal: 100% of content becomes editable in Keystatic CMS without parser errors, while preserving exact visual fidelity.

V2.3.0 — Astro + Keystatic CMS Migration DEPLOYED

Build date: 2026-04-11 · Status: Live

  • Architecture shift: Migrated from monolithic index.html (6000+ lines) to Astro 5 with MDX content collections, component library, and Keystatic CMS. Enables non-technical team content editing + proper component reuse.
  • Component library: 20+ reusable components — Topnav, Sidebar, MobileSubbar, Breadcrumbs, PrevNext, CmdKModal, ChapterLayout, OverviewCard, plus content components (DataRow, Badge, Quote, Killed, InfoBox, Figure, Pillars, Pillar).
  • Content as data: All 16 content chapters migrated to MDX files under src/content/chapters/. Each chapter has structured frontmatter (letter, title, group, order, heroPhotoId). Chapter P (Assets Library) remains an interactive app page.
  • Keystatic CMS: Admin UI at /keystatic for non-technical editors. Currently local storage mode for dev — switch to GitHub mode before team rollout. Chapters collection with MDX editor (headings, lists, bold/italic, blockquote, dividers).
  • Pagefind full-text search: Build-time index of all 19 pages, 4597 words. Replaces legacy runtime cmdkSearch(). Arrow-key navigation, Enter jumps, Escape closes.
  • Cloudflare adapter: Hybrid static + server rendering via _worker.js. Static chapters + dynamic Keystatic admin. Deploy target unchanged (Cloudflare Pages).
  • Legacy preserved: public/legacy.html keeps the old monolith accessible at /legacy.html for reference during migration period.
  • Deploy command changed: npm run build (runs astro build && pagefind --site dist) then npm run deploy (wrangler pages deploy dist).

V2.2.3 — Assets Library & Tag Management DEPLOYED

Build date: 2026-04-10 · Status: Live

  • Photo Library → Assets Library: Renamed Chapter P. Now supports all file types (PDF, AI, fonts, etc.) with auto-detection. Non-image assets show extension badge + original filename on cards and in modal.
  • Tag management: Multi-select tag filtering (OR logic), expand/collapse tag area (3-row default), tag sort (A-Z / Uses), tag autocomplete suggestions when adding tags, global tag delete (× on filter chips removes tag from all assets with confirmation).
  • Tag cleanup: Removed ~160 junk tags from 164 assets — numeric IDs (01-61), pageN, month names, internal codes (caresoft, loicongtact, kieusung, goldcz, pinkcz).
  • Upload simplified: Folder field removed (auto-assigned). Sort options reduced to Date Added + Size.
  • Modal improvements: Download button added. X close button (top-right, absolute positioned). Delete button height normalized. Non-image preview with extension badge. Original filename displayed.
  • Copy ID/URL fix: Clipboard API with textarea fallback for cross-browser support.
  • Decorative icons: 15 SVG icons uploaded to R2 (images/icons/decorative/) with proper tags.
  • Sidebar: Chapter title clickable (navigates + closes sidebar). Hover states on letter + name.
  • Workers API: Expanded mime types — PDF, AI, EPS, PSD, ZIP, TTF, OTF.
  • Card outlines: Sand border on all asset/photo cards.

V2.2.2 — R2 Image Hosting, Photo Library & Workers API DEPLOYED

Build date: 2026-04-09 · Status: Live

  • Cloudflare R2: 290 images migrated from git repo to R2 bucket (cockstock-assets). Images served via Workers API at cockstock-api.nhatminh.workers.dev/img/. Repo size reduced from ~200MB to ~5MB.
  • Workers API: CRUD endpoints — list, serve, upload, rename, update tags, delete. CORS configured for production + localhost. Cloudflare Access auth (SSO) on write endpoints.
  • Chapter P (NEW): Photo Library — 290 images browsable with search, tag clusters, sort (ID/folder/tag/date/size), pagination (48/page). Click to view full image + metadata. Edit tags, delete, upload from browser. Fetches from Workers API.
  • Chapter Q: Changelog — shifted from P to Q.
  • Navigation: 17 chapters A–Q. Homepage grid + mobile menu updated.
  • All 318 image src/href updated from local paths to R2 serve URLs.
  • Decorative icons grid: 15 SVG icons added to Ch D Visual Identity with download buttons.

V2.2.1 — Typography, UI Polish & Asset Pipeline DEPLOYED

Build date: 2026-04-08 · Status: Live

  • Typography consolidation: Removed FF More Pro & Exchange entirely. All display roles now use Fraunces Soft only (Thin 100, ExtraLight 200, Light 300). Google Fonts variable import added for designer flexibility.
  • New logos: Main logotype & alternative ♥PIERCING logo SVGs replaced with updated versions. Menu toggle animates COCKSTOCK ↔ ♥PIERCING with crossfade.
  • Part titles unified: Homepage & menu part titles — Fraunces Soft 30px, wt 200, letter-spacing -0.02em, color off-blk-lt.
  • Sidebar letter: Fraunces Soft Thin 100, repositioned to align baseline with down button.
  • Image naming: 279 files renamed to 4-tag convention (XXXXXXX-tagA_tagB_tagC_tagD). All data-photoid attributes verified.
  • 19 Caresoft infographics: Embedded across Ch K (pricing, benefits, promos), Ch M (aftercare protocol, position care), Ch A (store locations).
  • UI fixes: Sidebar shadow removed when closed. Scroll progress bar solid orange. Pre-scroll on chapter navigation fixed. Mobile overflow on Ch E fixed. Search icon replaced (filled style, 12px, optical nudge).
  • Platform Map: Redesigned as 2-column card grid. Reordered: TikTok → Instagram → Shopee → Facebook → Website → Zalo OA. Zalo OA handle added.

V2.2.0 — Content Production System, Pricing & Product Tiers DEPLOYED

Build date: 2026-04-08 · Status: Live

Content Series Codes (Ch E): Prefix system (X/, K/, E/, T/) with series roster tables. Standardized naming: [PREFIX]/[SERIES]-[SỐ TRONG THÁNG]. KBK = Kịch bản khung.
Kênh TikTok & Instagram (Ch E): Platform handle registry — @cockstock, @cockstock.khuyen, @cock.stock, @thichxokhuyen active. @cockstockpiercing deprecated.
Flow sản xuất IG Feed (Ch E): Content pipeline (Angle Tree → Grid → Shotlists → Shoot → Air). 3 parallel strategies: Viral, Phễu Retarget, Thời trang hoá.
Short Video Production (Ch G): 6 new sections — Nhịp edit (2 levels), Mức zoom (XXS→XXL 7-level scale), Color Grading (3 rules), Chuyển cảnh, Âm nhạc (artlist.io + DO/DON’T), Quy tắc phụ đề.
Bảng giá xỏ (Ch K): Full pricing table by position — Tai cơ bản (99K-149K), Tai nâng cao (149K-210K), Cơ thể (180K-270K). Discount: 2 positions 10%, 3 positions 15%.
Phân loại sản phẩm 6 Tier (Ch L): Product classification by material (Post/Top/Stone). Tier 1 Full Titan → Tier 6 Full HK. CZ 5A & 6A quality grades.
Nguyên tắc bất biến (Ch B): 9 immutable principles including clinical aesthetic, no rebel, sensitivity-first, Vietnamese-first, founder privacy, typography rules, fixed palette, language purity.
Từ điển Khái niệm (Ch O): New chapter — 30+ term glossary covering materials, anatomy, tools, aftercare, and product architecture. Cross-referenced from Ch K and Ch L.
Badge system: New .badge-v22 CSS class (blue) for V2.2 content markers.

V2.1.9 — Typography Refinement, Content Architecture & Logo Placement DEPLOYED

Build date: 2026-04-07 · Status: Live

Typography CSS (Tasks 1-2): Homepage part titles switched to Fraunces Soft Light 28px. Chapter Mark (sidebar alphabet letter) switched to Fraunces Soft Light 64px — term “Chapter Mark” established.
Content Type Hierarchy (Task 2): Added Super Alt + Headline Alt rows (Fraunces Soft Light alternatives). Sub-head typeface changed to Mallory Compact Medium. Editorial typeface expanded to include Fraunces Soft Light.
Type Specimen (Task 3): Section renamed from “Vietnamese Diacritics — Character Specimen” to “Type Specimen.”
Logo Placement (Task 4): Added 9-zone placement grid (inspired by ClownZ brand book) with zone-to-collateral mapping table. Added Logo Misuse section with 6 rules. Replaced PENDING block.
Font Downloads (Task 5): Added download buttons for 11 brand-operational font files (Fraunces Soft 5 weights, Fraunces Soft 2, Mallory Compact 2, Mallory MP Compact 2). New .dl-btn-row-link CSS class. Replaced PENDING “Font Files — Awaiting Upload” block.
Booking Guidelines (Task 6): Removed duplicate from Ch N (was already in Ch I from V2.1.8 restructuring).
Editorial Strategy + Master Process (Task 7): Two new sections at top of Ch F — Editorial Strategy (why editorial leads, dual-concept system, feed color strategy) and Editorial Master Process (6-phase pipeline with owners, deliverables, quality gates).
Content & Format (Task 8): Renamed from “Content Angles & Production Standards.” Moved to first section of Ch E. Fixed double <h2> tag bug. Includes Production Standards and Content Processes sub-sections.
Instagram Feed Strategy (Task 9): Deferred — FigJam board CONTENT-CS (XdlNtw23WaD8qnxTJTkNrE, node 349:325) crawl pending for future session. Existing section preserved.

V2.1.8 — Major Restructuring, Layout System & Asset Pipeline DEPLOYED

Build date: 2026-04-07 · Status: Live

Chapter restructuring (15 chapters A-O): Content Production reordered — E: Content & Channels (leads), F: Editorial, G: Short Video, H: Photography, I: Partner + Friend (NEW). Operations shifted to J-N, Changelog to O.
Content moves: Editorial Photography + Stills + Mixset → Ch F. Photography Types → Ch H. Video/Reels → Ch G. Feedback Photography + CSFriends + Booking → Ch I. 925 Silver Architecture → Ch L.
2-column layout system: .col-2 CSS grid class. Content max-width widened to 840px. Homepage 2×2 cards on mobile with 4:5 ratio thumbnails.
Photo naming convention: All 263 images renamed to XXXXXXX-tagA_tagB_tagC_tagD format. IMAGE_REGISTRY.md tracks all assets. 5pt ALL-CAPS photo IDs on every JPG photo globally (selectable, copyable).
Carousel system: Slideshow carousel (scroll-snap, translucent dots, click arrows, drag). Card-scroll carousel (auto-width cards, edge bleed). Display rules: 1-4 photos = grid, 5+ = carousel.
Logo section redesigned (Ch D): Main Logo with Clear Space + Minimum Size (74px demo) merged. White logo on dark photo backgrounds. CS Mark merged into single card. SVG logos in Color Combinations. Logo Animation embed with play button + Cream (.mp4) and Transparent (.mov) download options.
Styling section (Ch F, NEW): Styling Direction from Tết Creative Deck — moodboards, outfit direction, lighting & angles, model/makeup/hair. Posing Styles shotlist from Q2/2026 deck.
Production insights (Ch E): Instagram Feed Strategy + Photography Production Categories (Outsource/In-house/Internal) from Production Suggestion deck.
Sidebar redesign: Mobile/tablet: big letter (52pt Mallory Cond Bold) + chapter name + numbered H2/H3 TOC + ↑/↓ chapter nav buttons (sticky, greyed when at boundary). Desktop: Parts + Chapters nav (all 15 chapters with group labels).
Breakpoint extended: Mobile/tablet pattern (hamburger + subbar + toggle sidebar) now covers 0-1100px. Desktop with topnav tabs at >1100px.
Download button system: 24px off-black rounded square with off-white arrow. Always visible on cards. Applied to logo SVGs and logo animation.
UI fixes: macOS-style color dots on dropdown cards. Do/don’t bars spacing + no left color bar. Scroll-margin-top 90px for navbar clearance. Prev/next same row. Dropdown independence (align-items:start). Subbar shows chapter name.
PDF extractions: 21 pages from Tết Creative Deck + 6 pages from Production Suggestion deck + 1 page from Q2/2026 Posing Styles shotlist. All renamed with ID convention.
Div balance: 1312/1312 ✓ · 280 image refs, 0 broken · 15 chapters · 4,424 lines

V2.1.7 — Brand Identity, Logo & V0.3 Consolidation DEPLOYED

Build date: 2026-04-06 · Status: Deployed

Core Values finalized (Ch B): Tận Tâm (Devoted), Tinh Tế (Refined), Chuẩn Không Thỏa Hiệp (Uncompromising Standards), Tươi Mới (Fresh). Operational values: Trách Nhiệm + Tử Tế. Status upgraded from PENDING to V2.1.
Tone of Voice promoted (Ch C): V0.3 Vietnamese tone upgraded to full V2.1 Tone of Voice — 3 principles (Trung Thực, Chân Thành, Tươi Trẻ), communication priority hierarchy, and tone spectrum by context (Social, Consultation, Aftercare, Education, KOL). Status upgraded from PENDING to V2.1.
Vision & Mission refined (Ch B): Merged V0.3 Vietnamese phrasing — “trải nghiệm toàn diện” and “khẳng định bản thân” integrated into English Vision and Mission statements.
Brand Differentiation (Ch B, NEW): Two differentiation cards — COCKSTOCK vs. piercing competitors (spa-clinic-premium) and vs. jewelry competitors (ear styling expert). From V0.3 positioning analysis.
Experience Criteria (Ch B, NEW): Communication priority hierarchy (Clear message → Core function → Emotional connection → Reduce noise) and 4 visual principles (Tối giản, Rõ trọng tâm, Bắt xu hướng, Clinic + Sensible).
Logo section upgraded (Ch D): Status PENDING → V2.1. Added Clear Space rules (d = ½ height of “T”), Minimum Size (74px digital / 2cm print), Logo Color Combinations (5 approved pairings + 1 forbidden), and size-mood guidance.
Color Pairing Method (Ch D, NEW): Structural rule — Background group (1 color) + Content group (2 colors), with Light and Dark pairing modes.
Responsive diacritics (Ch D): Vietnamese specimen uses clamp() font sizes for mobile readability.
Rebel/Maverick fix (Ch B): Removed residual “Rebel/Maverick credibility” reference. Replaced with “12+ years defining the category.”
V0.3 archives removed: All 8 collapsible archive blocks consolidated into current content. V0.3 CSS, variables, and changelog entry removed.
Favicon: CS mark SVG added as site favicon and documented in Ch D Logo section.
Color philosophy: V0.3 color philosophy merged inline into Ch D Color System intro.
@thichxokhuyen: Instagram handle updated in Ch H with full description.
Navbar scroll fix: scroll-padding-top and scroll-margin-top to prevent content hiding behind fixed navbar.
Page title: Simplified to “COCKSTOCK Brand Guidelines”.

V2.1.5 — Image Fix & Context Transfer DEPLOYED

Build date: 2026-04-06 · Status: Live

Image path fix: Corrected 3 infographic image references from .jpg to .jpeg (material-comparison, aftercare-service, aftercare-supplies) — images now load correctly.
Project setup: Added .gitignore (node_modules/, .DS_Store, .wrangler/). CLAUDE.md comprehensively updated to capture full V2.1.4 implementation context, Icons folder inventory, multi-machine workflow, and all pending work items for continuity across devices.

V2.1.4 — Typography & Icons DEPLOYED

Build date: 2026-04-06 · Status: Deployed

Typography system (Ch D): Vietnamese diacritics character specimen with full vowel/tonal mark coverage. Content type hierarchy table mapping 8 typographic roles (Super→Micro) to typeface, specs, and use cases. Font pairing Do/Don’t section with live correct vs incorrect examples. Inspired by ClownZ brand book design patterns.
Chapter hero images: Responsive aspect ratios — 16:9 on desktop (>1024px), 4:5 vertical crop on tablet/mobile.
Icons system: Icons/ folder added with 38 SVG assets (5 product line logos, 28 operational icons, 5 decorative mini-icons). Decorative icons integrated into 6 Golden Standards, aftercare cleaning supplies, and content strategy info boxes.
Product line logos: Titanium F136, Stainless Steel 316L, and 925 Silver product line logo cards added to Ch D Logo section. Material tier badges updated to use Icons/ folder paths.
Content strategy: Two Visual Modes note added — editorial photography for social media vs rich infographics for customer education. Material comparison infographic content and aftercare supplies illustrations embedded in Ch K and Ch L.
Aftercare (Ch L): CS Aftercare service description expanded (Miễn Phí / Chuyên Môn Cao / Độc Quyền). 4 essential cleaning tool cards with icons added to 3-Step Protocol.

V2.1.3 — UI Polish DEPLOYED

Build date: 2026-04-06 · Status: Deployed

Mobile navigation: Expandable H1 menu with dropdown chevrons showing nested chapters. Hamburger → X close animation. Two-line hamburger for sidebar toggle. Thinner sub-bar (33px) with breadcrumb-matching font size. Sub-bar hidden on homepage.
Typography: ALL-CAPS Part names across topnav tabs, sidebar headers, H1 menu, and overview group titles. COCKSTOCK brand typography influence applied to UI elements. Consistent TOC numbering: H2=numbers, H3=lowercase letters.
Homepage: Separate card grid layout with thumbnails and descriptions on all viewports (Notion-style). Cards respond to grid on desktop, stack on mobile.
Sidebar: Full H2-H3 heading tree in slide-in sidebar (tablet/mobile). Unified cream background across topnav, sidebar, sub-bar, and H1 menu.
Fixes: Removed orange build band from Chapter A. Scroll progress bar attached to sub-bar bottom (or topnav when sub-bar hidden). Instant page navigation (no scroll animation artifact). Breadcrumbs fully clickable as links.

V2.1.2 — Supabase UI DEPLOYED

Build date: 2026-04-05 · Status: Deployed

UI redesign: Supabase docs-inspired three-column layout. Fixed left sidebar with 4 collapsible nav groups (Brand Foundation, Content Production, Operations, Meta). Right-side sticky “On this page” TOC with scroll-spy active heading highlight. Hidden below 1100px, falls back to in-chapter TOC on mobile.
Search: Cmd+K (⌘K) modal replacing sidebar search input. Arrow key navigation, Enter to jump, Escape to close. Searches across all h2, h3, p, td, data-value elements.
Navigation: Breadcrumb bar (Guidelines > Group > Chapter). Prev/Next chapter footer links. Card-based overview landing page with all 14 chapters organized by group.
Technical: CHAPTERS data array drives breadcrumbs, prev/next, and search labels. buildTOCs() preserved unchanged. Print styles updated to hide new UI elements.

V2.1.1 — Optimizing DEPLOYED

Build date: 2026-04-05 · Status: Deployed

Archetype rebalance: Creator-Lover (primary) + Explorer-Caregiver (secondary). All rebel/maverick framing permanently removed. Aligned to Mejuri, Astrid & Miyu, Rowan.
Positioning update: Ear piercing = 80%+ revenue acknowledged. Sensitivity-first (“baby wet wipe”) strategy. Q2/2026 concept: sensitivity, self-love, well-being.
Founder identity: Removed from guidelines (name, birth year). Industry field corrected to “Fashion-beauty piercing & ear curation.”
Origin story: Compacted — 5m² on Kim Ma Street, no sentimental framing.
New chapters added: E Editorial Production (art direction deck template, Q2/2026 example, seasonal color system, 3-day shoot breakdown, KOL booking brief), F Short Video Production (POV: Thợ Xỏ 24-scene template, Zodiac typography specs, Slay Day template, Xỏ Cận template, production rules from 75-sheet Q1 tracker), G Product Photography (split from old Channels chapter).
Chapter restructure: A–M lettering system. H2 sections numbered 1/2/3, H3 subsections lettered a/b/c.
New images: 12 editorial concept photos (images/concept-photo/), 10 art direction deck pages (images/art-direction/), 6 brand ops images (consulting SOPs, kids piercing, 925 Silver, content calendar).
Hero image: Replaced with editorial fashion portrait (concept-photo/a3f6rkw-model_closeface_soft.jpg).
Aftercare archive: Full CS Aftercare manual content (VN+EN, 25pp each) embedded as collapsible archival reference. Physical manuals retired from operations.
Consulting SOPs: Tư Vấn Xỏ + Tư Vấn Khuyên 6-step flows with infographic images embedded in Operations chapter.
Competitive intelligence: Six-brand research (Mejuri, A&M, Rowan, Studs, Nébuleuse, Maria Tash) reframed as “playbooks to learn from” rather than competitors. Revenue-focus positioning replaces full-body-piercing push.
UX fixes: Logo responsive (75% sidebar width). Dark mode removed. Chapter TOC display fixed (was showing raw numbering). Column width consistency enforced (max-width on .chapter). H3 numbering changed from a/b/c to i/ii/iii (prevents uppercase CSS conflict). Typography specimen page added with live type demos. Pierce pillar (Xỏ Xinh) content expanded with photos, position breakdown, and equipment specs. Changelog chapter N added.

V2.1 — Foundation DEPLOYED

Build date: 2026-04-04 · Status: Live baseline

Initial V2 build from deep dive sessions. 10 chapters (01–11). Archetype: Rebel/Maverick + Lover/Aesthete (later revised in V2.1.1). Fraunces Soft + DM Sans typography locked. COCKSTOCK orange (#ec771b) + cream palette. 199 SEO article images embedded. Consulting SOPs, problem resolution protocols, cashier process embedded. Pricing tables, knowledge base position guides, aftercare tiers documented. Deployed to Cloudflare Pages via Wrangler.