/*
Theme Name: R Web Design
Theme URI: https://example.com/
Description: Child theme for your WordPress site using the RWD1989 palette and components.
Author: You
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: r-web-design
Template: plant3
Version: 3.3
*/
/* =============================================
RWD1989 — Tone-Locked Curved BG (+ effects)
Use with: as first child in
Put this CSS at the very end of your main CSS / Additional CSS
============================================= */
:root{
/* โทนหลัก */
--base-top:#0F182A;
--base-bot:#050A15;
--tone-lock:#0A1120;
/* ปิดเอฟเฟกต์วง/โค้งทั้งหมดให้พื้นเรียบ */
--blue-a:0;
--indigo-a:0;
--arc-light-a:0;
--arc-shadow-a:0;
/* กรอบมืดและเกรน */
--vignette-a:.90;
--noise-a:.07;
/* Aura (ชั้นสีแบบนุ่ม – ใช้กับ #rwd1989-fx เมื่อเปิด fx-aura) */
--a-warm:#FF8A5B; --a-warm-a:.08; /* ส้มพีช */
--a-cool:#57B3FF; --a-cool-a:.10; /* ฟ้าไลท์ */
--a-violet:#8A72FF; --a-violet-a:.08;/* ม่วงอ่อน */
}
html,body{ background:#050A15 !important; min-height:100%; }
body{ isolation:isolate; } /* กัน blend ไหลออกนอก body */
body,.site,.site-content,.wp-site-blocks,.wp-block-group,
.gb-container,[class*="gb-container"]{
background:transparent !important; filter:none !important;
}
/* กัน pseudo-bg จากธีม/ปลั๊กอิน */
html::before,html::after,body::before,body::after,
.site::before,.site::after{
content:none !important; background:none !important;
mix-blend-mode:normal !important; filter:none !important;
}
/* --- พื้นหลังหลัก --- */
#rwd1989-bg{
position:fixed; inset:0; z-index:-1; pointer-events:none;
background:
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 66%, rgba(0,0,0,var(--vignette-a)) 100%),
linear-gradient(180deg, var(--base-top) 0%, var(--base-bot) 100%),
linear-gradient(var(--tone-lock), var(--tone-lock));
background-blend-mode: multiply, normal, multiply;
will-change:transform,opacity; transform:translateZ(0);
}
/* ปิดเลเยอร์ลายเส้น/ของเดิม (ถ้าเคยมี) */
#rwd1989-bg::before{
content:none !important; background:none !important;
-webkit-mask:none !important; mask:none !important;
}
/* เกรนเบา ๆ ลด banding */
#rwd1989-bg::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:280px 280px;
opacity:var(--noise-a);
mix-blend-mode:overlay;
}
/* Fallback ถ้าไม่รองรับ blend-mode */
@supports not (background-blend-mode: multiply){
#rwd1989-bg{
background:
linear-gradient(180deg, var(--base-top) 0%, var(--base-bot) 100%),
linear-gradient(var(--tone-lock), var(--tone-lock));
}
}
/* =========================
RWD1989 — Aura Overlay (ออร่านุ่ม ไม่แย่งสายตา)
ใช้ร่วมกับ
========================= */
#rwd1989-fx{
position:fixed; inset:0; z-index:-1; pointer-events:none;
}
/* เปิดออร่า (ค่าเบื้องต้นนุ่ม ๆ) */
#rwd1989-fx.fx-aura{
background:
/* ก้อนส้มพีช – ซ้ายบน */
radial-gradient(1200px 840px at 18% 24%,
rgba(255,138,91,var(--a-warm-a)) 0, rgba(255,138,91,0) 60%),
/* ก้อนฟ้า – ขวาบน */
radial-gradient(1400px 980px at 78% 30%,
rgba(87,179,255,var(--a-cool-a)) 0, rgba(87,179,255,0) 66%),
/* ก้อนม่วง – กลางล่าง (จาง) */
radial-gradient(1200px 880px at 52% 75%,
rgba(138,114,255,var(--a-violet-a)) 0, rgba(138,114,255,0) 70%);
mix-blend-mode:soft-light;
}
/* ไฮไลท์โค้งจาง ๆ เพิ่มมิติ (ยังคงนุ่ม) */
#rwd1989-fx.fx-aura::after{
content:""; position:absolute; inset:0;
background: radial-gradient(70% 50% at 50% 45%,
rgba(255,255,255,.04), transparent 70%);
mix-blend-mode:overlay;
}
/* โหมดเบา: ถ้าอยากมินิมอลสุด ๆ ให้เติมคลาส fx-lite */
#rwd1989-fx.fx-aura.fx-lite{
background:
radial-gradient(1200px 840px at 18% 24%,
rgba(255,138,91,var(--a-warm-a)) 0, rgba(255,138,91,0) 60%),
radial-gradient(1400px 980px at 78% 30%,
rgba(87,179,255,var(--a-cool-a)) 0, rgba(87,179,255,0) 66%);
}
/* มือถือ: ลดความทึบลงนิดให้โทนยังเข้ม */
@media (max-width:768px){
:root{ --a-warm-a:.06; --a-cool-a:.08; --a-violet-a:.06; }
}
/* Fallback ถ้าเบราว์เซอร์ไม่รองรับ mix-blend-mode */
@supports not (mix-blend-mode: soft-light){
#rwd1989-fx.fx-aura{ opacity:.06; mix-blend-mode:normal; }
}
/* พิมพ์เอกสาร: ตัดเลเยอร์ BG/FX ออก */
@media print{
#rwd1989-bg,#rwd1989-fx{ display:none !important; }
}
/* ===== RWD1989 • SMOOTH NAVY – Hard Reset (no stripes) ===== */
/* 0) ล้างเลเยอร์ลาย/เส้นที่อาจหลงเหลือ */
#rwd1989-bg::before,
#rwd1989-fx::before{
content:none !important;
background:none !important;
-webkit-mask:none !important; mask:none !important;
filter:none !important; mix-blend-mode:normal !important;
opacity:0 !important;
}
/* 1) พื้นหลังหลัก—3 stop + vignette นุ่ม ๆ */
#rwd1989-bg{
position:fixed !important; inset:0 !important; z-index:-1 !important;
pointer-events:none !important;
/* เพิ่ม mid-stop เพื่อลด banding + vignette ครอบ */
background:
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 65%, rgba(0,0,0,0.90) 100%) ,
linear-gradient(180deg,
#0F182A 0%,
#0D1728 55%,
#050A15 100%) ,
linear-gradient(#0A1120,#0A1120) !important;
background-blend-mode: multiply, normal, multiply !important;
will-change:transform,opacity !important;
transform:translateZ(0) !important;
}
/* 2) Noise 2 สเกล – ช่วยดันให้ไล่สีเนียนขึ้น */
#rwd1989-bg::after{
content:"" !important; position:absolute !important; inset:0 !important;
pointer-events:none !important;
/* สองเลเยอร์คนละขนาด ลดการเห็น pattern ซ้ำ */
background-image:
url("data:image/svg+xml;utf8,\
"),
url("data:image/svg+xml;utf8,\
");
background-size: 160px 160px, 320px 320px !important;
background-repeat: repeat !important;
opacity:.10 !important; /* ถ้ายังเห็น banding ปรับได้ .10–.14 */
mix-blend-mode:overlay !important;
}
/* 3) ปิดเอฟเฟกต์ออร่าไว้ก่อน (กันสับสน) — เปิดใหม่ค่อยลบบรรทัดนี้ */
#rwd1989-fx{ background:none !important; }
/* 4) กันปลั๊กอิน/ธีมเติมลายซ้อน */
html::before,html::after,body::before,body::after,
.site::before,.site::after{ content:none !important; background:none !important; }
/* ===== RWD1989 • ULTRA SMOOTH NAVY (v2, no stripes) ===== */
/* 0) ล้างเลเยอร์ลาย/เส้นที่อาจหลงเหลือ */
#rwd1989-bg::before,
#rwd1989-fx::before{
content:none !important; background:none !important;
-webkit-mask:none !important; mask:none !important;
filter:none !important; mix-blend-mode:normal !important;
opacity:0 !important;
}
/* 1) พื้นหลังหลัก — 2 ก้อนรัศมี + ไล่สี 4 สเตป + tone-lock */
#rwd1989-bg{
position:fixed !important; inset:0 !important; z-index:-1 !important;
pointer-events:none !important;
/* ก้อนซ้ายบน + ก้อนขวาล่าง (soft-light) ช่วยแตกแถบสีให้เนียนขึ้น */
background:
radial-gradient(1200px 900px at 18% 10%,
rgba(15,24,42,1) 0%, rgba(15,24,42,.85) 40%, rgba(15,24,42,0) 70%),
radial-gradient(1300px 900px at 82% 90%,
rgba(10,18,32,1) 0%, rgba(10,18,32,.85) 44%, rgba(10,18,32,0) 72%),
/* ไล่สี 4 สเตป เพื่อลด banding */
linear-gradient(180deg,
#0F182A 0%,
#0D1626 38%,
#0A1322 68%,
#050A15 100%),
/* tone-lock */
linear-gradient(#0A1120,#0A1120) !important;
background-blend-mode:
soft-light, soft-light,
normal,
multiply !important;
will-change:transform,opacity !important;
transform:translateZ(0) !important;
}
/* 2) Noise 3 สเกล — ลด banding ให้เนียนกว่ารอบก่อน */
#rwd1989-bg::after{
content:"" !important; position:absolute !important; inset:0 !important;
pointer-events:none !important;
background-image:
url("data:image/svg+xml;utf8,\
"),
url("data:image/svg+xml;utf8,\
"),
url("data:image/svg+xml;utf8,\
");
background-size: 160px 160px, 320px 320px, 560px 560px !important;
background-repeat: repeat !important;
opacity:.12 !important; /* ปรับได้ .10–.16 ตามจอ */
mix-blend-mode:overlay !important;
}
/* 3) ปิดเลเยอร์เอฟเฟกต์อื่นไว้ก่อน (ถ้าจะเปิดค่อยถอดบรรทัดนี้) */
#rwd1989-fx{ background:none !important; }
/* 4) กันปลั๊กอิน/ธีมเติมลายซ้อน */
html::before,html::after,body::before,body::after,.site::before,.site::after{
content:none !important; background:none !important;
}
/* ===== RWD1989 • Smooth Film + Gentle Aura Drift (append at the very end) ===== */
/* A) ฟิล์มเกลี่ยความเนียน (ลด banding เพิ่ม depth เบา ๆ) */
#rwd1989-fx.fx-film::before{
content:"";
position:absolute; inset:0; pointer-events:none;
/* ฟิล์มนุ่ม: ไล่ขาว→เทาเข้มบาง ๆ เพื่อเกลี่ยชั้นสี */
background:
linear-gradient(180deg,
rgba(255,255,255,.015) 0%,
rgba(0,0,0,.02) 40%,
rgba(0,0,0,.035) 75%,
rgba(0,0,0,.045) 100%);
mix-blend-mode:soft-light; /* ยึดโทนเดิม ไม่หลุดสว่าง */
opacity:1;
}
/* B) ออร่าลอยช้า ๆ (สองก้อน) — เปิดเมื่อใส่คลาส fx-drift ให้ #rwd1989-fx */
:root{
--fx-speed: 64s; /* ความเร็วรวม (ปรับได้ 48–90s) */
--fx-shift: 2%; /* ระยะลอย สูงสุด ~3% พอ */
}
#rwd1989-fx.fx-drift{
position:fixed; inset:0; pointer-events:none;
/* เริ่มค่าตัวแปรตำแหน่ง */
--x1:18%; --y1:22%;
--x2:78%; --y2:74%;
background:
radial-gradient(1100px 760px at var(--x1) var(--y1),
rgba(87,179,255,.08) 0, rgba(87,179,255,0) 62%),
radial-gradient(1200px 820px at var(--x2) var(--y2),
rgba(255,138,91,.07) 0, rgba(255,138,91,0) 66%);
mix-blend-mode:soft-light; /* กลืนกับเนวี่ ไม่เด้ง */
animation:rwdAuraDrift var(--fx-speed) linear infinite;
}
@keyframes rwdAuraDrift{
0%{
--x1:18%; --y1:22%;
--x2:78%; --y2:74%;
}
50%{
--x1: calc(18% + var(--fx-shift));
--y1: calc(22% + var(--fx-shift));
--x2: calc(78% - var(--fx-shift));
--y2: calc(74% - var(--fx-shift));
}
100%{
--x1:18%; --y1:22%;
--x2:78%; --y2:74%;
}
}
/* มือถือ: เบาอีกนิด */
@media (max-width:768px){
#rwd1989-fx.fx-drift{ animation-duration: 80s; }
#rwd1989-fx.fx-drift{ background:
radial-gradient(900px 620px at var(--x1) var(--y1),
rgba(87,179,255,.065) 0, rgba(87,179,255,0) 62%),
radial-gradient(980px 680px at var(--x2) var(--y2),
rgba(255,138,91,.055) 0, rgba(255,138,91,0) 66%); }
}
/* ===== RWD1989 • force order + always-on film & aura ===== */
/* ให้พื้นอยู่ล่างสุด และ FX อยู่เหนือพื้น */
#rwd1989-bg{ z-index:-2 !important; }
#rwd1989-fx{
position:fixed; inset:0;
z-index:-1 !important; /* เหนือพื้น แต่ยังอยู่หลังคอนเทนต์ */
pointer-events:none;
}
/* เก็บความเนียน (ลด banding) */
#rwd1989-fx::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg,
rgba(255,255,255,.015) 0%,
rgba(0,0,0,.02) 40%,
rgba(0,0,0,.035) 75%,
rgba(0,0,0,.045) 100%);
mix-blend-mode:soft-light;
opacity:1;
}
/* ออร่าบาง ๆ (นิ่ง – ไม่แย่งสายตา) */
#rwd1989-fx::after{
content:""; position:absolute; inset:0;
background:
radial-gradient(1100px 760px at 18% 22%,
rgba(87,179,255,.08) 0, rgba(87,179,255,0) 62%),
radial-gradient(1200px 820px at 78% 74%,
rgba(255,138,91,.07) 0, rgba(255,138,91,0) 66%);
mix-blend-mode:soft-light; /* กลืนกับเนวี่ ไม่เด้ง */
}
/* กันลายเฉียง/ของเดิมเผลอมาซ้อน */
#rwd1989-bg::before{
content:none !important; background:none !important;
-webkit-mask:none !important; mask:none !important;
}
/* === RWD1989 • Ultra Smooth Base (reset) ================= */
/* 1) ปิดเอฟเฟกต์เสริมให้หมดก่อน */
#rwd1989-fx{ background:none !important; }
#rwd1989-fx::before,
#rwd1989-fx::after{ content:none !important; }
/* 2) สีฐานเหมือนเดิม */
:root{
--base-top:#0F182A;
--base-bot:#050A15;
}
/* 3) ไล่สีหลายสเต็ป + วินเยตบาง ๆ (ไม่มี soft-light/overlay) */
#rwd1989-bg{
position:fixed; inset:0; z-index:-1; pointer-events:none;
/* บน: วินเยตนุ่ม | ล่าง: ไล่สีหลายจุด */
background:
radial-gradient(1400px 1000px at 50% 52%,
rgba(0,0,0,0) 68%,
rgba(0,0,0,.75) 100%), /* vignette เบามาก */
linear-gradient(180deg, /* ไล่สีหลาย stop เพื่อลด banding */
#0F182A 0%,
#0E1728 24%,
#0D1626 40%,
#0B1423 58%,
#09111E 76%,
#070F1A 88%,
#050A15 100%);
background-blend-mode: multiply, normal;
}
/* 4) ปิด ::before (กันลายเฉียงที่เคยมี) */
#rwd1989-bg::before{
content:none !important;
}
/* 5) Noise เบา ๆ (เม็ดเล็กขึ้น) — ถ้าไม่ชอบ เอา content:none; ได้ */
#rwd1989-bg::after{
content:"";
position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:256px 256px; /* เม็ดเล็ก เนียนกว่า */
opacity:.04; /* เบา ๆ พอเกลี่ยรอยต่อ */
mix-blend-mode:normal; /* ไม่ใช้ overlay/soft-light */
}
/* === RWD1989 • Cross-browser smooth navy (no blend-mode) === */
:root{
--base-top:#0F182A;
--base-mid1:#0E1728;
--base-mid2:#0B1423;
--base-bot:#050A15;
}
/* 1) Base: ไล่สีหลาย stop เพื่อลด banding */
#rwd1989-bg{
position:fixed; inset:0; z-index:-1; pointer-events:none;
background: linear-gradient(180deg,
var(--base-top) 0%,
var(--base-mid1) 28%,
var(--base-mid2) 60%,
var(--base-bot) 100%);
}
/* 2) Vignette แยกเป็นชั้น ::before (ไม่ใช้ blend-mode) */
#rwd1989-bg::before{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 90% at 50% 50%,
rgba(0,0,0,0) 68%,
rgba(0,0,0,1) 100%);
opacity:.68; /* ปรับได้ .60–.75 */
}
/* 3) Noise เบามาก (ช่วยเกลี่ยเฉด) */
#rwd1989-bg::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:256px 256px;
opacity:.035;
}
/* 4) ปิดเลเยอร์เอฟเฟกต์อื่น (ถ้ามี) เพื่อไม่ให้สีเพี้ยน */
#rwd1989-fx, #rwd1989-fx::before, #rwd1989-fx::after{
background:none !important; content:normal;
}
/* 5) จอกว้างสี P3/HDR มักยกความสว่างขึ้น — กดลงนิดให้ใกล้กัน */
@media (color-gamut: p3) {
#rwd1989-bg::before{ opacity:.72; } /* vignette ชัดขึ้นนิด */
#rwd1989-bg::after{ opacity:.03; } /* ลด noise เล็กน้อย */
}
@media (dynamic-range: high) { /* HDR */
#rwd1989-bg::before{ opacity:.76; }
}
/* ===== RWD1989 — Classic Navy (smooth) + optional Aura ===== */
/* โทนหลักที่เคยโอเค */
:root{
--base-top:#0F182A;
--base-mid:#0C1424; /* เติมสเต็ปกลาง ช่วยเกลี่ยเนียน */
--base-bot:#050A15;
--tone-lock:#0A1120;
/* เอฟเฟกต์หลัก (ตั้งอ่อนลงให้ไม่สว่างลอย) */
--arc-light-a:.06; /* ไฮไลท์โค้งบน */
--arc-shadow-a:.42; /* เงาใต้โค้ง */
--vignette-a:.88; /* ขอบมืดรอบจอ */
--noise-a:.05; /* dither เบา ๆ ลด banding */
}
/* กันธีม/ปลั๊กอินทับ */
html,body{background:#050A15!important;min-height:100%}
body,.site,.site-content,.wp-site-blocks,.wp-block-group,.gb-container,[class*="gb-container"]{
background:transparent!important;filter:none!important;
}
html::before,html::after,body::before,body::after,.site::before,.site::after{
content:none!important;background:none!important;mix-blend-mode:normal!important;filter:none!important;
}
/* พื้นหลังหลัก */
#rwd1989-bg{
position:fixed; inset:0; z-index:-1; pointer-events:none;
/* เรียงเลเยอร์: ไฮไลท์โค้ง → เงาโค้ง → วินเยต → base(หลายสเต็ป) → tone-lock */
background:
radial-gradient(1400px 520px at 50% 60%,
rgba(255,255,255,var(--arc-light-a)) 0, rgba(255,255,255,0) 60%),
radial-gradient(1600px 860px at 50% 84%,
rgba(0,0,0,var(--arc-shadow-a)) 0, rgba(0,0,0,0) 65%),
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 68%, rgba(0,0,0,var(--vignette-a)) 100%),
linear-gradient(180deg, var(--base-top) 0%, var(--base-mid) 52%, var(--base-bot) 100%),
linear-gradient(var(--tone-lock), var(--tone-lock));
background-blend-mode:
overlay, /* ไฮไลท์โค้ง */
multiply, /* เงาโค้ง */
multiply, /* vignette */
normal, /* base */
multiply; /* tone lock */
will-change: transform, opacity;
transform: translateZ(0);
}
/* Noise ช่วยเกลี่ยเฉดให้เนียน */
#rwd1989-bg::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:url("data:image/svg+xml;utf8,\
");
background-size:256px 256px;
opacity:var(--noise-a);
mix-blend-mode:overlay;
}
/* ถ้าเครื่อง/เบราว์เซอร์ไม่รองรับ blend-mode → ใช้ฉบับเรียบที่โทนเท่ากัน */
@supports not (background-blend-mode: multiply){
#rwd1989-bg{
background:
linear-gradient(180deg, var(--base-top) 0%, var(--base-mid) 52%, var(--base-bot) 100%),
linear-gradient(var(--tone-lock), var(--tone-lock));
}
#rwd1989-bg::after{opacity:.035}
}
/* ===== Optional Aura (ไม่บังคับ) — เปิดด้วยการใส่คลาส fx-aura ที่ #rwd1989-fx ===== */
:root{
--a-warm:#FF8A5B; --a-warm-a:.07; /* ส้มพีช เบา ๆ */
--a-cool:#57B3FF; --a-cool-a:.08; /* ฟ้าไลท์ */
--a-violet:#8A72FF; --a-violet-a:.06; /* ม่วงอ่อน */
}
#rwd1989-fx{position:fixed; inset:0; z-index:-1; pointer-events:none;}
#rwd1989-fx.fx-aura{
background:
radial-gradient(1100px 780px at 18% 24%, rgba(255,138,91,var(--a-warm-a)) 0, rgba(255,138,91,0) 60%),
radial-gradient(1300px 900px at 78% 30%, rgba(87,179,255,var(--a-cool-a)) 0, rgba(87,179,255,0) 66%),
radial-gradient(1100px 820px at 52% 76%, rgba(138,114,255,var(--a-violet-a)) 0, rgba(138,114,255,0) 70%);
mix-blend-mode:soft-light;
}
#rwd1989-fx.fx-aura::after{
content:""; position:absolute; inset:0;
background: radial-gradient(70% 50% at 50% 45%, rgba(255,255,255,.035), transparent 70%);
mix-blend-mode:overlay;
}
/* มือถือ: เบาลงนิดให้ไม่สว่างเกิน */
@media (max-width:768px){
:root{ --a-warm-a:.055; --a-cool-a:.065; --a-violet-a:.05; --noise-a:.045; }
}
/* (ถ้าดูยังสว่างไป) เปิดโหมดเบา: เพิ่มคลาส fx-lite ร่วมกับ fx-aura */
#rwd1989-fx.fx-aura.fx-lite{
background:
radial-gradient(1100px 780px at 18% 24%, rgba(255,138,91,var(--a-warm-a)) 0, rgba(255,138,91,0) 60%),
radial-gradient(1300px 900px at 78% 30%, rgba(87,179,255,var(--a-cool-a)) 0, rgba(87,179,255,0) 66%);
}
/* ===== RWD1989 — Anti-Banding Patch v3 (smooth navy) ===== */
/* 0) กันเอฟเฟกต์อื่นไปรบกวนตอนเทส (ลบสองบรรทัดนี้ได้ทีหลัง) */
#rwd1989-fx{ background:none !important; }
/* 1) Fallback: ไล่สีหลายจุด + เอียงมุมนิดเดียว (เลี่ยงแนวพิกเซล) */
:root{
--base-mid1:#0E192F;
--base-mid2:#0B1629;
--base-mid3:#081121;
}
#rwd1989-bg{
background:
/* vignette */
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 66%, rgba(0,0,0,var(--vignette-a,.86)) 100%),
/* linear หลาย stop + เอียง 179.4deg */
linear-gradient(179.4deg,
var(--base-top) 0%,
var(--base-mid1) 28%,
var(--base-mid2) 54%,
var(--base-mid3) 74%,
var(--base-bot) 100%),
/* tone lock */
linear-gradient(var(--tone-lock), var(--tone-lock));
background-blend-mode: multiply, normal, multiply;
}
/* 2) ถ้าบราวเซอร์รองรับ color space ใหม่ ใช้ oklch เพื่อไล่สีเนียนกว่า */
@supports (background: linear-gradient(in oklch, red, blue)) {
#rwd1989-bg{
background:
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 66%, rgba(0,0,0,var(--vignette-a,.86)) 100%),
linear-gradient(
in oklch 179.4deg,
oklch(28% 0.03 260) 0%,
oklch(23% 0.03 260) 26%,
oklch(19% 0.03 260) 52%,
oklch(15% 0.03 260) 74%,
oklch(11.5% 0.03 260) 100%
),
linear-gradient(var(--tone-lock), var(--tone-lock));
background-blend-mode: multiply, normal, multiply;
}
}
/* 3) micro-dither บาง ๆ เพื่อตัด band (แทบมองไม่เห็น) */
#rwd1989-bg::before{
content:""; position:absolute; inset:0; pointer-events:none;
background: repeating-linear-gradient(0deg,
rgba(255,255,255,.006) 0 2px,
rgba(0,0,0,.006) 2px 4px);
mix-blend-mode:soft-light;
opacity:.10; /* ถ้ายังพอเห็นเส้น ลดเหลือ .06 ได้ */
}
/* 4) ปรับขนาด grain ให้ pattern ซ้ำช้าลง */
#rwd1989-bg::after{
background-size:420px 420px;
opacity:.05; /* ถ้าจอเก่า banding เยอะ เพิ่มได้ถึง .08 */
}
/* --- Smoothening micro-tweak (optional) --- */
/* เพิ่ม stop ตรงกลาง + ขยับ noise เบา ๆ เพื่อลด banding */
:root{
--base-mid:#0C1525; /* เฉดกลางระหว่าง top/bot */
--noise-a: .085; /* dither จาง ๆ (เดิม .07) */
}
#rwd1989-bg{
background:
/* vignette เดิม */
radial-gradient(1600px 1100px at 50% 50%,
rgba(0,0,0,0) 66%, rgba(0,0,0,var(--vignette-a)) 100%),
/* ไล่สี 3 จุด: top → mid → bot เพื่อเกลี่ยแถบ */
linear-gradient(180deg,
var(--base-top) 0%,
var(--base-mid) 48%,
var(--base-bot) 100%),
/* tone-lock เดิม */
linear-gradient(var(--tone-lock), var(--tone-lock));
background-blend-mode: multiply, normal, multiply;
}
/* ถ้าจอสว่างมากไป ลด vignette ลงนิดให้เนียนขึ้น */
:root{ --vignette-a: .88; } /* เดิม .90 */
/*21Aug2025*/
/* === Layout & Rhythm (add-on, non-invasive) === */
:root{
--content-max: 1200px;
--wide-max: 1440px;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}
.wp-site-blocks,
.gb-container > .gb-inside-container,
.wp-block-group__inner-container{
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--space-4);
}
.alignwide{ max-width: var(--wide-max); margin-inline:auto; }
.alignfull{ max-width:none; padding-inline:0; }
:where(h1,h2,h3,h4){ line-height:1.2; letter-spacing:.02em; }
h1{ font-size: clamp(28px, 4vw, 48px); margin: var(--space-7) 0 var(--space-5); }
h2{ font-size: clamp(24px, 3.2vw, 36px); margin: var(--space-6) 0 var(--space-4); }
h3{ font-size: clamp(20px, 2.6vw, 28px); margin: var(--space-5) 0 var(--space-3); }
body{ font-size: 17px; line-height: 1.6; }
p, .wp-block-paragraph, li{ margin-block: var(--space-4); }
.wp-block-columns{ gap: var(--space-6); margin-block: var(--space-7); }
.wp-block-buttons{ gap: var(--space-4); margin-block: var(--space-5); }
.section{ padding-block: clamp(48px, 6vw, 96px); }
.hero{ padding-block: clamp(72px, 8vw, 128px); }
/* === Typography & UI Colors (safe on dark navy) === */
:root{
--text-strong: #EAF1FF; /* ตัวอักษรหลัก */
--text-muted: #AFC2E8; /* คำอธิบาย/รอง */
--link: #2F7BFF;
--link-hover: #69A3FF;
/* ปุ่มหลัก: ส้ม + ตัวหนังสือเข้ม (อ่านชัดสุดบนพื้นมืด) */
--btn-primary-bg: #FF8C42;
--btn-primary-fg: #0A0F1C; /* ถ้าอยากใช้ตัวอักษรขาว ให้ปรับส้มเป็น #CC4A00 ขึ้นไป */
--btn-outline-fg: #EAF1FF;
--btn-outline-bd: #AFC2E8;
--btn-outline-bg-hover: rgba(255,255,255,.06);
}
body{ color: var(--text-strong); }
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; }
a:focus-visible{ outline:2px solid var(--link); outline-offset:2px; border-radius:4px; }
/* ปุ่ม Gutenberg/Seed */
.button,.wp-block-button__link{
background: var(--btn-primary-bg);
color: var(--btn-primary-fg);
border-radius: 999px;
padding: .8em 1.4em;
font-weight: 600;
display:inline-flex; align-items:center; gap:.5em;
}
.button:hover,.wp-block-button__link:hover{ filter: brightness(.98); }
.wp-block-button.is-style-outline .wp-block-button__link,
.button.is-style-outline{
background: transparent;
color: var(--btn-outline-fg);
border: 1px solid var(--btn-outline-bd);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.button.is-style-outline:hover{
background: var(--btn-outline-bg-hover);
}
/* ลดงาน Repaint บน iOS Safari */
@supports (-webkit-touch-callout: none){
.site, .wp-site-blocks{ transform: translateZ(0); will-change: transform; }
}
/* หน้าจอ P3/HDR – กดความสว่างรวมลงนิดให้ความรู้สึกใกล้ sRGB */
@media (color-gamut: p3) { :root{ --text-muted: #B6C8EA; } } /* ปรับรองนิดเดียว */
@media (dynamic-range: high){ html{ filter: brightness(.98); } } /* แตะ global เบา ๆ */
/*Button*/
/* ลิงก์ทั่วไปไม่ต้องมีเส้นใต้ */
a{ text-decoration: none; }
a:hover{ text-decoration: none; }
/* เมนู Seed/Navigation ก็เอาเส้นใต้ทิ้ง */
.wp-block-navigation a{ text-decoration: none; }
/* เน้นโฟกัสด้วยกรอบ แทนเส้นใต้ เพื่อการเข้าถึง */
a:focus-visible{
outline: 2px solid #69A3FF;
outline-offset: 2px;
border-radius: 4px;
}
/* ทำคอลัมน์สูงเท่ากัน */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
/* ให้กล่องลูกยืดเต็มความสูงคอลัมน์ */
.contact-grid > * { height: 100%; }
/* การ์ด/พื้นหลังของฟอร์มให้ยืดเต็ม */
.contact-grid .form-card { /* ใส่คลาสนี้ให้บล็อกที่ห่อฟอร์ม */
height: 100%;
display: flex;
flex-direction: column;
}
/* แผนที่: ยกเลิก 16:9 แล้วให้เต็มความสูงคอลัมน์แทน */
.map-wrap {
position: relative;
height: 100%;
min-height: 100%; /* ปรับได้ตามดีไซน์ */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.map-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* มือถือให้ซ้อนเป็นคอลัมน์เดียว */
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
.map-wrap { min-height: 320px; }
}
.rwd-breadcrumb {margin:12px 0 20px}
.rwd-breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.rwd-breadcrumb li{font-size:14px;opacity:.9}
.rwd-breadcrumb a{text-decoration:none;color:#8fb7ff}
.rwd-breadcrumb a:hover{color:#cfe3ff}
.rwd-breadcrumb li::after{content:"›";margin:0 6px;opacity:.4}
.rwd-breadcrumb li.current::after{content:"";margin:0}
.rwd-breadcrumb li.current{color:#e6eefc;font-weight:600;opacity:1}