/* TripKit shared site chrome: one sticky header + one footer for every page. Injected by /assets/chrome.js into #site-header / #site-footer placeholders. */ /* Pretendard: self-hosted variable font (one file, weights 45-920), loaded on every page via chrome.css. Covers Latin, Cyrillic, Korean, and Japanese kana / CJK ideographs; the font stack falls back to the system font for scripts it lacks (e.g. Arabic). */ @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations"); } :root { --tk-paper: #F9F4E9; --tk-paper-2: #F3ECDD; --tk-card: #FEFBF5; --tk-ink: #1c1a17; --tk-muted: #636366; --tk-hairline: rgba(0,0,0,0.12); } /* Korean puts spaces between words, so it should wrap at spaces, not mid-word the way spaceless CJK (zh/ja) does. keep-all stops the mid-word breaks (필요 splitting to 필 / 요); overflow-wrap lets an over-long token still break rather than overflow. Scoped to :lang(ko) via the that i18n.js sets, so zh/ja keep their normal any-character wrapping. */ :lang(ko) { word-break: keep-all; overflow-wrap: break-word; } /* ---- Header ---- */ /* The chrome injects into a #site-header wrapper; without this it forms a short containing block that traps the sticky header inside its own height (so it scrolls away). display:contents makes the wrapper transparent to layout, so the header sticks relative to the page scroll. */ #site-header { display: contents; } .tk-header { position: sticky; top: 0; z-index: 50; background: var(--tk-paper); } .tk-header-in { width: 100%; padding: 22px 80px; display: flex; align-items: center; gap: 38px; } @media (max-width: 640px) { .tk-header-in { padding: 14px 20px; } .tk-logo img { height: 30px; } .tk-footer-in { padding: 30px 20px; } } .tk-logo { margin-right: auto; } /* push the nav + actions to the right */ .tk-logo img { height: 36px; display: block; } .tk-nav { display: flex; align-items: center; gap: 34px; } .tk-nav a { font-size: 15px; font-weight: 500; color: var(--tk-ink); text-decoration: none; opacity: .85; } .tk-nav a:hover { opacity: 1; } .tk-actions { display: flex; align-items: center; gap: 10px; } .tk-login { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--tk-ink); padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--tk-ink); } .tk-get { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; background: var(--tk-ink); color: var(--tk-paper); padding: 10px 18px; border-radius: 999px; } .tk-menu-btn { display: none; background: none; border: 0; padding: 6px; cursor: pointer; margin-left: auto; } .tk-menu-btn svg { width: 22px; height: 22px; stroke: var(--tk-ink); stroke-width: 2; fill: none; stroke-linecap: round; } .tk-nav-only { display: none; } /* mobile-dropdown-only login + get-app links */ @media (max-width: 640px) { .tk-header-in { gap: 12px; } .tk-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--tk-paper) url(/assets/paper.jpg) repeat; background-size: 300px; border-bottom: 1px solid var(--tk-hairline); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 0; } .tk-nav.open { display: flex; } .tk-nav a { padding: 12px 20px; width: 100%; box-sizing: border-box; } .tk-nav-only { display: block; } /* show login + get-app in the dropdown on mobile */ .tk-menu-btn { display: block; } .tk-actions { display: none; } /* mobile bar is just logo + hamburger */ } /* ---- Footer ---- */ #site-footer { margin-top: auto; } .tk-footer { background: transparent; border-top: 1px solid var(--tk-hairline); } .tk-footer-in { max-width: 1200px; margin: 0 auto; padding: 38px 20px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; } .tk-f-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; } .tk-f-links a { font-size: 15px; font-weight: 500; color: var(--tk-ink); text-decoration: none; white-space: nowrap; } @media (max-width: 640px) { .tk-f-links { gap: 14px 20px; } } .tk-f-links a:hover { opacity: .7; } /* appearance:none so every browser (iOS especially) drops the native select chrome and uses this pill; the chevron is our own, kept off the border by the 34px padding side. */ .tk-f-lang { font: inherit; font-size: 14px; font-weight: 500; color: var(--tk-ink); -webkit-appearance: none; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231c1a17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; background-size: 10px auto; border: 1px solid var(--tk-hairline); border-radius: 999px; padding: 6px 34px 6px 14px; cursor: pointer; max-width: 100%; } [dir="rtl"] .tk-f-lang { background-position: left 14px center; padding: 6px 14px 6px 34px; } .tk-f-copy { font-size: 15px; font-weight: 500; color: rgba(0,0,0,0.45); }