/* * Standalone stylesheet for the central-domain /landing page (E "platform" redesign). * Ported from the approved static draft (_ai-scratch/landing-redesign/v-e-platform-light.html). * Deliberately independent from site.css / Tailwind: this is a fixed-theme marketing page on the * central admin domain and never participates in tenant theming. * NOTE: comments here are English-only — this file ships to the browser (browser-comment gate). */ /* ============ Design tokens (light "platform" theme, PokerFans turquoise) ============ */ :root { --brand: #0f9d90; --brand-2: #12b3a4; --brand-soft: #5fd6c9; --brand-ink: #0b5d57; --brand-tint: #e6f6f4; --gold: #b8860b; --gold-soft: #c98a1a; --ink: #0c2a27; --ink-soft: #4a6763; --ink-dim: #7b938f; --bg: #ffffff; --bg-soft: #f4faf8; --bg-mint: #eef9f6; --card: #ffffff; --line: #dcebe8; --line-2: #eaf3f1; --radius: 16px; --radius-lg: 24px; --radius-xl: 30px; --disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: "Space Grotesk", ui-monospace, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Kaku Gothic ProN", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --maxw: 1200px; --sh-sm: 0 1px 3px rgba(12, 42, 39, .06); --sh-md: 0 12px 30px -14px rgba(12, 42, 39, .16); --sh-lg: 0 30px 70px -30px rgba(12, 42, 39, .28); } /* Per-language font stacks (html[lang] set server-side). The root defaults name Simplified-Chinese faces (PingFang SC / Microsoft YaHei) for --sans; and the Latin-only display/mono fonts fall through a generic sans-serif whose OS mapping is Chinese on a zh-locale Windows. Without these overrides, Japanese text (body AND headings/eyebrows via --disp/--mono) could render Han-unified (Chinese glyph shapes). Scope ALL three vars (--sans/--disp/--mono) so ja/zh-TW/zh-CN pick their own CJK face; the Latin display font (Space Grotesk) stays first. Latin-only (en) keeps root defaults. The CJK fallback faces added here are system fonts (not bundled); the Latin display font is loaded separately as a web font in the page . */ :lang(ja) { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif; --disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", sans-serif; --mono: "Space Grotesk", ui-monospace, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans CJK JP", monospace; } :lang(zh-TW) { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; --disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; --mono: "Space Grotesk", ui-monospace, "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", monospace; } :lang(zh-CN) { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --disp: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --mono: "Space Grotesk", ui-monospace, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", monospace; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { font-family: var(--sans); color: var(--ink); line-height: 1.7; background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section { padding: clamp(72px, 8vw, 116px) 0; position: relative; } /* Reveal-on-scroll: hidden state gated behind html.js so no-JS keeps content visible. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease-out, transform .55s ease-out; } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* eyebrow / heading */ .fig { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); display: inline-block; } h2 { font-family: var(--disp); font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -.015em; line-height: 1.12; margin: 14px 0 0; color: var(--ink); } .sec-head { max-width: 680px; margin-bottom: 52px; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head p { margin-top: 16px; font-size: 16.5px; color: var(--ink-soft); } .section-soft { background: var(--bg-soft); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 600; font-size: 15.5px; padding: 14px 28px; border-radius: 13px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; border: 1px solid transparent; white-space: nowrap; } .btn-sm { padding: 10px 18px; font-size: 14.5px; } .btn-primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff; box-shadow: 0 10px 24px -10px rgba(15, 157, 144, .6); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(15, 157, 144, .75); } .btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-2px); } /* ============ Topbar ============ */ .topbar { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(12px); background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line-2); } .topbar-inner { display: flex; align-items: center; gap: 28px; height: 72px; } .logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; color: var(--ink); flex: none; } .logo-mark { width: 34px; height: 34px; flex: none; display: block; } .nav { display: flex; align-items: center; gap: 26px; margin-left: 8px; } .nav a { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; transition: color .18s; } .nav a:hover { color: var(--ink); } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } /* Stable width so the right-anchored action cluster does not shift when the sign-in label changes width across languages (tuned to the widest, JA). */ .topbar-actions .btn { min-width: 144px; justify-content: center; } @media (max-width: 940px) { .nav { display: none; } } @media (max-width: 600px) { .topbar-actions .btn { display: none; } } /* Narrow phones (320/360): tighten the topbar so brand + language pill never exceed the viewport (body has overflow-x:hidden, which would otherwise clip the language selector). */ @media (max-width: 420px) { .topbar-inner { gap: 12px; } .logo { font-size: 15px; } } @media (max-width: 360px) { .logo span { display: none; } } /* Language switch: native
/, ?lang= links (server CookieLocaleResolver); landing.js only adds outside-click / Escape closing. */ .lang { position: relative; } .lang summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font: inherit; font-size: 13.5px; padding: 8px 14px; border-radius: 999px; min-height: 38px; white-space: nowrap; } .lang summary::-webkit-details-marker { display: none; } .lang summary svg { width: 16px; height: 16px; flex: none; } .lang summary:hover { border-color: var(--brand); color: var(--ink); } .lang .cur { min-width: 4em; text-align: center; } .lang .chev { transition: transform .2s ease; } .lang[open] .chev { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-md); padding: 6px; min-width: 168px; animation: menu-pop .16s ease-out; } @keyframes menu-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink); font-size: 14.5px; font-weight: 600; min-height: 40px; } .lang-menu a:hover { background: var(--brand-tint); } .lang-menu a[aria-current="true"] { color: var(--brand-ink); background: var(--brand-tint); } .lang-menu a .tick { opacity: 0; color: var(--brand); } .lang-menu a[aria-current="true"] .tick { opacity: 1; } /* ============ Hero ============ */ .hero { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 80px); background: radial-gradient(1000px 560px at 88% -12%, var(--bg-mint), transparent 62%), radial-gradient(700px 400px at 0% 6%, rgba(201,138,26,.05), transparent 55%), var(--bg); } .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--brand-tint); font-size: 13px; font-weight: 600; color: var(--brand-ink); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(15,157,144,.16); animation: pulse 2.4s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .hero h1 { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 5vw, 58px); line-height: 1.2; letter-spacing: -.01em; margin: 24px 0 0; color: var(--ink); max-width: 12em; } .hero h1 .hl { color: var(--brand); } .hero .lead { margin-top: 22px; font-size: 18px; color: var(--ink-soft); max-width: 540px; } .hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; } /* Browser mockup (hero + showcase) */ .stage { position: relative; } .win { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-lg); } .win .bar { display: flex; align-items: center; gap: 6px; padding: 12px 15px; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .win .bar i { width: 9px; height: 9px; border-radius: 50%; background: #cfe3df; } .win .bar .u { margin-left: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--line); padding: 3px 11px; border-radius: 8px; } .win .bar .u svg { width: 12px; height: 12px; color: var(--brand); } .win .bar .u .dots { letter-spacing: 4px; color: var(--ink-dim); } .win .site-hero { padding: 20px 20px 18px; background: linear-gradient(160deg, #0c2a27, #0f4a44); color: #fff; } .win .site-hero .nm { font-family: var(--disp); font-weight: 700; font-size: 17px; } .win .site-hero .nm span { color: var(--brand-soft); } .win .site-hero .tags { display: flex; gap: 6px; margin-top: 9px; } .win .site-hero .tags b { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(255,255,255,.14); color: #d7f5f0; } .win .body { padding: 16px 18px 18px; } .lb { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .lb .h { display: flex; align-items: center; justify-content: space-between; padding: 9px 13px; background: var(--bg-soft); font-size: 12px; font-weight: 600; color: var(--ink-soft); } .lb .h .live { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; } .lb .h .live .d { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(15,157,144,.18); animation: pulse 1.8s infinite; } .lb .row { display: flex; align-items: center; gap: 11px; padding: 9px 13px; border-top: 1px solid var(--line-2); font-size: 12.5px; } .lb .row .rk { font-family: var(--mono); font-weight: 700; width: 18px; color: var(--ink-dim); } .lb .row:nth-child(2) .rk { color: var(--gold-soft); } .lb .row .av { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-2), var(--brand)); flex: none; } .lb .row .nm { flex: 1; color: var(--ink); } .lb .row .pt { font-family: var(--mono); color: var(--brand); font-weight: 600; } /* Masked website "booth": abstract site silhouette + gradient veil (no real/fake data). */ .win.masked .showcase { background: var(--bg); } /* site nav bar — mirrors ThemeMiniPreview nav: surface bg + muted bottom border, left brand round mark, right hamburger */ .mnav { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #fff; border-bottom: 1px solid var(--line-2); } .mnav-mark { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); flex: none; } .mnav-burger { display: flex; flex-direction: column; gap: 4px; } .mnav-burger i { display: block; width: 19px; height: 2px; border-radius: 1px; background: var(--ink); } /* hero — mirrors fragments/hero + ThemeMiniPreview hero: round logo + club-name (template label) + tagline on brand gradient */ .mh { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px 20px 20px; text-align: center; background: linear-gradient(135deg, var(--brand-2), var(--brand)); } .mh-logo { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); } .mh-name { font-family: var(--disp); font-weight: 700; font-size: 15px; color: #fff; } .mh-tag { width: 188px; height: 8px; border-radius: 5px; background: rgba(255, 255, 255, .55); } /* content cards — mirrors ThemeMiniPreview cards: surface + radius + shadow, brand title line + muted body lines */ .mm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 20px; } .mcard { display: flex; flex-direction: column; gap: 7px; height: 88px; padding: 13px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-sm); } .mcard i { display: block; height: 6px; border-radius: 3px; } .mcard i:nth-child(1) { width: 72%; height: 8px; background: var(--brand); } .mcard i:nth-child(2) { width: 92%; background: var(--ink-dim); opacity: .5; } .mcard i:nth-child(3) { width: 60%; background: var(--ink-dim); opacity: .5; } /* Four-corner glass value cards (hero.trust1-4 relocated onto the booth). */ .vfloat { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 10px; max-width: 216px; padding: 11px 15px; border-radius: 13px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: var(--sh-md); } .vfloat .vic { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; flex: none; background: var(--brand-tint); border: 1px solid var(--line-2); } .vfloat .vic svg { width: 17px; height: 17px; color: var(--brand); } .vfloat.v1 { top: -18px; left: -20px; } .vfloat.v2 { top: 52px; right: -24px; } .vfloat.v3 { bottom: 52px; left: -24px; } .vfloat.v4 { bottom: -18px; right: -20px; } @media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } .stage { margin-top: 20px; } .vfloat.v1, .vfloat.v3 { left: 6px; } .vfloat.v2, .vfloat.v4 { right: 6px; } } @media (max-width: 560px) { .stage { display: flex; flex-direction: column; gap: 12px; } .vfloat { position: static; max-width: none; width: 100%; } } /* ============ Personas / use-case cards ============ */ .persona-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .persona { padding: 28px 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; } .persona:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; } .persona .ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: var(--brand-tint); border: 1px solid var(--line-2); } .persona .ic svg { width: 25px; height: 25px; color: var(--brand); } .persona h3 { font-family: var(--disp); font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); } .persona p { margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.65; } @media (max-width: 900px) { .persona-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .persona-grid { grid-template-columns: 1fr; } } /* ============ Ecosystem bento ============ */ .eco-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .eco { border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; padding: 26px; transition: transform .25s, box-shadow .25s, border-color .25s; position: relative; overflow: hidden; } .eco:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--sh-md); } .eco .ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; background: var(--brand-tint); border: 1px solid var(--line-2); } .eco .ic svg { width: 24px; height: 24px; color: var(--brand); } .eco h3 { font-family: var(--disp); font-size: 17px; font-weight: 600; } .eco h3 .eco-n { margin-right: 8px; font-family: var(--mono); font-weight: 700; color: var(--brand-soft); } .eco p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); } .eco .live-tag { position: absolute; top: 20px; right: 22px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--brand); display: inline-flex; align-items: center; gap: 5px; } .eco .live-tag .d { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(15,157,144,.18); animation: pulse 1.8s infinite; } .eco .soon { position: absolute; top: 20px; right: 22px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; color: var(--gold-soft); } .eco.sp6 { grid-column: span 6; } .eco.sp4 { grid-column: span 4; } .eco.sp3 { grid-column: span 3; } .eco.feature { background: linear-gradient(160deg, var(--bg-mint), #fff); } @media (max-width: 900px) { .eco.sp6, .eco.sp4 { grid-column: span 6; } .eco.sp3 { grid-column: span 6; } } @media (max-width: 560px) { .eco.sp6, .eco.sp4, .eco.sp3 { grid-column: span 12; } } /* ============ Deep-dive feature rows ============ */ .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; } .feat + .feat { margin-top: clamp(64px, 8vw, 110px); } .feat.flip .feat-copy { order: 2; } .feat-copy .fig { margin-bottom: 14px; } .feat-copy h2, .feat-copy h3 { font-family: var(--disp); font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin-top: 0; } .feat-copy p { margin-top: 16px; font-size: 16.5px; color: var(--ink-soft); } .feat-copy ul { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; } .feat-copy li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; } .feat-copy li svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: 2px; } .feat-visual { border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-mint), #fff); padding: 26px; min-height: 280px; box-shadow: var(--sh-md); position: relative; overflow: hidden; display: flex; } .fv-inner { position: relative; flex: 1; min-width: 0; } .mini-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; box-shadow: var(--sh-sm); } .mini-card + .mini-card { margin-top: 12px; } .mini-card .r { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-soft); } .mini-card .r .v { font-family: var(--mono); color: var(--brand); font-weight: 600; } .mini-card .bar { height: 7px; border-radius: 5px; background: var(--line-2); margin-top: 9px; overflow: hidden; } .mini-card .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } /* dive f1 — schedule schematic mirroring the site's schedule page: week-nav (prev/date/next) + tournament cards (thumb + skeleton title/venue + status tag) + LIVE sync pulse (no body text) */ .sched-viz { display: flex; flex-direction: column; justify-content: center; gap: 12px; } .sched-head { display: flex; align-items: center; gap: 10px; } .sched-chev { width: 16px; height: 16px; flex: none; color: var(--ink-dim); } .sched-head .sk-bar { flex: 1; max-width: 120px; height: 9px; border-radius: 5px; margin: 0 auto; background: rgba(12, 42, 39, .12); } .sched-head .live { flex: none; display: inline-flex; } .sched-head .live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px rgba(15, 157, 144, .18); animation: pulse 1.8s infinite; } .sched-list { display: flex; flex-direction: column; gap: 10px; } .tcard { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-sm); } .tc-thumb { flex: none; width: 50px; height: 50px; border-radius: 10px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); } .tc-thumb.alt { background: linear-gradient(135deg, var(--gold-soft), #d9a441); } .tc-body { flex: 1; display: flex; flex-direction: column; gap: 7px; } .tc-body .sk { height: 9px; border-radius: 5px; background: rgba(12, 42, 39, .12); } .tc-body .t1 { width: 72%; } .tc-body .t2 { width: 46%; background: rgba(12, 42, 39, .07); } .tc-tag { flex: none; width: 42px; height: 20px; border-radius: 999px; background: var(--brand-tint); } .tc-tag.reg { background: rgba(201, 138, 26, .16); } /* dive f2 — setup schematic mirroring the admin theme-settings page: mini theme-preview cards (nav + hero + cards), one selected (skeleton, no text) */ .setup-viz { display: flex; } .theme-picker { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 14px; } .tp { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); } .tp.on { border-color: transparent; box-shadow: 0 0 0 2px var(--brand); } .tp-nav { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--line-2); } .tp-mark { width: 13px; height: 13px; border-radius: 50%; background: var(--brand); } .tp-burger { display: flex; flex-direction: column; gap: 2px; } .tp-burger b { display: block; width: 14px; height: 2px; border-radius: 1px; background: var(--ink); } .tp-hero { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 10px; background: linear-gradient(135deg, var(--brand-2), var(--brand)); } .tp-hero.alt { background: linear-gradient(150deg, #2b2150, #3f3470); } .tp-logo { width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .92); } .tp-title { width: 46%; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, .92); } .tp-sub { width: 66%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .6); } .tp-cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 9px; } .tpc { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 7px; background: #fff; border: 1px solid var(--line-2); box-shadow: var(--sh-sm); } .tpc b { display: block; border-radius: 2px; } .tpc .l1 { width: 72%; height: 5px; background: var(--brand); } .tpc .l2 { width: 92%; height: 4px; background: var(--ink-dim); opacity: .45; } .tpc .l3 { width: 60%; height: 4px; background: var(--ink-dim); opacity: .45; } .tp-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-top: 1px solid var(--line-2); } .tp-name { width: 46%; height: 8px; border-radius: 4px; background: rgba(12, 42, 39, .22); } .tp-badge { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--brand); } .tp-badge svg { width: 11px; height: 11px; color: #fff; } .tp-link { flex: none; width: 26px; height: 8px; border-radius: 4px; background: var(--brand-soft); } /* dark theme thumbnail: dark body + cards, white nav, purple hero */ .tp.dark, .tp.dark .tp-cards, .tp.dark .tp-foot { background: #171430; } .tp.dark .tpc { background: #241f45; border-color: rgba(255, 255, 255, .08); box-shadow: none; } .tp.dark .tpc .l2, .tp.dark .tpc .l3 { background: rgba(255, 255, 255, .3); opacity: 1; } .tp.dark .tp-foot { border-top-color: rgba(255, 255, 255, .08); } .tp.dark .tp-name { background: rgba(255, 255, 255, .38); } @media (max-width: 860px) { .feat { grid-template-columns: 1fr; gap: 30px; } .feat.flip .feat-copy { order: 0; } } /* ============ Steps ============ */ .steps-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; max-width: 860px; margin: 0 auto; } .step-card { padding: 36px 30px; border-radius: var(--radius-lg); text-align: center; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); } .step-badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--brand); } .step-icon { width: 72px; height: 72px; margin: 20px auto 16px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(160deg, var(--brand-tint), #fff); border: 1px solid var(--line-2); color: var(--brand); } .step-icon svg { width: 35px; height: 35px; } .step-card h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; } .step-card p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; } .step-arrow { display: grid; place-items: center; color: var(--brand); } .step-arrow svg { width: 36px; height: 36px; } /* Get-started split (#steps): flex row, arrow between two step cards. align-items:stretch keeps BOTH cards equal height regardless of description line-count (CJK STEP1 wraps to 2 lines, EN/JA differ) — center alignment + aspect-ratio made them unequal. Tightened content (smaller icon/type) keeps them near-square. Mirrors the showcase .feat layout. */ #steps .steps-flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; max-width: 520px; margin: 0 auto; } #steps .step-card { flex: 0 0 220px; width: 220px; height: 220px; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; } #steps .step-icon { width: 54px; height: 54px; margin: 14px auto 12px; } #steps .step-icon svg { width: 27px; height: 27px; } #steps .step-card h3 { font-size: 18px; } #steps .step-card p { margin-top: 6px; font-size: 13.5px; } #steps .step-arrow { flex: 0 0 auto; } @media (max-width: 720px) { .steps-flow { grid-template-columns: 1fr; } .step-arrow { transform: rotate(90deg); } #steps .steps-flow { flex-direction: column; } #steps .step-card { flex: 0 0 auto; width: 100%; max-width: 320px; height: auto; } } /* 861-1100px: .feat is still two-column, so the right column (~380-500px) cannot fit the horizontal two-step row (~504px) and overflow-x:hidden would clip it. Stack the two steps vertically in this range (two 220px cards + rotated arrow) to fit the narrow column. At 720-860px .feat is already single-column, so the horizontal row has room and is unaffected. */ @media (min-width: 861px) and (max-width: 1100px) { #steps .steps-flow { flex-direction: column; max-width: 260px; } #steps .step-card { flex: 0 0 auto; width: 100%; max-width: 220px; height: auto; } #steps .step-arrow { transform: rotate(90deg); } } /* ============ Showcase (left copy + right two-state) ============ */ .show-visual { display: flex; flex-direction: column; gap: 14px; } .tpl-card { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; background: #fff; box-shadow: var(--sh-sm); transition: transform .25s, box-shadow .25s; display: block; color: inherit; } a.tpl-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); } .tpl-chrome { display: flex; align-items: center; gap: 5px; padding: 10px 13px; background: var(--bg-soft); border-bottom: 1px solid var(--line); } .tpl-chrome i { width: 8px; height: 8px; border-radius: 50%; background: #cfe3df; } .tpl-chrome .url { margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-dim); background: #fff; border: 1px solid var(--line); padding: 3px 10px; border-radius: 7px; } .tpl-chrome .url svg { width: 12px; height: 12px; color: var(--brand); flex: none; } .tpl-chrome .url .dots { letter-spacing: 3px; } .tpl-shot-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .tpl-shot-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .tpl-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; font-size: 13.5px; } .tpl-foot .visit { color: var(--brand); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .tpl-foot .visit svg { width: 13px; height: 13px; } .show-cap { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--gold-soft); text-align: center; margin-top: 8px; } /* ============ Pricing ============ */ .free-hero { text-align: center; margin-bottom: 26px; } .free-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; font-size: 14px; } .free-pill svg { width: 16px; height: 16px; } .price-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-md); max-width: 900px; margin: 0 auto; } table.price { width: 100%; border-collapse: collapse; min-width: 560px; } .price th, .price td { padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--line-2); font-size: 15px; } .price th:first-child, .price td:first-child { text-align: left; color: var(--ink); font-weight: 500; } .price thead th { font-family: var(--disp); font-weight: 600; color: var(--ink-soft); padding: 20px; background: var(--bg-soft); } .price thead th.hot { color: #fff; background: linear-gradient(180deg, var(--brand-2), var(--brand)); } .price tbody td.hot { background: var(--bg-mint); } .price tr:last-child td { border-bottom: none; } .yes { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } .yes svg { width: 13px; height: 13px; } .no { color: #c3d5d1; font-weight: 700; } .txt { color: var(--brand-ink); font-weight: 600; font-size: 14px; } .plan-link { text-align: center; margin-top: 22px; } .plan-link a { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .plan-link a:hover { text-decoration: underline; } .plan-link svg { width: 14px; height: 14px; } /* ============ FAQ ============ */ .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } details.faq { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: var(--sh-sm); } details.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 600; font-size: 16px; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary .chev { transition: transform .25s; color: var(--brand); flex: none; } details.faq summary .chev svg { width: 18px; height: 18px; } details.faq[open] summary .chev { transform: rotate(180deg); } details.faq .ans { padding: 0 24px 20px; color: var(--ink-soft); font-size: 15px; } /* ============ Bottom CTA band (dark anchor) ============ */ .cta-inner { position: relative; overflow: hidden; border-radius: var(--radius-xl); text-align: center; padding: clamp(52px, 8vw, 96px) 24px; color: #fff; background: radial-gradient(120% 150% at 50% -20%, rgba(46,196,182,.4), transparent 58%), linear-gradient(160deg, #0c2a27, #0f4a44); } .cta-inner h2 { color: #fff; } .cta-inner p { color: #a9ded6; margin-top: 12px; font-family: var(--disp); } .cta-inner .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .cta-inner .btn-primary { background: #fff; color: var(--brand-ink); } .cta-inner .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; } .cta-inner .btn-ghost:hover { border-color: #fff; } /* ============ Footer ============ */ footer { border-top: 1px solid var(--line-2); padding: 44px 0 34px; background: var(--bg-soft); } /* 1fr auto 1fr keeps the nav column dead-centered on the page regardless of the unequal brand (left) and copyright (right) widths; copyright right-aligns. */ .foot-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .foot-nav { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; } .foot-nav a { font-size: 14px; color: var(--ink-dim); } .foot-nav a:hover { color: var(--brand); } .foot-copy { font-size: 13px; color: var(--ink-dim); justify-self: end; } @media (max-width: 600px) { .foot-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .foot-copy { justify-self: center; } } /* ============ CTA modal (two-branch, no direct jump) ============ */ .modal-backdrop { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(4,25,23,.5); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.open { display: flex; } .modal { background: #fff; border-radius: 20px; box-shadow: var(--sh-lg); width: 100%; max-width: 420px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 34px 30px 28px; text-align: center; animation: pop .28s cubic-bezier(.22, 1.2, .36, 1); } @keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } } .modal h3 { font-size: 19px; font-weight: 700; margin-bottom: 22px; } .modal .branch { display: grid; gap: 12px; } .btn-branch-primary, .btn-branch-secondary { white-space: normal; overflow-wrap: anywhere; text-align: center; justify-content: center; line-height: 1.35; height: auto; } .btn-branch-primary { background: linear-gradient(180deg, var(--brand-2), var(--brand)); color: #fff; font-size: 15px; padding: 14px 20px; min-height: 50px; width: 100%; } .btn-branch-primary:hover { transform: translateY(-1px); } .btn-branch-secondary { background: #fff; color: var(--brand-ink); border: 1.5px solid var(--brand); font-size: 15px; padding: 14px 20px; min-height: 50px; width: 100%; } .btn-branch-secondary:hover { background: var(--brand-tint); } .modal .close-link { margin-top: 18px; appearance: none; border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: inherit; font-size: 13.5px; min-height: 32px; } .modal .close-link:hover { color: var(--ink); text-decoration: underline; }