/* ═══════════════════════════════════════════════════════════════════ NOVARAIL DESIGN SYSTEM v3 — "HALLMARK" The assay office for the agent economy. Doctrine: - Printed, not lit. Warm soot ground, bone ink, one flat seal red. Zero gradients, zero glow, zero blur, zero drifting backgrounds. - The grid is visible: 1px hairlines structure the page like a well-set ledger. Left-aligned everything. 2px corners. - Type carries the identity: Switzer at display scale against tracked Fragment Mono microlabels. Every numeral is mono. - Motion is reserved for the act of verification (the Strike, the sweep, the clearing tick). Nothing loops. Nothing idles. - Color is truthful: green means cleared, amber means pending, veto red appears only beside the word it qualifies. Loaded ONLY on pages that set , after theme-v2.css. Uses fresh --an-* tokens and .an-* classes so nothing here can collide with v2 or with the legacy palette shim. ═══════════════════════════════════════════════════════════════════ */ /* Fonts (Switzer via Fontshare, Fragment Mono via Google) are loaded by tags in each v3 page head, in parallel with this sheet. No @import: an import chain here would serialize font loading behind theme.js. */ html[data-design="v3"] { --an-bg: var(--nr-canvas); --an-surface: var(--nr-surface); --an-surface-2: var(--nr-surface-raised); --an-surface-3: var(--nr-surface-active); /* the one panel the user is acting on */ --an-code-bg: #131110; /* code sits BELOW the panel, not above */ --an-hairline: #322D27; --an-hairline-2: #4A443B; --an-hairline-3: #756B5E; /* form-control boundaries: 3:1+ against fill, surface, bg */ --an-ink: var(--nr-text); --an-ink-2: var(--nr-text-secondary); --an-ink-3: var(--nr-text-muted); --an-seal: var(--nr-rust); /* fills, seals, primary CTAs (dark label on it) */ --an-seal-text: var(--nr-accent-text); /* text-size red, AA on bg + surface */ --an-cleared: var(--nr-verified); /* verified / settled */ --an-pending: #D9A13B; /* pending / awaiting */ --an-veto: #FF6B5E; /* failures; only ever text beside its word */ --an-sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, sans-serif; --an-mono: 'Fragment Mono', 'IBM Plex Mono', ui-monospace, monospace; --an-max: 1360px; --an-ease: cubic-bezier(.2,.8,.2,1); --an-drop: cubic-bezier(.55,0,1,.45); } /* Light-canvas values for the v3 structural tokens that don't alias onto --nr-* (those flip automatically). Latent until light mode is enabled; provisional pending visual QA. */ html[data-design="v3"][data-theme="light"] { --an-hairline: #E4DDD8; --an-hairline-2: #CFC7C1; --an-hairline-3: #8A8177; /* keeps 3:1+ against white and canvas */ --an-code-bg: #F3EDE6; /* warm paper, still reads as a quoted block */ --an-pending: #8A6116; --an-veto: #B3382B; } /* ── Ground ──────────────────────────────────────────────────────── */ html[data-design="v3"], html[data-design="v3"] body { background: var(--an-bg); color: var(--an-ink); font-family: var(--an-sans); letter-spacing: 0; -webkit-font-smoothing: antialiased; } html[data-design="v3"] body { overflow-x: hidden; } html[data-design="v3"] ::selection { background: rgba(201,87,58,.32); color: var(--an-ink); } html[data-design="v3"] :focus-visible { outline: 2px solid var(--an-seal); outline-offset: 2px; } html[data-design="v3"] ::-webkit-scrollbar { width: 10px; } html[data-design="v3"] ::-webkit-scrollbar-track { background: var(--an-bg); } html[data-design="v3"] ::-webkit-scrollbar-thumb { background: var(--an-hairline-2); border: 2px solid var(--an-bg); border-radius: 0; } /* zero-specificity default so page-local single-class anchor styles (e.g. legacy .cta buttons) always win over it */ :where(html[data-design="v3"] a) { color: inherit; text-decoration: none; } :where(html[data-design="v3"] a:hover) { color: var(--an-ink); } /* ── Layout ──────────────────────────────────────────────────────── */ .an-wrap { max-width: var(--an-max); margin: 0 auto; padding: 0 24px; } .an-rule { border: 0; border-top: 1px solid var(--an-hairline); margin: 0; } .an-section { border-top: 1px solid var(--an-hairline); padding: 72px 0; } .an-section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 40px; } /* ── Typography ──────────────────────────────────────────────────── */ .an-display { font-weight: 600; font-size: clamp(3rem, 7vw, 6.5rem); line-height: .98; letter-spacing: -.025em; color: var(--an-ink); } .an-display-2 { font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.04; letter-spacing: -.02em; color: var(--an-ink); } .an-h3 { font-weight: 600; font-size: 1.4rem; line-height: 1.2; letter-spacing: -.01em; color: var(--an-ink); } .an-body { font-size: 1.0625rem; line-height: 1.6; color: var(--an-ink-2); } .an-body strong, .an-body b { color: var(--an-ink); font-weight: 500; } .an-kicker { font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3); font-weight: 400; display: flex; align-items: center; gap: 12px; } .an-kicker .idx { color: var(--an-ink-2); } .an-kicker::after { content: ""; flex: 0 0 32px; height: 1px; background: var(--an-hairline-2); } .an-mono { font-family: var(--an-mono); font-variant-numeric: tabular-nums; } .an-num { font-family: var(--an-mono); font-variant-numeric: tabular-nums; } /* every numeral is mono */ .an-microlabel { font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3); } .an-mrz { font-family: var(--an-mono); font-size: .75rem; letter-spacing: .08em; color: var(--an-ink-3); white-space: nowrap; overflow: hidden; text-overflow: clip; -webkit-user-select: all; user-select: all; } /* ── Nav: a printed header row, not a floating pill ─────────────── */ .an-nav { position: sticky; top: 0; z-index: 90; background: var(--an-bg); border-bottom: 1px solid var(--an-hairline); } .an-nav-in { max-width: var(--an-max); margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 28px; } .an-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9375rem; letter-spacing: .08em; color: var(--an-ink); } .an-brand svg { display: block; } .an-nav-links { display: flex; gap: 22px; align-items: center; margin-left: 8px; } .an-nav-links a { font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-2); padding: 21px 0 19px; border-bottom: 2px solid transparent; transition: color .12s var(--an-ease); } .an-nav-links a:hover { color: var(--an-ink); } .an-nav-links a[aria-current="page"] { color: var(--an-ink); border-bottom-color: var(--an-seal); } .an-nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .an-nav-status { display: none; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--an-hairline); font-family: var(--an-mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-3); } .an-nav-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--an-cleared); } .an-nav-status.on { display: inline-flex; } @media (min-width: 900px) { .an-nav-status.on { display: inline-flex; } } .an-signin { font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-2); } .an-signin:hover { color: var(--an-ink); } /* mobile nav */ @media (max-width: 760px) { .an-nav-in { gap: 12px; height: 54px; padding: 0 16px; } .an-brand { font-size: .8125rem; gap: 8px; } .an-nav-links { gap: 12px; } .an-nav-links a { padding: 18px 0 16px; } .an-nav-links a.an-nav-opt { display: none; } .an-nav-status { display: none !important; } .an-nav-right { gap: 10px; } .an-nav-right .an-btn { display: none; } .an-signin { white-space: nowrap; } } /* phones: the bottom tab bar (theme.js, <=640px) carries navigation, so the top-bar link row goes away and brand + Sign in always fit, even at 320px */ @media (max-width: 640px) { .an-nav-links { display: none; } } /* ── Buttons: flat, stamped, 2px corners ─────────────────────────── */ .an-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 2px; cursor: pointer; font-family: var(--an-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--an-hairline-2); background: transparent; color: var(--an-ink); transition: border-color .12s var(--an-ease), background .12s var(--an-ease), transform .05s; white-space: nowrap; } .an-btn:hover { border-color: var(--an-ink-3); background: var(--an-surface); color: var(--an-ink); } .an-btn:active { transform: translateY(1px); } .an-btn.primary { background: var(--an-seal); border-color: var(--an-seal); color: #16100D; font-weight: 700; } .an-btn.primary:hover { background: #ED5D36; border-color: #ED5D36; } .an-btn.small { height: 32px; padding: 0 14px; font-size: .6875rem; } .an-btn[disabled] { opacity: .45; cursor: not-allowed; } /* ── Record card: paper on the desk ──────────────────────────────── */ .an-record { background: var(--an-surface); border: 1px solid var(--an-hairline); border-radius: 2px; transition: border-color .12s var(--an-ease); } .an-record:hover { border-color: var(--an-hairline-2); } .an-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--an-hairline); } .an-record-body { padding: 18px; } .an-record.ticket { border-top-style: dashed; } /* definition rows with dotted leaders */ .an-field { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: .8125rem; } .an-field .k { font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--an-ink-3); flex-shrink: 0; } .an-field .leader { flex: 1; border-bottom: 1px dotted var(--an-hairline-2); transform: translateY(-3px); min-width: 16px; } .an-field .v { font-family: var(--an-mono); font-variant-numeric: tabular-nums; color: var(--an-ink); text-align: right; word-break: break-all; } .an-field .v.dim { color: var(--an-ink-2); } /* ── Endorsement chips: bracketed mono, meaning-bearing color only ─ */ .an-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border: 1px solid var(--an-hairline-2); border-radius: 2px; font-family: var(--an-mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-2); white-space: nowrap; } .an-chip .cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--an-ink-3); flex: 0 0 auto; } .an-chip.cleared { color: var(--an-cleared); border-color: rgba(109,189,138,.4); } .an-chip.cleared .cdot { background: var(--an-cleared); } .an-chip.pending { color: var(--an-pending); border-color: rgba(217,161,59,.4); border-style: dashed; } .an-chip.pending .cdot { background: var(--an-pending); } .an-chip.veto { color: var(--an-veto); border-color: rgba(255,107,94,.4); } .an-chip.veto .cdot { background: var(--an-veto); } .an-chip.beta { color: var(--an-ink-3); border-style: dashed; } /* ── The Ledger: the site's most important component ─────────────── */ .an-ledger { width: 100%; border-collapse: collapse; } .an-ledger caption { text-align: left; } .an-ledger thead th { font-family: var(--an-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3); font-weight: 400; text-align: left; padding: 10px 14px; border-top: 1px solid var(--an-hairline-2); border-bottom: 1px solid var(--an-hairline); } .an-ledger tbody td { padding: 14px; font-size: .875rem; color: var(--an-ink-2); border-bottom: 1px solid var(--an-hairline); vertical-align: middle; } .an-ledger tbody tr { transition: background .12s var(--an-ease); } .an-ledger tbody tr:hover { background: var(--an-surface); } .an-ledger tbody tr.rowlink { cursor: pointer; } .an-ledger .num { font-family: var(--an-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--an-ink); } .an-ledger th.num { text-align: right; } .an-ledger .primary-cell { color: var(--an-ink); font-weight: 500; } .an-ledger .sub { display: block; font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--an-ink-3); margin-top: 3px; text-transform: none; } /* mobile: ledger rows collapse into dotted-leader records */ @media (max-width: 760px) { .an-ledger.collapsible thead { display: none; } .an-ledger.collapsible tbody tr { display: block; border: 1px solid var(--an-hairline); border-radius: 2px; background: var(--an-surface); margin-bottom: 10px; padding: 6px 14px; } .an-ledger.collapsible tbody td { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; border: 0; padding: 7px 0; text-align: left; flex-wrap: wrap; /* chips/actions wrap instead of forcing a min width past the card edge */ } .an-ledger.collapsible tbody td.num { text-align: left; } .an-ledger.collapsible tbody td[data-th]::before { content: attr(data-th); font-family: var(--an-mono); font-size: .625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-3); margin-right: auto; padding-right: 12px; } } /* ── Stat band: departure-board cells ────────────────────────────── */ .an-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--an-hairline); border-radius: 2px; } .an-stats .cell { padding: 20px 22px; border-left: 1px solid var(--an-hairline); } .an-stats .cell:first-child { border-left: 0; } .an-stats .v { font-family: var(--an-mono); font-variant-numeric: tabular-nums; font-size: 1.75rem; color: var(--an-ink); line-height: 1.1; } .an-stats .k { margin-top: 6px; } @media (max-width: 760px) { .an-stats { grid-template-columns: 1fr 1fr; } .an-stats .cell:nth-child(3) { border-left: 0; } .an-stats .cell:nth-child(n+3) { border-top: 1px solid var(--an-hairline); } } /* ── The Seal (hallmark) ─────────────────────────────────────────── */ .an-seal-mark { display: inline-block; } .an-seal-mark svg { display: block; } /* Strike animation: drop, impact, settle. Applied by hallmark.js. */ .an-strike { opacity: 0; transform: scale(1.45) rotate(-7deg); } .an-strike.struck { animation: an-strike-drop 160ms var(--an-drop) forwards, an-strike-settle 120ms 160ms ease-out forwards; } @keyframes an-strike-drop { to { opacity: 1; transform: scale(1) rotate(-4deg); } } @keyframes an-strike-settle { from { transform: scale(1) rotate(-4deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } } .an-strike-ring { position: absolute; inset: -6px; border: 1px solid var(--an-seal); border-radius: 50%; opacity: 0; pointer-events: none; } .struck + .an-strike-ring, .an-strike.struck .an-strike-ring { animation: an-ring 420ms 150ms ease-out; } @keyframes an-ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } } /* document kick on impact */ .an-kick.struck-kick { animation: an-kick 100ms steps(2) 1; } @keyframes an-kick { 50% { transform: translateY(1px); } } /* ── The Tape: settlements print like a receipt ──────────────────── */ .an-tape { border: 1px solid var(--an-hairline); border-radius: 2px; background: var(--an-surface); overflow: hidden; } .an-tape-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--an-hairline); } .an-tape-rows { overflow: hidden; } .an-tape-row { display: flex; gap: 18px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--an-hairline); font-family: var(--an-mono); font-size: .75rem; letter-spacing: .02em; color: var(--an-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .an-tape-row:last-child { border-bottom: 0; } .an-tape-row .t { color: var(--an-ink-3); flex: 0 0 auto; } .an-tape-row .what { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; } .an-tape-row .amt { color: var(--an-ink); flex: 0 0 auto; } .an-tape-row .st { flex: 0 0 auto; letter-spacing: .12em; } .an-tape-row .st.cleared { color: var(--an-cleared); } .an-tape-row .st.pending { color: var(--an-pending); } .an-tape-row .st.veto { color: var(--an-veto); } .an-tape-row.fresh { animation: an-print 240ms steps(24) 1; } @keyframes an-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* ── Tier ladder: three stations on one drawn line ───────────────── */ .an-ladder { display: flex; flex-direction: column; gap: 0; position: relative; } .an-ladder .station { display: flex; gap: 16px; padding: 18px 0; position: relative; } .an-ladder .station::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--an-hairline-2); } .an-ladder .station:first-child::before { top: 24px; } .an-ladder .station:last-child::before { bottom: auto; height: 24px; } .an-ladder .mark { position: relative; z-index: 1; flex: 0 0 27px; padding-top: 2px; } .an-ladder .station h4 { font-size: 1rem; font-weight: 600; color: var(--an-ink); margin-bottom: 4px; } .an-ladder .station p { font-size: .875rem; line-height: 1.5; color: var(--an-ink-2); } /* ── Forms: bureau inputs ────────────────────────────────────────── */ .an-input, .an-select, .an-textarea { width: 100%; background: var(--an-surface-2); border: 1px solid var(--an-hairline-3); border-radius: 2px; padding: 11px 13px; color: var(--an-ink); font-family: var(--an-sans); font-size: .9375rem; transition: border-color .12s var(--an-ease); } .an-input:focus, .an-select:focus, .an-textarea:focus { outline: none; border-color: var(--an-ink-3); box-shadow: inset 0 0 0 1px var(--an-hairline-3); } .an-input::placeholder, .an-textarea::placeholder { color: var(--an-ink-3); } .an-textarea { min-height: 96px; resize: vertical; font-family: var(--an-mono); font-size: .8125rem; } .an-select { -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%238D8578'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } .an-select option { background: var(--an-surface-2); color: var(--an-ink); } .an-label { display: block; font-family: var(--an-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3); margin: 0 0 6px; } /* ── Bureau tabs ─────────────────────────────────────────────────── */ .an-tabs { display: flex; border-bottom: 1px solid var(--an-hairline); gap: 4px; } .an-tabs button { background: transparent; border: 0; cursor: pointer; padding: 12px 16px; font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; color: var(--an-ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s var(--an-ease); } .an-tabs button:hover { color: var(--an-ink-2); } .an-tabs button.on { color: var(--an-ink); border-bottom-color: var(--an-seal); } /* ── Notes, code, output ─────────────────────────────────────────── */ .an-note { font-size: .8125rem; line-height: 1.55; color: var(--an-ink-2); border: 1px solid var(--an-hairline); border-left: 2px solid var(--an-hairline-2); border-radius: 2px; padding: 12px 14px; background: var(--an-surface); } .an-note b, .an-note strong { color: var(--an-ink); font-weight: 500; } .an-code, .an-out { background: var(--an-code-bg); border: 1px solid var(--an-hairline); border-radius: 2px; padding: 14px; font-family: var(--an-mono); font-size: .75rem; line-height: 1.6; color: var(--an-ink-2); overflow: auto; white-space: pre-wrap; word-break: break-word; } .an-code { white-space: pre; } .an-out { max-height: 340px; } .an-out .ok { color: var(--an-cleared); } .an-out .bad { color: var(--an-veto); } .an-out .warn { color: var(--an-pending); } /* ── Footer ──────────────────────────────────────────────────────── */ /* Carries .site-footer so footer-init.js does not inject the v2 footer. */ footer.site-footer.an-foot { border-top: 1px solid var(--an-hairline); margin: 96px 0 0; background: var(--an-bg); padding: 0; max-width: none; font-family: var(--an-sans); color: var(--an-ink-2); text-align: left; } .an-foot-in { max-width: var(--an-max); margin: 0 auto; padding: 48px 24px 24px; } .an-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } .an-foot h5 { font-family: var(--an-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3); font-weight: 400; margin-bottom: 14px; } .an-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .an-foot ul a { font-size: .8125rem; color: var(--an-ink-2); display: inline-flex; align-items: center; gap: 8px; } .an-foot ul a:hover { color: var(--an-ink); } .an-foot ul .an-chip { font-size: .5625rem; padding: 1px 6px; } .an-foot-brandline { font-size: .875rem; color: var(--an-ink-2); line-height: 1.6; max-width: 34ch; margin-top: 12px; } .an-foot-legal { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--an-hairline); margin-top: 40px; padding-top: 20px; font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .06em; color: var(--an-ink-3); } .an-foot-legal a { color: var(--an-ink-3); } .an-foot-legal a:hover { color: var(--an-ink-2); } @media (max-width: 860px) { .an-foot-grid { grid-template-columns: 1fr 1fr; } } /* ── Account menu restyle (auth-nav.js mounts .acc-menu-* on sign-in) */ html[data-design="v3"] .acc-menu-trigger { background: var(--an-surface-2) !important; color: var(--an-ink) !important; border: 1px solid var(--an-hairline-2) !important; border-radius: 2px !important; font-family: var(--an-mono) !important; font-weight: 400 !important; } html[data-design="v3"] .acc-menu-dropdown { background: var(--an-surface) !important; border: 1px solid var(--an-hairline-2) !important; border-radius: 2px !important; box-shadow: 0 12px 32px rgba(0,0,0,.5) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html[data-design="v3"] .nav-me { border-radius: 2px !important; background: var(--an-surface-2) !important; color: var(--an-ink) !important; border: 1px solid var(--an-hairline-2) !important; font-family: var(--an-mono) !important; font-weight: 400 !important; } /* ── The Passport document object ────────────────────────────────── */ .an-passport { background: var(--an-surface); border: 1px solid var(--an-hairline-2); border-radius: 2px; position: relative; overflow: hidden; min-width: 0; max-width: 100%; } .an-passport-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--an-hairline); } .an-passport-body { padding: 20px; position: relative; } .an-passport-holder { font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; color: var(--an-ink); line-height: 1.15; padding-right: 104px; } .an-passport-fields { padding-right: 112px; } .an-passport-seal { position: absolute; right: 20px; top: 46px; } .an-passport-mrz { border-top: 1px solid var(--an-hairline); padding: 10px 20px; background: var(--an-surface-2); overflow-x: auto; } .an-passport .an-field { padding: 6px 0; } .an-visa-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .an-visa { border: 1px solid var(--an-hairline-2); border-radius: 2px; padding: 4px 9px; font-family: var(--an-mono); font-size: .625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--an-ink-2); transform: rotate(-1deg); } .an-visa:nth-child(2n) { transform: rotate(.8deg); } .an-visa:nth-child(3n) { transform: rotate(-.4deg); } /* sweep-and-clear: hatched below, real above; the rule travels once */ .an-sweep { position: relative; } .an-sweep .an-sweep-hatch { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(45deg, transparent 0 5px, var(--an-hairline) 5px 6px); clip-path: inset(100% 0 0 0); } .an-sweep .an-sweep-rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--an-seal); opacity: 0; pointer-events: none; z-index: 3; } .an-sweep.sweeping .an-sweep-hatch { animation: an-sweep-clear 900ms linear forwards; clip-path: inset(0 0 0 0); } .an-sweep.sweeping .an-sweep-rule { animation: an-sweep-rule 900ms linear forwards; } @keyframes an-sweep-clear { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } } @keyframes an-sweep-rule { 0% { top: 0; opacity: 1; } 99% { top: calc(100% - 1px); opacity: 1; } 100% { top: calc(100% - 1px); opacity: 0; } } /* ── Platform copilot re-skin ────────────────────────────────────── */ /* platform-copilot.js stays mounted (universal injection point) but its inline v2 styling (gradient orb, glow, pill radius) is re-inked to match the bureau. Inline styles require !important here. */ html[data-design="v3"] #uc-fab { background: var(--an-surface-2) !important; border: 1px solid var(--an-hairline-2) !important; border-radius: 2px !important; box-shadow: 0 8px 24px rgba(0,0,0,.45) !important; color: var(--an-ink) !important; } html[data-design="v3"] #uc-panel { background: var(--an-surface) !important; border: 1px solid var(--an-hairline-2) !important; border-radius: 2px !important; font-family: var(--an-sans) !important; } /* ── Motion discipline ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-design="v3"] * { animation-duration: .001ms !important; transition-duration: .001ms !important; } html[data-design="v3"] .an-strike { opacity: 1; transform: rotate(-3deg) scale(1); } }