/* Theme Name: ssm Text Domain: ssm Version: 0.1.0 Requires at least: 6.1 Requires PHP: 7.4 Description: Landing page theme rendering Ready.ai design as the front page. Author: */ /* Add any custom overrides below */ /* ============================== Global Palette Overrides Theme: White / Mizuiro / Gray / Gold ============================== */ :root { /* White base + Blue + Gray + Gold + Yellow */ --base: #ffffff; /* 白 */ --surface: #F5F7FA; /* 薄いグレー */ --text-primary: #111827; /* ダークグレー */ --text-muted: #475569; /* ミュートテキスト */ --border-muted: #E5E7EB; /* 枠線用 */ --blue: #008FCD; /* 青 */ --gold: #AD9B6C; /* ゴールド */ --yellow: #FFF101; /* 黄 */ } /* Base body on dark background */ body { background-color: var(--base); color: var(--text-primary); } /* Light palette opt-in (apply by adding class to ) */ body.palette-light { --bg-base: #ffffff; --bg-surface: #f5f7fa; --text-primary: #111827; /* gray-900 */ --text-muted: #475569; /* slate-600 */ --border-muted: rgba(0,0,0,0.12); } /* Map common utility-like classes to the palette */ .bg-black { background-color: var(--base) !important; } .bg-gray-900 { background-color: var(--surface) !important; } .bg-gray-800 { background-color: var(--surface) !important; } .text-white { color: var(--text-primary) !important; } .text-whiteS { color: #ffffff !important; } .text-gray-300 { color: var(--text-muted) !important; } .text-gray-400 { color: #a8b3c7 !important; } .border-white\/10 { border-color: var(--border-muted) !important; } /* Replace black overlays with subtle blue-tinted whites */ .bg-black\/20 { background-color: rgba(0,143,205,0.06) !important; } .bg-black\/30 { background-color: rgba(0,143,205,0.08) !important; } .bg-black\/40 { background-color: rgba(0,143,205,0.12) !important; } .bg-black\/70 { background-color: rgba(0,143,205,0.20) !important; } .bg-black\/90 { background-color: #008fcd4d !important; } .bg-black\/99 { background-color: rgba(255, 255, 255, 1) !important; } .bg-border { border-bottom: #008FCD 1px solid; } /* Light overrides for utility classes */ body.palette-light .bg-black { background-color: var(--bg-base) !important; } body.palette-light .bg-gray-900 { background-color: var(--bg-surface) !important; } body.palette-light .text-white { color: var(--text-primary) !important; } /* Keep hero copy white for contrast on hero image */ body.palette-light section.relative.h-screen .text-white { color: #ffffff !important; } /* Top-right overlay logo on hero */ /* section.relative.h-screen::after { content: ""; position: absolute; top: clamp(56px, 9vw, 120px); right: clamp(8px, 2.5vw, 24px); width: clamp(72px, 14vw, 140px); aspect-ratio: 1 / 1; background: url('images/logo_trans.png') no-repeat center / contain; z-index: 10; pointer-events: none; } @media (max-width: 640px) { section.relative.h-screen::after { width: clamp(56px, 22vw, 96px); top: clamp(72px, 18vw, 128px); right: clamp(6px, 3vw, 16px); } } */ /* Hero headline contrast (subtle outline/shadow) */ section.relative.h-screen h1, section.relative.h-screen h2 { text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 0 12px rgba(0,0,0,0.22); -webkit-text-stroke: 0.4px rgba(0,0,0,0.25); paint-order: stroke fill; } section.relative.h-screen p, section.relative.h-screen .text-white { text-shadow: 0 1px 2px rgba(0,0,0,0.35); } /* Gradients used in template */ .bg-gradient-to-b.from-gray-900.to-black { background-image: linear-gradient(to bottom, var(--surface), var(--base)) !important; } .bg-gradient-to-b.from-black.to-gray-900 { background-image: linear-gradient(to bottom, var(--base), var(--surface)) !important; } .bg-gradient-to-br.from-gray-700.to-gray-800 { background-image: linear-gradient(to bottom right, var(--base), var(--surface)) !important; } .bg-gradient-to-br.from-gray-800.to-gray-900 { background-image: linear-gradient(to bottom right, var(--base), var(--surface)) !important; } .bg-gradient-to-r.from-yellow-400.to-yellow-500 { /* CTA: blue primary */ background-image: linear-gradient(to right, var(--blue), #007fb3) !important; } .bg-gradient-to-r.from-black.via-black\/70.to-transparent { /* Hero overlay in light scheme */ background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(0,143,205,0.12), rgba(255,255,255,0)) !important; } /* Light variant of the hero overlay gradient (less dark) */ body.palette-light .bg-gradient-to-r.from-black.via-black\/70.to-transparent { background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0.6), rgba(255,255,255,0)) !important; } /* Accents mapping (legible on white base) */ .text-yellow-300 { color: var(--gold) !important; } .text-yellow-400 { color: var(--gold) !important; } /* Header hover uses blue */ header .hover\:text-yellow-400:hover { color: var(--blue) !important; } /* Buttons previously using yellow -> blue primary */ .bg-yellow-400 { background-color: var(--blue) !important; color: #252525 !important; } .hover\:bg-yellow-500:hover { background-color: #007fb3 !important; } .border-yellow-400\/20 { border-color: rgba(0,143,205,0.25) !important; } /* Readable emphasis helpers */ .mark-yellow { background-image: linear-gradient(180deg, transparent 60%, var(--yellow) 0); background-size: 100% 100%; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .chip-yellow { display:inline-block; background-color: var(--yellow); color:#111827; padding:0.1rem 0.45rem; border-radius:0.375rem; } .chip-gold { display:inline-block; background-color: var(--gold); color:#111827; padding:0.1rem 0.45rem; border-radius:0.375rem; } /* Links subtle mizuiro accent (non-button links) */ main a:not(.cursor-pointer):not(.bg-yellow-400):not(.w-10) { color: var(--blue); } main a:not(.cursor-pointer):hover { opacity: 0.85; } /* Header tweaks for readability on dark */ header a { color: var(--text-primary); } header .hover\:text-yellow-400:hover { color: var(--blue) !important; } /* Header logo sizing to avoid overlap with menu */ .gd-logo { display: inline-flex; align-items: center; max-width: 160px; } .gd-logo img { max-width: 160px; height: auto; } @media (min-width: 1024px) { .gd-logo { max-width: 180px; } .gd-logo img { max-width: 180px; } } /* Cards and surfaces */ .border-yellow-400\/20 { border-color: rgba(0,143,205,0.25) !important; } .border-white\/10 { border-color: var(--border-muted) !important; } /* Section titles subtitling */ .tracking-widest { letter-spacing: .2em; } /* Trial form (Contact Form 7) styling */ #trial-form .wpcf7 form { --trial-bg: #ffffff; /* form controls background */ --trial-bd: var(--border-muted); --trial-tx: #111827; /* dark text for inputs */ --trial-tx-muted: var(--text-muted); --trial-focus: var(--blue); } #trial-form .wpcf7-form p { margin: 0 0 1rem; } #trial-form label { color:#ffffff !important; font-size: 1.2rem; display: inline-block; margin-bottom: 0.375rem; } #trial-form .wpcf7-form-control { width: 100%; background: var(--trial-bg); color: var(--trial-tx); border: 1px solid var(--trial-bd); border-radius: 0.75rem; /* rounded-xl */ padding: 0.75rem 1rem; /* py-3 px-4 */ box-sizing: border-box; } #trial-form .wpcf7-form-control::placeholder { color: rgba(71,85,105,.7); } #trial-form .wpcf7-form-control:focus { outline: none; border-color: var(--trial-focus); box-shadow: 0 0 0 3px rgba(0, 143, 205, 0.28); } #trial-form textarea.wpcf7-form-control { min-height: 9rem; } /* Select arrow visibility in dark bg */ #trial-form select.wpcf7-form-control { appearance: none; background-image: none; } /* Submit button */ #trial-form .wpcf7-submit { background: #ffffff !important; /* high-contrast white button */ color: var(--blue) !important; font-size: 1.125rem; /* text-lg */ font-weight: 700; border: 2px solid var(--blue) !important; padding: 0.85rem 2rem; border-radius: 9999px; /* rounded-full */ cursor: pointer; box-shadow: 0 4px 12px rgba(0, 143, 205, 0.18); transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease; } #trial-form .wpcf7-submit:hover { background: var(--blue) !important; color: #ffffff !important; border-color: var(--blue) !important; box-shadow: 0 8px 20px rgba(0, 127, 179, 0.28); } #trial-form .wpcf7-submit:focus-visible { outline: 3px solid #66c6ec; outline-offset: 3px; } /* Ensure blue section heading text remains white regardless of global text-white mapping */ #trial .container > h2, #trial .container > p { color: #ffffff !important; } #trial-form .wpcf7-submit:focus-visible { outline: 3px solid #66c6ec; outline-offset: 3px; } #trial-form .wpcf7-submit:active { transform: scale(0.98); } /* Validation & response states */ #trial-form .wpcf7-not-valid { border-color: #ef4444 !important; /* red-500 */ } #trial-form .wpcf7-not-valid-tip { color: #b91c1c; background: #fee2e2; padding: 0.25rem 0.5rem; border-radius: 0.375rem; font-size: 0.85rem; margin-top: 0.25rem; } #trial-form .wpcf7-response-output { margin-top: 1rem; border-radius: 0.75rem; padding: 0.875rem 1rem; background: #ffffff; border: 1px solid var(--border-muted); color: var(--text-primary); } /* When the form gets a state class, color the response box accordingly */ #trial-form .wpcf7 form.invalid ~ .wpcf7-response-output, #trial-form .wpcf7 form.failed ~ .wpcf7-response-output, #trial-form .wpcf7 form.aborted ~ .wpcf7-response-output { background: #fee2e2; border-color: #ef4444; color: #991b1b; } #trial-form .wpcf7 form.sent ~ .wpcf7-response-output { background: #ecfdf5; border-color: #10b981; color: #065f46; } #trial-form .wpcf7 form.spam ~ .wpcf7-response-output, #trial-form .wpcf7 form.unaccepted ~ .wpcf7-response-output { background: #fff7ed; border-color: #f59e0b; color: #7c2d12; } /* Acceptance checkbox spacing */ #trial-form .wpcf7-acceptance .wpcf7-list-item { margin-left: 0; } /* Acceptance (privacy consent) text on white background */ #trial-form .wpcf7-acceptance .wpcf7-list-item-label { color: var(--trial-tx-muted) !important; } #trial-form .wpcf7-acceptance .wpcf7-list-item-label a { color: var(--blue) !important; } /* Mobile/responsive hardening for CF7 form widths */ #trial-form .wpcf7, #trial-form .wpcf7 form, #trial-form .wpcf7-form { width: 100%; } #trial-form .wpcf7 form *, #trial-form .wpcf7-form * { box-sizing: border-box; } #trial-form .wpcf7-form-control-wrap { display: block; width: 100%; min-width: 0; } #trial-form .wpcf7-form-control { width: 100% !important; max-width: 100% !important; display: block; } #trial-form input[type="text"], #trial-form input[type="email"], #trial-form input[type="tel"], #trial-form input[type="date"], #trial-form select, #trial-form textarea { width: 100% !important; max-width: 100% !important; } @media (max-width: 640px) { #trial-form { padding-left: 1rem; padding-right: 1rem; } #trial-form .wpcf7-form-control { font-size: 16px; } } /* ============================== Player messages minor UI ============================== */ #messages .msg-kk { position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 1; background: rgba(0,0,0,0.6); color: #ffffff; font-size: 0.75rem; line-height: 1; padding: 0.2rem 0.45rem; border-radius: 0.35rem; backdrop-filter: saturate(120%) blur(2px); } /* ============================== Pricing Table ============================== */ #pricing .pricing-table-wrapper { overflow-x: auto; background:#fff; border: 2px solid var(--border-muted); border-radius: 0.9rem; padding: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.06); } #pricing .pricing-table { width: 100%; border-collapse: collapse; background: #ffffff; border-radius: 0; overflow: hidden; box-shadow: none; } #pricing .pricing-table thead th { background: linear-gradient(180deg, #0ba7d1, var(--blue)); color: #ffffff; font-weight: 700; text-align: center; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border-muted); } #pricing .pricing-table thead th.col-class { text-align: left; } #pricing .pricing-table tbody th.row-title { text-align: left; font-weight: 700; color: var(--text-primary); background: var(--surface); padding: 1rem 1rem; border-top: 1px solid var(--border-muted); position: relative; } #pricing .pricing-table tbody tr.is-recommended th.row-title { background: linear-gradient(180deg, rgba(255,241,1,0.15), var(--surface)); border-left: 4px solid var(--gold); } #pricing .pricing-table .badge-reco { display: inline-block; margin-left: .5rem; font-size: .75rem; font-weight: 700; color: #111827; background: var(--yellow); padding: .15rem .45rem; border-radius: .4rem; } #pricing .pricing-table tbody .row-sub { font-size: 0.9rem; color: var(--text-muted); margin-top: 0.25rem; } #pricing .pricing-table th, #pricing .pricing-table td { border: 1px solid var(--border-muted); } #pricing .pricing-table td { text-align: center; padding: 1rem 1rem; font-weight: 700; font-size: 1.2rem; color: var(--text-primary); } #pricing .pricing-table tbody tr:nth-child(odd) td { background: #fafafa; } #pricing .pricing-table tbody tr:nth-child(even) td { background: #ffffff; } #pricing .pricing-notes { margin-top: 1.25rem; background: #ffffff; border: 1px solid var(--border-muted); border-radius: 0.75rem; padding: 1rem 1.25rem; color: var(--text-primary); } #pricing .notes-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } #pricing .notes-head i { color: var(--gold); font-size: 1.25rem; } #pricing .notes-title { font-weight: 800; } #pricing .pricing-notes ul { list-style: disc; margin-left: 1.25rem; margin-bottom: 0.5rem; } #pricing .pricing-notes .footnote { font-size: 0.9rem; color: var(--text-muted); } /* Footer menu alignment with header */ #pricing .note-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin-top: .5rem; } #pricing .note-card { background: #fff; border: 1px solid var(--border-muted); border-radius: .75rem; padding: .9rem 1rem; position: relative; box-shadow: 0 6px 16px rgba(0,0,0,.06); } #pricing .note-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--blue)); border-top-left-radius: .75rem; border-top-right-radius: .75rem; } #pricing .note-title { font-weight: 700; color: var(--text-primary); margin-bottom: .4rem; } #pricing .note-price { display: flex; align-items: baseline; gap: .35rem; } #pricing .note-price .currency { color: var(--text-muted); font-weight: 700; } #pricing .note-price .price-amount { font-size: 1.6rem; font-weight: 900; letter-spacing: .02em; } #pricing .note-price .tax { color: var(--text-muted); font-size: .9rem; } @media (max-width: 860px) { #pricing .note-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 640px) { #pricing .note-cards { grid-template-columns: 1fr; } } /* Mobile: transform table to cards */ @media (max-width: 640px) { #pricing .pricing-table thead { display: none; } #pricing .pricing-table, #pricing .pricing-table tbody, #pricing .pricing-table tr, #pricing .pricing-table th, #pricing .pricing-table td { display: block; width: 100%; } #pricing .pricing-table tr { background: #ffffff; border: 1px solid var(--border-muted); border-radius: 0.75rem; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 6px 16px rgba(0,0,0,0.06); } #pricing .pricing-table tbody th.row-title { background: var(--surface); border-left: none; border-top: none; padding: 0.875rem 1rem; } #pricing .pricing-table td { border-left: none; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; font-size: 1.1rem; } #pricing .pricing-table td:nth-child(2)::before { content: '週1'; color: var(--text-muted); font-weight: 600; } #pricing .pricing-table td:nth-child(3)::before { content: '週2'; color: var(--text-muted); font-weight: 600; } #pricing .pricing-table td:nth-child(4)::before { content: '週3'; color: var(--text-muted); font-weight: 600; } } #messages b { font-size:50%; } /* Desktop: allow header menu to wrap to 2 lines and adjust anchor scroll */ @media (min-width: 768px) { #header-menu { flex-wrap: wrap; gap: .5rem 1rem; justify-content: flex-end; } #header-menu a { white-space: normal; } html { scroll-padding-top: 6.5rem; } } /* プライバシーポリシーの文字色を強制的に黒にする */ #privacy-area .wpcf7-list-item-label { color: #333 !important; } :root{ --obf-accent:#0ea5e9; /* アクセント色（ブランド色に置換可） */ --obf-accent-600:#0284c7; --obf-border:#e5e7eb; --obf-text:#111827; --obf-muted:#6b7280; --obf-bg:#f9fafb; } .obf-request .wpcf7-form{color:var(--obf-text);} .obf-request h3{ margin:28px 0 12px; padding-top:16px; border-top:2px solid var(--obf-bg); font-size:1.15rem; } .obf-request .note{ font-size:.9rem; color:var(--obf-muted); background:#f3f4f6; padding:10px 12px; border-left:3px solid var(--obf-accent); border-radius:6px; margin:12px 0; } /* ラベルと基本フィールド */ .obf-request label{display:block; font-weight:600; margin:16px 0 6px;} .obf-request input[type="text"], .obf-request input[type="email"], .obf-request input[type="tel"], .obf-request input[type="date"], .obf-request select, .obf-request textarea{ width:100%; padding:12px 14px; border:1px solid var(--obf-border); border-radius:8px; background:#fff; transition:border-color .2s, box-shadow .2s; } .obf-request textarea{min-height:120px; resize:vertical;} .obf-request input::placeholder, .obf-request textarea::placeholder{color:#9ca3af;} /* フォーカス */ .obf-request input:focus, .obf-request select:focus, .obf-request textarea:focus{ outline:0; border-color:var(--obf-accent); box-shadow:0 0 0 3px rgba(14,165,233,.15); } /* 2カラム化したい時用：必要箇所を

…

で囲む */ .obf-request .two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;} @media (max-width:768px){ .obf-request .two-col{grid-template-columns:1fr;} } /* チェックボックス/ラジオの見やすさ */ .obf-request .wpcf7-list-item{display:block; margin:6px 0;} .obf-request .wpcf7-acceptance label{display:flex; gap:8px; align-items:flex-start; font-weight:500;} .obf-request .class-options .wpcf7-list-item label{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--obf-border); border-radius:10px; background:#fff; } /* 送信ボタン */ .obf-request input[type="submit"]{ background:var(--obf-accent); color:#fff; font-weight:700; padding:12px 20px; border:0; border-radius:8px; cursor:pointer; transition:background-color .2s, transform .02s; width:100%; max-width:320px; margin-top:12px; } .obf-request input[type="submit"]:hover{background:var(--obf-accent-600);} .obf-request input[type="submit"]:active{transform:translateY(1px);} /* バリデーションとメッセージ */ .obf-request .wpcf7-not-valid-tip{color:#dc2626; font-size:.85rem; margin-top:6px;} .obf-request .wpcf7-spinner{margin-left:8px;} .obf-request .wpcf7-response-output{ margin:16px 0 0; padding:12px 14px; border-radius:6px; border:1px solid var(--obf-border); background:#fff; } .obf-request .wpcf7 form.invalid .wpcf7-response-output{ border-color:#dc2626; color:#b91c1c; background:#fef2f2; } .obf-request .wpcf7 form.sent .wpcf7-response-output{ border-color:#16a34a; color:#166534; background:#f0fdf4; }