/* ========================= KEPT Gallery – scoped styles มีผลเฉพาะหน้า /gallery/item.php ========================= */ /* —— Brand tokens พร้อม fallback —— */ .gallery-page{ --brand: var(--kept-green, #1f5f29); --brand-2: var(--kept-green-2, #2e7d32); --brand-ink: #184e1b; --accent: #fdd835; --bg: #f6f9f4; --ink: #1b1b1b; --muted: #64748b; --radius: 16px; --shadow-sm: 0 6px 16px rgba(0,0,0,.06); --shadow-md: 0 10px 24px rgba(0,0,0,.08); } /* ⛳️ FIX: ให้กฎพื้นหลังผูกกับ จริง ๆ */ body.gallery-page{ background: radial-gradient(1400px 200px at 50% -80px, #e8f5e9 0%, transparent 60%), #ffffff; color: var(--ink); } /* ===== Mini Header / Footer ===== */ .header-mini{ position:sticky; top:0; z-index:50; background:#1f5f29; /* เขียวเข้ม */ border-bottom:1px solid #0f3a1a; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem 1rem; } .header-mini .back{ display:inline-flex; align-items:center; gap:.45rem; background:#2e7d32; color:#fdd835; border:1px solid #0b2e15; padding:.45rem .8rem; border-radius:999px; font-weight:700; cursor:pointer; } .header-mini .back svg{ width:18px !important; height:18px !important; } .header-mini .brand{ margin:0 auto; /* อยู่กลางแถบ ไม่ชนปุ่ม back */ font-weight:800; color:#fdd835; text-decoration:none; letter-spacing:.8px; } .header-mini .brand img{ height:36px; width:auto; display:block; } .header-mini .spacer{ width:60px } /* balance กับปุ่ม back ให้โลโก้อยู่กลางจริง */ .g-minifooter{ margin-top:28px; background: var(--accent); color:#124019; text-align:center; padding:14px 10px 18px; font-weight:600; } /* ===== HERO ===== */ .gallery-hero{ max-width: 1200px; margin: 22px auto 10px; padding: 0 16px; text-align: center; } .gallery-title{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; color: var(--brand-2); letter-spacing: .2px; } .gallery-sub{ margin-top: .45rem; display:flex; gap:.5rem .75rem; flex-wrap:wrap; justify-content: center; color: var(--muted); font-size: .95rem; } .meta-chip{ display:inline-flex; align-items:center; gap:.4rem; background:#eef7ee; color:#1b5e20; border:1px solid #d7ecd9; padding:.28rem .7rem; border-radius:999px; font-weight:650; font-size:.86rem; } .meta-chip svg{ width:16px; height:16px } /* Tip/Subtitle */ .section-subtitle{ margin: 14px auto 4px; max-width: 1100px; background: linear-gradient(180deg,#f1f8e9 0%, #fff 100%); border-left: 5px solid var(--accent); border-radius: 10px; padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); color: #355a37; } /* ===== Generic single grid (story/album ใช้บางส่วน) ===== */ .single-gallery-grid{ --col: minmax(230px, 1fr); max-width: 1200px; margin: 14px auto 34px; padding: 0 16px; display:grid; grid-template-columns: repeat(auto-fill, var(--col)); gap: 16px; } .g-item{ position:relative; overflow:hidden; border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; isolation:isolate; } .g-item:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .g-item img{ width:100%; height:100%; aspect-ratio: 16/10; object-fit:cover; display:block; transition: transform .35s ease; } .g-item:hover img{ transform: scale(1.03) } /* caption ใต้ภาพ (story) */ .g-item figcaption{ position:absolute; inset:auto 0 0 0; padding:.65rem .85rem; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%); color:#fff; font-size:.95rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); } /* ===== Before–After ===== */ .ba-list{ max-width: 1145px; margin: 18px auto 36px; padding: 0 16px; display:grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px){ .ba-list{ grid-template-columns: 1fr } } .ba-item{ position:relative; border-radius: var(--radius); overflow:hidden; background:#fff; box-shadow: var(--shadow-sm); } .ba-wrap{ position:relative; display:grid; } .ba-wrap img{ width:100%; height:100%; aspect-ratio:16/7; object-fit:cover; display:block } .ba-before{ clip-path: inset(0 50% 0 0); transition: clip-path .12s linear } .ba-after{ position:absolute; inset:0 } /* Controller */ .ba-range{ position:absolute; left:50%; bottom:14px; translate:-50% 0; width:min(560px, 78%); accent-color: var(--brand-2); background: rgba(255,255,255,.92); border:1px solid #e6efe8; border-radius: 999px; padding:.3rem .6rem; box-shadow: var(--shadow-md); } .ba-label{ position:absolute; top:10px; left:10px; background:#ffffffcc; backdrop-filter: blur(4px); padding:.35rem .6rem; border-radius:8px; font-size:.9rem; font-weight:650; color: var(--brand-ink); border:1px solid #e5efe6; } /* ===== Lightbox ===== */ .lb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.2s; z-index:9999 } .lb-overlay.show{ opacity:1; pointer-events:auto } .lb-img{ max-width:92vw; max-height:92vh; border-radius: 14px } .lb-close{ position:absolute; top:18px; right:22px; font-size:24px; background:#fff; border:0; border-radius:50%; width:42px; height:42px; cursor:pointer; box-shadow: var(--shadow-sm); } /* ===== Responsive tweaks ===== */ @media (max-width: 640px){ .single-gallery-grid{ --col: 1fr; /* บังคับให้เป็นภาพเดี่ยวเต็มแถว */ gap: 12px; /* ระยะห่างระหว่างรูปให้ชัดขึ้น */ } .g-item{ margin-bottom: 12px; /* กันไว้เผื่อ gap ไม่ทำงาน */ border-radius: 14px; /* ทำให้ภาพดูสวยขึ้นบนจอเล็ก */ } } /* ===== Album (แบบใหม่ตามที่ร้องขอ) ===== */ .wrap-1360{ max-width:1200px; margin:0 auto; padding:0 20px; } /* 1) Head cover: ใช้ภาพแรก แต่จำกัดไม่เกิน 1440px */ .album-hero{ margin: 10px auto 12px; } .head-cover{ position:relative; display:block; border-radius:16px; overflow:hidden; background:#e8f5e9; box-shadow:0 10px 24px rgba(0,0,0,.06); } .head-cover img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; } /* 2) Grid ของภาพที่เหลือ (เรียงเป็นบรรทัด) */ .album-grid{ max-width:1200px; margin:14px auto 36px; padding:0 14px; } .album-grid .latest-grid{ display:grid; gap:16px; /* ปรับเป็น 16px ให้สอดคล้องทุก breakpoint */ grid-template-columns:repeat(4,1fr); } @media (max-width:1200px){ .album-grid .latest-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:820px){ .album-grid .latest-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .album-grid .latest-grid{ grid-template-columns:1fr; } } .gallery-card{ display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease; } .gallery-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08); } .card-media{ aspect-ratio:1/1; background:#eaf4ea; } .card-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* 3) บทความต้องอยู่ “ด้านล่าง” เสมอ */ .album-content{ max-width: 1120px; margin: 12px auto 38px; padding: 1rem 1rem; background:#fff; border:1px solid #e7f4e7; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.04); } .album-content h3{ color:#2e7d32; margin:.2rem 0 1rem; font-size:1.25rem; } .album-content p{ margin:.4rem 0; line-height:1.9; } /* ===== กัน svg เผลอยืดเต็มความกว้าง (กรณีไอคอน) ===== */ .gallery-page svg{ width:auto !important; height:auto !important; max-width:none !important; } /* ===== เสริมเล็กน้อยของ hero chips ===== */ .gallery-hero .meta-chip svg{ width:16px !important; height:16px !important; display:inline-block; flex:0 0 16px; } /* ===== Album – title under head cover ===== */ .album-title { max-width:1200px; margin: 10px auto 8px; padding: 0 16px; text-align:center; } .album-title .mid-title { margin: 4px 0 6px; font-weight: 800; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--kept-green, #2e7d32); } .album-title .meta-row { display:flex; flex-wrap:wrap; gap:.5rem .75rem; justify-content:center; } .album-title .meta-row .meta-chip svg{ width:16px; height:16px } /* ===== Album – grid container stays same sizing ===== */ .wrap-1360 { max-width:1360px; margin:0 auto; padding:0 16px; } .album-hero .head-cover img { max-width:100%; height:auto; display:block; } .album-hero .head-cover { border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.06); } /* ===== Album – note block (ท้ายกริด) ===== */ /* คงรูปแบบเดิม แต่ย้ายสไตล์หลักเข้า .note-inner เพื่อลดการชนซ้ำ */ .album-note{ max-width:1200px; margin:8px auto 26px; padding:0 16px; } .album-note .note-inner{ background: linear-gradient(180deg,#f1f8e9,#ffffff); border: 1px solid #e3f0e3; border-radius: 12px; padding: 18px 22px; box-shadow: 0 6px 18px rgba(0,0,0,.04); color:#2e4f30; } .album-note strong{ color:#1b5e20; } /* ===== เฉพาะภาพ head ใน album – เส้นทองและ overlay ===== */ .album-hero .head-cover{ position: relative; display: inline-block; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .album-hero .head-cover::before{ content: ""; position: absolute; inset: 0; padding: 5px; /* ความหนาของขอบ */ border-radius: 17px; background: linear-gradient(to right, #ffeb3b, #ff9800); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .album-hero .head-cover:hover::before{ filter: brightness(1.08); box-shadow: 0 0 18px rgba(255, 235, 59, 0.6); } /* แถบ overlay ด้านล่าง + ปรับให้อ่านง่ายขึ้นและ responsive */ .album-hero .head-cover .head-overlay{ position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(46,125,50,0.92), rgba(46,125,50,0)); color: #fff; text-align: center; padding: 15px 20px; border-radius: 0 0 10px 10px; font-family: 'Noto Sans Thai', sans-serif; font-weight: 700; letter-spacing: .3px; font-size: clamp(1.5rem, 2.3vw, 3rem); line-height: 1.45; /* ซ้อนเงาให้เด่นขึ้น (ขอบขาวบาง + เงาดำอ่อน) */ text-shadow: 0 1px 0 #ffffff, 0 0 14px rgba(0,0,0,.35); } .album-hero .head-cover .head-overlay strong{ color: #ffeb3b; } /* ทำให้ส่วนหลักอยู่กึ่งกลางและระยะขอบเท่ากันทุกบล็อก */ .gallery-page .wrap-1360, .gallery-page .article-hero, .gallery-page .album-grid, .gallery-page .album-note{ max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } /* กัน margin เริ่มต้นของ

*/ .gallery-page figure{ margin:0; } /* ให้ลิงก์คลิกได้เต็มพื้นที่ */ .gallery-page .album-hero .head-cover > a, .gallery-page .gallery-card > a{ display:block; } /* pointer สำหรับ lightbox */ .gallery-page a.js-lb, .gallery-page a.js-lb img{ cursor:pointer; } /* ===== ปรับสำหรับจอเล็กเพิ่มเติม ===== */ @media (max-width: 560px){ /* เพิ่มความสูงภาพหัวเล็กน้อยบนจอเล็ก */ .album-hero .head-cover img{ aspect-ratio: 3/2; } .album-hero .head-cover::before{ padding: 2.5px; /* ความหนาของขอบ */ } /* ===== Mobile nav fix for /gallery/ (scoped) ===== */ .gallery-index .site-header{ z-index: 1200; position: relative; } /* แสดงปุ่ม hamburger เฉพาะจอเล็ก */ @media (max-width: 1024px){ .gallery-index .site-header .menu-toggle, .gallery-index .site-header .nav-toggle{ display: inline-flex !important; align-items: center; justify-content: center; visibility: visible !important; cursor: pointer; } }