/* ========================================================================== Anvilmint design system -------------------------------------------------------------------------- Self-contained on purpose. STC and STL both pull the Tailwind runtime CDN plus Font Awesome on every page: that is ~400KB of render-blocking JavaScript compiling CSS in the browser, and it lands squarely on LCP and INP. Anvilmint ships one stylesheet and inline SVG icons instead, so the critical path is HTML plus this file and nothing else. Palette is the forge: iron surfaces, ember accent, mint highlight. It is deliberately nothing like STC's purple/teal so the two do not read as the same template wearing different names. Layout standard (portfolio-wide): every block is 1024px wide, 40px between blocks, 24px between cards inside a row. ========================================================================== */ :root { --am-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; --am-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --am-bg: #0b0d10; --am-bg-raised: #12151b; --am-surface: #171b22; --am-surface-2: #1d222b; --am-line: rgba(255, 255, 255, .09); --am-line-strong: rgba(255, 255, 255, .16); --am-ink: #e9ecf1; --am-ink-muted: #a6b0bf; --am-ink-faint: #77828f; --am-ember: #ff7a3d; --am-ember-dim: #d95f27; --am-ember-glow: rgba(255, 122, 61, .22); --am-mint: #3ddc97; --am-mint-dim: #29b57a; --am-danger: #f2555a; --am-warn: #f5b93c; --am-block: 1024px; --am-gap-block: 40px; --am-gap-card: 24px; --am-radius: 14px; --am-radius-lg: 20px; --am-z-nav: 1000; --am-z-modal: 2000; } /* ── Reset / base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* overflow-x lives on only. Setting it on as well turns body into a scroll container and silently kills position:sticky on the nav. That exact bug cost STC its pinned header until 2026-07-27. */ body { margin: 0; max-width: 100vw; background: var(--am-bg); color: var(--am-ink); font-family: var(--am-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; display: flex; flex-direction: column; min-height: 100vh; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } iframe { max-width: 100%; width: 100%; border: 0; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 700; text-wrap: balance; font-feature-settings: "kern", "liga", "calt", "salt"; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -.028em; line-height: 1.08; } h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); letter-spacing: -.022em; line-height: 1.18; } h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); letter-spacing: -.018em; line-height: 1.3; } h4 { font-size: 1.05rem; letter-spacing: -.012em; line-height: 1.35; } p { margin: 0 0 1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--am-mint); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } li { margin-bottom: .4em; } li:last-child { margin-bottom: 0; } code, kbd, samp { font-family: var(--am-mono); font-size: .9em; background: var(--am-surface-2); border: 1px solid var(--am-line); border-radius: 5px; padding: .1em .38em; word-break: break-word; overflow-wrap: anywhere; } pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; } hr { border: 0; border-top: 1px solid var(--am-line); margin: var(--am-gap-block) 0; } *:focus-visible { outline: 2px solid var(--am-ember); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--am-ember-glow); color: #fff; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--am-z-modal); background: var(--am-ember); color: #10120f; font-weight: 700; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; text-decoration: none; } /* Figures in cost/price contexts line up column-wise. */ .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "kern"; } .mono { font-family: var(--am-mono); } /* ── Layout ─────────────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--am-block); margin-inline: auto; padding-inline: 20px; } main { flex: 1 0 auto; } /* Every top-level band gets the same rhythm. Section padding rather than margin so background colours on alternating bands meet cleanly. */ .band { padding-block: var(--am-gap-block); } .band + .band { padding-top: var(--am-gap-block); } .band-alt { background: var(--am-bg-raised); border-block: 1px solid var(--am-line); } .band-alt + .band { padding-top: var(--am-gap-block); } .stack > * + * { margin-top: var(--am-gap-block); } .stack-tight > * + * { margin-top: var(--am-gap-card); } .grid { display: grid; gap: var(--am-gap-card); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Tool layout: main column plus a sidebar. Defined as a class rather than an inline style on the element, because an inline grid-template-columns beats every media query in the cascade and the layout then never collapses. That is exactly how the token creator ended up 748px wide inside a 375px phone. */ .grid-sidebar { grid-template-columns: 1.35fr 1fr; align-items: start; } /* Sticky only while there is a second column to stick beside. Once the layout stacks, a sticky sidebar just pins a card over the form the user is typing into. */ .tool-aside { position: sticky; top: 84px; } @media (max-width: 900px) { .grid-sidebar { grid-template-columns: minmax(0, 1fr); } .tool-aside { position: static; top: auto; } } @media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } .row { display: flex; flex-wrap: wrap; gap: var(--am-gap-card); align-items: center; } .row-tight { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .between { justify-content: space-between; } .center { text-align: center; } .muted { color: var(--am-ink-muted); } .faint { color: var(--am-ink-faint); } .small { font-size: .875rem; } .tiny { font-size: .8rem; } /* ── Cards ──────────────────────────────────────────────────────────────── */ /* Uniform height inside a row is the point here: mixed card heights across a grid is the single most common way a page stops looking designed. */ .card { background: var(--am-surface); border: 1px solid var(--am-line); border-radius: var(--am-radius); padding: 24px; display: flex; flex-direction: column; height: 100%; } .card > :last-child { margin-bottom: 0; } .card-hover { transition: border-color .2s, transform .2s, box-shadow .2s; } .card-hover:hover { border-color: var(--am-line-strong); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); } .card-accent { border-color: rgba(255, 122, 61, .35); box-shadow: 0 0 0 1px var(--am-ember-glow) inset; } .card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: .4rem; } .card-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--am-surface-2); border: 1px solid var(--am-line); color: var(--am-ember); margin-bottom: 14px; flex: none; } .card-icon svg { width: 20px; height: 20px; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: inherit; font-size: .95rem; font-weight: 650; line-height: 1; padding: .8em 1.35em; border-radius: 11px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .18s, border-color .18s, color .18s, transform .12s, box-shadow .18s; min-height: 44px; /* touch target floor */ } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: linear-gradient(180deg, var(--am-ember) 0%, var(--am-ember-dim) 100%); color: #16100b; box-shadow: 0 6px 20px rgba(255, 122, 61, .25); } .btn-primary:hover { filter: brightness(1.07); box-shadow: 0 8px 26px rgba(255, 122, 61, .34); } .btn-secondary { background: var(--am-surface-2); border-color: var(--am-line-strong); color: var(--am-ink); } .btn-secondary:hover { background: #232935; border-color: rgba(255, 255, 255, .26); } .btn-ghost { background: transparent; border-color: var(--am-line-strong); color: var(--am-ink-muted); } .btn-ghost:hover { color: var(--am-ink); border-color: var(--am-line-strong); background: rgba(255,255,255,.04); } .btn-lg { font-size: 1.02rem; padding: .95em 1.7em; } .btn-block { display: flex; width: 100%; } /* The commit button. Everything else on the page is a step; this is the moment the user spends money, so it is deliberately the loudest element on screen: larger type, a lit border, and a slow breathing glow that stops the instant it is disabled or the user prefers reduced motion. */ .btn-commit { font-size: 1.12rem; font-weight: 750; letter-spacing: -.01em; padding: 1.05em 1.8em; border-radius: 13px; position: relative; background: linear-gradient(180deg, #ff9457 0%, var(--am-ember) 45%, var(--am-ember-dim) 100%); color: #17100a; border-color: rgba(255, 178, 130, .55); box-shadow: 0 8px 26px rgba(255, 122, 61, .34), inset 0 1px 0 rgba(255, 255, 255, .35); animation: am-commit-pulse 3.2s ease-in-out infinite; } .btn-commit:hover { filter: brightness(1.06); box-shadow: 0 12px 34px rgba(255, 122, 61, .46), inset 0 1px 0 rgba(255,255,255,.4); } .btn-commit:disabled, .btn-commit[aria-disabled="true"] { animation: none; background: var(--am-surface-2); color: var(--am-ink-faint); border-color: var(--am-line-strong); box-shadow: none; } @keyframes am-commit-pulse { 0%, 100% { box-shadow: 0 8px 26px rgba(255, 122, 61, .30), inset 0 1px 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 10px 34px rgba(255, 122, 61, .52), inset 0 1px 0 rgba(255,255,255,.35); } } @media (prefers-reduced-motion: reduce) { .btn-commit { animation: none; } } /* Busy state: a moving sheen tells the user the wallet round trip is still alive. A frozen button during a 15s mint reads as a crash. */ .btn.is-busy { pointer-events: none; } .btn.is-busy::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); background-size: 200% 100%; animation: am-sheen 1.2s linear infinite; } @keyframes am-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ── Dropzone ───────────────────────────────────────────────────────────── */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 148px; padding: 22px; text-align: center; border: 2px dashed var(--am-line-strong); border-radius: var(--am-radius); background: var(--am-bg-raised); cursor: pointer; transition: border-color .18s, background .18s, transform .12s; } .dropzone:hover { border-color: rgba(255, 122, 61, .5); background: #171b22; } .dropzone:focus-visible { outline: 2px solid var(--am-ember); outline-offset: 3px; } .dropzone.is-dragging { border-color: var(--am-ember); background: rgba(255, 122, 61, .08); transform: scale(1.01); } .dropzone.has-file { border-style: solid; border-color: rgba(61, 220, 151, .45); } .dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dropzone-icon { width: 34px; height: 34px; color: var(--am-ink-faint); } .dropzone.is-dragging .dropzone-icon { color: var(--am-ember); } .dropzone-title { font-weight: 650; font-size: .95rem; } .dropzone-hint { font-size: .8rem; color: var(--am-ink-faint); } .dropzone-preview { display: flex; align-items: center; gap: 14px; text-align: left; } .dropzone-preview img { width: 64px; height: 64px; object-fit: cover; flex: none; border-radius: 12px; border: 1px solid var(--am-line-strong); } /* ── Pills / badges ─────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: .45em; font-size: .78rem; font-weight: 600; letter-spacing: .01em; padding: .35em .75em; border-radius: 999px; border: 1px solid var(--am-line-strong); background: var(--am-surface-2); color: var(--am-ink-muted); } .pill svg { width: 13px; height: 13px; } .pill-mint { color: var(--am-mint); border-color: rgba(61, 220, 151, .35); background: rgba(61, 220, 151, .09); } .pill-ember { color: var(--am-ember); border-color: rgba(255, 122, 61, .35); background: rgba(255, 122, 61, .09); } /* ── Hero ───────────────────────────────────────────────────────────────── */ /* One hero treatment, used identically on every page that has one. Varying hero shapes page to page is the fastest way to make a site feel assembled rather than designed. */ .hero { position: relative; padding-block: 72px 56px; overflow: hidden; border-bottom: 1px solid var(--am-line); } .hero::before { content: ''; position: absolute; inset: -40% 30% auto -10%; height: 420px; background: radial-gradient(closest-side, rgba(255, 122, 61, .16), transparent 70%); pointer-events: none; } .hero::after { content: ''; position: absolute; inset: -30% -15% auto auto; width: 460px; height: 380px; background: radial-gradient(closest-side, rgba(61, 220, 151, .11), transparent 70%); pointer-events: none; } .hero .wrap { position: relative; } .hero p.lede { font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem); color: var(--am-ink-muted); max-width: 60ch; } .hero-actions { margin-top: 28px; } @media (max-width: 640px) { .hero { padding-block: 48px 40px; } } /* ── Forms ──────────────────────────────────────────────────────────────── */ label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .4rem; } .field { margin-bottom: 18px; } .field:last-child { margin-bottom: 0; } .field-hint { font-size: .8rem; color: var(--am-ink-faint); margin-top: .4rem; } .field-error { font-size: .8rem; color: var(--am-danger); margin-top: .4rem; } input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], textarea, select { width: 100%; font-family: inherit; font-size: .95rem; color: var(--am-ink); background: var(--am-bg-raised); border: 1px solid var(--am-line-strong); border-radius: 10px; padding: .7rem .85rem; min-height: 44px; transition: border-color .16s, box-shadow .16s; } textarea { min-height: 120px; resize: vertical; line-height: 1.55; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--am-ember); box-shadow: 0 0 0 3px var(--am-ember-glow); } input::placeholder, textarea::placeholder { color: var(--am-ink-faint); } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--am-danger); } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a6b0bf' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; background-size: 12px; padding-right: 2.2rem; } .check { display: flex; gap: .65rem; align-items: flex-start; } /* 24px is the WCAG 2.2 minimum target size (2.5.8). The label is clickable too, but the box itself has to clear the floor on its own. */ .check input[type="checkbox"] { width: 24px; height: 24px; margin-top: 1px; flex: none; accent-color: var(--am-ember); cursor: pointer; } .check label { margin: 0; font-weight: 500; cursor: pointer; } /* ── Tables ─────────────────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: .92rem; } th, td { text-align: left; padding: .75rem .85rem; border-bottom: 1px solid var(--am-line); } th { font-weight: 650; color: var(--am-ink); background: var(--am-surface-2); white-space: nowrap; } tbody tr:last-child td { border-bottom: 0; } .table-card { border: 1px solid var(--am-line); border-radius: var(--am-radius); overflow: hidden; } /* Multi-column tables become stacked records on a phone. A four-column pricing table inside a horizontal scroller technically fits, but nobody discovers the swipe, so the last two columns may as well not exist. Each row becomes a labelled block instead, using data-label on the cells. The and header semantics stay intact for screen readers. */ @media (max-width: 640px) { .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .table-stack tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--am-line); } .table-stack tr:last-child { border-bottom: 0; } .table-stack th[scope="row"] { display: block; background: transparent; border: 0; padding: 0 0 8px; font-size: .98rem; white-space: normal; } .table-stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border: 0; padding: 4px 0; text-align: right; } .table-stack td::before { content: attr(data-label); flex: none; color: var(--am-ink-faint); font-size: .8rem; font-weight: 600; text-align: left; } .table-stack td:empty { display: none; } } /* ── Notices ────────────────────────────────────────────────────────────── */ .notice { border: 1px solid var(--am-line-strong); border-left-width: 3px; border-radius: 10px; background: var(--am-surface); padding: 14px 16px; font-size: .9rem; } .notice-info { border-left-color: var(--am-mint); } .notice-warn { border-left-color: var(--am-warn); } .notice-error { border-left-color: var(--am-danger); } .notice-ok { border-left-color: var(--am-mint); background: rgba(61, 220, 151, .07); } /* ── FAQ ────────────────────────────────────────────────────────────────── */ /* Never ship a fully collapsed FAQ: Bing discounts text inside a shut

, so the first two in every group render open. */ details.faq { border: 1px solid var(--am-line); border-radius: var(--am-radius); background: var(--am-surface); padding: 0; margin-bottom: 12px; } details.faq:last-child { margin-bottom: 0; } details.faq > summary { cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 650; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } details.faq > summary::-webkit-details-marker { display: none; } details.faq > summary::after { content: ''; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--am-ink-faint); border-bottom: 2px solid var(--am-ink-faint); transform: rotate(45deg); transition: transform .2s; } details.faq[open] > summary::after { transform: rotate(-135deg); } details.faq > .faq-body { padding: 0 20px 18px; color: var(--am-ink-muted); } /* ── Steps ──────────────────────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 0; counter-reset: am-step; } .steps > li { counter-increment: am-step; position: relative; padding-left: 52px; margin-bottom: var(--am-gap-card); } .steps > li:last-child { margin-bottom: 0; } .steps > li::before { content: counter(am-step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--am-surface-2); border: 1px solid var(--am-line-strong); color: var(--am-ember); font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; } /* ── Nav ────────────────────────────────────────────────────────────────── */ #site-nav { position: sticky; top: 0; z-index: var(--am-z-nav); background: rgba(11, 13, 16, .82); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); transition: background .25s, box-shadow .25s; } #site-nav::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 122, 61, .45) 30%, rgba(61, 220, 151, .35) 70%, transparent); } #site-nav.scrolled { background: rgba(11, 13, 16, .97); box-shadow: 0 4px 34px rgba(0, 0, 0, .55); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { color: var(--am-ink-muted); font-size: .92rem; font-weight: 550; text-decoration: none; transition: color .16s; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--am-ink); text-decoration: none; } .nav-links a[aria-current="page"] { color: var(--am-ember); } .nav-cta { display: flex; align-items: center; gap: 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--am-ink); } .brand:hover { text-decoration: none; } .brand-mark { width: 30px; height: 30px; flex: none; } .brand-name { font-size: 1.06rem; font-weight: 750; letter-spacing: -.02em; } .brand-name em { font-style: normal; color: var(--am-ember); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--am-line-strong); border-radius: 9px; padding: 8px; cursor: pointer; color: var(--am-ink); min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } .nav-toggle svg { width: 20px; height: 20px; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav-links { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--am-bg-raised); border-bottom: 1px solid var(--am-line); padding: 8px 20px 16px; } #site-nav.open .nav-links { display: flex; } .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--am-line); } .nav-links a:last-child { border-bottom: 0; } .nav-cta .btn-secondary { display: none; } } /* ── Footer ─────────────────────────────────────────────────────────────── */ #site-footer { margin-top: var(--am-gap-block); background: var(--am-bg-raised); border-top: 1px solid var(--am-line); padding-block: 40px 28px; font-size: .9rem; } .footer-grid { display: grid; gap: var(--am-gap-card); grid-template-columns: 1.4fr repeat(3, 1fr); } @media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } } .footer-grid h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--am-ink-faint); margin-bottom: .9rem; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: .55rem; } .footer-grid a { color: var(--am-ink-muted); text-decoration: none; } .footer-grid a:hover { color: var(--am-ink); text-decoration: underline; text-underline-offset: 3px; } .footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--am-line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: var(--am-ink-faint); font-size: .84rem; } /* ── Breadcrumbs ────────────────────────────────────────────────────────── */ .crumbs { font-size: .82rem; color: var(--am-ink-faint); padding-top: 18px; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; } .crumbs li { margin: 0; display: flex; align-items: center; gap: .45rem; } .crumbs li + li::before { content: '/'; color: var(--am-ink-faint); } .crumbs a { color: var(--am-ink-muted); text-decoration: none; } .crumbs a:hover { color: var(--am-ink); text-decoration: underline; } /* ── Prose ──────────────────────────────────────────────────────────────── */ .prose { max-width: 72ch; } .prose h2 { margin-top: 1.9em; } .prose h3 { margin-top: 1.5em; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { color: var(--am-ink-muted); } .prose p { color: var(--am-ink-muted); } .prose strong { color: var(--am-ink); font-weight: 650; } /* Wallet connection UI. The connector is styled here rather than relying on Tailwind or Font Awesome, neither of which Anvilmint loads. */ .hidden, [hidden] { display: none !important; } .wallet-slot { min-height: 48px; } .wallet-connected { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid rgba(61, 220, 151, .35); border-radius: 12px; background: rgba(61, 220, 151, .07); } .wallet-connected-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--am-mint); box-shadow: 0 0 0 4px rgba(61, 220, 151, .12); } .wallet-connected > span:nth-child(2) { min-width: 0; flex: 1; } .wallet-connected-label { display: block; color: var(--am-ink-faint); font-size: .72rem; } .wallet-connected .mono { display: block; color: var(--am-ink); font-size: .88rem; } .wallet-connected .btn { padding: .7em 1em; } #wallet-modal, #wallet-mobile-chooser { position: fixed; inset: 0; z-index: var(--am-z-modal); display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #wallet-modal > div, #wallet-mobile-chooser > div { width: min(100%, 420px); max-height: 90vh; overflow-y: auto; padding: 24px; border: 1px solid var(--am-line-strong); border-radius: var(--am-radius); background: var(--am-surface); box-shadow: 0 22px 60px rgba(0, 0, 0, .55); } #wallet-modal .wallet-option, #wallet-mobile-chooser .wc-opt, #wallet-mobile-chooser .wc-cancel { width: 100%; min-height: 48px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--am-line-strong); border-radius: 11px; background: var(--am-surface-2); color: var(--am-ink); font: inherit; font-weight: 650; text-align: left; cursor: pointer; } #wallet-modal .wallet-option:hover, #wallet-mobile-chooser .wc-opt:hover, #wallet-mobile-chooser .wc-cancel:hover { border-color: var(--am-ember); } #close-wallet-modal { float: right; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: var(--am-ink-muted); cursor: pointer; } @media (max-width: 560px) { #wallet-mobile-chooser { align-items: flex-end; } .wallet-connected { align-items: flex-start; flex-wrap: wrap; } .wallet-connected .btn { margin-left: 19px; } } /* Admin setup and login */ .auth-band { min-height: calc(100vh - 64px); display: grid; align-items: center; background: radial-gradient(circle at 50% 12%, rgba(255, 122, 61, .11), transparent 38%), var(--am-bg); } .auth-wrap { max-width: 460px; } .auth-card { gap: 18px; padding: clamp(24px, 5vw, 36px); text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .38); } .auth-card h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.15rem); } .auth-card > p { margin: 0; } .auth-mark { width: 58px; height: 58px; margin-inline: auto; display: grid; place-items: center; border: 1px solid rgba(255, 122, 61, .3); border-radius: 15px; background: var(--am-ember-glow); } .auth-form { text-align: left; } .auth-form .field + .field { margin-top: 16px; } .auth-form .btn { margin-top: 22px; } .auth-back { align-self: center; }