/* Nath Travels: base styles + 6 themes (data-theme on ) */ :root, [data-theme="classic"] { --script: "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Meetei Mayek"; --font-body: "Inter", var(--script), system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Poppins", var(--script), system-ui, sans-serif; --display-weight: 800; --display-spacing: -0.02em; --eyebrow-case: uppercase; --bg: #f5f7fc; --bg-alt: #e9eef8; --surface: #ffffff; --text: #1c2536; --muted: #5a6478; --heading: #0b2a6f; --primary: #0b2a6f; --primary-ink: #ffffff; --accent: #d7263d; --accent-ink: #ffffff; --highlight: #ffc53d; --border: #dbe2ef; --focus: #ffc53d; --radius: 16px; --radius-sm: 10px; --btn-radius: 999px; --shadow: 0 1px 2px rgba(11, 42, 111, .06), 0 8px 24px rgba(11, 42, 111, .08); --shadow-lg: 0 20px 50px rgba(11, 42, 111, .18); --header-bg: rgba(255, 255, 255, .92); --header-text: #0b2a6f; --hero-text: #ffffff; --hero-shade: linear-gradient(100deg, rgba(6, 22, 60, .92) 0%, rgba(6, 22, 60, .72) 42%, rgba(6, 22, 60, .15) 100%); --page-shade: linear-gradient(0deg, rgba(6, 22, 60, .9) 0%, rgba(6, 22, 60, .35) 70%, rgba(6, 22, 60, .2) 100%); --card-bg: rgba(255, 255, 255, .97); --footer-bg: #081b47; --footer-text: #c9d4ea; --cta-bg: linear-gradient(120deg, #0b2a6f, #163c94); --cta-text: #ffffff; --wa: #1fa855; --wa-ink: #ffffff; color-scheme: light; } [data-theme="teagarden"] { --font-body: "DM Sans", var(--script), system-ui, sans-serif; --font-display: "Fraunces", "Noto Serif Devanagari", "Noto Serif Bengali", var(--script), Georgia, serif; --display-weight: 650; --display-spacing: -0.01em; --bg: #f6f1e4; --bg-alt: #ece4cf; --surface: #fffdf7; --text: #28322b; --muted: #5f6a5f; --heading: #15432f; --primary: #15432f; --primary-ink: #f6f1e4; --accent: #c89b3c; --accent-ink: #1d1a12; --highlight: #c89b3c; --border: #ddd2b6; --focus: #c89b3c; --radius: 6px; --radius-sm: 4px; --btn-radius: 4px; --shadow: 0 1px 0 rgba(21, 67, 47, .08), 0 10px 30px rgba(21, 67, 47, .08); --shadow-lg: 0 24px 60px rgba(21, 67, 47, .2); --header-bg: rgba(246, 241, 228, .94); --header-text: #15432f; --hero-text: #15432f; --card-bg: #fffdf7; --page-shade: linear-gradient(0deg, rgba(12, 40, 27, .88) 0%, rgba(12, 40, 27, .3) 75%); --footer-bg: #0f2f21; --footer-text: #d6d0bd; --cta-bg: #15432f; --wa: #1c7c46; } [data-theme="mist"] { --font-body: "Manrope", var(--script), system-ui, sans-serif; --font-display: "Manrope", var(--script), system-ui, sans-serif; --display-weight: 800; --display-spacing: -0.03em; --bg: #f4f8f8; --bg-alt: #e6f0ef; --surface: #ffffff; --text: #25303b; --muted: #5d6b76; --heading: #12303a; --primary: #0f766e; --primary-ink: #ffffff; --accent: #0ea5a4; --accent-ink: #ffffff; --highlight: #99f6e4; --border: #d5e4e2; --focus: #14b8a6; --radius: 22px; --radius-sm: 14px; --btn-radius: 14px; --shadow: 0 2px 6px rgba(18, 48, 58, .04), 0 12px 32px rgba(18, 48, 58, .07); --shadow-lg: 0 30px 70px rgba(18, 48, 58, .18); --header-bg: rgba(244, 248, 248, .75); --header-text: #12303a; --hero-shade: linear-gradient(180deg, rgba(10, 30, 36, .35) 0%, rgba(10, 30, 36, .55) 100%); --page-shade: linear-gradient(0deg, rgba(10, 30, 36, .8) 0%, rgba(10, 30, 36, .25) 80%); --card-bg: rgba(255, 255, 255, .78); --footer-bg: #102a30; --footer-text: #b9cfd0; --cta-bg: linear-gradient(120deg, #0f766e, #0e7490); --wa: #0f9d58; } [data-theme="tawang"] { --font-body: "Hind", var(--script), system-ui, sans-serif; --font-display: "Rozha One", var(--script), Georgia, serif; --display-weight: 400; --display-spacing: 0; --bg: #fff8ee; --bg-alt: #fbe9cf; --surface: #ffffff; --text: #3a2320; --muted: #7a5b52; --heading: #7a1f2b; --primary: #7a1f2b; --primary-ink: #fff6e8; --accent: #f29e1d; --accent-ink: #3a1a08; --highlight: #f29e1d; --border: #f0d7b5; --focus: #f29e1d; --radius: 12px; --radius-sm: 8px; --btn-radius: 8px; --shadow: 0 2px 0 rgba(122, 31, 43, .08), 0 10px 28px rgba(122, 31, 43, .1); --shadow-lg: 0 24px 60px rgba(122, 31, 43, .25); --header-bg: #7a1f2b; --header-text: #fff6e8; --hero-shade: radial-gradient(ellipse at center, rgba(70, 12, 20, .55) 0%, rgba(70, 12, 20, .85) 100%); --page-shade: linear-gradient(0deg, rgba(70, 12, 20, .9) 0%, rgba(70, 12, 20, .35) 80%); --card-bg: rgba(255, 248, 238, .98); --footer-bg: #4a1019; --footer-text: #f3d9b8; --cta-bg: linear-gradient(120deg, #7a1f2b, #a3322a); --wa: #1f9d55; } [data-theme="night"] { --font-body: "Inter", var(--script), system-ui, sans-serif; --font-display: "Space Grotesk", var(--script), system-ui, sans-serif; --display-weight: 700; --display-spacing: -0.02em; --bg: #0d1117; --bg-alt: #121822; --surface: #161d29; --text: #cfd8e3; --muted: #8c99aa; --heading: #ffffff; --primary: #f5b041; --primary-ink: #14100a; --accent: #f5b041; --accent-ink: #14100a; --highlight: #f5b041; --border: #253043; --focus: #f5b041; --radius: 14px; --radius-sm: 10px; --btn-radius: 10px; --shadow: 0 0 0 1px #202a3a, 0 12px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 0 0 1px #2a3649, 0 30px 70px rgba(0, 0, 0, .55); --header-bg: rgba(13, 17, 23, .85); --header-text: #ffffff; --hero-shade: linear-gradient(100deg, rgba(8, 11, 16, .95) 0%, rgba(8, 11, 16, .7) 45%, rgba(8, 11, 16, .2) 100%); --page-shade: linear-gradient(0deg, rgba(8, 11, 16, .95) 0%, rgba(8, 11, 16, .35) 80%); --card-bg: rgba(22, 29, 41, .96); --footer-bg: #080b10; --footer-text: #8c99aa; --cta-bg: linear-gradient(120deg, #1a2231, #10151e); --cta-text: #ffffff; --wa: #25d366; --wa-ink: #07140c; color-scheme: dark; } [data-theme="bamboo"] { --font-body: "Nunito", var(--script), system-ui, sans-serif; --font-display: "Baloo 2", var(--script), system-ui, sans-serif; --display-weight: 800; --display-spacing: -0.01em; --eyebrow-case: none; --bg: #f4ecdf; --bg-alt: #eadcc6; --surface: #fffaf2; --text: #3b2f25; --muted: #76675a; --heading: #5a2a16; --primary: #b5532f; --primary-ink: #fffaf2; --accent: #4f6b3a; --accent-ink: #fffaf2; --highlight: #e7a33e; --border: #e0cfb4; --focus: #e7a33e; --radius: 28px; --radius-sm: 18px; --btn-radius: 999px; --shadow: 0 3px 0 rgba(90, 42, 22, .08), 0 14px 30px rgba(90, 42, 22, .08); --shadow-lg: 0 26px 60px rgba(90, 42, 22, .2); --header-bg: rgba(244, 236, 223, .94); --header-text: #5a2a16; --hero-text: #3b2f25; --card-bg: #fffaf2; --page-shade: linear-gradient(0deg, rgba(60, 30, 15, .85) 0%, rgba(60, 30, 15, .25) 80%); --footer-bg: #3b2a1f; --footer-text: #e6d6bf; --cta-bg: #b5532f; --wa: #3f8a4b; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html:not([lang^="en"]) body { line-height: 1.8; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: var(--primary); text-underline-offset: 3px; } [data-theme="night"] a:not(.btn) { color: var(--accent); } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-spacing); color: var(--heading); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; } html:not([lang^="en"]) :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .container { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } .narrow { width: min(860px, 100%); } .center { text-align: center; } .small { font-size: .875rem; } .ico { width: 1.25em; height: 1.25em; flex: none; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--primary); color: var(--primary-ink); padding: .6rem 1rem; border-radius: 8px; } .skip-link:focus { left: 8px; } .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: var(--eyebrow-case); color: var(--accent); margin-bottom: 1rem; } html:not([lang^="en"]) .eyebrow { letter-spacing: 0; font-size: .9rem; } .eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: currentColor; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.35rem; border-radius: var(--btn-radius); border: 2px solid transparent; font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-sm { padding: .5rem .95rem; font-size: .9rem; } .btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; } .btn-block { width: 100%; } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--wa) 35%, transparent); } .btn-wa:hover { background: color-mix(in srgb, var(--wa) 88%, #000); color: var(--wa-ink); } .btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .55); backdrop-filter: blur(6px); } .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; } .btn-outline { background: transparent; color: var(--primary); border-color: currentColor; } .btn-outline:hover { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); } [data-theme="night"] .btn-outline { color: var(--accent); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .btn-row .btn { white-space: normal; } /* ---------- header ---------- */ .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--header-bg); color: var(--header-text); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .header-inner { display: flex; align-items: center; gap: 1rem; min-height: 72px; } .brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: inherit; } .logo { width: 42px; height: 42px; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-text strong { white-space: nowrap; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; letter-spacing: var(--display-spacing); } .brand-text small { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; } .main-nav { margin-left: auto; } .main-nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; } .main-nav a { display: block; padding: .5rem .85rem; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; font-size: .98rem; } .main-nav a:hover { background: color-mix(in srgb, currentColor 10%, transparent); } .main-nav a[aria-current="page"] { background: color-mix(in srgb, currentColor 14%, transparent); } .header-actions { display: flex; align-items: center; gap: .5rem; } .topbar { background: var(--footer-bg); color: var(--footer-text); font-size: .88rem; } .topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; padding-block: .25rem; min-height: 38px; } .topbar a { color: inherit; text-decoration: none; } .topbar-phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; } .topbar-phone .ico { width: 1em; height: 1em; } .topbar-phone:hover { color: #fff; } .lang-switch { display: flex; align-items: center; gap: .4rem; } .lang-switch > .ico { width: 1.05em; height: 1.05em; opacity: .8; } .lang-switch ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0; padding: 0; } .lang-switch a { display: block; padding: .2rem .7rem; border-radius: 999px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); } .lang-switch a:hover { color: #fff; border-color: currentColor; } .lang-switch a[aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } [data-theme="night"] .topbar { border-bottom: 1px solid var(--border); } .nav-toggle { display: none; background: none; border: 0; color: inherit; padding: .4rem; cursor: pointer; } .nav-toggle .ico { width: 28px; height: 28px; } @media (max-width: 960px) { .header-wa span { display: none; } .header-wa { padding: .55rem; } .nav-toggle { display: block; } .main-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; } .main-nav.open { display: block; } .main-nav ul { flex-direction: column; padding: .75rem clamp(16px, 4vw, 32px) 1rem; } .main-nav a { padding: .8rem 1rem; border-radius: var(--radius-sm); } .header-actions { margin-left: auto; } } @media (max-width: 420px) { .brand-text small { display: none; } .topbar-phone span { font-size: .82rem; } .lang-switch > .ico { display: none; } .lang-switch a { padding: .15rem .55rem; } } /* ---------- hero (default: full-bleed overlay) ---------- */ .hero { position: relative; isolation: isolate; color: var(--hero-text); overflow: hidden; } .hero-media, .hero-shade { position: absolute; inset: 0; z-index: -1; } .hero-media img, .hero-media video, .img-ph { width: 100%; height: 100%; object-fit: cover; } .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hero-video.playing { opacity: 1; } .hero-shade { background: var(--hero-shade); } .hero-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(3.5rem, 9vw, 7rem); min-height: min(88vh, 820px); } .hero h1 { color: inherit; font-size: clamp(2.3rem, 5.4vw, 4rem); } .hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 40rem; opacity: .92; } .hero .eyebrow { color: var(--highlight); } .trust { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-size: .92rem; font-weight: 600; opacity: .9; } .trust .ico { color: var(--highlight); } .hero-card, .form-card { background: var(--card-bg); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .img-ph { background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 50%, var(--accent))); min-height: 220px; } @media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; min-height: 0; padding-block: 3rem 2rem; } .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)); } } /* Tea Garden + Bamboo: split hero with framed image */ :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero { background: var(--bg); } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-shade { display: none; } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero .btn-ghost { color: var(--primary); border-color: var(--primary); background: transparent; backdrop-filter: none; } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero .eyebrow { color: var(--accent); } :is([data-theme="teagarden"], [data-theme="bamboo"]) .trust .ico { color: var(--accent); } @media (min-width: 901px) { :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-media { left: 52%; right: clamp(16px, 3vw, 40px); top: 2.5rem; bottom: 2.5rem; z-index: 0; overflow: hidden; } [data-theme="teagarden"] .hero-media { border-radius: 400px 400px 8px 8px; box-shadow: 0 0 0 10px var(--surface), 0 0 0 11px var(--border); } [data-theme="bamboo"] .hero-media { border-radius: 42% 58% 36% 64% / 48% 38% 62% 52%; } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-inner { position: relative; z-index: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-card { align-self: end; margin-bottom: -1rem; max-width: 440px; justify-self: end; } } @media (max-width: 900px) { :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-media { position: relative; height: 280px; margin: 1rem clamp(16px, 4vw, 32px) 0; border-radius: var(--radius); overflow: hidden; } :is([data-theme="teagarden"], [data-theme="bamboo"]) .hero-inner { padding-top: 2rem; } } [data-theme="bamboo"] .hero::before { content: ""; position: absolute; width: 520px; height: 520px; left: -160px; top: -200px; border-radius: 50%; background: color-mix(in srgb, var(--highlight) 22%, transparent); z-index: -1; } /* Mist + Tawang: centered hero, form below */ @media (min-width: 901px) { :is([data-theme="mist"], [data-theme="tawang"]) .hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; padding-block: 7rem 4rem; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-copy { max-width: 900px; } :is([data-theme="mist"], [data-theme="tawang"]) .hero .lead { margin-inline: auto; } :is([data-theme="mist"], [data-theme="tawang"]) .btn-row, :is([data-theme="mist"], [data-theme="tawang"]) .trust { justify-content: center; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card { width: 100%; max-width: 1040px; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .book-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 1rem; align-items: end; text-align: left; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .form-title, :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .form-lead { grid-column: 1 / -1; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .book-form > .field:nth-of-type(1) { grid-column: span 4; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .field-row { grid-column: span 4; grid-template-columns: 1fr 1fr; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .book-form > .field:last-of-type { grid-column: span 9; } :is([data-theme="mist"], [data-theme="tawang"]) .hero-card .btn-block { grid-column: span 3; margin-bottom: 1rem; } } [data-theme="mist"] .hero-card { background: rgba(255, 255, 255, .72); backdrop-filter: blur(18px) saturate(1.3); border-color: rgba(255, 255, 255, .6); } [data-theme="mist"] .hero .eyebrow { color: #ccfbf1; } [data-theme="tawang"] .hero-copy { position: relative; } [data-theme="tawang"] .hero h1 { color: #fff6e8; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); } @media (min-width: 901px) { [data-theme="tawang"] .hero .eyebrow::after { content: ""; width: 28px; height: 3px; border-radius: 3px; background: currentColor; } } @media (max-width: 900px) { [data-theme="tawang"] .hero-shade { background: linear-gradient(180deg, rgba(70, 12, 20, .7), rgba(70, 12, 20, .88)); } } [data-theme="tawang"] .hero-card { border-top: 6px solid var(--accent); } [data-theme="tawang"] .site-header .btn-wa { box-shadow: none; } /* Night: glow accents */ [data-theme="night"] .hero h1 { background: linear-gradient(90deg, #fff 40%, #f5b041); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="night"] .hero-card { border-color: #2a3649; } [data-theme="night"] .feature-ico { filter: drop-shadow(0 0 10px rgba(245, 176, 65, .45)); } /* ---------- forms ---------- */ .form-title { font-size: 1.35rem; margin-bottom: .25rem; } .form-lead { color: var(--muted); font-size: .92rem; margin-bottom: 1rem; } .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; min-width: 0; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .field label { font-size: .85rem; font-weight: 700; color: var(--muted); } .field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--text); background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .8rem; transition: border-color .15s, box-shadow .15s; } [data-theme="mist"] .hero-card .field input, [data-theme="mist"] .hero-card .field textarea { background: rgba(255, 255, 255, .85); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } [data-theme="night"] .field input:focus, [data-theme="night"] .field textarea:focus { border-color: var(--accent); } .field textarea { resize: vertical; min-height: 64px; } @media (max-width: 420px) { .field-row { grid-template-columns: 1fr; gap: 0; } } /* ---------- sections ---------- */ .section { padding-block: clamp(3.5rem, 8vw, 6rem); } .section.alt { background: var(--bg-alt); } .section-head { max-width: 760px; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); } .section-head p { color: var(--muted); font-size: 1.08rem; } .center .section-head, .section-head.center { margin-inline: auto; } .note { display: flex; gap: .55rem; align-items: flex-start; color: var(--muted); font-size: .92rem; margin-top: 1.5rem; } .note .ico { color: var(--accent); margin-top: .2em; } .grid { display: grid; gap: clamp(1rem, 2.5vw, 1.6rem); } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } /* glance */ .glance-section { padding-block: clamp(2.5rem, 6vw, 4rem); } .glance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 2rem; align-items: start; } .glance h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .glance-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1px; margin: 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .glance-list div { background: var(--surface); padding: 1rem 1.2rem; } .glance-list dt { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); } html:not([lang^="en"]) .glance-list dt { text-transform: none; letter-spacing: 0; font-size: .88rem; } .glance-list dd { margin: .2rem 0 0; font-weight: 600; color: var(--heading); } @media (max-width: 800px) { .glance { grid-template-columns: 1fr; gap: 1rem; } } /* features */ .features { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 1rem; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem 1.2rem; box-shadow: var(--shadow); } .feature-ico { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); margin-bottom: 1rem; } [data-theme="night"] .feature-ico { color: var(--accent); background: rgba(245, 176, 65, .1); } [data-theme="tawang"] .feature-ico { color: var(--primary); background: color-mix(in srgb, var(--accent) 22%, transparent); } [data-theme="bamboo"] .feature-ico { border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .feature h3 { font-size: 1.08rem; margin-bottom: .35rem; } .feature p { color: var(--muted); font-size: .95rem; margin: 0; } /* cards */ .card { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); transition: transform .25s ease, box-shadow .25s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; } .card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); } .card-media img, .card-media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .card:hover .card-media img { transform: scale(1.05); } .card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .card-body h3 { margin-bottom: .4rem; } .card-body p { color: var(--muted); font-size: .95rem; } .more { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--primary); font-size: .95rem; } [data-theme="night"] .more { color: var(--accent); } .more .ico { transition: transform .2s; } .card:hover .more .ico { transform: translateX(4px); } [data-theme="teagarden"] .card { box-shadow: none; } [data-theme="teagarden"] .card-media { margin: 10px 10px 0; border-radius: 3px; } [data-theme="bamboo"] .card-media { margin: 10px 10px 0; border-radius: calc(var(--radius) - 8px); } .route-facts { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .route-facts li { display: flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .92rem; color: var(--muted); } .route-facts .ico { color: var(--accent); } /* steps */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; counter-reset: s; } .step { position: relative; background: var(--surface); border-radius: var(--radius); padding: 1.6rem; border: 1px solid var(--border); } .step-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); font-weight: 800; font-family: var(--font-display); margin-bottom: 1rem; } .step p { color: var(--muted); margin: 0; } /* faq */ .faq-list { display: grid; gap: .75rem; } .faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .faq-item summary { cursor: pointer; list-style: none; padding: 1.1rem 3rem 1.1rem 1.25rem; position: relative; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--accent); transition: transform .2s; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item h3 { margin: 0; font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; line-height: 1.45; } .faq-a { padding: 0 1.25rem 1.1rem; color: var(--muted); } .faq-a p { margin: 0; } /* cta */ .cta-band { background: var(--cta-bg); color: var(--cta-text); padding-block: clamp(2.5rem, 6vw, 4rem); } .cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .cta-band h2 { color: inherit; margin-bottom: .3rem; } .cta-band p { margin: 0; opacity: .88; } .cta-band .btn-row { margin-top: 0; } [data-theme="night"] .cta-band { border-block: 1px solid var(--border); } /* ---------- inner pages ---------- */ .page-hero { position: relative; isolation: isolate; color: #fff; min-height: clamp(320px, 48vh, 480px); display: flex; align-items: flex-end; overflow: hidden; } .page-hero-media, .page-hero-shade { position: absolute; inset: 0; z-index: -1; } .page-hero-media img, .page-hero-media .img-ph { width: 100%; height: 100%; object-fit: cover; } .page-hero-shade { background: var(--page-shade); } .page-hero-inner { padding-block: 3rem 2.5rem; } .page-hero h1 { color: #fff; max-width: 900px; font-size: clamp(2rem, 4.6vw, 3.3rem); } .page-hero .lead { max-width: 720px; font-size: 1.12rem; opacity: .92; margin: 0; } .page-hero .eyebrow { color: var(--highlight); } [data-theme="teagarden"] .page-hero .eyebrow, [data-theme="bamboo"] .page-hero .eyebrow { color: #f3d9a4; } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 1rem 0 0; margin: 0; font-size: .9rem; color: var(--muted); } .breadcrumbs li + li::before { content: "›"; margin-right: .35rem; opacity: .6; } .breadcrumbs a { color: var(--muted); } .breadcrumbs + .section { padding-top: clamp(2rem, 5vw, 3.5rem); } .split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .split .form-card { position: sticky; top: 96px; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split .form-card { position: static; } } .places { display: grid; gap: clamp(2rem, 5vw, 3.5rem); } .place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; } .place-rev .place-media { order: 2; } .place-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; background: var(--bg-alt); } .place-media img, .place-media .img-ph { width: 100%; height: 100%; object-fit: cover; } .place-n { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: var(--display-weight); color: color-mix(in srgb, var(--accent) 45%, transparent); display: block; margin-bottom: .5rem; } .place-body p { color: var(--muted); font-size: 1.05rem; } @media (max-width: 800px) { .place { grid-template-columns: 1fr; } .place-rev .place-media { order: 0; } } .tips { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .tips li { display: flex; gap: .7rem; align-items: flex-start; } .tips .ico { color: var(--wa); margin-top: .25em; } .fact-tiles { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; } .fact-tiles li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; } .fact-tiles .ico { grid-row: span 2; width: 34px; height: 34px; color: var(--accent); } .fact-tiles strong { font-size: 1.15rem; white-space: nowrap; color: var(--heading); font-family: var(--font-display); } .fact-k { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } html:not([lang^="en"]) .fact-k { text-transform: none; letter-spacing: 0; } .lead-dark { font-size: 1.15rem; color: var(--text); } .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; } .contact-list li { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; } .contact-list .ico { width: 30px; height: 30px; color: var(--accent); } .contact-list div { display: flex; flex-direction: column; } .contact-list strong { color: var(--heading); font-size: 1.1rem; } .poster { margin: 2rem 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); } .table-wrap { overflow-x: auto; } .credits { width: 100%; border-collapse: collapse; font-size: .92rem; } .credits th, .credits td { text-align: left; padding: .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .credits .thumb { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; } .notfound { min-height: 50vh; } .center-list { justify-content: center; } /* ---------- footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: .95rem; } .site-footer a { color: var(--footer-text); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer .brand { color: #fff; margin-bottom: 1rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .footer-h { font-family: var(--font-body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; font-weight: 700; } html:not([lang^="en"]) .footer-h { letter-spacing: 0; font-size: .95rem; } .footer-contact li, .footer-contact a { display: flex; gap: .5rem; align-items: flex-start; } .footer-contact .ico { margin-top: .2em; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 2.5rem; padding-block: 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, .12); } .footer-bottom p { margin: 0; font-size: .88rem; } .footer-langs { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: 0; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- floating ---------- */ .wa-float { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 10px 30px rgba(37, 211, 102, .45); transition: transform .2s; } .wa-float .ico { width: 30px; height: 30px; } .wa-float:hover { transform: scale(1.07); } .theme-picker { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; } .theme-toggle { display: flex; align-items: center; gap: .4rem; background: #111827; color: #fff; border: 0; border-radius: 999px; padding: .7rem 1rem; font: 600 .9rem system-ui, sans-serif; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .theme-panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(320px, calc(100vw - 32px)); background: #fff; color: #111827; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: .75rem; } .theme-panel-title { margin: .25rem .5rem .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7280; } .theme-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .theme-panel button { width: 100%; display: flex; gap: .75rem; align-items: center; text-align: left; background: none; border: 2px solid transparent; border-radius: 12px; padding: .55rem .6rem; cursor: pointer; color: inherit; font: inherit; } .theme-panel button:hover { background: #f3f4f6; } .theme-panel button[aria-pressed="true"] { border-color: #111827; } .theme-panel strong { display: block; font-size: .92rem; } .theme-panel small { display: block; font-size: .78rem; color: #6b7280; line-height: 1.3; } .sw { display: inline-flex; flex: none; } .sw i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; margin-left: -6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); } .sw i:first-child { margin-left: 0; } .sw-lg i { width: 30px; height: 30px; margin-left: -8px; } .theme-compare { display: block; text-align: center; margin-top: .5rem; padding: .5rem; font-weight: 600; font-size: .88rem; color: #111827; } @media (max-width: 520px) { .theme-toggle span { display: none; } .theme-toggle { padding: .8rem; } } /* theme demo page */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; } .theme-card { background: var(--bg); color: var(--text); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-family: var(--font-body); } .tc-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; } .tc-hero img, .tc-hero .img-ph { width: 100%; height: 100%; object-fit: cover; } .tc-num { position: absolute; top: 12px; left: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 800; } .tc-body { padding: 1.4rem; } .tc-body h2 { font-size: 1.7rem; margin-bottom: .25rem; } .tc-body > p { color: var(--muted); } .tc-sample { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 .5rem; } .tc-script { font-family: var(--font-display); color: var(--heading); font-size: 1.05rem; margin: .5rem 0 0; } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* lang suggestion */ .lang-suggest { position: fixed; top: calc(122px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 55; max-width: calc(100vw - 32px); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .6rem .6rem .6rem 1rem; display: flex; align-items: center; gap: .6rem; font-weight: 600; } .lang-suggest button { background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted); padding: .2rem .4rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; } }