{"id":15,"date":"2026-07-08T01:57:00","date_gmt":"2026-07-08T08:57:00","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=15"},"modified":"2026-07-08T01:57:00","modified_gmt":"2026-07-08T08:57:00","slug":"auth","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=15","title":{"rendered":"Auth \u00b7 \u793c\u5bbe\u63a5\u6d3d"},"content":{"rendered":"


\n
\n
\n
\n
\nLLCCRAFT \u00b7 Sign In \u00b7 v1.0.0<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-05 Auth page. v1.0.0. Glassmorphism card. Reuses Lumina 14-line glass parameters. Inherits P-01 v0.4.1.6 constitution (Phase 3.5 chassis).\"><\/p>\n<p><!--\n ============================================================================\n P-05 Auth \u00b7 v1.0.0 \u00b7 PHASE 3.5 (parallel to chassis refactor)\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 (consistent across P-01\/02\/03)\n - Impeccable \u5baa\u6cd5 : skiplink \/ focus-visible \/ reduced-motion\n - WCAG 2.1 AA : contrast \/ keyboard \/ aria\n - Lumina 14-line glass parameters - reused + HEAVIER blur (20px)\n New for P-05:\n [BG] Background image - full-screen placeholder, easy to swap\n [GL] Glassmorphism card - centered, blur 20px + saturate 140%\n [GG] Continue with Google - prominent CTA (white pill, full-color icon)\n [EM] Email + Password + Sign in - minimal form, glassy inputs\n [JN] Join Now \/ Apply to become a collector - \u6781\u7b80\u8df3\u8f6c\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' },\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@500;600&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ==========================================================================\n P-05 Auth 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; }\n body {\n background: #000;\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 min-height: 100vh;\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> \/* ---------- [BG] Full-screen background image (easy to swap) ----------\n TO REPLACE : change the URL in the --auth-bg-image CSS custom property\n (or swap the picsum URL below). All visual layers key off this var. *\/\n :root {\n --auth-bg-image: url('https:\/\/picsum.photos\/1920\/1080?random=88');\n }\n .auth-bg {\n position: fixed; inset: 0; z-index: 0;\n background-image: var(--auth-bg-image);\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n .auth-bg::after {\n content: ''; position: absolute; inset: 0;\n background: linear-gradient(180deg,\n rgba(0,0,0,0.35) 0%,\n rgba(0,0,0,0.20) 50%,\n rgba(0,0,0,0.55) 100%);\n }<\/p>\n<p> \/* ---------- Back to home (top-left) ---------- *\/\n .auth-back {\n position: fixed; top: 24px; left: 24px; z-index: 10;\n display: inline-flex; align-items: center; gap: 8px;\n padding: 8px 14px;\n background: transparent;\n color: #fff; text-decoration: none;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;\n opacity: 0.7;\n transition: opacity 200ms ease, background 200ms ease;\n border-radius: 999px;\n }\n .auth-back:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }<\/p>\n<p> \/* ---------- Page layout : centered ---------- *\/\n .auth-page {\n position: relative; z-index: 1;\n min-height: 100vh;\n display: flex; align-items: center; justify-content: center;\n padding: 96px 24px;\n }<\/p>\n<p> \/* ---------- [GL] Glassmorphism card - reuses Lumina params + heavier blur ---------- *\/\n .auth-card {\n position: relative;\n width: 100%;\n max-width: 440px;\n padding: 48px 40px;\n \/* Lumina 14-line CSS reuse (verbatim structure, heavier blur for auth) *\/\n background: rgba(255, 255, 255, 0.06);\n background-blend-mode: luminosity;\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border: none;\n border-radius: 12px;\n box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),\n 0 16px 48px rgba(0, 0, 0, 0.35);\n color: #fff;\n overflow: hidden;\n }\n \/* Lumina gradient-border mask (verbatim structure, lighter gradient) *\/\n .auth-card::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 .auth-card__inner { position: relative; z-index: 1; }<\/p>\n<p> .auth-card__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 32px; font-weight: 500;\n margin: 0 0 8px; line-height: 1.1;\n text-align: center; color: #fff;\n letter-spacing: -0.01em;\n }\n .auth-card__subtitle {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 13px; color: rgba(255, 255, 255, 0.7);\n margin: 0 0 32px; text-align: center;\n letter-spacing: 0.02em;\n }<\/p>\n<p> \/* ---------- [GG] Continue with Google (prominent CTA) ---------- *\/\n .auth-google {\n display: flex; align-items: center; justify-content: center;\n gap: 12px;\n width: 100%;\n padding: 14px 20px;\n background: #fff;\n color: oklch(0.20 0.010 28);\n border: none; border-radius: 999px;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px; font-weight: 500;\n letter-spacing: 0.02em;\n cursor: pointer;\n transition: background 200ms ease, transform 100ms ease;\n margin-bottom: 24px;\n }\n .auth-google:hover { background: rgba(255, 255, 255, 0.92); }\n .auth-google:active { transform: scale(0.99); }\n .auth-google__icon { width: 18px; height: 18px; flex-shrink: 0; }<\/p>\n<p> \/* ---------- Divider (or) ---------- *\/\n .auth-divider {\n display: flex; align-items: center; gap: 12px;\n margin: 0 0 24px;\n color: rgba(255, 255, 255, 0.5);\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;\n }\n .auth-divider::before, .auth-divider::after {\n content: ''; flex: 1; height: 1px;\n background: rgba(255, 255, 255, 0.15);\n }<\/p>\n<p> \/* ---------- Form fields ---------- *\/\n .auth-field { margin-bottom: 16px; }\n .auth-field__label {\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.75);\n margin-bottom: 8px; font-weight: 500;\n }\n .auth-field__input {\n display: block; width: 100%;\n padding: 12px 16px;\n background: rgba(255, 255, 255, 0.08);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-radius: 8px;\n color: #fff;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 14px;\n transition: background 200ms ease, border-color 200ms ease;\n }\n .auth-field__input::placeholder { color: rgba(255, 255, 255, 0.4); }\n .auth-field__input:focus {\n outline: none;\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.45);\n }<\/p>\n<p> \/* ---------- Sign in submit ---------- *\/\n .auth-submit {\n display: block; width: 100%;\n padding: 14px 20px;\n background: oklch(0.42 0.165 27);\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 margin-top: 8px;\n }\n .auth-submit:hover { background: oklch(0.50 0.18 27); }<\/p>\n<p> \/* ---------- [JN] Join Now \/ Apply to become a collector ---------- *\/\n .auth-join {\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n text-align: center;\n }\n .auth-join__text {\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 12px; color: rgba(255, 255, 255, 0.6);\n margin: 0 0 12px; letter-spacing: 0.02em;\n }\n .auth-join__link {\n display: inline-block;\n font-family: \"Helvetica Regular\", \"Inter\", sans-serif;\n font-size: 11px; font-weight: 500;\n letter-spacing: 0.18em; text-transform: uppercase;\n color: #fff;\n text-decoration: none;\n border-bottom: 1px solid rgba(255, 255, 255, 0.4);\n padding-bottom: 2px;\n transition: border-color 200ms ease, color 200ms ease;\n }\n .auth-join__link:hover {\n color: oklch(0.72 0.025 85);\n border-color: oklch(0.72 0.025 85);\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><!-- [BG] Full-screen placeholder background (CSS var for easy swap) --><\/p>\n<div class=\"auth-bg\" aria-hidden=\"true\"><\/div>\n<p><!-- Back to LLCCRAFT home --><br \/>\n<a href=\"p01-home.html\" class=\"auth-back\" aria-label=\"Back to LLCCRAFT home\">← LLCCRAFT<\/a><\/p>\n<p><main id=\"main\" class=\"auth-page\"><\/p>\n<p> <!-- [GL] Centered Glassmorphism card (Lumina params + heavier blur) --><\/p>\n<section class=\"auth-card\" aria-label=\"Sign in to LLCCRAFT\">\n<div class=\"auth-card__inner\">\n<h1 class=\"auth-card__title\">\u767b\u5165 \/ Sign in<\/h1>\n<p class=\"auth-card__subtitle\">Continue your acquisition journey<\/p>\n<p> <!-- [GG] Continue with Google - PROMINENT primary CTA --><br \/>\n <button class=\"auth-google\" type=\"button\" id=\"auth-google-btn\"><br \/>\n <svg class=\"auth-google__icon\" viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path fill=\"#4285F4\" d=\"M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z\"\/>\n <path fill=\"#34A853\" d=\"M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.02-3.7H.96v2.32A9 9 0 0 0 9 18z\"\/>\n <path fill=\"#FBBC05\" d=\"M3.98 10.72A5.41 5.41 0 0 1 3.68 9c0-.6.1-1.18.3-1.72V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l3.02-2.32z\"\/>\n <path fill=\"#EA4335\" d=\"M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .96 4.96L3.98 7.28C4.68 5.16 6.66 3.58 9 3.58z\"\/>\n <\/svg><br \/>\n Continue with Google<br \/>\n <\/button><\/p>\n<div class=\"auth-divider\" aria-hidden=\"true\">or<\/div>\n<form id=\"auth-form\" novalidate>\n<div class=\"auth-field\">\n <label class=\"auth-field__label\" for=\"auth-email\">Email<\/label><br \/>\n <input class=\"auth-field__input\" type=\"email\" id=\"auth-email\" name=\"email\"\n placeholder=\"you@example.com\" autocomplete=\"email\" required>\n <\/div>\n<div class=\"auth-field\">\n <label class=\"auth-field__label\" for=\"auth-password\">Password<\/label><br \/>\n <input class=\"auth-field__input\" type=\"password\" id=\"auth-password\" name=\"password\"\n placeholder=\"••••••••\" autocomplete=\"current-password\" required>\n <\/div>\n<p> <button class=\"auth-submit\" type=\"submit\">\u767b\u5165 \/ Sign in<\/button><br \/>\n <\/form>\n<p> <!-- [JN] Join Now \/ Apply to become a collector (\u6781\u7b80\u8df3\u8f6c) --><\/p>\n<div class=\"auth-join\">\n<p class=\"auth-join__text\">Not a collector yet?<\/p>\n<p> <a href=\"#\" class=\"auth-join__link\">\u7533\u8bf7\u52a0\u5165 \/ Join Now >Join Now · Apply to become a collector<middot; Apply to become a collector<\/a>\n <\/div>\n<\/p><\/div>\n<\/section>\n<p><\/main><\/p>\n<p><script>\n \/* ==========================================================================\n P-05 Auth JS v1.0.0\n ==========================================================================\n Modules (skeleton - no real backend):\n 1. Google OAuth - alert stub (would redirect to \/auth\/google)\n 2. Email\/password sign-in - alert stub (would POST to \/api\/auth)\n ========================================================================== *\/<\/p>\n<p> (function () {\n \/* 1. Continue with Google *\/\n const googleBtn = document.getElementById('auth-google-btn');\n if (googleBtn) {\n googleBtn.addEventListener('click', () => {\n \/* skeleton : would window.location = '\/auth\/google' *\/\n alert('Skeleton: would redirect to OAuth provider (Google).\\nFlow: \/auth\/google -> callback -> \/p01-home.html');\n });\n }<\/p>\n<p> \/* 2. Email + password sign-in *\/\n const form = document.getElementById('auth-form');\n if (form) {\n form.addEventListener('submit', (e) => {\n e.preventDefault();\n const email = form.email.value.trim();\n const password = form.password.value;\n if (!email || !password) {\n alert('Email and password are required.');\n return;\n }\n \/* skeleton : would POST to \/api\/auth\/login *\/\n alert('Skeleton: would POST to \/api\/auth\/login.\\nEmail: ' + email);\n });\n }\n })();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 Sign In \u00b7 v1.0.0 Skip to main content ← LLCCRAFT \u767b\u5165 \/ Sign in Continue your acquisition journey Continue with Google or Email Password \u767b\u5165 \/ Sign in Not a collector yet? \u7533\u8bf7\u52a0\u5165 \/ Join Now >Join Now · Apply to become a collector<\/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-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/15","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=15"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}