/* nostr-snip — codex card design system. * * Distilled from engine.scripz.io's codex.css (only the bits we need for * sleeve + flip-card + paper-card). Tokens are scoped to .codex-theme on * ; the rest of app.css can coexist. */ @font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IMFellEnglish-Regular.ttf') format('truetype'); } @font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/IMFellEnglish-Italic.ttf') format('truetype'); } @font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IMFellEnglishSC-Regular.ttf') format('truetype'); } /* External font imports removed — self-hosted fonts only (privacy) */ /* ── Tokens ──────────────────────────────────────────────────────────── */ .codex-theme { --paper: #ffffff; --paper-dark: #fafafa; --ink: #1a1612; --ink-soft: #4a3f33; --ink-faint: #8a7a66; --rule: #6b5a48; --accent: #8b2c1c; --font-display: 'Bebas Neue', 'Source Sans 3', sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; --font-fell: 'IM Fell English', Georgia, serif; --font-fell-sc: 'IM Fell English SC', 'IM Fell English', Georgia, serif; } /* ── Helpers ─────────────────────────────────────────────────────────── */ .codex-theme .codex-meta { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--ink-faint); text-transform: uppercase; } .codex-theme .codex-ornament-rule { display: flex; align-items: center; gap: 0.75rem; color: var(--rule); margin: 1rem 0; } .codex-theme .codex-ornament-rule::before, .codex-theme .codex-ornament-rule::after { content: ''; flex: 1; border-top: 0.5px solid var(--rule); height: 0; } .codex-theme .codex-ornament-rule .orn { font-size: 0.875rem; color: var(--ink-soft); line-height: 1; } /* ── Flip stage + card ───────────────────────────────────────────────── */ .codex-theme .flip-stage { display: flex; justify-content: center; perspective: 1500px; margin: 0 auto; max-width: 84mm; /* 1:1 with the printed sleeve (84mm outer) */ } .codex-theme .flip-card { position: relative; width: 100%; aspect-ratio: 57 / 84; /* matches PDF panel: 57×83.677mm */ transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(0.45, 0, 0.15, 1); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; } .codex-theme .flip-card.flipped { transform: rotateY(180deg); } .codex-theme .flip-card:focus-visible { outline: 1px dashed var(--rule); outline-offset: 4px; } .codex-theme .flip-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .codex-theme .flip-card-face--back { transform: rotateY(180deg); } .codex-theme .flip-card-face .scripz-sleeve { width: 100%; height: 100%; max-width: none; margin: 0; } .codex-theme .flip-hint { text-align: center; font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; margin-top: 12px; user-select: none; pointer-events: none; } .codex-theme .flip-hint .arrow { display: inline-block; margin: 0 0.35em; transition: transform 0.4s ease; } .codex-theme:has(.flip-card.flipped) .flip-hint .arrow { transform: scaleX(-1); } /* ── Sleeve ──────────────────────────────────────────────────────────── */ .codex-theme .scripz-sleeve { position: relative; width: 84mm; max-width: 100%; box-sizing: border-box; aspect-ratio: 57 / 84; /* matches PDF panel: 57×83.677mm */ padding: 12% 4% 7%; /* sleeve plastic margins */ background-image: url('/assets/images/scripz-sleeve.png'); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; overflow: hidden; } .codex-theme .scripz-sleeve .codex-paper-card { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.6); border: none; box-sizing: border-box; position: relative; } /* Double-line inner frame, matches pdf_codex.py SAFE_MM=2.5 + gap=1 */ .codex-theme .scripz-sleeve .codex-paper-card::before, .codex-theme .scripz-sleeve .codex-paper-card::after { content: ""; position: absolute; border: 0.3mm solid var(--rule); pointer-events: none; z-index: 3; } .codex-theme .scripz-sleeve .codex-paper-card::before { top: 2.5mm; left: 2.5mm; right: 2.5mm; bottom: 2.5mm; } .codex-theme .scripz-sleeve .codex-paper-card::after { top: 3.5mm; left: 3.5mm; right: 3.5mm; bottom: 3.5mm; } .codex-theme .scripz-sleeve .codex-paper-card > .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; } /* ── Paper-card typography ───────────────────────────────────────────── */ .codex-theme .codex-paper-card { --paper: #ffffff; --paper-dark: #fafafa; } .codex-theme .codex-title-xl { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.05em; color: var(--ink); margin: 0; font-weight: normal; text-align: center; line-height: 1.1; text-transform: uppercase; overflow-wrap: break-word; } /* Username treatment — IM Fell SC, mirroring PDF Panel C */ .codex-theme .scripz-sleeve--front .codex-title-xl, .codex-theme .scripz-sleeve--back .back-username { font-family: var(--font-fell-sc); letter-spacing: 0.06em; font-weight: 400; text-transform: none; font-feature-settings: "dlig" 1, "liga" 1; font-size: 8mm !important; flex: 0 0 14mm; min-height: 14mm; display: flex; align-items: flex-start; justify-content: center; } /* ── Front face ──────────────────────────────────────────────────────── */ .codex-theme .scripz-sleeve--front .codex-paper-card > .panel { padding: 6.5mm 0 4mm; } .codex-theme .front-artwork-wrap { flex: 1 1 auto; min-height: 0; max-height: 75mm; width: 100%; display: flex; align-items: center; justify-content: center; margin: 2mm 0; padding: 0 11.4%; box-sizing: border-box; } .codex-theme .front-artwork-wrap img, .codex-theme .codex-card-artwork { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; margin: 0; display: block; background: var(--paper); } .codex-theme .front-npub-footer, .codex-theme a.front-npub-footer { display: block; font-family: var(--font-mono); font-size: 3.35mm; /* 7pt scaled to web paper width (×77.3/57) */ color: var(--ink); text-align: center; overflow-wrap: anywhere; word-break: normal; line-height: 1.42; margin: 2mm 0 0; padding: 0 11.4%; /* 6.5mm/57mm = art_w inset, scales with card */ box-sizing: border-box; text-decoration: none; border: none; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1, "calt" 0, "dlig" 0, "liga" 0; -webkit-font-smoothing: antialiased; } .codex-theme a.front-npub-footer:hover { color: var(--accent); } /* ── Back face ───────────────────────────────────────────────────────── */ .codex-theme .scripz-sleeve--back .codex-paper-card > .panel { padding: 5mm 4mm 3mm; align-items: center; } .codex-theme .back-qr-block { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4mm; width: 100%; } .codex-theme .back-qr-block .back-sigil { width: 28mm; height: 28mm; max-width: 62%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; } .codex-theme .back-qr-block .back-qr { width: 28mm; height: 28mm; max-width: 62%; background: var(--paper); display: block; } .codex-theme .back-wordmark { display: block; max-width: 60%; max-height: 10mm; width: auto; height: auto; object-fit: contain; opacity: 0.65; margin-top: auto; margin-bottom: 2mm; } .codex-theme .back-qr-caption { font-family: var(--font-body); font-style: italic; font-size: 3mm; color: var(--ink-soft); text-align: center; } .codex-theme .back-npub-mono { font-family: var(--font-mono); font-size: 2.4mm; color: var(--ink); text-align: center; overflow-wrap: anywhere; line-height: 1.35; padding: 0 4mm; font-feature-settings: "tnum" 1, "lnum" 1, "calt" 0, "liga" 0; } /* ── Dashboard layout — give the grid more horizontal room than the * default 720px body width allows. */ /* body.page-dashboard max-width removed — hero must be full-width */ .codex-theme .snip-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px 16px; } .codex-theme .snip-grid > li { width: 100%; background: transparent; border: none; padding: 0; } @media (max-width: 1100px) { .codex-theme .snip-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 700px) { .codex-theme .snip-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; } } @media (max-width: 480px) { .codex-theme .snip-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; } } .codex-theme .snip-card-link { display: block; max-width: 84mm; margin: 0 auto; text-decoration: none; transition: filter 0.18s ease; } .codex-theme .snip-card-link:hover { filter: brightness(1.06); } .codex-theme .snip-card-link .scripz-sleeve { width: 100%; } .codex-theme .snip-meta-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--ink-faint); margin-top: 0.75rem; padding: 0 0.25rem; } .codex-theme .snip-meta-row .link { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--ink-faint); } .codex-theme .snip-meta-row .link:hover { color: var(--accent); border-bottom-color: var(--accent); } /* ── Public snippet page — solo card layout ──────────────────────────── */ .codex-theme #snip-main { max-width: 720px; margin: 0 auto; } .codex-theme .meta--below { font-family: var(--font-body); font-size: 13px; text-align: center; color: var(--ink-soft); } .codex-theme .meta--below dt { display: inline; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-right: 0.5rem; } .codex-theme .meta--below dd { display: inline; margin: 0; }