/* ========================================= "ของดีเมืองจุน" – Unified Theme CSS - Design Tokens (Light default + optional Green/Gold + Dark via data-theme) - Header / Nav / Mobile Tabbar - Cards / Lists / Badges / Buttons / Forms - Index thumbnails / Review gallery / Uploader - Utilities & Layout ========================================= */ /* ========================= THEME TOKENS (Light Default) ========================= */ :root{ /* Brand */ --brand: #5b2d82; /* Royal Purple */ --brand-600: #4c2570; --brand-700: #3f1f5d; --accent: #d4af37; /* Gold */ --accent-600: #b48f1c; --accent-700: #906f0e; /* Feedback */ --success: #16a34a; --warning: #f59e0b; --danger: #ef4444; /* Neutrals */ --ink: #0f172a; --muted: #64748b; --line: #e5e7eb; --surface: #ffffff; --bg: #f8fafc; /* Elevation */ --shadow-1: 0 6px 20px rgba(15,23,42,.06); --shadow-2: 0 12px 32px rgba(15,23,42,.10); /* Radii */ --r-card: 16px; --r-btn: 12px; /* Brand gradient (header/hero/cta) */ --grad-brand: linear-gradient(135deg, #5b2d82 0%, #7c3aed 60%, #d4af37 120%); color-scheme: light; } /* Optional Theme: Green + Gold (apply on BODY) */ body[data-theme="green-gold"]{ --brand: #047857; --brand-600: #065f46; --brand-700: #064e3b; --accent: #d4af37; --accent-600: #b48f1c; --accent-700: #906f0e; --grad-brand: linear-gradient(135deg, #065f46 0%, #10b981 55%, #d4af37 120%); } /* Explicit Dark Theme (apply on ROOT: ) */ :root[data-theme="dark"]{ --ink: #e9edf5; --muted: #b5c0d4; --line: #2f3a4f; --surface: #0e1420; --bg: #0a0f18; --shadow-1: 0 6px 20px rgba(2,6,23,.35); --shadow-2: 0 12px 32px rgba(2,6,23,.5); color-scheme: dark; } /* ========================= GLOBAL ========================= */ html, body{ background: var(--bg); color: var(--ink); } a{ color: var(--brand); text-decoration: none; } a:hover{ opacity:.9 } hr{ border:0; border-top:1px solid var(--line); } .site-main{ max-width: 1100px; margin: 0 auto; padding: 16px; } /* ========================= HEADER & TOP NAV ========================= */ .site-header{ border-bottom: 1px solid var(--line); background: var(--surface); } .site-header__inner{ max-width: 1100px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .site-logo img{ height:80px; max-height:80px; } .right-side{ display:flex; align-items:center; gap:14px; } .site-nav{ display:flex; gap:14px; } .site-nav a{ color: var(--brand); font-weight:600; text-decoration:none; } .site-nav a:hover{ color: var(--accent); text-decoration:underline; } /* Hide top nav on mobile, show on desktop */ @media (max-width: 768px){ .site-nav{ display:none !important; } } @media (min-width: 769px){ .site-nav{ display:flex !important; } } /* Theme toggle button */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:999px; border:1px solid var(--line); background: var(--surface); color: var(--ink); cursor:pointer; box-shadow: var(--shadow-1); font-size:18px; line-height:1; transition: background .2s, color .2s, filter .2s; } .theme-toggle:hover{ filter:brightness(1.08); } /* Mobile: center logo */ @media (max-width: 768px){ .site-header__inner{ justify-content:center; } .right-side{ display:none; } .site-logo img{ display:block; margin:0 auto; } } /* ========================= CARDS / TITLES ========================= */ .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 16px; box-shadow: var(--shadow-1); margin: 10px 0; } h1, h2, h3{ color: var(--ink); } h1, .page-title{ color: var(--brand-700); font-size: 2rem; font-weight: 800; } .page-title{ display:flex; align-items:center; gap:10px; margin-bottom:12px; } .page-title .pill{ padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; background: rgba(212,175,55,.14); color: var(--accent-700); } /* ========================= BUTTONS ========================= */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius: var(--r-btn); border:none; cursor:pointer; text-decoration:none; font-weight:700; background: var(--brand); color:#fff; box-shadow: var(--shadow-1); } .btn:hover{ background: var(--brand-600); } .btn-outline{ background: var(--surface); color: var(--ink); border:1px solid var(--line); box-shadow:none; } .btn-accent{ background: var(--accent); color:#111827; } .btn-accent:hover{ background: var(--accent-600); } .btn-danger{ background: var(--danger); } .btn-soft{ background: rgba(124,58,237,.12); color: var(--brand-700); } body[data-theme="green-gold"] .btn-soft{ background: rgba(4,120,87,.12); color: var(--brand-700); } /* Full-width CTA */ .btn-primary{ width:100%; padding:12px 14px; border:none; border-radius:12px; background: var(--brand); color:#fff; font-weight:700; font-size:16px; cursor:pointer; transition: filter .15s, transform .02s; } .btn-primary:hover{ filter:brightness(1.04); } .btn-primary:active{ transform:translateY(1px); } /* ========================= LISTS / BADGES / STATS ========================= */ .list{ list-style:none; padding:0; margin:0; } .list-item{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; border-bottom:1px dashed var(--line); } .list-item:last-child{ border-bottom:none; } .badge{ padding:6px 10px; border-radius:999px; background:#f3f4f6; color:#0f172a; text-decoration:none; } .badge.free{ background:#ede9fe; color:#5b21b6; } .badge.pro { background:#fbf6e5; color:#8a6a12; border:1px solid rgba(212,175,55,.4); } .badge.status-approved{ background:#dcfce7; color:#166534; } .badge.status-pending{ background:#fff7ed; color:#9a3412; } .badge.status-reject{ background:#fee2e2; color:#991b1b; } .badge-danger{ background:#fee2e2; color:#b91c1c; } .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .stat{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; } .stat h4{ margin:0 0 6px; color:var(--muted); font-size:13px; } .stat .num{ font-size:22px; font-weight:800; } /* ========================= AVATAR ========================= */ .avatar{ width:44px; height:44px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: radial-gradient(circle at 20% 20%, var(--accent), var(--brand)); color:#fff; font-weight:900; letter-spacing:.5px; } /* ========================= INDEX THUMBS / MEDIA ========================= */ .card .photo{ width:100%; height:220px; object-fit:cover; border-radius:12px; } .thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:8px; } .thumbs .thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; border:1px solid var(--line); } /* ========================= AUTH / FORMS ========================= */ .auth-wrap{ max-width:760px; margin:24px auto; padding:0 12px; } .auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow-1); padding:28px 26px; } .auth-title{ font-size:28px; line-height:1.2; margin:0 0 18px; font-weight:800; } .auth-sub{ color:var(--muted); margin:-8px 0 22px; } .field{ margin:16px 0; } .field label{ display:block; font-weight:600; margin:0 0 8px; color:var(--ink); } .input, .select, .textarea{ width:100%; font-size:16px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); outline:none; transition:border-color .15s, box-shadow .15s; max-width:100%; box-sizing:border-box; } .input:focus, .select:focus, .textarea:focus{ border-color: var(--brand-600); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 20%, transparent); } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:720px){ .grid-2{ grid-template-columns:1fr; } } .hint{ font-size:13px; color:var(--muted); margin-top:6px; } .error{ border-color:var(--danger) !important; background:#fff7f7; } .err-box{ color:#b91c1c; background:#fde8e8; border-left:4px solid #dc2626; padding:12px 16px; border-radius:6px; margin:10px 0; font-weight:600; } .ok-box{ color:#166534; background:#dcfce7; border-left:4px solid #22c55e; padding:12px 16px; border-radius:6px; margin:10px 0; font-weight:600; } /* Password group */ .input-group{ position:relative; } .input-group .toggle-eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; font-size:15px; color:#6b7280; } .pw-meter{ height:6px; background:#e5e7eb; border-radius:999px; margin-top:8px; overflow:hidden; } .pw-meter > i{ display:block; height:100%; width:20%; background:#ef4444; border-radius:999px; transition:width .2s, background .2s; } .pw-msg{ font-size:12px; color:#6b7280; margin-top:6px; } /* ========================= GRID UTILITIES ========================= */ .grid{ display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width: 900px){ .grid{ grid-template-columns: 1fr 2fr; } } @media (min-width: 960px){ .grid{ grid-template-columns: 1fr 2fr; } } /* ========================= MOBILE TABBAR ========================= */ .tabbar{ display:none !important; } @media (max-width: 768px){ body{ padding-bottom: 76px; } .tabbar{ display:flex !important; position:fixed; left:0; right:0; bottom:0; z-index:999; height:64px; background: var(--surface); border-top:1px solid var(--line); justify-content:space-around; align-items:stretch; box-shadow: 0 -6px 18px rgba(0,0,0,.06); } .tabbar a{ flex:1 1 0; text-align:center; text-decoration:none; color: var(--muted); font-size:12px; padding-top:6px; display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; } .tabbar a svg{ width:24px; height:24px; } .tabbar a.active{ color: var(--brand); font-weight:700; } .tabbar a.active svg path{ fill: var(--brand); stroke: var(--brand); } } /* ========================= UTILITIES ========================= */ .text-muted{ color: var(--muted); } .text-brand{ color: var(--brand); } .bg-grad-brand{ background: var(--grad-brand); color:#fff; } .round{ border-radius:12px; } .shadow-1{ box-shadow: var(--shadow-1); } .shadow-2{ box-shadow: var(--shadow-2); } /* ===== Home cards grid (index) ===== */ .cards{ display:grid; grid-template-columns:1fr; gap:16px; } @media (min-width: 720px){ .cards{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px){ .cards{ grid-template-columns: repeat(3, 1fr); } } /* --- การ์ดรีวิว spacing --- */ .cards{ gap:20px; } @media (min-width: 720px){ .cards{ gap:24px; } } @media (min-width: 1100px){ .cards{ gap:28px; } } /* --- ภาพหลักเมื่อมีแค่ 1 รูป --- */ .card .photo{ width:100%; height:220px; object-fit:cover; border-radius:12px; display:block; } /* --- แกลลอรี่ย่อ (2–4 รูป) --- */ .thumbs{ display:grid; grid-template-columns: repeat(2, 1fr); gap:6px; margin-bottom:8px; } .thumbs .thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block; } /* --- ป้าย +n (จำนวนรูปที่เหลือ) --- */ .more{ position:relative; } .more::after{ content: attr(data-more); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.45); color:#fff; font-weight:800; font-size:18px; border-radius:10px; } /* แต่งตัวการ์ดนิดหน่อยให้ดูอ่านง่าย */ .card h3{ margin:8px 0 4px; font-size:18px; } .card p.meta{ color:#64748b; margin:0 0 6px; font-size:13px; } /* ===== Review form ===== */ .review-form{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; } .review-form label{ font-weight:600; margin-bottom:6px; display:block; color: var(--ink); } .review-form input, .review-form select, .review-form textarea{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); } .review-form textarea{ grid-column: span 2; min-height:120px; } .review-form .file-input{ grid-column: span 2; } .review-form button{ grid-column: span 2; margin-top:12px; } /* ===== Uploader ===== */ .uploader { border: 2px dashed var(--line); border-radius: 14px; padding: 20px; text-align: center; color: var(--muted); cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .uploader.dragover { background: rgba(124,58,237,.08); border-color: var(--brand); color: var(--brand); } /* ===== Preview grid ===== */ .preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 12px; margin-top: 14px; } .thumb-item { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); } .thumb-item img { width: 100%; height: 120px; object-fit: cover; } .thumb-item button { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.5); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; } .thumb-item .cap { font-size: 12px; color: var(--muted); text-align: center; padding: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== Review gallery (lightbox-ready) ===== */ .lz-wrap { display:grid; grid-template-columns: 92px 1fr; gap:14px; } .lz-thumbs { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow:auto; padding-right:4px; scrollbar-width: thin; } .lz-thumb { width:92px; height:92px; object-fit:cover; border-radius:10px; cursor:pointer; border:2px solid transparent; transition:border-color .15s, transform .08s; } .lz-thumb:hover { transform: translateY(-1px); } .lz-thumb.is-active { border-color: var(--brand); } .lz-main { position:relative; border-radius:14px; overflow:hidden; background:#0b0f14; } :root:not([data-theme="dark"]) .lz-main{ background:#0b0f14; } /* keep contrast for image bg */ .lz-main img { width:100%; height:auto; display:block; transform-origin: var(--x, 50%) var(--y, 50%); transition: transform .2s ease; } @media (hover:hover){ .lz-main:hover img { transform: scale(1.04); } } .lz-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:999px; border:none; cursor:pointer; background: rgba(0,0,0,.45); color:#fff; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; } .lz-nav:hover { background: rgba(0,0,0,.6); } .lz-nav.prev { left:10px; } .lz-nav.next { right:10px; } /* lightbox */ .lz-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:9999; } .lz-lightbox.show { display:flex; } .lz-lightbox img { max-width:94vw; max-height:90vh; border-radius:12px; } .lz-close { position:absolute; top:14px; right:14px; width:42px; height:42px; border:none; border-radius:999px; background:#000; color:#fff; font-size:26px; cursor:pointer; opacity:.7; } .lz-close:hover{ opacity:1; } .lz-lightbox .lz-nav { background:rgba(255,255,255,.15); } /* ===== Promo banner ===== */ .promo-banner { background: linear-gradient(135deg, #5b2d82, #7c3aed); color: #fff; border-radius: 14px; padding: 24px; margin: 20px 0; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.15); } .promo-banner h2 { font-size: 1.5rem; margin-bottom: 10px; color:#fff; } .promo-banner p { margin: 0 0 15px; font-size: 1.1rem; line-height: 1.6; color:#fff; } .promo-banner .highlight { color: #ffd700; font-weight: bold; } .btn-promo { display:inline-block; background:#ffd700; color:#000; font-weight:bold; padding:10px 20px; border-radius:8px; text-decoration:none; transition:background .3s; } .btn-promo:hover { background:#ffcc00; } /* Hide the hero/features section on small screens */ @media (max-width: 768px) { .features { display: none !important; } } @media (max-width: 768px) { body.home .features { display: none !important; } } /* ==== ปรับขนาดโซนค้นหาและหมวดหมู่ให้เล็กลงบนมือถือ ==== */ @media (max-width: 768px) { /* กล่องค้นหา */ .card form { flex-direction: column; gap: 6px; } .card input.input[type="search"] { font-size: 15px; padding: 8px 10px; } .card .btn, .card .btn-outline { font-size: 14px; padding: 8px 12px; } /* แถบหมวดหมู่ */ .cat-bar { gap: 6px; margin-top: 6px; } .cat-bar .badge { font-size: 13px; padding: 6px 10px; border-radius: 8px; } /* ลด padding ของกล่องทั้งหมด */ .card { padding: 10px; } } /* ซ่อน section แนะนำ (features) เมื่อจอกว้าง <= 768px */ @media (max-width: 768px) { section.features { display: none; } }