/* ============================================================ CHAILAI ENTERPRISE — Site styles Palette: Paper #FFFFFF / #FAFAF8 · Ink #0E0E0E Signature Yellow #FFDE00 · Gold #E0B400 · Deep Gold #A07B08 Type: Anuphan (TH) · Archivo / Archivo Expanded (EN/display) · JetBrains Mono (labels) ============================================================ */ :root{ --black:#0E0E0E; --ink:#161616; --paper:#FFFFFF; --paper-2:#FAFAF8; --paper-3:#F2F0EA; --line:#E7E4DD; --line-2:#EFEDE6; --yellow:#FFDE00; --gold:#E0B400; --gold-deep:#A07B08; --gray:#7C7A74; --gray-mid:#56544E; --gray-dark:#2C2B27; --shadow-sm:0 1px 2px rgba(14,14,14,.04); --shadow-md:0 14px 36px -22px rgba(14,14,14,.28); --shadow-lg:0 30px 70px -34px rgba(14,14,14,.45); --maxw:1240px; --pad:48px; --r-sm:10px; --r-md:16px; --r-lg:26px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:84px;} body{ background:var(--paper); color:var(--ink); font-family:'Anuphan',sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} .mono{font-family:'JetBrains Mono',monospace;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);} /* lang visibility helper (JS toggles [data-lang] on ) */ html[data-lang="th"] .en-only{display:none!important;} html[data-lang="en"] .th-only{display:none!important;} /* ---------- Display / heading utilities ---------- */ .kicker{ font-family:'JetBrains Mono',monospace; font-size:12px;letter-spacing:.3em;text-transform:uppercase; color:var(--gold-deep); display:inline-flex;align-items:center;gap:10px; } .kicker::before{content:'';width:26px;height:2px;background:var(--gold);} .display{ font-family:'Archivo Expanded','Archivo',sans-serif; font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.98; color:var(--black); } /* Thai override — Archivo ไม่มี Thai glyph, ปรับให้ Anuphan แสดงผลถูกต้อง */ :lang(th) .display{ font-family:'Anuphan',sans-serif; line-height:1.15; letter-spacing:-.02em; text-transform:none; } /* Chinese override */ :lang(zh) .display{ font-family:'Noto Sans SC',sans-serif; font-weight:900; line-height:1.1; letter-spacing:.02em; text-transform:none; } .hl{background:linear-gradient(transparent 64%, rgba(255,222,0,.9) 64%);padding:0 .04em;} /* ============================================================ HEADER ============================================================ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:100; background:rgba(228,226,222,.45); backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; } .site-header.scrolled{border-bottom-color:rgba(200,198,194,.6);box-shadow:0 1px 12px rgba(0,0,0,.07);} .site-header .wrap{display:flex;align-items:center;gap:24px;height:72px;} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0;} .brand img{height:38px;border-radius:6px;} .brand .bt{display:flex;flex-direction:column;line-height:1;} .brand .bt .n{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--black);} .brand .bt .s{font-size:11px;color:var(--gray);margin-top:2px;} .nav{display:flex;align-items:center;gap:4px;margin-left:auto;} .nav a{ font-size:15px;font-weight:500;color:var(--gray-mid); padding:9px 14px;border-radius:8px;position:relative;white-space:nowrap; transition:color .2s,background .2s; } .nav a:hover{color:var(--black);background:var(--paper-3);} .nav a.cta{ background:var(--yellow);color:var(--black);font-weight:600; margin-left:6px; } .nav a.cta:hover{background:var(--gold);} .lang-toggle{ display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden; font-family:'JetBrains Mono',monospace;font-size:12px;flex-shrink:0; } .lang-toggle button{ border:none;background:transparent;cursor:pointer; padding:7px 12px;color:var(--gray);font-family:inherit;font-size:inherit; transition:background .2s,color .2s; } .lang-toggle button.on{background:var(--black);color:var(--yellow);font-weight:600;} .burger{ display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line); background:var(--paper);border-radius:10px;cursor:pointer; flex-direction:column;align-items:center;justify-content:center;gap:5px; } .burger span{width:20px;height:2px;background:var(--black);transition:.25s;} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.open span:nth-child(2){opacity:0;} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* mobile drawer */ .drawer{ position:fixed;inset:72px 0 auto 0;z-index:99; background:var(--paper);border-bottom:1px solid var(--line); padding:16px var(--pad) 26px; display:none;flex-direction:column;gap:4px; box-shadow:var(--shadow-md); } .drawer.open{display:flex;} .drawer a{padding:14px 12px;font-size:18px;font-weight:500;border-radius:10px;border-bottom:1px solid var(--line-2);} .drawer a:last-child{border-bottom:none;} .drawer a.cta{background:var(--yellow);font-weight:600;margin-top:8px;text-align:center;} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:'Anuphan',sans-serif;font-weight:600;font-size:16px; padding:14px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent; transition:transform .15s, background .2s, box-shadow .2s, border-color .2s; } .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--yellow);color:var(--black);box-shadow:0 12px 26px -14px rgba(224,180,0,.8);} .btn-primary:hover{background:var(--gold);} .btn-dark{background:var(--black);color:#fff;} .btn-dark:hover{background:var(--gray-dark);} .btn-ghost{background:transparent;color:var(--black);border-color:var(--line);} .btn-ghost:hover{border-color:var(--black);background:var(--paper-2);} .btn .arrow{transition:transform .2s;} .btn:hover .arrow{transform:translateX(3px);} /* ============================================================ SECTION SCAFFOLD ============================================================ */ section{position:relative;} .section-pad{padding:48px 0;} .section-head{max-width:760px;margin-bottom:40px;} .section-head .kicker{margin-bottom:20px;} .section-head h2{ font-family:'Anuphan',sans-serif;font-weight:700;font-size:clamp(30px,4vw,46px); line-height:1.1;color:var(--black);letter-spacing:-.01em; } .section-head p{margin-top:18px;color:var(--gray-mid);font-size:18px;max-width:620px;} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--black);color:#cfcdc6;padding:74px 0 34px;} .site-footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);} .site-footer .brand-col img{height:42px;border-radius:6px;margin-bottom:18px;} .site-footer .brand-col p{font-size:15px;color:#9a988f;max-width:330px;line-height:1.7;} .site-footer h4{font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px;} .site-footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;} .site-footer ul a,.site-footer ul li{font-size:15px;color:#b8b6ad;transition:color .2s;} .site-footer ul a:hover{color:#fff;} .site-footer .bottom{padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#75736c;} .site-footer .bottom .mono{color:var(--gold-deep);} /* ============================================================ FLOATING ACTIONS ============================================================ */ .floating{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:12px;} .fab{ width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-md);cursor:pointer;transition:transform .15s;color:#fff; } .fab:hover{transform:scale(1.08);} .fab.line{background:#06C755;} .fab.call{background:var(--black);} .fab svg{width:26px;height:26px;} /* ============================================================ REVEAL ANIMATION (slide-only — never touches opacity, so content is always fully legible even if captured mid-animation or before JS) ============================================================ */ @media (prefers-reduced-motion: no-preference){ @keyframes revealUp{from{transform:translateY(16px);}to{transform:none;}} .reveal.in{animation:revealUp .6s cubic-bezier(.2,.7,.2,1) both;} .reveal.in[data-d="1"]{animation-delay:.07s;} .reveal.in[data-d="2"]{animation-delay:.14s;} .reveal.in[data-d="3"]{animation-delay:.21s;} } /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:1024px){ :root{--pad:32px;} .section-pad{padding:40px 0;} } @media(max-width:860px){ .nav{display:none;} .burger{display:flex;} .lang-toggle{margin-left:0;} .site-header .wrap{gap:14px;} .brand .bt .s{display:none;} .site-footer .top{grid-template-columns:1fr;gap:36px;} } @media(max-width:560px){ :root{--pad:20px;} body{font-size:16px;} .section-pad{padding:32px 0;} }