/* ───────────────────────────────────────────────────────── yokan-co — corporate Ghost theme Brand language lifted from yokan-www so yokan.ai and yokan.co.jp feel like one company. ───────────────────────────────────────────────────────── */ :root { --bg: #FAFAF9; --surface: #FFFFFF; --surface-ink: #141414; --border: rgba(17,17,17,0.08); --border-strong: rgba(17,17,17,0.14); --text: #141414; --text-muted: #555F6D; --text-dim: #8A93A0; --accent: #C8252A; --accent-hover: #A11D22; --accent-soft: rgba(200,37,42,0.07); --accent-line: #1F5F87; --brand-grad: linear-gradient(135deg, #C8252A 0%, #EFBE3E 55%, #1F5F87 100%); --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16,24,40,0.04); --shadow-md: 0 6px 18px rgba(16,24,40,0.08); --shadow-lg: 0 18px 48px rgba(16,24,40,0.10); --font-sans: 'Inter','Poppins','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif; --font-display: 'Poppins','Inter','SF Pro Display','Noto Sans JP',sans-serif; --ease: cubic-bezier(0.2,0,0,1); --measure: 70ch; --shell-max: 1180px; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); -webkit-font-smoothing:antialiased; } body { font-family:var(--font-sans); color:var(--text); line-height:1.7; background:var(--bg); } body::before { content:""; position:fixed; top:0; left:0; right:0; height:2px; background:var(--brand-grad); z-index:101; pointer-events:none; } a { color:inherit; text-decoration:none; } img, svg { max-width:100%; display:block; } /* ─── locale toggle: show only the active language ─── Scoped strictly to body descendants — must NOT match (chat.js sets that to reflect the active locale, and a global selector would hide the entire document). */ .en { display:none; } body :where([lang="en"]) { display:none; } body.locale-en .ja, body.locale-en :where([lang="ja"]) { display:none; } body.locale-en .en, body.locale-en :where([lang="en"]) { display:revert; } /* ─── shell ─── */ .site-main { max-width:var(--shell-max); margin:0 auto; padding:0 1.5rem; } /* ─── site header / nav ─── */ .site-header { position:sticky; top:0; background:rgba(250,250,249,0.82); -webkit-backdrop-filter:saturate(180%) blur(14px); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--border); z-index:100; } .site-header-inner { max-width:var(--shell-max); margin:0 auto; padding:0 1.5rem; height:62px; display:flex; align-items:center; gap:1rem; } .site-mark { display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--font-display); font-size:0.95rem; font-weight:600; color:var(--text); letter-spacing:-0.015em; } .site-mark-logo { width:32px; height:32px; border-radius:50%; flex:none; box-shadow:0 1px 3px rgba(16,24,40,0.10); background:#fff; object-fit:cover; } .site-mark-name { letter-spacing:-0.01em; } .site-nav { display:flex; gap:0.25rem; margin-left:auto; align-items:center; } .site-nav > a, .site-nav > button { padding:0.45rem 0.85rem; font-size:0.86rem; font-weight:500; color:var(--text-muted); border-radius:6px; letter-spacing:-0.005em; background:transparent; border:0; cursor:pointer; font-family:inherit; transition:color 160ms var(--ease), background 160ms var(--ease); } .site-nav > a:hover, .site-nav > button:hover { color:var(--text); background:var(--accent-soft); } .site-nav-cta { background:var(--surface-ink) !important; color:#fff !important; padding:0.5rem 1rem !important; font-weight:500 !important; } .site-nav-cta:hover { background:#000 !important; } .site-locale { font-size:0.78rem !important; color:var(--text-dim) !important; border:1px solid var(--border-strong) !important; } .site-locale .locale-ja, .site-locale .locale-en { display:none; } body:not(.locale-en) .site-locale .locale-en { display:inline; } body.locale-en .site-locale .locale-ja { display:inline; } @media (max-width: 720px) { .site-nav > a:not(.site-nav-cta) { display:none; } .site-header-inner { height:56px; } } /* ─── hero ─── */ .hero { position:relative; padding:8rem 0 7rem; margin-bottom:1rem; overflow:hidden; background: linear-gradient(rgba(8,9,14,0.55), rgba(8,9,14,0.55)), #08090E url("../images/hero-mercury.jpg") center/cover no-repeat; border-bottom:1px solid rgba(255,255,255,0.08); color:#F7F7F5; } .hero-logo { display:none; } .hero-inner { position:relative; max-width:var(--shell-max); margin:0 auto; padding:0 1.5rem; } .hero-inner > * { max-width:760px; } .hero-inner .eyebrow { color:#FFFFFF; font-weight:700; letter-spacing:0.08em; text-shadow:0 1px 8px rgba(0,0,0,0.7); } .hero-inner .eyebrow .brand-mark { background:#fff; } .hero-title { color:#FFFFFF; font-weight:700; letter-spacing:-0.025em; text-shadow:0 2px 4px rgba(0,0,0,0.65), 0 6px 28px rgba(0,0,0,0.55); } .hero-sub { color:#FFFFFF; font-weight:400; text-shadow:0 1px 3px rgba(0,0,0,0.7), 0 4px 18px rgba(0,0,0,0.5); } .hero .btn-primary { background:#fff; color:#0F1014; } .hero .btn-primary:hover { background:#fff; transform:translateY(-1px); box-shadow:0 6px 24px rgba(0,0,0,0.40); } .hero .btn-ghost { background:rgba(247,196,77,0.28); /* warm gold from the Mercury rays */ color:#fff; border-color:rgba(247,196,77,0.55); backdrop-filter:saturate(120%) blur(2px); -webkit-backdrop-filter:saturate(120%) blur(2px); } .hero .btn-ghost:hover { background:rgba(247,196,77,0.42); border-color:rgba(247,196,77,0.85); } @media (max-width: 720px) { .hero { padding:6rem 0 5rem; } } @keyframes hero-float { 0% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-12px, 8px, 0) scale(1.04); } 100% { transform:translate3d(8px, -10px, 0) scale(0.98); } } .hero-inner { max-width:var(--shell-max); margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; } .hero-inner > * { max-width:780px; } @media (prefers-reduced-motion: reduce) { .hero::after { animation:none; } } .eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1.25rem; } .brand-mark { width:18px; height:18px; border-radius:50%; flex:none; background:#fff; box-shadow:0 1px 2px rgba(16,24,40,0.10); object-fit:cover; } .hero-title { font-family:var(--font-display); font-size:clamp(2rem, 4.2vw, 3.4rem); font-weight:600; line-height:1.15; letter-spacing:-0.02em; max-width:18ch; margin-bottom:1.25rem; } .hero-sub { font-size:clamp(1rem, 1.4vw, 1.15rem); max-width:60ch; line-height:1.65; margin-bottom:2rem; } .hero-cta { display:flex; gap:0.75rem; flex-wrap:wrap; } .btn-primary, .btn-ghost { display:inline-flex; align-items:center; justify-content:center; padding:0.75rem 1.4rem; font-size:0.92rem; font-weight:500; border-radius:8px; cursor:pointer; font-family:inherit; border:1px solid transparent; transition:transform 120ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); line-height:1; } .btn-primary { background:var(--surface-ink); color:#fff; } .btn-primary:hover { background:#000; transform:translateY(-1px); } .btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border-strong); } .btn-ghost:hover { border-color:var(--text); } /* ─── products section ─── */ .products { padding:5rem 0 4rem; } .section-header { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2.5rem; flex-wrap:wrap; } /* Stacked variant — title sits above the lede instead of being pushed to opposite ends by space-between. Used on sections where the second element is a body of supporting copy, not a right-side action link. */ .section-header.is-stacked { display:block; } .section-header.is-stacked .section-lede { max-width:60ch; margin-top:0.7rem; } .section-title { font-family:var(--font-display); font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:600; letter-spacing:-0.015em; color:var(--text); max-width:24ch; } .section-lede { color:var(--text-muted); max-width:50ch; margin-top:0.6rem; font-size:0.98rem; } .section-link { font-size:0.88rem; font-weight:500; color:var(--text-muted); align-self:end; } .section-link:hover { color:var(--accent); } .product-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; } .product-card { display:flex; flex-direction:column; gap:0.5rem; padding:1.6rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); } .product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); } .product-mark { width:44px; height:44px; border-radius:10px; background:#FFFFFF; border:1px solid var(--border); padding:6px; object-fit:contain; margin-bottom:0.85rem; box-shadow:0 1px 2px rgba(16,24,40,0.04); } .product-card h3 { font-family:var(--font-display); font-size:1.15rem; font-weight:600; letter-spacing:-0.01em; } .product-card .product-jp { color:var(--text-muted); font-size:0.94rem; line-height:1.55; } .product-link { margin-top:auto; padding-top:1.25rem; font-size:0.85rem; font-weight:500; color:var(--accent); } /* ─── forecast CTA ─── */ .forecast-cta { margin:3rem 0; padding:3.5rem 2rem; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); background-image:linear-gradient(180deg, rgba(200,37,42,0.05), rgba(31,95,135,0.03) 60%); } .forecast-inner { max-width:780px; } .forecast-form { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1.5rem; } .forecast-form input[type="url"] { flex:1; min-width:240px; padding:0.85rem 1rem; font-size:0.96rem; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; font-family:inherit; } .forecast-form input[type="url"]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .forecast-note { font-size:0.8rem; color:var(--text-dim); margin-top:0.85rem; } /* ─── news section ─── */ .news { padding:4rem 0 5rem; } .news-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1.25rem; } .post-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease); display:flex; flex-direction:column; } .post-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); } .post-card-link { display:flex; flex-direction:column; height:100%; } .post-card-image { aspect-ratio:16/9; background-size:cover; background-position:center; background-color:#EBEAE7; } .post-card-image-placeholder { position:relative; } .post-card-image-placeholder .brand-grad-fill { position:absolute; inset:0; background:var(--brand-grad); opacity:0.85; } .post-card-body { padding:1.1rem 1.25rem 1.4rem; flex:1; display:flex; flex-direction:column; } .post-card-meta { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.4rem; } .dot { padding:0 0.4rem; color:var(--text-dim); } .post-card-title { font-family:var(--font-display); font-size:1.05rem; font-weight:600; line-height:1.35; letter-spacing:-0.005em; color:var(--text); margin-bottom:0.5rem; } .post-card-excerpt { font-size:0.88rem; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; line-height:1.55; } /* ─── Koenig editor support: wide / full image cards ─── */ .kg-width-wide { width:115%; max-width:115%; margin-left:-7.5%; } .kg-width-full { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .kg-card { margin:1.5rem 0; } .kg-bookmark-card, .kg-callout-card, .kg-toggle-card { border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; } .kg-image-card figcaption { font-size:0.82rem; color:var(--text-dim); text-align:center; padding-top:0.5rem; } /* Every image inside a Ghost card or post body must respect its intrinsic aspect ratio. Without `height:auto`, browsers honour the literal `height` HTML attribute (e.g. height="945") even when CSS shrinks the width, producing skewed renderings on every post photo. */ .kg-card img, .kg-image-card img, .kg-gallery-image img { max-width:100%; height:auto; display:block; } /* Embed cards (YouTube, Vimeo, etc.) ship with tiny default iframe sizes like width="200" height="113". Stretch them to the post body width and let aspect-ratio handle proportional height. */ .kg-embed-card { width:100%; } .kg-embed-card iframe, .post-body iframe, .page-body iframe, .post-body figure iframe, .page-body figure iframe { width:100%; max-width:100%; aspect-ratio:16 / 9; height:auto; border:0; display:block; border-radius:var(--radius); } .kg-gallery-row { display:flex; gap:.5rem; flex-wrap:wrap; } .kg-gallery-image { flex:1 1 0; min-width:0; } /* ─── post / page ─── */ .post-article, .page-article { max-width:760px; margin:3.5rem auto 5rem; } .post-header, .page-header { margin-bottom:2rem; } .post-meta { font-size:0.86rem; color:var(--text-muted); margin-bottom:0.8rem; } .post-meta a { color:var(--text-muted); } .post-meta a:hover { color:var(--accent); } .post-title, .page-title { font-family:var(--font-display); font-size:clamp(1.7rem, 3.2vw, 2.6rem); font-weight:600; line-height:1.2; letter-spacing:-0.015em; color:var(--text); } .post-excerpt { font-size:1.1rem; color:var(--text-muted); margin-top:1rem; line-height:1.55; } .post-feature, .page-feature { margin:2rem 0; border-radius:var(--radius); overflow:hidden; } .post-feature img, .page-feature img { width:100%; height:auto; } .post-feature figcaption { font-size:0.82rem; color:var(--text-dim); padding:0.75rem 0.5rem 0; } .post-body, .page-body { font-size:1.02rem; line-height:1.75; color:var(--text); } .post-body > * + *, .page-body > * + * { margin-top:1.1rem; } .post-body h2, .page-body h2 { margin-top:2.5rem; font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-0.01em; } .post-body h3, .page-body h3 { margin-top:1.8rem; font-family:var(--font-display); font-size:1.2rem; font-weight:600; letter-spacing:-0.005em; } .post-body a, .page-body a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; } .post-body a:hover, .page-body a:hover { color:var(--accent-hover); } .post-body img, .page-body img { max-width:100%; height:auto; display:block; border-radius:var(--radius); margin:1.5rem auto; } .post-body figure, .page-body figure { max-width:100%; } .post-body figure img, .page-body figure img { width:100%; } .post-body blockquote, .page-body blockquote { border-left:3px solid var(--accent); padding:0.5rem 0 0.5rem 1.25rem; color:var(--text-muted); font-style:italic; } .post-body code, .page-body code { background:var(--accent-soft); padding:0.1rem 0.4rem; border-radius:4px; font-size:0.9em; } .post-body pre, .page-body pre { background:#0F1116; color:#E5E7EB; padding:1rem 1.25rem; border-radius:var(--radius); overflow:auto; line-height:1.5; font-size:0.88rem; } .post-footer { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; } .post-back { color:var(--text-muted); font-size:0.92rem; } .post-back:hover { color:var(--accent); } /* ─── archive (tag/author) ─── */ .archive-header { max-width:var(--shell-max); margin:0 auto; padding:4rem 1.5rem 2rem; } .archive-title { font-family:var(--font-display); font-weight:600; font-size:clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-0.015em; margin:0.4rem 0; } .archive-description { color:var(--text-muted); max-width:60ch; } /* ─── pagination ─── */ .pagination { margin-top:2.5rem; display:flex; justify-content:center; gap:1rem; font-size:0.88rem; } .pagination a, .pagination .page-number { color:var(--text-muted); padding:0.5rem 0.9rem; border:1px solid var(--border); border-radius:6px; } .pagination a:hover { color:var(--text); border-color:var(--border-strong); } /* ─── error page ─── */ .error-page { max-width:560px; margin:6rem auto; text-align:center; } .error-code { font-family:var(--font-display); font-size:5rem; font-weight:700; background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; } .error-title { font-family:var(--font-display); font-size:1.6rem; font-weight:600; margin:1rem 0; } .error-lede { color:var(--text-muted); margin-bottom:2rem; } .error-page .hero-cta { justify-content:center; } /* ─── footer ─── */ .site-footer { margin-top:4rem; background:#0F1014; color:#D6D8DD; padding:3.5rem 0 2rem; } .site-footer-inner { max-width:var(--shell-max); margin:0 auto; padding:0 1.5rem; } .footer-cols { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,0.08); } .footer-mark { display:inline-flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-size:0.95rem; font-weight:600; color:#fff; margin-bottom:0.85rem; } .footer-mark-logo { width:28px; height:28px; border-radius:50%; flex:none; background:#fff; object-fit:cover; } .footer-tag { color:#9095A2; font-size:0.86rem; line-height:1.6; max-width:36ch; } .footer-h { color:#fff; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:0.85rem; } .footer-col ul { list-style:none; } .footer-col li { margin:0.35rem 0; } .footer-col a, .footer-chat-btn { color:#C9CCD3; font-size:0.92rem; font-family:inherit; background:transparent; border:0; cursor:pointer; padding:0; text-align:left; text-decoration:none; border-bottom:1px solid transparent; transition:color 160ms var(--ease), border-color 160ms var(--ease); } .footer-col a:hover, .footer-chat-btn:hover { color:#fff; border-bottom-color:rgba(255,255,255,0.4); } .footer-legal { margin-top:2rem; font-size:0.8rem; color:#6C7180; display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; } .footer-legal .dot { color:#3D4049; padding:0 0.4rem; } @media (max-width: 720px) { .footer-cols { grid-template-columns:1fr 1fr; } .footer-brand { grid-column:1/-1; } } /* ─── Chat widget — visitor → Sumato → Android app ─── */ .yk-chat { position:fixed; bottom:1.25rem; right:1.25rem; z-index:200; font-family:var(--font-sans); transition:opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 0s; } /* When the footer is in view, the FAB sits on top of the footer's "Contact" column at bottom-right and steals clicks on "Contact Us" / "Live Chat". Tuck it out of the way until the visitor scrolls back. */ body.yk-chat-suppress-fab .yk-chat-fab { opacity:0; transform:translateY(20px) scale(.85); pointer-events:none; } body.yk-chat-suppress-fab .yk-chat-panel:not([hidden]) ~ .yk-chat-fab, body.yk-chat-suppress-fab .yk-chat:has(.yk-chat-panel:not([hidden])) .yk-chat-fab { /* If the panel is open, keep the FAB visible so the visitor can still close it. */ opacity:1; transform:none; pointer-events:auto; } .yk-chat-fab { display:inline-flex; align-items:center; gap:0.55rem; padding:0.7rem 1.05rem; border-radius:999px; background:var(--surface-ink); color:#fff; border:0; cursor:pointer; font-family:inherit; font-size:0.9rem; font-weight:500; box-shadow:0 10px 28px rgba(16,24,40,0.18), 0 0 0 1px rgba(255,255,255,0.06) inset; transition:transform 180ms var(--ease), box-shadow 200ms var(--ease); } .yk-chat-fab:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(16,24,40,0.24); } .yk-chat-fab-label { line-height:1; } .yk-chat-fab-badge { width:8px; height:8px; border-radius:50%; background:#F87171; box-shadow:0 0 0 2px var(--surface-ink); margin-left:0.2rem; } .yk-chat-panel { position:fixed; bottom:5.25rem; right:1.25rem; width:min(360px, calc(100vw - 2rem)); height:min(540px, calc(100vh - 7rem)); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; /* Closed state — present in DOM for transitions, but cannot steal clicks from anything underneath it (e.g. the footer's Contact column which sits at the same screen position when scrolled to bottom). */ transform:translateY(8px); opacity:0; visibility:hidden; pointer-events:none; transition:transform 220ms var(--ease), opacity 200ms var(--ease), visibility 0s linear 220ms; } .yk-chat-panel:not([hidden]) { transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; transition:transform 220ms var(--ease), opacity 200ms var(--ease), visibility 0s linear 0s; } .yk-chat-panel.yk-chat-popping { animation:yk-chat-pop 320ms var(--ease); } @keyframes yk-chat-pop { 0% { transform:scale(0.94) translateY(12px); opacity:0; } 60% { transform:scale(1.03) translateY(0); opacity:1; } 100% { transform:scale(1) translateY(0); opacity:1; } } .yk-chat-fab.yk-chat-fab-pulse { animation:yk-chat-fab-pulse 800ms ease-out; } @keyframes yk-chat-fab-pulse { 0% { box-shadow:0 10px 28px rgba(16,24,40,0.18), 0 0 0 0 rgba(200,37,42,0.55); } 70% { box-shadow:0 10px 28px rgba(16,24,40,0.18), 0 0 0 22px rgba(200,37,42,0); } 100% { box-shadow:0 10px 28px rgba(16,24,40,0.18), 0 0 0 0 rgba(200,37,42,0); } } .yk-chat-panel-head { display:flex; align-items:center; justify-content:space-between; padding:0.95rem 1.1rem; border-bottom:1px solid var(--border); } .yk-chat-panel-title { font-family:var(--font-display); font-size:0.96rem; font-weight:600; } .yk-chat-panel-sub { font-size:0.74rem; color:var(--text-dim); margin-top:0.15rem; } .yk-chat-panel-close { background:transparent; border:0; cursor:pointer; padding:0.25rem 0.6rem; font-size:1.4rem; color:var(--text-muted); line-height:1; } .yk-chat-panel-close:hover { color:var(--text); } .yk-chat-log { list-style:none; flex:1; overflow:auto; padding:1rem; display:flex; flex-direction:column; gap:0.6rem; background:#FCFBFA; } .yk-chat-empty { color:var(--text-dim); font-size:0.86rem; text-align:center; padding:2.5rem 1rem; } .yk-chat-msg { max-width:78%; padding:0.55rem 0.85rem; border-radius:14px; font-size:0.92rem; line-height:1.5; background:var(--surface); border:1px solid var(--border); align-self:flex-start; } .yk-chat-msg.is-self { align-self:flex-end; background:var(--surface-ink); color:#fff; border-color:var(--surface-ink); } .yk-chat-msg .ts { display:block; margin-top:0.25rem; font-size:0.7rem; color:var(--text-dim); } .yk-chat-msg.is-self .ts { color:rgba(255,255,255,0.55); } .yk-chat-form { display:flex; gap:0.5rem; padding:0.75rem; border-top:1px solid var(--border); background:var(--surface); } .yk-chat-form textarea { flex:1; resize:none; padding:0.55rem 0.7rem; font-family:inherit; font-size:0.9rem; border:1px solid var(--border-strong); border-radius:8px; line-height:1.45; } .yk-chat-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .yk-chat-send { padding:0 1rem; background:var(--surface-ink); color:#fff; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:500; font-size:0.86rem; } .yk-chat-send:hover { background:#000; } .yk-chat-send:disabled { opacity:0.55; cursor:not-allowed; } /* ─── bot-resistant phone + email rendering ─── Same pattern used on the contact page (mirrors yokanstudio.jp): the digits/letters live in CSS ::before/::after content strings and are written backwards. The element has direction:rtl + bidi-override, so the browser renders them forwards. HTML scrapers and naive crawlers see empty s and reversed character soup. The chat.js click-to- call/mail decoder reads getComputedStyle at runtime and binds a click handler so real visitors get tap-to-dial / tap-to-mail. */ .pun { unicode-bidi:bidi-override; direction:rtl; font-family:inherit; } .pun.nukum:before { content:"pj.oiduts"; } .pun.nukum:after { content:"@tcatnoc"; } .pun.tokun:before { content:"7044 203"; } .pun.tokun:after { content:" 460"; } .pun[role="button"] { cursor:pointer; transition:color 140ms ease; } .pun[role="button"]:hover, .pun[role="button"]:focus-visible { color:#C8252A; outline:none; } /* ─── contact form ─── */ .contact { max-width:680px; margin:4rem auto 5rem; padding:0 1.5rem; } .contact-header { margin-bottom:2.25rem; } .contact-lede { color:var(--text-muted); margin-top:0.6rem; max-width:60ch; } .contact-form .field { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.1rem; } .contact-form label { font-size:0.86rem; font-weight:500; color:var(--text-muted); } .contact-form .req { color:var(--accent); margin-left:0.15rem; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { padding:0.7rem 0.9rem; font-size:0.96rem; background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:8px; font-family:inherit; line-height:1.5; transition:border-color 160ms var(--ease), box-shadow 160ms var(--ease); } .contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .contact-form textarea { resize:vertical; min-height:140px; } .field-captcha label { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; } .field-captcha strong { color:var(--text); font-weight:600; font-family:var(--font-mono, ui-monospace, monospace); } .field-captcha input { max-width:120px; } .field-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .contact-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; } .contact-status { font-size:0.88rem; color:var(--text-muted); margin:0; min-height:1.2em; } .contact-status[data-kind="ok"] { color:#147A3D; } .contact-status[data-kind="err"] { color:var(--accent); } .contact-status[data-kind="pending"] { color:var(--text-muted); } /* ─── cookie notice ─── */ .yk-cookie-notice { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:199; max-width:min(620px, calc(100vw - 2rem)); background:rgba(15,16,20,0.92); -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px); color:#F1F1EE; border:1px solid rgba(255,255,255,0.10); border-radius:999px; padding:0.5rem 0.6rem 0.5rem 1.1rem; display:flex; align-items:center; gap:0.75rem; font-size:0.78rem; line-height:1.45; box-shadow:0 8px 22px rgba(0,0,0,0.20); animation:yk-cookie-rise 320ms cubic-bezier(0.2,0,0,1); } .yk-cookie-notice p { margin:0; } .yk-cookie-notice .yk-cookie-ok { background:rgba(255,255,255,0.14); color:#fff; border:0; border-radius:999px; padding:0.35rem 0.85rem; font:inherit; font-size:0.78rem; font-weight:500; cursor:pointer; flex:none; transition:background-color 160ms var(--ease, ease); } .yk-cookie-notice .yk-cookie-ok:hover { background:rgba(255,255,255,0.24); } .yk-cookie-notice.is-out { opacity:0; transform:translateX(-50%) translateY(8px); transition:opacity 300ms, transform 300ms; } @keyframes yk-cookie-rise { from { opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } @media (max-width: 600px) { .yk-cookie-notice { bottom:0.75rem; max-width:calc(100vw - 1rem); flex-direction:column; gap:0.55rem; border-radius:14px; padding:0.75rem 0.95rem; text-align:center; } } /* ─── responsive tweaks ─── */ @media (max-width: 720px) { .hero { padding:3.5rem 0 3rem; } .products, .news { padding:3rem 0; } .forecast-cta { padding:2.5rem 1.5rem; } }