/* =========================================================================
WHTC 2027 – single stylesheet
1. Tokens 5. Components (header, nav, hero, buttons, cards, modal, footer)
2. Reset / base 6. Home sections
3. Typography 7. Utilities (Tailwind-like: flex, grid, gap-4, mt-6, md:grid-cols-3 ...)
4. Layout Breakpoints: md = 768px, lg = 1000px
========================================================================= */
/* 1. Tokens ---------------------------------------------------------------- */
:root {
--c-primary: #0db7f9;
--c-navy: #273067;
--c-text: #3a4f66;
--c-heading: #192a3d;
--c-border: #e1e8ed;
--c-light: #f2f5f7;
--c-lighter: #fafbfc;
--c-white: #fff;
--c-deep: #003c64;
--c-dark: #000220;
--c-muted: #69727d;
--c-sky: #9fdde9;
--c-mist: #c8d5dc;
--f-body: Helvetica, Arial, sans-serif;
--f-nav: Akshar, sans-serif;
--f-display: Anuphan, sans-serif;
--f-alt: Roboto, sans-serif;
--f-footer: Poppins, sans-serif;
--container: 1290px;
--container-md: 1140px;
--container-narrow: 750px;
--gutter: 5vw;
--header-h: 157px;
--radius: 5px;
--shadow: 0 0 10px rgba(0, 0, 0, .5);
--shadow-soft: 0 10px 20px rgba(41, 51, 61, .1);
--ease: .2s ease;
}
/* 2. Reset / base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font: 400 14px/1.65 var(--f-body);
color: var(--c-text);
background: var(--c-lighter);
overflow-x: hidden;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
iframe { border: 0; }
a { color: var(--c-primary); transition: color var(--ease); }
a:hover { color: var(--c-navy); }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
::selection { color: #fff; background: var(--c-primary); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 16px; background: #fff; }
/* 3. Typography ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--c-heading); font-weight: 700; line-height: 1.5; }
h1 { font-size: 30px; }
h2 { font-size: 35px; line-height: 1.3; }
h3 { font-size: 30px; line-height: 1.35; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
p { margin: 0 0 1.5em; }
ul, ol { margin: 0 0 1.5em; padding-left: 35px; }
strong, b { font-weight: 700; }
/* .prose: plain HTML content (p, h2, ul, table, img ...) needs no classes */
.prose > :last-child { margin-bottom: 0; }
.prose :is(h1, h2, h3, h4, h5, h6) { margin-top: 1.2em; }
.prose > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.prose a { text-decoration: underline; }
.prose li + li { margin-top: .25em; }
.prose figure { margin: 0 0 1.5em; }
.prose table { margin-bottom: 1.5em; }
.prose :is(td, th) { padding: .55em .9em; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.prose tr:nth-child(odd) td { background: var(--c-light); }
.prose img { border-radius: var(--radius); }
/* 4. Layout ----------------------------------------------------------------- */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.container-md { width: min(var(--container-md), 100% - var(--gutter) * 2); margin-inline: auto; }
.container-narrow { width: min(var(--container-narrow), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: 60px; }
/* Content + optional sidebar: */
.layout { display: grid; gap: 50px; }
@media (min-width: 1000px) {
.layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
.layout.sidebar-left { grid-template-columns: 300px minmax(0, 1fr); }
.layout.sidebar-left .layout-sidebar { order: -1; }
.layout-sidebar .sticky { position: sticky; top: 30px; }
}
.widget { margin-bottom: 30px; }
.widget-title { margin: 0 0 .8em; font-size: 20px; }
.widget ul { list-style: none; padding: 0; }
.widget li { padding: .45em 0; border-bottom: 1px solid var(--c-border); }
.widget a { color: var(--c-text); text-decoration: none; }
.widget a:hover, .widget a[aria-current] { color: var(--c-primary); }
/* 5. Components ------------------------------------------------------------- */
/* Header */
.site-header { position: relative; z-index: 50; background: #fff; }
.site-header-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); padding-inline: 23px; }
.site-logo img { display: block; width: auto; max-height: 107px; }
/* Desktop navigation (shown from 1280px, see media queries) */
.nav { display: none; height: 100%; }
.nav ul { margin: 0; padding: 0; list-style: none; }
.nav > ul { display: flex; gap: 2px; height: 100%; }
.nav li { position: relative; }
.nav > ul > li { display: flex; align-items: center; }
.nav > ul > li > a {
display: flex; align-items: center; gap: 6px; padding: 9px 8px; border-radius: 6px;
font: 600 14px/1.3 var(--f-nav); text-transform: capitalize; text-decoration: none; white-space: nowrap; color: var(--c-text);
transition: color var(--ease), background var(--ease);
}
.nav > ul > li:hover > a, .nav > ul > li:focus-within > a { color: var(--c-primary); background: rgba(13, 183, 249, .08); }
.nav > ul > li.is-active > a { color: var(--c-primary); background: rgba(13, 183, 249, .12); }
.nav .chevron { width: 8px; height: 8px; fill: currentColor; opacity: .7; transition: transform var(--ease); }
.nav li:hover > a .chevron, .nav li:focus-within > a .chevron { transform: rotate(180deg); }
/* Dropdown: white panel with a small caret, centred under its item */
.nav .submenu {
position: absolute; top: calc(50% + 26px); left: 50%; z-index: 10; min-width: 220px; width: max-content; max-width: 280px; padding: 8px;
background: #fff; border: 1px solid var(--c-border); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 2, 32, .14);
opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav .submenu::before {
content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; background: #fff;
border-top: 1px solid var(--c-border); border-left: 1px solid var(--c-border); transform: translateX(-50%) rotate(45deg);
}
.nav li:hover > .submenu, .nav li:focus-within > .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav .submenu a {
position: relative; display: block; padding: 9px 12px; border-radius: 6px;
font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--c-text); text-decoration: none;
transition: color var(--ease), background var(--ease), padding var(--ease);
}
.nav .submenu a:hover, .nav .submenu a:focus-visible { padding-left: 16px; color: var(--c-primary); background: var(--c-light); outline: none; }
.nav .submenu .is-active > a { font-weight: 700; color: var(--c-primary); background: rgba(13, 183, 249, .08); }
.nav .submenu .is-active > a::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; background: var(--c-primary); border-radius: 3px; }
/* Mobile menu trigger + off-canvas panel */
.menu-toggle { display: flex; padding: 10px; margin-right: -10px; color: var(--c-text); background: none; border: 0; }
.menu-toggle svg { width: 18px; height: 14px; fill: currentColor; }
.offcanvas { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.offcanvas.is-open { visibility: visible; }
.offcanvas-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s; }
.offcanvas-panel {
position: absolute; top: 0; right: 0; bottom: 0; width: min(90vw, 500px); padding: 30px 35px; overflow-y: auto;
background: rgba(18, 21, 25, .98); box-shadow: 0 0 70px rgba(0, 0, 0, .35); transform: translateX(100%); transition: transform .3s;
}
.offcanvas.is-open .offcanvas-backdrop { opacity: 1; }
.offcanvas.is-open .offcanvas-panel { transform: none; }
.offcanvas-close { display: flex; margin-left: auto; padding: 8px; color: #fff; background: none; border: 0; }
.offcanvas-close:focus:not(:focus-visible) { outline: none; }
.offcanvas-close:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }
.offcanvas-close svg { width: 12px; height: 12px; fill: currentColor; }
.mobile-nav ul { margin: 0; padding: 0; list-style: none; }
.mobile-nav > ul { margin-top: 20px; }
.mobile-nav a { display: block; padding: 8px 12px; margin-inline: -12px; font-size: 20px; font-weight: 700; line-height: 1.4; color: #fff; text-decoration: none; border-radius: 6px; transition: color var(--ease), background var(--ease); }
.mobile-nav a:hover { background: rgba(255, 255, 255, .06); }
.mobile-nav a:hover, .mobile-nav .is-active > a, .mobile-nav .is-active > .mobile-nav-row > a { color: var(--c-primary); }
.mobile-nav-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-row { gap: 8px; }
.mobile-nav-row a { flex: 1; }
.mobile-nav-row button { display: flex; padding: 10px; color: #fff; background: rgba(255, 255, 255, .06); border: 0; border-radius: 6px; }
.mobile-nav-row svg { width: 10px; height: 10px; fill: currentColor; transition: transform var(--ease); }
.mobile-nav .submenu { display: none; margin: 2px 0 8px 2px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .15); }
.mobile-nav .submenu a { font-size: 16px; font-weight: 500; }
.mobile-nav li.is-open > .submenu { display: block; }
.mobile-nav li.is-open > .mobile-nav-row svg { transform: rotate(180deg); }
body.no-scroll { overflow: hidden; }
/* Page title band */
.page-hero {
display: flex; align-items: center; min-height: 93px; padding-block: 10px;
background: var(--c-deep) url(../../wp-content/uploads/2026/03/footer.jpg) 37% 3% / cover no-repeat fixed;
}
.page-hero h1 { margin: 0; font-size: 30px; font-weight: 200; color: var(--c-sky); }
/* Buttons: .btn + .btn-primary | .btn-secondary | .btn-outline | .btn-light, sizes .btn-sm .btn-lg */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 24px;
font: 500 15px/1.2 var(--f-body); text-align: center; text-decoration: none !important; color: #fff;
background: var(--c-primary); border: 1px solid transparent; border-radius: 3px; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn:hover { color: #fff; background: var(--c-navy); }
.btn-secondary { background: var(--c-muted); }
.btn-secondary:hover { background: var(--c-text); }
.btn-outline { color: var(--c-primary); background: transparent; border-color: currentColor; }
.btn-outline:hover { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
.btn-light { color: var(--c-heading); background: #fff; }
.btn-light:hover { color: #fff; background: var(--c-primary); }
.btn-sm { min-height: 32px; padding: 6px 16px; font-size: 13px; }
.btn-lg { min-height: 50px; padding: 14px 32px; font-size: 17px; }
/* Cards */
.card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.card-soft { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 12px 18px -6px rgba(34, 56, 101, .06); }
.card-body { padding: 10px; }
/* People (committee / speakers) */
.people { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 40px; }
.people > .person { flex: 0 1 220px; min-width: min(100%, 190px); }
.people:last-child { margin-bottom: 0; }
.person {
display: flex; flex-direction: column; padding: 8px 8px 12px; margin: 0; font: inherit; text-align: center; color: inherit;
background: var(--c-light); border: 1px solid var(--c-border); border-radius: var(--radius); transition: transform var(--ease), box-shadow var(--ease);
}
.person-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--c-border); border-radius: 3px; }
.person-name { display: block; margin-top: 12px; font-weight: 700; color: var(--c-heading); line-height: 1.4; }
.person-role { display: block; font-style: italic; font-size: 13px; }
.person-org { display: block; margin-top: 2px; font-size: 13px; color: var(--c-muted); }
.person-more { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--c-primary); }
button.person { cursor: pointer; }
button.person:hover, button.person:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-soft); outline: none; }
.people-title { margin-bottom: 20px; font-size: 20px; text-align: center; }
/* Modal (native