/* Site-specific styling for 理容室・床屋Tokyo Barber VASH 中野店. Built on top of tokens.css + base.css. Reinterprets the barbershop taxonomy's vintage-Americana / muted-taupe character (formality 3, warmth 3, geometry 1) for a Japanese-language single-page site. */ /* ---------- Motion-reduction guard ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Language toggle (ja/en) ---------- Every translatable string is duplicated in the markup as a pair of [data-lang="ja"]/[data-lang="en"] wrapper spans; only the one matching is shown. Applied only to freshly-added wrappers (never to existing structural elements that carry their own display value), so `revert` always resolves to the safe UA default (inline) instead of clobbering a class-driven flex/grid layout. */ [data-lang] { display: none; } html[data-active-lang="ja"] [data-lang="ja"] { display: revert; } html[data-active-lang="en"] [data-lang="en"] { display: revert; } .lang-toggle { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); color: #f4efe9; padding: 0.3rem 0.65rem; border-radius: var(--radius); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .lang-toggle:hover, .lang-toggle:focus-visible { background: rgba(252, 249, 245, 0.12); border-color: var(--color-accent); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--color-accent-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .brand { display: flex; flex-direction: column; line-height: 1.25; text-decoration: none; color: #f4efe9; } .brand-jp { font-family: var(--font-ui); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--color-accent); } .brand-en { font-family: var(--font-display); font-size: 1.05rem; } .site-header .nav-links a { font-family: var(--font-ui); font-size: 0.92rem; text-decoration: none; color: #e9e4dc; position: relative; padding-block: 0.25rem; transition: color var(--dur-fast) var(--ease); } .site-header .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--color-accent); transition: right var(--dur-mid) var(--ease); } .site-header .nav-links a:hover, .site-header .nav-links a:focus-visible { color: #fff; } .site-header .nav-links a:hover::after, .site-header .nav-links a:focus-visible::after { right: 0; } .site-header .nav-links a.btn { color: var(--color-accent-2); } .site-header .nav-links a.btn::after { display: none; } .nav-toggle { background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: #f4efe9; font-size: 1.1rem; padding: 0.35rem 0.6rem; } @media (max-width: 768px) { .site-header .nav-links.open { background: var(--color-accent-2); padding: var(--space-2) var(--space-3) var(--space-3); position: absolute; left: 0; right: 0; top: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } } /* ---------- Buttons ---------- */ .btn { font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); box-shadow: var(--shadow); } .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #8a7563; } .btn--ghost { background: transparent; color: var(--color-bg); border: 1px solid rgba(252, 249, 245, 0.6); } .btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(252, 249, 245, 0.12); } .btn--dark { background: var(--color-accent-2); color: #f4efe9; } .btn--dark:hover, .btn--dark:focus-visible { background: #34343b; } /* ---------- Reveal-on-scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding-block: var(--space-5); } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity var(--dur-slow) ease-in-out; } .hero-slide.is-active { opacity: 1; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 34, 39, 0.55) 0%, rgba(34, 34, 39, 0.72) 100%); } .hero-content { position: relative; color: #fcf9f5; max-width: 640px; } .badge { display: inline-block; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.28em; color: var(--color-bg); border: 1px solid rgba(252, 249, 245, 0.55); padding: 0.35rem 0.8rem; margin-bottom: var(--space-2); } .hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, var(--font-size-h1)); } .hero-sub { font-size: 1.05rem; color: #e9e4dc; max-width: 34em; } .hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); } .hero-dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(252, 249, 245, 0.4); border: none; cursor: pointer; padding: 0; transition: background var(--dur-fast) var(--ease); } .hero-dot.is-active { background: #fcf9f5; } /* ---------- Section framing ---------- */ .eyebrow { font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.24em; color: var(--color-muted); text-transform: uppercase; margin-bottom: 0.5rem; } .section-head { max-width: 640px; margin-bottom: var(--space-4); } .section-alt { background: var(--color-surface); } /* ---------- About / intro ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; } .about-copy p { max-width: 46em; } .locale-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.06em; border: var(--border); padding: 0.5rem 0.9rem; color: var(--color-muted); margin-top: var(--space-2); } @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } } /* ---------- Services / menu ---------- */ .service-card { transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .service-card .num { font-family: var(--font-display); color: var(--color-accent); font-size: 0.85rem; letter-spacing: 0.1em; } .service-note { margin-top: var(--space-3); font-size: 0.92rem; color: var(--color-muted); } /* ---------- Appointment / access split ---------- */ .appt { background: var(--color-accent-2); color: #f4efe9; } .appt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; border: 1px solid rgba(255, 255, 255, 0.08); } .appt-photo { background-size: cover; background-position: center; min-height: 420px; } .appt-info { padding: var(--space-4); display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); } .appt-info h2 { color: #fff; } .appt-info .eyebrow { color: var(--color-accent); } .appt-list { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: 0.6rem; font-size: 0.95rem; } .appt-list li { padding-left: 1.4rem; position: relative; color: #d8d2c8; } .appt-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 1px; background: var(--color-accent); } @media (max-width: 900px) { .appt-grid { grid-template-columns: 1fr; } .appt-photo { min-height: 260px; } } /* ---------- Appointment form ---------- */ .appt-form { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); } .appt-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } .appt-form .field { display: flex; flex-direction: column; gap: 0.35rem; } .appt-form label { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.05em; color: #d8d2c8; } .appt-form input, .appt-form select { font: inherit; font-family: var(--font-ui); font-size: 0.95rem; padding: 0.6rem 0.7rem; background: rgba(252, 249, 245, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius); color: #fcf9f5; } .appt-form input::placeholder { color: #8f8a80; } .appt-form input:focus-visible, .appt-form select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } .appt-form select option { color: var(--color-ink); } .appt-form button.btn { align-self: flex-start; margin-top: 0.25rem; } .form-success { display: none; margin-top: var(--space-2); padding: 0.75rem 1rem; background: rgba(158, 138, 120, 0.16); border: 1px solid var(--color-accent); color: #fcf9f5; font-size: 0.92rem; } .form-success.is-visible { display: block; } @media (max-width: 640px) { .appt-form .form-row { grid-template-columns: 1fr; } } /* ---------- Philosophy banner ---------- */ .banner { position: relative; background-size: cover; background-position: center; padding-block: var(--space-5); color: #fff; } .banner::before { content: ""; position: absolute; inset: 0; background: rgba(34, 34, 39, 0.62); } .banner .container { position: relative; text-align: center; } .banner p.statement { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 2rem); max-width: 20em; margin-inline: auto; line-height: 1.6; } /* Manual break keeps the JA statement from leaving a single orphaned character on its own line at desktop widths; on mobile the shorter line length already wraps cleanly, so the break is disabled there. */ .banner-break { display: block; } @media (max-width: 640px) { .banner-break { display: none; } } /* ---------- Team ---------- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: var(--space-3); } .team-card { text-align: center; } .team-photo { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border: var(--border); filter: grayscale(15%); transition: filter var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease); } .team-card:hover .team-photo { filter: grayscale(0%); transform: scale(1.02); } .team-role { font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-muted); margin-top: var(--space-1); letter-spacing: 0.06em; } /* ---------- Gallery ---------- */ .gallery-grid img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease); } .gallery-grid a.lightbox { display: block; overflow: hidden; border: var(--border); } .gallery-grid a.lightbox:hover img { transform: scale(1.06); } /* ---------- Column / blog ---------- */ .post-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: var(--space-2); } .post-card h3 { font-size: 1.15rem; } .post-card p { font-size: 0.92rem; color: var(--color-muted); } /* ---------- Access / contact ---------- */ .access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .access-info dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.2rem; margin: var(--space-2) 0 var(--space-3); } .access-info dt { font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.08em; padding-top: 0.2rem; } .access-info dd { margin: 0; font-size: 1rem; } .access-info dd a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .access-grid { grid-template-columns: 1fr; } } /* ---------- Footer ---------- */ .site-footer { background: var(--color-accent-2); color: #d8d2c8; } .site-footer a { color: #f4efe9; text-decoration: none; } .site-footer .foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); } .site-footer .foot-brand { font-family: var(--font-display); color: #fff; font-size: 1.1rem; } .site-footer small { color: #8f8a80; }