/* ---------- Colors ---------- */ :root { /* Light Mode */ --bg: #f8f9fa; /* พื้นหลังหลัก */ --surface: #ffffff; /* การ์ด/พื้นผิว */ --text: #212529; /* ตัวอักษรหลัก */ --muted: #6c757d; /* สีรอง/ข้อความรอง */ --highlight: #0d6efd;/* สีไฮไลท์ */ --nav-bg: #212529; /* พื้นหลัง Navbar */ --nav-fg: #f8f9fa; /* ตัวอักษร Navbar */ --card-bg: #ffffff; /* พื้นหลังการ์ด */ --card-fg: #212529; /* ตัวอักษรการ์ด */ } /* Dark Mode: เพิ่มบน หรือ เป็น data-theme="dark" */ [data-theme="dark"] { --bg: #121212; --surface: #1e1e1e; --text: #e9ecef; --muted: #adb5bd; --highlight: #339af0; --nav-bg: #1c1c1c; --nav-fg: #e9ecef; --card-bg: #2a2a2a; --card-fg: #f1f1f1; } /* ---------- Base / Reset ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: Arial, system-ui, -apple-system, "Segoe UI", sans-serif; margin: 0; background-color: var(--bg); color: var(--text); text-align: center; line-height: 1.55; } /* ---------- Navbar (Sticky + Responsive) ---------- */ .navbar{ position: sticky; top: 0; z-index: 1000; background: var(--nav-bg); box-shadow: 0 2px 8px rgba(0,0,0,.15); } .nav-inner{ max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; } .brand{ color: var(--nav-fg); font-weight: 700; text-decoration: none; letter-spacing: .3px; } .nav-toggle{ display: none; font-size: 22px; background: none; border: none; color: var(--nav-fg); cursor: pointer; padding: 6px 10px; border-radius: 8px; } .nav-links{ display: flex; gap: 14px; } .nav-links a{ color: var(--nav-fg); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 600; display: inline-block; transition: transform .15s ease, background .2s ease, color .2s ease; } .nav-links a:hover{ background: var(--highlight); color: #fff; /* ให้คอนทราสต์ชัด */ transform: translateY(-1px); } .nav-links a.active{ background: var(--highlight); color: #fff; } /* ---------- Hero Section ---------- */ .hero { /* fallback สำหรับบางเบราว์เซอร์ */ background: var(--highlight); background: linear-gradient(180deg, color-mix(in srgb, var(--highlight) 22%, transparent), color-mix(in srgb, var(--highlight) 42%, transparent) ); color: var(--nav-fg); padding: 56px 20px; } .hero img { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; border: 4px solid var(--surface); } .hero h1 { margin: 15px 0 6px; font-size: 30px; } .hero p { font-size: 16px; max-width: 560px; margin: 0 auto; color: var(--muted); } /* ---------- Section ---------- */ .section { padding: 40px 20px; background-color: var(--surface); margin: 22px auto; max-width: 1000px; border-radius: 14px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); } .section h2 { margin-bottom: 18px; color: var(--text); } /* ---------- Recommendations Grid ---------- */ .recommendations { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } /* ปรับการ์ดให้ยืดหยุ่นด้วย clamp: ขั้นต่ำ ~260px สูงสุด ~420px */ .item { width: clamp(260px, 45vw, 420px); background: var(--card-bg); color: var(--card-fg); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: transform .18s ease, box-shadow .18s ease; } .item:hover { transform: translateY(-4px); box-shadow: 0 10px 18px rgba(0,0,0,0.2); } .item img { width: 100%; height: 300px; object-fit: cover; } .item p { margin: 10px; font-size: 14px; } /* ทำให้กดได้ทั้งการ์ด + คงสีตามธีม */ .item a { display: block; color: inherit; /* ใช้สีตัวอักษรจากการ์ด */ text-decoration: none; /* ไม่มีเส้นใต้ */ outline: none; } .item a:hover { color: var(--highlight); /* โทนเดียวกับธีม */ } /* การเข้าถึงด้วยคีย์บอร์ด */ .item a:focus-visible, .nav-links a:focus-visible, .nav-toggle:focus-visible, .brand:focus-visible{ outline: 2px solid var(--highlight); /* มองเห็นชัดทุกพื้นหลัง */ outline-offset: 2px; border-radius: 10px; } /* ---------- Generic page wrappers (ถ้ามีหน้า works/about) ---------- */ .page{ max-width: 1000px; margin: 28px auto; padding: 0 16px; text-align: left; } .page h1{ text-align: center; margin-top: 10px } /* ---------- Cards (สำหรับหน้า "ผลงาน") ---------- */ .cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 16px; } .card{ background: var(--surface); color: var(--text); border-radius: 14px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease; } .card:hover{ transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0,0,0,.12); } .card img{ width: 100%; height: 180px; object-fit: cover; } .card-body{ padding: 14px; } .card-body h3{ margin: 0 0 6px; } .btn{ display: inline-block; padding: 8px 12px; border-radius: 10px; background: var(--highlight); color: #fff; text-decoration: none; font-weight: 600; } .btn:hover{ background: color-mix(in srgb, var(--highlight) 85%, black); } /* ปุ่มสลับโหมด */ .theme-toggle{ background: transparent; border: 1px solid #ffffff33; color: var(--nav-fg); font-size: 18px; line-height: 1; border-radius: 10px; padding: 8px 10px; cursor: pointer; margin-left: 8px; } .theme-toggle:hover{ background: #ffffff14; } .theme-toggle:focus-visible{ outline: 2px solid var(--highlight); outline-offset: 2px; } /* ---------- Responsive ---------- */ @media (max-width: 820px){ .section { margin: 18px 12px; } } @media (max-width: 720px){ .nav-toggle{ display: block; } .nav-links{ position: fixed; inset: 56px 12px auto 12px; /* top, right, bottom, left */ background: var(--nav-bg); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; display: none; flex-direction: column; gap: 6px; padding: 8px; } .nav-links.open{ display: flex; } .nav-links a{ text-align: left; } .hero{ padding: 48px 16px; } .item img{ height: 240px; } /* ลดความสูงภาพบนจอเล็ก */ }