/* ============================================================ gail.css — ไฟล์สไตล์กลางของ grammarailab.com 19 ก.ย. 2026 · ทุกหน้าเรียกไฟล์นี้ไฟล์เดียว ห้ามเขียน CSS ซ้ำในหน้า ============================================================ */ /* ---------- token ---------- */ /* สีทั้งหมดอยู่ที่นี่ที่เดียว ห้ามใส่ hex ตรงๆ ในหน้าอื่น brand = #0E7A5F ตัวเดียวทั้งระบบ รวมโลโก้ (SVG inline แก้ hex ได้เลย) เหตุผลที่ไม่ใช้ #128C74 ของโลโก้เดิม: ตัวอักษรขาวบนพื้นนั้น contrast 4.18 ไม่ผ่าน WCAG AA (ต้อง 4.5) ส่วน #0E7A5F ได้ 5.29 */ :root { --brand: #0E7A5F; --brand-strong: #0B5D4C; /* hover/active */ --brand-soft: #E7F3EF; /* พื้นอ่อน เช่น badge, แถบ progress */ --brand-ring: rgba(14, 122, 95, 0.32); --bg: #FFFFFF; --bg-subtle: #F6F8FA; /* พื้นกล่องเมนู · พื้นหน้า */ --surface: #FFFFFF; /* การ์ด */ --border: #DEE3EA; --border-strong: #C3CAD4; --text: #1C2128; --text-muted:#5B6672; --text-faint:#8A94A0; --danger: #C0362C; --danger-soft: #FCEDEB; --warn: #8A5A00; --warn-soft: #FFF6E0; --ok: #1F7A4D; --ok-soft: #E8F5EE; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); --gutter: 14px; /* แถวเมนูชิดซ้าย 14px ตรงกับโลโก้ */ --maxw: 720px; /* system stack — ไม่โหลด webfont เลย เร็วที่สุด ไม่มี FOUT และ OS สมัยใหม่ทุกตัวมีฟอนต์ไทย/พม่าอยู่แล้ว โหลด Noto ครบ 14 ภาษาจะหนักหลายร้อย KB โดยได้ผลต่างแทบไม่เห็น */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Thai", "Noto Sans", "Leelawadee UI", Tahoma, "Noto Sans Myanmar", "Myanmar Text", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Noto Sans TC", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace; } /* dark: ทาสีทับ token ชุดเดิม ไม่แตะ selector ไหนอีกเลย [data-theme] ถูกตั้งโดยสคริปต์ inline ใน ของทุกหน้า (กัน flash ขาว) */ :root[data-theme="dark"] { --brand: #2FA083; --brand-strong: #46B79A; --brand-soft: #13312A; --brand-ring: rgba(47, 160, 131, 0.38); --bg: #12161B; --bg-subtle: #171C22; --surface: #1B2128; --border: #2C343D; --border-strong: #3E4853; --text: #E8EDF2; --text-muted:#A3AEBA; --text-faint:#75818E; --danger: #F08A80; --danger-soft: #34201E; --warn: #E5B44B; --warn-soft: #322718; --ok: #5CC08C; --ok-soft: #14301F; --shadow: 0 1px 2px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.28); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg-subtle); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.3; margin: 0 0 8px; font-weight: 650; } h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 16px; } p { margin: 0 0 12px; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* ---------- layout ---------- */ .g-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 48px; } .g-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px var(--gutter); margin-bottom: 16px; } .g-row { display: flex; align-items: center; gap: 10px; } .g-spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .g-stack > * + * { margin-top: 12px; } /* ---------- header + โลโก้ ---------- */ .g-header { max-width: var(--maxw); margin: 0 auto; padding: 14px var(--gutter) 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .g-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 680; } .g-logo:hover { text-decoration: none; } .g-logo svg { width: 28px; height: 28px; flex-shrink: 0; } /* ---------- กล่องเมนู (disclosure widget) ---------- */ /* พื้นหลังกล่องเมนูสีเดียว แถวเป็น จริงทุกแถว */ .g-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 16px; } .g-menu > summary { list-style: none; cursor: pointer; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; } .g-menu > summary::-webkit-details-marker { display: none; } .g-menu > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; flex-shrink: 0; } .g-menu[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .g-menu[open] > summary { border-bottom: 1px solid var(--border); } .g-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px var(--gutter); color: var(--text); border-bottom: 1px solid var(--border); } .g-menu-item:last-child { border-bottom: 0; } .g-menu-item:hover { background: var(--bg-subtle); text-decoration: none; } .g-menu-item[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); font-weight: 600; } .g-menu-item .g-meta { color: var(--text-muted); font-size: 14px; } .g-menu-item.is-danger { color: var(--danger); } /* ---------- ปุ่ม ---------- */ .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; /* เป้ากดบนมือถือ */ padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font: inherit; font-weight: 600; cursor: pointer; background: var(--brand); color: #fff; transition: background .15s ease; } .g-btn:hover { background: var(--brand-strong); text-decoration: none; } .g-btn:disabled, .g-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .g-btn-block { width: 100%; } .g-btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .g-btn-ghost:hover { background: var(--bg-subtle); } .g-btn-danger { background: var(--danger); } .g-btn-danger:hover { background: var(--danger); filter: brightness(.92); } /* ---------- ฟอร์ม ---------- */ .g-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } .g-input, .g-select, .g-textarea { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .g-textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .g-input:focus, .g-select:focus, .g-textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); } .g-hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; } /* ---------- แจ้งเตือน ---------- */ .g-note { padding: 12px var(--gutter); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-subtle); font-size: 15px; } .g-note-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .g-note-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); } .g-note-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); } /* ---------- แถบโควตา ---------- */ /* ใช้ทั้งแถบรายรอบและแถบสำรองรายวัน (โหมดหลังตันเพดาน) */ .g-meter { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; } .g-meter > span { display: block; height: 100%; background: var(--brand); border-radius: inherit; transition: width .3s ease; } .g-meter.is-full > span { background: var(--warn); } /* ---------- badge ---------- */ .g-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--brand-soft); color: var(--brand); } /* ---------- skeleton ---------- */ /* ทุกหน้าเรียก /me ตอนโหลด ระหว่างรอให้โชว์ตัวนี้ ห้ามให้เมนูกระพริบ */ .g-skel { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--border) 25%, var(--bg-subtle) 37%, var(--border) 63%); background-size: 400% 100%; animation: g-shimmer 1.3s ease-in-out infinite; color: transparent !important; min-height: 1em; } @keyframes g-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------- bottom sheet (terms/privacy ในฟอร์มสมัคร/checkout) ---------- */ .g-sheet { border: 0; padding: 0; max-width: 100%; width: 100%; background: transparent; } .g-sheet::backdrop { background: rgba(12, 16, 22, .55); } .g-sheet .g-sheet-body { background: var(--surface); color: var(--text); border-radius: 16px 16px 0 0; padding: 18px var(--gutter) 24px; max-height: 82vh; overflow: auto; } .g-sheet[open] { position: fixed; inset: auto 0 0 0; margin: 0; } /* ---------- footer ---------- */ .g-footer { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter) 32px; font-size: 14px; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 8px 16px; } .g-footer a { color: var(--text-muted); text-decoration: underline; } /* ---------- utility ---------- */ .g-muted { color: var(--text-muted); } .g-small { font-size: 14px; } .g-mono { font-family: var(--font-mono); } .g-hidden { display: none !important; } .g-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }