/* Local fonts keep city typography independent of missing global font files. */ @font-face { font-family: 'Ichingo Explorer'; src: url('../fonts/explorer.ttf') format('truetype'); font-weight: 200 800; font-display: swap; } @font-face { font-family: 'Ichingo Explorer FA'; src: url('../fonts/explorer-fa.ttf') format('truetype'); font-weight: 100 900; font-display: swap; } /* All explorer rules are isolated from the theme's article/prose styles. */ .ichingo-prose:has(#ichingo-city-transit-hub) { max-width: none; } #ichingo-city-transit-hub { --ct-ink: #182b3b; --ct-muted: #596c7d; --ct-accent: #31534d; --ct-border: #dfe6e9; --ct-paper: #fff; --ct-wash: #f1f5f5; --ct-gold: #f5d78d; --ct-radius: 18px; color: var(--ct-ink); font: 400 14px/1.65 'Ichingo Explorer', 'Segoe UI', system-ui, sans-serif; margin: 0 auto; max-width: 1400px; text-align: start; isolation: isolate; } #ichingo-city-transit-hub *, #ichingo-city-transit-hub *::before, #ichingo-city-transit-hub *::after { box-sizing: border-box; } #ichingo-city-transit-hub :is(h1,h2,h3,h4,h5,p,ul,ol) { padding: 0; margin: 0; color: inherit; font-family: inherit; } #ichingo-city-transit-hub :is(h1,h2,h3,h4,h5) { font-weight: 650; line-height: 1.3; letter-spacing: -.025em; } #ichingo-city-transit-hub :is(button,input,select,textarea) { font: inherit; letter-spacing: inherit; } #ichingo-city-transit-hub button { appearance: none; cursor: pointer; box-shadow: none; text-transform: none; color: inherit; background: none; border: 0; margin: 0; } #ichingo-city-transit-hub a { color: inherit; text-decoration: none; } #ichingo-city-transit-hub img { display: block; max-width: 100%; border: 0; border-radius: 0; margin: 0; } #ichingo-city-transit-hub [hidden] { display: none !important; } #ichingo-city-transit-hub :is(button,a,input,summary,textarea,[tabindex]):focus-visible { outline: 3px solid #775cd6; outline-offset: 4px; } #ichingo-city-transit-hub .ct-icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; width: 20px; height: 20px; color: inherit; opacity: 1; } #ichingo-city-transit-hub .ct-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #ichingo-city-transit-hub .ct-page-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 26px; } #ichingo-city-transit-hub .ct-page-heading h1 { font-size: clamp(25px,2.8vw,35px); } #ichingo-city-transit-hub .ct-page-heading p { color: var(--ct-muted); margin-top: 7px; max-width: 650px; } #ichingo-city-transit-hub .ct-kicker { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; color: var(--ct-accent); margin-bottom: 10px; } #ichingo-city-transit-hub .ct-kicker::before { content: ''; width: 22px; height: 2px; background: #a9915c; } #ichingo-city-transit-hub .ct-page-stamp { color: #7c887f; font-size: 12px; letter-spacing: .08em; white-space: nowrap; border-bottom: 1px solid #becdc9; padding: 0 0 5px; } #ichingo-city-transit-hub .ct-layout { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 26px; align-items: start; } #ichingo-city-transit-hub .ct-main { min-width: 0; } #ichingo-city-transit-hub .ct-rail { position: sticky; top: 100px; background: var(--ct-paper); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: 18px 12px 12px; } #ichingo-city-transit-hub .ct-rail-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 5px 14px; font-weight: 700; font-size: 13px; } #ichingo-city-transit-hub .ct-count { font-size: 11px; background: var(--ct-wash); border: 1px solid var(--ct-border); border-radius: 7px; padding: 1px 7px; } #ichingo-city-transit-hub .ct-search { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #cedadd; border-radius: 10px; padding: 0 14px; color: var(--ct-muted); min-width: 0; } #ichingo-city-transit-hub .ct-search:focus-within { border-color: #66887f; box-shadow: 0 0 0 3px #31534d12; } #ichingo-city-transit-hub .ct-search input { width: 100%; min-width: 0; background: transparent; border: 0; border-radius: 0; color: var(--ct-ink); padding: 13px 0; height: 48px; outline: none; box-shadow: none; } #ichingo-city-transit-hub .ct-search input::placeholder { color: #677988; opacity: 1; } #ichingo-city-transit-hub .ct-search--city { padding: 0 10px; margin: 0 2px 10px; background: #f7f9f9; border-color: transparent; } #ichingo-city-transit-hub .ct-search--city input { font-size: 12px; height: 42px; } #ichingo-city-transit-hub .ct-search--city .ct-icon { width: 16px; height: 16px; } #ichingo-city-transit-hub .ct-city-list { max-height: min(590px,65vh); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; padding: 3px; } #ichingo-city-transit-hub .ct-city-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border-radius: 10px; text-align: start; margin-bottom: 3px; transition: background .16s; } #ichingo-city-transit-hub .ct-city-item:hover { background: #f1f6f4; } #ichingo-city-transit-hub .ct-city-item[aria-current=true] { background: #e6efeb; color: #204b40; box-shadow: inset 3px 0 #437563; } #ichingo-city-transit-hub .ct-city-thumb { position: relative; width: 43px; height: 45px; flex-shrink: 0; border-radius: 9px; overflow: hidden; background: #dce8e2; } #ichingo-city-transit-hub .ct-city-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #ichingo-city-transit-hub .ct-city-label { min-width: 0; flex: 1; } #ichingo-city-transit-hub .ct-city-label strong { display: block; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; } #ichingo-city-transit-hub .ct-city-label small { display: block; font-size: 11px; line-height: 1.5; color: var(--ct-muted); text-align: start; } #ichingo-city-transit-hub .ct-city-item > .ct-icon { width: 14px; height: 14px; color: #688579; } #ichingo-city-transit-hub .ct-rail-note { display: flex; align-items: start; gap: 8px; border-top: 1px solid var(--ct-border); margin: 12px 7px 0; padding: 16px 0 2px; font-size: 11px; line-height: 1.6; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-city-empty { padding: 14px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-hero { position: relative; overflow: hidden; min-height: 345px; display: flex; align-items: end; border-radius: 20px; color: white; background: #233f48; } #ichingo-city-transit-hub .ct-hero-image { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; object-position: center 48%; } #ichingo-city-transit-hub .ct-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(10,29,40,.83),rgba(10,29,40,.30) 85%),linear-gradient(0deg,rgba(10,29,40,.48),transparent 80%); } #ichingo-city-transit-hub .ct-hero-content { position: relative; padding: 35px 34px 44px; max-width: 710px; } #ichingo-city-transit-hub .ct-eyebrow { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; font-weight: 750; font-size: 10px; letter-spacing: .16em; color: var(--ct-gold); } #ichingo-city-transit-hub .ct-eyebrow .ct-icon { width: 17px; height: 17px; } #ichingo-city-transit-hub .ct-hero h2 { font-size: clamp(32px,4vw,52px); color: #fff; line-height: 1.12; margin: 16px 0 5px; letter-spacing: -.035em; overflow-wrap: anywhere; } #ichingo-city-transit-hub .ct-hero h2 span { display: inline-block; font-size: .48em; color: #ffdf94; font-weight: 400; letter-spacing: .07em; vertical-align: middle; } #ichingo-city-transit-hub .ct-pinyin { font-size: 12px; letter-spacing: .1em; opacity: .85; text-align: start; } #ichingo-city-transit-hub .ct-hero-desc { margin-top: 14px; max-width: 530px; color: #f0f4f5; font-size: 13px; line-height: 1.7; } #ichingo-city-transit-hub .ct-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } #ichingo-city-transit-hub .ct-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 13px; border: 1px solid #cbd8d4; border-radius: 8px; color: var(--ct-accent); background: white; font-size: 12px; font-weight: 650; line-height: 1.45; text-align: center; transition: background .15s,box-shadow .15s; } #ichingo-city-transit-hub .ct-button:hover { background: #edf3ef; box-shadow: 0 2px 6px #193d3010; } #ichingo-city-transit-hub .ct-button .ct-icon { width: 16px; height: 16px; } #ichingo-city-transit-hub .ct-button--light { background: #fff6df; border-color: #fff6df; color: #273a33; } #ichingo-city-transit-hub .ct-button--glass { background: #ffffff13; border-color: #ffffff70; color: white; backdrop-filter: blur(8px); } #ichingo-city-transit-hub .ct-button--glass:hover { background: #ffffff30; } #ichingo-city-transit-hub .ct-button--primary { background: var(--ct-accent); border-color: var(--ct-accent); color: #fff; } #ichingo-city-transit-hub .ct-button--primary:hover { background: #233e36; } #ichingo-city-transit-hub .ct-button--text { border-color: transparent; background: transparent; padding: 8px 0; text-align: start; } #ichingo-city-transit-hub .ct-button--text:hover { color: #182b3b; text-decoration: underline; background: transparent; box-shadow: none; } #ichingo-city-transit-hub .ct-photo-credit { position: absolute; inset-inline-end: 12px; bottom: 9px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 24px); font-size: 9px; color: white; background: #102b35a8; padding: 3px 7px; border-radius: 5px; } #ichingo-city-transit-hub .ct-photo-credit .ct-icon { width: 12px; height: 12px; } #ichingo-city-transit-hub .ct-facts { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr) minmax(0,.8fr); background: white; margin: 14px 0 22px; border: 1px solid var(--ct-border); border-radius: 12px; padding: 16px 6px; } #ichingo-city-transit-hub .ct-facts > div { display: flex; align-items: center; gap: 12px; padding: 0 15px; min-width: 0; } #ichingo-city-transit-hub .ct-facts > div + div { border-inline-start: 1px solid var(--ct-border); } #ichingo-city-transit-hub .ct-facts .ct-icon { color: #6a8375; } #ichingo-city-transit-hub .ct-facts small { display: block; font-size: 10px; color: var(--ct-muted); margin-bottom: 4px; } #ichingo-city-transit-hub .ct-facts strong { display: block; font-size: 11px; font-weight: 650; line-height: 1.5; } #ichingo-city-transit-hub .ct-tabs { display: flex; border-bottom: 1px solid #ccd8d7; margin-bottom: 26px; scroll-margin-top: 100px; gap: 10px; } #ichingo-city-transit-hub .ct-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px 16px; flex: 1; min-height: 54px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 12px; font-weight: 650; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-tabs button:hover { color: var(--ct-accent); } #ichingo-city-transit-hub .ct-tabs button[aria-selected=true] { border-color: var(--ct-accent); color: var(--ct-accent); } #ichingo-city-transit-hub .ct-tabs .ct-icon { width: 18px; height: 18px; } #ichingo-city-transit-hub #ct-panel { outline-offset: 6px; } #ichingo-city-transit-hub .ct-section-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 20px; } #ichingo-city-transit-hub .ct-section-head h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; } #ichingo-city-transit-hub .ct-section-head p { margin-top: 6px; color: var(--ct-muted); font-size: 12px; } #ichingo-city-transit-hub .ct-save-filter { flex-shrink: 0; } #ichingo-city-transit-hub .ct-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; } #ichingo-city-transit-hub .ct-filters .ct-button { min-height: 38px; font-size: 11px; font-weight: 600; padding: 7px 12px; border-radius: 7px; border-color: #dce5e1; background: transparent; } #ichingo-city-transit-hub :is(.ct-filters,.ct-section-head) [aria-pressed=true] { background: #31534d; color: white; border-color: #31534d; } #ichingo-city-transit-hub .ct-results-meta { color: var(--ct-muted); font-size: 11px; margin: 17px 0 11px; } #ichingo-city-transit-hub .ct-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; } #ichingo-city-transit-hub .ct-card { overflow: hidden; display: flex; flex-direction: column; border-radius: 15px; border: 1px solid var(--ct-border); background: white; box-shadow: 0 3px 7px #193d3004; transition: box-shadow .2s,transform .2s; min-width: 0; margin: 0; } #ichingo-city-transit-hub .ct-card:hover { box-shadow: 0 8px 25px #1c403711; transform: translateY(-2px); } #ichingo-city-transit-hub .ct-card-media { position: relative; aspect-ratio: 1.82; overflow: hidden; background: #e7efec; } #ichingo-city-transit-hub .ct-card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } #ichingo-city-transit-hub .ct-card:hover .ct-card-media > img { transform: scale(1.035); } #ichingo-city-transit-hub .ct-category { position: absolute; inset-inline-start: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; background: #fffffff2; color: #253e36; font-size: 10px; font-weight: 700; line-height: 1.5; max-width: calc(100% - 75px); border-radius: 6px; box-shadow: 0 1px 4px #17312c12; } #ichingo-city-transit-hub .ct-category .ct-icon { width: 13px; height: 13px; } #ichingo-city-transit-hub .ct-save { position: absolute; inset-inline-end: 8px; top: 8px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #ffffffed; color: #2f4b40; } #ichingo-city-transit-hub .ct-save[aria-pressed=true] { background: #31534d; color: white; } #ichingo-city-transit-hub .ct-save[aria-pressed=true] svg { fill: currentColor; } #ichingo-city-transit-hub .ct-card-credit { position: absolute; inset-inline-end: 6px; bottom: 5px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #132c3699; color: #fff; } #ichingo-city-transit-hub .ct-card-credit .ct-icon { width: 14px; height: 14px; } #ichingo-city-transit-hub .ct-card-content { display: flex; flex-direction: column; flex: 1; padding: 19px 20px 8px; } #ichingo-city-transit-hub .ct-card h4 { font-size: 17px; line-height: 1.45; } #ichingo-city-transit-hub .ct-card h4 button { padding: 0; font: inherit; text-align: start; } #ichingo-city-transit-hub .ct-card h4 button:hover { color: var(--ct-accent); text-decoration: underline; text-underline-offset: 4px; } #ichingo-city-transit-hub .ct-chinese { color: #60796f; font-size: 12px; margin-top: 5px; text-align: start; } #ichingo-city-transit-hub :is(.ct-chinese,.ct-pinyin,.ct-city-label small) { text-align: match-parent; } #ichingo-city-transit-hub .ct-card-description { font-size: 12px; line-height: 1.75; color: var(--ct-muted); margin: 12px 0 17px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #ichingo-city-transit-hub .ct-card-facts { display: grid; gap: 9px; padding-bottom: 16px; margin-top: auto; } #ichingo-city-transit-hub .ct-detail-line { display: flex; align-items: start; gap: 9px; line-height: 1.65; font-size: 11px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-detail-line .ct-icon { width: 15px; height: 15px; margin-top: 2px; color: #6e8a80; } #ichingo-city-transit-hub .ct-detail-line small { display: block; color: #445d51; font-size: 11px; font-weight: 700; margin-bottom: 4px; } #ichingo-city-transit-hub .ct-card-actions { border-top: 1px solid #e8eeea; display: flex; justify-content: space-between; gap: 10px; } #ichingo-city-transit-hub .ct-card-actions .ct-button { font-size: 10px; } #ichingo-city-transit-hub .ct-art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(155deg,#d4e5dd,#ebefe3 65%); } #ichingo-city-transit-hub .ct-art-sun { position: absolute; width: 75px; height: 75px; inset-inline-end: 20%; top: 15%; background: #e3c997; border-radius: 50%; } #ichingo-city-transit-hub .ct-art-hill { position: absolute; width: 90%; height: 160%; left: -20%; top: 52%; background: #adcabe; border-radius: 40%; transform: rotate(34deg); } #ichingo-city-transit-hub .ct-art-hill--near { left: 42%; top: 63%; background: #89aa9c; transform: rotate(-28deg); } #ichingo-city-transit-hub .ct-art-symbol { position: absolute; inset: 0; display: grid; place-items: center; color: #3b6052; } #ichingo-city-transit-hub .ct-art-symbol .ct-icon { width: 55px; height: 55px; stroke-width: 1; } #ichingo-city-transit-hub .ct-art--culture, #ichingo-city-transit-hub .ct-art--food { filter: hue-rotate(325deg); } #ichingo-city-transit-hub .ct-art--shopping { filter: hue-rotate(100deg); } #ichingo-city-transit-hub .ct-city-thumb .ct-art-symbol .ct-icon { width: 22px; height: 22px; } #ichingo-city-transit-hub .ct-panel-card { padding: 25px; background: #fff; border: 1px solid var(--ct-border); border-radius: 14px; margin-top: 24px; } #ichingo-city-transit-hub .ct-panel-card .ct-section-head h3 { font-size: 18px; } #ichingo-city-transit-hub .ct-text-list { list-style: none; display: grid; gap: 15px; } #ichingo-city-transit-hub .ct-text-list li { margin: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-text-list strong { color: var(--ct-ink); font-size: 14px; } #ichingo-city-transit-hub .ct-notice, #ichingo-city-transit-hub .ct-tip { display: flex; gap: 10px; align-items: start; padding: 14px 16px; border-radius: 10px; background: #eaf1ed; color: #3c6153; font-size: 12px; margin-bottom: 24px; } #ichingo-city-transit-hub .ct-tip { margin: 16px 0 0; background: #f6f3eb; color: #665538; } #ichingo-city-transit-hub .ct-airport-group { margin-top: 26px; } #ichingo-city-transit-hub .ct-airport-group h3 { font-size: 18px; } #ichingo-city-transit-hub .ct-route-grid { display: grid; gap: 12px; } #ichingo-city-transit-hub .ct-route { background: white; border: 1px solid var(--ct-border); border-radius: 13px; overflow: hidden; } #ichingo-city-transit-hub .ct-route summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 20px; } #ichingo-city-transit-hub .ct-route summary::-webkit-details-marker { display: none; } #ichingo-city-transit-hub .ct-route summary > span:nth-child(2) { flex: 1; min-width: 0; } #ichingo-city-transit-hub .ct-route summary small { display: block; font-size: 10px; font-weight: 700; color: #667e6c; letter-spacing: .08em; margin-bottom: 3px; } #ichingo-city-transit-hub .ct-route summary strong { font-size: 15px; font-weight: 650; } #ichingo-city-transit-hub .ct-route-icon { display: grid; place-items: center; width: 43px; height: 46px; background: #ecf2ed; color: #456351; border-radius: 10px; flex-shrink: 0; } #ichingo-city-transit-hub .ct-route-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--ct-muted); margin-top: 5px; } #ichingo-city-transit-hub .ct-route-summary .ct-icon { width: 13px; height: 13px; } #ichingo-city-transit-hub .ct-route-summary b { color: #31534d; margin-inline-start: 6px; font-weight: 650; } #ichingo-city-transit-hub .ct-route[open] summary > .ct-icon { transform: rotate(90deg); } #ichingo-city-transit-hub .ct-route-body { border-top: 1px solid var(--ct-border); padding: 20px; font-size: 13px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-taxi-inline { background: #f3f6f5; border-radius: 10px; padding: 16px; margin-top: 18px; display: grid; gap: 6px; } #ichingo-city-transit-hub .ct-taxi-inline small { text-transform: uppercase; font-size: 10px; letter-spacing: .1em; } #ichingo-city-transit-hub .ct-taxi-inline strong { color: #243c32; font-size: 19px; text-align: start; } #ichingo-city-transit-hub .ct-taxi-inline em { font-style: normal; font-size: 12px; text-align: start; } #ichingo-city-transit-hub .ct-taxi-inline .ct-button { justify-self: start; margin-top: 5px; } #ichingo-city-transit-hub .ct-stations { display: grid; gap: 20px; } #ichingo-city-transit-hub .ct-stations article + article { border-top: 1px solid var(--ct-border); padding-top: 18px; } #ichingo-city-transit-hub .ct-stations h4, #ichingo-city-transit-hub .ct-hospital h4 { font-size: 17px; } #ichingo-city-transit-hub .ct-stations article > p:not(.ct-chinese), #ichingo-city-transit-hub .ct-hospital > p { font-size: 12px; color: var(--ct-muted); margin: 10px 0; } #ichingo-city-transit-hub .ct-stations .ct-detail-line { margin-top: 10px; } #ichingo-city-transit-hub .ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; } #ichingo-city-transit-hub .ct-hospital { border-top: 3px solid #cf9b79; } #ichingo-city-transit-hub .ct-hospital .ct-service { color: #31534d; display: flex; align-items: center; gap: 8px; } #ichingo-city-transit-hub .ct-tips-list { list-style: none; } #ichingo-city-transit-hub .ct-tips-list li { display: flex; align-items: start; gap: 18px; padding: 18px 0; margin: 0; border-top: 1px solid var(--ct-border); } #ichingo-city-transit-hub .ct-tips-list li span { font-size: 19px; line-height: 1.5; color: #8ca196; } #ichingo-city-transit-hub .ct-tips-list li p { font-size: 13px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-map-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 16px; } #ichingo-city-transit-hub .ct-map-frame { border: 1px solid var(--ct-border); border-radius: 13px; overflow: hidden; background: #e9eeeb; display: flex; flex-direction: column; } #ichingo-city-transit-hub #ct-map-surface { height: 380px; position: relative; direction: ltr; } #ichingo-city-transit-hub #ct-map-surface iframe { height: 100%; width: 100%; border: 0; display: block; } #ichingo-city-transit-hub .ct-map-notice { font-size: 11px; padding: 12px; color: var(--ct-muted); background: white; flex: 1; } #ichingo-city-transit-hub .ct-place-list { max-height: 449px; overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--ct-border); border-radius: 13px; background: white; padding: 6px; } #ichingo-city-transit-hub .ct-place-list button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 13px 9px; border-radius: 9px; } #ichingo-city-transit-hub .ct-place-list button > span:nth-child(2) { flex: 1; } #ichingo-city-transit-hub .ct-place-list strong { display: block; font-size: 12px; font-weight: 650; } #ichingo-city-transit-hub .ct-place-list small { font-size: 10px; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-place-list [aria-pressed=true] { background: #e8f0eb; } #ichingo-city-transit-hub .ct-place-number { color: #789586; font-size: 12px; } #ichingo-city-transit-hub .ct-place-list .ct-icon { width: 14px; height: 14px; } #ichingo-city-transit-hub .ct-selected-place p { font-size: 13px; color: var(--ct-muted); margin: 8px 0; } #ichingo-city-transit-hub .ct-empty { grid-column: 1 / -1; display: flex; align-items: center; flex-direction: column; text-align: center; gap: 12px; border: 1px dashed #bdcfc7; padding: 36px 20px; border-radius: 13px; background: #f4f7f4; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-loading { padding: 10px; text-align: center; color: var(--ct-muted); } #ichingo-city-transit-hub .ct-skeleton { height: 345px; border-radius: 20px; background: linear-gradient(105deg,#e3ebe6,#f4f6f2,#e3ebe6); background-size: 200% 100%; animation: ct-shimmer 1.8s linear infinite; margin-bottom: 20px; } @keyframes ct-shimmer { to { background-position: -200% 0; } } body.ct-modal-open { overflow: hidden; } #ichingo-city-transit-hub .ct-dialog { position: fixed; inset: 0; margin: auto; width: min(660px,calc(100% - 28px)); max-height: 88vh; max-height: 88dvh; border: 0; padding: 0; border-radius: 18px; background: white; color: var(--ct-ink); box-shadow: 0 24px 100px #061d4055; font: inherit; overflow: hidden; } #ichingo-city-transit-hub .ct-dialog[open] { display: flex; flex-direction: column; } #ichingo-city-transit-hub .ct-dialog::backdrop { background: #102530a8; backdrop-filter: blur(5px); } #ichingo-city-transit-hub .ct-dialog-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px; gap: 12px; background: white; flex-shrink: 0; } #ichingo-city-transit-hub .ct-dialog-top .ct-eyebrow { color: #426354; } #ichingo-city-transit-hub .ct-dialog-close { border: 0; padding: 10px; } #ichingo-city-transit-hub .ct-dialog-scroll { overflow-y: auto; overscroll-behavior: contain; } #ichingo-city-transit-hub .ct-dialog-image { height: 260px; position: relative; overflow: hidden; } #ichingo-city-transit-hub .ct-dialog-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; } #ichingo-city-transit-hub .ct-dialog-content { padding: 25px; } #ichingo-city-transit-hub .ct-dialog-content h2 { font-size: 25px; } #ichingo-city-transit-hub .ct-dialog-content > p { color: var(--ct-muted); font-size: 13px; margin-top: 16px; } #ichingo-city-transit-hub .ct-taxi-display { background: #f2f5ef; border: 1px solid #dce5d6; padding: 22px; border-radius: 12px; margin: 20px 0; text-align: center; display: grid; gap: 8px; } #ichingo-city-transit-hub .ct-taxi-display strong { font-size: 30px; line-height: 1.6; color: #223a30; } #ichingo-city-transit-hub .ct-taxi-display em { font-size: 13px; color: var(--ct-muted); font-style: normal; } #ichingo-city-transit-hub .ct-taxi-display small { font-size: 13px; color: #63785c; } #ichingo-city-transit-hub .ct-dialog-facts { display: grid; gap: 16px; margin-top: 20px; } #ichingo-city-transit-hub .ct-dialog-facts .ct-detail-line { font-size: 13px; } #ichingo-city-transit-hub .ct-license { font-size: 10px !important; color: #6d7d72; } #ichingo-city-transit-hub .ct-license a { text-decoration: underline; } #ichingo-city-transit-hub .ct-copy-buffer { position: fixed; inset-inline-start: -9999px; top: 0; } #ichingo-city-transit-hub :is(.ct-card-content,.ct-route-body,.ct-panel-card,.ct-dialog-content) { overflow-wrap: anywhere; } [dir=rtl] #ichingo-city-transit-hub { font-family: 'Ichingo Explorer FA','Segoe UI',system-ui,sans-serif; } [dir=rtl] #ichingo-city-transit-hub .ct-city-item[aria-current=true] { box-shadow: inset -3px 0 #437563; } [dir=rtl] #ichingo-city-transit-hub .ct-hero-shade { transform: scaleX(-1); } [dir=rtl] #ichingo-city-transit-hub .ct-city-item > .ct-icon { transform: rotate(180deg); } [dir=rtl] #ichingo-city-transit-hub :is(.ct-kicker,.ct-eyebrow,.ct-route summary small) { letter-spacing: 0; } @media(min-width:1450px) { #ichingo-city-transit-hub .ct-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } } @media(max-width:1050px) { #ichingo-city-transit-hub .ct-layout { grid-template-columns: 205px minmax(0,1fr); gap: 18px; } #ichingo-city-transit-hub .ct-hero-content { padding: 28px 25px 42px; } #ichingo-city-transit-hub .ct-facts > div { padding: 0 10px; gap: 7px; } #ichingo-city-transit-hub .ct-grid { gap: 15px; } #ichingo-city-transit-hub .ct-card-content { padding: 16px 14px 6px; } #ichingo-city-transit-hub .ct-card h4 { font-size: 16px; } } @media(max-width:800px) { #ichingo-city-transit-hub .ct-page-heading { margin-bottom: 18px; } #ichingo-city-transit-hub .ct-page-stamp { display: none; } #ichingo-city-transit-hub .ct-layout { grid-template-columns: 1fr; gap: 20px; } #ichingo-city-transit-hub .ct-rail { position: static; padding: 14px 12px 10px; min-width: 0; } #ichingo-city-transit-hub .ct-rail-heading { padding-bottom: 10px; } #ichingo-city-transit-hub .ct-search--city { margin: 0 0 8px; } #ichingo-city-transit-hub .ct-city-list { display: flex; max-height: none; overflow: auto; gap: 6px; padding: 3px; scroll-snap-type: x proximity; } #ichingo-city-transit-hub .ct-city-item { min-width: 146px; width: auto; flex-shrink: 0; padding: 8px; border: 1px solid var(--ct-border); margin: 0; scroll-snap-align: start; } #ichingo-city-transit-hub .ct-city-item[aria-current=true] { box-shadow: none; border-color: #6e9783; } #ichingo-city-transit-hub .ct-city-thumb { width: 33px; height: 37px; } #ichingo-city-transit-hub .ct-city-item > .ct-icon, #ichingo-city-transit-hub .ct-rail-note { display: none; } #ichingo-city-transit-hub .ct-hero { min-height: 330px; } #ichingo-city-transit-hub .ct-hero h2 { font-size: 43px; } #ichingo-city-transit-hub .ct-tabs { gap: 3px; scroll-margin-top: 90px; } } @media(max-width:520px) { #ichingo-city-transit-hub { font-size: 14px; } #ichingo-city-transit-hub .ct-grid { grid-template-columns: 1fr; gap: 20px; } #ichingo-city-transit-hub .ct-hero { border-radius: 15px; min-height: 345px; } #ichingo-city-transit-hub .ct-hero-content { padding: 25px 22px 44px; } #ichingo-city-transit-hub .ct-hero h2 { font-size: 36px; } #ichingo-city-transit-hub .ct-hero-desc { font-size: 12px; } #ichingo-city-transit-hub .ct-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 0; padding: 15px 6px; } #ichingo-city-transit-hub .ct-facts > div:first-child { grid-column: 1 / -1; } #ichingo-city-transit-hub .ct-facts > div:nth-child(2) { border: 0; } #ichingo-city-transit-hub .ct-facts strong { font-size: 11px; } #ichingo-city-transit-hub .ct-tabs { margin-bottom: 23px; } #ichingo-city-transit-hub .ct-tabs button { flex-direction: column; gap: 5px; padding: 10px 3px 13px; font-size: 10px; } #ichingo-city-transit-hub .ct-section-head h3 { font-size: 20px; } #ichingo-city-transit-hub .ct-section-head p { font-size: 11px; } #ichingo-city-transit-hub .ct-search input { font-size: 16px; } #ichingo-city-transit-hub .ct-search--city input { font-size: 16px; } #ichingo-city-transit-hub .ct-card-media { aspect-ratio: 1.72; } #ichingo-city-transit-hub .ct-card-content { padding: 19px 20px 8px; } #ichingo-city-transit-hub .ct-card h4 { font-size: 18px; } #ichingo-city-transit-hub .ct-card-description { font-size: 13px; } #ichingo-city-transit-hub .ct-card-actions .ct-button { font-size: 11px; } #ichingo-city-transit-hub .ct-map-layout { grid-template-columns: 1fr; } #ichingo-city-transit-hub #ct-map-surface { height: 300px; } #ichingo-city-transit-hub .ct-place-list { max-height: 275px; } #ichingo-city-transit-hub .ct-panel-card, #ichingo-city-transit-hub .ct-route-body { padding: 19px; } #ichingo-city-transit-hub .ct-route summary { gap: 10px; padding: 16px; } #ichingo-city-transit-hub .ct-dialog-content { padding: 20px; } #ichingo-city-transit-hub .ct-dialog-image { height: 200px; } #ichingo-city-transit-hub .ct-dialog-content h2 { font-size: 22px; } #ichingo-city-transit-hub .ct-taxi-display strong { font-size: 25px; } } @media(prefers-reduced-motion:reduce) { #ichingo-city-transit-hub * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }