/* ================================================================ RouteRun Design System — rr.css Version: 3.0 (Notion-Principal-Designer Redesign) Philosophy: Editorial warmth · Restraint over spectacle · Story-driven IA ================================================================ */ /* ---------------------------------------------------------------- FONTS (preload in each page's ) ---------------------------------------------------------------- */ /* ================================================================ 1. DESIGN TOKENS ================================================================ */ :root { /* Brand */ --color-primary: #0A7CDB; --color-primary-hover: #0063B8; --color-primary-bg: #EDF5FF; --color-primary-subtle: #DBEAFE; --color-secondary: #10B981; --color-secondary-hover: #059669; --color-secondary-bg: #ECFDF5; --color-accent: #F97316; /* CTA only */ --color-accent-hover: #EA580C; /* Surfaces — warm, not sterile */ --color-bg: #F8F7F4; /* warm off-white primary canvas */ --color-bg-surface: #FFFFFF; /* elevated cards */ --color-bg-subtle: #F1F0EC; /* tinted areas */ --color-bg-inset: #E9E8E3; /* recessed wells */ /* Dark surfaces */ --color-bg-dark: #111110; --color-bg-dark-2: #1A1918; --color-bg-dark-3: #242220; /* Special tints */ --color-bg-ayumu: #FFF8F2; /* warm orange tint for AI coach */ --color-bg-docs: #F0F7FF; /* cool blue tint for science/docs */ /* Text */ --color-text: #1A1916; /* warm near-black */ --color-text-2: #3D3B36; --color-text-3: #706C64; --color-text-4: #A09C94; /* Text on dark */ --color-on-dark: #F5F4F0; --color-on-dark-2: rgba(245,244,240,0.65); --color-on-dark-3: rgba(245,244,240,0.38); /* Border */ --color-border: #E0DDD6; --color-border-dark: rgba(255,255,255,0.08); /* ---- Typography ---- */ --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Noto Sans JP', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* Type scale */ --text-display: clamp(3rem, 5.5vw + 0.5rem, 5.75rem); --text-h1: clamp(2.25rem, 4vw + 0.5rem, 4.25rem); --text-h2: clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem); --text-h3: clamp(1.25rem, 1.5vw + 0.25rem, 1.5rem); --text-h4: 1.125rem; --text-body-lg: clamp(1rem, 0.8vw + 0.75rem, 1.125rem); --text-body: clamp(0.9375rem, 0.4vw + 0.8125rem, 1rem); --text-sm: 0.875rem; --text-xs: 0.75rem; --lh-heading: 1.1; --lh-body: 1.78; --lh-ja: 1.85; --ls-tight: -0.03em; --ls-display: -0.025em; --ls-eye: 0.065em; /* eyebrow labels */ /* ---- Spacing (4pt grid) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* ---- Layout ---- */ --max-w: 1120px; --max-w-text: 680px; --section-py: clamp(72px, 10vw, 136px); --container-px: clamp(20px, 4vw, 40px); /* ---- Shape ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* ---- Motion ---- */ --ease: cubic-bezier(0.25, 1, 0.5, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-precise: cubic-bezier(0.45, 0.12, 0.04, 0.96); --dur-fast: 150ms; --dur-base: 280ms; --dur-slow: 500ms; --dur-reveal: 640ms; } @media (prefers-color-scheme: dark) { :root { --color-primary: #3B9EFF; --color-primary-hover: #60B3FF; --color-primary-bg: #0D1A2E; --color-primary-subtle: #162240; --color-secondary: #34D399; --color-secondary-hover: #6EE7B7; --color-secondary-bg: #0C1F18; --color-accent: #FB923C; --color-accent-hover: #FDBA74; --color-bg: #111110; --color-bg-surface: #1A1918; --color-bg-subtle: #201F1D; --color-bg-inset: #282622; --color-bg-dark: #0A0A09; --color-bg-dark-2: #111110; --color-bg-dark-3: #1A1918; --color-bg-ayumu: #1E1410; --color-bg-docs: #0D1525; --color-border: #2C2A26; --color-text: #F5F4F0; --color-text-2: #B0ACA4; --color-text-3: #706C64; --color-text-4: #4A4740; } } /* ================================================================ 2. RESET ================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 16px; line-height: var(--lh-body); color: var(--color-text-2); background: var(--color-bg); overflow-x: hidden; font-feature-settings: "palt" 1; text-wrap: pretty; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; } ul, ol { list-style: none; } input, textarea, select { font: inherit; } /* ================================================================ 3. LANGUAGE UTILITIES ================================================================ */ [data-lang] { display: none; } [data-active-lang="ja"] [data-lang="ja"] { display: inline; } [data-active-lang="en"] [data-lang="en"] { display: inline; } .lang-block [data-lang] { display: none !important; } [data-active-lang="ja"] .lang-block [data-lang="ja"] { display: block !important; } [data-active-lang="en"] .lang-block [data-lang="en"] { display: block !important; } /* ================================================================ 4. TYPOGRAPHY ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); color: var(--color-text); font-weight: 700; line-height: var(--lh-heading); } /* Serif display — for hero headlines and emotional section heads */ .t-display { font-family: var(--font-serif); font-size: var(--text-display); font-weight: 400; line-height: 1.05; letter-spacing: var(--ls-display); color: var(--color-text); } .t-display em { font-style: italic; color: var(--color-primary); } .t-h1 { font-family: var(--font-serif); font-size: var(--text-h1); font-weight: 400; line-height: 1.08; letter-spacing: var(--ls-display); color: var(--color-text); } .t-h1 em { font-style: italic; } .t-h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text); } .t-h3 { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 600; line-height: 1.3; color: var(--color-text); } .t-body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--color-text-3); } .t-body { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-text-3); } .t-sm { font-family: var(--font-ui); font-size: var(--text-sm); line-height: 1.5; } .t-xs { font-family: var(--font-ui); font-size: var(--text-xs); line-height: 1.4; } /* Eyebrow label */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--ls-eye); text-transform: uppercase; color: var(--color-primary); } .eyebrow--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; flex-shrink: 0; } .eyebrow--pill { background: var(--color-primary-subtle); padding: 4px 12px; border-radius: var(--r-pill); } .eyebrow--green { color: var(--color-secondary); } .eyebrow--green.eyebrow--pill { background: var(--color-secondary-bg); } .eyebrow--orange { color: var(--color-accent); } .eyebrow--on-dark { color: var(--color-on-dark-2); } /* ================================================================ 5. LAYOUT ================================================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--container-px); } .container--narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--container-px); } section { padding: var(--section-py) 0; } /* 2-col editorial split */ .split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .split-grid--flip > *:first-child { order: 2; } .split-grid--flip > *:last-child { order: 1; } @media (max-width: 860px) { .split-grid { grid-template-columns: 1fr; } .split-grid--flip > *:first-child { order: unset; } .split-grid--flip > *:last-child { order: unset; } } /* ================================================================ 6. NAVIGATION ================================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 0 var(--container-px); opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .nav.nav-visible { opacity: 1; transform: translateY(0); } .nav.scrolled { background: rgba(248, 247, 244, 0.88); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 var(--color-border); } @media (prefers-color-scheme: dark) { .nav.scrolled { background: rgba(17, 17, 16, 0.88); } } .nav-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 56px; } .nav-logo { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: 17px; font-weight: 700; color: var(--color-primary); transition: opacity var(--dur-fast); } .nav-logo:hover { opacity: 0.72; } .nav-logo svg { width: 26px; height: 26px; } .nav-links { display: flex; align-items: center; gap: var(--sp-8); } .nav-link { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-3); transition: color var(--dur-fast); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--color-text); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-slow) var(--ease-precise); } .nav-link:hover { color: var(--color-text); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } .nav-right { display: flex; align-items: center; gap: var(--sp-3); } /* Language toggle */ .lang-toggle { display: flex; gap: 2px; background: var(--color-bg-inset); border-radius: var(--r-sm); padding: 2px; } .lang-btn { padding: 4px 10px; border-radius: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--color-text-3); transition: all var(--dur-fast); } .lang-btn.active { background: var(--color-bg-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } /* Nav CTA button (small) */ .nav-cta { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--color-bg-surface); background: var(--color-text); padding: 8px 16px; border-radius: var(--r-pill); transition: opacity var(--dur-fast); } .nav-cta:hover { opacity: 0.8; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; width: 24px; cursor: pointer; } .nav-hamburger span { display: block; height: 1.5px; background: var(--color-text); border-radius: 2px; transition: transform var(--dur-base) var(--ease), opacity var(--dur-base); } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; background: var(--color-bg); padding: var(--sp-10) var(--container-px); flex-direction: column; gap: var(--sp-6); z-index: 199; } .mobile-menu.open { display: flex; } .mobile-menu .nav-link { font-size: 22px; font-weight: 600; color: var(--color-text); } @media (max-width: 768px) { .nav-links, .nav-cta { display: none; } .nav-hamburger { display: flex; } } /* ================================================================ 7. BUTTONS ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-ui); font-weight: 600; border-radius: var(--r-pill); padding: 14px 36px; min-height: 50px; font-size: 15px; transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast), box-shadow var(--dur-fast); position: relative; overflow: hidden; cursor: pointer; } .btn:active { transform: scale(0.97); } /* Shimmer overlay */ .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.28) 50%, transparent 60%); transform: translateX(-100%); transition: none; } .btn:hover::after { animation: btn-shimmer 0.5s ease forwards; } @keyframes btn-shimmer { to { transform: translateX(100%); } } .btn-coral { background: var(--color-accent); color: #FFFFFF; } .btn-coral:hover { background: var(--color-accent-hover); } .btn-dark { background: var(--color-text); color: var(--color-bg-surface); } .btn-dark:hover { opacity: 0.85; } .btn-white { background: #FFFFFF; color: #111110; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } .btn-white:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.22); } .btn-ghost { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-ghost:hover { background: var(--color-primary); color: #FFFFFF; } .btn-ghost-dark { background: transparent; color: var(--color-on-dark); border: 1.5px solid rgba(255,255,255,0.3); } .btn-ghost-dark:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); } .btn--sm { padding: 10px 24px; min-height: 40px; font-size: 14px; } .btn--icon { padding: 14px; min-height: 50px; width: 50px; } /* ================================================================ 8. SECTION HEADER PATTERN ================================================================ */ .section-header { margin-bottom: clamp(40px, 6vw, 72px); } .section-header--center { text-align: center; } .section-header--center .section-eyebrow { justify-content: center; } .section-header--center .section-sub { max-width: var(--max-w-text); margin: 0 auto; } .section-eyebrow { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--ls-eye); text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--sp-4); } .section-eyebrow--green { color: var(--color-secondary); } .section-eyebrow--orange { color: var(--color-accent); } .section-eyebrow--on-dark { color: var(--color-on-dark-2); } .section-title { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text); margin-bottom: var(--sp-4); } .section-title--on-dark { color: var(--color-on-dark); } .section-title em { font-style: italic; color: var(--color-primary); } .section-sub { font-size: var(--text-body-lg); color: var(--color-text-3); line-height: var(--lh-body); max-width: 540px; } .section-sub--on-dark { color: var(--color-on-dark-2); max-width: 640px; } /* ================================================================ 9. CARDS ================================================================ */ .card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); transition: transform var(--dur-slow) var(--ease-precise), box-shadow var(--dur-slow) var(--ease-precise); } .card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.07); } .card--subtle { background: var(--color-bg-subtle); border-color: transparent; } .card--dark { background: var(--color-bg-dark-2); border-color: var(--color-border-dark); } .card--dark:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.3); } /* Feature chip (small inline badge) */ .chip { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-2); background: var(--color-bg-surface); border: 1px solid var(--color-border); padding: 5px 10px; border-radius: var(--r-sm); } .chip svg { width: 12px; height: 12px; color: var(--color-primary); } /* ================================================================ 10. STATS BAND (dark) ================================================================ */ .stats-band { background: var(--color-bg-dark); border-top: 1px solid rgba(0,0,0,0.15); } .stats-band-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--container-px); display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--color-border-dark); } .stat-item { padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px); border-right: 1px solid var(--color-border-dark); text-align: center; } .stat-number { font-family: var(--font-ui); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; color: var(--color-on-dark); letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; } .stat-label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--ls-eye); text-transform: uppercase; color: var(--color-on-dark-2); } @media (max-width: 640px) { .stats-band-inner { grid-template-columns: repeat(2, 1fr); border-right: 1px solid var(--color-border-dark); } .stat-item { border-right: none; border-bottom: 1px solid var(--color-border-dark); } .stat-item:nth-child(odd) { border-right: 1px solid var(--color-border-dark); } .stat-item:nth-last-child(-n+2) { border-bottom: none; } } /* ================================================================ 11. FEATURE ROWS (editorial alternating layout) ================================================================ */ .feature-row { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--color-border); } .feature-row:first-of-type { border-top: none; } .feature-text { max-width: 520px; } .feature-tag { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--ls-eye); text-transform: uppercase; color: var(--color-primary); background: var(--color-primary-subtle); padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: var(--sp-4); } .feature-tag--green { color: var(--color-secondary); background: var(--color-secondary-bg); } .feature-tag--orange { color: var(--color-accent); background: rgba(249,115,22,0.1); } .feature-heading { font-family: var(--font-serif); font-size: clamp(1.875rem, 2.5vw + 0.5rem, 2.5rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text); margin-bottom: var(--sp-4); } .feature-heading em { font-style: italic; color: var(--color-primary); } .feature-desc { font-size: var(--text-body-lg); color: var(--color-text-3); line-height: var(--lh-body); margin-bottom: var(--sp-6); } .feature-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); } /* Feature visual panel */ .feature-panel { border-radius: var(--r-2xl); background: var(--color-bg-subtle); border: 1px solid var(--color-border); overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; position: relative; } .feature-panel--tall { aspect-ratio: 3/4; } .feature-panel--video { aspect-ratio: 16/9; } /* Abstract route SVG illustration inside panel */ .route-illustration { width: 100%; height: 100%; position: absolute; inset: 0; } /* ================================================================ 12. VIDEO SECTION ================================================================ */ .video-section { padding: var(--section-py) 0; background: var(--color-bg-dark); } .video-wrapper { position: relative; border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 16/9; background: var(--color-bg-dark-3); border: 1px solid var(--color-border-dark); } .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ================================================================ 13. TESTIMONIALS ================================================================ */ .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .testimonial-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: var(--sp-4); transition: transform var(--dur-slow) var(--ease-precise), box-shadow var(--dur-slow) var(--ease-precise); } .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.06); } .testimonial-stars { display: flex; gap: 3px; } .testimonial-stars svg { width: 13px; height: 13px; } .testimonial-quote { font-size: 15px; line-height: 1.72; color: var(--color-text-2); flex: 1; } .testimonial-author { display: flex; align-items: center; gap: var(--sp-3); } .testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary); color: #FFFFFF; font-family: var(--font-ui); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; } .testimonial-name { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); } .testimonial-meta { font-size: var(--text-xs); color: var(--color-text-4); } @media (max-width: 768px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } } /* ================================================================ 14. PRICING ================================================================ */ .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); max-width: 800px; margin: 0 auto; } .pricing-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: var(--sp-6); position: relative; } .pricing-card.pro { background: var(--color-bg-dark); border-color: transparent; } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: var(--sp-1); background: var(--color-accent); color: #FFFFFF; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); } .pricing-name { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 700; color: var(--color-text); } .pricing-card.pro .pricing-name { color: var(--color-on-dark); } .pricing-price { font-family: var(--font-ui); font-size: 15px; color: var(--color-text-3); line-height: 1.5; } .pricing-price .amount { display: block; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.04em; color: var(--color-text); line-height: 1; margin-bottom: 4px; } .pricing-card.pro .pricing-price, .pricing-card.pro .pricing-price .amount { color: var(--color-on-dark); } .pricing-save { display: inline-block; background: var(--color-secondary-bg); color: var(--color-secondary); font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); } .pricing-features { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .pricing-features li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); color: var(--color-text-2); } .pricing-card.pro .pricing-features li { color: var(--color-on-dark-2); } .pricing-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-secondary); margin-top: 1px; } .pricing-trial { font-size: var(--text-xs); color: var(--color-text-4); line-height: 1.6; } .pricing-card.pro .pricing-trial { color: var(--color-on-dark-3); } @media (max-width: 600px) { .pricing-grid { grid-template-columns: 1fr; } } /* ================================================================ 15. FAQ ================================================================ */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-top: 1px solid var(--color-border); } .faq-item:last-child { border-bottom: 1px solid var(--color-border); } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-6) 0; cursor: pointer; font-family: var(--font-ui); font-size: var(--text-body-lg); font-weight: 600; color: var(--color-text); list-style: none; user-select: none; } .faq-q::-webkit-details-marker { display: none; } .faq-chevron { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-3); transition: transform var(--dur-base) var(--ease); } details[open] .faq-chevron { transform: rotate(180deg); } .faq-a { padding: 0 0 var(--sp-6); font-size: var(--text-body); color: var(--color-text-3); line-height: var(--lh-body); } /* ================================================================ 16. DARK BAND SECTION (sync-run / final CTA) ================================================================ */ .dark-band { background: var(--color-bg-dark); padding: var(--section-py) 0; } .dark-band--accent { background: linear-gradient(135deg, #0D1C2E 0%, #0A1520 100%); } /* ================================================================ 17. WAITLIST FORM ================================================================ */ .waitlist-form { max-width: 480px; margin: 0 auto; } .waitlist-input-wrap { display: flex; gap: var(--sp-2); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-pill); padding: 5px 5px 5px 20px; } .waitlist-input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-body); font-size: 15px; color: var(--color-on-dark); min-width: 0; } .waitlist-input::placeholder { color: var(--color-on-dark-3); } .waitlist-btn { background: var(--color-accent); color: #FFFFFF; font-family: var(--font-ui); font-size: 14px; font-weight: 600; padding: 10px 20px; border-radius: var(--r-pill); border: none; cursor: pointer; transition: background var(--dur-fast); white-space: nowrap; flex-shrink: 0; } .waitlist-btn:hover { background: var(--color-accent-hover); } .waitlist-note { font-size: 13px; margin-top: var(--sp-3); text-align: center; min-height: 20px; } .waitlist-note.success { color: #4ade80; } .waitlist-note.error { color: #f87171; } @media (max-width: 480px) { .waitlist-input-wrap { flex-direction: column; border-radius: var(--r-lg); padding: 12px 16px; } .waitlist-btn { border-radius: var(--r-md); } } /* ================================================================ 18. AYUMU SECTION ================================================================ */ .ayumu-section { background: var(--color-bg-ayumu); border-top: 1px solid rgba(249,115,22,0.12); border-bottom: 1px solid rgba(249,115,22,0.12); } .ayumu-orb { width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent) 0%, #D14A00 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(249,115,22,0.25), 0 0 0 1px rgba(249,115,22,0.15); position: relative; } .ayumu-orb-letter { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 400; color: rgba(255,255,255,0.95); line-height: 1; } .ayumu-orb-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(249,115,22,0.25); animation: orb-breathe 3s ease-in-out infinite; } @keyframes orb-breathe { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 1; } } /* Bubble rotation (same IDs as before — JS compat) */ .ayumu-bubble-wrap { position: relative; min-height: 80px; } .ayumu-bubble { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); border-bottom-left-radius: 4px; padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--color-text-2); box-shadow: 0 2px 12px rgba(0,0,0,0.05); position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease); pointer-events: none; } .ayumu-bubble.is-active { opacity: 1; pointer-events: auto; } .ayumu-bubble-icon { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent), #D14A00); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 900; color: #fff; font-family: var(--font-ui); } .ayumu-stat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); } .ayumu-stat-chip { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-2); background: var(--color-bg-surface); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: var(--r-sm); } .ayumu-stat-chip svg { width: 14px; height: 14px; color: var(--color-accent); } /* ================================================================ 19. FOOTER ================================================================ */ .footer { background: var(--color-bg-dark); border-top: 1px solid var(--color-border-dark); padding: clamp(48px, 7vw, 80px) 0 clamp(24px, 4vw, 40px); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--container-px); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(32px, 5vw, 56px); } .footer-brand { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--color-on-dark); margin-bottom: var(--sp-2); } .footer-tagline { font-size: var(--text-sm); color: var(--color-on-dark-2); margin-bottom: var(--sp-4); line-height: 1.5; } .footer-email { font-size: var(--text-sm); color: var(--color-primary); transition: opacity var(--dur-fast); } .footer-email:hover { opacity: 0.75; } .footer-col h4 { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--ls-eye); text-transform: uppercase; color: var(--color-on-dark-2); margin-bottom: var(--sp-5); } .footer-col a { display: block; font-size: var(--text-sm); color: var(--color-on-dark-2); margin-bottom: var(--sp-3); transition: color var(--dur-fast); } .footer-col a:hover { color: var(--color-on-dark); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--color-border-dark); gap: var(--sp-4); flex-wrap: wrap; } .footer-bottom span { font-size: var(--text-xs); color: var(--color-on-dark-3); } .footer-social { display: flex; gap: var(--sp-4); } .footer-social a { color: var(--color-on-dark-3); transition: color var(--dur-fast); } .footer-social a:hover { color: var(--color-on-dark); } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } } /* ================================================================ 20. ANIMATIONS & REVEAL ================================================================ */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-reveal) var(--ease-precise), transform var(--dur-reveal) var(--ease-precise); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger delays */ .stagger > *:nth-child(1) { transition-delay: 0ms; } .stagger > *:nth-child(2) { transition-delay: 100ms; } .stagger > *:nth-child(3) { transition-delay: 200ms; } .stagger > *:nth-child(4) { transition-delay: 300ms; } .stagger > *:nth-child(5) { transition-delay: 400ms; } .stagger > *:nth-child(6) { transition-delay: 500ms; } /* SVG path draw */ .draw-on { stroke-dasharray: var(--path-len, 800); stroke-dashoffset: var(--path-len, 800); transition: stroke-dashoffset 1.4s var(--ease); } .draw-on.drawn { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } .draw-on { stroke-dashoffset: 0; } .ayumu-orb-ring { animation: none; } } /* ================================================================ 21. PAGE HERO (inner-page pattern) ================================================================ */ .page-hero { padding: clamp(100px, 14vw, 160px) 0 clamp(60px, 8vw, 96px); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .page-hero--dark { background: var(--color-bg-dark); border-bottom: 1px solid var(--color-border-dark); } .page-hero-eyebrow { margin-bottom: var(--sp-4); } .page-hero-title { font-family: var(--font-serif); font-size: clamp(2.25rem, 5vw + 0.5rem, 4.5rem); font-weight: 400; line-height: 1.1; letter-spacing: var(--ls-display); color: var(--color-text); max-width: 840px; margin-bottom: var(--sp-6); } .page-hero-title--on-dark { color: var(--color-on-dark); } .page-hero-sub { font-size: var(--text-body-lg); color: var(--color-text-3); line-height: var(--lh-body); max-width: 560px; margin-bottom: var(--sp-10); } .page-hero-sub--on-dark { color: var(--color-on-dark-2); } /* ================================================================ 22. BREADCRUMB ================================================================ */ .breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-4); margin-bottom: var(--sp-6); } .breadcrumb a { color: var(--color-text-4); transition: color var(--dur-fast); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb-sep { color: var(--color-text-4); opacity: 0.5; } /* ================================================================ 23. PROSE (rich text content pages) ================================================================ */ .prose { max-width: 720px; font-size: var(--text-body-lg); line-height: 1.82; color: var(--color-text-2); } .prose h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 400; color: var(--color-text); margin: var(--sp-12) 0 var(--sp-5); letter-spacing: -0.01em; } .prose h3 { font-family: var(--font-ui); font-size: var(--text-h3); font-weight: 600; color: var(--color-text); margin: var(--sp-8) 0 var(--sp-4); } .prose p { margin-bottom: var(--sp-6); } .prose ul, .prose ol { margin: 0 0 var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { opacity: 0.8; } .prose strong { font-weight: 700; color: var(--color-text); } .prose blockquote { border-left: 3px solid var(--color-primary); padding: var(--sp-4) var(--sp-6); margin: var(--sp-8) 0; background: var(--color-bg-subtle); border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--color-text-2); } .prose table { width: 100%; border-collapse: collapse; margin: var(--sp-8) 0; font-size: var(--text-sm); } .prose th, .prose td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); } .prose th { font-family: var(--font-ui); font-weight: 600; color: var(--color-text); background: var(--color-bg-subtle); } /* ================================================================ 24. MISC UTILITIES ================================================================ */ .text-center { text-align: center; } .text-balance { text-wrap: balance; } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); } .mt-10 { margin-top: var(--sp-10); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* App Store badge */ .app-store-badge { height: 44px; transition: opacity var(--dur-fast); } .app-store-badge:hover { opacity: 0.8; } .app-store-badge-w { height: 44px; transition: opacity var(--dur-fast); } .app-store-badge-w:hover { opacity: 0.8; } /* ================================================================ 25. MOTION UTILITIES — float, marquee, gradient text ================================================================ */ /* Float — gentle vertical bob for illustrations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes float-sm { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } } @keyframes float-lg { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-18px); } } .float { animation: float 5.5s ease-in-out infinite; will-change: transform; } .float-sm { animation: float-sm 4s ease-in-out infinite; will-change: transform; } .float-lg { animation: float-lg 7s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .float, .float-sm, .float-lg { animation: none; } } /* Marquee — horizontal scroll strip */ @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-outer { overflow: hidden; position: relative; /* Fade edges */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%); } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 36s linear infinite; will-change: transform; } .marquee-track:hover { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; gap: 12px; padding: 0 32px; white-space: nowrap; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } } /* Gradient text */ .gradient-text { background: linear-gradient(135deg, var(--color-primary) 0%, #6366F1 50%, var(--color-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .gradient-text--warm { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* GPU-accelerated reveal */ .reveal { will-change: opacity, transform; } /* ================================================================ 26. SHARED JS ENTRYPOINT (included via /js/main.js) Nav, reveal, lang, count-up, ayumu bubbles, waitlist ================================================================ */