:root { --shell-gold: #b89560; --shell-gold-light: #f2e3c9; --shell-ink: #302e2a; --shell-ink-soft: #6d6962; --shell-cream: #faf5ec; --shell-serif: "Noto Sans Thai", sans-serif; --shell-sans: "Noto Sans Thai", sans-serif; --shell-ease: cubic-bezier(.16, 1, .3, 1); } /* Per-locale font overrides. 'Noto Sans Thai'/'Grappa Variable'/ 'Montserrat' (loaded in main_gpt.css/main.css) only cover Thai + Latin — every other script below gets its actual Google Fonts family loaded conditionally per locale (see src/lib/fonts.ts) and wired in here. Uses an `html[lang="…"]` attribute selector on purpose, not another `:root{...}` rule: main.css/main1.css/main2.css (loaded per-page, after this file in the DOM once React hoists their tags into ) each define their OWN plain `:root{--sans:...}` rule, which would win on source order alone and silently undo a same-specificity override placed here. `html[lang="ja"]` has one extra attribute-selector's worth of specificity over a bare `:root`, so it wins regardless of which stylesheet loads last. Both this file's own --shell-* vars (used by the header/footer/topbar right below) and main.css's --sans/--serif (used by everything else) are overridden together so the whole page — not just the shell — gets the right typeface. `html[lang="en"]` is the new (non-Phase-4) entry here: unlike every other locale below, English isn't an "extra" script needing a Google Fonts fetch — Grappa Variable (headlines) and Montserrat (body) are already self-hosted in main_gpt.css/main.css. This is what makes English typography diverge from Thai's Noto Sans Thai on /en pages; --serif-en (always-English brand/UI copy, e.g. the tagline under the logo) already resolves to Grappa Variable unconditionally via main_gpt.css/main.css's :root, on /th pages too, so it needs no entry here. */ html[lang="en"] { --shell-sans: 'Montserrat', sans-serif; --shell-serif: 'Grappa Variable', 'Montserrat', sans-serif; --sans: 'Montserrat', sans-serif; --serif: 'Grappa Variable', 'Montserrat', sans-serif; } html[lang="ja"] { --shell-sans: 'Noto Sans JP', sans-serif; --shell-serif: 'Noto Serif JP', 'Noto Sans JP', serif; --sans: 'Noto Sans JP', sans-serif; --serif: 'Noto Serif JP', 'Noto Sans JP', serif; } html[lang="zh"] { --shell-sans: 'Noto Sans SC', sans-serif; --shell-serif: 'Noto Serif SC', 'Noto Sans SC', serif; --sans: 'Noto Sans SC', sans-serif; --serif: 'Noto Serif SC', 'Noto Sans SC', serif; } html[lang="ko"] { --shell-sans: 'Noto Sans KR', sans-serif; --shell-serif: 'Noto Serif KR', 'Noto Sans KR', serif; --sans: 'Noto Sans KR', sans-serif; --serif: 'Noto Serif KR', 'Noto Sans KR', serif; } html[lang="km"] { --shell-sans: 'Noto Sans Khmer', sans-serif; --shell-serif: 'Noto Sans Khmer', sans-serif; --sans: 'Noto Sans Khmer', sans-serif; --serif: 'Noto Sans Khmer', sans-serif; } html[lang="lo"] { --shell-sans: 'Noto Sans Lao', sans-serif; --shell-serif: 'Noto Sans Lao', sans-serif; --sans: 'Noto Sans Lao', sans-serif; --serif: 'Noto Sans Lao', sans-serif; } html[lang="ar"] { --shell-sans: 'Noto Sans Arabic', sans-serif; --shell-serif: 'Noto Naskh Arabic', 'Noto Sans Arabic', serif; --sans: 'Noto Sans Arabic', sans-serif; --serif: 'Noto Naskh Arabic', 'Noto Sans Arabic', serif; } html[lang="ru"] { --shell-sans: 'Noto Sans', sans-serif; --shell-serif: 'Noto Serif', 'Noto Sans', serif; --sans: 'Noto Sans', sans-serif; --serif: 'Noto Serif', 'Noto Sans', serif; } /* RTL foundation (Phase 4) — Arabic ('ar') is the only RTL locale (src/lib/i18n.ts's RTL_LOCALES), set via [locale]/layout.tsx's ``. Arabic isn't publiclyLive yet (no UI dictionary entries for it either — see src/lib/dictionary.ts, Phase 3 only covered ja/zh/vi), so this intentionally only covers the shared shell (topbar/header/mobile-menu) that renders on every page, not a full page-by-page audit of every detail page's CSS. Most of this site's layout already mirrors for free under `dir="rtl"` — flexbox and grid's inline axis both follow direction automatically, so `justify-content`, `grid-template-columns`, etc. need no extra rules. What's here are the handful of spots that use a *physical* left/right or a directional animation that flexbox/grid can't auto-mirror. Extend this block page-by-page once Arabic content and translations actually exist and there's real content to test mirroring against. */ [dir="rtl"] .topbar .lang-dropdown-menu { right: auto; left: 0; } [dir="rtl"] .topbar .lang-dropdown-item { text-align: right; } [dir="rtl"] header.site nav.main-nav a::after { left: auto; right: 0; } [dir="rtl"] nav.mobile-menu { transform: translateX(-100%); } [dir="rtl"] nav.mobile-menu.open { transform: translateX(0); } [dir="rtl"] .program-branch { text-align: right; } /* Shared typography scale */ html body small:not(#phivara-type-size-override):not(.phivara-type-size-override) { font-size: 13px; } html body :is(p, a, strong):not(#phivara-type-size-override):not(.phivara-type-size-override):not(.card-title-link):not(.journal-card h3 a):not(.card-link):not(.journal-card__link):not(.card-actions a) { font-size: 14px; } /* Shared branch label used inside cards */ .program-branch { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--terracotta, var(--shell-gold)); font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: .12em; text-align: left; } .program-branch svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .program-branch__text { display: inline-flex; align-items: baseline; gap: .45em; min-width: 0; } .program-branch__brand { color: inherit; font-family: var(--serif-en); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } .program-branch__name { color: inherit; font-family: var(--sans); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: .06em; } .topbar > .wrap, header.site > .wrap, footer.site-footer > .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-right: 48px; padding-left: 48px; box-sizing: border-box; } .topbar { position: relative; z-index: 101; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .18); background: linear-gradient(90deg, #927448, #af8d59 50%, #927448) !important; font-family: var(--shell-sans); font-size: 13.5px; letter-spacing: .04em; } .topbar > .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; } .topbar .tb-left { opacity: .8; } .topbar .tb-right { display: flex; align-items: center; gap: 20px; } .topbar .tb-right > span, .topbar .tb-right > a { opacity: .85; } .topbar .lang-toggle { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; font-weight: 500; cursor: pointer; user-select: none; } .topbar .lang-toggle span { padding: 2px 10px; border-radius: 16px; opacity: .6; transition: all .25s ease; } .topbar .lang-toggle span.active { color: var(--shell-ink); background: var(--shell-gold-light); opacity: 1; } /* Language dropdown (Phase 2 i18n) — replaces .lang-toggle's fixed th/en pill pair now that more locales can go live from the CMS at once. Kept as its own component/classNames (not reusing .lang-toggle) since the interaction model is different: click-to-open menu instead of two always-visible options. */ .topbar .lang-select-box { position: relative; } .topbar .lang-select-btn { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; background: transparent; color: #fff; font: 500 11.5px var(--shell-sans); letter-spacing: .04em; cursor: pointer; transition: border-color .25s ease, background .25s ease; } .topbar .lang-select-btn:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); } .topbar .lang-select-btn .icon-arrow { width: 12px; height: 12px; transition: transform .25s ease; } .topbar .lang-select-box.open .lang-select-btn .icon-arrow { transform: rotate(180deg); } .topbar .lang-dropdown-menu { position: absolute; z-index: 200; top: calc(100% + 8px); right: 0; min-width: 160px; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--shell-gold-light); border-radius: 12px; background: var(--shell-cream); box-shadow: 0 16px 40px rgba(48, 46, 42, .18); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s var(--shell-ease), transform .25s var(--shell-ease), visibility .25s; } .topbar .lang-select-box.open .lang-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .topbar .lang-dropdown-item { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--shell-ink); font: 400 13px var(--shell-sans); text-align: left; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease; } .topbar .lang-dropdown-item:hover { background: rgba(184, 149, 96, .12); } .topbar .lang-dropdown-item.active { background: var(--shell-gold); color: #fff; font-weight: 500; } header.site { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(184, 149, 96, .15); background: rgba(251, 250, 247, .76); backdrop-filter: blur(15px) saturate(130%); -webkit-backdrop-filter: blur(15px) saturate(130%); transition: background .5s ease, border-color .5s ease, box-shadow .5s ease; } header.site.scrolled { border-color: rgba(184, 149, 96, .24); background: rgba(255, 254, 252, .94); box-shadow: 0 12px 42px rgba(62, 57, 49, .07); } header.site > .wrap { display: flex; align-items: center; justify-content: space-between; height: 96px; transition: height .3s ease; } header.site.scrolled > .wrap { height: 76px; } header.site .logo-lockup, footer.site-footer .logo-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; } header.site .logo-lockup img { width: auto; height: 36px; filter: drop-shadow(0 5px 10px rgba(113, 78, 57, .17)); } header.site .logo-lockup .word { color: transparent; background: linear-gradient(110deg, #504a42 15%, #b89560 52%, #504a42 88%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; font-family: var(--shell-serif); font-size: 21px; font-weight: 500; line-height: 1.15; letter-spacing: .16em; } header.site .logo-lockup .word small { display: block; color: var(--shell-ink-soft); font-family: var(--serif-en); font-size: 10px; font-style: italic; font-weight: 400; letter-spacing: .09em; text-transform: none; } header.site nav.main-nav { display: flex; align-items: center; gap: 32px; } header.site nav.main-nav a { position: relative; padding: 6px 0; color: var(--shell-ink-soft); font-family: var(--shell-serif); font-size: 13px; font-weight: 500; letter-spacing: .03em; text-decoration: none; transition: color .3s ease; } header.site nav.main-nav a::after { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--shell-gold); content: ""; transition: width .35s var(--shell-ease); } header.site nav.main-nav a:hover, header.site nav.main-nav a.active { color: var(--shell-ink); } header.site nav.main-nav a:hover::after, header.site nav.main-nav a.active::after { width: 100%; } header.site .header-cta { display: flex; align-items: center; gap: 22px; } header.site .header-cta .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 25px; overflow: hidden; border: 0; border-radius: 999px; color: #fff; background: var(--shell-gold); box-shadow: 0 6px 16px rgba(126, 94, 48, .16); font-family: var(--shell-sans); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; line-height: 1.2; text-decoration: none; text-transform: uppercase; white-space: nowrap; transform: none !important; transition: background-color .3s ease, color .3s ease; } header.site .header-cta .btn::before { display: none; } header.site .header-cta .btn::after { position: absolute; top: -55%; left: -48%; width: 28%; height: 210%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent); content: ""; opacity: 0; pointer-events: none; transform: skewX(-20deg); } header.site .header-cta .btn:hover { background: #5F564D; color: #fff; } header.site .header-cta .btn:hover::after { animation: headerCtaShimmer .8s ease-out; } @keyframes headerCtaShimmer { 0% { left: -48%; opacity: 0; } 18% { opacity: .9; } 100% { left: 122%; opacity: 0; } } header.site .header-cta .btn:active { background: #92713f; } header.site .header-cta .btn:focus-visible { outline: 2px solid rgba(184, 149, 96, .65); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { header.site .header-cta .btn:hover::after { animation: none; } } header.site .burger { position: relative; z-index: 110; display: none; flex-direction: column; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; } header.site .burger span { display: block; width: 26px; height: 1.5px; background: var(--shell-ink); transition: transform .3s ease, opacity .3s ease; } header.site .burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); background: var(--shell-gold-light); } header.site .burger.open span:nth-child(2) { opacity: 0; } header.site .burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); background: var(--shell-gold-light); } nav.mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; padding: 110px 32px 40px; background: var(--shell-ink); transform: translateX(100%); transition: transform .5s var(--shell-ease); } nav.mobile-menu.open { transform: translateX(0); } nav.mobile-menu a { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: var(--shell-cream); font-family: var(--shell-serif); font-size: 22px; font-weight: 400; text-decoration: none; } nav.mobile-menu a.active { color: var(--shell-gold-light); } footer.site-footer { padding: 74px 0 30px; border-top: 1px solid rgba(255, 255, 255, .18); color: #faf5ec; background: linear-gradient(145deg, #876a42, #a58453 55%, #795f3b) !important; font-family: var(--shell-sans); } footer.site-footer::before { content: none !important; } footer.site-footer .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px; } footer.site-footer .foot-brand .logo-lockup { margin-bottom: 18px; } footer.site-footer .foot-brand .logo-lockup img { width: auto; height: 28px; filter: brightness(0) invert(1); } footer.site-footer .foot-brand .logo-lockup .word { color: #fff; font-family: var(--shell-serif); font-size: 17px; font-weight: 500; letter-spacing: .16em; } footer.site-footer .foot-brand p { /* Was 280px, then 300px at font-size 14px. Font-size bumped to 16px for readability (2026-09-23), which widened the Thai tagline enough to drop its last word ("ยาว") to an orphan second line again — bumped to 340px so the full line fits with headroom for font-rendering variance. */ max-width: 340px; margin: 0; color: #faf5ec; font-size: 16px !important; font-weight: 300; line-height: 1.85 !important; } footer.site-footer .foot-col h4 { margin: 0 0 20px; color: var(--shell-gold-light); font-family: var(--shell-sans); font-size: 16px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } footer.site-footer .foot-col a, footer.site-footer .foot-col span { display: block; margin-bottom: 12px; color: #faf5ec; font-size: 16px !important; line-height: 1.5 !important; text-decoration: none; transition: color .3s ease; } footer.site-footer .foot-col a:hover { color: var(--shell-gold-light); } footer.site-footer .foot-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); } footer.site-footer .foot-bottom p { margin: 0; color: #faf5ec; font-size: 14px; } footer.site-footer .foot-legal { display: flex; gap: 20px; } footer.site-footer .foot-legal a { color: #faf5ec; opacity: .75; font-size: 13px; text-decoration: none; transition: opacity .3s ease; } footer.site-footer .foot-legal a:hover { opacity: 1; color: var(--shell-gold-light); } footer.site-footer .foot-social { display: flex; gap: 16px; } footer.site-footer .foot-social a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; color: #faf5ec; font-size: 14px; text-decoration: none; transition: all .3s ease; } footer.site-footer .foot-social a:hover { border-color: var(--shell-gold-light); color: var(--shell-gold-light); } .float-contact { position: fixed; right: 26px; bottom: 26px; z-index: 90; } .float-contact .vip-btn { display: flex; align-items: center; padding: 10px 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50px; color: #fff; background: linear-gradient(115deg, #dfba73, #c5a059 45%, #9e7d3a 75%, #dfba73); background-size: 220% 100%; box-shadow: 0 16px 38px rgba(197, 160, 89, .38); font-family: var(--shell-sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } @media (max-width: 1180px) { header.site nav.main-nav { display: none; } header.site .header-cta .btn-txt { display: none; } header.site .burger { display: flex; } } @media (max-width: 900px) { footer.site-footer .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .topbar > .wrap, header.site > .wrap, footer.site-footer > .wrap { padding-right: 22px; padding-left: 22px; } header.site > .wrap { height: 76px; } } @media (max-width: 640px) { .topbar .tb-left { display: none; } .topbar .tb-right { width: 100%; justify-content: space-between; gap: 10px; } } @media (max-width: 560px) { footer.site-footer .foot-grid { grid-template-columns: 1fr; } footer.site-footer .foot-bottom { flex-direction: column; align-items: flex-start; } .float-contact { right: 16px; bottom: 16px; } .float-contact .vip-btn { padding: 13px 20px; font-size: 11px; } } /* Shared eyebrow typography across all pages and overlays */ .eyebrow, [class*="-eyebrow"], [class^="eyebrow-"] { font-family: var(--serif-en) !important; font-size: 13px !important; }