/* =================================================================== LocalGov CMS — Front-end stylesheet Colours/fonts come from CSS variables emitted by includes/theme.php: --primary --secondary --accent --grad-from --grad-to --site-font --base-font =================================================================== */ :root{ --radius: 14px; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --ink: #1f2937; --muted: #6b7280; --line: #e5e7eb; --bg: #f4f6fb; } *{ box-sizing: border-box; } i.fi, span.fi{ display:inline-flex; align-items:center; vertical-align:-.125em; line-height:1; } html{ scroll-behavior: smooth; } body{ margin:0; color:var(--ink); background:var(--bg); font-family: var(--site-font); font-size: 1rem; line-height: 1.7; } /* Website colour mode — a global tone filter chosen in the admin (โหมดสีของเว็บ). Applied to body so the entire public site (header, nav, content, footer) shifts tone together. Sticky nav still works since the scroll container is . */ body{ filter: var(--color-filter, none); } a{ color: var(--primary); text-decoration: none; } a:hover{ text-decoration: underline; } img{ max-width:100%; height:auto; } .container{ width:min(1200px, 92%); margin-inline:auto; } /* minimal utilities (front-end does not load Bootstrap) */ .d-inline-block{ display:inline-block; } .d-block{ display:block; } .w-100{ width:100%; } .mt-1{ margin-top:.25rem; } .mt-2{ margin-top:.5rem; } .mt-3{ margin-top:1rem; } .mt-4{ margin-top:1.5rem; } .mb-0{ margin-bottom:0; } .mb-1{ margin-bottom:.25rem; } .mb-2{ margin-bottom:.5rem; } .mb-3{ margin-bottom:1rem; } .mb-4{ margin-bottom:1.5rem; } .me-1{ margin-right:.25rem; } .me-2{ margin-right:.5rem; } .ms-2{ margin-left:.5rem; } .text-center{ text-align:center; } .text-muted{ color:var(--muted); } .small{ font-size:.875em; } .fw-600{ font-weight:600; } /* Accessibility font scaling via [data-fontscale] on */ html[data-fontscale="sm"]{ font-size: calc(var(--base-font) * .92); } html[data-fontscale="lg"]{ font-size: calc(var(--base-font) * 1.12); } /* High-contrast mode */ html[data-contrast="high"]{ filter: contrast(1.15) saturate(1.1); } html[data-contrast="high"] body{ background:#fff; } /* ---------- Top utility bar ---------- */ .topbar{ background:#0d1b2a; color:#cbd5e1; font-size:.85rem; } .topbar .container{ display:flex; align-items:center; justify-content:space-between; min-height:40px; gap:1rem; flex-wrap:wrap; } .topbar a{ color:#cbd5e1; } .topbar .tb-tools{ display:flex; align-items:center; gap:.35rem; } .tb-btn{ background:rgba(255,255,255,.08); border:0; color:#e2e8f0; border-radius:8px; padding:.18rem .5rem; cursor:pointer; font-size:.82rem; line-height:1; } .tb-btn:hover{ background:rgba(255,255,255,.2); } .tb-btn.active{ background:var(--primary); color:#fff; } /* ---------- Masthead ---------- */ .masthead{ background:#fff; border-bottom:3px solid var(--primary); } .masthead .container{ display:flex; align-items:center; gap:1rem; padding:.9rem 0; } .masthead .logo{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.8rem; } .masthead .site-name{ font-weight:700; font-size:1.35rem; color:var(--primary); line-height:1.25; } .masthead .site-tag{ color:var(--muted); font-size:.92rem; } .masthead .search{ margin-left:auto; } .masthead .search form{ display:flex; } .masthead .search input{ border:1px solid var(--line); border-radius:999px 0 0 999px; padding:.45rem .9rem; outline:none; min-width:180px; } .masthead .search button{ border:0; background:var(--primary); color:#fff; border-radius:0 999px 999px 0; padding:0 .9rem; cursor:pointer; } /* ---------- Main navigation ---------- */ .mainnav{ background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm); } .mainnav .container{ display:flex; align-items:center; } .nav-toggle{ display:none; background:transparent; border:0; color:#fff; font-size:1.5rem; padding:.6rem; cursor:pointer; } .menu{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; } .menu > li{ position:relative; } .menu > li > a{ display:block; color:#fff; padding:.85rem 1rem; font-weight:500; } .menu > li > a:hover{ background:rgba(255,255,255,.15); text-decoration:none; } .menu .submenu{ list-style:none; margin:0; padding:0; position:absolute; top:100%; left:0; min-width:230px; background:#fff; border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow-md); display:none; z-index:60; overflow:hidden; } .menu .submenu li:first-child a{ padding-top:.7rem; } .menu .submenu li:last-child a{ padding-bottom:.7rem; } .menu li:hover > .submenu{ display:block; } .menu .submenu a{ display:block; padding:.55rem 1.1rem; color:var(--ink); } .menu .submenu a:hover{ background:var(--accent); color:var(--primary); text-decoration:none; } .menu .caret{ font-size:.7rem; opacity:.8; margin-left:.2rem; } /* ---------- Hero / slider ---------- */ .hero{ position:relative; } .slider{ position:relative; overflow:hidden; } .slides{ display:flex; transition:transform .5s ease; } .slide{ min-width:100%; position:relative; aspect-ratio: 21/8; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); display:flex; align-items:center; } .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .slide .cap{ position:relative; z-index:2; color:#fff; width:min(1140px, 86%); margin-inline:auto; padding:1.6rem 0; text-shadow:0 2px 12px rgba(0,0,0,.4); } .slide.align-left .cap{ max-width:680px; margin-right:auto; } .slide .cap h2{ font-size:clamp(1.4rem,3vw,2.4rem); margin:0 0 .4rem; } .slide .cap p{ font-size:clamp(.95rem,1.6vw,1.2rem); margin:0; opacity:.95; } .slide .cap .btn-primary2{ display:inline-block; margin-top:1.5rem; } .slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.45),transparent 70%); z-index:1; } .slider-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:.4rem; justify-content:center; z-index:3; } .slider-dots button{ width:11px; height:11px; border-radius:50%; border:2px solid #fff; background:transparent; cursor:pointer; padding:0; } .slider-dots button.active{ background:#fff; } .slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:rgba(0,0,0,.3); color:#fff; border:0; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.2rem; } .slider-arrow.prev{ left:12px; } .slider-arrow.next{ right:12px; } /* slider config: width style, fixed height, caption alignment */ .slider.boxed{ width:min(1200px, 92%); margin:1.2rem auto 0; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-md); } .slide.has-h{ aspect-ratio:auto; } .slide.align-center{ justify-content:center; text-align:center; } .slide.align-center .cap{ max-width:760px; margin:0 auto; } .slide.align-center::after{ background:linear-gradient(rgba(0,0,0,.40),rgba(0,0,0,.46)); } .slide.align-right{ justify-content:flex-end; text-align:right; } .slide.align-right .cap{ margin-left:auto; } .slide.align-right::after{ background:linear-gradient(270deg,rgba(0,0,0,.5),transparent 70%); } /* ---------- Sections & cards ---------- */ .section{ padding:2.4rem 0; } .section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; gap:1rem; flex-wrap:wrap; } .section-title{ font-size:1.4rem; font-weight:700; color:var(--primary); position:relative; padding-left:.85rem; margin:0; } .section-title::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:5px; border-radius:4px; background:linear-gradient(var(--grad-from),var(--grad-to)); } .btn-more{ color:var(--primary); font-weight:500; } /* category filter chips (news / documents) */ .chip-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0 0 1.8rem; } .chip{ display:inline-block; padding:.45rem 1.05rem; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:.92rem; line-height:1.4; transition:.14s; box-shadow:var(--shadow-sm); } .chip:hover{ border-color:var(--primary); color:var(--primary); text-decoration:none; transform:translateY(-1px); } .chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; } .grid{ display:grid; gap:1.2rem; } .cols-1{ grid-template-columns: 1fr; } .cols-2{ grid-template-columns: repeat(2, 1fr); } .cols-3{ grid-template-columns: repeat(3, 1fr); } .cols-4{ grid-template-columns: repeat(4, 1fr); } .card2{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; } .card2:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .card2 .thumb{ aspect-ratio:16/9; background:var(--accent); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:2.4rem; overflow:hidden; } .card2 .thumb img{ width:100%; height:100%; object-fit:cover; } .card2 .body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1; } .card2 .cat{ font-size:.78rem; color:#fff; background:var(--secondary); padding:.12rem .55rem; border-radius:999px; align-self:flex-start; } .card2 .title{ font-weight:600; color:var(--ink); line-height:1.4; } .card2 .title a{ color:inherit; } .card2 .meta{ font-size:.82rem; color:var(--muted); margin-top:auto; } .pin{ color:#dc2626; } /* quick-links */ .quicklinks .ql{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; text-align:center; box-shadow:var(--shadow-sm); transition:.15s; display:block; color:var(--ink); } .quicklinks .ql:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); text-decoration:none; border-color:var(--primary); } .quicklinks .ql i{ font-size:2rem; color:var(--primary); } .quicklinks .ql .lab{ margin-top:.5rem; font-weight:500; } /* ---------- Breadcrumb + page ---------- */ .page-hero{ background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); color:#fff; padding:1.8rem 0; } .page-hero h1{ margin:0; font-size:clamp(1.4rem,3vw,2rem); } .breadcrumb2{ list-style:none; display:flex; gap:.4rem; padding:0; margin:.4rem 0 0; font-size:.88rem; opacity:.9; flex-wrap:wrap; } .breadcrumb2 a{ color:#fff; } .breadcrumb2 li::after{ content:"/"; margin-left:.4rem; opacity:.6; } .breadcrumb2 li:last-child::after{ content:""; } .layout{ display:grid; gap:1.6rem; align-items:start; margin:2rem 0; } .layout.with-sidebar{ grid-template-columns: 1fr 300px; } .layout.sidebar-left{ grid-template-columns: 300px 1fr; } .content-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); } .content-card :where(h2,h3){ color:var(--primary); } .content-card img{ border-radius:10px; } .sidebar .widget{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow-sm); margin-bottom:1.2rem; } .sidebar .widget h4{ margin:0 0 .7rem; font-size:1rem; color:var(--primary); border-bottom:2px solid var(--accent); padding-bottom:.4rem; } .sidebar .widget ul{ list-style:none; margin:0; padding:0; } .sidebar .widget li a{ display:block; padding:.4rem 0; border-bottom:1px dashed var(--line); color:var(--ink); font-size:.92rem; } /* page-blocks builder grid */ .block-grid{ display:grid; gap:1.4rem; margin-top:1.2rem; } .block{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow-sm); } .block h3{ margin-top:0; color:var(--primary); } /* list rows (news list, documents) */ .list-row{ display:flex; gap:1rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.9rem 1.1rem; margin-bottom:.7rem; box-shadow:var(--shadow-sm); } .list-row:hover{ border-color:var(--primary); } .list-row .date-badge{ flex:0 0 auto; width:60px; text-align:center; background:var(--accent); color:var(--primary); border-radius:10px; padding:.4rem; } .list-row .date-badge .d{ font-size:1.3rem; font-weight:700; line-height:1; } .list-row .date-badge .m{ font-size:.72rem; } .list-row .lr-body{ flex:1; min-width:0; } .list-row .lr-title{ font-weight:600; color:var(--ink); } .list-row .lr-meta{ font-size:.82rem; color:var(--muted); } .doc-ico{ font-size:1.6rem; color:var(--secondary); } /* forms */ .form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); } .form-card label{ font-weight:500; display:block; margin-bottom:.3rem; } .form-card .fc{ width:100%; border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem; font-family:inherit; font-size:1rem; margin-bottom:1rem; } .form-card .fc:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15); } .btn-primary2{ background:var(--primary); color:#fff; border:0; border-radius:10px; padding:.65rem 1.4rem; font-size:1rem; cursor:pointer; font-family:inherit; } .btn-primary2:hover{ filter:brightness(1.08); } .btn-ghost{ background:#fff; color:var(--primary); border:1px solid var(--primary); border-radius:10px; padding:.6rem 1.2rem; cursor:pointer; } .alert2{ border-radius:10px; padding:.8rem 1rem; margin-bottom:1rem; } .alert2.ok{ background:#dcfce7; color:#166534; } .alert2.err{ background:#fee2e2; color:#991b1b; } /* pagination */ .pager{ display:flex; gap:.35rem; justify-content:center; margin-top:1.6rem; flex-wrap:wrap; } .pager a, .pager span{ padding:.4rem .8rem; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; } .pager a:hover{ border-color:var(--primary); text-decoration:none; } .pager .active{ background:var(--primary); color:#fff; border-color:var(--primary); } .pager .disabled{ opacity:.45; } /* ---------- Footer ---------- */ .site-footer{ background:#0d1b2a; color:#cbd5e1; margin-top:3rem; } .site-footer a{ color:#cbd5e1; } .site-footer a:hover{ color:#fff; } .footer-grid{ display:grid; gap:1.6rem; padding:2.4rem 0; } .footer-col h4{ color:#fff; font-size:1.05rem; margin:0 0 .8rem; } .footer-col ul{ list-style:none; padding:0; margin:0; } .footer-col li{ padding:.22rem 0; font-size:.92rem; } .footer-social a{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; background:rgba(255,255,255,.1); border-radius:50%; margin-right:.4rem; font-size:1.1rem; } .footer-social a:hover{ background:var(--primary); color:#fff; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding:1rem 0; text-align:center; font-size:.86rem; color:#94a3b8; } .empty{ text-align:center; color:var(--muted); padding:2.5rem; background:#fff; border:1px dashed var(--line); border-radius:var(--radius); } /* ---------- Responsive ---------- */ @media (max-width: 992px){ .layout.with-sidebar, .layout.sidebar-left{ grid-template-columns: 1fr; } .cols-3, .cols-4{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px){ .masthead .search{ display:none; } .nav-toggle{ display:block; margin-left:auto; } .menu{ display:none; flex-direction:column; width:100%; background:linear-gradient(135deg,var(--grad-from),var(--grad-to)); } .menu.open{ display:flex; } .menu > li > a{ border-bottom:1px solid rgba(255,255,255,.12); } .menu .submenu{ position:static; display:block; box-shadow:none; border-radius:0; background:rgba(255,255,255,.08); } .menu .submenu a{ color:#e2e8f0; padding-left:2rem; } .menu .submenu a:hover{ background:rgba(255,255,255,.12); color:#fff; } .cols-2, .cols-3, .cols-4{ grid-template-columns: 1fr; } .block-grid{ grid-template-columns: 1fr !important; } }