* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.civilization-stream {
display: grid;
gap: 28px;
}
.civilization-card {
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: center;
padding:
clamp(
30px,
6vw,
70px
);
border:
1px solid
var(--border);
border-radius: 34px;
background:
rgba(255,255,255,.72);
box-shadow:
0 20px 70px
rgba(70,100,160,.08);
transition:
transform .25s ease,
box-shadow .25s ease;
}
.civilization-card:hover {
transform:
translateY(-3px);
box-shadow:
0 28px 90px
rgba(70,100,160,.13);
}
.civilization-card-head {
display: flex;
justify-content:
space-between;
gap: 14px;
margin-bottom: 28px;
}
.civilization-card-head span {
color: var(--blue);
font-size: 10px;
font-weight: 900;
letter-spacing:
.13em;
}
.civilization-card-head strong {
color: var(--muted);
font-size: 10px;
text-transform:
uppercase;
}
.civilization-card h3 {
max-width: 850px;
margin:
0 0 20px;
font-size:
clamp(
30px,
5vw,
56px
);
line-height:
1.08;
letter-spacing:
-.035em;
}
.civilization-card p {
max-width: 820px;
margin: 0;
color: var(--muted);
font-size: 17px;
line-height: 1.75;
}
.civilization-status {
align-self: flex-start;
margin-top: 25px;
padding:
7px 11px;
border-radius:
999px;
background:
rgba(79,99,255,.07);
color: var(--blue);
font-size: 10px;
font-weight: 900;
text-transform:
uppercase;
}
.guided-principles {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 18px;
}
.guided-principles span {
padding:
6px 9px;
border-radius:
999px;
background:
rgba(198,146,39,.08);
color: var(--gold);
font-size: 9px;
font-weight: 850;
}
.modal-panel {
position: relative;
width:
min(620px,100%);
max-height: 90vh;
overflow-y: auto;
padding: 30px;
border:
1px solid
rgba(31,179,255,.25);
border-radius: 30px;
background:
rgba(247,251,255,.97);
color: #0f172a;
box-shadow:
0 25px 80px
rgba(60,90,140,.20);
}
:root {
--bg: #f7fbff;
--bg-soft: #edf2fb;
--panel: rgba(255,255,255,.68);
--panel-light: rgba(255,255,255,.82);
--border: rgba(150,175,210,.22);
--border-strong: rgba(31,179,255,.35);
--text: #0f172a;
--muted: #52627e;
--blue: #4f63ff;
--cyan: #1fb3ff;
--gold: #c69227;
--green: #15966d;
--violet: #805ad5;
--danger: #c94b4b;
--radius: 26px;
}
body {
margin: 0;
min-height: 100vh;
font-family:
Inter,
Arial,
sans-serif;
color: var(--text);
background:
radial-gradient(
circle at 20% 10%,
rgba(120,120,255,.10),
transparent 28%
),
radial-gradient(
circle at 85% 20%,
rgba(0,194,255,.08),
transparent 30%
),
#f7fbff;
overflow-x: hidden;
}
/* =====================================================
LINKS
===================================================== */
a {
color: inherit;
}
/* =====================================================
TOPBAR
===================================================== */
.topbar {
position: sticky;
top: 0;
z-index: 100;
min-height: 76px;
padding:
12px
max(4vw,22px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
background: rgba(247,251,255,.88);
border-bottom:
1px solid
rgba(15,23,42,.08);
backdrop-filter: blur(20px);
}
.brand {
display:
flex;
align-items:
center;
gap:
12px;
text-decoration:
none;
}
.brand-symbol {
width:
46px;
height:
46px;
display:
grid;
place-items:
center;
border-radius:
16px;
background:
linear-gradient(
135deg,
#74b9ff,
#66e0d2
);
color:
#06101d;
font-size:
21px;
font-weight:
950;
}
.brand strong {
display:
block;
font-size:
16px;
}
.brand small {
display:
block;
margin-top:
2px;
color:
var(--muted);
font-size:
11px;
}
.main-nav {
display:
flex;
align-items:
center;
gap:
8px;
}
.main-nav a {
padding:
10px
14px;
border-radius:
999px;
color:
var(--muted);
text-decoration:
none;
font-size:
13px;
font-weight:
750;
}
.main-nav a:hover,
.main-nav a.active {
color:
var(--text);
background:
rgba(
255,
255,
255,
.06
);
}
.session-zone {
display:
flex;
align-items:
center;
gap:
10px;
}
.session-state {
padding:
9px
12px;
border:
1px solid
var(--border);
border-radius:
999px;
color:
var(--muted);
font-size:
12px;
}
.session-state.connected {
color:
var(--green);
border-color:
rgba(
128,
218,
176,
.3
);
}
/* =====================================================
PAGE
===================================================== */
.page-shell {
width:
min(
1240px,
92%
);
margin:
0 auto;
padding:
58px
0
100px;
}
section {
margin-bottom:
90px;
}
/* =====================================================
HERO
===================================================== */
.hero {
min-height:
620px;
display:
grid;
grid-template-columns:
minmax(0, 1.25fr)
minmax(320px, .75fr);
gap:
34px;
align-items:
center;
}
.eyebrow {
display:
inline-flex;
padding:
9px
14px;
margin-bottom:
22px;
border:
1px solid
rgba(
120,
183,
255,
.25
);
border-radius:
999px;
color:
var(--blue);
background:
rgba(
120,
183,
255,
.06
);
font-size:
11px;
font-weight:
850;
letter-spacing:
.12em;
}
.hero h1 {
max-width:
800px;
margin:
0;
font-size:
clamp(
48px,
7vw,
86px
);
line-height:
.96;
letter-spacing:
-.055em;
}
.hero h1 span {
display:
block;
margin-top:
12px;
background:
linear-gradient(
90deg,
var(--blue),
var(--cyan)
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.hero-text {
max-width:
720px;
margin:
28px
0;
color:
#b2c2d5;
font-size:
19px;
line-height:
1.75;
}
.principles {
display:
flex;
flex-wrap:
wrap;
gap:
8px;
}
.principles span {
padding:
8px
12px;
border:
1px solid
var(--border);
border-radius:
999px;
color:
var(--muted);
font-size:
12px;
}
.hero-actions {
display:
flex;
flex-wrap:
wrap;
gap:
12px;
margin-top:
30px;
}
/* =====================================================
BUTTONS
===================================================== */
button,
.primary-button,
.secondary-button,
.ghost-button {
border:
0;
border-radius:
999px;
padding:
13px
19px;
font-family:
inherit;
font-weight:
850;
cursor:
pointer;
text-decoration:
none;
transition:
transform
.15s ease,
opacity
.15s ease,
border-color
.15s ease;
}
button:hover,
.primary-button:hover,
.secondary-button:hover {
transform:
translateY(-1px);
}
button:disabled {
cursor:
not-allowed;
opacity:
.45;
}
.primary-button {
background:
linear-gradient(
135deg,
#7abaff,
#61dfd2
);
color:
#06111d;
}
.secondary-button {
color:
var(--text);
background:
rgba(
255,
255,
255,
.055
);
border:
1px solid
var(--border);
}
.ghost-button {
color:
var(--muted);
background:
transparent;
border:
1px solid
var(--border);
}
/* =====================================================
COMPASS
===================================================== */
.compass-card {
padding: 30px;
border:
1px solid
rgba(31,179,255,.25);
border-radius: 34px;
background:
rgba(255,255,255,.72);
backdrop-filter:
blur(16px);
box-shadow:
0 20px 60px
rgba(90,120,180,.10);
}
.compass-label {
display:
block;
margin-bottom:
22px;
color:
var(--muted);
font-size:
12px;
letter-spacing:
.1em;
text-transform:
uppercase;
}
.compass-center {
width:
160px;
height:
160px;
margin:
15px auto
28px;
display:
grid;
place-items:
center;
border:
1px solid
rgba(
110,
231,
231,
.28
);
border-radius:
50%;
color:
var(--cyan);
background:
radial-gradient(
circle,
rgba(
110,
231,
231,
.13
),
transparent 68%
);
box-shadow:
0 0 80px
rgba(
110,
231,
231,
.08
);
font-size:
12px;
font-weight:
900;
letter-spacing:
.1em;
}
.compass-grid {
display:
grid;
grid-template-columns:
1fr
1fr;
gap:
10px;
}
.compass-grid div {
padding:
15px;
border:
1px solid
var(--border);
border-radius:
18px;
background:
rgba(
255,
255,
255,
.025
);
}
.compass-grid strong,
.compass-grid span {
display:
block;
}
.compass-grid strong {
margin-bottom:
5px;
font-size:
13px;
}
.compass-grid span {
color:
var(--muted);
font-size:
11px;
}
/* =====================================================
SECTION HEADING
===================================================== */
.section-heading {
display:
flex;
gap:
20px;
align-items:
flex-start;
margin-bottom:
28px;
}
.section-number {
color:
var(--blue);
font-size:
12px;
font-weight:
900;
letter-spacing:
.1em;
}
.section-heading h2 {
margin:
0
0
8px;
font-size:
clamp(
28px,
4vw,
44px
);
letter-spacing:
-.035em;
}
.section-heading p {
margin:
0;
color:
var(--muted);
font-size:
15px;
}
/* =====================================================
AUTH
===================================================== */
.auth-section.authenticated {
display:
none;
}
.auth-card {
display:
grid;
grid-template-columns:
1fr
1fr
auto
auto;
gap:
10px;
padding:
18px;
border:
1px solid
var(--border);
border-radius:
var(--radius);
background:
var(--panel);
}
.auth-status {
grid-column:
1 / -1;
min-height:
20px;
color:
var(--muted);
font-size:
13px;
}
/* =====================================================
INPUTS
===================================================== */
input,
textarea,
select {
width: 100%;
padding: 15px 16px;
border:
1px solid
#d7e1ef;
border-radius: 16px;
outline: none;
color: #0f172a;
background:
rgba(255,255,255,.90);
font-family: inherit;
font-size: 15px;
}
input::placeholder,
textarea::placeholder {
color: #70829c;
}
select option {
color: #0f172a;
background: white;
}
input:focus,
textarea:focus,
select:focus {
border-color:
rgba(
120,
183,
255,
.55
);
}
input::placeholder,
textarea::placeholder {
color:
#647b92;
}
select option {
color:
white;
background:
#0c1829;
}
/* =====================================================
KNOWLEDGE CHAIN
===================================================== */
.knowledge-chain {
display:
grid;
grid-template-columns:
repeat(
9,
auto
);
gap:
8px;
align-items:
center;
overflow-x:
auto;
padding-bottom:
12px;
}
.knowledge-chain > div:not(
.chain-arrow
) {
min-width:
175px;
padding:
18px;
border:
1px solid
var(--border);
border-radius:
20px;
background:
var(--panel);
}
.knowledge-chain strong,
.knowledge-chain span {
display:
block;
}
.knowledge-chain strong {
margin-bottom:
7px;
}
.knowledge-chain span {
color:
var(--muted);
font-size:
12px;
line-height:
1.5;
}
.chain-arrow {
color:
var(--blue);
}
/* =====================================================
CREATE QUESTION
===================================================== */
.creator-panel {
max-width:
850px;
padding:
28px;
border:
1px solid
var(--border);
border-radius:
30px;
background:
var(--panel);
}
.creator-panel label {
display:
block;
margin:
18px
0
7px;
color:
#aec2d7;
font-size:
12px;
font-weight:
800;
}
.creator-panel label:first-child {
margin-top:
0;
}
.creator-actions {
margin-top:
22px;
}
.form-status {
min-height:
22px;
margin-top:
14px;
color:
var(--muted);
font-size:
13px;
}
.form-status.success {
color:
var(--green);
}
/* =====================================================
HOUSES
===================================================== */
.houses-grid {
display:
grid;
grid-template-columns:
repeat(
3,
minmax(
0,
1fr
)
);
gap:
16px;
}
.house-card {
min-height:
245px;
padding:
25px;
display:
flex;
flex-direction:
column;
border:
1px solid
var(--border);
border-radius:
26px;
background:
var(--panel);
}
.house-card:hover {
border-color:
var(--border-strong);
}
.house-kind {
align-self:
flex-start;
margin-bottom:
22px;
padding:
6px
9px;
border-radius:
999px;
color:
var(--cyan);
background:
rgba(
110,
231,
231,
.07
);
font-size:
10px;
font-weight:
850;
text-transform:
uppercase;
}
.house-card h3 {
margin:
0
0
10px;
font-size:
20px;
}
.house-card p {
flex:
1;
margin:
0
0
22px;
color:
var(--muted);
font-size:
13px;
line-height:
1.6;
}
.house-explore {
align-self:
flex-start;
padding:
9px
13px;
color:
var(--text);
background:
rgba(
255,
255,
255,
.045
);
border:
1px solid
var(--border);
}
/* =====================================================
QUESTIONS
===================================================== */
.question-tools {
display:
grid;
grid-template-columns:
1fr
220px;
gap:
10px;
margin-bottom:
20px;
}
.questions-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
gap:
16px;
}
.question-card {
min-height:
250px;
padding:
25px;
display:
flex;
flex-direction:
column;
border:
1px solid
var(--border);
border-radius:
26px;
background:
linear-gradient(
145deg,
rgba(
19,
37,
58,
.78
),
rgba(
9,
22,
38,
.8
)
);
}
.question-card:hover {
border-color:
var(--border-strong);
}
.question-card-top {
display:
flex;
flex-wrap:
wrap;
justify-content:
space-between;
gap:
8px;
margin-bottom:
20px;
}
.question-status,
.question-house {
padding:
6px
9px;
border-radius:
999px;
font-size:
10px;
font-weight:
850;
}
.question-status {
color:
var(--green);
background:
rgba(
128,
218,
176,
.08
);
}
.status-review {
color:
var(--gold);
}
.status-resolved {
color:
var(--blue);
}
.question-house {
color:
var(--blue);
border:
1px solid
rgba(
120,
183,
255,
.18
);
}
.question-card h3 {
margin:
0
0
12px;
font-size:
21px;
line-height:
1.35;
}
.question-card > p {
flex:
1;
margin:
0;
color:
var(--muted);
font-size:
14px;
line-height:
1.65;
}
.question-footer {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
12px;
margin-top:
24px;
padding-top:
17px;
border-top:
1px solid
var(--border);
color:
var(--muted);
font-size:
11px;
}
.question-open {
color:
var(--blue);
font-weight:
800;
text-decoration:
none;
}
/* =====================================================
FUTURE
===================================================== */
.future-grid {
display:
grid;
grid-template-columns:
repeat(
4,
minmax(
0,
1fr
)
);
gap:
14px;
}
.future-grid article {
padding:
22px;
border:
1px solid
var(--border);
border-radius:
24px;
background:
var(--panel);
}
.future-state {
display:
inline-flex;
margin-bottom:
20px;
padding:
6px
9px;
border-radius:
999px;
font-size:
10px;
font-weight:
900;
}
.future-state.known {
color:
var(--green);
}
.future-state.probable {
color:
var(--blue);
}
.future-state.possible {
color:
var(--gold);
}
.future-state.unknown {
color:
var(--violet);
}
.future-grid h3 {
margin:
0
0
10px;
}
.future-grid p {
margin:
0;
color:
var(--muted);
font-size:
13px;
line-height:
1.6;
}
/* =====================================================
CONSTITUTION
===================================================== */
.constitution-section blockquote {
margin:
0;
padding:
36px;
border:
1px solid
rgba(
235,
202,
122,
.22
);
border-radius:
30px;
background:
linear-gradient(
145deg,
rgba(
235,
202,
122,
.055
),
rgba(
255,
255,
255,
.02
)
);
color:
#dce8f3;
font-size:
22px;
line-height:
1.65;
}
.constitution-section
blockquote strong {
display:
block;
margin-top:
16px;
color:
var(--gold);
}
/* =====================================================
EMPTY / LOADING / ERROR
===================================================== */
.loading-card,
.empty-card,
.error-card {
grid-column:
1 / -1;
padding:
28px;
border:
1px solid
var(--border);
border-radius:
22px;
color:
var(--muted);
background:
var(--panel);
}
.error-card {
color:
var(--danger);
}
/* =====================================================
FOOTER
===================================================== */
.footer {
min-height:
150px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
6px;
padding:
30px;
border-top:
1px solid
var(--border);
color:
var(--muted);
text-align:
center;
}
.footer strong {
color:
var(--text);
}
/* =====================================================
MOBILE
===================================================== */
@media (
max-width: 950px
) {
.main-nav {
display:
none;
}
.hero {
min-height:
auto;
grid-template-columns:
1fr;
}
.houses-grid {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
.future-grid {
grid-template-columns:
repeat(
2,
minmax(
0,
1fr
)
);
}
.auth-card {
grid-template-columns:
1fr
1fr;
}
}
@media (
max-width: 650px
) {
.page-shell {
width:
94%;
padding-top:
32px;
}
.topbar {
padding:
10px
14px;
}
.brand small {
display:
none;
}
.session-state {
display:
none;
}
.hero h1 {
font-size:
47px;
}
.hero-text {
font-size:
16px;
}
.compass-card {
padding:
22px;
}
.auth-card {
grid-template-columns:
1fr;
}
.question-tools {
grid-template-columns:
1fr;
}
.houses-grid,
.questions-grid,
.future-grid {
grid-template-columns:
1fr;
}
.creator-panel {
padding:
20px;
}
.constitution-section
blockquote {
padding:
25px;
font-size:
18px;
}
}