Spaces:
Runtime error
Runtime error
| :root{ | |
| --bg:#F7F4ED; | |
| --surface:#FFFFFF; | |
| --surface-2:#F1EAD9; | |
| --ink:#221F1C; | |
| --ink-soft:#7A6E5F; | |
| --jade:#2F6F5E; | |
| --jade-soft:#E1EDE9; | |
| --amber:#D98C3D; | |
| --amber-soft:#FAEBD8; | |
| --line:#E7E0D3; | |
| --radius:14px; | |
| --serif:'Fraunces', serif; | |
| --sans:'Inter', sans-serif; | |
| --mm:'Noto Sans Myanmar', sans-serif; | |
| --maxw:920px; | |
| } | |
| *{ box-sizing:border-box; } | |
| html{ scroll-behavior:smooth; } | |
| body{ | |
| margin:0; | |
| background:var(--bg); | |
| color:var(--ink); | |
| font-family:var(--sans); | |
| line-height:1.65; | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| a{ color:var(--jade); text-decoration:none; } | |
| a:hover{ text-decoration:underline; } | |
| img{ max-width:100%; } | |
| .wrap{ | |
| max-width:var(--maxw); | |
| margin:0 auto; | |
| padding:0 20px; | |
| } | |
| /* ---------- Ad slots ---------- */ | |
| .ad-slot{ | |
| margin:36px auto; | |
| padding:14px 0; | |
| text-align:center; | |
| max-width:var(--maxw); | |
| } | |
| .ad-label{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-size:11px; | |
| letter-spacing:.14em; | |
| text-transform:uppercase; | |
| color:var(--ink-soft); | |
| margin-bottom:8px; | |
| } | |
| /* ---------- Nav ---------- */ | |
| .nav{ | |
| border-bottom:1px solid var(--line); | |
| background:var(--surface); | |
| } | |
| .nav .wrap{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:space-between; | |
| padding:16px 20px; | |
| flex-wrap:wrap; | |
| gap:10px; | |
| } | |
| .brand{ | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| font-family:var(--serif); | |
| font-weight:700; | |
| font-size:18px; | |
| color:var(--ink); | |
| } | |
| .brand .dot{ | |
| width:10px; height:10px; | |
| border-radius:50%; | |
| background:linear-gradient(135deg, var(--jade), var(--amber)); | |
| display:inline-block; | |
| } | |
| .nav-links{ | |
| display:flex; | |
| gap:18px; | |
| flex-wrap:wrap; | |
| font-size:14px; | |
| } | |
| .nav-links a{ color:var(--ink-soft); } | |
| .nav-links a:hover{ color:var(--jade); } | |
| .nav-links a.active{ color:var(--jade); font-weight:600; } | |
| /* ---------- Hero ---------- */ | |
| .hero{ | |
| padding:36px 0 20px; | |
| text-align:center; | |
| } | |
| .eyebrow{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-weight:500; | |
| font-size:13px; | |
| letter-spacing:.22em; | |
| text-transform:uppercase; | |
| color:var(--jade); | |
| margin:0 0 10px; | |
| } | |
| h1{ | |
| font-family:var(--serif); | |
| font-weight:700; | |
| font-size:clamp(26px,8vw,44px); | |
| line-height:1.2; | |
| margin:0 0 12px; | |
| letter-spacing:-.01em; | |
| } | |
| .hero p.lead{ | |
| color:var(--ink-soft); | |
| font-size:15px; | |
| line-height:1.6; | |
| max-width:520px; | |
| margin:0 auto; | |
| } | |
| /* ---------- Signature waveform ---------- */ | |
| .wave{ | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| gap:4px; | |
| height:28px; | |
| margin:16px auto 0; | |
| } | |
| .wave .bar{ | |
| width:4px; | |
| border-radius:3px; | |
| background:linear-gradient(180deg, var(--jade), var(--amber)); | |
| height:10px; | |
| animation:breathe 2.6s ease-in-out infinite; | |
| transition:height .12s ease; | |
| } | |
| @keyframes breathe{ | |
| 0%, 100% { height:8px; opacity:.55; } | |
| 50% { height:30px; opacity:1; } | |
| } | |
| .wave.is-active .bar{ animation:none; } | |
| /* ---------- Sections ---------- */ | |
| section{ padding:36px 0; } | |
| section.tight{ padding:18px 0; } | |
| .section-head{ | |
| text-align:center; | |
| margin-bottom:28px; | |
| } | |
| .section-head .eyebrow{ margin-bottom:8px; } | |
| h2{ | |
| font-family:var(--serif); | |
| font-weight:700; | |
| font-size:clamp(24px,5vw,32px); | |
| margin:0 0 8px; | |
| } | |
| .section-head p{ | |
| color:var(--ink-soft); | |
| font-size:15px; | |
| max-width:520px; | |
| margin:0 auto; | |
| } | |
| /* ---------- Tool panel ---------- */ | |
| .panel{ | |
| background:var(--surface); | |
| border:1px solid var(--line); | |
| border-radius:var(--radius); | |
| padding:22px; | |
| margin-top:18px; | |
| box-shadow:0 1px 2px rgba(34,31,28,.03); | |
| } | |
| .panel h3{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-weight:500; | |
| font-size:13px; | |
| letter-spacing:.16em; | |
| text-transform:uppercase; | |
| color:var(--ink-soft); | |
| margin:0 0 14px; | |
| } | |
| textarea{ | |
| width:100%; | |
| min-height:170px; | |
| resize:vertical; | |
| border:1px solid var(--line); | |
| border-radius:10px; | |
| background: | |
| repeating-linear-gradient( | |
| to bottom, transparent, transparent 35px, | |
| var(--surface-2) 35px, var(--surface-2) 36px | |
| ), | |
| var(--surface); | |
| padding:14px 16px; | |
| font-family:var(--mm); | |
| font-size:16px; | |
| line-height:36px; | |
| color:var(--ink); | |
| outline:none; | |
| } | |
| textarea:focus{ border-color:var(--jade); } | |
| textarea::placeholder{ color:var(--ink-soft); font-family:var(--sans); } | |
| .char-count{ | |
| text-align:right; | |
| font-size:12px; | |
| color:var(--ink-soft); | |
| margin-top:6px; | |
| font-family:var(--serif); | |
| } | |
| .char-count.over{ color:#C0492B; } | |
| /* ---------- Voice cards ---------- */ | |
| .voices{ | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:12px; | |
| margin-top:8px; | |
| } | |
| .voice-card{ | |
| border:1px solid var(--line); | |
| border-radius:10px; | |
| padding:14px; | |
| cursor:pointer; | |
| background:var(--surface); | |
| transition:border-color .15s ease, background .15s ease; | |
| position:relative; | |
| } | |
| .voice-card input{ | |
| position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; | |
| } | |
| .voice-card .name{ font-family:var(--mm); font-weight:600; font-size:15px; } | |
| .voice-card .role{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-size:12px; | |
| letter-spacing:.08em; | |
| color:var(--ink-soft); | |
| text-transform:uppercase; | |
| margin-top:4px; | |
| } | |
| .voice-card.selected{ border-color:var(--jade); background:var(--jade-soft); } | |
| .voice-card.selected .role{ color:var(--jade); } | |
| /* ---------- Sliders ---------- */ | |
| .controls{ | |
| display:grid; | |
| grid-template-columns:1fr 1fr; | |
| gap:16px; | |
| margin-top:18px; | |
| } | |
| .control label{ | |
| display:flex; | |
| justify-content:space-between; | |
| font-size:13px; | |
| color:var(--ink-soft); | |
| margin-bottom:6px; | |
| font-family:var(--serif); | |
| font-style:italic; | |
| letter-spacing:.04em; | |
| } | |
| .control label span.val{ | |
| font-family:var(--sans); | |
| font-style:normal; | |
| color:var(--ink); | |
| font-weight:600; | |
| } | |
| input[type="range"]{ width:100%; accent-color:var(--jade); } | |
| @media (max-width:480px){ | |
| .controls{ grid-template-columns:1fr; } | |
| .voices{ grid-template-columns:1fr; } | |
| } | |
| /* ---------- Buttons ---------- */ | |
| .actions{ margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; } | |
| button, .btn{ | |
| font-family:var(--sans); | |
| font-size:15px; | |
| font-weight:600; | |
| border:none; | |
| border-radius:10px; | |
| padding:13px 24px; | |
| cursor:pointer; | |
| transition:opacity .15s ease, transform .05s ease; | |
| } | |
| button:active{ transform:scale(.98); } | |
| button:disabled{ opacity:.55; cursor:wait; } | |
| .btn-primary{ background:var(--amber); color:#fff; flex:1; } | |
| .btn-primary:hover:not(:disabled){ opacity:.92; } | |
| .btn-secondary{ | |
| background:var(--surface-2); | |
| color:var(--ink); | |
| border:1px solid var(--line); | |
| text-decoration:none; | |
| display:inline-block; | |
| text-align:center; | |
| } | |
| /* ---------- Output ---------- */ | |
| .output{ margin-top:18px; display:none; } | |
| .output.visible{ display:block; } | |
| .output audio{ width:100%; margin-top:14px; } | |
| .status{ font-size:13px; color:var(--ink-soft); margin-top:10px; min-height:18px; } | |
| .status.error{ color:#C0492B; } | |
| /* ---------- Feature / step grids ---------- */ | |
| .grid{ | |
| display:grid; | |
| grid-template-columns:repeat(3, 1fr); | |
| gap:16px; | |
| } | |
| @media (max-width:720px){ | |
| .grid{ grid-template-columns:1fr 1fr; } | |
| } | |
| @media (max-width:480px){ | |
| .grid{ grid-template-columns:1fr; } | |
| } | |
| .card{ | |
| background:var(--surface); | |
| border:1px solid var(--line); | |
| border-radius:var(--radius); | |
| padding:20px; | |
| } | |
| .card .index{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-size:13px; | |
| color:var(--jade); | |
| margin-bottom:6px; | |
| } | |
| .card h3{ | |
| font-family:var(--serif); | |
| font-weight:600; | |
| font-size:17px; | |
| margin:0 0 6px; | |
| text-transform:none; | |
| letter-spacing:0; | |
| color:var(--ink); | |
| } | |
| .card p{ | |
| font-size:14px; | |
| color:var(--ink-soft); | |
| margin:0; | |
| } | |
| /* ---------- FAQ ---------- */ | |
| .faq-item{ | |
| border-bottom:1px solid var(--line); | |
| padding:16px 0; | |
| } | |
| .faq-item summary{ | |
| font-family:var(--serif); | |
| font-weight:600; | |
| font-size:16px; | |
| cursor:pointer; | |
| list-style:none; | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| gap:12px; | |
| } | |
| .faq-item summary::-webkit-details-marker{ display:none; } | |
| .faq-item summary::after{ | |
| content:"+"; | |
| font-size:20px; | |
| color:var(--jade); | |
| flex-shrink:0; | |
| } | |
| .faq-item[open] summary::after{ content:"\2212"; } | |
| .faq-item p{ | |
| color:var(--ink-soft); | |
| font-size:14px; | |
| margin:10px 0 0; | |
| } | |
| /* ---------- Prose pages (about / privacy / terms) ---------- */ | |
| .prose{ padding:44px 0 60px; } | |
| .prose h1{ text-align:left; margin-bottom:6px; } | |
| .prose .updated{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-size:13px; | |
| color:var(--ink-soft); | |
| margin-bottom:28px; | |
| } | |
| .prose h2{ | |
| font-size:20px; | |
| margin-top:32px; | |
| } | |
| .prose p, .prose li{ | |
| color:var(--ink-soft); | |
| font-size:15px; | |
| } | |
| .prose ul{ padding-left:20px; } | |
| .prose a{ color:var(--jade); } | |
| /* ---------- Footer ---------- */ | |
| footer{ | |
| border-top:1px solid var(--line); | |
| margin-top:40px; | |
| padding:32px 0; | |
| background:var(--surface); | |
| } | |
| .footer-grid{ | |
| display:flex; | |
| justify-content:space-between; | |
| flex-wrap:wrap; | |
| gap:24px; | |
| } | |
| .footer-col h4{ | |
| font-family:var(--serif); | |
| font-style:italic; | |
| font-weight:500; | |
| font-size:12px; | |
| letter-spacing:.14em; | |
| text-transform:uppercase; | |
| color:var(--ink-soft); | |
| margin:0 0 10px; | |
| } | |
| .footer-col a{ | |
| display:block; | |
| font-size:14px; | |
| color:var(--ink); | |
| margin-bottom:6px; | |
| } | |
| .footer-col a:hover{ color:var(--jade); } | |
| .footer-bottom{ | |
| margin-top:24px; | |
| padding-top:16px; | |
| border-top:1px solid var(--line); | |
| font-size:12px; | |
| color:var(--ink-soft); | |
| text-align:center; | |
| } | |