/* ═══════════════════════════════════════════════════════════════════════ TLA Archives — เปลือกหน้า /archives (standalone) หน้า /archives ไม่ได้ใช้ layout ของธีมเว็บ จึงมี แถบเมนู และ ท้ายหน้าเป็นของตัวเอง ไฟล์นี้คือชั้นล่างสุดของหน้า · ตัวแปรสีและฟอนต์ทั้งชุด (ที่ :root — ทั้งหน้าและวิดเจ็ต Kendo ใช้ร่วมกัน) · reset เท่าที่หน้านี้ใช้จริง · ปุ่มมาตรฐานของหน้า (.tla-ar-btn) ซึ่งทั้งเปลือกและเนื้อหน้าเรียกใช้ · แถบเมนู ท้ายหน้า ปุ่มกลับขึ้นบน · การปรับวิดเจ็ต Kendo ที่เรนเดอร์นอกกล่องของหน้า ทำไมหน้านี้ถึงแยกออกมาเป็น standalone · เดิมหน้าโหลด bootstrap + style-3.1 (~500KB) ทั้งที่ทั้งหน้าใช้คลาส tla-ar-* ของตัวเองล้วน ไม่มีคลาส Bootstrap สักตัว · default-main.css (781KB) ถูกโหลดซ้ำสองครั้ง เพราะธีมโหลดให้แล้ว และ view โหลดเองอีกรอบ · ธีมโหลด tla.css / tla-brand.css / tla-modern.css / custom.css ซึ่งเขียนไว้ให้หน้าอื่น (คลาส .tla-shell, .glg-*) ไม่มีผลกับหน้านี้เลย · ฟอนต์ที่หน้านี้ออกแบบไว้ (Sarabun + Chonburi) ไม่เคยถูกโหลดจริง เพราะธีมโหลด Open Sans / Plus Jakarta Sans ตามการตั้งค่าเว็บ · แถบเมนูสีม่วงของเว็บติดอยู่บนสุดตลอด ขัดกับโทนกระดาษสาของหน้านี้ คู่กับ archive.css ซึ่งเป็นเนื้อหน้า — ไฟล์นี้มาก่อนเสมอ (ดู archive/_head.php) ทั้งสองไฟล์ไม่มีกฎที่ทับกันแล้ว ลำดับจึงมีผลแค่กับตัวแปรที่ประกาศไว้ที่นี่ ═══════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────── 1) ตัวแปรของหน้า — ประกาศที่ :root ที่เดียว ต้องอยู่ที่ :root ไม่ใช่ที่ .tla-ar-page เพราะแถบเมนู ท้ายหน้า และ popup ของ Kendo (ดรอปดาวน์ หน้าต่าง คำแนะนำ) อยู่นอกกล่องของหน้า Kendo เรนเดอร์ popup ไว้ที่ ถ้าตัวแปรอยู่ที่ wrapper เมนูที่เด้งออกมาจะกลับไปเป็น สีส้มมาตรฐานของ Kendo ─────────────────────────────────────────────────────────────────────── */ :root { /* กระดาษสา · หมึกน้ำตาลอบอุ่น · ทองเก่า · เขียวใบไม้ */ --paper: #FBF7EF; --paper-2: #F5EEE1; --paper-deep: #EDE3D1; --ink: #3E2C1C; --ink-soft: #6B5641; --ink-mute: #92806B; --rust: #9A5B38; --rust-deep: #7C4629; --gold: #C2A14A; --gold-soft: #E8DCBC; --leaf: #6E8B54; --leaf-soft: #E4EBDA; --line: #E5D9C3; --shadow: 0 2px 14px rgba(94, 68, 34, .07); --shadow-lg: 0 12px 34px rgba(94, 68, 34, .13); --radius: 16px; --arc-ff: 'Sarabun', 'Noto Sans Thai', 'Leelawadee UI', sans-serif; --arc-ff-display: 'Chonburi', Georgia, serif; /* ── Kendo ตามโทนกระดาษ ──────────────────────────────────────── */ --kendo-color-primary: #9A5B38; --kendo-color-primary-hover: #7C4629; --kendo-color-primary-active: #663A21; --kendo-color-primary-emphasis: #B87A55; --kendo-color-primary-subtle: #F5EEE1; --kendo-color-primary-subtle-hover: #EDE3D1; --kendo-color-primary-subtle-active: #E8DCBC; --kendo-color-primary-on-subtle: #3E2C1C; --kendo-color-border: #E5D9C3; --kendo-font-family: var(--arc-ff); --kendo-font-size: 15px; --kendo-border-radius-md: 10px; } /* ─────────────────────────────────────────────────────────────────────── 2) พื้นฐานของหน้า — ไม่มี normalize ของ Bootstrap แล้ว ต้องตั้งเอง เขียนเท่าที่หน้านี้ใช้จริง ไม่ต้องลาก reset ทั้งก้อนมา ─────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.tla-arc-body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--arc-ff); font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; } /** * ⚠️ กฎพื้นฐานด้านล่างห่อด้วย :where() ทั้งหมด — ห้ามถอดออก * * :where() มีความจำเพาะเป็นศูนย์ กฎที่ตั้งชื่อคลาสไว้ (เช่น .tla-ar-btn) * จึงชนะเสมอ ถ้าเขียนเป็น .tla-arc-body a ตรง ๆ ความจำเพาะจะสูงกว่า * .tla-ar-btn แล้วไปทับสีตัวอักษรของปุ่มจนอ่านไม่ออก * (เดิม reboot ของ Bootstrap ทำหน้าที่นี้ด้วยความจำเพาะระดับ element) */ :where(.tla-arc-body) :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: 600; line-height: 1.45; } :where(.tla-arc-body) :where(p) { margin: 0; } :where(.tla-arc-body) :where(ul) { margin: 0; padding: 0; list-style: none; } :where(.tla-arc-body) :where(img) { max-width: 100%; height: auto; } :where(.tla-arc-body) :where(a) { color: var(--rust); text-decoration: none; } :where(.tla-arc-body) :where(a:hover) { color: var(--rust-deep); } :where(.tla-arc-body) :where(button) { font: inherit; color: inherit; } /* ขอบโฟกัสต้องชนะสไตล์ของคอมโพเนนต์ จึงไม่ใส่ :where() ให้ */ .tla-arc-body :focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; } .tla-arc-body [hidden] { display: none !important; } /* ─────────────────────────────────────────────────────────────────────── 3) ปุ่มมาตรฐานของหน้า อยู่ในไฟล์เปลือกเพราะเป็นปุ่มมาตรฐานของทั้งหน้า — ปุ่มค้นหา ปุ่มฝากวัตถุ ดิจิทัล ปุ่มเปิดเรื่องเล่าบนแผนที่ ฯลฯ ใช้คลาสเดียวกันหมด ─────────────────────────────────────────────────────────────────────── */ .tla-ar-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.6rem; border: 0; border-radius: 999px; background: var(--rust); color: #fff; font: inherit; font-weight: 500; cursor: pointer; transition: background .18s ease, transform .18s ease; white-space: nowrap; } .tla-ar-btn:hover { background: var(--rust-deep); transform: translateY(-1px); } .tla-ar-btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .tla-ar-btn.ghost:hover { background: var(--paper-2); color: var(--ink); } /* ─────────────────────────────────────────────────────────────────────── 4) แถบเมนูบนสุด ใช้กระดาษโปร่งกับเส้นทองคั่นแทนแถบทึบ เพื่อให้ไหลต่อกับพื้นหลังของหน้า ไม่กลายเป็นแถบแปลกปลอมเหมือนเมนูสีม่วงของธีมเดิม ─────────────────────────────────────────────────────────────────────── */ .tla-arc-head { position: sticky; top: 0; z-index: 90; background: rgba(251, 247, 239, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* เส้นทองบางคั่นใต้แถบเมนู ใช้ลวดลายเดียวกับ .tla-ar-rule ในหน้า */ .tla-arc-head::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, transparent, var(--gold-soft) 22%, var(--gold) 50%, var(--gold-soft) 78%, transparent); opacity: .65; } .tla-arc-head-in { display: flex; align-items: center; gap: 1.2rem; max-width: 1280px; margin: 0 auto; padding: .6rem 20px; } .tla-arc-logo { flex: none; display: flex; align-items: center; gap: .7rem; } .tla-arc-logo img { height: 46px; width: auto; display: block; } .tla-arc-logo b { display: block; font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--ink); } .tla-arc-logo span { display: block; font-size: .74rem; letter-spacing: .05em; color: var(--ink-mute); } @media (max-width: 991.98px) { .tla-arc-logo-text { display: none; } } .tla-arc-nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; } .tla-arc-nav > li { position: relative; } .tla-arc-nav > li > a, .tla-arc-nav > li > button { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .8rem; border: 0; border-radius: 999px; background: none; font-size: .95rem; color: var(--ink-soft); cursor: pointer; transition: background .2s, color .2s; } .tla-arc-nav > li > a:hover, .tla-arc-nav > li > button:hover, .tla-arc-nav > li.is-open > button { background: var(--paper-2); color: var(--rust); } .tla-arc-nav > li.is-current > a { background: var(--gold-soft); color: var(--rust-deep); font-weight: 600; } .tla-arc-nav svg { width: 13px; height: 13px; } /* เมนูย่อย */ .tla-arc-sub { position: absolute; top: calc(100% + .4rem); left: 0; min-width: 250px; padding: .4rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(94, 68, 34, .13); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; } .tla-arc-nav > li.is-open .tla-arc-sub { opacity: 1; visibility: visible; transform: none; } .tla-arc-sub.is-right { left: auto; right: 0; } .tla-arc-sub a { display: block; padding: .45rem .7rem; border-radius: 9px; font-size: .93rem; color: var(--ink-soft); } .tla-arc-sub a:hover { background: var(--paper-2); color: var(--rust); } .tla-arc-iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft); cursor: pointer; } .tla-arc-iconbtn:hover { border-color: var(--gold); color: var(--rust); } .tla-arc-iconbtn svg { width: 17px; height: 17px; } /* ปุ่มเปิดเมนูบนจอแคบ */ .tla-arc-burger { display: none; } @media (max-width: 991.98px) { .tla-arc-burger { display: inline-grid; } /* จอแคบเมนูกางลงมาเป็นแถวเดียวเต็มความกว้าง อ่านง่ายกว่าย่อให้เล็กลง */ .tla-arc-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 20px 1rem; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(94, 68, 34, .1); } .tla-arc-head.is-open .tla-arc-nav { display: flex; } .tla-arc-nav > li > a, .tla-arc-nav > li > button { width: 100%; justify-content: space-between; border-radius: 10px; } .tla-arc-sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; min-width: 0; margin: .2rem 0 .4rem .8rem; border: 0; box-shadow: none; background: none; } .tla-arc-nav > li.is-open .tla-arc-sub { display: block; } } /* ─────────────────────────────────────────────────────────────────────── 5) ท้ายหน้า ─────────────────────────────────────────────────────────────────────── */ .tla-arc-foot { margin-top: 3.5rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--paper-2), var(--paper-deep)); } .tla-arc-foot-in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; max-width: 1280px; margin: 0 auto; padding: 3rem 20px 2rem; } @media (max-width: 991.98px) { .tla-arc-foot-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { .tla-arc-foot-in { grid-template-columns: 1fr; } } .tla-arc-foot h4 { margin-bottom: .8rem; font-size: .95rem; color: var(--ink); } .tla-arc-foot li { margin-bottom: .35rem; } .tla-arc-foot a, .tla-arc-foot p { font-size: .92rem; color: var(--ink-soft); } .tla-arc-foot-brand img { height: 54px; width: auto; margin-bottom: .8rem; } .tla-arc-foot-bottom { max-width: 1280px; margin: 0 auto; padding: 1rem 20px 1.6rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .86rem; /* --ink-mute บนพื้นกระดาษได้อัตราส่วนความต่างแค่ 3.56 ไม่ผ่านเกณฑ์อ่านง่าย */ color: var(--ink-soft); } /* ─────────────────────────────────────────────────────────────────────── 6) ปุ่มกลับขึ้นบน — ธีมเดิมให้ปุ่มสีม่วงมา ซึ่งหลุดจากโทนของหน้า ─────────────────────────────────────────────────────────────────────── */ .tla-arc-top { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 50%; background: #fff; color: var(--rust); box-shadow: 0 8px 22px rgba(94, 68, 34, .16); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .25s, visibility .25s; cursor: pointer; } .tla-arc-top.is-on { opacity: 1; visibility: visible; transform: none; } .tla-arc-top svg { width: 16px; height: 16px; } /* ─────────────────────────────────────────────────────────────────────── 7) วิดเจ็ต Kendo ที่เรนเดอร์นอก .tla-ar-page ดรอปดาวน์คำแนะนำและหน้าต่างรายละเอียดถูกย้ายไปต่อที่ ตัวแปรสีจึง ช่วยได้ระดับหนึ่ง แต่ฟอนต์กับหัวหน้าต่างต้องกำหนดตรงนี้ ─────────────────────────────────────────────────────────────────────── */ .k-animation-container, .k-window { font-family: var(--arc-ff); } .k-window-titlebar { background: var(--rust); color: #fff; border-bottom: 0; } .k-window-titlebar .k-window-title { font-weight: 600; } .k-window-titlebar .k-window-actions .k-button { color: #fff; } .k-list-item.k-selected { background: var(--paper-2); color: var(--rust-deep); }