/* ==================================================================== theme-modern-corp-flat.css ──────────────────────────────────────────────────────────────────── Modern Corp FLAT theme override — applied on top of base CSS files. How it works: • Loaded LAST in after all other CSS files • Re-defines :root CSS variables (cascade wins) • Overrides hardcoded gradient surfaces with solid colors • Switches body font from Sarabun → Prompt • Preserves icon fonts (icofont + Font Awesome 7) via higher specificity To revert (rollback): 1. Remove from header.asp + header_proj.asp + header_detail.asp 2. (optional) delete this file Color palette: Modern Corp FLAT primary #39B86C (bright fresh — buttons, accents) mid #2DA15C (hover) light #7DD3A2 deep #0F5D36 (top bar / footer / banners — NO gradient) deeper #0A4326 tint #DDF5E7 (icon circle bg) tint2 #F0FAF3 bg #FFFFFF (body — pure white) bg-alt #F4F6F5 coral #C0392B (alerts / vermilion) text #1E1E1E muted #6B7280 border #E5E7EB Created: 2026-05-08 ==================================================================== */ /* ── 1. Override CSS variables (cascade) ─────────────────────── */ :root, body{ /* icons.css base palette */ --navy: #0F5D36 !important; --steel: #2DA15C !important; --accent: #39B86C !important; --accent2: #7DD3A2 !important; --light: #F0FAF3 !important; --muted: #6B7280 !important; /* proj-member.css palette */ --mn: #0F5D36 !important; --ms: #2DA15C !important; --ma: #39B86C !important; --ma2: #7DD3A2 !important; --ml: #DDF5E7 !important; --mbg: #FFFFFF !important; --mmu: #6B7280 !important; --gold: #39B86C !important; --goldb: #39B86C !important; } /* ── 2. Font: site-wide toggle via body class ──────────────── */ /* Default (no class or .font-modern) = Prompt .font-classic = Sarabun Set by /setfont.asp + Session("ssFont"). */ /* Default — Prompt (Modern) */ body, body *, body.member-area, body.member-area *, body.pm-body, body.pm-body *, body.sr-body, body.sr-body *, body.page-login, body.page-login *, body.font-modern, body.font-modern *{ font-family: 'Prompt', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* Classic — Sarabun (must come AFTER, higher specificity wins) */ body.font-classic, body.font-classic *{ font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif !important; } body{ background: #FFFFFF !important; } /* ── 3. ⚠ CRITICAL: Restore icon fonts ─────────────────────── Universal selector above (specificity 0,1,0,1) beats icofont's [class^="icofont-"] (0,0,1,0) — icons disappear without these rules. Use html body[class] (0,2,0,2) to win cascade. ── */ /* icofont */ html body [class^="icofont-"], html body [class*=" icofont-"], html body [class^="icofont-"]::before, html body [class*=" icofont-"]::before{ font-family: 'IcoFont' !important; font-weight: normal !important; font-style: normal !important; } /* Font Awesome 7 — sets font-family on element via --_fa-family. Restore with same approach + cover all FA7 style classes. */ html body .fa, html body .fa-brands, html body .fa-classic, html body .fa-sharp, html body .fa-duotone, html body .fa-sharp-duotone, html body .fa-solid, html body .fa-regular, html body .fa-light, html body .fa-thin, html body .fa-semibold, html body .fa-thumbprint, html body .fa-utility, html body .fa-whiteboard, html body .fab, html body .fas, html body .far, html body .fal, html body .fat, html body .fad, html body .fass, html body .fasr, html body .fasl, html body .fast, html body .fadr, html body .fadl, html body .fadt, html body .fasds, html body .fatl, html body .facr, html body .faes, html body .fagt, html body .fajr, html body .fans, html body .faslr, html body .faslpr, html body .fausb, html body .faudsb, html body .faufsb, html body .fawsb, html body [class^="fa-"], html body [class*=" fa-"]{ font-family: var(--_fa-family, var(--fa-family, "Font Awesome 7 Pro")), "Font Awesome 7 Pro", "Font Awesome 7 Sharp", "Font Awesome 7 Brands", "Font Awesome 7 Duotone", "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important; } /* ── 4. Solid (flat) replacements for hardcoded gradient surfaces ─ */ /* Top bar (member) */ .mb-topbar{ background: #0F5D36 !important; } /* Member footer */ .mb-footer{ background: #0F5D36 !important; border-top: 3px solid #39B86C !important; } /* Detail popup top bar (proj-pages-main.css :34) */ .pdt-bar{ background: #0F5D36 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } /* Detail breadcrumb gradient → solid */ .pd-breadcrumb{ background: #0F5D36 !important; border-bottom: 2px solid #39B86C !important; } /* Public hero (icons.css :350) */ .hero{ background: #0F5D36 !important; } /* Apply bar (icons.css :1481) */ .apply-bar{ background: #0F5D36 !important; } /* Info bar (proj-member.css :600) */ .pm-infobar{ background: #0F5D36 !important; } /* Company header card (proj-member.css :1108) */ .pc-header-card{ background: #0F5D36 !important; } /* SR header (sr-dashboard.css :54) */ .sr-header{ background: #0F5D36 !important; border-bottom: 3px solid #39B86C !important; } /* ⚠ Project Detail header card (proj-pages-main.css :153) 3-stop gradient #14321A → #1E4A28 → #2A6040 looked "bruised" — flatten. */ .pd-proj-hdr{ background: #0F5D36 !important; } /* Detail card headers (proj-pages-main.css :142, :484) */ .pd-card-hdr, .pd-qb-hdr{ background: #0F5D36 !important; } /* Primary detail button (proj-pages-main.css :515) */ .pd-btn-primary{ background: #39B86C !important; color: #FFFFFF !important; } /* ── 5. Logo MEMBER badge: green (was gold) ───────────────── */ .mb-logo-badge{ background: #39B86C !important; color: #FFFFFF !important; } /* ── 6. Page bg = white ──────────────────────────────────── */ body.member-area, .pm-body, .sr-body{ background: #FFFFFF !important; } /* ── 7. Heading fonts: Barlow Condensed for Latin (numbers/English), fall back to chosen Thai font ── */ body.font-modern h1, body.font-modern h2, body.font-modern h3, body.font-modern h4, body.font-modern h5, body.font-modern h6, body.font-modern .pm-card-value, body.font-modern .pm-hero-stat .num, body.font-modern .pm-section-h h2, body.font-modern .pm-hero h1, body.font-modern .bg-page-title h1, body.font-modern .al-page-title h1, body.font-modern .cr-page-title h1, body.font-modern .mh-page-title h1, body.font-modern .rm-page-title h1, body.font-modern .st-page-title h1, body.font-modern .val-card h3, body.font-modern .contact-info-card h3, body.font-modern .pos-card h3, body.font-modern .apply-bar h2, h1, h2, h3, h4, h5, h6{ font-family: 'Barlow Condensed', 'Prompt', 'Sarabun', sans-serif !important; } body.font-classic h1, body.font-classic h2, body.font-classic h3, body.font-classic h4, body.font-classic h5, body.font-classic h6, body.font-classic .pm-card-value, body.font-classic .pm-hero-stat .num, body.font-classic .pm-section-h h2, body.font-classic .pm-hero h1{ font-family: 'Barlow Condensed', 'Sarabun', sans-serif !important; } /* ── Font toggle button (with FA text-size icon) ─────────── Pill button in topbar, sibling to TH/EN switcher. */ .font-toggle-btn{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 4px; font-size: 11.5px; font-weight: 600; text-decoration: none; background: rgba(255,255,255,.15) !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.4) !important; transition: background .15s, border-color .15s; cursor: pointer; } .font-toggle-btn:hover{ background: rgba(255,255,255,.28) !important; border-color: rgba(255,255,255,.6) !important; } .font-toggle-btn i{ font-size: 13px; opacity: .95; } /* ── Public topbar (header.asp) — brighter text + clearer TH/EN ── */ .topbar{ color: rgba(255,255,255,.9) !important; } .topbar a, .topbar span{ color: rgba(255,255,255,.92) !important; } .topbar a:hover{ color: #FFFFFF !important; } .topbar .lang-switch{ border: 1.5px solid rgba(255,255,255,.4) !important; } .topbar .lang-switch a{ color: rgba(255,255,255,.8) !important; background: transparent !important; font-weight: 700; padding: 2px 12px !important; letter-spacing: .08em !important; } .topbar .lang-switch a.active{ background: #FFFFFF !important; color: #0F5D36 !important; } .topbar .lang-switch a:not(.active):hover{ background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; } /* ── Hero h1 overlap fix when Classic (Sarabun runs taller than Prompt) ── */ body.font-classic .hero h1, body.font-classic .login-headline{ line-height: 1.45 !important; } body.font-classic .hero h1 em{ display: inline-block; line-height: 1.3 !important; } /* ── 8. Drawer menu — harmonize section header colors (was rainbow brown/copper/blue/green/purple/teal/dark-green — clashed with clean theme) Section 7 'ส่วนพิเศษ' is INTENTIONALLY excluded — it uses .mb-special-hdr-glow with orange gradient + pulse + crown animation (signature look in proj-pages-extra.css :2144) ── */ /* Section 1-6 each gets its own green shade (block 21 overrides this uniform color with a 6-step gradient — แต่ละ section แตกต่างกันแต่ ดูเรียบหรู). กฎเดิม keep ไว้เป็น fallback. */ body[class] .mb-sec-h-admin, body[class] .mb-sec-h-crm, body[class] .mb-sec-h-proj, body[class] .mb-sec-h-cont, body[class] .mb-sec-h-mgmt, body[class] .mb-sec-h-map{ background: #0F5D36 !important; } /* Drawer icon circles — were rainbow palette (orange/amber/blue/green/purple/teal), unify to Modern Corp green for sections 1-6 (section 7 keeps its signature). */ body[class] .mb-ib-admin .mb-iico, body[class] .mb-ib-crm .mb-iico, body[class] .mb-ib-proj .mb-iico, body[class] .mb-ib-cont .mb-iico, body[class] .mb-ib-mgmt .mb-iico, body[class] .mb-ib-map .mb-iico, body[class] .mb-sec-admin .mb-iico, body[class] .mb-sec-crm .mb-iico, body[class] .mb-sec-proj .mb-iico, body[class] .mb-sec-cont .mb-iico, body[class] .mb-sec-mgmt .mb-iico, body[class] .mb-sec-map .mb-iico{ background: #DDF5E7 !important; color: #0F5D36 !important; } /* ── 9. Login page — fix hardcoded dark gradient ─────────── icons-pages.css :1432 has linear-gradient(145deg, #0e2210, #1C3A1C, #254d25) which doesn't pick up var override. Use SLIGHTLY LIGHTER green than footer (#0F5D36) so the page doesn't blend with footer/header into one big block. ─────────── */ .login-page{ background: #1A6B40 !important; } .login-page::before, .login-page::after{ opacity: 0.4; } /* Public hero on login/register/info pages (icons-pages.css :17) */ .page-hero{ background: #0F5D36 !important; } /* Exception: icons-smpprojects.asp ใช้ LIGHT hero แบบพิเศษ (icons-pages.css :3046 — body.page-smpprojects .page-hero) ph-inner h1/h2/p ใช้ var(--navy)/var(--steel) (เข้ม) → bg ต้องอ่อน ไม่งั้น dark text on dark bg = invisible */ body.page-smpprojects .page-hero{ background: linear-gradient(135deg, #F0FAF3 0%, #DDF5E7 50%, #BFE5BC 100%) !important; border-bottom: 3px solid #BFE5BC !important; } body.style-premium-tech.page-smpprojects .page-hero{ background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 50%, #A7F3D0 100%) !important; border-bottom: 3px solid #6EE7B7 !important; } /* ── 10. Project Detail badges — remove orange/gold mix ───── .pd-badge-sec-gov has hardcoded rgba(240,160,48,...) orange .pd-badge-province has linear-gradient with #b8841f orange end ── */ .pd-badge-sec-gov{ background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.25) !important; } .pd-badge-province{ background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,.3) !important; } /* ── 11. Stat Report (proj_statreport.asp) — flatten Material blue palette proj-pages-extra.css uses #1976D2/#1565C0/#1E88E5 family for tabs/badges/headers Flatten to Modern Corp green so colors don't clash with theme ────────── */ /* Page title */ body .st-page-title h1 { color:#0F5D36 !important; } body .st-page-title i { color:#39B86C !important; } /* Main tabs (Tab 1/2/3) */ body .st-main-tabs { border-bottom-color:#39B86C !important; } body .st-mtab { color:#6B7280 !important; } body .st-mtab:hover { color:#2DA15C !important; background:#F0FAF3 !important; } body .st-mtab.active { color:#0F5D36 !important; background:#F0FAF3 !important; border-bottom-color:#39B86C !important; } /* Sub tabs (3.1, 3.2 ... etc.) */ body .st-stab { color:#6B7280 !important; } body .st-stab:hover { color:#2DA15C !important; background:#F0FAF3 !important; } body .st-stab.active { color:#0F5D36 !important; border-bottom-color:#39B86C !important; } /* Filter labels + inputs */ body .st-flabel { color:#0F5D36 !important; } body .st-finput, body .st-fselect { color:#0F5D36 !important; border-color:#BFE5BC !important; } /* Filter badges */ body .st-fbadge { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .st-fbadge:hover { border-color:#39B86C !important; background:#F0FAF3 !important; } body .st-fbadge.active { background:#39B86C !important; color:#fff !important; border-color:#39B86C !important; } /* Section header (big banner above each section, e.g. "สรุปโครงการรายเดือน") Modern Corp FLAT — solid green (no gradient) to match theme philosophy */ body .st-sec-header { background:#0F5D36 !important; color:#fff !important; } body .st-sec-header i { color:#BFE5BC !important; } /* Card / section borders */ body .st-section, body .st-card, body .st-panel { border-color:#BFE5BC !important; } /* Table — default header (overrides blue gradient on every ) — FLAT solid */ body .st-tbl th { background:#0F5D36 !important; color:#fff !important; } body .st-tbl td { color:#0F5D36 !important; } body .st-tbl tr:hover td { background:#F0FAF3 !important; } /* Total row — flat soft tint */ body .st-tbl .st-row-total td, body .st-tbl tfoot td, body .st-tbl tr.st-tr-tot td { background:#DDF5E7 !important; color:#0F5D36 !important; border-top:2px solid #39B86C !important; font-weight:800 !important; } /* New / Updated column headers — solid distinct shades */ body .st-tbl th.st-th-new { background:#0F5D36 !important; } body .st-tbl th.st-th-upd { background:#2DA15C !important; } /* Stage columns — sequential mono-green (early → late stage) */ body .st-tbl th.st-th-stg1 { background:#0F5D36 !important; } body .st-tbl th.st-th-stg2 { background:#1A6B40 !important; } body .st-tbl th.st-th-stg3 { background:#2DA15C !important; } body .st-tbl th.st-th-stg4 { background:#39B86C !important; } body .st-tbl th.st-th-stg5 { background:#6FCF94 !important; color:#0F5D36 !important; } body .st-tbl th.st-th-stg6 { background:#7DD3A2 !important; color:#0F5D36 !important; } body .st-tbl th.st-th-stg7 { background:#BFE5BC !important; color:#0F5D36 !important; } /* Total / Sub column header */ body .st-tbl th.st-th-total { background:#0F5D36 !important; color:#fff !important; } body .st-tbl th.st-th-sub { background:#F0FAF3 !important; color:#0F5D36 !important; font-weight:600 !important; } /* Badge */ body .st-tbl-badge { color:#0F5D36 !important; } body .st-tbl-badge i { color:#39B86C !important; } /* Opps Report (proj_oppsreport.asp) — 6 KPI cards Replace teal/blue/purple/orange/red mix with cohesive Modern Corp palette */ /* Card 1: จำนวนโครงการ (proj count) — emerald primary */ body .op-c-proj .op-card-icon { background:#DDF5E7 !important; color:#39B86C !important; } body .op-c-proj .op-card-value { color:#39B86C !important; } /* Card 2: มูลค่าโครงการ (proj value) — forest deep */ body .op-c-value .op-card-icon { background:#DDF5E7 !important; color:#0F5D36 !important; } body .op-c-value .op-card-value { color:#0F5D36 !important; } /* Card 3: ก่อสร้างเสร็จ (done) — slate grey (kept neutral, looks fine) */ body .op-c-done .op-card-icon { background:#F1F5F4 !important; color:#6B7280 !important; } body .op-c-done .op-card-value { color:#6B7280 !important; } /* Card 4: ปิดงานได้ (sold/won) — sage green (success darker) */ body .op-c-sold .op-card-icon { background:#E8F5EE !important; color:#1A6B40 !important; } body .op-c-sold .op-card-value { color:#1A6B40 !important; } /* Card 5: มูลค่าคาดการณ์ (forecast) — amber (warm accent) */ body .op-c-fc .op-card-icon { background:#FEF3DC !important; color:#F39C12 !important; } body .op-c-fc .op-card-value { color:#F39C12 !important; } /* Card 6: ไม่สนใจ/ปิดงานไม่ได้ (lost) — coral (alert) */ body .op-c-lost .op-card-icon { background:#FCEBE8 !important; color:#C0392B !important; } body .op-c-lost .op-card-value { color:#C0392B !important; } /* ── 12. Forecast (proj_forecast.asp) — flatten Material blue palette proj-pages-extra.css + proj-pages-main.css use #1565C0 for fc-* classes ── */ /* Modern Corp FLAT — solid green section headers (no gradient) */ body .fc-search-header, body .fc-result-header { background:#0F5D36 !important; color:#fff !important; } body .fc-search-header i, body .fc-result-header i { color:#BFE5BC !important; } body .fc-summary-bar { background:#F0FAF3 !important; border-color:#BFE5BC !important; } body .fc-summary-bar i { color:#39B86C !important; } body .fc-summary-item { color:#0F5D36 !important; } body .fc-summary-val { color:#0F5D36 !important; } body .fc-summary-unit { color:#6B7280 !important; } body .fc-toolbar { background:#FAFCFB !important; } body .fc-tbl th { background:#0F5D36 !important; color:#fff !important; } body .fc-tbl tr:hover td { background:#F0FAF3 !important; } body .fc-tbl td { color:#0F5D36 !important; } body .fc-page-title { color:#0F5D36 !important; } body .fc-page-title h1 { color:#0F5D36 !important; } body .fc-page-title i { color:#39B86C !important; } /* Form labels + inputs/selects (was navy #1A3E6E) */ body .fc-label { color:#0F5D36 !important; } body .fc-label i { color:#39B86C !important; } body .fc-input, body .fc-select { color:#0F5D36 !important; border-color:#BFE5BC !important; } /* Plan/Status badges — default (inactive) text + active state */ body .fc-plan-badge, body .fc-status-badge { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .fc-plan-badge.active, body .fc-status-badge.active { background:#39B86C !important; color:#fff !important; border-color:#39B86C !important; } body .fc-breadcrumb a { color:#2DA15C !important; } body .fc-bc-badge-sales { background:#E3F2FD !important; border-color:#90CAF9 !important; color:#1565C0 !important; } body .fc-label i { color:#39B86C !important; } body .fc-input:focus, body .fc-select:focus { border-color:#39B86C !important; box-shadow:0 0 0 2px rgba(57,184,108,.18) !important; } body .fc-plan-badge:hover { border-color:#39B86C !important; background:#F0FAF3 !important; } body .fc-plan-all.active { background:#39B86C !important; } body .fc-btn-search { background:linear-gradient(135deg,#0F5D36,#2DA15C) !important; color:#fff !important; } body .fc-btn-search:hover { background:linear-gradient(135deg,#0A4326,#0F5D36) !important; box-shadow:0 3px 12px rgba(15,93,54,.32) !important; } body .fc-status-badge:hover { border-color:#39B86C !important; background:#F0FAF3 !important; } body .fc-status-all.active { background:#39B86C !important; } body .fc-td-projname a:hover { color:#2DA15C !important; } /* Result table — sub-line (code + province) was blue/slate */ body .fc-td-code { color:#2DA15C !important; } body .fc-td-prov { color:#6B7280 !important; } /* Stage badge inside fc-tbl — flatten any pm-s-* blue/orange to green family IMPORTANT: pm-s-done has dark slate bg + needs WHITE text (not green) */ body .fc-td-stage, body .fc-td-stage.pm-s-prep, body .fc-td-stage.pm-s-docs, body .fc-td-stage.pm-s-bid, body .fc-td-stage.pm-s-design, body .fc-td-stage.pm-s-design2, body .fc-td-stage.pm-s-tender, body .fc-td-stage.pm-s-post, body .fc-td-stage.pm-s-cons, body .fc-td-stage.pm-s-result, body .fc-td-stage.pm-s-build { color:#0F5D36 !important; } body .fc-td-stage.pm-s-done { color:#FFFFFF !important; } /* Plan-tag (status pill in result rows) — was purple for closed */ body .fc-plan-tag-all { background:#DDF5E7 !important; color:#0F5D36 !important; border-color:#7DD3A2 !important; } body .fc-plan-tag-inplan { background:#DDF5E7 !important; color:#0F5D36 !important; border-color:#7DD3A2 !important; } body .fc-plan-tag-noplan { background:#FCEBE8 !important; color:#C0392B !important; border-color:#E8B4AB !important; } body .fc-plan-tag-closed { background:#E8F5EE !important; color:#1A6B40 !important; border-color:#7DD3A2 !important; } /* Pagination buttons — default state (was blue text) */ body .fc-pg-btn { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .fc-pg-btn i { color:#39B86C !important; } body .fc-pg-btn.disabled, body .fc-pg-btn.disabled i { color:#BFE5BC !important; } body .fc-pg-btn:hover, body .fc-pg-btn.active { background:#39B86C !important; color:#fff !important; border-color:#39B86C !important; } body .fc-pg-btn:hover i, body .fc-pg-btn.active i { color:#fff !important; } /* ── 13. Forecast Report (proj_salestarget.asp) ── - Highcharts column bar (legacy) - Section headers (.fr-chart-header, .fr-table-header) — purple → green gradient - Table year columns (.fr-th-year-current/-future) — purple → green ───────────────────────────────────────────────────────────────────── */ body .fr-bar-y1 { background:linear-gradient(180deg,#39B86C,#0F5D36) !important; } body .fr-dot-y1 { background:#39B86C !important; } /* Page title — was purple icon + dark purple h1 */ body .fr-page-title { color:#0F5D36 !important; } body .fr-page-title h1 { color:#0F5D36 !important; } body .fr-page-title i { color:#39B86C !important; } /* Filter bar label — was purple-grey */ body .fr-filter-label { color:#6B7280 !important; } /* Filter badges — default (inactive) text was dark purple */ body .fr-badge { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .fr-badge i { color:#39B86C !important; } body .fr-badge.active { color:#fff !important; } body .fr-badge.active i { color:#fff !important; } /* Section headers (chart + table) — FLAT solid green */ body .fr-chart-header, body .fr-table-header, body .fr-section-header { background:#0F5D36 !important; color:#fff !important; } body .fr-chart-header i, body .fr-table-header i { color:#BFE5BC !important; } /* Variants (closed/in-plan/no-plan tables — solid shades distinct) */ body .fr-table-header.fr-th-inplan { background:#0F5D36 !important; } body .fr-table-header.fr-th-noplan { background:#2DA15C !important; } body .fr-table-header.fr-th-closed { background:#0A4326 !important; } /* Default table th (was lavender bg + purple text — flatten to green tint) */ body .fr-tbl th { background:#F0FAF3 !important; color:#0F5D36 !important; border-bottom-color:#BFE5BC !important; } /* Year columns — current highlighted (FLAT solid) */ body .fr-tbl th.fr-th-year-current { background:#0F5D36 !important; color:#fff !important; } body .fr-th-year-future { background:#2DA15C !important; color:#fff !important; } body .fr-th-year-past { background:#6B7280 !important; color:#fff !important; } body .fr-th-quarter { background:#F0FAF3 !important; color:#0F5D36 !important; } /* Table cells — text + tints (was purple) */ body .fr-tbl td { color:#0F5D36 !important; border-bottom-color:#E5E7EB !important; } body .fr-tbl tr:hover td { background:#F0FAF3 !important; } body .fr-tbl .fr-row-total td { background:#DDF5E7 !important; color:#0F5D36 !important; border-top-color:#39B86C !important; } body .fr-tbl .fr-td-total-col { background:#F0FAF3 !important; } body .fr-tbl a.fr-cell-link { color:#2DA15C !important; } body .fr-tbl a.fr-cell-link:hover { background:#39B86C !important; color:#fff !important; } body .fr-tbl a.fr-cell-closed { color:#0F5D36 !important; } body .fr-tbl a.fr-cell-closed:hover{ background:#0F5D36 !important; color:#fff !important; } /* Bar chart — 4 year colors → mono green flat (no gradient) */ body .fr-bar-y0 { background:#0F5D36 !important; } body .fr-bar-y2 { background:#2DA15C !important; } body .fr-bar-y3 { background:#7DD3A2 !important; } body .fr-dot-y0 { background:#0F5D36 !important; } body .fr-dot-y2 { background:#2DA15C !important; } body .fr-dot-y3 { background:#7DD3A2 !important; } /* Filter badges */ body .fr-badge-all.active { background:#0F5D36 !important; } body .fr-badge-ongoing.active { background:#39B86C !important; } body .fr-badge-ended.active { background:#6B7280 !important; } /* ==================================================================== ALTERNATE STYLE — PREMIUM TECH FLAT ──────────────────────────────────────────────────────────────────── Activated when (set by /setstyle.asp + Session("ssStyle") = "premium-tech") Default (no class) = Modern Corp FLAT (everything above) .style-premium-tech = Premium Tech FLAT (emerald + amber) To remove this alternative entirely: delete this block. ==================================================================== */ /* ── Variables ── */ body.style-premium-tech{ /* icons.css base */ --navy: #064E3B !important; --steel: #059669 !important; --accent: #10B981 !important; --accent2: #6EE7B7 !important; --light: #ECFDF5 !important; --muted: #64748B !important; /* proj-member.css */ --mn: #064E3B !important; --ms: #059669 !important; --ma: #10B981 !important; --ma2: #6EE7B7 !important; --ml: #D1FAE5 !important; --mbg: #FFFFFF !important; --mmu: #64748B !important; --gold: #F59E0B !important; /* premium amber gold */ --goldb: #F59E0B !important; } /* ── Solid surfaces (FLAT — no gradient) ── */ body.style-premium-tech .mb-topbar{ background: #064E3B !important; border-bottom: 1px solid rgba(245,158,11,.25) !important; /* subtle gold */ } body.style-premium-tech .mb-footer{ background: #064E3B !important; border-top: 2px solid #F59E0B !important; /* gold accent */ } body.style-premium-tech .pdt-bar{ background: #064E3B !important; border-bottom: 1px solid rgba(245,158,11,.18) !important; } body.style-premium-tech .pd-breadcrumb{ background: #064E3B !important; border-bottom: 2px solid #10B981 !important; } body.style-premium-tech .hero, body.style-premium-tech .apply-bar, body.style-premium-tech .pm-infobar, body.style-premium-tech .pc-header-card, body.style-premium-tech .sr-header, body.style-premium-tech .pd-proj-hdr, body.style-premium-tech .page-hero{ background: #064E3B !important; } body.style-premium-tech .pd-card-hdr, body.style-premium-tech .pd-qb-hdr{ background: #064E3B !important; } body.style-premium-tech .pd-btn-primary{ background: #10B981 !important; } /* MEMBER badge — emerald primary */ body.style-premium-tech .mb-logo-badge{ background: #10B981 !important; color: #FFFFFF !important; } /* Login page — slightly different shade so doesn't blend with footer #064E3B */ body.style-premium-tech .login-page{ background: #065F46 !important; /* emerald 800 — between primary and deep */ } /* Public topbar (header.asp) — uses var(--navy) for bg, picks up emerald */ body.style-premium-tech .topbar{ background: #064E3B !important; } body.style-premium-tech .topbar .lang-switch a.active{ background: #FFFFFF !important; color: #064E3B !important; } /* Drawer 7 section headers — unified emerald with subtle variation */ body.style-premium-tech .mb-sec-h-admin, body.style-premium-tech .mb-sec-h-crm, body.style-premium-tech .mb-sec-h-cont, body.style-premium-tech .mb-sec-h-mgmt, body.style-premium-tech .mb-sec-h-map{ background: #064E3B !important; } body.style-premium-tech .mb-sec-h-proj{ background: #059669 !important; } body.style-premium-tech .mb-sec-h-special{ background: #022C22 !important; /* near-black emerald — premium */ border-left: 3px solid #F59E0B !important; } /* Text body — slate (sharper than #1E1E1E) */ body.style-premium-tech{ color: #0F172A !important; } /* Borders — slate cool */ body.style-premium-tech .pm-card, body.style-premium-tech .stat-card, body.style-premium-tech .news-card{ border-color: #E2E8F0 !important; } /* ── Premium Tech: Stat Report (proj_statreport.asp) — emerald palette ── */ body.style-premium-tech .st-page-title h1 { color:#064E3B !important; } body.style-premium-tech .st-page-title i { color:#10B981 !important; } body.style-premium-tech .st-main-tabs { border-bottom-color:#10B981 !important; } body.style-premium-tech .st-mtab { color:#64748B !important; } body.style-premium-tech .st-mtab:hover { color:#059669 !important; background:#ECFDF5 !important; } body.style-premium-tech .st-mtab.active { color:#064E3B !important; background:#ECFDF5 !important; border-bottom-color:#10B981 !important; } body.style-premium-tech .st-stab { color:#64748B !important; } body.style-premium-tech .st-stab:hover { color:#059669 !important; background:#ECFDF5 !important; } body.style-premium-tech .st-stab.active { color:#064E3B !important; border-bottom-color:#F59E0B !important; } body.style-premium-tech .st-flabel { color:#064E3B !important; } body.style-premium-tech .st-finput, body.style-premium-tech .st-fselect { color:#064E3B !important; border-color:#A7F3D0 !important; } body.style-premium-tech .st-fbadge { color:#064E3B !important; border-color:#A7F3D0 !important; } body.style-premium-tech .st-fbadge:hover { border-color:#10B981 !important; background:#ECFDF5 !important; } body.style-premium-tech .st-fbadge.active { background:#10B981 !important; color:#fff !important; border-color:#10B981 !important; } body.style-premium-tech .st-card, body.style-premium-tech .st-panel { border-color:#A7F3D0 !important; } body.style-premium-tech .st-tbl-section-hdr { background:linear-gradient(135deg,#064E3B,#059669) !important; color:#fff !important; } body.style-premium-tech .st-tbl td { color:#064E3B !important; border-bottom-color:#E2E8F0 !important; } body.style-premium-tech .st-tbl tfoot, body.style-premium-tech .st-tbl tr.st-tr-tot{ background:linear-gradient(135deg,#D1FAE5,#ECFDF5) !important; border-top-color:#10B981 !important; color:#064E3B !important; } body.style-premium-tech .st-tbl tr.st-tr-tot td { color:#064E3B !important; } body.style-premium-tech .st-tbl th.st-th-new { background:linear-gradient(135deg,#064E3B,#059669) !important; } body.style-premium-tech .st-tbl th.st-th-stg1 { background:#10B981 !important; } body.style-premium-tech .st-tbl-badge { color:#064E3B !important; } body.style-premium-tech .st-tbl-badge i { color:#10B981 !important; } /* ── Premium Tech: Opps Report value card ── */ body.style-premium-tech .op-c-value .op-card-icon { background:#D1FAE5 !important; color:#064E3B !important; } body.style-premium-tech .op-c-value .op-card-value { color:#064E3B !important; } /* ── Premium Tech: Forecast (proj_forecast.asp) ── */ body.style-premium-tech .fc-page-title i { color:#10B981 !important; } body.style-premium-tech .fc-breadcrumb a { color:#059669 !important; } body.style-premium-tech .fc-bc-badge-sales { background:#E3F2FD !important; border-color:#90CAF9 !important; color:#1565C0 !important; } body.style-premium-tech .fc-label i { color:#10B981 !important; } body.style-premium-tech .fc-input:focus, body.style-premium-tech .fc-select:focus { border-color:#10B981 !important; box-shadow:0 0 0 2px rgba(16,185,129,.18) !important; } body.style-premium-tech .fc-plan-badge:hover { border-color:#10B981 !important; background:#ECFDF5 !important; } body.style-premium-tech .fc-plan-all.active { background:#10B981 !important; } body.style-premium-tech .fc-btn-search { background:linear-gradient(135deg,#064E3B,#059669) !important; color:#fff !important; } body.style-premium-tech .fc-btn-search:hover { background:linear-gradient(135deg,#022C22,#064E3B) !important; box-shadow:0 3px 12px rgba(6,78,59,.32) !important; } body.style-premium-tech .fc-status-badge:hover { border-color:#10B981 !important; background:#ECFDF5 !important; } body.style-premium-tech .fc-status-all.active { background:#10B981 !important; } body.style-premium-tech .fc-td-projname a:hover { color:#059669 !important; } body.style-premium-tech .fc-pg-btn:hover, body.style-premium-tech .fc-pg-btn.active { background:#10B981 !important; color:#fff !important; border-color:#10B981 !important; } /* ── Premium Tech: Forecast Report (proj_salestarget.asp) bar/dot ── */ body.style-premium-tech .fr-bar-y1 { background:linear-gradient(180deg,#10B981,#064E3B) !important; } body.style-premium-tech .fr-dot-y1 { background:#10B981 !important; } /* ── 15. Material Main (proj_materialmain.asp) — flatten brown/copper palette proj-pages-extra.css :1195+ uses #BF6B30/#3E1F0D/#FFF3E0 brown family Convert to Modern Corp green ─────────────────────────────────── */ /* Page title */ body .mt-page-title h1 { color:#0F5D36 !important; } body .mt-page-title i { color:#39B86C !important; } /* Sidebar + main card */ body .mt-sidebar, body .mt-main { border-color:#BFE5BC !important; } body .mt-side-header, body .mt-main-header { background:#0F5D36 !important; } body .mt-side-header i, body .mt-main-header i { color:#BFE5BC !important; } /* Category list (sidebar) */ body .mt-cat-main { color:#0F5D36 !important; } body .mt-cat-main:hover { background:#F0FAF3 !important; } body .mt-cat-main.active { background:#DDF5E7 !important; color:#0F5D36 !important; border-left-color:#39B86C !important; } body .mt-cat-main.open { background:#F0FAF3 !important; } body .mt-cat-arrow { color:#7DD3A2 !important; } body .mt-cat-main.open .mt-cat-arrow { color:#39B86C !important; } body .mt-sub-list { background:#F0FAF3 !important; } body .mt-sub-item { color:#1A6B40 !important; border-bottom-color:#DDF5E7 !important; } body .mt-sub-item:hover { background:#DDF5E7 !important; color:#0F5D36 !important; } body .mt-sub-item.active { background:#DDF5E7 !important; color:#0F5D36 !important; border-left-color:#39B86C !important; } /* Filter bar */ body .mt-filter { background:#F0FAF3 !important; border-bottom-color:#BFE5BC !important; } body .mt-flabel { color:#0F5D36 !important; } body .mt-fselect, body .mt-search-input { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .mt-fselect:focus, body .mt-search-input:focus { border-color:#39B86C !important; box-shadow:0 0 0 2px rgba(57,184,108,.18) !important; } body .mt-btn-search { background:#39B86C !important; color:#fff !important; } body .mt-btn-search:hover { background:#2DA15C !important; box-shadow:0 2px 8px rgba(15,93,54,.3) !important; } body .mt-chk-label { color:#0F5D36 !important; } body .mt-chk-label input[type="checkbox"]{ accent-color:#39B86C !important; } /* Sort bar */ body .mt-sort-bar { background:#FAFCFB !important; border-bottom-color:#E5E7EB !important; } body .mt-sort-label { color:#6B7280 !important; } body .mt-sort-select { color:#0F5D36 !important; border-color:#BFE5BC !important; } /* Table */ body .mt-tbl th { background:#0F5D36 !important; color:#fff !important; } body .mt-tbl th:hover { background:#1A6B40 !important; } body .mt-tbl td { color:#0F5D36 !important; border-bottom-color:#E5E7EB !important; } body .mt-tbl tr:hover td { background:#F0FAF3 !important; } body .mt-td-date, body .mt-td-date a, body .mt-td-unit { color:#6B7280 !important; } body .mt-td-date a:hover, body .mt-td-name a:hover { color:#2DA15C !important; } /* Result + pagination */ body .mt-result-count { color:#6B7280 !important; } body .mt-result-count strong { color:#0F5D36 !important; } body .mt-pg-btn { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .mt-pg-btn:hover, body .mt-pg-btn.active { background:#39B86C !important; color:#fff !important; border-color:#39B86C !important; } body .mt-pg-sep { color:#6B7280 !important; } /* ── 14. Project Zoom (proj_rp_projectzoom.asp) — flatten blue/orange palette proj-member.css :2606+ uses #1565C0/#0D2137 + orange #E65100 mix Modern Corp FLAT: solid green for icons + headers, table green tints ── */ /* Header card */ body .prz-hdr { border-bottom-color:#BFE5BC !important; } body .prz-hdr-icon { background:#0F5D36 !important; } body .prz-title { color:#0F5D36 !important; } body .prz-sub { color:#6B7280 !important; } body .prz-sub strong { color:#0F5D36 !important; } /* 3 Stat icons — all solid green family (count/value/avg) */ body .prz-stat { border-color:#BFE5BC !important; } body .prz-stat-count .prz-stat-icon { background:#0F5D36 !important; } body .prz-stat-value-total .prz-stat-icon { background:#39B86C !important; } body .prz-stat-avg .prz-stat-icon { background:#2DA15C !important; } body .prz-stat-value { color:#0F5D36 !important; } body .prz-stat-label { color:#6B7280 !important; } /* Toolbar */ body .prz-tb-lbl { color:#0F5D36 !important; } body .prz-select { color:#0F5D36 !important; border-color:#BFE5BC !important; } body .prz-select:focus { outline-color:#39B86C !important; } /* Table */ body .prz-tbl-wrap { border-color:#BFE5BC !important; } body .prz-tbl thead tr { background:#0F5D36 !important; color:#fff !important; } body .prz-tbl td { border-bottom-color:#E5E7EB !important; } body .prz-tbl tbody tr:nth-child(even) { background:#F0FAF3 !important; } body .prz-tbl tbody tr:hover { background:#DDF5E7 !important; } /* Table cell text */ body .prz-td-date { color:#6B7280 !important; } body .prz-td-code { color:#0F5D36 !important; } body .prz-td-name a { color:#2DA15C !important; } body .prz-td-name a:hover { color:#0F5D36 !important; } body .prz-td-value { color:#0F5D36 !important; } body .prz-td-prov { color:#6B7280 !important; } body .prz-ver { color:#6B7280 !important; } /* ── 14b. Premium Tech mirror for prz-* ─────────────────────────── */ body.style-premium-tech .prz-hdr-icon { background:#064E3B !important; } body.style-premium-tech .prz-title { color:#064E3B !important; } body.style-premium-tech .prz-sub strong { color:#064E3B !important; } body.style-premium-tech .prz-stat-count .prz-stat-icon { background:#064E3B !important; } body.style-premium-tech .prz-stat-value-total .prz-stat-icon { background:#10B981 !important; } body.style-premium-tech .prz-stat-avg .prz-stat-icon { background:#059669 !important; } body.style-premium-tech .prz-stat-value { color:#064E3B !important; } body.style-premium-tech .prz-tbl thead tr { background:#064E3B !important; } body.style-premium-tech .prz-tbl tbody tr:nth-child(even) { background:#ECFDF5 !important; } body.style-premium-tech .prz-tbl tbody tr:hover { background:#D1FAE5 !important; } body.style-premium-tech .prz-td-name a { color:#059669 !important; } body.style-premium-tech .prz-td-name a:hover { color:#064E3B !important; } /* ── 15. indexnew.asp directory section — icon color fix ────────── .dir-icon มี background:var(--light) (เขียวอ่อน) แต่ ใน inherit color จาก visited link (default browser = purple #551A8B) → ทำให้ไอคอนเป็นสีม่วงหลังเคยคลิก Fix: force green icon color คงเส้นคงวากับ theme */ body .dir-icon, body .dir-icon i, body .dir-card .dir-icon i, body .dir-card:visited .dir-icon i, body .dir-card:hover .dir-icon i { color:#0F5D36 !important; } body .dir-count { color:#0F5D36 !important; } body.style-premium-tech .dir-icon, body.style-premium-tech .dir-icon i, body.style-premium-tech .dir-card .dir-icon i, body.style-premium-tech .dir-card:visited .dir-icon i, body.style-premium-tech .dir-card:hover .dir-icon i { color:#064E3B !important; } body.style-premium-tech .dir-count { color:#064E3B !important; } /* ── 16. icons-{developer,architect,engineer,contractor} sidebar ─── .cc-icon: เดิมเป็น gradient (--accent → --steel) ที่มืดเกิน → solid bright .side-card-dark: เดิมเป็น var(--navy) #0F5D36 (deep) → mid green ตรงกับ FLAT philosophy + ตัด white text ได้ดี */ body .cc-icon { background:#39B86C !important; } body .cc-icon i, body .cc-icon .icofont { color:#FFFFFF !important; } body .side-card-dark { background:#2DA15C !important; } body.style-premium-tech .cc-icon { background:#10B981 !important; } body.style-premium-tech .side-card-dark { background:#059669 !important; } /* ── 17. icons-newsdetail.asp — เพิ่มขนาดรูปข่าว ───────────────── เดิม .detail-hero-img height:260px fixed + object-fit:cover (crop) → รูปข่าวขนาดเล็กเกิน + ตัดส่วนสำคัญ Fix: ใช้ natural aspect ratio (height:auto + object-fit:contain) + max-height กันสูงเกิน + min-height กันรูปไม่มีโหลด */ body .detail-hero-img{ height:auto !important; min-height:200px !important; max-height:620px !important; background:#F0FAF3 !important; } body .detail-hero-img img{ width:100% !important; height:auto !important; max-height:620px !important; object-fit:contain !important; } /* ── 18. icons-buyads.asp — icon boxes มืดเกิน ──────────────────── .ads-why-icon: solid var(--steel) #2DA15C (OK กลางๆ — ไม่มืด) .ads-pkg-icon: gradient(--steel → --navy) #2DA15C → #0F5D36 (มืดที่ขอบ) → solid bright var(--accent) #39B86C — FLAT philosophy + ตัด white icon ได้ดี Baseline bug: icons-pages.css:512 ใช้ selector ".ads-why-icon .icofont" แต่ ใช้ class "icofont-XXX" (เช่น icofont-users-alt-4) — ไม่ match -> icon inherit body color (#1E1E1E ดำ). Override below ด้วย attribute selector ที่ match class prefix ทุกตัว. */ body .ads-why-icon { background:#39B86C !important; } body .ads-pkg-icon { background:#39B86C !important; } body .ads-pkg-card::before { background:#39B86C !important; } html body .ads-why-icon i[class^="icofont-"], html body .ads-why-icon i[class*=" icofont-"], html body .ads-pkg-icon i[class^="icofont-"], html body .ads-pkg-icon i[class*=" icofont-"]{ color:#fff !important; } body.style-premium-tech .ads-why-icon { background:#10B981 !important; } body.style-premium-tech .ads-pkg-icon { background:#10B981 !important; } body.style-premium-tech .ads-pkg-card::before { background:#10B981 !important; } /* ── 19. projmain.asp data table — soften + flatten ──────────────── เดิม: - header bg: linear-gradient(--mn, --ms) (เขียวเข้ม gradient) → กระแทกตา - cells weight 700/600/800 ทั่ว → ทุกอย่างเด่นพร้อมกัน → รก - ไม่มี zebra striping ตามที่ user ขอ: 1) header bg อ่อนลง + flat (no gradient) 2) ลด weight ทุกอย่าง = normal (เท่ากับวันที่/จังหวัด ที่ไม่มี weight) รวม stage badge + pagination 3) zebra striping (สลับ white / เขียวอ่อน) ใน tbody */ body .pm-table th{ background:#DDF5E7 !important; /* tint — อ่อนสะอาด */ color:#0F5D36 !important; /* deep green text — ตัดได้ */ font-weight:600 !important; /* ลดจาก 700 เป็น 600 */ } /* Zebra striping — even rows light green, odd white */ body .pm-table tbody tr:nth-child(even) td { background:#F0FAF3 !important; } body .pm-table tbody tr:nth-child(odd) td { background:#FFFFFF !important; } /* Hover ต้องเข้มกว่า zebra เพื่อให้เห็น */ body .pm-table tbody tr:hover td { background:#DDF5E7 !important; } /* Body cells — normal weight ทุก column */ body .pm-table tbody td, body .pm-td-date, body .pm-td-code, body .pm-td-code span, body .pm-td-name, body .pm-td-name a, body .pm-td-value, body .pm-td-prov { font-weight:400 !important; } /* Stage badges — ทุกประเภท normal */ body .pm-td-stage, body .pm-s-prep, body .pm-s-design, body .pm-s-design2, body .pm-s-bid, body .pm-s-docs, body .pm-s-result, body .pm-s-build, body .pm-s-done { font-weight:400 !important; } /* Pagination — normal ทุกปุ่ม (active คง 500 เล็กน้อยให้เห็นว่าเลือก) */ body .pm-pg-btn { font-weight:400 !important; } body .pm-pg-btn.active { font-weight:500 !important; } /* Premium Tech mirror */ body.style-premium-tech .pm-table th{ background:#D1FAE5 !important; color:#064E3B !important; } body.style-premium-tech .pm-table tbody tr:nth-child(even) td { background:#ECFDF5 !important; } body.style-premium-tech .pm-table tbody tr:hover td { background:#D1FAE5 !important; } /* ── 20. projmain.asp — sector/stage tabs + header polish + code alignment ── 3 จุดต่อจาก block 19: (A) Sector/Stage tab buttons (.pm-tab-btn) — เดิม font-weight:700 → ลดเป็น 500 (เด่นน้อยลง, ตรงกับธีมเดิมที่ลด weight ทั้งหน้า) .pm-tabs-stage-label ก็ลดจาก 600 → 400 (B) Table header (.pm-table th) — block 19 ใช้ #DDF5E7 ซึ่งเป็นสีเดียว กับ row hover → ดูชนกัน เห็น hover ไม่ได้ → bump header เป็น #BFE5BC (เข้มขึ้น 1 ระดับ) + ใส่ border-right สีขาว 2px เพื่อสร้าง cell-spacing แบบ visual (C) pm-td-code (รหัสโครงการ) เด้งสูงไม่ตรงบรรทัด — เดิม display:flex + align-items:center + Barlow Condensed (line-height/baseline ต่างจาก Sarabun ของ td อื่น) → ทำให้ text baseline ไม่ตรงกัน เมื่อ row สูงขึ้นเพราะ "ใหม่" badge ในคอลัมน์ชื่อ Fix: เปลี่ยนกลับเป็น table-cell + vertical-align middle + ★ icon float:right (ไม่ใช้ flex space-between แล้ว) */ /* (A) tab buttons — ลด weight */ body .pm-tab-btn { font-weight:500 !important; } body .pm-tabs-stage-label { font-weight:400 !important; } /* (B) header — เข้มขึ้น + cell-spacing สีขาว */ body .pm-table th{ background:#BFE5BC !important; /* darker than row hover #DDF5E7 */ color:#0F5D36 !important; font-weight:600 !important; border-right:2px solid #FFFFFF !important; border-bottom:2px solid #FFFFFF !important; } body .pm-table th:last-child { border-right:none !important; } /* (C) pm-td-code — back to table-cell flow, ★ float right */ body .pm-td-code{ display:table-cell !important; vertical-align:middle !important; text-align:left !important; } body .pm-td-code > img{ float:right !important; margin-top:2px !important; } /* Premium Tech mirror */ body.style-premium-tech .pm-table th{ background:#A7F3D0 !important; color:#064E3B !important; border-right:2px solid #FFFFFF !important; border-bottom:2px solid #FFFFFF !important; } body.style-premium-tech .pm-table th:last-child { border-right:none !important; } /* ── 21. header_proj drawer — 6-step green gradient + font polish ──── 3 ปัญหาที่ user รายงาน: (A) เดิม section 1-6 ใช้สีเขียวเดียวกัน (#0F5D36) ดูเรียบเกินไป → ไล่ 6 ระดับสีเขียว (deep → lighter) ให้ "เรียบหรูแต่แตกต่างกัน" Lightness step ~5% ต่อ section, ทุกสีคุม contrast กับ white text (อย่างน้อย AA Large) (B) Font หนาเกิน + เล็กเกิน .mb-sec-hdr weight 700->500, size 13px->14.5px .mb-icon-btn span weight 600->400, size 11.5px->12.5px .mb-sec-hdr i (icon gold) keep gold tone (C) Disabled state สำหรับ "รถไฟทางคู่" + "รถไฟความเร็วสูง" (อยู่ระหว่างปรับปรุง — disable ไปก่อน) greyed + cursor:not-allowed + no hover effect */ /* (A) 6-step green gradient — section 1 (admin) deepest, section 6 (mgmt) lightest */ body[class] .mb-sec-h-admin { background:#0F5D36 !important; } /* deepest */ body[class] .mb-sec-h-crm { background:#1E6E45 !important; } body[class] .mb-sec-h-proj { background:#2D8055 !important; } body[class] .mb-sec-h-cont { background:#3C9265 !important; } body[class] .mb-sec-h-map { background:#4BA475 !important; } body[class] .mb-sec-h-mgmt { background:#5AB685 !important; } /* lightest */ /* (B) font weight/size polish */ body .mb-sec-hdr{ font-weight:500 !important; font-size:14.5px !important; letter-spacing:.02em !important; } body .mb-icon-btn span{ font-weight:400 !important; font-size:12.5px !important; } /* (C) disabled state — รถไฟ items */ body .mb-icon-btn.mb-disabled{ opacity:.45 !important; cursor:not-allowed !important; pointer-events:auto !important; /* allow tooltip on hover */ filter:grayscale(.4) !important; } body .mb-icon-btn.mb-disabled:hover{ transform:none !important; box-shadow:none !important; background:var(--ml) !important; border-color:#C8E0CC !important; } body .mb-icon-btn.mb-disabled .mb-iico{ background:#E5E7EB !important; color:#9CA3AF !important; } /* Premium Tech mirror — emerald scale */ body.style-premium-tech .mb-sec-h-admin { background:#064E3B !important; } body.style-premium-tech .mb-sec-h-crm { background:#075F47 !important; } body.style-premium-tech .mb-sec-h-proj { background:#087053 !important; } body.style-premium-tech .mb-sec-h-cont { background:#0A815F !important; } body.style-premium-tech .mb-sec-h-map { background:#0B926B !important; } body.style-premium-tech .mb-sec-h-mgmt { background:#0DA377 !important; } /* ── 22. header_proj typography polish — section 7 + top nav ────── ต่อจาก block 21 (drawer section 1-6 typography). User ขอลด weight ของ section 7 + แถบ nav ด้านบนให้บางลง สอดคล้องกับงาน de-bold ในส่วนอื่น Top nav (.mb-qn-item etc): .mb-menu-trigger (☰ เมนู) 700 -> 500 .mb-qn-item (nav links) 600 -> 400 .mb-btn-logout 700 -> 500 Section 7 (ส่วนพิเศษ ขวาบน): .mb-special-badge-buy (ซื้อเพิ่ม) 800 -> 600 .mb-special-promo (คำอธิบาย) 600 -> 400 .mb-special-promo-btn (ดูแพ็กเกจ) 700 -> 500 .mb-sp7-lbl (5 icon labels) 700 -> 400 .mb-sp7-free-tag (ฟรี / ฟรี 1 เดือน) 800 -> 600 .mb-sp7-report-hdr (รายงาน...) 800 -> 500 .mb-sp7-report-count (10 รายงาน) 700 -> 600 .mb-sp7-ritem (report list rows) 600 -> 400 */ /* Top nav bar */ body .mb-menu-trigger { font-weight:500 !important; } body .mb-qn-item { font-weight:400 !important; } body .mb-btn-logout { font-weight:500 !important; } /* Section 7 — special block */ body .mb-special-badge-buy { font-weight:600 !important; } body .mb-special-promo { font-weight:400 !important; } body .mb-special-promo-btn { font-weight:500 !important; } body .mb-sp7-lbl { font-weight:400 !important; } body .mb-sp7-free-tag { font-weight:600 !important; } body .mb-sp7-report-hdr { font-weight:500 !important; } body .mb-sp7-report-count { font-weight:600 !important; } body .mb-sp7-ritem { font-weight:400 !important; } /* ── 23. drawer section header icons — alternating gold ↔ mint ───── After block 21 added a 6-step green gradient to section headers, the inline icons (.mb-sec-hdr i) became invisible because they inherit color: var(--goldb) which block 1 overrode to #39B86C (mid-green) — same hue as the new backgrounds. Fix: give each section a contrasting icon color in an alternating rhythm (gold on odd sections, light mint on even). Both colors read clearly on every shade of green from #0F5D36 to #5AB685. section 1 admin -> gold #FFD54F section 2 crm -> mint #BFE5BC section 3 proj -> gold #FFD54F section 4 cont -> mint #BFE5BC section 5 map -> gold #FFD54F section 6 mgmt -> mint #BFE5BC Also pin section-header text to white (was inherited) and bump icon size slightly for visual weight parity with the larger header font set in block 21. */ body[class] .mb-sec-h-admin i { color:#FFD54F !important; } body[class] .mb-sec-h-crm i { color:#BFE5BC !important; } body[class] .mb-sec-h-proj i { color:#FFD54F !important; } body[class] .mb-sec-h-cont i { color:#BFE5BC !important; } body[class] .mb-sec-h-map i { color:#FFD54F !important; } body[class] .mb-sec-h-mgmt i { color:#BFE5BC !important; } /* Slightly larger icon so it doesn't get lost next to 14.5px text */ body .mb-sec-hdr i { font-size:17px !important; } /* Pin header text to white across all 6 sections (was inherited from .mb-sec-hdr default but worth being explicit now that backgrounds differ). */ body[class] .mb-sec-h-admin, body[class] .mb-sec-h-crm, body[class] .mb-sec-h-proj, body[class] .mb-sec-h-cont, body[class] .mb-sec-h-map, body[class] .mb-sec-h-mgmt { color:#FFFFFF !important; } /* Premium Tech mirror — same alternating pattern (gold + mint still look good on emerald 600/900) */ body.style-premium-tech .mb-sec-h-admin i { color:#FCD34D !important; } body.style-premium-tech .mb-sec-h-crm i { color:#D1FAE5 !important; } body.style-premium-tech .mb-sec-h-proj i { color:#FCD34D !important; } body.style-premium-tech .mb-sec-h-cont i { color:#D1FAE5 !important; } body.style-premium-tech .mb-sec-h-map i { color:#FCD34D !important; } body.style-premium-tech .mb-sec-h-mgmt i { color:#D1FAE5 !important; } /* ── 24. projmain.asp data table — bigger project-name + whole row clickable 1) ชื่อโครงการ font ใหญ่ขึ้นนิด (13px -> 14.5px) เพื่อให้เด่นกว่า columns อื่น 2) ทั้ง คลิกได้ (cursor:pointer) — JS handler ใน projmain.asp เปิด proj_detail.asp ใน new tab เมื่อคลิกที่ td ว่าง (และยังคงเปิดผ่าน ตามปกติเมื่อคลิกที่ลิงก์ชื่อ) 3) Visited state — class .pm-visited (เพิ่มจาก JS เมื่อ click หรืออ่าน จาก localStorage บน page load) — text เทาทั้งแถว, ★ icon desaturate, stage badge จาง */ body .pm-td-name a { font-size:14px !important; } body .pm-table tbody tr.pm-row { cursor:pointer !important; } /* Visited — สีเทาทั้งแถว */ body .pm-table tbody tr.pm-visited td, body .pm-table tbody tr.pm-visited .pm-td-date, body .pm-table tbody tr.pm-visited .pm-td-code, body .pm-table tbody tr.pm-visited .pm-td-code span, body .pm-table tbody tr.pm-visited .pm-td-value, body .pm-table tbody tr.pm-visited .pm-td-prov, body .pm-table tbody tr.pm-visited .pm-td-name a, body .pm-table tbody tr.pm-visited .pm-td-name a:visited{ color:#9CA3AF !important; } body .pm-table tbody tr.pm-visited .pm-td-stage{ opacity:.65 !important; } /* ★ favorite-level icon คงสีเดิมแม้ row จะ visited (per user request — ดาวระบุ intlevel ที่ user set, ไม่ใช่ visited state) */ body .pm-table tbody tr.pm-visited img{ filter:none !important; opacity:1 !important; } /* Hover เด่นกว่า visited gray — bg เปลี่ยน + text กลับมาสีปกติชั่วคราว */ body .pm-table tbody tr.pm-visited:hover td, body .pm-table tbody tr.pm-visited:hover .pm-td-name a{ color:#0F5D36 !important; } /* Last-login by-name display in top bar */ body .mb-ti-by{ color:rgba(255,255,255,.7) !important; font-weight:400 !important; margin-left:2px; } /* ── 25. proj_search.asp — filter form de-bold + pagination thin ── proj_search.asp ใช้ .pm-table + .pm-td-* ดังนั้น block 19/20/23/24 ครอบคลุม font ของตาราง + row click + visited gray + cell-spacing อยู่แล้ว. ที่เหลือคือ: (A) Filter form (.ps-*) — labels/pills/mode-btn ลด weight (B) Card header — gradient เขียวเข้ม → solid (FLAT) + ลด weight (C) Pagination .fv-pgn-ctl (proj_search ใช้ตัวนี้ ไม่ใช่ .pm-pg-btn) */ /* (A) Filter form typography .ps-label = "วันที่รายงานล่าสุด / รหัสโครงการ / มูลค่าโครงการ / ภาค / จังหวัด ..." user ขอให้ "หนา" — keep 600 (เด่นเป็นหัวข้อย่อยของ field) .ps-pill / .ps-range-sep / .ps-unit / .ps-chk-label / .ps-mode-btn = badges + small labels → 400 (เนื้อหา ไม่เด่น) */ body .ps-page-title { font-weight:500 !important; } body .ps-mode-btn { font-weight:500 !important; } body .ps-label { font-weight:600 !important; } body .ps-pill { font-weight:400 !important; } body .ps-range-sep { font-weight:400 !important; } body .ps-unit { font-weight:400 !important; } body .ps-chk-label { font-weight:400 !important; } /* Search / Clear buttons — เดิม 700 หนาเกิน → 500 */ body .ps-btn { font-weight:500 !important; } /* (B) Card header — flatten gradient + lighter text */ body .ps-card-hdr{ background:#0F5D36 !important; } body .ps-card-hdr-left { font-weight:500 !important; } /* (C) Pagination */ body .fv-pgn-ctl button { font-weight:400 !important; } body .fv-pgn-ctl button.active{ font-weight:500 !important; } body .fv-pgn-info { font-weight:400 !important; } body .fv-pgn-info strong { font-weight:500 !important; } /* Premium Tech mirror */ body.style-premium-tech .ps-card-hdr { background:#064E3B !important; } /* ── 26. proj_detail.asp — white section backgrounds + de-bold content User ขอ: 1) Section headers (.pd-proj-hdr, .pd-card-hdr) เปลี่ยน bg จากเขียวเข้ม gradient → solid white. หัวข้อยังเด่นด้วยสี deep green + bold พอประมาณ 2) เนื้อหาภายในการ์ดทั้งหมด → font weight บาง ยกเว้นหัวข้อย่อย (ชื่อบริษัท, ชื่อบุคคล) ที่ยังคงเด่นพอ 3) "เจ้าของโครงการ" header bg ออก (ใช้ .pd-card-hdr → white แล้ว) 4) "ผู้ติดต่อ" / "กรรมการผู้จัดการ" / "ไม่เปิดเผยชื่อ (PDPA)" บางลง */ /* ─── (A) Section card headers ─── */ /* แก้ 2026-05-13: white โล่งเกินไป → ใช้ tint (#DDF5E7) แทน คงตัด section ชัดเจน แต่ .pd-proj-hdr (project header card ด้านบน) ยังคงเป็น white ตามที่ user ขอ ("ยกเว้น snap96.jpg คงไว้") */ body .pd-card-hdr{ background:#DDF5E7 !important; color:#0F5D36 !important; font-weight:600 !important; border-bottom:1px solid #BFE5BC !important; } body .pd-card-hdr i{ color:#0F5D36 !important; } /* ─── (B) Big project header — flip text/badge colors for white bg ─── */ body .pd-proj-hdr{ background:#FFFFFF !important; border:1px solid #DDF5E7 !important; box-shadow:0 1px 3px rgba(15,93,54,.06) !important; } /* User feedback 2026-05-13: รหัสโครงการ (.pd-proj-code-num) ไม่ต้องเด่น — เล็กลง ชื่อโครงการ (.pd-proj-title) ให้เด่นแทน — ใหญ่ขึ้น + กันชื่อยาวแตกบรรทัด */ body .pd-proj-code { color:#6B7280 !important; } body .pd-proj-code-num{ color:#0F5D36 !important; font-size:14px !important; font-weight:600 !important; letter-spacing:.02em !important; } body .pd-proj-title{ color:#0F5D36 !important; font-size:24px !important; font-weight:600 !important; line-height:1.3 !important; word-break:break-word !important; overflow-wrap:break-word !important; } body .pd-proj-value { color:#0F5D36 !important; font-weight:700 !important; } body .pd-proj-value small { color:#6B7280 !important; } /* Meta badges — flip transparent-on-dark to solid-on-light */ body .pd-meta-badge { font-weight:500 !important; } body .pd-badge-cat{ background:#F0FAF3 !important; color:#0F5D36 !important; border:1px solid #BFE5BC !important; } body .pd-badge-sec-pri{ background:#E8F5E9 !important; color:#2E7D32 !important; border:1px solid #A5D6A7 !important; } body .pd-badge-sec-gov{ background:#FFF8E1 !important; color:#E65100 !important; border:1px solid #FFE082 !important; } body .pd-badge-update{ background:#F4F6F5 !important; color:#6B7280 !important; } body .pd-badge-province{ background:#FFF4D6 !important; color:#7B3A00 !important; border:1px solid #F2D98C !important; box-shadow:none !important; font-weight:600 !important; } /* Category badge — prominent solid green pill (override baseline .pd-badge-cat-prominent) */ body .pd-badge-cat-prominent{ background:#0F5D36 !important; color:#FFFFFF !important; border:1px solid #0A4326 !important; box-shadow:none !important; font-weight:600 !important; font-size:12px !important; padding:4px 10px !important; letter-spacing:0 !important; } body .pd-badge-cat-prominent i{ color:#FFFFFF !important; font-size:13px !important; margin-right:4px !important; } /* Print button — outlined-on-dark → solid-on-light */ body .pd-print-report-btn{ background:#0F5D36 !important; border:1.5px solid #0F5D36 !important; color:#FFFFFF !important; font-weight:500 !important; } body .pd-print-report-btn:hover{ background:#1E6E45 !important; border-color:#1E6E45 !important; } body .pd-print-report-btn i{ color:#FFD54F !important; } /* ─── (C) Card body — de-bold ─── */ body .pd-co-name { font-weight:600 !important; } /* ชื่อบริษัท (sub-title) */ body .pd-co-lbl { font-weight:400 !important; } body .pd-person-name { font-weight:600 !important; } /* ชื่อบุคคล */ body .pd-person-lbl { font-weight:400 !important; } body .pd-contact-persons-hdr { font-weight:400 !important; } /* "ผู้ติดต่อ" */ body .pd-person-pos { font-weight:400 !important; } /* "กรรมการผู้จัดการ" badge */ body .pd-pdpa-badge { font-weight:400 !important; } /* "ไม่เปิดเผยชื่อ (PDPA)" badge */ /* Premium Tech mirror — emerald-deeper for text/headers */ body.style-premium-tech .pd-card-hdr, body.style-premium-tech .pd-card-hdr i{ color:#064E3B !important; } body.style-premium-tech .pd-card-hdr { border-bottom-color:#D1FAE5 !important; } body.style-premium-tech .pd-proj-hdr { border-color:#D1FAE5 !important; } body.style-premium-tech .pd-proj-code-num, body.style-premium-tech .pd-proj-title, body.style-premium-tech .pd-proj-value { color:#064E3B !important; } body.style-premium-tech .pd-print-report-btn{ background:#064E3B !important; border-color:#064E3B !important; } /* ── 27. proj_detail.asp sidebar — Quick Info card (snap97) ────── sidebar มี 2 card: "ข้อมูลโครงการ" + "ประวัติขั้นตอน" เดิม .pd-qb-hdr เป็น gradient เขียวเข้ม → flatten เป็นเขียวอ่อน เดียวกับ .pd-card-hdr (block 26 updated) + de-bold body content */ /* (A) Header — เปลี่ยน bg เป็นเขียวอ่อนเดียวกับ pd-card-hdr */ body .pd-qb-hdr{ background:#DDF5E7 !important; color:#0F5D36 !important; font-weight:600 !important; border-bottom:1px solid #BFE5BC !important; } body .pd-qb-hdr i{ color:#0F5D36 !important; } /* (B) Body — de-bold labels + values */ body .pd-qb-lbl { font-weight:400 !important; } body .pd-qb-val { font-weight:500 !important; } body .pd-qb-badge { font-weight:500 !important; } /* Premium Tech mirror */ body.style-premium-tech .pd-qb-hdr, body.style-premium-tech .pd-qb-hdr i{ color:#064E3B !important; } body.style-premium-tech .pd-qb-hdr { background:#D1FAE5 !important; border-bottom-color:#A7F3D0 !important; } body.style-premium-tech .pd-card-hdr { background:#D1FAE5 !important; border-bottom-color:#A7F3D0 !important; } /* ── 28. proj_detail.asp stage history + spec values + timeline ── 3 จุดต่อจาก block 26/27: (A) .pd-hist-item.active ("ครั้งที่N ... (ล่าสุด)") — เดิม gradient เขียวเข้ม #2E7D32 → #388E3C ดู contrast แรงเกิน เทียบกับ section headers ที่เป็น tint แล้ว → solid Modern Corp green #2DA15C, weight 600 (ไม่ shouty) (B) .pd-hist-item (inactive ครั้งที่ 1-N) — weight 600 → 400 (C) .pd-spec-val ("34 ชั้น" / "106 ยูนิต" / "682.24 ล้าน" / "กรุงเทพมหานคร" / "งานสร้างใหม่") weight 700 → 500 .pd-spec-val.highlight (มูลค่า) เก็บ heavier เป็น 600 (D) .pd-spec-label (จำนวนชั้น/จำนวนห้อง/มูลค่า/ฯลฯ labels) 700 → 500 (E) .pd-tlb-val ("เริ่มก่อสร้างภายในเดือน มีนาคม 2567" + "งานแล้วเสร็จ ไตรมาสที่ 2 ปี 2570") weight 800 → 600 (F) .pd-tlb-label 700 → 400 */ /* (A) active history item — flat solid Modern Corp green */ body .pd-hist-item.active{ background:#2DA15C !important; border-color:#2DA15C !important; color:#FFFFFF !important; font-weight:600 !important; } /* (B) inactive history items */ body .pd-hist-item { font-weight:400 !important; } /* (C) spec values */ body .pd-spec-val { font-weight:500 !important; } body .pd-spec-val.highlight { font-weight:600 !important; } /* (D) spec labels */ body .pd-spec-label { font-weight:500 !important; } /* (E) (F) timeline banner (วันเริ่ม / วันสิ้นสุด) */ body .pd-tlb-val { font-weight:600 !important; } /* Match Construction Start BG/border to Construction End (per user request) */ body .pd-tlb-start{ background:linear-gradient(135deg,#FFF3E0,#FFF8F0) !important; border-color:#FFA726 !important; } body .pd-tlb-label { font-weight:400 !important; } /* Premium Tech mirror */ body.style-premium-tech .pd-hist-item.active{ background:#059669 !important; border-color:#059669 !important; } /* ── 29. proj_detail.asp memo card header — restore amber theme ── .pd-memo-box has amber/cream styling (background #FFF8E1, border #FFB74D) so its header should match. Block 26's generic .pd-card-hdr -> #DDF5E7 override beat .pd-memo-hdr's own gradient because the body[class] selector has higher specificity. Use a higher-specificity selector (.pd-card-hdr.pd-memo-hdr) so the memo card gets a light-amber tint header consistent with its own block, while other section headers stay green-tint. */ body .pd-card-hdr.pd-memo-hdr{ background:#FFF3E0 !important; color:#7B3A00 !important; border-bottom:1px solid #FFB74D !important; font-weight:600 !important; } body .pd-card-hdr.pd-memo-hdr i{ color:#E65100 !important; } body.style-premium-tech .pd-card-hdr.pd-memo-hdr{ background:#FEF3C7 !important; color:#92400E !important; border-bottom-color:#FCD34D !important; } body.style-premium-tech .pd-card-hdr.pd-memo-hdr i{ color:#D97706 !important; } /* ── 30. proj_detail.asp memo card body — de-bold everything ───── User: "ปรับ font ให้บางทั้งหมด รวมทั้งปุ่ม" (memo card content) ครอบคลุม: section labels, radio options, sales toggle, sales-current pill, sub-labels, voice button, action buttons (ลบ/บันทึก), friend banner, inputs/select/textarea */ /* Section labels "1. เลือกระดับความสนใจ" / "2. ชื่อพนักงานขาย" ฯลฯ */ body .pd-memo-label { font-weight:500 !important; } /* Sub-labels "วันที่คาดการณ์", "มูลค่าคาดหวัง", info hints */ body .pd-memo-sublabel { font-weight:400 !important; } body .pd-memo-hint { font-weight:400 !important; } /* Radio rows "สนใจมาก / ปานกลาง / ไม่สนใจ / ปิดงานได้" */ body .pd-memo-radio-label { font-weight:400 !important; } /* Sales toggle tabs "เลือกจากระบบ / พิมพ์ชื่อเอง" */ body .pd-memo-emp-tab { font-weight:500 !important; } /* Sales current pill */ body .pd-sales-current-title { font-weight:500 !important; font-size:14px !important; color:#5D4037 !important; } body .pd-sales-current-name { font-weight:700 !important; font-size:16px !important; color:#BF360C !important; } /* Enlarge current-sales frame so user can clearly see who owns this project */ body .pd-sales-current{ padding:10px 14px !important; margin-bottom:10px !important; gap:9px !important; font-size:14px !important; background:linear-gradient(135deg,#FFF3E0,#FFE8C9) !important; border:1.5px solid #FFB74D !important; border-radius:8px !important; box-shadow:0 1px 4px rgba(230,81,0,.08) !important; } body .pd-sales-current-icon{ font-size:18px !important; color:#E65100 !important; } body .pd-sales-current-name.pd-sales-none{ color:#9E9E9E !important; font-weight:500 !important; font-style:italic !important; font-size:15px !important; } /* Inputs / select / textarea */ body .pd-memo-input, body .pd-memo-select, body .pd-memo-textarea { font-weight:400 !important; } /* Voice + main action buttons */ body .pd-memo-voice-btn { font-weight:500 !important; } body .pd-memo-btn { font-weight:500 !important; } /* Friend banner (กดเพื่อนจองโครงการเดียวกัน) */ body .pd-memo-friend-banner { font-weight:500 !important; } /* ── 31. proj_detail.asp .pd-detail-remark — thin body, keep keyword bold The remark block ("หมายเหตุ ...") was 600 weight on the whole span. User wants the keyword "หมายเหตุ" (TH) / "remark" (EN) to stay bold while the body lines that follow read thin. Both languages already wrap the leading keyword in ..., so target that tag for the heavier weight and drop the span body to 400. Red color #C62828 stays as defined in proj-pages-main.css. */ body .pd-detail-remark { font-weight:400 !important; } body .pd-detail-remark u { font-weight:700 !important; } /* ── 32. follow-up de-bold (top bar info, active history pill, Export button) ─────────────────────────────────────────────── Three spots still felt heavier than the rest of the de-bolded UI: (A) .mb-ti strong — username/IP/timestamp values in the top bar (e.g. "(icons)", "58.1.99.1", "13/5/2569 16:20"). HTML defaults to weight 700; downgrade to 500. (B) .pd-hist-item.active was set to 600 in block 28 — still loud next to the now-thinner UI. Drop to 500. (C) .pd-btn / .pd-btn-outline is the 'Export ผู้ติดต่อทั้งหมดไปที่ Excel' button (and other outline buttons in proj_detail); baseline weight 700 -> 500. */ body .mb-ti strong { font-weight:500 !important; } body .pd-hist-item.active { font-weight:500 !important; } body .pd-btn { font-weight:500 !important; } /* ── 33. proj_search.asp filter panel — visual separation L/R ──── In the filter mode (กรองข้อมูล) the 8 filter groups are arranged in 4 rows of 2 (.ps-inline-pair). Each group's CSS was just margin-bottom + a mint header strip — no card frame — so the left/right columns visually merged into one band. Fix: give every .ps-fg a proper card outline (mint border + white body + radius), pin the .ps-fg-hdr to the card's top (square inner corners), and widen the grid gap so the two columns read as 'two cards side-by-side' instead of 'one strip'. */ body .ps-fg{ border:1px solid #BFE5BC !important; border-radius:8px !important; background:#FFFFFF !important; overflow:hidden !important; margin-bottom:14px !important; } body .ps-fg-hdr{ background:#DDF5E7 !important; border-radius:0 !important; margin-bottom:0 !important; border-bottom:1px solid #BFE5BC !important; } body .ps-inline-pair{ gap:24px !important; } body.style-premium-tech .ps-fg{ border-color:#A7F3D0 !important; } body.style-premium-tech .ps-fg-hdr{ background:#D1FAE5 !important; border-bottom-color:#A7F3D0 !important; } /* ── 34. De-bold buttons and badges site-wide ──────────────────── 2026-05-13: continue the de-bold polish. Buttons + badges were still at 600-700 across most pages; bring them to 500 so they sit harmoniously with the now-thinner content. Coverage: Buttons — •