/*! * MAHANAKORN — mnk-core.css * Shared stylesheet for every MNK bundle (header + all pages). * Every selector is scoped to #mnk-header / #mnk-page, so nothing leaks into * the theme and the theme's reset cannot reach inside. * Font URLs are relative to THIS file — keep fonts/ beside it. */ #mnk-header .footer-grid, #mnk-page .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: clamp(24px,3vw,40px); } @media (max-width: 700px) { #mnk-header .footer-grid, #mnk-page .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { #mnk-header .footer-grid, #mnk-page .footer-grid { grid-template-columns: 1fr; } } #mnk-header .footer-logo, #mnk-page .footer-logo { max-width: 100%; height: auto; max-height: 72px; object-fit: contain; display: block; } #mnk-header .sticky-desc, #mnk-page .sticky-desc { display: block; } #mnk-header .sticky-visit-btn, #mnk-page .sticky-visit-btn { display: inline-flex; } @media (max-width: 520px) { #mnk-header .sticky-desc, #mnk-page .sticky-desc { display: none; } #mnk-header .sticky-visit-btn, #mnk-page .sticky-visit-btn { display: none; } } @media (max-width: 1079px) { #mnk-header .nav-logo, #mnk-page .nav-logo { height: 44px !important; max-width: 180px !important; } } #mnk-header .apply-grid, #mnk-page .apply-grid { grid-template-columns: 1fr; } @media (min-width: 620px) { #mnk-header .apply-grid, #mnk-page .apply-grid { grid-template-columns: 1fr 1fr; } } @keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } #mnk-header .marquee-track, #mnk-page .marquee-track { display: flex; gap: 12px; width: max-content; } #mnk-header .marquee-left, #mnk-page .marquee-left { animation: marquee-left 45s linear infinite; } #mnk-header .marquee-right, #mnk-page .marquee-right { animation: marquee-right 50s linear infinite; } #mnk-header .marquee-wrap, #mnk-page .marquee-wrap { overflow: hidden; width: 100%; } #mnk-header /* ── motion layer — page content only; header/footer untouched ── */ /* reveal state is applied inline by motion.js (runtime rescopes selectors) */ @keyframes heroUp, #mnk-page /* ── motion layer — page content only; header/footer untouched ── */ /* reveal state is applied inline by motion.js (runtime rescopes selectors) */ @keyframes heroUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } #mnk-header section button, #mnk-page section button, #mnk-header section a, #mnk-page section a { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, opacity .2s ease; } #mnk-header .perk-card, #mnk-page .perk-card { transition: filter .35s ease, background .35s ease; } #mnk-header .perk-rule, #mnk-page .perk-rule { transition: width .45s cubic-bezier(.2,.7,.3,1); } @media (prefers-reduced-motion: reduce) { #mnk-header section [data-rv], #mnk-page section [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; } #mnk-header section *, #mnk-page section *, #mnk-header section *::before, #mnk-page section *::before { animation: none !important; } } #mnk-header :focus:not(:focus-visible), #mnk-page :focus:not(:focus-visible) { outline: none !important; } #mnk-header :focus-visible, #mnk-page :focus-visible { outline: 2px solid #C10230; outline-offset: 3px; } #mnk-header *, #mnk-page *, #mnk-header *::before, #mnk-page *::before, #mnk-header *::after, #mnk-page *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } #mnk-header, #mnk-page { background: #231F20; font-family: 'Century Gothic','Trebuchet MS',sans-serif; color: #231F20; -webkit-font-smoothing: antialiased; overflow-x: clip; text-align: left; } #mnk-header ::selection, #mnk-page ::selection { background: #C10230; color: #fff; } #mnk-header ::-webkit-scrollbar, #mnk-page ::-webkit-scrollbar { width: 8px; } #mnk-header ::-webkit-scrollbar-track, #mnk-page ::-webkit-scrollbar-track { background: #231F20; } #mnk-header ::-webkit-scrollbar-thumb, #mnk-page ::-webkit-scrollbar-thumb { background: #C10230; border-radius: 4px; } @font-face { font-family: 'Century Gothic'; src: url('fonts/centurygothic.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Century Gothic'; src: url('fonts/centurygothic_bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Sarabun'; src: url('fonts/Sarabun-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Sarabun'; src: url('fonts/Sarabun-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Sarabun'; src: url('fonts/Sarabun-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } /* ── hover / interaction states ── Pointer devices only: on touch, :hover latches after a tap and swallows the first click, so every hover state — from the design's own stylesheet and from compiled style-hover attributes alike — is gated. */ @media (hover: hover) and (pointer: fine) { #mnk-header .nav-btn:hover, #mnk-page .nav-btn:hover, #mnk-header .nav-link:hover, #mnk-page .nav-link:hover { background: #8A2433 !important; } #mnk-header .apply-opt:hover, #mnk-page .apply-opt:hover { background: #fff !important; border-color: #fff !important; } #mnk-header .apply-opt:hover .apply-arrow, #mnk-page .apply-opt:hover .apply-arrow { transform: translateX(4px); } #mnk-header .apply-back:hover, #mnk-page .apply-back:hover { background: rgba(255,255,255,0.28) !important; } #mnk-header .prog-btn:hover, #mnk-page .prog-btn:hover { background: #C10230 !important; border-color: #C10230 !important; color: #fff !important; } #mnk-header .prog-card:hover .prog-btn, #mnk-page .prog-card:hover .prog-btn { background: #C10230 !important; border-color: #C10230 !important; color: #fff !important; } #mnk-header .marquee-wrap:hover .marquee-left, #mnk-page .marquee-wrap:hover .marquee-left, #mnk-header .marquee-wrap:hover .marquee-right, #mnk-page .marquee-wrap:hover .marquee-right { animation-play-state: paused; } #mnk-header section button[style*="rgb(193, 2, 48)"]:hover, #mnk-page section button[style*="rgb(193, 2, 48)"]:hover { box-shadow: 0 12px 28px rgba(193,2,48,.34); } #mnk-header section button[style*="rgb(255, 255, 255)"]:hover, #mnk-page section button[style*="rgb(255, 255, 255)"]:hover { box-shadow: 0 12px 30px rgba(0,0,0,.22); } #mnk-header .perk-card:hover .perk-rule, #mnk-page .perk-card:hover .perk-rule { width: 72px; } #mnk-header .perk-card:hover .perk-num, #mnk-page .perk-card:hover .perk-num { transform: translateY(-8px) scale(1.08); color: rgba(255,255,255,0.13) !important; } #mnk-header .perk-card:hover p, #mnk-page .perk-card:hover p { color: rgba(255,255,255,0.82) !important; } #mnk-header .perk-light:hover .perk-num, #mnk-page .perk-light:hover .perk-num { color: rgba(35,31,32,0.11) !important; } #mnk-header .perk-light:hover p, #mnk-page .perk-light:hover p { color: rgba(35,31,32,0.78) !important; } #mnk-header .perk-light:hover, #mnk-page .perk-light:hover { filter: brightness(0.985); } #mnk-header .perk-card:hover, #mnk-page .perk-card:hover { filter: brightness(1.12); } #mnk-header .mhk-h1:hover, #mnk-page .mhk-h1:hover { border-color: rgba(255,255,255,0.6) !important; color: #fff !important; } #mnk-header .mhk-h2:hover, #mnk-page .mhk-h2:hover { box-shadow: 0 6px 18px rgba(193,2,48,0.45) !important; } #mnk-header .mhk-h3:hover, #mnk-page .mhk-h3:hover { background: rgba(255,255,255,0.18) !important; border-color: rgba(255,255,255,0.4) !important; } #mnk-header .mhk-h4:hover, #mnk-page .mhk-h4:hover { background: rgba(255,255,255,0.28) !important; } #mnk-header .mhk-h5:hover, #mnk-page .mhk-h5:hover { color: #fff !important; } #mnk-header .mhk-h6:hover, #mnk-page .mhk-h6:hover { color: #fff !important; } #mnk-header .mhk-h7:hover, #mnk-page .mhk-h7:hover { box-shadow: 0 6px 20px rgba(255,255,255,0.25) !important; } #mnk-header .mhk-h8:hover, #mnk-page .mhk-h8:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h9:hover, #mnk-page .mhk-h9:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h10:hover, #mnk-page .mhk-h10:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h11:hover, #mnk-page .mhk-h11:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h12:hover, #mnk-page .mhk-h12:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h13:hover, #mnk-page .mhk-h13:hover { background: rgba(255,255,255,0.07) !important; } #mnk-header .mhk-h14:hover, #mnk-page .mhk-h14:hover { box-shadow: 0 10px 28px rgba(255,255,255,0.2) !important; } #mnk-header .mhk-h15:hover, #mnk-page .mhk-h15:hover { box-shadow: 0 10px 28px rgba(255,255,255,0.25) !important; } #mnk-header .mhk-h16:hover, #mnk-page .mhk-h16:hover { background: #e85f22 !important; } #mnk-header .mhk-h17:hover, #mnk-page .mhk-h17:hover { gap: 12px !important; } #mnk-header .mhk-h18:hover, #mnk-page .mhk-h18:hover { background: #7a1937 !important; } #mnk-header .mhk-h19:hover, #mnk-page .mhk-h19:hover { transform: translateY(-4px) !important; box-shadow: 0 28px 64px rgba(0,0,0,0.55) !important; } #mnk-header .mhk-h20:hover, #mnk-page .mhk-h20:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 52px rgba(0,0,0,0.45) !important; } #mnk-header .mhk-h21:hover, #mnk-page .mhk-h21:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 52px rgba(0,0,0,0.45) !important; } #mnk-header .mhk-h22:hover, #mnk-page .mhk-h22:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 52px rgba(0,0,0,0.45) !important; } #mnk-header .mhk-h23:hover, #mnk-page .mhk-h23:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 52px rgba(0,0,0,0.45) !important; } #mnk-header .mhk-h24:hover, #mnk-page .mhk-h24:hover { background: #8A2433 !important; box-shadow: 0 24px 56px rgba(193,2,48,0.35) !important; } #mnk-header .mhk-h25:hover, #mnk-page .mhk-h25:hover { border-color: #C10230 !important; transform: translateY(-3px) !important; box-shadow: 0 18px 44px rgba(35,31,32,0.12) !important; } #mnk-header .mhk-h26:hover, #mnk-page .mhk-h26:hover { border-color: #C10230 !important; transform: translateY(-3px) !important; box-shadow: 0 18px 44px rgba(35,31,32,0.12) !important; } #mnk-header .mhk-h27:hover, #mnk-page .mhk-h27:hover { border-color: rgba(255,255,255,0.72) !important; background: rgba(255,255,255,0.06) !important; } #mnk-header .mhk-h28:hover, #mnk-page .mhk-h28:hover { box-shadow: 0 12px 36px rgba(255,255,255,0.26) !important; } #mnk-header .mhk-h29:hover, #mnk-page .mhk-h29:hover { border-color: rgba(255,255,255,0.82) !important; background: rgba(255,255,255,0.08) !important; } #mnk-header .mhk-h30:hover, #mnk-page .mhk-h30:hover { color: #fff !important; } #mnk-header .mhk-h31:hover, #mnk-page .mhk-h31:hover { color: #fff !important; } #mnk-header .mhk-h32:hover, #mnk-page .mhk-h32:hover { background: #C10230 !important; color: #fff !important; border-color: #C10230 !important; } #mnk-header .mhk-h33:hover, #mnk-page .mhk-h33:hover { background: #C10230 !important; color: #fff !important; border-color: #C10230 !important; } #mnk-header .mhk-h34:hover, #mnk-page .mhk-h34:hover { background: #C10230 !important; color: #fff !important; border-color: #C10230 !important; } #mnk-header .mhk-h35:hover, #mnk-page .mhk-h35:hover { background: #C10230 !important; color: #fff !important; border-color: #C10230 !important; } #mnk-header .mhk-h36:hover, #mnk-page .mhk-h36:hover { color: #C10230 !important; } #mnk-header .mhk-h37:hover, #mnk-page .mhk-h37:hover { color: #C10230 !important; } #mnk-header .mhk-h38:hover, #mnk-page .mhk-h38:hover { color: #C10230 !important; } #mnk-header .mhk-h39:hover, #mnk-page .mhk-h39:hover { color: #C10230 !important; } #mnk-header .mhk-h40:hover, #mnk-page .mhk-h40:hover { color: #C10230 !important; } #mnk-header .mhk-h41:hover, #mnk-page .mhk-h41:hover { color: #C10230 !important; } #mnk-header .mhk-h42:hover, #mnk-page .mhk-h42:hover { color: #C10230 !important; } #mnk-header .mhk-h43:hover, #mnk-page .mhk-h43:hover { color: #C10230 !important; } #mnk-header .mhk-h44:hover, #mnk-page .mhk-h44:hover { color: #C10230 !important; } #mnk-header .mhk-h45:hover, #mnk-page .mhk-h45:hover { box-shadow: 0 6px 18px rgba(193,2,48,0.32) !important; } #mnk-header .mhk-h46:hover, #mnk-page .mhk-h46:hover { color: #C10230 !important; } #mnk-header .mhk-h47:hover, #mnk-page .mhk-h47:hover { color: #C10230 !important; } #mnk-header .mhk-h48:hover, #mnk-page .mhk-h48:hover { color: #fff !important; } #mnk-header .mhk-h49:hover, #mnk-page .mhk-h49:hover { color: #fff !important; } #mnk-header .mhk-h50:hover, #mnk-page .mhk-h50:hover { color: #fff !important; } } /* ── mount containers ── */ /* Proven setup: the MOUNT carries the sticky (the design's own
is forced static inside it, and its JS spacer is hidden — the mount already holds the header's height in normal flow). No html/body overflow overrides. */ #mnk-header { position: sticky; top: 0px; z-index: 200; overflow: visible; } #mnk-header > header { position: static !important; } #mnk-header [data-hdr-spacer] { display: none !important; } #mnk-page { overflow: visible; isolation: isolate; }