/* ========================================================================== Avian Network — Brand Guidelines Official palette from AVN_ColorPal (2021). Web typefaces: Inter + Roboto Mono (open licenses, self-hosted). Konnect is legacy — main website only; its license is not available for new properties. ========================================================================== */ @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url("../assets/fonts/RobotoMono-Variable.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; } :root { /* Mainnet palette */ --avn-mint: #34f5c6; --avn-turquoise: #34e2d5; --avn-cyan: #17a7b6; --avn-teal: #19827a; --avn-slate: #2a737f; /* Testnet palette */ --avn-test-violet: #3c2c88; --avn-test-indigo: #2d2178; --avn-test-blue: #3a33bd; --avn-test-blue-light: #4449cd; --avn-test-navy: #1f168e; /* Role mapping — UI colors derive from the brand palette */ --brand-primary: var(--avn-teal); --brand-primary-dark: var(--avn-slate); --brand-primary-light: #e1fcf4; /* mint tint for section backgrounds */ --brand-accent: var(--avn-cyan); /* Neutrals (light theme) */ --ink: #16232a; --ink-soft: #4d5e68; --paper: #ffffff; --paper-alt: #f4f7f8; --line: #dde5e8; --night: #0d1b21; --header-bg: rgba(255, 255, 255, 0.92); /* Typography — Inter + Roboto Mono for all new web properties */ --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Roboto Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace; --radius: 10px; --container: 1040px; } /* Dark theme — set on as data-theme by the inline script in index.html */ :root[data-theme="dark"] { --ink: #e6f0f2; --ink-soft: #9db4bc; --paper: #0d1b21; --paper-alt: #122730; --line: #24404a; --header-bg: rgba(13, 27, 33, 0.92); --brand-primary: var(--avn-cyan); /* brighter interactive accent on dark */ --brand-primary-light: #103139; /* teal tint for the hero on dark */ } /* Theme-dependent images (e.g. gradient wordmark on light, white on dark) */ :root[data-theme="dark"] .light-only { display: none; } :root[data-theme="light"] .dark-only { display: none; } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); } h3 { font-size: 1.3rem; margin-top: 2rem; } p { margin: 0 0 1em; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 4px; padding: 0.1em 0.35em; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { max-width: var(--container); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .header-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .header-wordmark { height: 44px; width: auto; } .header-subtitle { font-weight: 400; color: var(--ink-soft); margin-left: 10px; font-size: 0.9em; } .header-nav { display: flex; gap: 20px; flex-wrap: wrap; } .header-nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; } .header-nav a:hover { color: var(--brand-primary); } .theme-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 1rem; line-height: 1.4; cursor: pointer; color: var(--ink); } .theme-toggle:hover { border-color: var(--brand-primary); } /* ---------- Hero ---------- */ .hero { text-align: center; padding: 72px 0 64px; background: linear-gradient(180deg, var(--brand-primary-light), var(--paper)); } .hero-wordmark { height: 96px; max-width: 90%; margin: 0 auto 36px; } .hero-lead { max-width: 620px; margin: 0 auto 28px; color: var(--ink-soft); font-size: 1.1rem; } .button { display: inline-block; /* Brand gradient no. 3: teal → cyan */ background: linear-gradient(90deg, var(--avn-teal), var(--avn-cyan)); color: #fff; text-decoration: none; font-weight: 600; padding: 12px 26px; border-radius: 999px; transition: filter 0.15s ease; } .button:hover { filter: brightness(0.92); } /* ---------- Sections ---------- */ .section { padding: 64px 0; } .section-alt { background: var(--paper-alt); } /* ---------- Grids ---------- */ .grid { display: grid; gap: 20px; margin: 24px 0; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* Always two columns on desktop — keeps 4-item sets balanced 2×2 */ .grid-pairs { grid-template-columns: 1fr; } @media (min-width: 700px) { .grid-pairs { grid-template-columns: 1fr 1fr; } } /* ---------- Logo cards ---------- */ .logo-card { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); } .logo-stage { display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 32px; } .logo-stage img { max-height: 96px; max-width: 100%; } .logo-mark-img { height: 130px; max-height: 130px; } /* Stages show the logo on literal light/dark surfaces — fixed in both themes */ .logo-stage-light { background: #ffffff; } .logo-stage-dark { background: #0d1b21; } .logo-card figcaption { padding: 10px 16px; font-size: 0.9rem; color: var(--ink-soft); border-top: 1px solid var(--line); } /* ---------- Avatars & token icons ---------- */ .avatar-demos { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; } .avatar-demo { margin: 0; text-align: center; } .avatar { width: 128px; height: 128px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; border: 1px solid var(--line); } .avatar img { height: 70%; } .avatar-circle { border-radius: 50%; } .avatar-square { border-radius: 24px; } /* Brand gradient no. 3: teal → cyan */ .avatar-gradient { background: linear-gradient(135deg, var(--avn-teal), var(--avn-cyan)); } .avatar-light { background: #ffffff; } .avatar-demo figcaption { font-size: 0.85rem; color: var(--ink-soft); max-width: 140px; } /* ---------- Clear space demo ---------- */ .clearspace-demo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; } .clearspace-box { border: 2px dashed var(--brand-primary); padding: 48px; border-radius: var(--radius); background: var(--paper); } .clearspace-box img { height: 64px; } .clearspace-label { color: var(--ink-soft); font-size: 0.95rem; } /* ---------- Color swatches ---------- */ .swatch-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin: 16px 0 8px; } .swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; /* buttons don't inherit text color by default */ transition: transform 0.1s ease, box-shadow 0.1s ease; } .swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(13, 27, 33, 0.12); } .swatch-color { height: 84px; } .swatch-info { padding: 10px 12px; } .swatch-name { display: block; font-weight: 600; font-size: 0.9rem; } .swatch-hex { display: block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); } .swatch.copied .swatch-hex { color: var(--brand-primary); } /* ---------- Brand gradients ---------- */ .gradient-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 8px; } .gradient-row { display: flex; align-items: center; gap: 16px; } .gradient-num { flex: 0 0 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ink-soft); color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; } .gradient-bar { flex: 1; height: 44px; border-radius: 999px; border: 1px solid var(--line); } .gradient-label { flex: 0 0 200px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; } @media (max-width: 560px) { .gradient-label { flex-basis: auto; } .gradient-row { flex-wrap: wrap; } } /* ---------- Value tables (print values, accessibility) ---------- */ .table-scroll { overflow-x: auto; margin-top: 16px; } .value-table { border-collapse: collapse; width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; } .value-table th, .value-table td { text-align: left; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } .value-table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .value-table tr:last-child td { border-bottom: none; } .table-chip { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line); margin-right: 10px; vertical-align: -3px; } .contrast-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .contrast-pass { background: rgba(46, 158, 91, 0.16); color: #2e9e5b; } .contrast-large { background: rgba(242, 163, 60, 0.16); color: #b06d10; } .contrast-fail { background: rgba(210, 74, 67, 0.14); color: #d24a43; } :root[data-theme="dark"] .contrast-large { color: #f2a33c; } .contrast-sample { display: inline-block; width: 72px; padding: 4px 0; border-radius: 6px; text-align: center; font-weight: 600; margin-right: 12px; } /* ---------- Boilerplate ---------- */ .copy-block { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 110px 20px 24px; margin-top: 12px; } .copy-block p { margin: 0; } .copy-button { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; } .copy-button:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .naming-rules li { margin-bottom: 8px; } /* ---------- Misuse examples ---------- */ .misuse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-top: 20px; } .misuse-card { margin: 0; text-align: center; } .misuse-stage { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; } .misuse-stage img { height: 90px; } .misuse-stage-mint { background: var(--avn-mint); } .misuse-stage-testnet { background: linear-gradient(135deg, var(--avn-test-blue), var(--avn-test-navy)); } .misuse-x { position: absolute; top: 8px; right: 10px; width: 24px; height: 24px; border-radius: 50%; background: #d24a43; color: #fff; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; } .misuse-stretched { transform: scaleX(1.7); } .misuse-rotated { transform: rotate(24deg); } .misuse-recolored { filter: hue-rotate(120deg) saturate(1.4); } .misuse-shadowed { filter: drop-shadow(4px 6px 4px rgba(0, 0, 0, 0.55)); } .misuse-card figcaption { font-size: 0.85rem; color: var(--ink-soft); } /* ---------- Typography specimen ---------- */ .type-specimen { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin-top: 24px; } .type-row { padding: 20px 24px; border-bottom: 1px solid var(--line); } .type-row:last-child { border-bottom: none; } .type-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 6px; } .type-row p { margin: 0; } .spec-h1 { font-size: 44px; font-weight: 700; line-height: 1.15; } .spec-h2 { font-size: 32px; font-weight: 700; line-height: 1.2; } .spec-h3 { font-size: 22px; font-weight: 600; } .spec-body { font-size: 17px; max-width: 640px; } .spec-mono { font-family: var(--font-mono); font-size: 15px; word-break: break-all; } /* ---------- Usage cards ---------- */ .usage-card { border-radius: var(--radius); padding: 24px 28px; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--line); } .usage-card h3 { margin-top: 0; display: flex; align-items: center; gap: 10px; } .usage-card ul { margin: 0; padding-left: 20px; } .usage-card li { margin-bottom: 8px; } .usage-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 0.9rem; } .usage-do { border-top-color: #2e9e5b; } .usage-do .usage-icon { background: #2e9e5b; } .usage-dont { border-top-color: #d24a43; } .usage-dont .usage-icon { background: #d24a43; } /* ---------- Downloads ---------- */ .download-card { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--ink); background: var(--paper); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .download-card:hover { border-color: var(--brand-primary); box-shadow: 0 4px 14px rgba(13, 27, 33, 0.1); } .download-name { display: block; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; } .download-desc { display: block; font-size: 0.9rem; color: var(--ink-soft); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--ink-soft); font-size: 0.9rem; background: var(--paper-alt); } .site-footer p { margin: 0; } .site-footer a { color: var(--brand-primary); } .site-footer .footer-legal { margin-top: 8px; font-size: 0.85rem; } .footer-legal a { color: var(--ink-soft); }