/* ============================================================ SARA HOLDINGS — shared foundation Master brand: ink / paper / vermilion / soft gold ============================================================ */ :root { --ink: #141414; --paper: #FAF7F2; --vermilion: #E63620; --gold: #C9A227; /* Per-page theme hooks (overridden on each page) */ --page-bg: var(--paper); --page-fg: var(--ink); --accent: var(--vermilion); --veil: var(--ink); --chrome-fg: var(--paper); --font-display: "Space Grotesk", "Noto Sans JP", sans-serif; --font-body: "Inter", "Noto Sans JP", sans-serif; --font-jp: "Noto Sans JP", sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-luxe: cubic-bezier(0.65, 0, 0.35, 1); --ease-snap: cubic-bezier(0.83, 0, 0.17, 1); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--page-bg); color: var(--page-fg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } ::selection { background: var(--accent); color: #fff; } /* ---------- Bilingual switching ---------- Both languages live in the markup. The attribute (set pre-paint from localStorage) decides which one renders. */ html[data-lang="en"] [data-ja] { display: none !important; } html[data-lang="ja"] [data-en] { display: none !important; } html[data-lang="ja"] body { font-family: var(--font-jp); } /* ---------- Persistent chrome (logo / lang / contact) ---------- */ .chrome { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem); color: var(--chrome-fg); pointer-events: none; } .chrome > * { pointer-events: auto; } .chrome::before { content: ""; position: absolute; inset: 0 0 -28px 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--page-bg) 82%, transparent) 30%, transparent); pointer-events: none; z-index: -1; } .brand { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: 0.02em; transition: opacity 0.3s var(--ease-out); } .brand:hover { opacity: 0.75; } /* Brushstroke "S" mark beside the wordmark (replaces the old dot) */ .brand-mark { height: 1.7em; width: auto; flex: none; } /* Japanese legal suffix (合同会社) — kept smaller and muted so the English wordmark stays dominant and the lockup doesn't read as heavy. */ .brand-suffix { font-family: var(--font-jp); font-weight: 500; font-size: 0.7em; letter-spacing: 0; opacity: 0.6; } .chrome-right { display: flex; align-items: center; gap: clamp(0.8rem, 2.5vw, 1.6rem); } .lang-toggle { display: inline-flex; border: 1px solid currentColor; border-radius: 999px; overflow: hidden; font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.92; } .lang-toggle button { padding: 0.34em 0.85em; opacity: 0.55; transition: opacity 0.25s, background 0.25s, color 0.25s; } .lang-toggle button.active { opacity: 1; background: var(--chrome-fg); color: var(--page-bg); } .contact-link { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; position: relative; padding-bottom: 2px; } .contact-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease-out); } .contact-link:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- Shared slim footer ---------- */ .site-footer { background: var(--ink); color: var(--paper); padding: 2.6rem clamp(1.25rem, 4vw, 2.5rem) 2rem; position: relative; z-index: 2; } .site-footer .footer-grid { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: flex-start; justify-content: space-between; } .site-footer .brand { font-size: 0.95rem; } .footer-services { display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; } .footer-services a { font-size: 0.85rem; opacity: 0.75; transition: opacity 0.3s, color 0.3s; } .footer-services a:hover { opacity: 1; color: var(--gold); } .footer-services .dot { color: var(--vermilion); margin-right: 0.5em; } .footer-tag { width: 100%; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(250, 247, 242, 0.14); /* Three zones: tagline · centered copyright · credit. Equal 1fr side tracks keep the copyright pinned to the true horizontal centre. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem 1.5rem; font-size: 0.74rem; opacity: 0.55; letter-spacing: 0.04em; } .footer-tag .ft-tagline { justify-self: start; } .footer-tag .ft-copy { justify-self: center; text-align: center; white-space: nowrap; } .footer-tag .footer-credit { justify-self: end; } /* Below the comfortable 3-zone width, stack them all centred rather than let the tagline wrap awkwardly beside a single-line copyright. */ @media (max-width: 1024px) { .footer-tag { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.6rem; } .footer-tag .ft-tagline, .footer-tag .ft-copy, .footer-tag .footer-credit { justify-self: center; } } .footer-credit { display: inline-flex; align-items: baseline; gap: 0.45em; } .footer-credit a { position: relative; color: var(--paper); white-space: nowrap; transition: color 0.3s; } .footer-credit a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease-out); } .footer-credit a:hover { color: var(--gold); } .footer-credit a:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- Page veil (enter / exit transitions) ---------- */ .page-veil { position: fixed; inset: 0; z-index: 200; background: var(--veil); pointer-events: none; opacity: 0; transition: opacity 0.55s var(--ease-luxe); } body.is-entering .page-veil { opacity: 1; transition: none; } body.is-leaving .page-veil { opacity: 1; pointer-events: all; } /* ---------- Scroll reveals ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } .reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); } .reveal-scale.in { opacity: 1; transform: none; } /* ---------- Shared form ---------- */ .inquiry-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; min-width: 0; } /* min-width:0 lets fields/controls shrink on narrow screens instead of their content (e.g. a long