/* Volunteer C2 — site extras Layered on top of styles.css. New components: live clock, episode filter, AAR feed, video player, command palette, scramble, operator badge. */ /* ============== Tweaks-driven globals ============== */ :root[data-density="compact"] .vc-section { padding-top: 64px; padding-bottom: 64px; } :root[data-density="compact"] .vc-hero__inner { padding-top: 64px; padding-bottom: 56px; } :root[data-grid="off"] .vc-hero__grid, :root[data-grid="off"] .vc-fn__grid { display: none; } /* signal accent overrides — applied via [data-signal=...] on */ :root[data-signal="amber"] { --c-signal: #C9871A; --c-signal-2: #E0A23A; --c-signal-dim: #8C5C0E; --c-signal-ink: #14181C; } :root[data-signal="od"] { --c-signal: #7BA05B; --c-signal-2: #9DBE7F; --c-signal-dim: #4F6A36; --c-signal-ink: #0B0E10; } :root[data-chrome="off"] .vc-bracket, :root[data-chrome="off"] .vc-readout::before, :root[data-chrome="off"] .vc-readout::after, :root[data-chrome="off"] .vc-stamp { display: none; } /* ============== Live clock chip in nav ============== */ .vc-nav__clock { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--c-fg-3); padding: 6px 10px; border: 1px solid var(--c-rule); margin-right: 8px; background: rgba(11,14,16,0.4); } .vc-nav__clock .vc-pip { width: 5px; height: 5px; } .vc-nav__kbd { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--c-fg-3); padding: 6px 10px; border: 1px solid var(--c-rule); background: rgba(11,14,16,0.4); margin-right: 8px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color .15s, border-color .15s; } .vc-nav__kbd:hover { color: var(--c-fg-1); border-color: var(--c-rule-2); } .vc-nav__kbd kbd { font-family: var(--ff-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--c-rule-2); background: var(--c-ink-3); color: var(--c-fg-2); border-radius: 2px; } /* ============== Tactical readout — extras ============== */ .vc-readout__bars { display: flex; gap: 3px; margin-top: 12px; height: 32px; align-items: flex-end; } .vc-readout__bar { flex: 1; background: var(--c-signal-dim); border-top: 1px solid var(--c-signal); opacity: 0.65; transition: height .8s var(--ease-out), opacity .3s; } .vc-readout__bar.is-peak { background: var(--c-signal); opacity: 1; } .vc-readout__since { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--c-fg-3); } /* ============== Latest brief — alternative hero panel ============== */ .vc-latest { border: 1px solid var(--c-rule); background: var(--c-ink-2); display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; } .vc-latest__player { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #0e1a23 0%, #050a12 100%); overflow: hidden; cursor: pointer; } .vc-latest__player-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(57,182,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(57,182,255,0.1) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%); } .vc-latest__crosshair { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; } .vc-latest__crosshair svg { width: 280px; height: 280px; opacity: 0.18; } .vc-latest__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: var(--c-signal); color: var(--c-signal-ink); display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-signal); transition: transform .15s, background .15s; box-shadow: 0 0 60px rgba(57,182,255,0.35); } .vc-latest__player:hover .vc-latest__play { transform: translate(-50%, -50%) scale(1.06); } .vc-latest__play svg { margin-left: 4px; } .vc-latest__player.is-playing .vc-latest__play { opacity: 0; pointer-events: none; } .vc-latest__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.06); } .vc-latest__progress-fill { height: 100%; background: var(--c-signal); width: 0%; transition: width 0.3s linear; } .vc-latest__player .vc-latest__time { position: absolute; bottom: 14px; left: 18px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-fg-1); padding: 4px 8px; background: rgba(11,14,16,0.7); border: 1px solid var(--c-rule-2); } .vc-latest__player .vc-latest__live { position: absolute; top: 14px; left: 18px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c-signal); padding: 4px 8px; background: rgba(11,14,16,0.7); border: 1px solid var(--c-signal); display: inline-flex; align-items: center; gap: 6px; } .vc-latest__player .vc-latest__code { position: absolute; top: 14px; right: 18px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--c-fg-3); } .vc-latest__notes { padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 12px; } .vc-latest__cat { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--c-signal); } .vc-latest__title { font-family: var(--ff-mono); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -0.015em; color: var(--c-fg-1); margin: 0; text-wrap: balance; } .vc-latest__sum { font-family: var(--ff-serif); font-size: 16px; line-height: 1.55; color: var(--c-fg-2); margin: 0; } .vc-latest__chapters { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--c-rule); display: flex; flex-direction: column; gap: 4px; } .vc-latest__ch { display: grid; grid-template-columns: 60px 1fr; gap: 12px; padding: 6px 0; cursor: pointer; transition: color .15s; align-items: baseline; } .vc-latest__ch:hover { color: var(--c-signal); } .vc-latest__ch:hover .vc-latest__ch-time { color: var(--c-signal); } .vc-latest__ch-time { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c-fg-3); } .vc-latest__ch-title { font-family: var(--ff-mono); font-size: 12px; color: var(--c-fg-2); letter-spacing: 0.04em; } @media (max-width: 1100px) { .vc-latest { grid-template-columns: 1fr; } } /* ============== Episode filter chips ============== */ .vc-epc-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; align-items: center; } .vc-epc-filter__lbl { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-3); margin-right: 8px; } .vc-chip { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-fg-2); padding: 7px 12px; background: transparent; border: 1px solid var(--c-rule); cursor: pointer; transition: all .15s; } .vc-chip:hover { color: var(--c-fg-1); border-color: var(--c-rule-2); } .vc-chip.is-active { color: var(--c-signal-ink); background: var(--c-signal); border-color: var(--c-signal); } .vc-chip__count { display: inline-block; margin-left: 8px; padding: 0 5px; background: var(--c-ink-3); color: var(--c-fg-3); font-size: 9px; letter-spacing: 0.14em; } .vc-chip.is-active .vc-chip__count { background: rgba(11,14,16,0.25); color: var(--c-signal-ink); } .vc-epc__none { grid-column: 1 / -1; padding: 64px 32px; text-align: center; font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.18em; color: var(--c-fg-3); border: 1px dashed var(--c-rule); } /* ============== AAR feed ============== */ .vc-aar { border-top: 1px solid var(--c-rule); } .vc-aar__inner { max-width: var(--col-full); margin: 0 auto; padding: 96px 80px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; } .vc-aar__head { position: sticky; top: 96px; align-self: start; } .vc-aar__feed { display: flex; flex-direction: column; } .vc-aar__entry { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 24px 0; border-top: 1px solid var(--c-rule); } .vc-aar__entry:last-child { border-bottom: 1px solid var(--c-rule); } .vc-aar__date { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-fg-3); position: relative; padding-left: 16px; } .vc-aar__date::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--c-signal); border-radius: 50%; } .vc-aar__date span { display: block; color: var(--c-fg-1); margin-top: 4px; font-size: 10px; } .vc-aar__lesson { font-family: var(--ff-serif); font-size: 19px; line-height: 1.5; color: var(--c-fg-1); margin: 0 0 8px; text-wrap: pretty; } .vc-aar__cite { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--c-fg-3); display: inline-flex; gap: 10px; align-items: center; } .vc-aar__cite a { color: var(--c-fg-2); border-bottom: 1px solid var(--c-rule); cursor: pointer; } .vc-aar__cite a:hover { color: var(--c-signal); border-color: var(--c-signal); } @media (max-width: 1100px) { .vc-aar__inner { grid-template-columns: 1fr; padding: 64px 40px; gap: 32px; } .vc-aar__head { position: static; } .vc-aar__entry { grid-template-columns: 1fr; gap: 8px; } } /* ============== Operator badge — small floating tactical chip ============== */ .vc-operator { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: stretch; background: rgba(11,14,16,0.9); border: 1px solid var(--c-rule-2); backdrop-filter: blur(8px); font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.16em; pointer-events: none; } .vc-operator__cell { padding: 8px 12px; border-right: 1px solid var(--c-rule); display: flex; flex-direction: column; gap: 4px; } .vc-operator__cell:last-child { border-right: 0; } .vc-operator__lbl { color: var(--c-fg-3); font-size: 9px; } .vc-operator__val { color: var(--c-fg-1); font-size: 11px; } .vc-operator__val--signal { color: var(--c-signal); } :root[data-chrome="off"] .vc-operator { display: none; } /* ============== Command palette ============== */ .vc-cmd-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: vc-cmd-fade 120ms var(--ease-out); } @keyframes vc-cmd-fade { from { opacity: 0; } to { opacity: 1; } } .vc-cmd { width: 640px; max-width: calc(100vw - 32px); background: var(--c-ink-2); border: 1px solid var(--c-rule-2); box-shadow: 0 24px 64px -16px rgba(0,0,0,0.8); display: flex; flex-direction: column; animation: vc-cmd-rise 180ms var(--ease-out); } @keyframes vc-cmd-rise { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .vc-cmd__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-rule); } .vc-cmd__prompt { font-family: var(--ff-mono); font-size: 13px; color: var(--c-signal); letter-spacing: 0.04em; } .vc-cmd__input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--ff-mono); font-size: 14px; color: var(--c-fg-1); letter-spacing: 0.02em; } .vc-cmd__input::placeholder { color: var(--c-fg-3); } .vc-cmd__esc { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--c-fg-3); padding: 3px 8px; border: 1px solid var(--c-rule); border-radius: 2px; } .vc-cmd__list { max-height: 360px; overflow-y: auto; padding: 8px 0; } .vc-cmd__group { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.22em; color: var(--c-fg-3); padding: 12px 20px 6px; } .vc-cmd__item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 14px; padding: 10px 20px; cursor: pointer; border-left: 2px solid transparent; font-family: var(--ff-mono); font-size: 13px; color: var(--c-fg-1); } .vc-cmd__item.is-active { background: var(--c-ink-3); border-left-color: var(--c-signal); color: var(--c-signal); } .vc-cmd__item-icon { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--c-fg-3); } .vc-cmd__item.is-active .vc-cmd__item-icon { color: var(--c-signal); } .vc-cmd__item-meta { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--c-fg-3); } .vc-cmd__empty { padding: 32px 20px; text-align: center; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.16em; color: var(--c-fg-3); } /* ============== Scramble (numeric flicker) — works on any [data-scramble] ============== */ .vc-scramble { font-variant-numeric: tabular-nums; display: inline-block; min-width: 0; } .vc-scramble.is-scrambling { color: var(--c-signal); } /* ============== Misc small additions ============== */ .vc-readout__big { font-variant-numeric: tabular-nums; } .vc-readout__row span:last-child { font-variant-numeric: tabular-nums; } /* nav layout w/ extras on the right */ .vc-nav__right { display: flex; align-items: center; gap: 4px; } @media (max-width: 1100px) { .vc-nav__clock, .vc-nav__kbd { display: none; } .vc-operator { display: none; } } /* hover lift on episode cards (subtle) */ .vc-epc { transition: border-color .15s, background .15s, transform .2s var(--ease-out); } .vc-epc:hover { transform: translateY(-1px); } /* tweak panel position below the operator badge */ .twk-panel { bottom: 80px !important; } /* ============== Patreon support tiers ============== */ .vc-pat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; max-width: 880px; } .vc-pat__tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border: 1px solid var(--c-rule-2); background: rgba(11,14,16,0.55); cursor: pointer; transition: all .15s; text-decoration: none; border-bottom: 1px solid var(--c-rule-2); } .vc-pat__tier:hover { border-color: var(--c-signal); background: rgba(11,14,16,0.85); } .vc-pat__tier--feat { border-color: var(--c-signal); background: rgba(57,182,255,0.05); } .vc-pat__tier--feat:hover { background: rgba(57,182,255,0.09); } .vc-pat__rank { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-3); text-transform: uppercase; } .vc-pat__tier--feat .vc-pat__rank { color: var(--c-signal); } .vc-pat__amt { font-family: var(--ff-mono); font-size: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--c-fg-1); line-height: 1; } .vc-pat__amt span { font-size: 13px; letter-spacing: 0.08em; color: var(--c-fg-3); margin-left: 4px; } .vc-pat__bullets { list-style: none; padding: 0; margin: 6px 0 12px; display: flex; flex-direction: column; gap: 6px; font-family: var(--ff-serif); font-size: 14px; line-height: 1.4; color: var(--c-fg-2); border-top: 1px solid var(--c-rule); padding-top: 14px; } .vc-pat__bullets li { padding-left: 16px; position: relative; } .vc-pat__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--c-signal); font-family: var(--ff-mono); font-size: 12px; } .vc-pat__go { margin-top: auto; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-signal); padding-top: 12px; border-top: 1px solid var(--c-rule); } .vc-pat__tag { position: absolute; top: -10px; right: 14px; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.2em; background: var(--c-signal); color: var(--c-signal-ink); padding: 4px 8px; } @media (max-width: 760px) { .vc-pat { grid-template-columns: 1fr; } } /* ============== Slim Support block (homepage) ============== */ .vc-support { background: var(--c-ink); border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); padding: 88px 80px; position: relative; } .vc-support__inner { max-width: 720px; margin: 0 auto; text-align: left; } .vc-support__rule { width: 64px; height: 1px; background: var(--c-rule-strong); margin-bottom: 22px; } .vc-support__h2 { font-family: var(--ff-mono); font-weight: 500; font-size: 38px; line-height: 1.1; letter-spacing: -0.015em; color: var(--c-fg-1); margin: 14px 0 16px; text-wrap: pretty; } .vc-support__lede { font-family: var(--ff-serif); font-size: 17px; line-height: 1.6; color: var(--c-fg-2); margin: 0 0 28px; max-width: 56ch; } .vc-support__row { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; } .vc-support__see { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-fg-2); text-decoration: none; border-bottom: 1px solid var(--c-rule-2); padding-bottom: 4px; transition: color .12s, border-color .12s; } .vc-support__see:hover { color: var(--c-signal); border-color: var(--c-signal); } .vc-support__opsroom { display: flex; gap: 14px; align-items: baseline; padding-top: 24px; margin-top: 4px; border-top: 1px solid var(--c-rule); font-family: var(--ff-serif); font-size: 14px; line-height: 1.55; color: var(--c-fg-3); } .vc-support__opsroom-lbl { flex: 0 0 auto; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-3); text-transform: uppercase; white-space: nowrap; } /* ============== Free-brief band (slim, demoted) ============== */ .vc-band { background: var(--c-ink-2); border-top: 1px solid var(--c-rule); padding: 28px 80px; } .vc-band__inner { max-width: var(--col-full); margin: 0 auto; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .vc-band__copy { display: flex; align-items: baseline; gap: 14px; flex: 1; min-width: 280px; } .vc-band__lbl { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-signal); text-transform: uppercase; flex: 0 0 auto; } .vc-band__txt { font-family: var(--ff-serif); font-size: 14px; line-height: 1.5; color: var(--c-fg-2); } .vc-band__form { display: flex; gap: 0; align-items: stretch; flex: 0 0 auto; border: 1px solid var(--c-rule-2); } .vc-band__input { background: transparent; border: 0; outline: 0; padding: 10px 14px; min-width: 280px; font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--c-fg-1); } .vc-band__input::placeholder { color: var(--c-fg-3); } .vc-band__btn { background: var(--c-signal); color: var(--c-signal-ink); border: 0; padding: 0 16px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em; cursor: pointer; } .vc-band__btn:hover { background: var(--c-signal-2); } .vc-band__ok { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--c-fg-1); display: flex; align-items: center; gap: 8px; } /* ============== Sub-page hero (Support / Episodes pages) ============== */ .vc-suph { position: relative; border-bottom: 1px solid var(--c-rule); padding: 88px 80px 72px; overflow: hidden; } .vc-suph__inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; } .vc-suph__h1 { margin: 18px 0 18px; font-family: var(--ff-mono); font-weight: 500; font-size: 52px; line-height: 1.05; letter-spacing: -0.02em; color: var(--c-fg-1); text-wrap: pretty; } .vc-suph__lede { font-family: var(--ff-serif); font-size: 18px; line-height: 1.6; color: var(--c-fg-2); margin: 0; max-width: 60ch; } /* Support page tier grid — wider gap, no "recommended" tag, full max-width */ .vc-pat--full { max-width: 1080px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); } .vc-pat--full .vc-pat__tag { display: none; } /* Support page — fine-print rows */ .vc-supnotes { max-width: 1080px; margin: 56px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; border-top: 1px solid var(--c-rule); padding-top: 32px; } .vc-supnotes__row { display: flex; gap: 14px; align-items: baseline; font-family: var(--ff-serif); font-size: 14px; line-height: 1.55; color: var(--c-fg-2); } .vc-supnotes__lbl { flex: 0 0 96px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-3); text-transform: uppercase; } @media (max-width: 760px) { .vc-supnotes { grid-template-columns: 1fr; } .vc-suph { padding: 64px 32px 56px; } .vc-suph__h1 { font-size: 36px; } .vc-support { padding: 64px 32px; } .vc-band { padding: 24px 32px; } .vc-band__form { width: 100%; } .vc-band__input { min-width: 0; flex: 1; } } /* ============== Doctrine TOC rows ============== */ .vc-toc { list-style: none; margin: 56px auto 0; padding: 0; max-width: var(--col-full); border-top: 1px solid var(--c-paper-edge); } .vc-toc__row { display: grid; grid-template-columns: 64px 1fr 180px; gap: 32px; align-items: baseline; padding: 32px 0 30px; border-bottom: 1px solid var(--c-paper-edge); } .vc-toc__n { font-family: var(--ff-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--c-fg-on-paper-3); font-feature-settings: "tnum"; } .vc-toc__cat { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-3); margin-bottom: 10px; } .vc-toc__title { font-family: var(--ff-serif); font-style: italic; font-weight: 500; font-size: 26px; line-height: 1.25; letter-spacing: -0.005em; color: var(--c-fg-on-paper-1); margin: 0 0 10px; text-wrap: pretty; } .vc-toc__excerpt { font-family: var(--ff-serif); font-size: 16px; line-height: 1.6; color: var(--c-fg-on-paper-2); margin: 0; max-width: 60ch; } .vc-toc__cited { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c-fg-on-paper-3); text-align: right; } @media (max-width: 760px) { .vc-toc__row { grid-template-columns: 48px 1fr; } .vc-toc__cited { grid-column: 1 / -1; text-align: left; padding-left: 80px; } .vc-toc__title { font-size: 22px; } } /* ============== Doctrine — open-library link ============== */ /* Mirrors the .vc-toc__row grid (64px number / 1fr body / 180px right-meta) so the label aligns under the pillar bodies above instead of hanging flush against the section's left edge. */ .vc-toc__open { display: grid; grid-template-columns: 64px 1fr 180px; gap: 32px; align-items: baseline; padding: 28px 0 4px; margin: 16px auto 0; max-width: var(--col-full); border-top: 1px solid var(--c-paper-edge); text-decoration: none; transition: color .12s; } .vc-toc__open-spacer { /* invisible cell, claims the 64px column */ } .vc-toc__open-body { display: flex; flex-direction: column; gap: 8px; } .vc-toc__open-lbl { font-family: var(--ff-mono); font-size: 14px; letter-spacing: 0.18em; color: var(--c-fg-on-paper-1); } .vc-toc__open-meta { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c-fg-on-paper-3); } .vc-toc__open-arrow { font-family: var(--ff-mono); font-size: 18px; color: var(--c-signal); transition: transform .15s; text-align: right; } .vc-toc__open:hover .vc-toc__open-arrow { transform: translateX(4px); } .vc-toc__open:hover .vc-toc__open-lbl { color: var(--c-signal); } @media (max-width: 760px) { .vc-toc__open { grid-template-columns: 48px 1fr auto; gap: 16px; padding-left: 80px; } } /* ============== AAR — open-ledger link ============== */ .vc-aar__open { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: baseline; padding: 28px 0 4px; border-top: 1px solid var(--c-rule); margin-top: 8px; text-decoration: none; transition: color .12s; } .vc-aar__open-lbl { font-family: var(--ff-mono); font-size: 14px; letter-spacing: 0.18em; color: var(--c-fg-1); } .vc-aar__open-meta { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--c-fg-3); } .vc-aar__open-arrow { font-family: var(--ff-mono); font-size: 18px; color: var(--c-signal); transition: transform .15s; } .vc-aar__open:hover .vc-aar__open-arrow { transform: translateX(4px); } .vc-aar__open:hover .vc-aar__open-lbl { color: var(--c-signal); } /* ============== About page ============== */ /* Hero variant — taller, lede + headline only, no rule. Inherits .vc-suph chassis. */ .vc-about__hero { max-width: 1080px; } .vc-about__deck { margin: 22px 0 14px; font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.18em; color: var(--c-fg-2); text-transform: uppercase; } .vc-about__h1 { font-size: 76px; line-height: 1.02; letter-spacing: -0.025em; margin-top: 4px; } .vc-about__h1 em { font-family: var(--ff-serif); font-style: italic; font-weight: 500; letter-spacing: -0.015em; color: var(--c-signal); } @media (max-width: 760px) { .vc-about__h1 { font-size: 44px; } } /* Dossier body — paper, two-column. */ .vc-about { background: var(--c-paper); color: var(--c-fg-on-paper-1); border-bottom: 1px solid var(--c-paper-edge); padding: 96px 0; /* paper grain — same recipe as the bulletin */ background-image: linear-gradient(180deg, rgba(214,205,184,0.0) 0%, rgba(214,205,184,0.18) 100%), radial-gradient(ellipse at 8% 0%, rgba(214,205,184,0.35) 0%, rgba(214,205,184,0) 40%), radial-gradient(ellipse at 92% 100%, rgba(214,205,184,0.30) 0%, rgba(214,205,184,0) 45%); } .vc-about__inner { max-width: 1180px; margin: 0 auto; padding: 0 80px; display: grid; grid-template-columns: 280px 1fr; gap: 96px; } /* Sidebar — dossier card + uniforms list */ .vc-about__side { position: sticky; top: 96px; align-self: start; } .vc-about__doc { border: 1px solid var(--c-paper-edge); padding: 18px 20px; display: grid; gap: 8px; } .vc-about__doc-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.2em; } .vc-about__doc-row > span:first-child { color: var(--c-fg-on-paper-3); } .vc-about__doc-row > span:last-child { color: var(--c-fg-on-paper-1); font-weight: 500; } .vc-about__rule { height: 1px; background: var(--c-paper-edge); margin: 28px 0 24px; } .vc-about__sidehead { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-3); margin-bottom: 18px; } .vc-about__uniforms { list-style: none; margin: 0; padding: 0; } .vc-about__uniform { padding: 14px 0; border-top: 1px solid var(--c-paper-edge); } .vc-about__uniform:last-child { border-bottom: 1px solid var(--c-paper-edge); } .vc-about__uniform-cat { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-1); margin-bottom: 6px; } .vc-about__uniform-body { font-family: var(--ff-serif); font-size: 13px; line-height: 1.5; color: var(--c-fg-on-paper-2); } /* Body — long-form serif */ .vc-about__body { max-width: 64ch; } .vc-about__lede { font-family: var(--ff-serif); font-size: 22px; line-height: 1.55; color: var(--c-fg-on-paper-1); margin: 0 0 28px; text-wrap: pretty; } .vc-about__dropcap { font-family: var(--ff-mono); font-weight: 500; font-size: 56px; line-height: 0.85; float: left; margin: 8px 12px 0 0; color: var(--c-fg-on-paper-1); } .vc-about__p { font-family: var(--ff-serif); font-size: 18px; line-height: 1.65; color: var(--c-fg-on-paper-1); margin: 0 0 24px; text-wrap: pretty; } .vc-about__p em { font-style: italic; color: var(--c-fg-on-paper-1); font-weight: 500; } .vc-about__pull { margin: 36px 0 32px; padding: 0 0 0 28px; border-left: 2px solid var(--c-fg-on-paper-1); font-family: var(--ff-serif); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--c-fg-on-paper-1); position: relative; text-wrap: pretty; } .vc-about__pull-mark { font-style: normal; font-size: 56px; line-height: 0; color: var(--c-paper-edge); position: relative; top: 16px; margin-right: 4px; } /* Signature block — same vocabulary as the hero bulletin */ .vc-about__sig { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--c-paper-edge); display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .vc-about__sig-cs { font-family: var(--ff-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--c-fg-on-paper-1); margin-bottom: 6px; } .vc-about__sig-by { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-3); } .vc-about__sig-stamp { display: flex; flex-direction: column; align-items: center; border: 1.5px solid rgba(20,24,28,0.55); color: rgba(20,24,28,0.78); padding: 10px 16px; transform: rotate(-3deg); font-family: var(--ff-mono); text-transform: uppercase; opacity: 0.78; } .vc-about__sig-stamp-top { font-size: 9px; letter-spacing: 0.28em; } .vc-about__sig-stamp-mid { font-size: 22px; letter-spacing: 0.06em; font-weight: 500; line-height: 1; margin: 4px 0; } .vc-about__sig-stamp-bot { font-size: 8px; letter-spacing: 0.24em; } @media (max-width: 980px) { .vc-about__inner { grid-template-columns: 1fr; gap: 48px; padding: 0 40px; } .vc-about__side { position: static; } .vc-about__body { max-width: none; } .vc-about { padding: 64px 0; } .vc-about__lede { font-size: 18px; } .vc-about__p { font-size: 16px; } .vc-about__pull { font-size: 18px; } } /* ============== Field Notes binder — pull quote replacement for stat block ============== */ .vc-fna__pull { margin: 0 0 18px; padding: 0; position: relative; font-family: var(--ff-serif); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--c-fg-on-paper-2); max-width: 36ch; } .vc-fna__pull-mark { font-family: var(--ff-serif); font-style: normal; font-size: 56px; line-height: 0; color: var(--c-paper-edge); position: relative; top: 16px; margin-right: 4px; } /* ============== Hero — Direction C: Standing Order Bulletin ============== */ .vc-hero--bulletin { padding: 96px 0 88px; } .vc-hero__inner--bulletin { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 80px; display: block; } .vc-hero__chrome { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } /* Show signature deck — sits between the chrome eyebrow and the bulletin paper. Centered to align with the bulletin's max-width (980px). */ .vc-hero__deck { font-family: var(--ff-serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--c-fg-2); margin: -8px auto 24px; max-width: 980px; letter-spacing: 0.005em; } :root[data-density="compact"] .vc-hero__deck { font-size: 17px; margin-bottom: 18px; } /* The paper sheet itself */ .vc-bulletin { position: relative; max-width: 980px; margin: 0 auto; background: var(--c-paper); color: var(--c-fg-on-paper-1); padding: 56px 72px 48px; border: 1px solid var(--c-paper-edge); /* paper texture: vertical fiber tint + corner shading via stacked gradients */ background-image: repeating-linear-gradient( 0deg, rgba(20,24,28,0.018) 0, rgba(20,24,28,0.018) 1px, transparent 1px, transparent 3px ), radial-gradient(ellipse at 90% -10%, rgba(20,24,28,0.10), transparent 40%), radial-gradient(ellipse at -10% 110%, rgba(20,24,28,0.08), transparent 45%); /* slight rotation reads as "pinned to the wall" */ transform: rotate(-0.35deg); box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 24px 48px -16px rgba(0,0,0,0.55), 0 4px 16px -4px rgba(0,0,0,0.4); } /* Tape strips at the top corners */ .vc-bulletin__tape { position: absolute; top: -10px; width: 88px; height: 22px; background: rgba(220, 215, 195, 0.55); border-left: 1px solid rgba(20,24,28,0.08); border-right: 1px solid rgba(20,24,28,0.08); box-shadow: 0 1px 1px rgba(0,0,0,0.18), inset 0 0 8px rgba(255,255,255,0.25); } .vc-bulletin__tape--l { left: 8%; transform: rotate(-6deg); } .vc-bulletin__tape--r { right: 8%; transform: rotate(5deg); } /* Document header band */ .vc-bulletin__head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--c-fg-on-paper-3); text-transform: uppercase; margin-bottom: 18px; } .vc-bulletin__doc { display: flex; gap: 10px; align-items: baseline; } .vc-bulletin__kind { color: var(--c-fg-on-paper-1); font-weight: 600; } .vc-bulletin__no { color: var(--c-fg-on-paper-1); } .vc-bulletin__sep { opacity: 0.55; } .vc-bulletin__lbl { opacity: 0.7; } .vc-bulletin__val { color: var(--c-fg-on-paper-1); } .vc-bulletin__rule { height: 1px; background: rgba(20,24,28,0.35); margin: 0 0 36px; position: relative; } .vc-bulletin__rule::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: rgba(20,24,28,0.18); } /* Numbered blocks */ .vc-bulletin__block { margin-bottom: 36px; } .vc-bulletin__block:last-of-type { margin-bottom: 28px; } .vc-bulletin__nlbl { display: flex; align-items: baseline; gap: 14px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-fg-on-paper-3); margin-bottom: 14px; } .vc-bulletin__nlbl > span:first-child { color: var(--c-fg-on-paper-1); border: 1px solid rgba(20,24,28,0.45); padding: 3px 8px; letter-spacing: 0.08em; } /* Thesis statement — large serif, the centerpiece */ .vc-bulletin__thesis { font-family: var(--ff-serif); font-weight: 400; font-size: 30px; line-height: 1.32; letter-spacing: -0.005em; color: var(--c-fg-on-paper-1); margin: 0 0 14px; text-wrap: pretty; max-width: 38ch; } .vc-bulletin__thesis em { font-style: italic; color: var(--c-fg-on-paper-1); } .vc-bulletin__sub { font-family: var(--ff-serif); font-size: 16px; line-height: 1.55; color: var(--c-fg-on-paper-2); margin: 0; max-width: 56ch; } /* Who-this-is-for */ .vc-bulletin__who { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-family: var(--ff-serif); font-size: 16px; line-height: 1.55; color: var(--c-fg-on-paper-2); max-width: 60ch; } .vc-bulletin__who li { display: flex; gap: 12px; align-items: baseline; } .vc-bulletin__who-glyph { font-family: var(--ff-mono); color: var(--c-fg-on-paper-3); font-size: 14px; flex: 0 0 auto; } /* Reading list */ .vc-bulletin__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .vc-bulletin__item { border-top: 1px solid rgba(20,24,28,0.18); } .vc-bulletin__item:last-child { border-bottom: 1px solid rgba(20,24,28,0.18); } .vc-bulletin__item-link { display: grid; grid-template-columns: 48px 1fr auto; gap: 18px; padding: 18px 6px 18px 0; text-decoration: none; color: inherit; transition: background .12s, padding .15s var(--ease-out); align-items: baseline; } .vc-bulletin__item-link:hover { background: rgba(20,24,28,0.04); padding-left: 8px; padding-right: 8px; } .vc-bulletin__item-link:hover .vc-bulletin__item-go { transform: translateX(4px); color: var(--c-fg-on-paper-1); } .vc-bulletin__item-n { font-family: var(--ff-mono); font-size: 22px; font-weight: 500; color: var(--c-fg-on-paper-3); letter-spacing: -0.01em; line-height: 1; } .vc-bulletin__item-body { display: flex; flex-direction: column; gap: 5px; } .vc-bulletin__item-cat { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-3); text-transform: uppercase; } .vc-bulletin__item-title { font-family: var(--ff-serif); font-size: 19px; line-height: 1.3; color: var(--c-fg-on-paper-1); letter-spacing: -0.005em; } .vc-bulletin__item-why { font-family: var(--ff-serif); font-size: 14px; line-height: 1.5; color: var(--c-fg-on-paper-2); font-style: italic; } .vc-bulletin__item-go { font-family: var(--ff-mono); font-size: 18px; color: var(--c-fg-on-paper-3); align-self: center; transition: transform .15s var(--ease-out), color .15s; } /* Signature block */ .vc-bulletin__sig { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; } .vc-bulletin__sig-cs { font-family: var(--ff-mono); font-size: 14px; letter-spacing: 0.16em; color: var(--c-fg-on-paper-1); margin-bottom: 4px; } .vc-bulletin__sig-by { font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--c-fg-on-paper-3); text-transform: uppercase; } .vc-bulletin__sig-stamp { display: flex; flex-direction: column; align-items: center; border: 1.5px solid rgba(20,24,28,0.55); padding: 10px 18px; transform: rotate(3.5deg); font-family: var(--ff-mono); color: rgba(20,24,28,0.65); background: rgba(20,24,28,0.02); /* faded ink-stamp feel */ opacity: 0.78; } .vc-bulletin__sig-stamp-top { font-size: 9px; letter-spacing: 0.28em; } .vc-bulletin__sig-stamp-mid { font-size: 22px; letter-spacing: 0.06em; font-weight: 500; line-height: 1; margin: 4px 0 4px;} .vc-bulletin__sig-stamp-bot { font-size: 8px; letter-spacing: 0.24em; } /* Posted-alongside line */ .vc-hero__alongside { margin: 36px auto 0; max-width: 980px; display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-fg-3); text-transform: uppercase; } .vc-hero__alongside-lbl { color: var(--c-fg-3); } .vc-hero__alongside-item { color: var(--c-fg-2); text-decoration: none; border-bottom: 1px solid transparent; transition: color .12s, border-color .12s; } .vc-hero__alongside-item:hover { color: var(--c-signal); border-color: var(--c-signal); } .vc-hero__alongside-sep { color: var(--c-rule-strong); } @media (max-width: 1024px) { .vc-hero__inner--bulletin { padding: 0 32px; } .vc-bulletin { padding: 40px 32px 36px; } .vc-bulletin__head { flex-direction: column; gap: 6px; } .vc-bulletin__thesis { font-size: 24px; } .vc-bulletin__item-link { grid-template-columns: 36px 1fr auto; gap: 12px; } .vc-bulletin__sig-stamp { transform: rotate(2deg) scale(0.85); } } /* ============== Hero opening sequence ============== Single intentional motion moment on first paint. Honors reduced-motion via the JS gate (the .is-opening class is never added if the user prefers it). No looping motion. No motion outside this block. */ /* Static callsign chip in the navbar — replaces the live UTC clock. */ .vc-nav__callsign { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--c-fg-3); border: 1px solid var(--c-rule-2); padding: 6px 10px; white-space: nowrap; } @media (max-width: 1100px) { .vc-nav__callsign { display: none; } } /* Bulletin: NO entry animation. The document is a fact — already on the wall. The tape pinning is the only entry beat. Quieter, more editorial. */ /* Tape — single squash on pin. No rotation animation, no wobble. Each strip's resting rotation is fixed in the base rule and never touched. */ @keyframes vc-tape-pin { 0% { opacity: 0; transform: var(--tape-rot) scaleY(0.7); } 60% { opacity: 1; transform: var(--tape-rot) scaleY(1.04); } 100% { opacity: 1; transform: var(--tape-rot) scaleY(1); } } .vc-bulletin.is-opening .vc-bulletin__tape--l { --tape-rot: rotate(-6deg); animation: vc-tape-pin 200ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both; transform-origin: 50% 100%; } .vc-bulletin.is-opening .vc-bulletin__tape--r { --tape-rot: rotate(5deg); animation: vc-tape-pin 200ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms both; transform-origin: 50% 100%; } /* Header rule — draws left to right after tape lands. Targets only the rule that follows the head, not the trailing rule. */ .vc-bulletin.is-opening .vc-bulletin__head + .vc-bulletin__rule { transform-origin: 0% 50%; animation: vc-rule-draw 220ms cubic-bezier(0.2, 0.6, 0.25, 1) 320ms both; } @keyframes vc-rule-draw { 0% { transform: scaleX(0); opacity: 0.4; } 100% { transform: scaleX(1); opacity: 1; } } /* Block label cascade (01 → 02 → 03). The Scramble component handles the digits; this animates the label-row container into place. */ @keyframes vc-nlbl-in { 0% { opacity: 0; transform: translateX(-4px); } 100% { opacity: 1; transform: translateX(0); } } .vc-bulletin.is-opening .vc-bulletin__nlbl { animation: vc-nlbl-in 200ms cubic-bezier(0.2, 0.6, 0.25, 1) both; animation-delay: calc(420ms + var(--bulletin-i, 0) * 90ms); } /* Reading-list arrows — each row's "READ →" reveals after its content. */ @keyframes vc-arrow-in { 0% { opacity: 0; transform: translateX(-3px); } 100% { opacity: 1; transform: translateX(0); } } .vc-bulletin.is-opening .vc-bulletin__item .vc-bulletin__item-go { animation: vc-arrow-in 180ms cubic-bezier(0.2, 0.6, 0.25, 1) both; animation-delay: calc(620ms + var(--list-i, 0) * 110ms); } /* Stamp impact — the last beat. Scale + rotate + ink-bleed (blur). Final state matches the existing rest transform on .vc-bulletin__sig-stamp. */ @keyframes vc-stamp-slam { 0% { opacity: 0; transform: rotate(-8deg) scale(1.18); filter: blur(4px); } 60% { opacity: 0.85; transform: rotate(-2deg) scale(0.98); filter: blur(0.6px); } 100% { opacity: 0.78; transform: rotate(-3deg) scale(1); filter: blur(0); } } .vc-bulletin.is-opening .vc-bulletin__sig-stamp { animation: vc-stamp-slam 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 720ms both; } /* Reduced-motion belt-and-suspenders: even if the JS gate slipped, kill every animation in this section. */ @media (prefers-reduced-motion: reduce) { .vc-bulletin.is-opening, .vc-bulletin.is-opening * { animation: none !important; } }