Spaces:
Running
Running
| /* ───────── Marginalia Hugging Face Space landing — Dark Academia ───────── */ | |
| :root { | |
| --parchment: #ebe8de; | |
| --parchment-deep: #d5c7ac; | |
| --paper: #f4efde; | |
| --ink: #2b1715; | |
| --ink-soft: #58402f; | |
| --ink-faint: #6b5c43; | |
| --emerald: #0e3523; | |
| --emerald-mid: #2a664d; | |
| --oxford: #1b2138; | |
| --oxford-mid: #2c3554; | |
| --terracotta: #ba7c64; | |
| --gold: #b88a2c; | |
| --gold-soft: #c4a665; | |
| --rule: #c4b78c; | |
| --rule-soft: #d8cca0; | |
| --shadow-warm: rgba(43, 23, 21, 0.07); | |
| --max-width: 760px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: var(--parchment); | |
| color: var(--ink); | |
| font-family: "EB Garamond", "Garamond", "Iowan Old Style", "Times New Roman", serif; | |
| font-size: 18px; | |
| line-height: 1.65; | |
| min-height: 100vh; | |
| } | |
| body { | |
| background-image: | |
| radial-gradient(circle at 18% -8%, rgba(14, 53, 35, 0.10) 0%, transparent 50%), | |
| radial-gradient(circle at 82% 105%, rgba(27, 33, 56, 0.08) 0%, transparent 55%), | |
| radial-gradient(circle at 50% 50%, rgba(184, 138, 44, 0.04) 0%, transparent 70%); | |
| background-attachment: fixed; | |
| } | |
| .page { | |
| max-width: var(--max-width); | |
| margin: 0 auto; | |
| padding: 4rem 1.5rem 3rem; | |
| } | |
| a { | |
| color: var(--emerald); | |
| text-decoration-thickness: 1px; | |
| text-underline-offset: 2px; | |
| } | |
| a:hover { | |
| color: var(--emerald-mid); | |
| } | |
| code { | |
| font-family: "EB Garamond", serif; | |
| font-style: italic; | |
| background: rgba(184, 138, 44, 0.13); | |
| padding: 0 0.25em; | |
| border-radius: 2px; | |
| font-size: 0.97em; | |
| } | |
| /* ───────── masthead ───────── */ | |
| .masthead { | |
| text-align: center; | |
| margin-bottom: 2.6rem; | |
| padding-bottom: 1.6rem; | |
| border-bottom: 1px solid var(--rule); | |
| position: relative; | |
| } | |
| .masthead::after { | |
| content: "❦"; | |
| position: absolute; | |
| bottom: -0.78em; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--parchment); | |
| color: var(--emerald); | |
| padding: 0 0.5em; | |
| font-size: 1.1rem; | |
| } | |
| .kicker { | |
| margin: 0 0 0.5rem 0; | |
| font-family: "IM Fell English SC", "Cormorant Garamond", serif; | |
| font-size: 0.78rem; | |
| letter-spacing: 0.18em; | |
| text-transform: uppercase; | |
| color: var(--ink-faint); | |
| } | |
| .title { | |
| margin: 0; | |
| font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif; | |
| font-weight: 700; | |
| font-size: clamp(3rem, 8vw, 4.6rem); | |
| line-height: 1; | |
| color: var(--oxford); | |
| letter-spacing: -0.01em; | |
| } | |
| .subtitle { | |
| margin: 1rem auto 0; | |
| max-width: 32em; | |
| font-style: italic; | |
| color: var(--ink-soft); | |
| font-size: 1.05rem; | |
| } | |
| /* ───────── cards ───────── */ | |
| .card { | |
| background: rgba(244, 239, 222, 0.55); | |
| border: 1px solid var(--rule); | |
| border-radius: 4px; | |
| margin: 1.6rem 0; | |
| padding: 1.5rem 1.85rem; | |
| box-shadow: | |
| 0 1px 0 rgba(255, 255, 255, 0.4) inset, | |
| 0 2px 14px var(--shadow-warm); | |
| } | |
| .card h2 { | |
| font-family: "Cormorant Garamond", serif; | |
| color: var(--emerald); | |
| font-size: 1.55rem; | |
| font-weight: 700; | |
| margin: 0 0 0.9rem 0; | |
| line-height: 1.2; | |
| } | |
| .card p { | |
| margin: 0 0 0.85em 0; | |
| } | |
| .card p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .muted { | |
| color: var(--ink-faint); | |
| font-size: 0.92rem; | |
| } | |
| /* ───────── preview ───────── */ | |
| .preview { | |
| background: | |
| linear-gradient(180deg, | |
| rgba(244, 239, 222, 0.85) 0%, | |
| rgba(213, 199, 172, 0.35) 100%); | |
| border: 1px solid var(--rule); | |
| padding: 0; | |
| } | |
| .preview-frame { | |
| padding: 1.7rem 2rem 1.5rem; | |
| border-left: 4px solid var(--emerald); | |
| } | |
| .preview-q { | |
| display: flex; | |
| gap: 0.55em; | |
| align-items: baseline; | |
| font-family: "IM Fell English SC", "Cormorant Garamond", serif; | |
| color: var(--ink-soft); | |
| margin-bottom: 1rem; | |
| font-size: 1rem; | |
| font-style: italic; | |
| } | |
| .preview-q span:first-child { | |
| color: var(--emerald); | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| .preview-label { | |
| flex-shrink: 0; | |
| } | |
| .preview-a { | |
| color: var(--ink); | |
| font-size: 1.05rem; | |
| line-height: 1.6; | |
| } | |
| .preview-dropcap { | |
| font-family: "Cormorant Garamond", serif; | |
| font-weight: 700; | |
| color: var(--emerald); | |
| float: left; | |
| font-size: 3.2em; | |
| line-height: 0.85; | |
| padding: 0.05em 0.12em 0 0; | |
| margin-right: 0.04em; | |
| } | |
| .preview-meta { | |
| margin-top: 1rem; | |
| display: flex; | |
| gap: 0.6rem; | |
| flex-wrap: wrap; | |
| } | |
| .preview-pill { | |
| display: inline-block; | |
| font-family: "IM Fell English SC", serif; | |
| font-size: 0.7rem; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| color: var(--paper); | |
| background: var(--emerald); | |
| padding: 0.32rem 0.7rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--gold-soft); | |
| } | |
| .preview-pill.alt { | |
| background: var(--oxford); | |
| } | |
| .preview-pill.voice { | |
| background: var(--terracotta); | |
| color: #2b1715; | |
| border-color: #8c5a48; | |
| } | |
| .cite { | |
| display: inline; | |
| color: var(--oxford); | |
| font-weight: 600; | |
| font-family: "Cormorant Garamond", serif; | |
| font-size: 0.9em; | |
| } | |
| .preview-note { | |
| margin: 1.2rem 0 0; | |
| border-top: 1px dotted var(--rule); | |
| padding-top: 0.7rem; | |
| color: var(--ink-faint); | |
| font-style: italic; | |
| font-size: 0.88rem; | |
| } | |
| /* ───────── ordered + unordered lists ───────── */ | |
| .steps, | |
| .features { | |
| margin: 0; | |
| padding-left: 1.4em; | |
| } | |
| .steps li, | |
| .features li { | |
| margin-bottom: 0.7em; | |
| } | |
| .steps li:last-child, | |
| .features li:last-child { | |
| margin-bottom: 0; | |
| } | |
| .steps li::marker { | |
| color: var(--emerald); | |
| font-family: "Cormorant Garamond", serif; | |
| font-weight: 700; | |
| } | |
| .features { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| .features li { | |
| position: relative; | |
| padding-left: 1.4em; | |
| } | |
| .features li::before { | |
| content: "❦"; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: var(--gold); | |
| } | |
| /* ───────── colophon ───────── */ | |
| .colophon { | |
| margin-top: 3rem; | |
| padding-top: 1.6rem; | |
| border-top: 1px solid var(--rule); | |
| text-align: center; | |
| font-size: 0.85rem; | |
| color: var(--ink-faint); | |
| font-style: italic; | |
| } | |
| .colophon a { | |
| color: var(--ink-faint); | |
| text-decoration: none; | |
| border-bottom: 1px dotted var(--ink-faint); | |
| } | |
| .colophon a:hover { | |
| color: var(--emerald); | |
| border-bottom-color: var(--emerald); | |
| } | |
| /* ───────── responsive ───────── */ | |
| @media (max-width: 600px) { | |
| html, body { font-size: 17px; } | |
| .page { padding: 2rem 1.1rem 2rem; } | |
| .card { padding: 1.2rem 1.3rem; } | |
| .preview-frame { padding: 1.3rem 1.3rem 1.1rem; } | |
| } | |