/** * แม่แบบ Capsule — สไตล์ชีต * * คัดมาจาก mockup ที่อนุมัติแล้ว (specs/assets/2026-08-02-shell-capsule-mockup.html, * บล็อก TOKENS ถึงท้าย media query) แบบไม่ปรับระยะหรือสีระหว่างแปลง ยกเว้นห้าจุดที่ * ระบุไว้ในบรีฟ Task 5 ข้อ 4: * * 1. คำนำหน้าคลาสทุกตัวเปลี่ยนจาก .sh- เป็น .rxsu-cap- (รวม .shell เปลือยที่ไม่มีขีด * กลาง ซึ่งเปลี่ยนเป็น .rxsu-cap-shell ด้วยเหตุผลเดียวกัน - ชื่อคลาสตรงตัวเกินไปที่จะ * ปล่อยชนกับอะไรก็ได้บนหน้า) * 2. :root{...} ของ mockup ย้ายมาอยู่ใต้ body class .rxsu-shell-capsule แทน เพราะหน้า * เดียวกันยังมีสไตล์ของธีม 1 อยู่ด้วย - ตัวแปรจะต้อง scope ตามแม่แบบที่ active จริง * (ชื่อตัวแปร --sh-* เองไม่เปลี่ยน มีแต่คลาสที่ห่อมันเปลี่ยน) * 3. ตัด .doc/.toner/.caption ทั้งหมด - เป็น CSS ของหน้าโชว์ mockup เอง ไม่ใช่ของเปลือก * 4. แถบยูทิลิตี้ต่อกับตัวเลือกสีแถบที่มีอยู่แล้ว (ดูหมายเหตุเหนือ --sh-strip ด้านล่าง) * 5. ไม่มีบล็อกโทนอื่น ๆ ([data-tone="olive|teal|light"] ของ mockup) เพราะไม่มีอะไรใน * รุ่นนี้เลือกมันได้ - เก็บไว้ที่ mockup เป็นหลักฐานสถาปัตยกรรม token เท่านั้น * * ข้อ 6 (ช่องค้นหาที่ mockup ไม่มี) อยู่ท้ายไฟล์ เป็นสไตล์ใหม่ล้วน ไม่ใช่การแปลง * * Fix round 1 (หลัง review): เพิ่ม .rxsu-cap-skip (ก่อนหน้านี้ไม่มีสไตล์เลยจึงโผล่เป็น * ตัวหนังสือธรรมดาอยู่เหนือ header ทุกหน้า) และ .rxsu-cap-brand__fallback (โลโก้ว่าง = * ลิงก์ขนาดศูนย์) ตัด .rxsu-cap-body (สวอตช์โชว์ของหน้า mockup เอง หมวดเดียวกับ * .doc/.toner/.caption ที่ข้อ 3 ให้ตัดไปแล้ว) และตัดตัวแปร --sh-page ที่ไม่มีกฎไหนใช้เลย * (ยังไม่เคยผูก body{background} เพราะ a{color:inherit} ของ mockup จะทับสไตล์ลิงก์ของ * เนื้อหาจริงทั้งหน้า - ดูหมายเหตุใน header.php) * * Task 6 (footer): เช่นเดียวกับข้อ 4 ข้างต้น แถบล่างสุดของ footer * (.rxsu-cap-foot__bottom) ต่อกับตัวเลือกสีแถบเดียวกัน - ดูหมายเหตุเหนือ --sh-foot-bottom * ด้านล่าง สองจุดที่ตั้งใจแตกต่างจาก mockup นอกเหนือจากนั้น (grid ของ .rxsu-cap-foot__inner * เหลือ 3 คอลัมน์ไม่เท่ากันแทนที่จะเป็น 4 คอลัมน์เท่ากันบางส่วน และคลาสใหม่ * .rxsu-cap-foot__tagline/.rxsu-cap-foot__line ที่ไม่มีต้นแบบใน mockup) อธิบายไว้ที่ตัวกฎ * เอง ไม่ใช่ตรงนี้ ดูเหตุผลเต็มใน templates/shell/capsule/parts/footer.php * * Task 8 (burger + drawer มือถือ): ไม่มีต้นแบบใน mockup เลย (mockup ไม่มีสถานะมือถือ) * สไตล์ทั้งบล็อก ".rxsu-cap-burger"/".rxsu-cap-drawer" ท้ายไฟล์นี้จึงเป็นของใหม่ล้วน * ไม่ใช่การแปลง ดูเหตุผลเชิงโครงสร้าง ("กางอยู่โดยปริยาย พับด้วยสคริปต์") ที่ตัวบล็อกเอง * และในหมายเหตุหัวไฟล์ templates/shell/capsule/parts/header.php * * 0.27.0 (แก้เจ้าของเว็บไม่ชอบ header เขียวเข้มที่ 0.26.x ส่งไป): tests/shell-capsule- * contrast.php วัดจากไฟล์โลโก้จริง (silapakorn_logo.png, attachment 1310) แล้วพบว่ามัน * เป็น **หมึกเข้มบนพื้นโปร่ง** ไม่ใช่ไฟล์กลับสี - บน #123A2E ส่วนที่มืดที่สุดของตราวัดได้แค่ * 1.92:1 ตราคณะเลยจมหายบนพื้นเข้ม ทางแก้เดียวที่ไม่ต้องรอไฟล์โลโก้ใหม่จากคณะคือทำให้แถว * brand row *สว่าง* แทน - ดู includes/class-rxsu-shell-tone.php สำหรับตัวเลขที่วัดมาและ * เหตุผลเต็ม ค่าเริ่มต้นของ .rxsu-shell-capsule ด้านล่างนี้จึงยกมาจาก mockup ที่อนุมัติแล้ว * บล็อก [data-tone="light"] (--sh-brand/--sh-brand-ink/--sh-rail/--sh-lift/--sh-texture) * โดยตรง ยกเว้น --sh-lead กับ --sh-foot ที่ตั้งใจ "ไม่" ยกมา (mockup เองก็ไม่แตะสองตัวนี้ใน * บล็อก light เหมือนกัน) เพราะกฎออกแบบที่แม่แบบนี้สืบทอดมาบอกว่าเขียวเข้มเป็น "จุดเน้น" ไม่ใช่ * "พื้น" - ปรากฏได้ในที่จำกัด: การ์ดนำของเมกะเมนู (--sh-lead) กับตัวเนื้อ footer (--sh-foot) * * ตั้งใจไม่ยกมาทั้งบล็อก: mockup ออกแบบมาให้พลิกทั้งหน้ารวมถึงแถบยูทิลิตี้พร้อมกัน * (--sh-strip ของ mockup กลายเป็นสีอ่อนในบล็อก light ด้วย) แต่ --sh-strip ของไฟล์นี้ผูกกับ * ตัวเลือกสีแถบของผู้ดูแลอยู่แล้ว (var(--rxsu-bar-surface,...) - ดูหมายเหตุเหนือ --sh-strip * ด้านล่าง) เป็นคนละคำถามกับโทนของเปลือกนี้เลย จึงไม่แตะ --sh-strip/--sh-strip-ink ที่นี่ * ด้วยเหตุผลเดียวกัน --sh-mint/--sh-mint-ink และ --sh-cream/--sh-cream-ink ก็ไม่ยกมาจาก * บล็อก light เช่นกัน: ทั้งคู่เป็นคู่พื้น/หมึกที่ใช้ซ้ำทั้งบนพื้นเข้ม (การ์ดนำ, ปุ่ม footer, * เบอร์โทร footer, แถบยูทิลิตี้) และพื้นสว่าง (badge บนแถว brand) พร้อมกัน mockup พลิกทั้งหน้า * จึงไม่ชนปัญหานี้ แต่เปลือกนี้พื้นเข้มยังอยู่ - ค่าที่ mockup ให้ (มืดลง สำหรับตัวหนังสือ) จะทำ * เบอร์โทร/ปุ่ม CTA บนพื้นเข้มจมหายทันที ค่าทั้งสองคู่นี้จึงคงเดิม (สว่าง สำหรับพื้นเข้ม) * * ผลข้างเคียงหนึ่งจุดจากการเปลี่ยน --sh-brand: .rxsu-cap-drawer เคยใช้ --sh-brand/ * --sh-brand-ink ตัวเดียวกับแถว brand (เพราะทั้งคู่เคยเป็น "การ์ดเขียวเข้ม" แบบเดียวกัน) พอ * --sh-brand สว่างขึ้น drawer จะสว่างตามไปด้วยทั้งที่ไม่มีโลโก้อยู่ข้างในให้ต้องขาว ทำให้ * ตัวหนังสือกลุ่มย่อย (--sh-cream, สว่าง) และเส้นคั่น (--sh-hairline, สว่างโปร่งแสง) ที่ปรับ * มาให้อ่านบนพื้นเข้มกลายเป็นเกือบมองไม่เห็นบนพื้นสว่าง แก้โดยตัด drawer ออกจาก --sh-brand * แล้วผูกกับ --sh-lead แทน (เนื้อหาข้างในไม่มีอะไรต้องแก้เลย - เข้ากับกฎ "จุดเน้นเข้ม" เดียวกับ * การ์ดนำเมกะเมนู, มือถือได้เมนูแบบเดียวกับที่เดสก์ท็อปได้ในการ์ดนำ) burger/nav-rail-hover/ * search-input-focus ที่นั่งอยู่บนแถว brand โดยตรงยังเป็น literal สีขาวโปร่งแสงเดิมจากยุคพื้น * เข้ม - ปรับเป็นสีเข้มโปร่งแสงแทนที่ตัวรูปกฎเอง (ไม่ใช่ผ่านตัวแปรที่ยังต้องใช้พื้นเข้มที่อื่น) * ดูหมายเหตุเหนือกฎแต่ละจุด * * 0.28.0 (สองข้อแก้จากเจ้าของเว็บ หลังดู 0.27.0 บน production): * * ข้อ 1 - header เลิกเป็นแคปซูลลอย: --sh-inset (ระยะร่นจากขอบจอ), --sh-radius-card (มุมโค้ง) * และ --sh-lift (เงาลอย) ทั้งสามลงเป็น 0/none พร้อมกันในบล็อกโทเค็นด้านล่าง - เก็บชื่อตัวแปรไว้ * ทั้งสามตัว ไม่ลบทิ้ง (แบบเดียวกับ --sh-texture:0 ที่ยังเป็นตัวแปรมีชีวิตแม้ค่าจะปิดอยู่) เผื่อ * แม่แบบในอนาคตอยากได้การ์ดโค้งกลับมาก็แก้ค่าเดียวจบ ไม่ต้องตามหากฎที่ใช้มันทุกจุด · การ์ด * header (.rxsu-cap-header) ไม่มี overflow:hidden อีกต่อไป - ค่านั้นมีไว้ตัดมุมโค้งของการ์ดโดย * เฉพาะ (ดู task-5-report.md ของแผน 2026-08-02-shell-template-capsule) พอมุมโค้งหายไป มันไม่มี * อะไรให้ตัดอีกแล้ว และกลับกลายเป็นความเสี่ยงเฉย ๆ : รุ่นก่อนเคยมีเหตุที่ปุ่มค้นหาหลุดขอบการ์ด * ที่ความกว้าง 761-1023px แล้วถูก overflow:hidden ตัดหายไปทั้งปุ่มแบบเงียบ ๆ (แก้แล้วด้วยการ * ย้ายจุดพับ nav rail มาที่ 1023px ใน Task 8 fix round 1) - เก็บ overflow:hidden ไว้ต่อไปจะทำให้ * บั๊กคล้ายกันในอนาคตกลายเป็น "หายเงียบ ๆ" อีกครั้งแทนที่จะเป็น scroll แนวนอนที่อย่างน้อยยังเห็น * ได้ ตัด overflow:hidden ทิ้งจึงถูกต้องกว่าการคงไว้ "เผื่อไว้" · เมกะเมนูกับ drawer ยังคงเป็นพี่ * น้องของ
เหมือนเดิมทุกจุด (ดูเหตุผลเดิมในหัวไฟล์ templates/shell/capsule/parts/ * header.php) - เหตุผลเดิมที่ทำให้ต้องวางแบบนั้น (grid ของแผงกว้างกว่าราง จะดันโครง
  • พัง) * ไม่เกี่ยวกับ overflow:hidden เลย เป็นคนละเหตุผลกัน จึงไม่แตะ header.php ในรอบนี้ - นี่เป็นการ * แก้รูปทรงล้วน ๆ ที่ทำจบในสไตล์ชีตไฟล์เดียว * * ข้อ 2 - footer เลิกเป็นพื้นเขียวเข้ม กลายเป็นพื้นสว่าง ตามหน้าตาที่มีอยู่แล้วจริงในปลั๊กอินนี้ * เอง: includes/class-rxsu-shell-renderer.php + assets/shell-footer.css (ฟุตเตอร์อีกตัวหนึ่ง * ที่แสดงแทน Elementor footer เมื่อ source=plugin - เจ้าของเว็บชี้ตรงไปที่ตัวอย่างนี้ในหน้าจอ * "ตัวอย่างก่อนสลับ" ของแอดมิน) --sh-foot/-ink/-head/-circle ทั้งสี่ตัวด้านล่างเปลี่ยนเป็นค่า * สว่าง คงที่ทุกโทน Shell_Tone (light/sage/olive) ไม่ต่างจากเดิมอีกต่อไป - ตัดออกจากทั้งสอง * บล็อก [data-rxsu-tone] ด้านล่างด้วยเหตุผลเดียวกัน (footer อ้างอิงหน้าตาของ Shell_Renderer ซึ่ง * เป็นดีไซน์ตายตัวหนึ่งเดียว ไม่ใช่ดีไซน์ที่พลิกตามโทนของแถว brand) --sh-lead ข้างบนยังคงแปรผัน * ตามโทนเหมือนเดิม (การ์ดนำเมกะเมนู/drawer ยังเป็น "จุดเน้นเข้ม" อยู่ ไม่ใช่ส่วนที่เจ้าของเว็บชี้) * โทเค็นใหม่ --sh-foot-muted/--sh-foot-tagline/--sh-foot-phone/--sh-foot-hairline เพิ่มเข้ามา * เพราะสีเดิมของ footer ทุกตัวถูกปรับจูนไว้สำหรับพื้นเข้ม (บางจุดใช้ opacity ลดหมึกเข้มลงแทนที่ * จะมีสีของตัวเอง) ย้ายพื้นเป็นสว่างแล้วต้องแทนที่ทุกตัว ไม่ใช่แค่ตัวพื้นหลัง - ดูหมายเหตุเหนือ * แต่ละกฎด้านล่างว่าทำไมค่าที่เลือกถึงเป็นค่านั้น * * 0.29.0 (สามข้อจากรีวิวของเจ้าของเว็บหลังดู 0.28.0 บน production - * .superpowers/sdd/2026-08-02-shell-capsule-polish/task-1-brief.md): * * ข้อ 1 - header กลับมามีรูปทรงแคปซูล (มุมโค้ง + เงาลอย) แต่ยังคงเต็มความกว้างจอเหมือนเดิม * สองเรื่องนี้ไม่ขัดกัน: 0.28.0 ตัด --sh-inset/--sh-radius-card/--sh-lift ลงเป็น 0/none พร้อม * กันทั้งสามตัวเพราะตีความว่าเจ้าของเว็บอยากได้ทรงเหลี่ยมเต็มจอ แต่คำพูดจริงคือ "เอารูป capsule * เต็มความกว้าง ดูสวยงามกว่า" - อยากได้ทั้งความกว้างเต็มจอ *และ* รูปทรงแคปซูลไปพร้อมกัน ไม่ใช่ * เลือกอย่างใดอย่างหนึ่ง --sh-inset ยังคงเป็น 0 เหมือนเดิม (ไม่มีระยะร่นจากขอบจอ) ส่วน * --sh-radius-card/--sh-lift กลับมามีค่าอีกครั้ง (ดูหมายเหตุเหนือทั้งสองตัวด้านล่างสำหรับค่าใหม่ * และเหตุผลเต็ม) แต่ย้ายจาก .rxsu-cap-header ไปที่ .rxsu-cap-brand-row แทน - องค์ประกอบที่ระบาย * พื้นหลังจริงและเป็นขอบล่างสุดที่มองเห็นของการ์ด (แถบยูทิลิตี้เหนือมันไม่มีมุมโค้งเลย จึงไม่มีขอบ * อิสระด้านบนให้ต้องตัดด้วย) มุมโค้งจึงเป็นรูปทรงที่ถูกวาดจริงบนพื้นหลัง ไม่ใช่การ clip ภาพสี่เหลี่ยม * ด้วย overflow:hidden แบบเดิมก่อน 0.28.0 - ความเสี่ยงที่ 0.28.0 ตั้งใจตัด overflow:hidden ทิ้งไป * (ดูหมายเหตุเหนือ .rxsu-cap-header ด้านล่าง) จึงยังไม่ถูกนำกลับมาเลย .rxsu-cap-shell เองก็ได้ * breakout แบบเดียวกับที่ .rxsu-cap-foot ได้ไปแล้วที่ 0.27.0 (เป็นลูกโดยตรงของ เหมือนกัน - * ดูหมายเหตุเหนือ .rxsu-cap-foot ด้านล่าง) พร้อมกับ position:relative และ z-index:900 ใหม่ เพื่อ * รองรับข้อ 3 * * ข้อ 2 - สี hover/open/current ของราง nav ออกแบบใหม่ทั้งชุด (โทเค็นใหม่สี่ตัว --sh-nav-hover/-ink, * --sh-nav-open/-ink แทนที่ rgba(18,58,46,.10) ตอน hover และ --sh-mint ตอนเปิด/current ของ 0.27.0) * ตามคำเจ้าของเว็บ "สี hover ไม่สวยเลย ออกแบบให้สวยกว่านี้" ปุ่มที่เปิดอยู่ตอนนี้ใช้สีเขียวเข้ม * เดียวกับการ์ดนำของแผงที่มันเปิด (--sh-lead) ให้ปุ่มกับแผงอ่านเป็นวัตถุเดียวกัน และมี * :focus-visible ริงเดียวทั้งเปลือกแทน outline ของเบราว์เซอร์ ซึ่งเป็นเส้นแปลกที่เจ้าของเว็บเห็นใน * ภาพหน้าจอ 0.28.0 บนปุ่มพื้นเขียวเข้ม * * ข้อ 3 - แผงเมกะเมนู (.rxsu-cap-panel) เปลี่ยนจากอยู่ใน flow ปกติ (margin-top ดันความสูงของ * .rxsu-cap-shell และทุกอย่างใต้เปลือกลงเมื่อเปิด) เป็น position:absolute วางซ้อนทับเนื้อหาแทน - * "เมนูแสดงควร overlay วางเหนือไม่ใช่ ดัน content" ทำได้เพราะ .rxsu-cap-shell เป็น * position:relative แล้วจากข้อ 1 และแผงยังเป็นพี่น้องของ
    เหมือนเดิมทุกจุด (เหตุผล * โครงสร้างเดิมไม่เปลี่ยน - ดูหมายเหตุหัวไฟล์ templates/shell/capsule/parts/header.php) ไม่มีการ * แก้ JavaScript เลยในรอบนี้ - assets/shell/capsule.js ปิดแผงเมื่อคลิกนอกหรือกด Escape อยู่แล้ว * * 0.29.0 T2 (อีกสองข้อจากรีวิวชุดเดียวกัน - task-2-brief.md) ทั้งคู่เป็นอาการเดียวกันคือ * "เปลือกนี้ไม่ได้อยู่คนเดียวบนหน้า": * * ข้อ 4 - "ตัวอักษรในรูปที่ 7 มันถูกกลืนหายไป": หัวข้อการ์ดนำของเมกะเมนูจมหายบนหน้าข่าว * เพราะ .rxsu-cap-panel__lead ตั้ง color:#fff ที่ตัวมันเอง ส่วน .rxsu-cap-panel__title เป็น *

    ที่ไม่มีสีของตัวเองเลย อาศัยการสืบทอดอย่างเดียว - The7 ประกาศสีหัวข้อไว้ที่ตัว h1..h6 * โดยตรง และการประกาศที่ตัว element ชนะสีที่สืบทอดมาจากบรรพบุรุษเสมอ ไม่ว่ากฎของบรรพบุรุษ * นั้นจะ specific แค่ไหน (บั๊กตัวเดียวกับที่ 0.26.1 แก้ให้ ไปแล้ว แต่ตอนนั้นไม่ได้ครอบ * หัวข้อกับย่อหน้า) ทางแก้คือบล็อก TEXT COLOUR ใต้บล็อก LINKS ด้านล่าง และตามด้วยการยก * component ทุกตัวที่ตั้งใจมีสีของตัวเองขึ้นเป็นสองคลาส - ดูรายการเต็มและตัวเลข specificity * ที่คำนวณไว้ทีละกฎใน .superpowers/sdd/2026-08-02-shell-capsule-polish/task-2-report.md * * ข้อ 5 - "พบมีส่วนเกินในหน้าอื่น ๆ เช่น ข่าวสารตามรูปที่ 6": หน้าข่าวแสดง header ของ The7 * เองและ widget footer ของ The7 เองเพิ่มมาจากของเรา ต้นเหตุคือ Theme_Runtime:: * suppress_elementor_header() คืน template id 0 ให้ทั้งสองตำแหน่ง ซึ่งทำให้ * elementor_theme_do_location() คืน false - และ false คือสัญญาณที่ The7 รอเพื่อวาดเปลือกของ * ตัวเองแทน การปิดตำแหน่งของ Elementor ยังจำเป็นอยู่ (ไม่งั้น header Elementor จริงของคณะจะ * โผล่มาด้วย) แต่ยังไม่พอ - ดูบล็อก "THE THEME'S OWN SHELL" ท้ายหมวด SHELL — header * * 0.29.0 fix round 2 (five-lens adversarial sweep over tasks 1-4, colour half). * ห้าข้อ ทุกข้อมีตัวเลขกำกับที่ tests/shell-capsule-contrast.php คำนวณซ้ำได้เอง: * * ข้อ 6 (สำคัญที่สุด - เป็นข้อที่เจ้าของเว็บขอให้แก้ตั้งแต่แรก) - hover ของราง nav มองแทบ * ไม่ออก ข้อ 2 ข้างบนเปลี่ยนสี hover เป็น --sh-nav-hover #EAF1EC แล้ววัดเทียบ * --sh-nav-hover-ink อย่างเดียว ซึ่งเป็นการวัด "หมึกบนชิป" ไม่ใช่ "ชิปบนพื้นที่มันไปวางอยู่" * ลิงก์ในรางไม่ได้นั่งบน --sh-brand แต่นั่งบน *รางไม่โปร่งใสอีกต่อไป* คือ --sh-rail * rgba(18,58,46,.06) ผสมลงบน --sh-brand แล้ว = (240.78,243.18,242.46) บนโทนปกติ ซึ่ง * #EAF1EC ต่างจากมันแค่ 1.03:1 (sage 1.06:1, olive 1.06:1) - อ่อนกว่า hover เดิมของ 0.27.0 * (rgba(18,58,46,.10) = 1.08:1) ที่มันมาแทนเสียอีก พื้นอ่อนบนรางที่เกือบขาวไปไม่ถึง 3:1 * ด้วยการระบายสีอย่างเดียวไม่ว่าจะเลือกเฉดไหน สถานะจึงต้องมีองค์ประกอบที่วัดได้จริง: * เพิ่มเส้นใต้ inset 2px สีเดียวกับ --sh-nav-open (เขียวเข้มของการ์ดนำ) วัดได้ 11.29:1 * บนโทนปกติ 10.37:1 บน sage และ 10.31:1 บน olive เทียบกับรางที่ผสมแล้ว - ดูหมายเหตุเหนือ * กฎ :hover เองสำหรับเหตุผลที่เลือกเส้นใต้แทนวงแหวนรอบชิป * * ข้อ 7 - ลิงก์ในแถบลิขสิทธิ์ท้าย footer (.rxsu-cap-foot__bottom a) opacity .88 ทำให้ * --sh-foot-bottom-ink จางลงจนตก AA สองโทน: 'logo-teal' 4.43:1 และ 'olive-mid' 4.28:1 * (ต้องการ 4.5:1 ที่ 13.5px/400) ส่วน ลิขสิทธิ์ข้าง ๆ ที่ทึบเต็มร้อยผ่านสบาย * (5.24:1 / 4.98:1) คือครึ่งที่คลิกได้เท่านั้นที่ตก .94 (ค่าเดียวกับ * .rxsu-cap-utility__link พี่น้องของมันที่รอดมาแล้วบนชุดโทนเดียวกัน) ให้ 4.62:1 เป็นค่าต่ำสุด * * ข้อ 8 - ปุ่มค้นหา background:#fff บน --sh-brand #FFFFFF คือสีเดียวกันเป๊ะ ขอบจึงเป็น * ขอบเขตเดียวที่มี และ rgba(18,58,46,.14) ผสมแล้ว = 1.29:1 ต่ำกว่า 3:1 ที่โครงการนี้ * บังคับกับขอบเขตของ UI ปรับเป็น .6 -> 3.76:1 (default) 3.44:1 (sage) 3.42:1 (olive) * (fix round 4 corrected the olive figure: it computes to 3.4249, i.e. 3.42, not * the 3.43 rounds 2 and 3 wrote here and at the rule itself. Same pass, same * conclusion - recorded because a number that cannot be reproduced is a number * the next reader has to re-derive to trust.) * * ข้อ 9 - .rxsu-cap-skip อยู่นอกทั้งสอง root: header.php วาดมันก่อน
    * เปิด มันจึงเป็นพี่น้องของเปลือก ไม่ใช่ลูกหลานของ .rxsu-cap-shell หรือ .rxsu-cap-foot - * ทั้งบล็อก LINKS และ TEXT COLOUR เอื้อมไม่ถึง บนหน้าจริง a{} ของ The7 จึงขีดเส้นใต้ให้ * และ a:focus{color} ของ The7 (0,1,1) ชนะสีของกฎเดิม (0,1,0) พอดี - ซึ่งเป็นสถานะเดียว * ที่ลิงก์นี้มองเห็นได้เลย ดูบล็อกของมันเองด้านล่าง * * ข้อ 10 - .rxsu-cap-search__input เป็นสีข้อความคลาสเดียวที่เหลืออยู่ในทั้งสอง root และ * เป็น element เดียวที่ผู้อ่านพิมพ์ลงไป เพิ่ม `input` เข้าบล็อก TEXT COLOUR แล้วยกกฎนี้เป็น * สองคลาส - ทำทั้งสองอย่าง ไม่ใช่อย่างใดอย่างหนึ่ง ดูเหตุผลที่ตัวกฎเอง * * 0.29.0 fix round 4 (third adversarial sweep, colour + state half). Seven * defects in this file plus one in its test; each is argued at the rule it * changes, and every number below is recomputed by * tests/shell-capsule-contrast.php rather than typed there: * * ข้อ 11 (CRITICAL) - every shell link repaints to The7's blue on HOVER. The * LINKS reset below is (0,1,1), an exact tie with The7's own a:hover, and * capsule.css prints first so The7 wins every tie. This is the 0.26.1 defect * returning in the one state that block never reasoned about. Fixed by a state * rule at (0,1,2) - above The7, below every component that means to keep a * colour - see the LINKS block's own note for why that gap can only be reached * with :where(). The skip link, a third root, gets :active/:visited added to * the states its own block already restates. * * ข้อ 12 - the mega panel's link hover was 1.09:1 with no second indicator: the * owner's original "สี hover ไม่สวยเลย" complaint, unfixed in the place holding * most of the menu's links (fix round 2 hardened only the nav rail). Same * answer in the same visual language - the wash plus a 2px inset rule in * --sh-nav-open, 12.57:1 on the panel ground. * * ข้อ 13 - the expanded search FIELD's border was 2.01:1, the identical defect * fix round 2 fixed on the search BUTTON 36 lines away and left on the control * the reader types into. .35 -> .6, 3.76 / 3.44 / 3.42:1. * * ข้อ 14 - three footer anchors (phone, email, CTA) had no focus indicator at * all. Not a weak one: The7's `a:focus{outline:0}` at (0,1,1) removes the UA * default and this file declared no outline under .rxsu-cap-foot. The footer * now carries the same deliberate :focus-visible treatment as .rxsu-cap-shell * (4.94:1 on the light ground, --sh-cream on the dark copyright strip), and * the comment that asserted the UA default was there is corrected in place. * * ข้อ 15 - the search field's ::placeholder was still The7's, because a * pseudo-element takes no colour from `color:inherit` on its originating * element. Declared in both the standard and -webkit- spellings, 4.53:1. * * ข้อ 16 - the burger had no boundary (1.27:1) and below the rail breakpoint it * is the only route into the menu. An inset 1px ring at the same .6 tint the * two search controls use - inset rather than a border so the 46px the row * arithmetic in three media blocks assumes does not move. * * ข้อ 17 - .rxsu-cap-foot__cta filled with --sh-mint on the light footer at * 1.96:1, the exact ratio the token block already records as why the phone * number stopped using --sh-mint on this same surface. Fixed the same way. * Latent (contact.url is unset on production) but it would render the day an * operator fills the field. * * The eighth defect is in the test, not here: the hover-perceptibility check * read only the trailing colour term of a :hover box-shadow, so `0 0 0 0` - * an indicator that paints nothing - measured 11.29:1. It now requires * non-zero painted extent. */ /* 0.29.0: full-bleed breakout, same treatment .rxsu-cap-foot already got at 0.27.0 (see that rule's own comment further down this file) and for the identical reason - .rxsu-cap-shell is a direct child of too, and --sh-inset:0 alone only removes this file's own inset, not any padding or centred max-width a real page's own container still supplies. margin-left/ right: calc(50% - 50vw) is the standard breakout: it reaches past that ancestor without needing to know its exact width. Fix round 1 (0.29.0 T1 review) corrected an overstatement just below - see .rxsu-cap-foot's own comment further down this file for the exact arithmetic; the short version is that this overshoots the visible viewport by half the scrollbar's own width, not by zero, but still by half of what width:100vw alone would (no compensating negative margin at all). .rxsu-cap-foot has shipped the identical technique on this exact property since 0.27.0 with no reported scrollbar regression, so this introduces no new one. position:relative + z-index:900: this element is now the positioning context for the mega panel (.rxsu-cap-panel, position:absolute - see that rule further down) - without it, the panel's position:absolute would resolve against a more distant ancestor instead of sitting flush under this header. The z-index is what then lifts that panel above page content printed below the shell rather than sliding behind it. 0.32.1: that value was 900, and "page content in normal flow carries no z-index of its own to contest it" - the sentence that used to stand here - was wrong about this plugin's own pages. assets/degree-program-public.css gives the degree programme's sticky section tabs `position:sticky; z-index:900`, the identical value, twice (the base rule and the >=60rem override). Equal z-index resolves by document order, and every page's content lives inside The7's #page, which print_header() emits the shell BEFORE - so the tab bar won, and the owner reported it painting straight through an open mega panel on the หลักสูตรเภสัชศาสตรบัณฑิต page. Raising the shell is the correct half of the fix rather than lowering the tabs: the shell is site chrome and must outrank anything a page draws, whichever page it is. 9990 clears every z-index this plugin's own stylesheets assign (tests/shell-capsule-contrast.php parses them all and asserts this rule outranks the highest, so the next page component to claim a big number fails the suite instead of the header), while staying under WordPress's own admin bar at 99999 - an editor previewing the site must not have the shell paint over their toolbar. .rxsu-cap-skip is a sibling printed BEFORE this element and has to stay reachable above it, so it moves in step; see its own rule. */ .rxsu-cap-shell{ position:relative;z-index:9990; padding:0 var(--sh-inset); margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); } /* ══════════════════════════════════════════════════════════════════════════ LINKS — base reset, both shell roots (0.26.1 fix) The approved mockup carried its own `a{color:inherit;text-decoration:none}`, but it sat at the page level, outside the shell block - and was correctly stripped as mockup chrome when this file was extracted (see the docblock above, item 3's neighbour on --sh-page). Nothing replaced it. On the harness page, which loads no other stylesheet, that absence was invisible: with no competing `a` rule at all, the browser had nothing to fall back to but the inherited colour and the UA default of no underline-until-hover this file already draws. On a real page The7 ships its own `a{color:...; text-decoration:underline}` - a rule declared directly on the element, which wins over a colour merely inherited from a styled ancestor (.rxsu-cap-utility, .rxsu-cap-foot, .rxsu-cap-drawer, .rxsu-cap-brand-row all set `color` on themselves, not on the anchors inside them) regardless of that rule's own specificity. Measured on production 2026-08-02: every shell link underlined, several rendering The7's link blue instead of the shell's own ink - the handful of links that already state their own `color` directly on the anchor (.rxsu-cap-nav__link, .rxsu-cap-foot__phone) already won that fight against The7 and were only ever wrong on the underline there. Scoped to both shell roots - .rxsu-cap-shell (header, utility strip, nav rail, mega panel, mobile drawer) and .rxsu-cap-foot (footer: a separate root, never a descendant of .rxsu-cap-shell - see templates/shell/capsule/ parts/footer.php, printed on its own hook) - rather than repeated at the page level like the mockup, so it cannot leak into page content the way item 3 above already flagged as unsafe. `color:inherit` hands colour back to each component rule below - most already say `color:inherit` or a token explicitly. `text-decoration:none` is the property nothing here ever restated once the mockup's page-level rule was gone. But this reset is itself a same-file, later, direct rule on the anchor (one class plus the `a` type = (0,1,1)), so it competes on ordinary specificity with every other rule in this file the same way it competes with The7 - including .rxsu-cap-foot__phone's own one-class rule, which already beat The7's lower-specificity rule but would have quietly lost to *this* one and been re-broken by the very fix meant to save it. Five components named in the 0.26.1 report deliberately want a colour other than inherit: the mint phone, the mint CTA, the cream pill, the active nav pill, and the unreachable-today "ดูหลักสูตรทั้งหมด →" more-link. Auditing every `color:` declaration in this file against both roots' specificity turned up a sixth in the same shape that the report's live measurement could not have caught, because it does not render on production yet (.rxsu-cap-foot__cta - contact.url is still unset, see footer.php's docblock). All but the active nav pill (already safe: its `[aria-current]` attribute makes it two classes on its own) are bumped to two classes below so each keeps outranking this reset rather than depending on source order (the same reasoning as the three-class rule on .rxsu-cap-js .rxsu-cap-drawer.is-open further down this file). tests/shell-capsule-contrast.php's check 6 pins the reset itself under both roots. 0.29.0 fix round 4 (defect 1, CRITICAL - the 0.26.1 defect returning in the hover state). Everything above reasons about The7's `a{...}` at (0,0,1), which this reset outranks. It never reasoned about The7's STATE rules, and those are a different fight: dt-custom.css ships `a:hover{color:var(--the7-links-hover-color,var(--the7-links-color))}` at (0,1,1) - the identical specificity to this reset's own `.rxsu-cap-shell a` (one class plus the `a` type). An exact tie is decided by source order, capsule.css is enqueued at wp_enqueue_scripts priority 5 and therefore prints BEFORE The7's stylesheets, so The7 wins every tie. Measured consequence: every shell anchor whose colour comes only from this reset repainted #1ebbf0 the moment a reader pointed at it - the utility strip's links, the drawer's whole menu, the mega panel's link columns, the footer's email line and copyright links, the four social marks' text fallback. The resting state was fixed at 0.26.1; the hover state was never looked at. The state rule below is the fix, and its specificity is the whole design: (0,1,2) - one class-column entry (the state pseudo-class) and two type-column entries (`body` and `a`). It therefore · BEATS The7's a:hover/a:focus at (0,1,1) without !important and without depending on source order, and · LOSES to every two-class component rule at (0,2,0) or (0,2,1) that deliberately declares a colour of its own - the cream pill, the mint CTA, the accent more-link, the mint phone, the footer CTA, the nav rail's own hover ink, the language switch's current chip, the mega panel's current link and TikTok's white mark. Those all keep painting exactly what they paint today; a rule at .rxsu-cap-shell a:hover, the obvious spelling, would be (0,2,1) and would have flattened all nine of them to `inherit` on hover - white ink on a mint pill, dark ink on a green CTA. Nothing between (0,1,1) and (0,2,0) can be reached with the shell root spelled as a plain class, since the class column is already spent on the state pseudo-class. :where() is what frees it: its argument contributes zero specificity by definition, so the root still SCOPES the rule (this never leaks to page content, the same constraint the reset itself is scoped under) while contributing nothing to the arithmetic, and `body` - an element that is always there and always an ancestor - supplies the second type-column entry. The eight selectors are written out one root at a time rather than as :where(.rxsu-cap-shell,.rxsu-cap-foot): a comma inside a functional pseudo-class is not a selector-list boundary, and the rule-splitting in tests/shell-capsule-contrast.php (and in tests/shell-capsule-js.js) splits on commas. text-decoration is restated for the same reason it is in the reset: The7 declares `a{text-decoration:underline}` on the element, and nothing guarantees a theme leaves the state alone. The two places in this file that deliberately DO underline on hover (.rxsu-cap-foot li a:hover and .rxsu-cap-foot__bottom a:hover, (0,2,2) and (0,2,1)) both outrank this rule and are unaffected - verified numerically, not assumed, in check 14. The skip link is outside both roots and gets the same treatment in its own block above; check 14 pins the whole specificity ordering. ══════════════════════════════════════════════════════════════════════════ */ .rxsu-cap-shell a, .rxsu-cap-foot a{color:inherit;text-decoration:none} body:where(.rxsu-shell-capsule) :where(.rxsu-cap-shell) a:hover, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-shell) a:focus, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-shell) a:active, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-shell) a:visited, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-foot) a:hover, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-foot) a:focus, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-foot) a:active, body:where(.rxsu-shell-capsule) :where(.rxsu-cap-foot) a:visited{color:inherit;text-decoration:none} /* ══════════════════════════════════════════════════════════════════════════ TEXT COLOUR — the same defect the LINKS block above documents, for every other element that carries text. (0.29.0 T2) The7 declares heading colours directly on h1..h6. A declaration on the element beats a colour merely inherited from a styled ancestor, whatever the ancestor rule's own specificity - so .rxsu-cap-panel__lead{color:#fff} did not reach its own

    , and on the news page (measured 2026-08-02) the mega panel's lead heading rendered The7's dark ink on the lead card's dark green and disappeared. The homepage did not show it, which is exactly why it survived three releases: the harness page loads no other stylesheet and the homepage's own kit happens not to set it. Rooted at both shell roots and scoped to the tags the shell actually renders, so it cannot reach page content. Placed here, before every component rule, and every component that wants a colour of its own is bumped to two classes below - the same discipline the LINKS block uses, for the same reason: source order is not a specificity argument. `button` is named under .rxsu-cap-shell only: footer.php renders no button at all (its CTA and its social links are anchors, already covered by the LINKS reset above), so naming one there would reset an element that does not exist. No
    is named under either root, which is why .rxsu-cap-utility and .rxsu-cap-foot__bottom - the two
    s in this file that set a colour - keep their one-class rules untouched; adding `div` here later means revisiting both, and tests/shell-capsule-contrast.php's check 9 pins them so that is a deliberate act rather than an accident. 0.29.0 fix round 2 (defect 10): `input` joins the list, also under .rxsu-cap-shell only - header.php renders exactly one (the search field, ) and footer.php renders no form at all. It was the last text-bearing tag the shell prints that this reset did not name, and the one element a visitor types their own words into: The7 styles form controls directly on the element the same way it styles headings, so an with no rule of its own is an The7 owns. Both halves of the fix were applied rather than either alone (the sweep offered a choice): naming the tag here is what protects the *next* input somebody adds, and bumping .rxsu-cap-search__input to two classes below - it declares #0F3A30, a colour it means to keep - is what stops this very reset from flattening the only input that exists today. Doing just the bump would leave a future field to The7; doing just the reset would silently grey out the search field's own ink the moment this line shipped. ══════════════════════════════════════════════════════════════════════════ */ .rxsu-cap-shell h1,.rxsu-cap-shell h2,.rxsu-cap-shell h3,.rxsu-cap-shell h4, .rxsu-cap-shell p,.rxsu-cap-shell span,.rxsu-cap-shell li,.rxsu-cap-shell button, .rxsu-cap-shell input, .rxsu-cap-foot h1,.rxsu-cap-foot h2,.rxsu-cap-foot h3,.rxsu-cap-foot h4, .rxsu-cap-foot p,.rxsu-cap-foot span,.rxsu-cap-foot li{color:inherit} /* ══════════════════════════════════════════════════════════════════════════ ลิงก์ข้าม — mockup ไม่มีสถานะนี้เลยเพราะเป็นภาพนิ่ง ไม่มีคีย์บอร์ดมากด Tab จึงไม่มี CSS ต้นแบบให้แปลง สไตล์ทั้งบล็อกนี้จึงเป็นของใหม่ล้วน: ซ่อนอยู่นอกจอจนกว่าจะโฟกัส ด้วยคีย์บอร์ด แล้วเลื่อนเข้ามาในจอ - ไม่ใช่ opacity:0 เพราะแบบนั้นยังกินพื้นที่และยัง ถูกอ่านเป็นข้อความว่างที่มองไม่เห็นอยู่เหนือ header ตามที่ review รอบแรกจับได้ 0.29.0 fix round 2 (defect 9) — this link is a third root, and always was. header.php prints BEFORE
    opens, so it is the shell's SIBLING and a descendant of neither .rxsu-cap-shell nor .rxsu-cap-foot. Every reset this file has added since 0.26.1 is rooted at one of those two, so none of them ever reached it: · the LINKS reset (`.rxsu-cap-shell a,.rxsu-cap-foot a`) never applied, so nothing here restated `text-decoration:none` and The7's own `a{text-decoration:underline}` - a declaration on the element - drew the underline the LINKS block exists to remove; · the rule below used to be a bare `.rxsu-cap-skip` at (0,1,0), which does outrank The7's `a{color}` at (0,0,1) but LOSES to The7's `a:focus{color}` and `a:hover{color}` at (0,1,1) - and :focus is the only state in which this link is ever visible at all, so the losing case was the only case; · `.rxsu-cap-shell :focus-visible` (the one shared ring, further down) could not reach it either, leaving the UA default outline this release replaced everywhere else. All three are fixed by rooting the block at .rxsu-shell-capsule - a body class, and the skip link is a body descendant, so it reaches where the two shell roots cannot. (0,2,0) for the resting rule and (0,3,0) for the state rules, which beats The7's (0,1,1) on both without needing !important. The state rules restate the resting colours rather than saying `color:inherit` because there is nothing sane to inherit from here: the parent is . outline-offset is NEGATIVE, unlike the shell's own ring. This link sits at top:0 left:0 of the initial containing block, i.e. laid over the utility strip, whose surface is the operator's dark bar tone. A ring drawn 2px OUTSIDE the link would land dark green (--sh-nav-open) on that dark strip and be no ring at all; drawn inside, its backdrop is the link's own --sh-brand, the identical pair check 8 already measures for the shell ring (12.57:1 default, 11.52:1 sage, 11.45:1 olive - all far over the 3:1 floor). ══════════════════════════════════════════════════════════════════════════ */ .rxsu-shell-capsule .rxsu-cap-skip{ /* 0.32.1: 1000 -> 9995, moved in step with .rxsu-cap-shell's own raise to * 9990 (see that rule for why it had to go up). This link is a SIBLING * printed before the shell, so at equal or lower z-index the shell would * paint over it and the first thing a keyboard user reaches on every page * would be invisible - the exact regression the raise would otherwise have * introduced. Stays 5 under the shell's own headroom and far under the * admin bar's 99999. */ position:absolute;top:0;left:0;z-index:9995; transform:translateY(-120%); /* 0.27.0: color tracks --sh-brand-ink now, not a hardcoded #fff - the * skip link shares the brand row's own surface, and a light brand row * with white text would be invisible white-on-white. */ background:var(--sh-brand,#FFFFFF);color:var(--sh-brand-ink,#1D2B24); text-decoration:none; padding:12px 22px;border-radius:0 0 14px 0; font-weight:700;font-size:14px; transition:transform .15s ease; } /* 0.29.0 fix round 4 (defect 1): :active and :visited join the list. The three states above were the ones defect 9 named, because :focus is the only state in which this link is visible at all - but a link that has been followed is :visited for the rest of the session, and the pointer states overlap with it, so The7's `a:visited`/`a:active` would own the colour in exactly the moment the link IS on screen. Same states, same declarations, as the shell-wide state rule under the LINKS block below; this block has to state them separately because the skip link is a sibling of both shell roots and nothing rooted at either can reach it. (0,3,0) here, so it stays far above The7's (0,1,1) with room to spare. */ .rxsu-shell-capsule .rxsu-cap-skip:hover, .rxsu-shell-capsule .rxsu-cap-skip:focus, .rxsu-shell-capsule .rxsu-cap-skip:focus-visible, .rxsu-shell-capsule .rxsu-cap-skip:active, .rxsu-shell-capsule .rxsu-cap-skip:visited{ background:var(--sh-brand,#FFFFFF);color:var(--sh-brand-ink,#1D2B24); text-decoration:none; } .rxsu-shell-capsule .rxsu-cap-skip:focus{transform:translateY(0)} .rxsu-shell-capsule .rxsu-cap-skip:focus-visible{ outline:2px solid var(--sh-nav-open,#123A2E);outline-offset:-2px; } /* ══════════════════════════════════════════════════════════════════════════ TOKENS — ย้ายจาก :root มาอยู่ใต้ body class ของแม่แบบนี้โดยเฉพาะ (ดูข้อ 2 ด้านบน) ══════════════════════════════════════════════════════════════════════════ */ .rxsu-shell-capsule{ /* การ์ด header: แถบยูทิลิตี้บนแถว brand */ /* แถบยูทิลิตี้และแถบลิขสิทธิ์ท้าย footer อ่านค่าจากตัวเลือกสีแถบเดียวกับที่หน้าจอ * "เปลือกเว็บไซต์" แท็บ Header คุมอยู่แล้ว (shell_bar_tone) ผ่าน * Header_Menu_Runtime::bar_tone_css() ซึ่งปล่อย --rxsu-bar-surface และ * --rxsu-bar-ink ออกมาทุกหน้าอยู่แล้ว ไม่ใช่ค่าคงที่ - นี่คือสิ่งเดียวที่ทำให้ผู้ดูแล * ปรับสีแถบของเปลือกใหม่ได้ตั้งแต่รุ่นแรกโดยไม่ต้องมีตัวควบคุมใหม่เลย ค่า fallback * คือค่าที่ live อยู่จริงบน production ณ 2026-08-02 (โทน sage: * includes/class-rxsu-home-page-schema.php::bar_tones()['sage']) เผื่อกรณีที่ * bar_tone_css() ยังไม่ได้พิมพ์ตัวแปรออกมา (เช่น ค่า tone ที่เก็บไว้ไม่อยู่ในชุดปิด) */ --sh-strip: var(--rxsu-bar-surface, #5B6752); --sh-strip-ink: var(--rxsu-bar-ink, #FBFCF9); /* 0.27.0: light by default - the faculty seal is dark ink on transparency, * and only a light brand row keeps its darkest strokes above 3:1 (measured * in Shell_Tone::LOGO_INK_DARKEST). See this file's own docblock above. */ --sh-brand:#FFFFFF; /* brand row */ --sh-brand-ink:#1D2B24; /* Action + identity * 0.27.0: kept exactly as before, not lifted from the mockup's light block. * Both pairs render on the header's always-dark utility strip AND on the * always-dark lead card/footer (phone, CTA, social hover) at the same * time as on the now-light brand row - a self-contained bg/ink pill that * already reads fine as a colour accent regardless of what sits behind * it. The mockup's light-tone values are tuned for text, not an accent * chip, and would sink the footer phone number to unreadable on its own * dark background. See this file's own docblock above. */ --sh-mint:#35C79B; /* active pill, phone, CTA */ --sh-mint-ink:#04281F; --sh-cream:#DEE1B0; /* E-donation pill, dash accent - dark-surface only */ --sh-cream-ink:#33361A; --sh-olive:#A9AE4E; /* Mega panel */ --sh-panel:#FFFFFF; --sh-panel-ink:#22302A; --sh-panel-muted:#6A7A70; --sh-panel-active:#E7F6EF; /* The lead card, the drawer (via .rxsu-cap-drawer below - decoupled from * --sh-brand for exactly this reason) and the footer just below are the * "small number of deliberate places" dark green still anchors. */ --sh-lead:#123A2E; /* 0.69.0 - scrim behind the mobile drawer. Not a new colour: 18,58,46 is the rgb of * --sh-lead on the line above, which this file already spells as a literal in three * places at three opacities (--sh-rail .06, the burger's ground .13, the burger's * inset edge .6). It has to be a *token* rather than a fourth literal because it is a * surface that must move with Shell_Tone exactly as --sh-lead does - see both * [data-rxsu-tone] blocks below. .55 sits between the two scrims this plugin already * ships: 42% in assets/global-header-unity.css:1238 (the owned menu layer) and .92 in * assets/lightbox.css (which deliberately swallows the page). The drawer wants the * middle: enough to stop you reading the page behind it, not so much that the page * stops existing. */ --sh-scrim:rgba(18,58,46,.55); /* Footer - 0.28.0: light ground now, matching includes/class-rxsu-shell-renderer.php's * own footer (assets/shell-footer.css) - the "real renderer" the owner pointed at in * the admin screen's own preview panel. Constant across every Shell_Tone from here on * (removed from both [data-rxsu-tone] override blocks below); --sh-lead just above is * the one dark anchor still varying per tone. var(--rxsu-home-soft, #F3F6EF) is the * exact pattern shell-footer.css itself uses for its ground, not a fabricated new * fallback - assets/managed-shell.css and assets/home-page.css both already declare * --rxsu-home-soft:#F3F6EF on :root, so this renders identically to them wherever * either has loaded, and the literal fallback is the same #F3F6EF either way when * neither has. */ --sh-foot: var(--rxsu-home-soft, #F3F6EF); --sh-foot-ink:#2C3A2B; /* shell-footer.css's own body ink */ --sh-foot-head:#2C3A2B; /* same as ink - shell-footer.css does not give headings a distinct accent hue on the light ground */ --sh-foot-circle:#FBFCF9; /* social icon/fallback circle - shell-footer.css's own near-white */ /* New tokens: the footer's own text roles this file did not previously need, because * every one of them either assumed a dark ground (a literal white-ish colour, or * opacity dimming a light ink toward a dark background) or borrowed --sh-mint as a * bare text colour rather than a self-contained bg/ink chip - see the notes on each * consumer further down this file for why each one specifically breaks on a light * ground and what replaces it. */ --sh-foot-muted:#5F6B5C; /* address/email - shell-footer.css's own muted paragraph colour */ --sh-foot-tagline:#007C72; /* shell-footer.css's own tagline colour, literal-for-literal */ --sh-foot-phone:#00795D; /* not --sh-mint (1.96:1 here, see below) - reuses the literal this file already trusts for an accent link on a light surface (.rxsu-cap-group__more, on the white mega-panel) */ --sh-foot-hairline:#D3DDCF; /* shell-footer.css's own hairline - concrete, not translucent white; --sh-hairline below stays reserved for the still-dark drawer */ /* Task 6: the copyright strip reads the same bar-tone choice as the utility * strip at the top of the header (--sh-strip above) - one decision since * 0.25.12, and the "เปลือกเว็บไซต์" admin screen tells the operator exactly * that. A constant here would make that description a lie the moment capsule * shipped. Same fallback value as --sh-strip's sibling for the same reason: * it is the tone live on production on 2026-08-02, not a made-up default. */ --sh-foot-bottom: var(--rxsu-bar-surface, #0B2E26); /* Task 7 (tests/shell-capsule-contrast.php) found that only the background * above had been wired to the operator's choice - the text was still * inheriting the constant --sh-foot-ink from .rxsu-cap-foot, unchanged by * whichever tone was selected. Two of the eight selectable tones fail AA * against that constant: logo-teal measured 4.25:1 and olive-mid 4.04:1, * both below the 4.5:1 floor, on the strip carrying the copyright and * privacy-policy links. This is the same bug class the old shell shipped * once already (see tests/shell-bar-contrast.php's note on 0.25.14 and * --rxsu-footer-on-primary) - a surface reads the shared tone but its text * does not, so the pairing that actually renders was never the one that got * checked. The fallback stays #DCE7E1, so an install with no tone chosen * yet renders exactly what it rendered before this fix. */ --sh-foot-bottom-ink: var(--rxsu-bar-ink, #DCE7E1); /* Shape + rhythm */ /* 0.28.0 dropped this to 0 - the owner asked for a full-width, square header, not a floating capsule - kept as a live token even at 0 (not deleted), same as --sh-texture:0 below, so a future skin could reintroduce a rounded card by changing one value instead of hunting down every consumer. 0.29.0: that "future skin" is this release - the owner's actual request was full width *and* a capsule shape together ("เอารูป capsule เต็มความกว้าง ดูสวยงามกว่า" - see this file's own 0.29.0 docblock note above), not a trade-off between the two. Bottom-only radius, not all four corners: the shape now paints on .rxsu-cap-brand-row (see that rule below), whose only free edge is the bottom one - the utility strip above it has no rounded corner of its own to match. */ --sh-radius-card:0 0 22px 22px; --sh-radius-panel:24px; --sh-radius-lead:18px; --sh-inset:0; /* 0.28.0: no inset from the page edges either - see --sh-radius-card just above */ /* 0.27.0: dark-tinted now, not white - the nav rail track sits directly on * the (now light) brand row and a white overlay on a white surface does * not render. --sh-hairline stays untouched: its two consumers * (.rxsu-cap-foot__bottom's border and, since the drawer/brand decoupling * below, .rxsu-cap-drawer__top's border) are both still dark surfaces. */ --sh-rail:rgba(18,58,46,.06); /* 0.29.0: nav-rail hover/open states, redesigned from scratch per the owner's "สี hover ไม่สวยเลย" - replaces the flat rgba(18,58,46,.10) hover and the --sh-mint open/current treatment 0.27.0 used, both restated directly on the consumer rules below rather than through a token at the time. See the rules under "brand row" further down for the fuller account of why each specific value was chosen and what it replaces. 0.29.0 fix round 2 (defect 6): --sh-nav-hover is now only HALF the hover state and no longer carries it on its own - the wash measures 1.03:1 against the composited rail track it lands on, and cannot do better while staying a light wash. The state's contrast comes from a 2px inset bottom rule in --sh-nav-open declared on the :hover rule itself, not from a fifth token: the whole point of that indicator is that it is the open state's own colour, so giving it a name of its own would let the two drift apart. */ --sh-nav-hover:#EAF1EC; /* soft sage wash — half of the rail's hover, the half with no contrast of its own */ --sh-nav-hover-ink:#123A2E; --sh-nav-open:#123A2E; /* an open trigger takes the lead card's own green, so the button and the panel it opened read as one object */ --sh-nav-open-ink:#FFFFFF; --sh-hairline:rgba(255,255,255,.14); --sh-nav-size:1.0625rem; /* = menu_density "โปร่ง", the live setting */ /* 0.29.0 fix round 1 (five-lens sweep, defect 1): the brand mark's size is a token now, because it is the one thing in the brand row that can give way when the row runs out of width. It used to be a literal `height:52px` on the with no max-width at all, which made the logo's full rendered width (284.7px on the real file, attachment 1310, intrinsic 2557x467) the hard floor of the whole row - see the note over .rxsu-cap-brand img below for what that cost on a phone. The two narrow tiers at the end of this file step it down (44px, then 36px) rather than restating a literal height in three places. */ --sh-logo-h:52px; /* 0.29.0 fix round 5 (defect 1): --sh-logo-h says how tall the mark WANTS to be; this says how small it is allowed to get before the row has to admit it is out of room. Expressed as a fraction of --sh-logo-h rather than a px floor of its own, so the three tiers keep their one source of truth: the floor is .72 x 52 = 37.4px at full size, .72 x 44 = 31.7 compact, .72 x 36 = 25.9 on a phone. Fix round 1 gave the mark constraint-based sizing with no lower bound at all, which turned every remaining source of pressure into a silent squeeze: chrome-headless-shell measured the mark at 41.6x7.6 (21% of the 36px this file intends) with documentElement.scrollWidth == clientWidth, i.e. the page reported itself as fitting perfectly while the faculty's logo had become a dash. Eighty-four of the 228 configurations in fix round 5's matrix rendered under 60% of the intended height and not one of them overflowed. The floor converts that failure mode into the other one: past this point the row stops giving and the page gets a horizontal scrollbar instead - a signal an operator can see and act on, which a 4px logo is not. .72 rather than a rounder number: it is the largest floor that still never binds in any configuration this site can actually reach at rest (the tightest is 320px, where the mark settles at 92% on its own), so the floor only ever engages in the configurations the fix round 5 matrix names as pathological - a seven-item menu on a narrow desktop, or a rail that has outgrown its tier. See .rxsu-cap-brand--mark below for how the fraction becomes a width, and why the aspect ratio it needs comes from the template rather than from this file. */ --sh-logo-min:.72; /* 0.28.0 dropped this to none - flush with the page, matching the footer's own full-bleed treatment from 0.27.0. 0.29.0: restored alongside --sh-radius-card above, and reassigned together with it to whichever element actually paints the rounded shape (.rxsu-cap-brand-row now, not .rxsu-cap-header - see that rule below) so the shadow follows the rounded bottom edge instead of implying a square card sits behind it. */ --sh-lift:0 16px 34px -26px rgba(6,32,24,.45); --sh-texture:0; /* diagonal stripe strength - off on a light header */ } /* ══════════════════════════════════════════════════════════════════════════ TONE OVERRIDES — Shell_Tone::SAGE / Shell_Tone::OLIVE (0.27.0) Only the header's brand row and the dark anchors (lead card, drawer, footer) vary per tone - the same set the docblock above explains for the default. --sh-strip/--sh-strip-ink (operator's own bar-tone pick), --sh-mint/--sh-cream and their inks (self-contained accent pairs already safe on any surface - see the comments above them) and --sh-rail/ --sh-hairline/--sh-lift/--sh-texture (translucent overlays that do not need to track the tone's exact hue) stay the shared defaults for every tone, so they are not restated here. Every --sh-brand below clears 3:1 against the logo's own darkest ink (Shell_Tone::LOGO_INK_DARKEST) - tests/shell-capsule-contrast.php checks both blocks by name, the same rule check 5 applies to the default above. The attribute lands on (document.documentElement), printed by Theme_Runtime::print_capsule_boot_class() on wp_head - see that method's docblock for why it cannot be the body tag or a footer-enqueued script. .rxsu-shell-capsule itself is a body class, so the selector below reaches across that ancestor gap rather than expecting the attribute on the same element - a rule declared this way still outranks the plain .rxsu-shell-capsule block above on specificity alone (0,2,0 vs 0,1,0), regardless of source order. 0.28.0: --sh-foot/--sh-foot-ink/--sh-foot-head/--sh-foot-circle used to be restated here alongside --sh-lead, back when the footer was one more dark anchor that moved with the tone. The footer is a single fixed light design now (see the token block's own 0.28.0 note above), so these two blocks only still override --sh-brand/-ink (the header) and --sh-lead (the mega-panel lead card and, via the decoupling noted above, the mobile drawer) - the parts that are still deliberately dark and still vary by tone. tests/shell-capsule-contrast.php's check 5 asserts these four tokens are absent from both blocks below, so nobody re-couples the footer to the tone picker by habit. */ [data-rxsu-tone="sage"] .rxsu-shell-capsule{ --sh-brand:#F3F6EF; --sh-brand-ink:#1F2B22; --sh-lead:#22352A; /* 0.69.0 - the rgb of this tone's own --sh-lead directly above, at the same .55. * Left out, the scrim would stay the default tone's green on a sage site. */ --sh-scrim:rgba(34,53,42,.55); } [data-rxsu-tone="olive"] .rxsu-shell-capsule{ --sh-brand:#F6F5E7; --sh-brand-ink:#2A2A12; --sh-lead:#333819; --sh-scrim:rgba(51,56,25,.55); } /* ══════════════════════════════════════════════════════════════════════════ SHELL — header ══════════════════════════════════════════════════════════════════════════ */ /* 0.28.0: overflow:hidden removed - it existed solely to clip this card's rounded corners (see the token block's 0.28.0 note above), and with --sh-radius-card at 0 there is nothing left for it to clip. Kept, it would only be a hazard: a prior release already lost the search button to it silently at 761-1023px before the nav-rail breakpoint was corrected to 1023px (Task 8 fix round 1). Without it, any future overflow at least shows up as a visible horizontal scrollbar instead of vanishing content. 0.29.0: --sh-radius-card/--sh-lift are live again (see the token block's 0.29.0 note above), but that rounded shape now paints on .rxsu-cap-brand-row below, not here - .rxsu-cap-header itself carries neither border-radius nor box-shadow any more, so it still has nothing of its own for overflow:hidden to protect and the 0.28.0 reasoning above stands unchanged. position:relative stays for the texture pseudo-element just below (position:absolute;inset:0 relative to this element) - it is not what positions the mega panel or the drawer: those are this element's siblings inside .rxsu-cap-shell, not its descendants (see header.php's own docblock for why), and .rxsu-cap-shell itself took over that positioning-context role at 0.29.0 (see its own rule near the top of this file). */ .rxsu-cap-header{position:relative} /* The diagonal texture. One gradient, no image, and it disappears entirely on the light tone because --sh-texture goes to 0. */ .rxsu-cap-header::before,.rxsu-cap-foot::before{ content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,var(--sh-texture)) 0 2px,transparent 2px 9px); } /* ── utility strip ─────────────────────────────────────────────────────── */ /* 0.29.0 fix round 1 (five-lens sweep, defect 5): flex-wrap:wrap, and the gap split into a row gap and a column gap. The strip is one nowrap flex row of two children - the motto and the actions - and neither can shrink below its own min-content width. On a phone the actions win that fight (they are a pill, plus the TH/EN switch, both effectively rigid) and the motto is what collapses. Measured against the real tagline "เรียนรู้ไปด้วยกัน เติบโตไปด้วยกัน": at 320px the motto box was 71.8px wide and 136px tall - eight lines of two or three syllables - and the strip grew from 54px to 158px, nearly three times its height, spent on a sliver nobody can read comfortably. At 360px it was 79.3x102 (six lines, strip 124px) and even at 480px it was still 199.3x34 (two lines). Wrapping rather than hiding the motto below a breakpoint, which was the other option: the tagline is the operator's own copy, entered in the "เปลือกเว็บไซต์" screen, and a phone is where most of this site's readers see the header at all - dropping it there means most readers never see it. Wrapped, it keeps a full line of its own (216.7x17 at every width where it wraps, i.e. one line, the same box it has on a desktop) and the actions take the next one. Measured strip height: 320px 158 -> 81, 360px 124 -> 81, 390px 73 -> 81, 414px and 480px 70 -> 81, and 54px unchanged at 600px and up where nothing wraps at all. The 11px the strip gains at 390-480 is the honest cost of this choice and is bought back several times over at 320-360; what it buys at every one of those widths is one readable line instead of two to eight unreadable ones. The horizontal gap is unchanged at 24px, so no wide layout moves; 10px is the new row gap, which only ever applies once a wrap has happened. The narrow padding lives in the same @media (max-width:480px) block as the brand row's, at the end of this file. */ .rxsu-cap-utility{ position:relative;background:var(--sh-strip);color:var(--sh-strip-ink); display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:10px 24px; padding:11px 26px;font-size:13.5px; } .rxsu-cap-motto{display:flex;align-items:center;gap:11px;margin:0;font-weight:500} .rxsu-cap-dash{width:26px;height:7px;border-radius:999px;background:var(--sh-cream);opacity:.85;flex:none} .rxsu-cap-utility__actions{display:flex;align-items:center;gap:26px} .rxsu-cap-utility__link{opacity:.94;padding:4px 0;border-bottom:1px solid transparent} .rxsu-cap-utility__link:hover{border-bottom-color:currentColor} /* Two classes (ancestor + own), not one: the emphasised pill sits on cream, not the strip's own ink, and the base link reset above (.rxsu-cap-shell a, one class + the `a` type) would otherwise win that fight and flatten it back to inherit - 0.26.1 fix, see the LINKS docblock near the top of this file. */ .rxsu-cap-utility__actions .rxsu-cap-pill{ display:inline-flex;align-items:center;gap:7px; background:var(--sh-cream);color:var(--sh-cream-ink); padding:7px 16px;border-radius:999px;font-weight:700;font-size:13px; } /* The language switch's track darkens the strip instead of lightening it. Fix round 1 (0.29.0 T4 review): it was rgba(255,255,255,.12), which raised the ground under the *non-current* label - the one this task resurrects on every English page - while that label's own ink stayed --sh-strip-ink dimmed to opacity .8. Two alphas working against each other: composited, the pair measured 3.11:1 on the operator-selectable 'olive-mid' tone and 3.26:1 on 'logo-teal', against a 4.5:1 floor (12.5px/700 is not WCAG large text - large needs 18.66px bold). No tone in the closed set of eight cleared it; the worst thing to read on the strip was the half of the switch the reader is looking for. The aria-current half was never affected - it paints its own opaque --sh-mint/--sh-mint-ink pair. Darkening rather than lightening is the fix because the ink is light: every bar tone ships #FBFCF9 on a dark surface, so any white wash under it eats contrast and any black wash adds it. At rgba(0,0,0,.24) the same .8 ink measures 5.47:1 on the tightest tone and 9.53:1 on the darkest, the track is as visible against the strip as the old white one was (1.21-1.49:1 either way - it is decoration, not a control boundary), and the mint current-pill gains a stronger edge against it (3.57:1 at worst, over the 3:1 UI floor) instead of a weaker one. The de-emphasis the .8 was there for is unchanged. tests/shell-capsule-contrast.php check 11 composites both alphas over all eight tones - the pair was invisible to that suite until then, which is why a shipped 3.11:1 sat under 218 green assertions. */ .rxsu-cap-lang{display:inline-flex;background:rgba(0,0,0,.24);border-radius:999px;padding:3px} .rxsu-cap-lang a{padding:5px 14px;border-radius:999px;font-size:12.5px;font-weight:700;opacity:.8} .rxsu-cap-lang a[aria-current]{background:var(--sh-mint);color:var(--sh-mint-ink);opacity:1} /* ── brand row ─────────────────────────────────────────────────────────── */ /* 0.29.0: border-radius/box-shadow moved here from .rxsu-cap-header (see that rule's own 0.29.0 note above). This row is the element that actually paints the header card's visible bottom edge - the utility strip above it has no rounded corner of its own - so the shape and the lift shadow that follows its silhouette both belong on the element doing the painting, not on an ancestor that would need overflow:hidden reintroduced just to clip to a shape it never draws itself. */ .rxsu-cap-brand-row{ position:relative;background:var(--sh-brand);color:var(--sh-brand-ink); display:flex;align-items:center;gap:28px;padding:18px 22px 18px 26px; border-radius:var(--sh-radius-card);box-shadow:var(--sh-lift); /* Fix round 1 (0.29.0 T1 review): pairs with the corner-squaring rule further down (search ":has(.rxsu-cap-panel:not([hidden]))") so the bottom corners ease to square while a panel opens instead of snapping. */ transition:border-radius .16s ease; } /* 0.29.0 fix round 1 (five-lens sweep, defect 1 - CRITICAL, measured in chrome-headless-shell against this exact stylesheet and the real six-item menu): `height:52px;width:auto` with no max-width made the mark 284.7px wide and completely rigid, and .rxsu-cap-brand is a flex item whose default min-width:auto takes its automatic minimum size from exactly that. With .rxsu-cap-search and .rxsu-cap-burger both flex:none, nothing in the row could give: the row needed 26 + 284.7 + 28 + 48 + 28 + 46 + 22 = 483px before the nav rail is even considered, so every viewport under that overflowed. Measured at 320px: scrollWidth 461 against clientWidth 320, the burger's box at x=414.7..460.7 - 141px past the right edge, and the search button clipped with it. Under the rail breakpoint the burger is the ONLY way into the site menu, and this site's traffic is mostly phones. Two declarations do the work, and both are needed: · min-width:0 on the link, so the flex item is allowed to be narrower than its content's own minimum size at all; · width:auto + height:auto + max-width:100% + max-height on the , so the mark is sized by *constraints* rather than by a fixed height. With both dimensions auto, CSS 2.1 §10.4's constraint-violation table applies max-height and max-width proportionally, so the intrinsic 2557:467 ratio survives every clamp - measured 5.4754 at all fifteen widths, identical to the file's own naturalWidth/naturalHeight. `height:52px;max-width:100%` (the obvious one-line fix) would have kept the height while squeezing the width and rendered a squashed logo instead; object-fit:contain would have preserved the paint but left a 52px-tall box that no longer matches what is drawn in it. The mark therefore shrinks only when the row genuinely has no room left, and is the only thing in the row that does - the burger and the search button keep their full 46px targets at every width. */ .rxsu-cap-brand{min-width:0} /* 0.29.0 fix round 5 (defect 1 - the other half of the rule above, and the correction to it). min-width:0 alone says "this item may shrink to nothing", and fix round 1 read that as safe because the only pressure it had measured was the resting row. Three further sources of pressure were then reproduced in chrome-headless-shell, all three with scrollWidth == clientWidth, i.e. with the page insisting nothing was wrong: (a) focusing the search field, which used to add a rigid 190px + 8px to the row (fixed independently - the field is out of flow now, see the ค้นหา block at the end of this file); (b) a larger browser default font size, which grows the rail (rem) while the tier boundaries stayed px (fixed independently - the three queries are em now, see the compact-rail block below); (c) a seventh top-level menu item, which is the operator's own setting and cannot be designed away at all. (c) is why this rule exists rather than only (a) and (b): no amount of correcting the tiers removes the case where the rail simply wants more width than the viewport has, and the question is only what gives. Without a floor the answer was always the logo, silently and without limit. Applied through a marker class rather than to .rxsu-cap-brand itself because the floor is meaningless - and harmful on a phone - for the text fallback the link renders when no logo has been uploaded yet (.rxsu-cap-brand__fallback). header.php adds this class only on the branch that actually emitted an . Written as two classes (0,2,0) so it beats the min-width:0 above on specificity rather than on source order, which a later reshuffle of this file could undo silently. --sh-logo-aspect is the mark's own intrinsic ratio and cannot be derived here: CSS can floor a height, but flooring the HEIGHT of a constraint-sized replaced element is exactly what fix round 1 established you must not do (CSS 2.1 §10.4's "w > max-width and h < min-height" cell resolves to w = max-width, h = min-height - a squashed logo, which is why that round chose max-height + max-width in the first place). A width floor keeps the ratio intact, and a width floor needs the ratio. So header.php prints it from the attachment's own registered dimensions, and the fallback here is the production file's (attachment 1310, 2557x467 = 5.4754) so that a page rendered without the custom property - an older cached template, a logo whose metadata WordPress cannot read - still gets a floor rather than none. A wrong-but-present aspect only mis-sizes the floor; a missing one removes it. */ .rxsu-cap-brand.rxsu-cap-brand--mark{ min-width:calc(var(--sh-logo-h) * var(--sh-logo-aspect, 5.4754) * var(--sh-logo-min)); } .rxsu-cap-brand img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--sh-logo-h)} /* โลโก้ยังไม่ได้ตั้งค่าไว้เสมอไป (ก่อนผู้ดูแลอัปโหลดในหน้าจอเปลือกเว็บไซต์) - ไม่มีสไตล์ ต้นแบบจาก mockup เพราะภาพนิ่งมีโลโก้เสมอ ไม่มีเนื้อหาให้กันลิงก์ยุบเหลือ 0 ทำให้ตัวหนังสือ สำรองสูงเท่าที่โลโก้เคยกิน (52px) เพื่อไม่ให้แถว brand สูงกระตุกตอนอัปโหลดโลโก้ทีหลัง 0.29.0 fix round 1: height -> min-height, and the literal 52px -> the same --sh-logo-h the mark now reads. height was safe only while the row could never be too narrow for this string; now that the row shrinks (see the two rules above), a fixed height would let the wrapped fallback text spill out of its own box. min-height keeps the anti-jump guarantee this rule exists for and lets the box grow instead. */ .rxsu-cap-brand__fallback{display:flex;align-items:center;min-height:var(--sh-logo-h);font-weight:800;font-size:15px;letter-spacing:.01em} .rxsu-cap-nav{margin-inline-start:auto} .rxsu-cap-nav__rail{ display:flex;align-items:center;gap:4px; background:var(--sh-rail);border-radius:999px;padding:6px; list-style:none;margin:0; } /* 0.27.0 had this sitting directly on the (now light) brand row as a flat * rgba(18,58,46,.10) hover with no token of its own, and --sh-mint for both * aria-current and an open trigger - a "stop being actively wrong on a light * surface" fix at the time, not a considered hover/open/current system. * 0.29.0 (owner: "สี hover ไม่สวยเลย ออกแบบให้สวยกว่านี้"): replaced with the * four dedicated tokens declared above (--sh-nav-hover/-ink, --sh-nav-open/ * -ink). --sh-mint is no longer used on this rail at all: with an open * trigger now taking the dark --sh-nav-open (the lead card's own green, so * the trigger and the panel it opens read as one object), a bright mint * aria-current chip on the same rail would compete with it for the same * "something is different here" signal rather than reading as a distinct * state - so aria-current moves to a quiet white chip with a hairline * instead (see its own comment just below). */ .rxsu-cap-nav__link,.rxsu-cap-nav__trigger{ display:inline-flex;align-items:center;gap:7px; font:inherit;font-size:var(--sh-nav-size);font-weight:600; color:inherit;background:none;border:0;cursor:pointer; padding:10px 17px;border-radius:999px;white-space:nowrap; transition:background-color .16s ease,color .16s ease,box-shadow .16s ease; } /* 0.29.0 fix round 2 (five-lens sweep, defect 6 - the owner's original complaint, still unfixed after 0.29.0's first attempt at it). The wash alone was imperceptible, and measuring it never showed that because the only assertion covering this state measured --sh-nav-hover-ink against --sh-nav-hover: the chip's own text against the chip. What a reader actually sees appear is the CHIP against the surface the chip appears ON, and these links do not sit on --sh-brand - they sit on the rail track, .rxsu-cap-nav__rail{background:var(--sh-rail)}, i.e. rgba(18,58,46,.06) already composited over --sh-brand: default (240.78,243.18,242.46) sage (229.50,234.72,227.42) olive (232.32,233.78,219.90) --sh-nav-hover #EAF1EC against those is 1.03:1, 1.06:1 and 1.06:1 - weaker than the flat rgba(18,58,46,.10) hover of 0.27.0 that it replaced (1.08:1 composited the same way), i.e. this release made the thing the owner asked to fix slightly worse while reporting a green suite. No fill can fix that. A light wash on a near-white track is bounded above by the track's own luminance: to reach 3:1 by fill alone the chip would have to go dark, which is the open state, or bright, which is the teal the owner already rejected. So the state is carried by an element with real contrast instead, and the wash stays as the soft, refined half of it. The indicator is a 2px inset bottom rule in --sh-nav-open - the lead card's own dark green, the same colour the trigger fills with when the panel actually opens. Measured against the composited track above: 11.29:1 on the default tone, 10.37:1 on sage, 10.31:1 on olive (and 10.95:1 against the chip's own wash, so it reads as an edge from both sides). Chosen over the full inset ring the sweep also offered because .rxsu-cap-nav__link[aria-current] just below already IS a ringed chip: two ring states on one rail would be two spellings of the same signal. An underline that is the open state's own colour also says what hovering a trigger is about to do - hover previews the colour, opening commits the whole chip to it. inset, not a border: a real border-bottom would add 2px to the control's height and shift every sibling in the rail on hover. box-shadow paints inside the existing box and is already in this rule pair's transition list. */ .rxsu-cap-nav__link:hover,.rxsu-cap-nav__trigger:hover{ background:var(--sh-nav-hover);color:var(--sh-nav-hover-ink); box-shadow:inset 0 -2px 0 0 var(--sh-nav-open); } /* "you are here" — a quiet white chip with a hairline, not a filled accent: it has to coexist on the same rail as an open trigger without competing with it. Nothing in header.php sets aria-current on a nav link today (Theme_Menu_Walker's tree carries no "current page" flag yet), so this rule is not live on any real page yet - still worth being correct, since it is one attribute away from shipping. Fix round 1 (0.29.0 T1 review): the original .22 alpha hairline was not a boundary at all against the rail track it sits on top of - 1.51:1, under WCAG 1.4.11's 3:1 floor for a UI-component boundary. Strengthened to .65, which clears 3:1 against the composited rail track (--sh-rail over --sh-brand) on all three tones - default 3.89:1, sage 3.57:1, olive 3.55:1 - see tests/shell-capsule-contrast.php's check 8 for the measured boundary, not the chip's text. */ .rxsu-cap-nav__link[aria-current]{ background:#FFFFFF;color:var(--sh-nav-open); box-shadow:inset 0 0 0 1.5px rgba(18,58,46,.65); } /* 0.29.0 fix round 2: the current-page chip and the hover state now both use box-shadow, and both selectors are (0,2,0) - an exact specificity tie the later rule (this one) wins outright, which would have left the current page's own link with no hover feedback at all. Restated so it keeps its ring AND gains the hover rule, stacked in one declaration because box-shadow does not accumulate across rules. */ .rxsu-cap-nav__link[aria-current]:hover{ background:#FFFFFF;color:var(--sh-nav-open); box-shadow:inset 0 0 0 1.5px rgba(18,58,46,.65),inset 0 -2px 0 0 var(--sh-nav-open); } .rxsu-cap-nav__trigger[aria-expanded="true"]{ background:var(--sh-nav-open);color:var(--sh-nav-open-ink); } /* Restated on purpose: without this, hovering an already-open trigger would flip it to the pale --sh-nav-hover wash mid-interaction - the "ugly hover" complaint reappearing in a different place. 0.29.0 fix round 2: box-shadow:none joins it. This selector is (0,3,0) and beats the hover rule above, but only for the properties it actually names - without this line the hover's new inset bottom rule would still paint, a dark green rule on the dark green chip it is the same colour as. Invisible rather than wrong, but it would leave a phantom declaration nobody could see to check. */ .rxsu-cap-nav__trigger[aria-expanded="true"]:hover{ background:var(--sh-nav-open);color:var(--sh-nav-open-ink);box-shadow:none; } .rxsu-cap-nav__trigger[aria-expanded="true"] .rxsu-cap-chev{ transform:rotate(-135deg) translate(-2px,-2px); } .rxsu-cap-chev{ width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease; } /* One focus treatment for every control in the shell. The UA default ring on a filled dark-green pill is what the owner saw as a stray outline in the 0.28.0 screenshots; :focus-visible keeps it off mouse clicks and on for keyboards. Fix round 1 (0.29.0 T1 review): border-radius:999px removed. Modern browsers already conform an outline to the element's own border-radius on their own, so the declaration bought nothing - and at this rule's (0,2,0) specificity it beat two other controls' own shapes: a focused .rxsu-cap-drawer__top (0,1,0) had its straight border-bottom separator forced to arc upward ~20px at both ends, and a focused .rxsu-cap-group a (0,1,1) mega-panel link - a rectangular block, not a pill - got a stadium ring instead of one following its own corners. */ .rxsu-cap-shell :focus-visible{outline:2px solid var(--sh-nav-open);outline-offset:2px} /* The utility strip, the drawer, and the mega panel's lead card are all still dark surfaces (see the token block's own docblock on why --sh-strip/ --sh-lead stay dark anchors) - --sh-nav-open, dark green, would not read against any of the three, so all three override to --sh-cream instead, the light accent already tuned for dark grounds elsewhere in this file. Fix round 1 (0.29.0 T1 review): .rxsu-cap-panel__lead was missing from this list. --sh-nav-open is literally --sh-lead's own value on the default tone - a ring in the surface's own colour is not a ring at all (1.00:1 default, 1.04:1 sage, 1.03:1 olive - see tests/shell-capsule-contrast.php's check 8), so a keyboard user tabbing onto the panel's "Overview" CTA got no visible ring whatsoever: a regression against the UA default ring this rule exists to replace. */ .rxsu-cap-utility :focus-visible,.rxsu-cap-drawer :focus-visible,.rxsu-cap-panel__lead :focus-visible{outline-color:var(--sh-cream)} /* ══════════════════════════════════════════════════════════════════════════ THE THEME'S OWN SHELL, when the plugin is drawing one (0.29.0 T2) Theme_Runtime::suppress_elementor_header() returns template id 0 for the header and footer locations, which is how a page tells Elementor it has none. What that actually does is make elementor_theme_do_location() return false - and false is precisely the signal The7 waits for before rendering its *own* header and its own widget footer instead. Measured on production 2026-08-02: on /main/news/ the reader got the capsule header, then The7's demo header under it, then the page, then The7's dark widget footer, then the capsule footer. Suppressing the Elementor location is still right (the faculty's real Elementor header would otherwise render as well); it is just not the whole job. Selectors come from the measured document, not from The7's class names, which are not public API: The7 puts
    directly in and renders both the header location and