/* docs/style.css - TasteSkill Dark Tech Aesthetic */ :root { --bg-base: #050505; /* Deep OLED black */ --bg-surface: #0a0a0a; --bg-surface-hover: rgba(255, 255, 255, 0.04); --border-color: rgba(255, 255, 255, 0.12); /* Increased for better structural contrast */ --text-primary: #ffffff; --text-secondary: #a1a1aa; /* Increased from #888 for WCAG AA+ readability */ --accent: #ffffff; --accent-hover: #e5e5e5; --spring-easing: cubic-bezier(0.32, 0.72, 0, 1); --spring-duration: 0.8s; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; } body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background-color: var(--bg-base); color: var(--text-primary); line-height: 1.5; overflow-x: hidden; } /* The header is sticky (72px tall + 1px border). Offset in-page anchor jumps so a section heading lands below it instead of behind it. scroll-margin-top on the targets is the robust, scroll-container-independent mechanism; scroll-padding-top on is kept as a fallback. */ html { scroll-padding-top: 88px; } section[id] { scroll-margin-top: 88px; } html[lang="ja"] body { font-family: 'Outfit', 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif; line-height: 1.8; word-break: auto-phrase; word-break: normal; overflow-wrap: break-word; font-size: 1rem; /* Match the EN base (16px) so JA/EN read at the same scale */ letter-spacing: 0.03em; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { border-bottom: 1px solid var(--border-color); background: var(--bg-base); position: sticky; top: 0; z-index: 50; } .header-container { display: flex; justify-content: space-between; align-items: center; height: 72px; } .logo { display: flex; align-items: center; gap: 12px; font-weight: 600; } .logo-mark { width: 16px; height: 16px; background: var(--accent); border-radius: 4px; } .nav-links { display: flex; gap: 24px; align-items: center; } .nav-links a:not(.btn) { color: var(--text-secondary); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; } .nav-links a:not(.btn):hover { color: var(--text-primary); } /* Mobile nav toggle (hamburger) — hidden on desktop, shown under 768px. */ .nav-toggle { display: none; position: relative; width: 40px; height: 40px; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 61; } .nav-toggle-bar { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--text-primary); border-radius: 2px; transition: transform 0.4s var(--spring-easing), opacity 0.25s ease; } .nav-toggle-bar:nth-child(1) { top: 15px; } .nav-toggle-bar:nth-child(2) { top: 23px; } body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(4px) rotate(45deg); } body.nav-open .nav-toggle-bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { .nav-toggle-bar, .nav-links, .nav-links > * { transition-duration: 0.001s; } } .lang-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--text-secondary); } .lang-toggle a { color: var(--text-secondary); text-decoration: none; } .active-lang { color: var(--text-primary); font-weight: 600; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; /* Increased hit area */ font-size: 1.05rem; /* Increased button text */ font-weight: 500; border-radius: 9999px; /* Pill */ text-decoration: none; transition: transform var(--spring-duration) var(--spring-easing), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; cursor: pointer; gap: 8px; /* CTA labels must never wrap mid-word (design-taste-frontend: CTA Button Wrap Ban). flex-shrink:0 keeps each pill at its intrinsic width instead of being squeezed by the hero text column; the group wraps to a second row if both don't fit. */ white-space: nowrap; flex-shrink: 0; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--text-primary); color: var(--bg-base); border: 1px solid transparent; } .btn-primary:hover { background: #e4e4e7; transform: translateY(-2px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--text-primary); } .btn-ghost:hover { background: var(--bg-surface); } /* Split-screen Hero */ .hero { display: grid; grid-template-columns: 1fr 1fr; /* Central breathing room between the text column and the visual. Scales with the viewport so the split never reads cramped (design-taste-frontend L210 asymmetric white-space / L612 clean margins). */ gap: clamp(48px, 5.5vw, 88px); align-items: center; padding-top: 96px; padding-bottom: 96px; } /* Grid items default to min-width:auto, which refuses to shrink below the hero image's intrinsic width and overflows narrow viewports (the image then drags the whole layout wider than the screen, so headline/subtext stop aligning). min-width:0 lets the 1fr tracks shrink; the image is capped to its frame. */ .hero-text, .hero-visual { min-width: 0; } .headline { font-size: 4.5rem; /* Increased */ line-height: 1.05; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 24px; } html[lang="ja"] .headline { /* JP hero headline. The single 文節 boundary is broken by a static in the markup (deterministic 2 lines in every browser). word-break:auto-phrase adds a native 文節-aware break on Chromium; line-break:strict enforces kinsoku so 。 never starts a line; overflow-wrap guards ultra-narrow widths. Sized smaller than the EN hero because CJK glyphs are denser — that, with the forced 文節 break, yields a clean 2 lines instead of an over-wrapped 3. No comma: the line break itself supplies the pause. See skill japanese-typography-qa. */ font-size: clamp(1.625rem, 1.1rem + 2vw, 2.375rem); /* 26 -> 38px */ line-height: 1.35; letter-spacing: 0.04em; word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; font-feature-settings: "palt" 1; text-wrap: wrap; /* not balance — balance splits JP mid-文節 (survey) */ } /* ── Japanese type scale ──────────────────────────────────────────────── One modular scale (1.2 minor third) anchored at the 38px hero; every JA heading steps DOWN from it so none can out-shout the hero (the earlier bug: a 52px section h2 above a 38px hero h1). Tiers: statement 32 / section 26 / card 22 / lead 18 / body-lg 17. JA headings break at 文節 (word-break: auto-phrase) with kinsoku (line-break:strict) and never use text-wrap:balance. See skill japanese-typography-qa. */ html[lang="ja"] .feature-intro p, html[lang="ja"] .usecases-header p, html[lang="ja"] .faq-header p, html[lang="ja"] .screens-header p { font-size: 1.125rem; /* lead — 18px */ line-height: 1.8; } html[lang="ja"] .cell-content h2, html[lang="ja"] .usecase-title, html[lang="ja"] .step-body h3, html[lang="ja"] .guide-card h3 { font-size: 1.375rem; /* card title — 22px */ line-height: 1.5; } html[lang="ja"] .workflow-header h2, html[lang="ja"] .guide-header h2 { font-size: 1.625rem; /* section header — 26px */ line-height: 1.4; } html[lang="ja"] .cell-content p, html[lang="ja"] .step-body p { font-size: 1.0625rem; /* dense body — 17px */ line-height: 1.8; } /* JA heading wrapping: 文節-aware, kinsoku on, balance off */ html[lang="ja"] .feature-intro h2, html[lang="ja"] .usecases-header h2, html[lang="ja"] .screens-header h2, html[lang="ja"] .workflow-header h2, html[lang="ja"] .guide-header h2, html[lang="ja"] .faq-header h2, html[lang="ja"] .cell-content h2, html[lang="ja"] .usecase-title, html[lang="ja"] .step-body h3, html[lang="ja"] .guide-card h3 { word-break: auto-phrase; line-break: strict; text-wrap: wrap; } .subtext { font-size: 1.25rem; color: var(--text-secondary); max-width: 500px; margin-bottom: 40px; line-height: 1.6; } html[lang="ja"] .subtext { font-size: 1.125rem; /* lead — 18px; supports the hero, doesn't compete */ line-height: 1.8; } .button-group { display: flex; gap: 16px; /* If both CTAs can't sit beside the hero text column, wrap the second pill to a new row instead of letting a label break mid-word (design-taste- frontend: CTA Button Wrap Ban). Pairs with .btn { white-space:nowrap }. */ flex-wrap: wrap; } .visual-frame { border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; background: var(--bg-surface); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); } .menu-bar-mock { height: 28px; background: #111111; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; padding: 0 16px; } .menu-bar-left { display: flex; gap: 6px; } .menu-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); } .menu-bar-right { display: flex; align-items: center; } .menu-bar-logo { width: 14px; height: 14px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; } .hero-image { width: 100%; height: auto; display: block; } .hero-note { margin-top: 24px; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.8; } .hero-note a { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.2); text-underline-offset: 4px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .hero-note a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* 本文（FAQ・規約）内のリンクはページのアクセント色（白）で統一する。ブラウザ既定の青紫リンクは使わない（design-taste-frontend: THE LILA RULE / COLOR CONSISTENCY LOCK）。読み手が拾えるよう下線はやや濃いめにする。 */ .faq-a a, .terms-item a { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.32); text-underline-offset: 3px; transition: color 0.2s ease, text-decoration-color 0.2s ease; } .faq-a a:hover, .terms-item a:hover { color: var(--accent); text-decoration-color: var(--accent); } /* 見出しの行バランス（手動の nowrap/wbr ハックの置き換え）。非対応ブラウザでは通常折り返しにフォールバックし、コピーは短く保つ。 */ @supports (text-wrap: balance) { .headline, .feature-intro h2, .screens-header h2, .usecases-header h2, .workflow-header h2, .guide-header h2, .faq-header h2, .guide-card h3, .step-body h3 { text-wrap: balance; } } code { background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; color: var(--text-primary); font-family: monospace; } .code-snippet { margin-top: 20px; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 12px 16px; overflow-x: auto; } .code-snippet code { background: transparent; border: none; padding: 0; font-size: 0.85rem; color: var(--accent); } /* Features Bento */ .features { padding-bottom: 96px; } .features-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; } .feature-intro { position: sticky; top: 120px; padding-top: 16px; } .feature-intro h2 { font-size: 3.5rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 24px; } html[lang="ja"] .feature-intro h2 { font-size: 2rem; /* section statement — 32px, one rung below the 38px hero */ line-height: 1.4; letter-spacing: -0.01em; } .feature-intro p { font-size: 1.35rem; /* Increased */ color: var(--text-secondary); line-height: 1.6; } .feature-cards-stack { display: flex; flex-direction: column; gap: 24px; } .feature-cell { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 2rem; padding: 0.5rem; box-shadow: inset 0 1px 1px rgba(255,255,255,0.03); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--spring-duration) var(--spring-easing), border-color 0.3s ease; } .feature-cell:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.2); } .cell-content { padding: 32px; } .cell-content h2 { font-size: 1.75rem; /* Increased */ margin-bottom: 12px; font-weight: 500; } .cell-content p { color: var(--text-secondary); font-size: 1.15rem; /* Increased */ line-height: 1.6; } .feature-img { width: calc(100% + 1rem); margin: auto -0.5rem -0.5rem -0.5rem; border-top: 1px solid var(--border-color); opacity: 0.8; } .feature-img-small { width: 100%; opacity: 0.8; } .dark-accent { background: var(--bg-base); border-color: var(--border-color); } /* Use Cases Bento */ .usecases { padding-bottom: 120px; } .usecases-header { margin-bottom: 48px; } .usecases-header h2 { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 16px; } html[lang="ja"] .usecases-header h2 { font-size: 1.625rem; /* section header — 26px */ line-height: 1.4; } .usecases-header p { font-size: 1.25rem; color: var(--text-secondary); max-width: 650px; line-height: 1.6; } .usecases-bento { display: grid; grid-template-columns: 6fr 4fr; gap: 24px; } .usecases-bento .bento-wide { grid-column: 1 / -1; } @media (max-width: 900px) { .usecases-bento { grid-template-columns: 1fr; } .usecases-bento .bento-wide { grid-column: 1 / -1; } } .usecase-num { font-family: monospace; font-size: 1.5rem; color: var(--accent); margin-bottom: 24px; display: block; font-weight: 600; } .usecase-title { font-size: 1.75rem; font-weight: 500; margin-bottom: 24px; line-height: 1.3; } .hero-labels { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; } .eyebrow { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); font-weight: 600; } .unofficial-badge { font-size: 0.75rem; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: var(--text-secondary); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .usecase-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); margin-bottom: 6px; font-weight: 600; } .usecase-text { font-size: 1.15rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; } .usecase-solution { font-size: 1.15rem; color: var(--text-primary); line-height: 1.6; } /* Workflow Stack */ .workflow { padding-bottom: 120px; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; } .workflow-header h2 { font-size: 2rem; margin-bottom: 16px; font-weight: 500; } .workflow-header p { color: var(--text-secondary); } .step-item { display: flex; gap: 32px; padding: 32px 0; } .border-top { border-top: 1px solid var(--border-color); } .step-num { font-family: monospace; color: var(--text-secondary); font-size: 1.5rem; /* Increased */ } .step-body h3 { font-size: 1.5rem; /* Increased */ margin-bottom: 8px; font-weight: 500; } .step-body p { color: var(--text-secondary); font-size: 1.125rem; /* Increased */ } /* User Guide */ .guide { padding-bottom: 120px; } .guide-header { margin-bottom: 48px; border-bottom: 1px solid var(--border-color); padding-bottom: 24px; } .guide-header h2 { font-size: 2rem; margin-bottom: 16px; font-weight: 500; } .guide-header p { color: var(--text-secondary); } .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .guide-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: 2rem; padding: 40px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.03); transition: transform var(--spring-duration) var(--spring-easing), border-color 0.3s ease; } .guide-card:hover { transform: translateY(-4px); border-color: var(--accent); } .guide-icon { font-family: monospace; font-size: 1.5rem; color: var(--accent); margin-bottom: 24px; font-weight: 600; } .guide-card h3 { font-size: 1.35rem; /* Increased */ font-weight: 500; margin-bottom: 12px; color: var(--text-primary); } .guide-card p { color: var(--text-secondary); line-height: 1.6; font-size: 1.125rem; /* Increased */ } /* FAQ */ .faq { padding-bottom: 120px; } .faq-header { margin-bottom: 48px; } .faq-header h2 { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 16px; } html[lang="ja"] .faq-header h2 { font-size: 1.625rem; /* section header — 26px */ line-height: 1.4; } .faq-header p { font-size: 1.25rem; color: var(--text-secondary); max-width: 680px; line-height: 1.6; } .faq-grid { /* Single column. A 2-column grid coupled row heights, so a short answer next to a long one left a big gap and the hairlines fell at different heights. One column makes each item's height depend only on its own content, so the separators are evenly spaced and the read order matches the DOM. Width is capped (left-aligned under the header, matching the engineering notes). */ max-width: 820px; } .faq-item { padding: 28px 0; border-top: 1px solid var(--border-color); } .faq-item:first-child { border-top: none; padding-top: 0; } .faq-q { font-size: 1.0625rem; font-weight: 600; margin-bottom: 10px; line-height: 1.45; color: var(--text-primary); } .faq-a { color: var(--text-secondary); line-height: 1.7; font-size: 1.0625rem; } html[lang="ja"] .faq-a { line-height: 1.8; /* JP body (japanese-typography-qa §3) */ overflow-wrap: anywhere; /* long URLs / paths never overflow */ } /* Engineering notes: a few hairline-separated columns near the foot of the page. Hairlines (not heavy cards) group the columns to match the FAQ list and the page structure (design-taste-frontend L214). Prose width is capped for readability (L167). */ .tech-note { padding-bottom: 120px; } .tech-note-cols { max-width: 820px; } .tech-note-col { padding: 48px 0; border-top: 1px solid var(--border-color); } .tech-note-col h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.4; margin-bottom: 24px; color: var(--text-primary); } .tech-note-col p { color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.9; margin-bottom: 22px; } .tech-note-col p:last-child { margin-bottom: 0; } html[lang="ja"] .tech-note-col p { line-height: 2; } /* Disclaimer & terms — secondary fine-print scale, same hairline language as the tech column */ .terms { padding-bottom: 120px; } .terms-list { max-width: 820px; } .terms-item { padding: 22px 0; border-top: 1px solid var(--border-color); } .terms-item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin-bottom: 8px; color: var(--text-primary); } .terms-item p { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.8; margin: 0; } html[lang="ja"] .terms-item p { line-height: 1.9; } /* Footer */ .site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 64px 24px 48px; display: flex; justify-content: space-between; align-items: flex-end; } .footer-left { display: flex; flex-direction: column; gap: 8px; } .copyright { font-size: 1rem; color: var(--text-primary); font-weight: 500; margin: 0; } .disclaimer { font-size: 0.8rem; color: var(--text-secondary); opacity: 0.7; margin: 0; } .author { font-size: 0.85rem; color: var(--text-secondary); margin: 0; } .author-link { color: var(--text-primary); text-decoration: none; font-weight: 600; transition: color 0.2s ease; } .author-link:hover { color: var(--accent); } .footer-link { font-size: 0.85rem; color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; } .footer-link:hover { color: var(--text-primary); } /* Animations */ .fade-in { opacity: 0; filter: blur(8px); transform: translateY(32px); transition: opacity var(--spring-duration) var(--spring-easing), transform var(--spring-duration) var(--spring-easing), filter var(--spring-duration) var(--spring-easing); } .fade-in.visible { opacity: 1; filter: blur(0px); transform: translateY(0); } .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } /* Responsive */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 64px; } .features-grid { grid-template-columns: 1fr; gap: 48px; } .feature-intro { position: relative; top: 0; padding-top: 0; } .workflow { grid-template-columns: 1fr; gap: 32px; } .guide-grid { grid-template-columns: 1fr; } .site-footer { flex-direction: column; align-items: flex-start; text-align: left; gap: 20px; } } /* --- Mobile (phones / small tablets) -------------------------------------- Layout-only overrides scoped to small screens. Desktop (>768px) rendering is intentionally left unchanged; these rules only fix overflow/oversized typography and the header/hero/button arrangement on narrow viewports. */ @media (max-width: 768px) { /* Horizontal-only: the `padding` shorthand here previously zeroed each section's vertical padding on mobile, collapsing the spacing between sections (e.g. the hero image and the heading below it). */ .container { padding-left: 20px; padding-right: 20px; } /* Header on mobile: collapse the nav into a hamburger-triggered glass panel so the in-page section links stay reachable (design-taste-frontend nav guidance / high-end-visual-design 5.A). */ .nav-toggle { display: block; } .nav-links { position: absolute; top: calc(100% + 10px); right: 16px; left: 16px; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px; background: rgba(10, 10, 10, 0.92); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--border-color); border-radius: 18px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.985); transform-origin: top right; pointer-events: none; transition: opacity 0.28s ease, transform 0.4s var(--spring-easing), visibility 0.28s; z-index: 60; } body.nav-open .nav-links { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .nav-links > * { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.4s var(--spring-easing), background-color 0.2s ease; } body.nav-open .nav-links > * { opacity: 1; transform: translateY(0); } body.nav-open .nav-links > :nth-child(1) { transition-delay: 0.04s; } body.nav-open .nav-links > :nth-child(2) { transition-delay: 0.08s; } body.nav-open .nav-links > :nth-child(3) { transition-delay: 0.12s; } body.nav-open .nav-links > :nth-child(4) { transition-delay: 0.16s; } body.nav-open .nav-links > :nth-child(5) { transition-delay: 0.20s; } body.nav-open .nav-links > :nth-child(6) { transition-delay: 0.24s; } body.nav-open .nav-links > :nth-child(7) { transition-delay: 0.28s; } .nav-links > a:not(.btn), .nav-links > .lang-toggle { padding: 12px 14px; border-radius: 11px; font-size: 1rem; } .nav-links a[href^="#"] { display: block; color: var(--text-primary); } .nav-links a:not(.btn):hover, .nav-links a:not(.btn):active { background: var(--bg-surface-hover); color: var(--text-primary); } .nav-links .lang-toggle { justify-content: flex-start; color: var(--text-secondary); } .nav-links .btn-ghost { width: 100%; justify-content: center; margin-top: 4px; } .logo-text { font-size: 0.95rem; } /* Hero typography scaled to phone widths */ .headline { font-size: 2.75rem; margin-bottom: 20px; } /* JA hero headline inherits the base clamp (lower band) at <=768; the still pins the 文節 break. No separate font-size needed here. */ .subtext { font-size: 1.1rem; margin-bottom: 32px; } html[lang="ja"] .subtext { font-size: 1.0625rem; /* lead — 17px */ } /* Hero call-to-action buttons stack full-width instead of overflowing */ .button-group { flex-direction: column; align-items: stretch; } .button-group .btn { width: 100%; } /* Section headings */ .feature-intro h2 { font-size: 2.25rem; } html[lang="ja"] .feature-intro h2 { font-size: 1.625rem; /* section statement — 26px */ } .feature-intro p { font-size: 1.15rem; } .usecases-header h2 { font-size: 2rem; } html[lang="ja"] .usecases-header h2 { font-size: 1.5rem; /* section header — 24px */ } .usecase-title { font-size: 1.4rem; } .workflow-header h2, .guide-header h2 { font-size: 1.6rem; } .cell-content { padding: 24px; } .guide-card { padding: 28px; } .step-item { gap: 20px; padding: 24px 0; } /* JA type scale at <=768 (steps down from the ~32px hero) */ html[lang="ja"] .workflow-header h2, html[lang="ja"] .guide-header h2, html[lang="ja"] .faq-header h2 { font-size: 1.5rem; /* section header — 24px */ } html[lang="ja"] .cell-content h2, html[lang="ja"] .usecase-title, html[lang="ja"] .step-body h3, html[lang="ja"] .guide-card h3 { font-size: 1.25rem; /* card title — 20px */ } html[lang="ja"] .feature-intro p, html[lang="ja"] .usecases-header p, html[lang="ja"] .faq-header p, html[lang="ja"] .screens-header p { font-size: 1.0625rem; /* lead — 17px */ } html[lang="ja"] .cell-content p, html[lang="ja"] .step-body p { font-size: 1rem; /* dense body — 16px */ } } @media (max-width: 480px) { .container { padding-left: 16px; padding-right: 16px; } .headline { font-size: 2.25rem; } html[lang="ja"] .headline { font-size: clamp(1.625rem, 5.2vw, 1.875rem); /* 26 -> 30px */ letter-spacing: 0.03em; } .feature-intro h2 { font-size: 1.9rem; } html[lang="ja"] .feature-intro h2 { font-size: 1.5rem; /* section statement — 24px */ } .cell-content h2 { font-size: 1.4rem; } /* Keep the command example from forcing horizontal scroll */ .code-snippet code { font-size: 0.78rem; } /* JA type scale at <=480 */ html[lang="ja"] .usecases-header h2, html[lang="ja"] .workflow-header h2, html[lang="ja"] .guide-header h2, html[lang="ja"] .faq-header h2 { font-size: 1.375rem; /* section header — 22px */ } html[lang="ja"] .cell-content h2, html[lang="ja"] .usecase-title, html[lang="ja"] .step-body h3, html[lang="ja"] .guide-card h3 { font-size: 1.1875rem; /* card title — 19px */ } html[lang="ja"] .subtext, html[lang="ja"] .feature-intro p, html[lang="ja"] .usecases-header p, html[lang="ja"] .faq-header p, html[lang="ja"] .screens-header p { font-size: 1rem; /* lead — 16px */ } html[lang="ja"] .cell-content p, html[lang="ja"] .step-body p { font-size: 0.9375rem; /* dense body — 15px */ } } /* See it in action — real product screenshots (1 wide + 2) */ .screens { padding-bottom: 120px; } .screens-header { margin-bottom: 48px; } .screens-header h2 { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.04em; margin-bottom: 16px; } html[lang="ja"] .screens-header h2 { font-size: 1.625rem; /* section header — 26px */ line-height: 1.4; } .screens-header p { font-size: 1.25rem; color: var(--text-secondary); max-width: 650px; line-height: 1.6; } .screens-bento { /* Three equal portrait cards. The screenshots have different aspect ratios, so align-items:start lets each card take its natural height instead of stretching the shortest to match the tallest (which left a ragged gap above its caption). No object-fit cropping: the full window stays visible. */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .screen-card { margin: 0; border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; background: var(--bg-surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); } .screen-card img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--border-color); } .screen-card figcaption { padding: 16px 20px; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; } html[lang="ja"] .screen-card figcaption { line-height: 1.8; /* JP body breathes wider (japanese-typography-qa §3) */ } @media (max-width: 1024px) { .screens-bento { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .screens-bento { grid-template-columns: 1fr; } .screens-header h2 { font-size: 2rem; } html[lang="ja"] .screens-header h2 { font-size: 1.5rem; /* section header — 24px */ } }