{"id":18,"date":"2026-07-08T01:57:04","date_gmt":"2026-07-08T08:57:04","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=18"},"modified":"2026-07-08T01:57:04","modified_gmt":"2026-07-08T08:57:04","slug":"account","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=18","title":{"rendered":"Account \u00b7 \u6536\u85cf\u5bb6\u6863\u6848"},"content":{"rendered":"


\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-09 Account \u00b7 v1.0.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-09 My Account. v1.0.0. Atmospheric fixed BG + 80% glass panel (blur 40px) + Order History timeline + Collector Profile + Early Access toggle. Inherits P-01 v0.4.1.6 (Phase 3.5 chassis).\"><\/p>\n<p><!--\n ============================================================================\n P-09 My Account \u00b7 v1.0.0 \u00b7 PHASE 7 (functional closed-loop)\n ============================================================================\n Inherits from P-01 v0.4.1.6 (LOCKED + Phase 3.5 patch):\n - Helvetica Regular @font-face (5 formats, ACTIVE)\n - Global Sticky Header (Phase 3.5 chassis)\n - Impeccable \u5baa\u6cd5 : skiplink \/ focus-visible \/ reduced-motion\n - WCAG 2.1 AA : contrast \/ keyboard \/ aria\n - Lumina 14-line CSS - reused + HEAVIER blur (40px) for the\n massive glass panel\n New for P-09 (Account):\n [BG] Atmospheric fixed BG - full-screen cover, fixed, dark overlay\n [GP] Massive glass panel - 80% width, max 1200px, blur 40px\n [TL] Timeline - minimal Order History with vertical line + dots\n [TG] Apple toggle - CSS-only checkbox styled as pill switch\n [EA] Early Access Allocations - \"Subscribe\" toggle\n ============================================================================\n--><\/p>\n<p><!-- Tailwind Play CDN : self-contained skeleton render --><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'gallery': 'oklch(0.97 0.012 90)',\n 'ink': 'oklch(0.20 0.010 28)',\n 'ink-soft': 'oklch(0.55 0.008 28)',\n 'rule': 'oklch(0.88 0.005 28)',\n },\n fontFamily: {\n serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n sans: ['\"Helvetica Regular\"', '\"Inter\"', 'system-ui', 'sans-serif'],\n },\n maxWidth: { 'wide': '1320px', 'panel': '1200px' },\n }\n }\n }\n<\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-09 My Account v1.0.0\n ========================================================================== *\/<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (inherited, ACTIVE) ---------- *\/\n @font-face {\n font-family: \"Helvetica Regular\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot\");\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n }<\/p>\n<p> *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; min-height: 100vh; }\n body {\n background: #0a0a0a;\n color: #fff;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, -apple-system, sans-serif;\n font-size: 16px; line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n overflow-x: hidden;\n }<\/p>\n<p> \/* ---------- A11Y ---------- *\/\n .skiplink {\n position: fixed; top: -100px; left: 12px; z-index: 200;\n padding: 8px 24px; background: #000; color: #fff;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n border-radius: 2px; text-decoration: none; font-weight: 500;\n transition: top 240ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .skiplink:focus { top: 12px; }\n :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }<\/p>\n<p> @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }<\/p>\n<p> \/* ====================================================================\n 1. Global Sticky Header (Phase 3.5 chassis, reused)\n ==================================================================== *\/\n .global-header {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: background 320ms ease, backdrop-filter 320ms ease,\n border-color 320ms ease;\n }\n .global-header.is-scrolled-down {\n background: rgba(15, 15, 15, 0.5);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-bottom-color: rgba(255, 255, 255, 0.08);\n }\n .global-header.is-scrolled-up { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }\n .global-header__inner { max-width: 1320px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }\n .global-header__brand { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 500; color: #fff; text-decoration: none; letter-spacing: -0.005em; flex-shrink: 0; }\n .global-header__actions { display: flex; align-items: center; gap: 24px; }\n .global-header__lang { position: relative; }\n .global-header__lang-btn { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: none; padding: 6px 8px; color: #fff; cursor: pointer; font-family: \"Helvetica Regular\", \"Inter\", sans-serif; font-size: 12px; letter-spacing: 0.05em; border-radius: 4px; transition: background 200ms ease; }\n .global-header__lang-btn:hover { background: rgba(255, 255, 255, 0.08); }\n .global-header__lang-caret { width: 10px; height: 10px; fill: currentColor; }\n .global-header__lang-menu { position: absolute; top: calc(100% + 8px); right: 0; background: oklch(0.18 0.012 28 \/ 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 4px 0; min-width: 100px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; z-index: 110; }\n .global-header__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n .global-header__lang-menu button { display: block; width: 100%; padding: 8px 16px; background: transparent; border: none; color: rgba(255, 255, 255, 0.7); font-family: \"Helvetica Regular\", \"Inter\", sans-serif; font-size: 12px; letter-spacing: 0.05em; text-align: left; cursor: pointer; transition: background 200ms ease, color 200ms ease; }\n .global-header__lang-menu button:hover, .global-header__lang-menu button.is-active { background: rgba(255, 255, 255, 0.08); color: #fff; }\n .global-header__social { display: flex; align-items: center; gap: 12px; list-style: none; padding: 0; margin: 0; }\n .global-header__social a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #fff; opacity: 0.7; text-decoration: none; transition: opacity 200ms ease; }\n .global-header__social a:hover { opacity: 1; }\n .global-header__social svg { width: 16px; height: 16px; fill: currentColor; }\n .global-header__icons { display: flex; align-items: center; gap: 4px; }\n .global-header__icon-btn, .global-header__icon-link { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: none; color: #fff; opacity: 0.85; text-decoration: none; cursor: pointer; border-radius: 50%; transition: opacity 200ms ease, background 200ms ease; }\n .global-header__icon-btn:hover, .global-header__icon-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }\n .global-header__icon-btn svg, .global-header__icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }\n .global-header__cart-badge { position: absolute; top: 6px; right: 6px; min-width: 14px; height: 14px; padding: 0 3px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.28); font-family: \"Helvetica Regular\", \"Inter\", sans-serif; font-size: 9px; font-weight: 400; border-radius: 999px; line-height: 1; letter-spacing: 0; }<\/p>\n<p> \/* ====================================================================\n 2. [BG] Atmospheric fixed BG (full-screen, dark overlay)\n ==================================================================== *\/\n .atmospheric-bg {\n position: fixed; inset: 0;\n z-index: -2;\n background-image: url('https:\/\/picsum.photos\/seed\/account-atelier-bridge\/1920\/1080.jpg');\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n }\n .atmospheric-overlay {\n position: fixed; inset: 0;\n z-index: -1;\n background: linear-gradient(180deg,\n rgba(0, 0, 0, 0.55) 0%,\n rgba(0, 0, 0, 0.40) 50%,\n rgba(0, 0, 0, 0.65) 100%);\n pointer-events: none;\n }<\/p>\n<p> \/* ====================================================================\n 3. [GP] Massive glassmorphism panel (80% width, blur 40px)\n ==================================================================== *\/\n .account-main {\n position: relative;\n z-index: 1;\n padding: 120px 24px 96px;\n min-height: 100vh;\n }\n .account-panel {\n position: relative;\n max-width: 800px; \/* v0.4.1.1 patch : 1200 \u2192 800 (more focused, \"rest room\" feel) *\/\n width: 90%;\n margin: 0 auto;\n padding: 56px 48px 64px;\n background: rgba(255, 255, 255, 0.06);\n background-blend-mode: luminosity;\n backdrop-filter: blur(40px) saturate(140%);\n -webkit-backdrop-filter: blur(40px) saturate(140%);\n border: none; border-radius: 16px;\n box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),\n 0 24px 64px rgba(0, 0, 0, 0.45);\n color: #fff;\n overflow: hidden;\n }\n \/* Lumina-style gradient border *\/\n .account-panel::before {\n content: ''; position: absolute; inset: 0;\n border-radius: inherit; padding: 1.4px;\n background: linear-gradient(180deg,\n rgba(255,255,255,0.50) 0%,\n rgba(255,255,255,0.18) 20%,\n rgba(255,255,255,0) 40%,\n rgba(255,255,255,0) 60%,\n rgba(255,255,255,0.18) 80%,\n rgba(255,255,255,0.50) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude;\n pointer-events: none;\n }\n .account-panel__inner { position: relative; z-index: 1; }<\/p>\n<p> @media (max-width: 768px) {\n .account-panel { width: 92%; padding: 40px 24px 48px; }\n }<\/p>\n<p> .account-eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n margin: 0 0 12px;\n }\n .account-title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2rem, 3.5vw, 2.75rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 8px;\n color: #fff;\n letter-spacing: -0.015em;\n }\n .account-sub {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-style: italic;\n font-size: 17px; color: rgba(255, 255, 255, 0.7);\n margin: 0 0 64px;\n }<\/p>\n<p> \/* Two-module grid *\/\n .account-modules {\n display: grid;\n grid-template-columns: 1.6fr 1fr;\n gap: 80px 64px;\n }\n @media (max-width: 900px) {\n .account-modules { grid-template-columns: 1fr; gap: 64px; }\n }<\/p>\n<p> .module-eyebrow {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n margin: 0 0 8px;\n }\n .module-title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 28px; font-weight: 500;\n margin: 0 0 32px;\n color: #fff;\n letter-spacing: -0.01em;\n }<\/p>\n<p> \/* ====================================================================\n 4. [TL] Timeline (Order History)\n ==================================================================== *\/\n .timeline {\n list-style: none; padding: 0; margin: 0;\n position: relative;\n }\n .timeline::before {\n content: '';\n position: absolute;\n left: 7px;\n top: 8px; bottom: 8px;\n width: 1px;\n background: rgba(255, 255, 255, 0.15);\n }\n .timeline__item {\n position: relative;\n padding-left: 32px;\n padding-bottom: 32px;\n }\n .timeline__item:last-child { padding-bottom: 0; }\n .timeline__dot {\n position: absolute;\n left: 0; top: 6px;\n width: 14px; height: 14px;\n border-radius: 50%;\n background: oklch(0.42 0.165 27); \/* \u9701\u7ea2 *\/\n box-shadow: 0 0 0 4px rgba(168, 50, 63, 0.15);\n }\n .timeline__date {\n display: block;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.55);\n margin: 0 0 4px;\n }\n .timeline__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 18px; font-weight: 500;\n line-height: 1.3;\n margin: 0 0 4px;\n color: #fff;\n letter-spacing: -0.005em;\n }\n .timeline__meta {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; color: rgba(255, 255, 255, 0.55);\n margin: 0 0 6px;\n letter-spacing: 0.02em;\n }\n .timeline__foot {\n display: flex; align-items: center; gap: 12px;\n margin-top: 4px;\n }\n .timeline__price {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; font-weight: 500;\n color: #fff;\n }\n .timeline__status {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.7);\n padding: 2px 8px;\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 999px;\n }<\/p>\n<p> \/* ====================================================================\n 5. [TG] Apple-style toggle + [EA] Early Access Allocations\n ==================================================================== *\/\n .profile__email-block {\n margin: 0 0 32px;\n }\n .profile__label {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.55);\n margin: 0 0 8px;\n }\n .profile__email {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 16px; font-weight: 500;\n color: #fff;\n margin: 0;\n letter-spacing: -0.005em;\n word-break: break-all;\n }<\/p>\n<p> .profile__divider {\n height: 1px;\n background: rgba(255, 255, 255, 0.12);\n border: none; margin: 32px 0;\n }<\/p>\n<p> \/* Apple-style toggle (CSS-only checkbox) *\/\n .toggle-row {\n display: flex; align-items: center; gap: 16px;\n }\n .toggle {\n position: relative;\n display: inline-block;\n flex-shrink: 0;\n width: 48px; height: 28px;\n }\n .toggle__input {\n position: absolute;\n opacity: 0; width: 0; height: 0;\n }\n .toggle__slider {\n position: absolute; inset: 0;\n background: rgba(255, 255, 255, 0.18);\n border-radius: 999px;\n cursor: pointer;\n transition: background 200ms ease;\n }\n .toggle__slider::before {\n content: '';\n position: absolute;\n width: 22px; height: 22px;\n left: 3px; top: 3px;\n background: #fff;\n border-radius: 50%;\n transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .toggle__input:checked + .toggle__slider {\n background: #003399; \/* cobalt on *\/\n }\n .toggle__input:checked + .toggle__slider::before {\n transform: translateX(20px);\n }\n .toggle__input:focus-visible + .toggle__slider {\n outline: 2px solid rgba(255, 255, 255, 0.8);\n outline-offset: 3px;\n }\n .toggle__label {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; font-weight: 500;\n color: #fff;\n line-height: 1.4;\n cursor: pointer;\n }\n .toggle__label-sub {\n display: block;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; font-weight: 400;\n color: rgba(255, 255, 255, 0.55);\n margin-top: 4px;\n letter-spacing: 0.02em;\n }<\/p>\n<p> .profile__signout {\n display: inline-block;\n margin-top: 32px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.55);\n text-decoration: none;\n border-bottom: 1px solid rgba(255, 255, 255, 0.25);\n padding-bottom: 2px;\n transition: color 200ms ease, border-color 200ms ease;\n }\n .profile__signout:hover { color: #fff; border-bottom-color: #fff; }<\/p>\n<p> \/* ====================================================================\n 6. Edit Profile (v0.4.1 patch : collector's archive quality)\n - Avatar + name + address\n - \"Submit for review\" pattern (NO direct save) - editorial review\n - Submits to \/api\/account\/profile\/review for admin approval\n ==================================================================== *\/\n .profile-edit-section {\n margin-top: 64px;\n padding-top: 48px;\n border-top: 1px solid rgba(255, 255, 255, 0.12);\n }\n .profile-edit-grid {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 48px;\n align-items: start;\n }\n @media (max-width: 720px) {\n .profile-edit-grid { grid-template-columns: 1fr; gap: 32px; }\n }\n .profile-avatar {\n width: 112px; height: 112px;\n border-radius: 50%;\n overflow: hidden;\n background: rgba(255, 255, 255, 0.08);\n border: 2px solid rgba(255, 255, 255, 0.2);\n flex-shrink: 0;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n }\n .profile-avatar img {\n width: 100%; height: 100%;\n object-fit: cover; display: block;\n }\n .profile-avatar-info { margin-top: 16px; max-width: 200px; }\n .profile-avatar-name {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n margin: 0 0 4px; color: #fff;\n letter-spacing: -0.005em;\n }\n .profile-avatar-loc {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.05em;\n color: rgba(255, 255, 255, 0.6);\n margin: 0 0 12px;\n }\n .profile-avatar-change {\n display: inline-block;\n padding: 6px 12px;\n background: transparent;\n color: rgba(255, 255, 255, 0.7);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;\n cursor: pointer;\n transition: background 200ms ease, border-color 200ms ease;\n }\n .profile-avatar-change:hover {\n background: rgba(255, 255, 255, 0.08);\n border-color: rgba(255, 255, 255, 0.5);\n }\n .profile-pending {\n display: none; align-items: center; gap: 12px;\n padding: 14px 20px;\n background: rgba(255, 200, 0, 0.08);\n border: 1px solid rgba(255, 200, 0, 0.3);\n border-radius: 6px;\n margin-bottom: 20px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; color: rgba(255, 200, 0, 0.95);\n letter-spacing: 0.02em;\n }\n .profile-pending.is-open { display: flex; }\n .profile-pending__dot {\n width: 8px; height: 8px;\n background: rgba(255, 200, 0, 0.95);\n border-radius: 50%;\n }\n .profile-form { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }\n .profile-form__field { display: flex; flex-direction: column; gap: 6px; }\n .profile-form__label {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n }\n .profile-form__input,\n .profile-form__textarea {\n display: block; width: 100%;\n padding: 12px 14px;\n background: rgba(255, 255, 255, 0.08);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 4px;\n color: #fff;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px;\n transition: border-color 200ms ease, background 200ms ease;\n }\n .profile-form__input:focus,\n .profile-form__textarea:focus {\n outline: none;\n border-color: #003399;\n background: rgba(255, 255, 255, 0.12);\n }\n .profile-form__input::placeholder,\n .profile-form__textarea::placeholder { color: rgba(255, 255, 255, 0.35); }\n .profile-form__textarea { resize: vertical; min-height: 88px; line-height: 1.6; }\n .profile-form__file { padding: 10px 12px; cursor: pointer; }\n .profile-form__file::file-selector-button {\n margin-right: 12px;\n padding: 6px 12px;\n background: transparent;\n color: rgba(255, 255, 255, 0.85);\n border: 1px solid rgba(255, 255, 255, 0.3);\n border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;\n cursor: pointer;\n }\n .profile-submit {\n margin-top: 8px;\n align-self: flex-start;\n padding: 14px 32px;\n background: #003399;\n color: #fff;\n border: none; border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; font-weight: 500;\n letter-spacing: 0.18em; text-transform: uppercase;\n cursor: pointer;\n transition: background 200ms ease;\n }\n .profile-submit:hover { background: #002277; }\n .profile-submit:disabled {\n background: rgba(255, 255, 255, 0.15);\n color: rgba(255, 255, 255, 0.55);\n cursor: not-allowed;\n }\n .profile-submit-note {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; color: rgba(255, 255, 255, 0.5);\n margin: 8px 0 0;\n letter-spacing: 0.02em;\n line-height: 1.5;\n }<\/p>\n<p> \/* Minimal checkout-style footer (compact, matches p07) *\/\n .account-footer {\n position: relative;\n z-index: 1;\n padding: 32px 24px;\n text-align: center;\n background: rgba(0, 0, 0, 0.4);\n }\n .account-footer p {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.05em;\n color: rgba(255, 255, 255, 0.5);\n margin: 0;\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><!-- A11Y skiplink --><br \/>\n<a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><!-- 1. Global Sticky Header (Phase 3.5 chassis) --><\/p>\n<header class=\"global-header\" data-state=\"top\" id=\"global-header\">\n<div class=\"global-header__inner\">\n <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\n<div class=\"global-header__lang\">\n <button class=\"global-header__lang-btn\" id=\"lang-btn\" type=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"lang-menu\"><br \/>\n <span data-current-lang>EN<\/span><br \/>\n <svg class=\"global-header__lang-caret\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<ul class=\"global-header__lang-menu\" id=\"lang-menu\" role=\"menu\" aria-label=\"Language\">\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"en\" class=\"is-active\">EN<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"zh\">\u4e2d\u6587<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"fr\">FR<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button><\/li>\n<\/ul><\/div>\n<ul class=\"global-header__social\" aria-label=\"Social\">\n<li><a href=\"#\" aria-label=\"Instagram\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"8\" cy=\"8\" r=\"2.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"11.6\" cy=\"4.4\" r=\"0.7\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"WeChat\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"6\" cy=\"7\" rx=\"5\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <ellipse cx=\"11\" cy=\"10\" rx=\"3.5\" ry=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"4.7\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"7.3\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"10.4\" cy=\"9.5\" r=\"0.35\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"Weibo\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"8\" cy=\"8.5\" rx=\"6\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"6\" cy=\"9\" r=\"0.4\" fill=\"currentColor\"\/>\n <circle cx=\"9\" cy=\"8\" r=\"0.4\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<\/ul>\n<div class=\"global-header__icons\">\n <button class=\"global-header__icon-btn\" id=\"search-btn\" type=\"button\" aria-label=\"Search\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M12 12l4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <a href=\"p05-auth.html\" class=\"global-header__icon-link\" aria-label=\"Account\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"6.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M3 16c0-3 3-5 6-5s6 2 6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/a><br \/>\n <button class=\"global-header__icon-btn global-header__cart\" id=\"cart-btn\" type=\"button\" aria-label=\"Cart\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M3 5h2l1.5 8h7l1.5-6H6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <circle cx=\"7.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <circle cx=\"12.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <\/svg><\/p>\n<p> <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><!-- 2. [BG] Atmospheric BG (full-screen, fixed) + dark overlay --><\/p>\n<div class=\"atmospheric-bg\" aria-hidden=\"true\"><\/div>\n<div class=\"atmospheric-overlay\" aria-hidden=\"true\"><\/div>\n<p><main id=\"main\" class=\"account-main\"><\/p>\n<p> <!-- 3. [GP] Massive glassmorphism panel (80% width, blur 40px) --><\/p>\n<section class=\"account-panel\" aria-label=\"My account dashboard\">\n<div class=\"account-panel__inner\">\n<p class=\"account-eyebrow\">\u6b22\u8fce\u56de\u6765,\u85cf\u5bb6 \/ Welcome back, collector<\/p>\n<h1 class=\"account-title\">Lorem Ipsum<\/h1>\n<p class=\"account-sub\">\u6162\u4ef6\u8d26\u672c \/ A small account of slow acquisitions<\/p>\n<div class=\"account-modules\">\n<p> <!-- ============================================================\n [TL] LEFT : Order History (Timeline)\n ============================================================ --><\/p>\n<section aria-label=\"Order history\">\n<p class=\"module-eyebrow\">\u85cf\u54c1\u5c65\u5386 \/ Order History<\/p>\n<h2 class=\"module-title\">\u85cf\u54c1 \/ Acquisitions<\/h2>\n<ol class=\"timeline\">\n<li class=\"timeline__item\">\n <span class=\"timeline__dot\"><\/span><br \/>\n <time class=\"timeline__date\" datetime=\"2026-06-15\">15 Jun 2026<\/time><\/p>\n<h3 class=\"timeline__title\">Sky-blue Mei vase<\/h3>\n<p class=\"timeline__meta\">Lot 014 · Size M · Moon-white glaze<\/p>\n<div class=\"timeline__foot\">\n <span class=\"timeline__price\">$1,200<\/span><br \/>\n <span class=\"timeline__status\">Delivered<\/span>\n <\/div>\n<\/li>\n<li class=\"timeline__item\">\n <span class=\"timeline__dot\"><\/span><br \/>\n <time class=\"timeline__date\" datetime=\"2026-04-22\">22 Apr 2026<\/time><\/p>\n<h3 class=\"timeline__title\">Tenmoku tea bowl<\/h3>\n<p class=\"timeline__meta\">Lot 021 · Jianyang kiln<\/p>\n<div class=\"timeline__foot\">\n <span class=\"timeline__price\">$2,400<\/span><br \/>\n <span class=\"timeline__status\">Delivered<\/span>\n <\/div>\n<\/li>\n<li class=\"timeline__item\">\n <span class=\"timeline__dot\"><\/span><br \/>\n <time class=\"timeline__date\" datetime=\"2026-02-10\">10 Feb 2026<\/time><\/p>\n<h3 class=\"timeline__title\">Hand-thrown celadon cup, pair<\/h3>\n<p class=\"timeline__meta\">Lot 008 · Longquan celadon<\/p>\n<div class=\"timeline__foot\">\n <span class=\"timeline__price\">$680<\/span><br \/>\n <span class=\"timeline__status\">Delivered<\/span>\n <\/div>\n<\/li>\n<\/ol>\n<\/section>\n<p> <!-- ============================================================\n [TG][EA] RIGHT : Collector Profile + Apple toggle\n ============================================================ --><\/p>\n<section aria-label=\"Collector profile\">\n<p class=\"module-eyebrow\">\u85cf\u5bb6\u6863\u6848 \/ Collector Profile<\/p>\n<h2 class=\"module-title\">\u85cf\u5bb6\u8d44\u6599 \/ Your details<\/h2>\n<div class=\"profile__email-block\">\n<p class=\"profile__label\">\u90ae\u7bb1 \/ Email<\/p>\n<p class=\"profile__email\">lorem.collector@example.com<\/p>\n<\/p><\/div>\n<hr class=\"profile__divider\" \/>\n<div class=\"toggle-row\">\n <label class=\"toggle\" aria-label=\"Subscribe to Early Access Allocations\"><br \/>\n <input class=\"toggle__input\" type=\"checkbox\" id=\"toggle-early-access\" checked><br \/>\n <span class=\"toggle__slider\" aria-hidden=\"true\"><\/span><br \/>\n <\/label><br \/>\n <label class=\"toggle__label\" for=\"toggle-early-access\"><br \/>\n Subscribe to Early Access Allocations<br \/>\n <span class=\"toggle__label-sub\">Receive invitations before public release<\/span><br \/>\n <\/label>\n <\/div>\n<p> <a href=\"#\" class=\"profile__signout\">\u767b\u51fa \/ Sign out<\/a><br \/>\n <\/section>\n<\/p><\/div>\n<p> <!-- ============================================================\n [Edit Profile] - v0.4.1 patch\n \u9762\u677f\u4e0b\u65b9\u65b0\u589e\u7684\"\u85cf\u5bb6\u6863\u6848\u5e93\"\u6a21\u5757\n ============================================================ --><\/p>\n<section class=\"profile-edit-section\" aria-label=\"Edit profile (submit for review)\">\n<p class=\"module-eyebrow\">\u7f16\u8f91\u6863\u6848 \/ Edit Profile<\/p>\n<h2 class=\"module-title\">\u4e2a\u4eba\u8d44\u6599 \/ Personal information<\/h2>\n<div class=\"profile-edit-grid\">\n<p> <!-- Left : avatar + meta --><\/p>\n<div>\n<div class=\"profile-avatar\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/seed\/avatar-collector\/200\/200.jpg\" alt=\"Lorem ipsum avatar\">\n <\/div>\n<div class=\"profile-avatar-info\">\n<p class=\"profile-avatar-name\">Lorem Ipsum<\/p>\n<p class=\"profile-avatar-loc\">Hong Kong · Collector since 2024<\/p>\n<p> <button class=\"profile-avatar-change\" type=\"button\">Change photo<\/button>\n <\/div>\n<\/p><\/div>\n<p> <!-- Right : form (with \"submit for review\" pattern) --><\/p>\n<div>\n<div class=\"profile-pending\" id=\"profile-pending\" role=\"status\" aria-live=\"polite\">\n <span class=\"profile-pending__dot\"><\/span><br \/>\n <span>Submitted for review on <span id=\"profile-pending-date\">06 Jul 2026<\/span> · Awaiting editorial approval<\/span>\n <\/div>\n<form class=\"profile-form\" id=\"profile-form\" novalidate>\n<div class=\"profile-form__field\">\n <label class=\"profile-form__label\" for=\"profile-name\">Display name<\/label><br \/>\n <input class=\"profile-form__input\" type=\"text\" id=\"profile-name\" name=\"name\"\n value=\"Lorem Ipsum\" autocomplete=\"name\">\n <\/div>\n<div class=\"profile-form__field\">\n <label class=\"profile-form__label\" for=\"profile-address\">Shipping address<\/label><br \/>\n <textarea class=\"profile-form__textarea\" id=\"profile-address\" name=\"address\"\n rows=\"3\" autocomplete=\"street-address\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor.<\/textarea>\n <\/div>\n<div class=\"profile-form__field\">\n <label class=\"profile-form__label\" for=\"profile-avatar-file\">Profile photo<\/label><br \/>\n <input class=\"profile-form__input profile-form__file\" type=\"file\" id=\"profile-avatar-file\" name=\"avatar\" accept=\"image\/*\">\n <\/div>\n<p> <button class=\"profile-submit\" type=\"submit\" id=\"profile-submit\">\u63d0\u4ea4\u5ba1\u9605 \/ Submit for review<\/button><\/p>\n<p class=\"profile-submit-note\">All changes are queued for editorial review before publishing. Direct save is not available — this protects the integrity of your collector profile.<\/p>\n<\/p><\/form>\n<\/p><\/div>\n<\/p><\/div>\n<\/section><\/div>\n<\/section>\n<p><\/main><\/p>\n<p><!-- Minimal account footer --><\/p>\n<footer class=\"account-footer\">\n<p>© 2026 LLCCRAFT · Lorem ipsum · Privacy · Terms · Contact<\/p>\n<\/footer>\n<p><script>\n \/* ==========================================================================\n P-09 Account JS v1.0.0\n ==========================================================================\n Modules:\n 1. Global Sticky Header (Phase 3.5)\n 2. Lang dropdown\n 3. Toggle state (CSS-only -- no JS needed, but we sync the\n visual state on focus \/ change for any external\n integrations that might toggle programmatically)\n ========================================================================== *\/<\/p>\n<p> (function () {\n \/* 1. Global Sticky Header (Phase 3.5 chassis) *\/\n const header = document.getElementById('global-header');\n if (header) {\n let lastY = 0;\n const onScroll = () => {\n const y = window.scrollY;\n const dir = y > lastY ? 'down' : 'up';\n lastY = y;\n if (y < 80) {\n header.dataset.state = 'top';\n header.classList.remove('is-scrolled-down', 'is-scrolled-up');\n } else {\n header.dataset.state = dir;\n header.classList.toggle('is-scrolled-down', dir === 'down');\n header.classList.toggle('is-scrolled-up', dir === 'up');\n }\n };\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n }\n\n \/* 2. Lang dropdown *\/\n const langBtn = document.getElementById('lang-btn');\n const langMenu = document.getElementById('lang-menu');\n if (langBtn && langMenu) {\n const toggle = (open) => {\n const isOpen = open ?? !langMenu.classList.contains('is-open');\n langMenu.classList.toggle('is-open', isOpen);\n langBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n };\n langBtn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });\n langMenu.addEventListener('click', (e) => {\n const item = e.target.closest('[data-lang]');\n if (item) {\n langMenu.querySelectorAll('button').forEach((b) => b.classList.remove('is-active'));\n item.classList.add('is-active');\n const cur = langBtn.querySelector('[data-current-lang]');\n if (cur) cur.textContent = item.textContent;\n toggle(false);\n }\n });\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.global-header__lang')) toggle(false);\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && langMenu.classList.contains('is-open')) {\n toggle(false);\n langBtn.focus();\n }\n });\n }<\/p>\n<p> \/* 3. Toggle : CSS-only visual state, no JS needed\n (kept here as an integration hook for future programmatic toggle) *\/\n const toggleInput = document.getElementById('toggle-early-access');\n if (toggleInput) {\n toggleInput.addEventListener('change', () => {\n \/* skeleton : would POST to \/api\/account\/preferences *\/\n \/\/ console.log('Early Access Allocations =', toggleInput.checked);\n });\n }<\/p>\n<p> \/* 4. Edit Profile - \"Submit for review\" pattern (v0.4.1 patch)\n NOT a direct save. Queues for editorial review. *\/\n const profileForm = document.getElementById('profile-form');\n const profilePending = document.getElementById('profile-pending');\n const profileSubmit = document.getElementById('profile-submit');\n const profileDate = document.getElementById('profile-pending-date');\n if (profileForm && profileSubmit) {\n profileForm.addEventListener('submit', (e) => {\n e.preventDefault();\n const data = {\n name: profileForm.name ? profileForm.name.value : '',\n address: profileForm.address ? profileForm.address.value : '',\n avatar: profileForm.avatar && profileForm.avatar.files[0]\n ? profileForm.avatar.files[0].name : '',\n };\n \/* skeleton : would POST to \/api\/account\/profile\/review\n then wait for admin approval before showing \"Approved\" \/ \"Rejected\" state. *\/\n const now = new Date();\n const dateStr = now.toLocaleDateString('en-GB', {\n day: '2-digit', month: 'short', year: 'numeric'\n });\n if (profileDate) profileDate.textContent = dateStr;\n if (profilePending) profilePending.classList.add('is-open');\n profileSubmit.disabled = true;\n profileSubmit.textContent = 'Submitted \u00b7 Pending review';\n console.log('Profile queued for review:', data);\n });\n }<\/p>\n<p> \/* 5. Change photo button - triggers hidden file input *\/\n const changePhotoBtn = document.querySelector('.profile-avatar-change');\n const avatarFileInput = document.getElementById('profile-avatar-file');\n if (changePhotoBtn && avatarFileInput) {\n changePhotoBtn.addEventListener('click', () => avatarFileInput.click());\n }\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-09 Account \u00b7 v1.0.0 Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e \u6b22\u8fce\u56de\u6765,\u85cf\u5bb6 \/ Welcome back, collector Lorem Ipsum \u6162\u4ef6\u8d26\u672c \/ A small account of slow acquisitions \u85cf\u54c1\u5c65\u5386 \/ Order History \u85cf\u54c1 \/ Acquisitions 15 Jun 2026 Sky-blue Mei vase Lot 014 · Size M · Moon-white glaze $1,200 Delivered 22 […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}