/* ============================================================================
BenTen Residences — Location, Access by bus, Access by taxi
Hand-written, NOT generated. This is the one stylesheet in the project that
Tailwind does not build: the location pages carry a few components (a Google
map with a photo marker, a bus route strip, a taxi diagram) that are more
legible as real CSS than as a wall of arbitrary-value utilities.
Load it AFTER site.tw.css so these rules win where they overlap:
Two rules keep it from drifting away from the rest of the site:
1. The tokens below mirror @theme in tailwind.input.css. When a colour
changes there, change it here. Nothing in this file invents a new
neutral — only --transport and --sight are new, and only because the map
needs two categories the brand palette has no opinion about.
2. No nav, no footer, no brand mark. Those come from partials/nav-links.html
and partials/footer-visit.html like every other page. The version of this
file that shipped with the design carried its own .site-header and
.site-footer; they were dropped, because hand-kept copies of the nav are
exactly what those partials exist to prevent.
Everything is scoped under .loc-page, set on the page wrapper div, so the
base element rules cannot reach into the shared footer partial.
============================================================================ */
.loc-page {
/* ---- neutrals: same values as @theme in tailwind.input.css ---- */
--paper: #faf8f4; /* --color-paper page background */
--paper-2: #f2eee7; /* --color-paper-2 alternate section ground */
--card: #fffdf8; /* --color-paper-3 raised cards, map panels */
--ink: #1f1c18; /* --color-ink headings, dark panels */
--ink-2: #221e19; /* --color-ink-2 driver card, deep fills */
--body: #3f3a33; /* --color-body body copy */
--muted: #877e6f; /* --color-muted captions, secondary text */
--line: #e7e1d6; /* --color-hairline rules and borders */
/* --muted is the site's caption colour and sits at about 3.6:1 on paper —
fine at the sizes the brand uses it, short of AA for anything smaller.
Small print in this file uses --label instead, which clears 4.5:1. */
--label: #6f685f;
/* ---- accents ---- */
--warm: #b06a3e; /* --color-brass accents, step numerals */
--warm-2: #c57e4f; /* --color-sand-lit hover */
/* ---- map categories ----
Not brand colours. The map has to separate "how you get here" from "what
you came to see" at a glance, and brass alone cannot do that. Both are
used as fills behind white strokes, never as text. */
--transport: #446b76;
--sight: #93643e;
--shadow: 0 18px 50px rgba(44, 35, 26, .08);
color: var(--ink);
}
/* Tailwind's preflight already handles box-sizing, link colour and form font
inheritance, so none of that is repeated here. */
.loc-page h1,
.loc-page h2 {
font-family: var(--font-display, "Lora", Georgia, serif);
font-weight: 400;
letter-spacing: -.025em;
}
.loc-page h1 { font-size: clamp(46px, 7vw, 86px); line-height: .98; margin: 0 0 22px; }
/* The hero heading is shared with every other page's hero, so it keeps the
site's own type rather than this page's larger, lighter display size:
Lora 500 at 32/46/56px, matching Stays. These selectors outrank the Tailwind
utilities on the element, which is why the utilities alone were not enough. */
.loc-page [data-hero-section] h1 {
font-weight: 500;
font-size: 32px;
line-height: 1.08;
letter-spacing: -.014em;
margin: 0;
}
@media (min-width: 768px) { .loc-page [data-hero-section] h1 { font-size: 46px; } }
@media (min-width: 1024px) { .loc-page [data-hero-section] h1 { font-size: 56px; } }
.loc-page h2 { font-size: clamp(34px, 4.6vw, 58px); line-height: 1.04; margin: 0; }
.loc-page h3 { font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.loc-page p { margin: 0 0 14px; }
/* The Japanese address on the driver card and the stop names in the route
strip have to match the Noto Serif JP used everywhere else. The design this
file came from had no JP face at all and fell back to whatever the OS had. */
.loc-page :lang(ja),
.loc-page .jp {
font-family: var(--font-jp, "Noto Serif JP", serif);
}
.kicker,
.eyebrow {
margin: 0 0 12px;
color: var(--label);
text-transform: uppercase;
letter-spacing: .16em;
font-size: 11px;
font-weight: 700;
}
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 84px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: 0; }
.lede { max-width: 760px; font-size: 20px; color: var(--body); }
/* ── Hero ──
Padding-top clears the fixed nav, which overlays rather than displaces. */
.hero { padding-top: 110px; }
.hero__grid { display: grid; grid-template-columns: 1fr 330px; gap: 72px; align-items: end; }
.hero__links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.hero__links a,
.text-link { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.quick-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 22px;
padding: 24px;
box-shadow: var(--shadow);
}
.quick-card__address { font-family: var(--font-display, "Lora", Georgia, serif); font-size: 21px; line-height: 1.4; }
.quick-card__jp { font-size: 13px; color: var(--muted); }
.section-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 60px;
align-items: end;
margin-bottom: 34px;
}
.section-heading__note { color: var(--muted); margin: 0; }
/* ── The neighbourhood map ──
The map itself is drawn by the Google Maps JS API. Until a key and a Map ID
are configured the .fallback-map below stands in, so the page never shows an
empty grey box — see the note at the foot of this file. */
.map-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
.map-legend {
border: 1px solid var(--line);
background: var(--paper-2);
border-radius: 24px;
padding: 18px;
align-self: start;
}
.legend-chip {
border: 1px solid var(--line);
background: transparent;
border-radius: 999px;
padding: 8px 10px;
margin: 0 5px 8px 0;
cursor: pointer;
}
.legend-chip.is-active { background: var(--ink-2); color: var(--card); border-color: var(--ink-2); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }
.legend-dot--all { background: linear-gradient(90deg, var(--transport) 0 50%, var(--sight) 50% 100%); }
.legend-dot--transport { background: var(--transport); }
.legend-dot--sight { background: var(--sight); }
.map-legend__list { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.legend-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 11px 0; }
.legend-row small { display: block; color: var(--label); margin-top: 2px; }
.home-marker-mini {
width: 27px; height: 27px; border-radius: 7px;
display: grid; place-items: center;
background: linear-gradient(135deg, #5f4936, var(--warm-2));
color: var(--card); font-weight: 700;
}
.map-frame { min-width: 0; }
.google-map {
height: 600px;
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
background: #e8ece6;
box-shadow: var(--shadow);
}
.map-actions { display: flex; justify-content: flex-end; padding-top: 12px; }
.button {
display: inline-flex; align-items: center; justify-content: center;
border: 0; text-decoration: none; cursor: pointer;
padding: 12px 16px; border-radius: 999px;
}
.button--secondary { border: 1px solid #4d443b; background: transparent; }
/* Drawn, not fetched: a schematic stand-in shown when the Maps key is absent
or the script fails to load. Deliberately crude — it reads as a diagram, not
as a map that failed. */
.fallback-map { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e7ece5; }
.fallback-map::before {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(rgba(255, 255, 255, .46) 1px, transparent 1px) 0 0 / 52px 52px,
linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px) 0 0 / 52px 52px;
}
.fallback-map__river { position: absolute; left: 82%; top: -10%; width: 68px; height: 120%; background: #cbdde3; transform: rotate(2deg); }
.fallback-map__road { position: absolute; background: #d2d4ce; border-radius: 18px; }
.fallback-map__road--v { left: 56%; top: -5%; width: 34px; height: 110%; }
.fallback-map__road--h { left: -5%; top: 57%; width: 110%; height: 28px; }
.fallback-pin { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(0, 0, 0, .2); }
.fallback-pin--transport { background: var(--transport); }
.fallback-pin--sight { background: var(--sight); }
.fallback-pin--home { width: 32px; height: 32px; border-radius: 8px; background: #74583e; color: #fff; display: grid; place-items: center; font-weight: 700; }
.fallback-map__label { position: absolute; background: #fff; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line); font-size: 12px; }
.fallback-map__caption { position: absolute; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .9); padding: 7px 9px; border-radius: 8px; font-size: 12px; color: var(--label); }
/* ── Walking times ──
Seven landmarks, seven columns. The times here must stay in step with the
landmark list on location.html and the JSON-LD at the foot of that page. */
.walk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 18px; }
.walk-grid article { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.walk-grid span { display: block; color: var(--warm); font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
.walk-grid strong { font-size: 14px; }
/* ── The bus route, as a strip ──
Five steps separated by four arrows: Kyoto Station → bay → the 206 → the
stop → the walk. Replaces the photo sequence the old access-bus page used. */
.route-strip {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
gap: 10px;
align-items: stretch;
}
.route-step {
min-width: 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: 22px;
padding: 18px;
position: relative;
}
.route-step__number { position: absolute; right: 14px; top: 14px; color: var(--label); font-size: 11px; letter-spacing: .12em; }
.route-step__icon {
width: 48px; height: 48px; border-radius: 50%;
display: grid; place-items: center;
background: #eee5d8; color: #4c4035; font-weight: 700;
margin-bottom: 36px;
}
.route-step p { font-size: 14px; color: var(--body); }
.route-arrow { display: grid; place-items: center; color: #9a8b7a; font-size: 25px; }
.bus-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.info-panel { border: 1px solid var(--line); border-radius: 22px; padding: 22px; background: var(--card); }
.info-panel--soft { background: #ede5d9; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 7px 0; border-bottom: 1px solid rgba(116, 99, 80, .12); }
.plain-list li:last-child { border-bottom: 0; }
/* ── Taxi ──
Two cards, because there are two outcomes: the driver takes the lane to the
door, or sets you down at the Shimogawara-dori / Ishibe-koji junction and
you walk the last stretch. */
.section--taxi { background: var(--paper-2); }
.taxi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.taxi-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 25px; }
.taxi-card--featured { background: #fffaf1; }
.taxi-card__tag { display: inline-block; margin-bottom: 34px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--label); }
.distance-callout { margin-top: 26px; display: flex; align-items: baseline; gap: 12px; }
.distance-callout strong { font-family: var(--font-display, "Lora", Georgia, serif); font-size: 38px; font-weight: 400; }
.distance-callout span { color: var(--muted); }
/* The card a guest holds up to the driver. Japanese first and large; the
English underneath is for the guest, not for the driver. */
.driver-card {
display: flex; justify-content: space-between; align-items: center; gap: 20px;
margin-top: 18px;
background: var(--ink-2); color: var(--paper);
border-radius: 24px; padding: 24px;
}
.driver-card .eyebrow { color: rgba(250, 248, 244, .62); }
.driver-card p { margin-bottom: 6px; }
.driver-card__jp { font-size: 20px; }
.driver-card .button--secondary { color: var(--paper); border-color: rgba(250, 248, 244, .5); }
/* The arrival diagrams are ~880 units wide. Scaled to fit a 390px phone that
puts the labels at about 5px, so below the breakpoint the diagram keeps a
floor width and scrolls sideways inside its own box instead. The page body
must never scroll horizontally; this container may. */
.diagram-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.diagram-scroll svg { display: block; width: 100%; height: auto; }
@media (max-width: 680px) {
.diagram-scroll svg { min-width: 660px; }
}
/* Opt-out for a diagram drawn compact enough to fit a phone outright (the bay
D2 plan, 440 units wide). It keeps its native size instead of stretching to
the panel, or the labels balloon on a desktop. */
.diagram-scroll--fit svg { min-width: 0; max-width: 440px; margin-inline: auto; }
/* The Higashiyama-Yasui walking plan is drawn with phone-size type, so it
fits a phone outright with no sideways scroll, and is capped on desktop
so the labels do not balloon. */
.diagram-scroll--walkfit svg { min-width: 0; max-width: 720px; margin-inline: auto; }
/* The Kyoto Station overview carries too much label text to shrink to a phone
at its 960-unit width, so below the breakpoint the column redraw takes over
and nothing scrolls sideways. Only ever one of the two is in the flow. */
.diagram-scroll .bus-map-phone { display: none; }
@media (max-width: 680px) {
.diagram-scroll .bus-map-wide { display: none; }
.diagram-scroll .bus-map-phone { display: block; min-width: 0; max-width: 360px; margin-inline: auto; }
}
/* Diagram beside the written directions, so neither is the only copy: the
drawing carries the shape of the walk, the list carries the words. */
.taxi-map-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.taxi-diagram {
position: relative; height: 360px; margin-top: 18px; overflow: hidden;
background: var(--paper); border: 1px solid var(--line); border-radius: 24px;
}
.taxi-diagram__road { position: absolute; background: #d2d0c9; color: var(--label); font-size: 12px; }
.taxi-diagram__road span { position: absolute; white-space: nowrap; background: var(--paper); padding: 3px 6px; border-radius: 6px; }
.taxi-diagram__road--main { left: 34%; top: -5%; width: 42px; height: 110%; }
.taxi-diagram__road--main span { left: 50%; top: 18px; transform: translateX(-50%) rotate(90deg); transform-origin: center; }
.taxi-diagram__road--lane { left: 34%; top: 58%; width: 55%; height: 20px; }
.taxi-diagram__road--lane span { left: 30%; top: 26px; }
.taxi-diagram__junction {
position: absolute; left: 34%; top: 58%; transform: translate(-50%, -50%);
background: var(--transport); color: #fff; padding: 8px 10px; border-radius: 999px; font-size: 12px;
}
.taxi-diagram__walk {
position: absolute; left: 49%; top: 49%;
border-top: 2px dashed #8e7c67; width: 23%; padding-top: 8px;
text-align: center; color: var(--label); font-size: 13px;
}
.taxi-diagram__house { position: absolute; background: #4a392c; color: #fff; border-radius: 8px; padding: 12px 14px; font-size: 13px; }
/* East sits nearer the junction than West: the Shimogawara-dori / Ishibe-koji
corner is the closer of the two corners to BenTen East. Keep it that way —
the whole point of the diagram is which door the 60m walk ends at. */
.taxi-diagram__house--east { left: 72%; top: 45%; }
.taxi-diagram__house--west { left: 74%; top: 70%; }
.fine-print { margin-top: 12px; font-size: 12px; color: var(--label); }
.station-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.station-grid article { border-top: 1px solid #857a6d; padding-top: 14px; }
.station-grid strong,
.station-grid span,
.station-grid em { display: block; }
.station-grid span { color: var(--label); font-size: 13px; margin-top: 4px; }
.station-grid em { font-style: normal; margin-top: 12px; font-size: 13px; }
/* ── Map markers ──
Built as DOM nodes and handed to AdvancedMarkerElement, so they are styled
here rather than in the map script. The house is a cropped thumbnail of the
dusk facade; everything else is a plain dot, because a map of photographs
reads as clutter. */
.benten-photo-marker {
width: 50px; height: 50px; border-radius: 12px; overflow: hidden;
border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
background: #6c523c; position: relative;
}
.benten-photo-marker img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benten-photo-marker span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; }
.simple-map-marker {
width: 16px; height: 16px; border-radius: 50%; border: 3px solid #fff;
box-shadow: 0 3px 9px rgba(0, 0, 0, .24);
}
.simple-map-marker[data-kind="transport"] { background: var(--transport); }
.simple-map-marker[data-kind="sight"] { background: var(--sight); }
.map-label {
font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px;
padding: 5px 7px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
@media (max-width: 1000px) {
.hero__grid,
.section-heading,
.map-layout { grid-template-columns: 1fr; }
.section-heading { gap: 18px; }
.route-strip { grid-template-columns: 1fr 1fr; }
.route-arrow { display: none; }
.taxi-map-grid { grid-template-columns: 1fr; gap: 26px; }
.walk-grid { grid-template-columns: repeat(4, 1fr); }
.station-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
.container { width: min(100% - 26px, 1180px); }
.section { padding: 62px 0; }
.hero { padding-top: 76px; }
.hero__grid { gap: 30px; }
.lede { font-size: 17px; }
.google-map { height: 500px; }
.walk-grid { grid-template-columns: 1fr 1fr; }
.route-strip,
.bus-detail-grid,
.taxi-grid,
.station-grid { grid-template-columns: 1fr; }
.driver-card { align-items: flex-start; flex-direction: column; }
.taxi-diagram { height: 300px; }
.taxi-diagram__walk { left: 45%; width: 28%; }
.taxi-diagram__house--east { left: 72%; top: 43%; }
.taxi-diagram__house--west { left: 72%; top: 70%; }
}
/* The source design set scroll-behavior:smooth on unconditionally. The
rest of the site guards it with motion-reduce:scroll-auto, so this does the
same, and stills the hero animations the shared stylesheet would otherwise
keep running on this page. */
@media (prefers-reduced-motion: reduce) {
.loc-page *,
.loc-page *::before,
.loc-page *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ----------------------------------------------------------------------------
STILL TO CONFIGURE — the Google map
.google-map renders empty until a Maps JavaScript API key and a Map ID are
set on the map section, the same contract local-map.js already uses:
data-maps-key key from the Google Cloud console, restricted to
benten-residences.com and the Vercel preview domain
data-map-id a Map ID; AdvancedMarkerElement will not run without one
A Map ID also means the `styles` array is ignored and Google applies
cloud-based styling instead, so the palette in map-style.json has to be
pasted into the Cloud console map style once by hand.
Billing must be enabled on the project. Until it is, keep .fallback-map in
the markup — it is what the page shows when the script never loads.
---------------------------------------------------------------------------- */