:root {
--bg: #f7f1e8;
--bg-deep: #e6dcc9;
--card: rgba(255, 251, 245, 0.82);
--card-strong: #fffdf9;
--ink: #1f2421;
--muted: #5f685f;
--line: rgba(31, 36, 33, 0.12);
--accent: #da5a2a;
--accent-deep: #b6431c;
--accent-soft: #ffe0d3;
--cool: #1f7a8c;
--shadow: 0 24px 60px rgba(60, 48, 34, 0.12);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: "Trebuchet MS", "Gill Sans", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at top left, rgba(218, 90, 42, 0.18), transparent 28rem),
radial-gradient(circle at top right, rgba(31, 122, 140, 0.14), transparent 24rem),
linear-gradient(180deg, #fbf7f1 0%, var(--bg) 42%, var(--bg-deep) 100%);
position: relative;
}
.backdrop {
position: fixed;
inset: auto;
border-radius: 999px;
filter: blur(10px);
opacity: 0.45;
pointer-events: none;
}
.backdrop-one {
width: 18rem;
height: 18rem;
top: 6rem;
right: 5vw;
background: rgba(218, 90, 42, 0.16);
}
.backdrop-two {
width: 26rem;
height: 26rem;
bottom: -8rem;
left: -6rem;
background: rgba(31, 122, 140, 0.12);
}
.topbar {
position: sticky;
top: 0;
z-index: 10;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem;
backdrop-filter: blur(14px);
background: rgba(247, 241, 232, 0.82);
border-bottom: 1px solid var(--line);
}
.brand-link,
.identity,
.ghost-button,
.primary-button {
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.brand-link {
display: inline-flex;
align-items: center;
gap: 0.9rem;
color: inherit;
text-decoration: none;
}
.brand-link strong {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15rem;
}
.brand-link small {
display: block;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.brand-mark {
display: inline-grid;
place-items: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 1rem;
background: linear-gradient(135deg, var(--accent) 0%, #f08e4f 100%);
color: white;
font-weight: 700;
box-shadow: 0 18px 34px rgba(218, 90, 42, 0.22);
}
.topbar-nav {
display: flex;
align-items: center;
gap: 0.8rem;
flex-wrap: wrap;
}
.layout {
width: min(1180px, calc(100vw - 2rem));
margin: 1.4rem auto 3rem;
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 1.2rem;
}
.panel {
background: var(--card);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
}
.sidebar,
.content {
border-radius: 1.6rem;
overflow: hidden;
}
.sidebar {
padding: 1.2rem;
align-self: start;
}
.content {
padding: 1.2rem;
min-height: 70vh;
}
.stack {
display: grid;
gap: 1rem;
}
.hero-card,
.auth-card,
.info-card,
.composer-card,
.feed-shell,
.profile-card,
.post-card,
.empty-state,
.error-banner {
background: var(--card-strong);
border: 1px solid var(--line);
border-radius: 1.2rem;
}
.hero-card,
.auth-card,
.info-card,
.composer-card,
.feed-shell,
.profile-card,
.empty-state,
.error-banner {
padding: 1.1rem;
}
.eyebrow {
margin: 0 0 0.35rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cool);
font-size: 0.72rem;
font-weight: 700;
}
h2,
h3,
.profile-card h2 {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.1;
}
.muted {
color: var(--muted);
}
.toggle-row,
.button-row,
.composer-actions,
.feed-top,
.profile-top,
.post-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.toggle-button,
.ghost-button,
.primary-button {
appearance: none;
border: 0;
border-radius: 999px;
padding: 0.72rem 1rem;
font: inherit;
cursor: pointer;
}
.toggle-button,
.ghost-button {
background: #f1e7d7;
color: var(--ink);
}
.toggle-button.active,
.primary-button {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
color: white;
box-shadow: 0 18px 28px rgba(218, 90, 42, 0.18);
}
.ghost-button:hover,
.primary-button:hover,
.toggle-button:hover,
.brand-link:hover,
.identity:hover {
transform: translateY(-1px);
}
.ghost-button:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
.wide {
width: 100%;
text-align: center;
text-decoration: none;
}
.session-pill {
padding: 0.55rem 0.85rem;
border-radius: 999px;
background: rgba(31, 122, 140, 0.12);
color: var(--cool);
font-size: 0.92rem;
}
.field {
display: grid;
gap: 0.35rem;
}
.field span {
font-size: 0.88rem;
color: var(--muted);
}
input,
textarea {
width: 100%;
border: 1px solid rgba(31, 36, 33, 0.14);
border-radius: 1rem;
padding: 0.82rem 0.95rem;
font: inherit;
background: #fffdfa;
color: var(--ink);
}
textarea {
resize: vertical;
}
input:focus,
textarea:focus {
outline: 2px solid rgba(31, 122, 140, 0.24);
border-color: rgba(31, 122, 140, 0.28);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.8rem;
margin-top: 0.9rem;
}
.stats-grid div {
padding: 0.85rem;
border-radius: 1rem;
background: linear-gradient(180deg, rgba(255, 224, 211, 0.52), rgba(255, 255, 255, 0.9));
border: 1px solid rgba(218, 90, 42, 0.14);
}
.stats-grid strong,
.sequence {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.05rem;
}
.stats-grid span,
.sequence {
color: var(--muted);
font-size: 0.84rem;
}
.info-list {
margin: 0;
padding-left: 1.1rem;
color: var(--muted);
}
.info-list li + li {
margin-top: 0.45rem;
}
.composer-form {
display: grid;
gap: 0.8rem;
}
.composer-actions {
color: var(--muted);
font-size: 0.88rem;
}
.feed-shell {
display: grid;
gap: 0.9rem;
}
.post-card {
padding: 1rem;
}
.identity {
display: inline-grid;
gap: 0.12rem;
text-decoration: none;
color: inherit;
}
.identity span {
color: var(--muted);
font-size: 0.88rem;
}
.post-body {
margin: 0.8rem 0 0;
white-space: pre-wrap;
line-height: 1.55;
}
.empty-state,
.error-banner {
text-align: center;
}
.error-banner {
background: #fff3ec;
border-color: rgba(218, 90, 42, 0.24);
}
@media (max-width: 960px) {
.layout {
grid-template-columns: 1fr;
}
.topbar {
align-items: flex-start;
}
}
@media (max-width: 640px) {
.layout {
width: min(100vw - 1rem, 100%);
margin-top: 0.8rem;
}
.topbar {
padding: 0.9rem;
}
.sidebar,
.content {
padding: 0.95rem;
border-radius: 1.2rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
}