:root { --pico-font-family: Inter, ui-sans-serif, system-ui, sans-serif; --ink: #201b2d; --muted: #746d82; --violet: #7257dd; --lavender: #eeeaff; --yellow: #f6c85f; }
* { box-sizing: border-box; } body { color: var(--ink); background: #fcfbff; } .container { width: min(1080px, calc(100% - 32px)); margin-inline: auto; }
.site-header { padding: 18px 0; border-bottom: 1px solid #eeeaf4; background: #fff; } nav.container { display:flex; justify-content:space-between; align-items:center; } .brand { color:var(--ink); font-size:1.25rem; font-weight:800; text-decoration:none; letter-spacing:-.04em; } .brand span:last-child { color:var(--violet); } .brand-mark { display:inline-grid; place-items:center; margin-right:6px; width:30px; height:30px; border-radius:9px; color:#fff !important; background:var(--violet); font-size:1rem; }
.hero { max-width:590px; padding:60px 0 34px; } .eyebrow { color:var(--violet); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; } h1 { font-size:clamp(2.5rem, 8vw, 4.7rem); letter-spacing:-.07em; line-height:.97; margin:0 0 18px; } h1 em { color:var(--violet); font-style:normal; } .intro { color:var(--muted); font-size:1.05rem; max-width:450px; }
.ad-slot { visibility:hidden; } .ad-top { margin:3px 0 14px; border-top:1px solid #f1eef7; border-bottom:1px solid #f1eef7; } .ad-bottom { margin:42px auto; border-block:1px solid #f1eef7; max-width:728px; min-height:70px; } .feed-layout { display:grid; grid-template-columns:120px minmax(0, 590px) 120px; gap:24px; justify-content:center; align-items:start; } .ad-side { min-height:250px; position:sticky; top:20px; border:1px dashed #e5e0ee; } .feed-column { min-width:0; } .confession-card { padding:clamp(25px, 6vw, 48px); min-height:300px; display:flex; flex-direction:column; justify-content:center; border:1px solid #ebe7f3; border-radius:20px; background:#fff; box-shadow:0 15px 45px #31245c0d; } .card-meta { color:#9991a7; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; } .anonymous-dot { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#a797ef; } blockquote { border:0; margin:25px 0 30px; padding:0; font-size:clamp(1.4rem, 3vw, 2rem); font-weight:600; letter-spacing:-.04em; line-height:1.25; } .card-footer { color:#a39aaa; font-size:.8rem; } .ad-inline { min-height:48px; }
.reaction-panel { padding:9px 0 0; } .reaction-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } button.reaction { padding:11px 4px 8px; border:1px solid #e8e3f0; border-radius:12px; background:#fff; color:var(--ink); } .reaction span { display:block; font-size:1.45rem; transition:transform .2s; } .reaction small { display:block; color:#847c92; font-size:.66rem; margin-top:3px; } .reaction:hover span, .reaction.selected span { transform:scale(1.18); } .reaction.selected { border-color:#b8a9f4; background:var(--lavender); } .vote-row { display:flex; justify-content:center; gap:22px; margin:11px 0; } .vote-button { border:0; padding:3px 9px; color:#91899e; background:transparent; font-size:1.15rem; } .vote-button span { font-size:.7rem; vertical-align:2px; }
.stats { padding:17px 20px; border-radius:14px; background:#f5f2ff; } .stats-heading { display:flex; justify-content:space-between; margin-bottom:10px; font-size:.78rem; } .stats-heading span { color:#8d849a; } .bar-row { display:flex; align-items:center; gap:8px; margin:7px 0; font-size:.75rem; } .bar-track { height:7px; flex:1; overflow:hidden; border-radius:9px; background:#e5defb; } .bar-track i { display:block; height:100%; border-radius:9px; background:var(--violet); transition:width .5s ease; } .bar-row b { width:30px; color:#766b8c; font-size:.7rem; text-align:right; } .next-button { width:100%; margin-top:14px; border-radius:999px; background:var(--ink); border:0; font-size:.86rem; } .next-button span { margin-right:6px; }
.submit-section { display:grid; grid-template-columns:1fr 1.1fr; gap:46px; align-items:center; margin:80px auto 50px; max-width:800px; padding:35px; border-radius:20px; background:#f1eeff; } .submit-section h2 { margin:0 0 9px; letter-spacing:-.04em; } .submit-section p:not(.eyebrow) { color:#777085; font-size:.9rem; } .submit-section form { margin:0; } label { font-size:.8rem; font-weight:700; } .consent-label { display:block; margin:4px 0 12px; color:#777085; font-size:.72rem; font-weight:400; line-height:1.45; } .consent-label input { margin-right:5px; } textarea { min-height:110px; margin:7px 0 8px; border:1px solid #ddd5fb; background:#fff; resize:vertical; } .form-row { display:flex; justify-content:space-between; align-items:center; } .form-row small { color:#8b8299; } .form-row button { margin:0; padding:9px 14px; font-size:.78rem; } .success { color:#4d3b9e !important; font-weight:700; } .loading { padding:100px 20px; color:var(--muted); text-align:center; } .spinner { display:inline-block; width:15px; height:15px; margin-right:7px; border:2px solid #ddd5fb; border-top-color:var(--violet); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; } @keyframes spin { to { transform:rotate(360deg); } } .error-message { padding:20px; color:#a64757; text-align:center; } [x-cloak] { display:none !important; } .footer { display:flex; justify-content:space-between; gap:15px; padding:22px 0 35px; color:#a19aaa; font-size:.72rem; }
@media (max-width:760px) { .container { width:min(100% - 24px, 590px); } .hero { padding:42px 0 28px; } .feed-layout { display:block; } .ad-side { display:none; } .submit-section { display:block; margin-top:60px; padding:25px; } .submit-section > div { margin-bottom:25px; } .footer { display:block; text-align:center; } .footer span { display:block; margin:5px; } }