/* ========================================================= style.css — Nareupanat Table of Contents 01) Design Tokens (CSS variables) 02) Base / Reset 03) Layout Containers 04) Header & Navigation 05) Typography 06) Components 06.1) Avatar 06.2) Logo 06.3) Embeds (Looker Studio, etc.) 07) Pages (grids) 08) Utilities 09) Responsive (breakpoints) 10) Debug Guides (toggle with .debug on ) ========================================================= */ /* ========== 01) Design Tokens (CSS variables) ========== */ :root{ /* layout */ --container: 840px; --container-xl: min(1200px, 96vw); /* หน้า report ขยายพิเศษ */ --gap: 24px; --radius: 16px; /* colors */ --fg: #111; --muted: #7A5C3A; --link: #7A5C3A; --link-hover: #61492F; --link-visited: #4E3A29; --link-underline: rgba(122,92,58,.45); /* type scale */ --fs-h1: clamp(28px, 2.6vw, 40px); --fs-h2: clamp(22px, 2.0vw, 28px); --fs-h3: clamp(18px, 1.6vw, 22px); --fs-h4: clamp(16px, 1.4vw, 20px); --fs-h5: clamp(16px, calc(1.1vw + 6px), 18px); --lh-headings: 1.25; --spc-heading-top: 24px; --spc-heading-bottom: 12px; } /* ========== 02) Base / Reset ========== */ *{ box-sizing: border-box } html,body{ margin:0; padding:0 } html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body{ font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans Thai",sans-serif; color:var(--fg); background:#fff; } /* ========== 03) Layout Containers ========== */ .site-header, main, .site-footer{ max-width:var(--container); margin:0 auto; padding:20px; } main.container-xl{ max-width: var(--container-xl); } /* ขยายเฉพาะหน้าที่ต้องการ */ /* ========== 04) Header & Navigation ========== */ .site-header{ display:flex; gap:16px; align-items:center; flex-wrap:wrap } .brand{ font-weight:700; font-size:20px; text-decoration:none; color:var(--fg) } .nav a{ margin-right:12px; text-decoration:none; color:var(--link) } .nav a:last-child{ margin-right:0 } /* ========== 05) Typography ========== */ h1{ font-size: var(--fs-h1); line-height: var(--lh-headings); margin: var(--spc-heading-top) 0 var(--spc-heading-bottom); } h2{ font-size: var(--fs-h2); line-height: var(--lh-headings); margin: var(--spc-heading-top) 0 var(--spc-heading-bottom); } h3{ font-size: var(--fs-h3); line-height: var(--lh-headings); margin: var(--spc-heading-top) 0 var(--spc-heading-bottom); } h4{ font-size: var(--fs-h4); line-height: var(--lh-headings); margin: calc(var(--spc-heading-top)*.7) 0 calc(var(--spc-heading-bottom)*.7); } h5{ font-size: var(--fs-h5); line-height: var(--lh-headings); margin: calc(var(--spc-heading-top)*.55) 0 calc(var(--spc-heading-bottom)*.55); } .byline{ color:var(--muted) } ul{ padding-left:20px } li{ margin:4px 0 } a{ color: var(--link); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: 2px; text-decoration-color: var(--link-underline); } a:hover, a:focus{ color: var(--link-hover); text-decoration-color: currentColor; } a:visited{ color: var(--link-visited) } a:focus-visible{ outline: 2px solid var(--link); outline-offset: 2px } /* ========== 06) Components ========== */ /* 06.1) Avatar */ .avatar{ width:260px; height:260px; object-fit:cover; border-radius:var(--radius); display:block; margin:0 auto; } /* 06.2) Logo */ .logo{ display:block; width: clamp(240px, 80vw, 645px); max-width:100%; height:auto; margin-inline:auto; border-radius:var(--radius); } /* 06.3) Embeds (Looker, Maps, Video, etc.) */ .embed{ position: relative; width: 100%; margin: 16px 0; border-radius: var(--radius); overflow: hidden; background: #f6f6f6; } /* ค่าเริ่มต้น 16:9 (ถ้าไม่ได้ใช้โหมด vh) */ .embed::before{ content: ""; display: block; padding-top: 56.25%; } .embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 4:3 ตัวเลือก */ .embed.embed--43::before{ padding-top: 75%; } /* สูงเต็มตาขึ้นบนเดสก์ท็อปเล็กน้อย (เฉพาะ Looker) */ @media (min-width: 900px){ .embed--looker::before{ padding-top: 62%; } } /* โหมดตามความสูงจอ (แนะนำสำหรับ Looker) */ .embed--vh::before{ display:none; } .embed--vh{ height: 70vh; height: 70dvh; } @media (max-width: 600px){ .embed--vh{ height: 60vh; height: 60dvh; } } /* Full-bleed section (ชนขอบจอซ้าย-ขวา เฉพาะบล็อก) */ .full-bleed{ position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; } .full-bleed .embed{ border-radius: 0; } /* 06.x) Footer two-column */ .site-footer-inner{ display: grid; grid-template-columns: 1fr auto; /* ซ้ายกินที่เหลือ ขวากว้างเท่าข้อความ */ align-items: baseline; gap: 12px; } .site-footer p{ margin: 0; } /* ตัด margin เริ่มต้นของ

*/ .site-footer .right{ text-align: right; } @media (max-width:600px){ /* มือถือ: วางซ้อนสองบรรทัด แต่ยังชิดซ้าย/ขวาตามต้องการ */ .site-footer-inner{ grid-template-columns: 1fr; } .site-footer .right{ text-align: right; } } /* ========== 07) Pages (grids) ========== */ /* 07.1) Home / Generic two-column hero */ .two-col{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr); gap:var(--gap); align-items:start; } .two-col .col-text, .two-col .col-photo{ min-width:0 } .col-text{ max-width:65ch } .col-photo{ align-self:center } /* 07.2) Equal columns */ .two-col--equal{ grid-template-columns:1fr 1fr } .two-col--equal .col-text{ max-width:none } /* 07.3) 25/75 split */ .two-col--25-75{ grid-template-columns:minmax(0,0.5fr) minmax(0,1.5fr) } .two-col--25-75 .col-text{ max-width:none } /* กริดแบบไทม์ไลน์ ปี—รายละเอียด (กระทัดรัด) */ .two-col.stay-2col{ grid-template-columns: minmax(0,0.5fr) minmax(0,1.5fr); } .two-col.stay-2col.timeline{ grid-template-columns: max-content 1fr; column-gap: 3ch; /* ≈ 3 space */ row-gap: 8px; } @media (max-width:600px){ .two-col.stay-2col.timeline{ grid-template-columns: 8ch 1fr; column-gap: 3ch; } } /* ========== 08) Utilities ========== */ .muted{ color:var(--muted) } .justify{ text-align:justify; text-justify:inter-word; hyphens:auto } .text-right{ text-align:right } .text-left{ text-align:left } .text-center{ text-align:center } .items-start{ align-items:start !important } .two-col > * > :first-child{ margin-top:0 } .center-x{ display:flex; flex-direction:column; align-items:center } .list-tight{ margin-top:6px; margin-bottom:0 } .list-tight li{ margin:2px 0 } /* multi-column list */ .list-cols-2{ column-count: 2; column-gap: var(--gap); column-fill: balance; } .list-cols-2 li{ break-inside: avoid; -webkit-column-break-inside: avoid; margin: 4px 0; } .list-cols-2 a{ overflow-wrap: anywhere; } @media (max-width: 700px){ .list-cols-2{ column-count: 1; } } /* ========== 09) Responsive (breakpoints) ========== */ @media (max-width:600px){ .two-col{ grid-template-columns:1fr } .col-photo{ align-self:start } .avatar{ width:200px; height:200px } .text-right{ text-align:left } .two-col--equal, .two-col--25-75{ grid-template-columns:1fr } } /* มือถือแนวนอน: บังคับฟอนต์ให้เสถียรในกริดพิเศษ */ @media (max-width: 900px) and (orientation: landscape){ .two-col.stay-2col .col-text, .two-col.stay-2col .text-left, .two-col.stay-2col .text-left a{ font-size: 1rem; line-height: 1.6; } } /* ========== 10) Debug Guides (toggle with .debug on ) ========== */ html.debug body{ outline:4px solid rgba(0,0,0,.3) } html.debug .site-header, html.debug main, html.debug .site-footer{ outline:2px dashed rgba(255,140,0,.7) }