/* FOUC prevention — pairs with the inline script in above. See
_shared.css for the same rule + full comment block (sub-pages share it). */
html.i18n-loading body { visibility: hidden; }
:root {
/* REVERTED to the original paper/sumi/hinomaru-red on 2026-06-21
(Concept 02 rolled back; only the new logo kept). Mirrors _shared.css. */
--bg: #FAFAF7;
--surface: #FFFFFF;
--surface-2: #F2F0EA;
--gold: #C9302C;
--gold-2: #A62521;
--red: #1A1A1A;
--text: #1A1A1A;
--muted: #6B6B6B;
--line: #E5E1D6;
--sage: #7A8B6E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.i18n-loading body { visibility: hidden; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', system-ui, sans-serif;
font-weight: 300;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, .eyebrow, .btn {
font-family: 'Oswald', sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.95; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1; margin-bottom: 1rem; }
h3 { font-size: 1.5rem; letter-spacing: 0.03em; }
h4 { font-size: 1.1rem; letter-spacing: 0.08em; }
p { color: #1A1A1A; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.eyebrow { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.3em; font-weight: 500; margin-bottom: 1rem; }
/* NAV */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(255,255,255, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
transition: all 0.3s;
}
.nav-inner {
max-width: 1280px; margin: 0 auto; padding: 18px 32px;
display: flex; align-items: center; justify-content: space-between;
}
.logo {
font-family: 'Oswald', sans-serif; font-weight: 700;
font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase;
display: flex; align-items: center; gap: 12px;
}
.logo-mark {
width: 36px; height: 36px; border: 2px solid var(--gold);
display: flex; align-items: center; justify-content: center;
color: var(--gold); font-weight: 700; font-size: 1.1rem;
transform: rotate(45deg);
}
.logo-mark span { transform: rotate(-45deg); }
.logo small { display: block; font-size: 0.65rem; color: var(--muted); letter-spacing: 0.25em; margin-top: 2px; font-weight: 400; }
/* SVG emblem-only mark (Brand Alignment 2026-06-21) — wordmark dropped (illegible
at nav size). Explicit height+width (0.866 ratio). CRITICAL: max-width:none +
flex:none — the global `img { max-width:100% }` rule (above) collapses this SVG
![]()
to 0 width inside the shrink-to-fit flex `.logo` container (circular
intrinsic-size dependency). That zero-width collapse is what made the logo
vanish/look tiny in every prior attempt. */
/* translateX (not margin) nudges ONLY the logo left — margin would reflow the bar. */
.logo-svg { height: 46px; width: 40px; max-width: none; flex: 0 0 auto; display: block; transform: translateX(-10px); }
@media (max-width: 380px) { .logo-svg { height: 38px; width: 33px; } }
.nav-links { display: flex; gap: 32px; align-items: center; list-style: none; }
.nav-links li:has(.icon-btn) + li:has(.icon-btn) { margin-left: -24px; }
.nav-links a {
font-family: 'Oswald', sans-serif; font-size: 0.9rem;
letter-spacing: 0.18em; text-transform: uppercase;
font-weight: 500; color: #1A1A1A; transition: color 0.2s; position: relative;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a::after {
content: ''; position: absolute; bottom: -6px; left: 0; height: 2px; width: 0;
background: var(--gold); transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.lang { display: flex; gap: 8px; align-items: center; font-size: 0.75rem; color: var(--muted); }
.lang a {
font-size: 1.1rem; line-height: 1; filter: grayscale(0.5); opacity: 0.65;
transition: filter 0.2s, opacity 0.2s;
}
.lang a:hover { filter: grayscale(0); opacity: 1; }
.lang a.active { filter: grayscale(0); opacity: 1; }
.btn {
display: inline-block; padding: 14px 28px; font-size: 0.85rem;
letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
background: var(--gold); color: #ffffff;
border: 2px solid var(--gold); cursor: pointer; transition: all 0.25s;
font-family: 'Oswald', sans-serif;
}
.btn:hover { background: transparent; color: var(--gold); }
.btn.outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn.outline:hover { background: var(--gold); border-color: var(--gold); color: #ffffff; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
.btn.red:hover { background: transparent; color: var(--red); }
/* NAV "Free Trial" CTA — refined gold ghost pill with a pulsing dot and sliding arrow.
Reuses the chat FAB's pulse rhythm for a consistent motion language. */
.btn-trial-nav {
display: inline-flex; align-items: center; gap: 10px;
padding: 9px 18px 9px 16px;
font-family: 'Oswald', sans-serif; font-weight: 600;
font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); background: transparent;
border: 1.5px solid var(--gold);
text-decoration: none; cursor: pointer;
position: relative;
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.25s ease;
}
.btn-trial-nav::after {
content: '→'; font-size: 0.95rem; line-height: 1; margin-top: -1px;
transition: transform 0.25s ease;
}
/* Specificity bump: `.nav-links a:hover { color: var(--gold) }` (defined
above) outranks `.btn-trial-nav:hover` because the former adds an
element selector. Qualifying with `.nav-links` matches that
specificity AND wins on source order. Without this, hovered "FREE
TRIAL" text was red-on-red = invisible. */
.nav-links a.btn-trial-nav:hover {
background: var(--gold); color: #ffffff;
box-shadow: 0 8px 22px rgba(201,48,44, 0.22);
transform: translateY(-1px);
}
.nav-links a.btn-trial-nav:hover::after { transform: translateX(3px); }
.btn-trial-nav .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--gold); flex: 0 0 auto;
animation: btnTrialPulse 2.2s ease-in-out infinite;
}
.btn-trial-nav:hover .dot {
background: #ffffff;
animation: none;
}
@keyframes btnTrialPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201,48,44, 0.55); }
50% { box-shadow: 0 0 0 6px rgba(201,48,44, 0); }
}
.hamburger { display: none; background: none; border: none; color: var(--text); cursor: pointer; font-size: 1.5rem; }
/* Icon buttons (login, cart) */
.icon-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; color: #1A1A1A;
border: 1px solid var(--line); transition: all 0.2s;
}
.icon-btn:hover { color: var(--gold); border-color: var(--gold); background: rgba(201,48,44,0.08); }
.icon-btn svg { display: block; }
/* Sign In — labeled pill (secondary CTA, quieter than .btn-trial-nav). Also
defined in _shared.css for sub-pages; duplicated here because index.html
carries its own inline