/* ===================================================================== trinitycss09.css — Trinity Thailand revamp, step 1 Scope: base reset, theme variables, top bar, language toggle, menubar (desktop + mobile), cookie consent bar, footer. Old pages keep using trinitycss08.css and are unaffected. ===================================================================== */ /* ---------- 1. THEMES ------------------------------------------------ Each section of the site sets ONE class on (e.g. theme-music). Everything below derives from these five variables. To add a new section: copy a block, change the five values. Done. --------------------------------------------------------------------- */ :root, body.theme-default { --c-primary: #662367; /* menubar, headings, active states */ --c-accent: #e639b2; /* buttons, links, highlights */ --c-menubar: rgba(102, 35, 103, 0.92); --page-bg: #f5f2f6; /* behind the main content column */ --c-text: #222; } body.theme-music { --c-primary: #662367; --c-accent: #e639b2; --c-menubar: rgba(102, 35, 103, 0.92); --page-bg: #f5f2f6; --c-text: #222; } body.theme-rockpop { --c-primary: #111111; --c-accent: #db6414; --c-menubar: rgba(10, 10, 10, 0.95); --page-bg: #111111; --c-text: #f0f0f0; } body.theme-gese { --c-primary: #690008; --c-accent: #ad1515; --c-menubar: rgba(105, 0, 8, 0.92); --page-bg: #f7f2f2; --c-text: #222; } body.theme-drama { --c-primary: #1f717a; --c-accent: #36b8c7; --c-menubar: rgba(31, 113, 122, 0.92); --page-bg: #f0f6f7; --c-text: #222; } /* ---------- 2. BASE -------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Sarabun', Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.65; color: var(--c-text); background-color: var(--page-bg); } img { max-width: 100%; height: auto; } a { color: var(--c-accent); } /* Central page column. Fluid, capped, replaces the fixed 900px. */ .page-wrap { max-width: 1100px; margin: 0 auto; background-color: transparent; } /* ---------- 3. LANGUAGE TOGGLE --------------------------------------- Default language is Thai. A tiny inline script in the adds class "lang-en" to before first paint, so there is no flash. Elements keep their natural display type (span stays inline, etc.) because we only ever hide the inactive language. --------------------------------------------------------------------- */ html:not(.lang-en) .toggleen { display: none !important; } html.lang-en .toggleth { display: none !important; } /* ---------- 4. TOP BAR ----------------------------------------------- */ .topbar { background-color: #fff; color: #222; /* fixed: topbar is always white, so never inherit the theme text colour (near-white on theme-rockpop) */ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; } .topbar-logo img { width: 240px; max-width: 56vw; display: block; } .topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: bold; white-space: nowrap; } .topbar-country { display: flex; align-items: center; gap: 6px; } .topbar-country img { width: 24px; height: 16px; } .topbar-contact a { color: var(--c-primary); text-decoration: none; } .topbar-contact a:hover { text-decoration: underline; } .lang-switcher { display: flex; align-items: center; gap: 2px; border: 1px solid #ddd; border-radius: 999px; padding: 2px; } .lang-btn { border: 0; background: none; font: inherit; font-size: 12px; font-weight: bold; color: #888; padding: 3px 10px; border-radius: 999px; cursor: pointer; } html:not(.lang-en) .lang-btn[data-lang="th"], html.lang-en .lang-btn[data-lang="en"] { background-color: var(--c-primary); color: #fff; } /* On small screens hide the contact link (it lives in the menu too) */ @media (max-width: 640px) { .topbar-contact { display: none; } } /* ---------- 5. MENUBAR ------------------------------------------------ One copy of the menu. Bilingual labels via .toggleth / .toggleen. Desktop: horizontal bar with hover/focus dropdowns. Mobile (<=768px): hamburger button + slide-down accordion. --------------------------------------------------------------------- */ .nav { background-color: var(--c-menubar); position: relative; z-index: 50; } .nav-toggle { /* hamburger — hidden on desktop */ display: none; width: 100%; border: 0; background: none; color: #fff; font: inherit; font-weight: bold; font-size: 15px; padding: 12px 16px; text-align: left; cursor: pointer; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; } .nav-item { position: relative; } .nav-item > a, .nav-item > button { display: block; width: 100%; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; padding: 12px 18px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; } .nav-item > a:hover, .nav-item > button:hover, .nav-item.open > button { background-color: rgba(255, 255, 255, 0.14); } /* Active section: white tab with theme-coloured text (as today) */ .nav-item.active > a, .nav-item.active > button { background-color: #fff; color: var(--c-primary); font-weight: bold; } .nav-caret { font-size: 11px; opacity: 0.8; } /* Dropdown */ .nav-sub { list-style: none; margin: 0; padding: 6px 0; background-color: var(--c-menubar); min-width: 240px; display: none; position: absolute; top: 100%; left: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); } .nav-item.open > .nav-sub { display: block; } .nav-sub a { display: block; color: #fff; text-decoration: none; font-size: 14px; padding: 9px 18px; } .nav-sub a:hover { background-color: rgba(255, 255, 255, 0.14); } @media (min-width: 769px) { /* Hover also opens dropdowns on desktop. Keyboard users open them via the button (Enter/Space -> .open class from JS); a :focus-within rule here would keep a clicked dropdown stuck open, so it is deliberately absent. */ .nav-item:hover > .nav-sub { display: block; } } /* Mobile */ @media (max-width: 768px) { .nav-toggle { display: block; } .nav-list { display: none; flex-direction: column; } .nav.open .nav-list { display: flex; } .nav-item > a, .nav-item > button { padding: 13px 20px; } .nav-sub { position: static; box-shadow: none; background-color: rgba(0, 0, 0, 0.18); min-width: 0; } .nav-sub a { padding: 12px 34px; } .nav-item.active > a, .nav-item.active > button { background: none; color: #fff; box-shadow: inset 4px 0 0 #fff; } } /* ---------- 6. COOKIE CONSENT BAR ------------------------------------ */ .cookiebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background-color: #40153d; color: #fff; font-size: 14px; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.25); } .cookiebar a { color: #fff; } .cookiebar-accept { border: 0; background-color: var(--c-accent, #ee4396); color: #fff; font: inherit; font-weight: bold; font-size: 14px; padding: 7px 22px; border-radius: 5px; cursor: pointer; } .cookiebar-accept:hover { filter: brightness(0.9); } html.cookies-accepted .cookiebar { display: none; } /* ---------- 6b. PAGE CONTENT BOTTOM SPACING --------------------------- Every page still carries its own .page-content rule in a page-scoped