/* civ-shell.css — Xylophia-IV illuminated codex system Astronomical almanac aesthetic. Ignores site defaults; stands alone. Owned by /civgame/*. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* — Ink & vellum — */ --civ-ink: #0a1220; --civ-ink-deep: #060a13; --civ-vellum: #ecdfc7; --civ-vellum-2: #d9c9ab; --civ-vellum-3: #b8a789; /* — Accents — */ --civ-copper: #b96a2a; --civ-copper-hi: #d38240; --civ-copper-lo: #7a4218; --civ-ice: #a8d8e8; --civ-ice-hi: #dff2f8; --civ-blood: #7a1e1e; --civ-omen: #b39a5a; /* — Season tint (overridden by JS on load) — */ --season-hue: 42; /* summer amber default */ --season-sat: 55%; --season-warm: #d4a54a; /* — Type — */ --civ-display: "Fraunces", "Cormorant Garamond", "Fraunces Latin", serif; --civ-body: "EB Garamond", "Cormorant Garamond", Georgia, serif; --civ-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* — Motion (killed under prefers-reduced-motion) — */ --civ-drift-ms: 1400ms; --civ-slab-ms: 680ms; --civ-ease: cubic-bezier(0.32, 0.72, 0.28, 1.0); } /* Season presets — set on by civ-shell.js */ html[data-season="spring"] { --season-hue: 130; --season-sat: 42%; --season-warm: #6b8e5f; } html[data-season="summer"] { --season-hue: 42; --season-sat: 62%; --season-warm: #d4a54a; } html[data-season="autumn"] { --season-hue: 22; --season-sat: 68%; --season-warm: #a05a2c; } html[data-season="winter"] { --season-hue: 200; --season-sat: 22%; --season-warm: #a8c8d8; } /* ————————————————————————————————————— PAGE FRAME */ .civ-page { background: var(--civ-ink); color: var(--civ-vellum); font-family: var(--civ-body); font-size: 17px; line-height: 1.62; margin: 0; min-height: 100vh; position: relative; overflow-x: hidden; font-feature-settings: "kern", "liga", "onum"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Grain overlay — subtle SVG turbulence */ .civ-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: 0.055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ————————————————————————————————————— ACT 1: HERO / ORBIT */ .civ-hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; isolation: isolate; } .civ-hero__canvas { position: absolute; inset: 0; z-index: 0; } .civ-hero__canvas canvas { width: 100% !important; height: 100% !important; display: block; } .civ-hero__vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(6,10,19,0.55) 78%, rgba(6,10,19,0.92) 100%), linear-gradient(180deg, rgba(6,10,19,0.35) 0%, transparent 22%, transparent 68%, rgba(6,10,19,0.75) 100%); } .civ-hero__eyebrow { position: absolute; top: clamp(28px, 5vh, 56px); left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--civ-mono); font-size: 11px; letter-spacing: 0.42em; color: var(--civ-vellum-2); text-transform: uppercase; animation: civ-track 12s var(--civ-ease) infinite; } @keyframes civ-track { 0%, 100% { letter-spacing: 0.42em; opacity: 0.72; } 50% { letter-spacing: 0.48em; opacity: 0.92; } } .civ-hero__title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); z-index: 3; font-family: var(--civ-display); font-weight: 300; font-size: clamp(58px, 11vw, 148px); letter-spacing: -0.028em; line-height: 0.86; color: var(--civ-vellum); text-align: center; font-variation-settings: "SOFT" 60, "opsz" 144; text-shadow: 0 2px 40px rgba(6,10,19,0.75); pointer-events: none; white-space: nowrap; } .civ-hero__title em { display: block; font-family: var(--civ-display); font-weight: 500; font-style: italic; font-size: 0.34em; letter-spacing: 0.02em; color: var(--civ-copper-hi); margin-top: 0.2em; font-variation-settings: "SOFT" 100, "opsz" 24; } /* Prose dispatch — lower third */ .civ-dispatch { position: absolute; left: 50%; bottom: 22vh; transform: translateX(-50%); z-index: 3; width: min(760px, 88vw); text-align: center; font-family: var(--civ-body); font-style: italic; font-size: clamp(17px, 2vw, 22px); line-height: 1.55; color: var(--civ-vellum); text-shadow: 0 1px 20px rgba(6,10,19,0.9); pointer-events: none; } .civ-dispatch__quote { display: block; opacity: 0; transform: translateY(14px); transition: opacity var(--civ-drift-ms) var(--civ-ease), transform var(--civ-drift-ms) var(--civ-ease); } .civ-dispatch__quote.is-in { opacity: 1; transform: translateY(0); } .civ-dispatch__attribution { display: block; margin-top: 12px; font-family: var(--civ-mono); font-style: normal; font-size: 10px; letter-spacing: 0.32em; color: var(--civ-vellum-3); text-transform: uppercase; opacity: 0; transition: opacity var(--civ-drift-ms) var(--civ-ease); } .civ-dispatch__quote.is-in + .civ-dispatch__attribution { opacity: 0.72; } /* Hairline meter — bottom right */ .civ-hairline { position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 3.5vh, 40px); z-index: 3; font-family: var(--civ-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--civ-vellum-3); text-transform: uppercase; display: flex; gap: 14px; align-items: center; } .civ-hairline b { color: var(--civ-vellum); font-weight: 500; margin-right: 4px; } .civ-hairline span::before { content: "·"; margin-right: 14px; color: var(--civ-copper); } .civ-hairline span:first-child::before { display: none; } /* Scroll cue */ .civ-scrollcue { position: absolute; left: 50%; bottom: 6vh; transform: translateX(-50%); z-index: 3; font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.36em; color: var(--civ-vellum-3); text-transform: uppercase; opacity: 0.6; animation: civ-cue 3.4s var(--civ-ease) infinite; } @keyframes civ-cue { 0%, 100% { transform: translate(-50%, 0); opacity: 0.5; } 50% { transform: translate(-50%, 6px); opacity: 0.9; } } /* ————————————————————————————————————— SECTION FLOURISH */ .civ-flourish { display: block; width: 88px; height: 22px; margin: 0 auto 18px; color: var(--civ-copper); opacity: 0.85; } .civ-flourish--sm { width: 48px; height: 14px; } /* ————————————————————————————————————— ACT 2: THE MAP */ .civ-act { position: relative; padding: clamp(80px, 12vh, 140px) 0 clamp(60px, 8vh, 100px); } .civ-act__inner { width: min(1180px, calc(100vw - 40px)); margin: 0 auto; } .civ-act__eyebrow { font-family: var(--civ-mono); font-size: 11px; letter-spacing: 0.36em; color: var(--civ-copper); text-transform: uppercase; text-align: center; margin: 0 0 14px; } .civ-act__title { font-family: var(--civ-display); font-weight: 400; font-style: italic; font-size: clamp(38px, 6vw, 72px); letter-spacing: -0.02em; line-height: 1.02; color: var(--civ-vellum); text-align: center; margin: 0 0 8px; font-variation-settings: "SOFT" 80, "opsz" 72; } .civ-act__subtitle { font-family: var(--civ-body); font-style: italic; font-size: 16px; color: var(--civ-vellum-3); text-align: center; margin: 0 auto 56px; max-width: 52ch; line-height: 1.55; } /* Map plate — vellum canvas set into a copper-line frame */ .civ-map { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 76vh; background: linear-gradient(180deg, #f3e6cc 0%, #ecdfc7 50%, #dcc9a6 100%); border-radius: 2px; box-shadow: 0 0 0 1px var(--civ-copper-lo), 0 0 0 8px var(--civ-ink), 0 0 0 9px var(--civ-copper), 0 40px 120px -20px rgba(0,0,0,0.7), inset 0 0 90px rgba(122, 66, 24, 0.22); overflow: hidden; cursor: crosshair; } .civ-map canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .civ-map__corner { position: absolute; width: 42px; height: 42px; color: var(--civ-copper-lo); opacity: 0.62; pointer-events: none; } .civ-map__corner--tl { top: 8px; left: 8px; } .civ-map__corner--tr { top: 8px; right: 8px; transform: scaleX(-1); } .civ-map__corner--bl { bottom: 8px; left: 8px; transform: scaleY(-1); } .civ-map__corner--br { bottom: 8px; right: 8px; transform: scale(-1,-1); } /* Marginalia */ .civ-map__margin { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: baseline; margin-top: 22px; font-family: var(--civ-mono); font-size: 10.5px; letter-spacing: 0.28em; color: var(--civ-vellum-3); text-transform: uppercase; } .civ-map__margin > :nth-child(1) { text-align: left; } .civ-map__margin > :nth-child(2) { text-align: center; color: var(--civ-copper); } .civ-map__margin > :nth-child(3) { text-align: right; } /* Artifact vignette (floats out on hover) */ .civ-vignette { position: absolute; z-index: 4; min-width: 280px; max-width: 380px; padding: 18px 22px 20px; background: var(--civ-ink); color: var(--civ-vellum); border: 1px solid var(--civ-copper); box-shadow: 0 24px 60px -10px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(212,165,74,0.14); pointer-events: none; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 380ms var(--civ-ease), transform 380ms var(--civ-ease); } .civ-vignette.is-on { opacity: 1; transform: translateY(0) scale(1); } .civ-vignette__eyebrow { font-family: var(--civ-mono); font-size: 9.5px; letter-spacing: 0.32em; color: var(--civ-copper); text-transform: uppercase; margin-bottom: 6px; } .civ-vignette__name { font-family: var(--civ-display); font-style: italic; font-weight: 500; font-size: 19px; line-height: 1.22; color: var(--civ-vellum); margin-bottom: 10px; font-variation-settings: "SOFT" 100, "opsz" 24; } .civ-vignette__lore { font-family: var(--civ-body); font-style: italic; font-size: 14px; line-height: 1.5; color: var(--civ-vellum-2); } .civ-vignette__attr { margin-top: 12px; font-family: var(--civ-mono); font-size: 9.5px; letter-spacing: 0.28em; color: var(--civ-vellum-3); text-transform: uppercase; } /* ————————————————————————————————————— ACT 3: EDITORIAL */ .civ-editorial { background: linear-gradient(180deg, transparent 0%, var(--civ-ink-deep) 4%, var(--civ-ink-deep) 96%, transparent 100%); } .civ-slab { padding: clamp(80px, 12vh, 130px) 0; border-top: 1px solid rgba(185, 106, 42, 0.16); opacity: 0; transform: translateY(28px); transition: opacity var(--civ-slab-ms) var(--civ-ease), transform var(--civ-slab-ms) var(--civ-ease); } .civ-slab.is-in { opacity: 1; transform: translateY(0); } .civ-slab:first-of-type { border-top: none; } .civ-slab__inner { width: min(1180px, calc(100vw - 40px)); margin: 0 auto; } /* Notables — 3-up portrait cards */ .civ-notables { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 60px); margin-top: 56px; } .civ-portrait { position: relative; padding-top: 28px; border-top: 1px solid var(--civ-copper-lo); } .civ-portrait__role { font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--civ-copper); text-transform: uppercase; margin-bottom: 6px; } .civ-portrait__name { font-family: var(--civ-display); font-weight: 500; font-style: italic; font-size: clamp(34px, 4vw, 46px); line-height: 1; letter-spacing: -0.02em; color: var(--civ-vellum); margin: 0 0 4px; font-variation-settings: "SOFT" 100, "opsz" 48; } .civ-portrait__age { font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--civ-vellum-3); margin-bottom: 18px; text-transform: uppercase; } .civ-portrait__detail { font-family: var(--civ-body); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--civ-vellum-2); max-width: 32ch; } .civ-portrait__tribe { margin-top: 20px; font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--civ-vellum-3); text-transform: uppercase; } /* Cultural threads — triptych */ .civ-threads { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(36px, 5vw, 72px); margin-top: 56px; } .civ-thread__eyebrow { font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--civ-copper); text-transform: uppercase; margin-bottom: 8px; } .civ-thread__name { font-family: var(--civ-display); font-weight: 500; font-style: italic; font-size: 26px; color: var(--civ-vellum); margin: 0 0 24px; font-variation-settings: "SOFT" 100, "opsz" 32; } .civ-thread__origin { font-family: var(--civ-display); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--civ-vellum); margin-bottom: 20px; font-variation-settings: "SOFT" 40, "opsz" 24; } .civ-thread__origin::first-letter { font-family: var(--civ-display); font-weight: 600; font-style: italic; font-size: 5.4em; float: left; line-height: 0.82; padding: 6px 10px 0 0; color: var(--civ-copper); font-variation-settings: "SOFT" 100, "opsz" 144; } .civ-thread__traits { font-family: var(--civ-body); font-style: italic; font-size: 15px; line-height: 1.6; color: var(--civ-vellum-2); border-top: 1px solid rgba(185, 106, 42, 0.22); padding-top: 16px; margin-top: 16px; } .civ-thread__trait { margin-bottom: 12px; } .civ-thread__trait:last-child { margin-bottom: 0; } .civ-thread__values { font-family: var(--civ-display); font-style: italic; font-size: 15px; color: var(--civ-copper-hi); letter-spacing: 0.02em; margin-top: 18px; line-height: 1.4; font-variation-settings: "SOFT" 100, "opsz" 24; } /* Chronicle — broadsheet dispatch column */ .civ-chronicle { max-width: 720px; margin: 56px auto 0; column-count: 1; } .civ-dispatch-line { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(185, 106, 42, 0.16); } .civ-dispatch-line:last-child { border-bottom: none; } .civ-dispatch-line__glyph { font-family: var(--civ-display); font-size: 24px; color: var(--civ-copper); text-align: center; line-height: 1.4; } .civ-dispatch-line__body { font-family: var(--civ-body); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--civ-vellum); } .civ-dispatch-line__meta { display: block; margin-top: 6px; font-family: var(--civ-mono); font-style: normal; font-size: 9.5px; letter-spacing: 0.28em; color: var(--civ-vellum-3); text-transform: uppercase; } /* ————————————————————————————————————— FOOTER NAV */ .civ-footer { border-top: 1px solid rgba(185, 106, 42, 0.22); padding: 40px 0 60px; } .civ-footer__flourish { display: block; margin: 0 auto 22px; width: 72px; color: var(--civ-copper); } .civ-footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; max-width: 900px; margin: 0 auto; padding: 0 20px; font-family: var(--civ-mono); font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; } .civ-footer-nav a { color: var(--civ-vellum-3); text-decoration: none; transition: color 180ms ease; } .civ-footer-nav a:hover, .civ-footer-nav a:focus-visible { color: var(--civ-copper-hi); outline: none; } .civ-footer-nav span { color: var(--civ-copper-lo); opacity: 0.55; } .civ-footer__colophon { margin-top: 32px; text-align: center; font-family: var(--civ-mono); font-size: 10px; letter-spacing: 0.24em; color: var(--civ-vellum-3); opacity: 0.6; text-transform: uppercase; } .civ-footer__colophon a { color: var(--civ-copper); text-decoration: none; } /* ————————————————————————————————————— A11Y */ .civ-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } :focus-visible { outline: 2px solid var(--civ-copper); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; } .civ-dispatch__quote { transform: none; } .civ-hero__eyebrow { animation: none; } .civ-scrollcue { animation: none; } } /* Mobile refinements */ @media (max-width: 720px) { .civ-hero__title { font-size: 64px; } .civ-dispatch { bottom: 26vh; font-size: 16px; } .civ-hairline { flex-direction: column; align-items: flex-end; gap: 2px; } .civ-hairline span::before { display: none; } .civ-map { aspect-ratio: 4 / 3; } .civ-slab { padding: 72px 0; } }