Merge pull request #5044 from mempool/mononaut/onbtc-imgs-themed

onbtc theme
2024-05-08 10:06:13 +07:00 · 2024-05-08 10:06:13 +07:00 · 7f5b5f487e
commit 7f5b5f487e
parent f2a6828015 c15393981d
61 changed files with 1115 additions and 285 deletions
--- a/frontend/angular.json
+++ b/frontend/angular.json
@ -181,6 +181,11 @@
                "bundleName": "wiz",
                "inject": false
              },
+              {
+                "input": "src/theme-bukele.scss",
+                "bundleName": "bukele",
+                "inject": false
+              },
              "node_modules/@fortawesome/fontawesome-svg-core/styles.css"
            ],
            "vendorChunk": true,
--- a/frontend/custom-sv-config.json
+++ b/frontend/custom-sv-config.json
@ -1,12 +1,12 @@
 {
-  "theme": "contrast",
+  "theme": "bukele",
  "enterprise": "onbtc",
  "branding": {
    "name": "onbtc",
-    "title": "Oficina Nacional del Bitcoin",
+    "title": "Bitcoin Office",
    "site_id": 19,
-    "header_img": "/resources/onbtc.svg",
-    "img": "/resources/elsalvador.svg",
+    "header_img": "/resources/onbtclogo.svg",
+    "footer_img": "/resources/onbtclogo.svg",
    "rounded_corner": true
  },
  "dashboard": {
--- a/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
+++ b/frontend/src/app/components/acceleration/acceleration-fees-graph/acceleration-fees-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.scss
@ -60,7 +60,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
+++ b/frontend/src/app/components/acceleration/accelerator-dashboard/accelerator-dashboard.component.ts
@ -148,7 +148,7 @@ export class AcceleratorDashboardComponent implements OnInit, OnDestroy {
    } else {
      const rate = tx.fee / tx.vsize; // color by simple single-tx fee rate
      const feeLevelIndex = feeLevels.findIndex((feeLvl) => Math.max(1, rate) < feeLvl) - 1;
-      return this.theme.theme === 'contrast' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
+      return this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? contrastColors[feeLevelIndex] || contrastColors[contrastColors.length - 1] : normalColors[feeLevelIndex] || normalColors[normalColors.length - 1];
    }
  }

--- a/frontend/src/app/components/address-graph/address-graph.component.scss
+++ b/frontend/src/app/components/address-graph/address-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/address/address-preview.component.scss
+++ b/frontend/src/app/components/address/address-preview.component.scss
@ -3,7 +3,7 @@
 }

 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/address/address.component.scss
+++ b/frontend/src/app/components/address/address.component.scss
@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/asset/asset.component.scss
+++ b/frontend/src/app/components/asset/asset.component.scss
@ -1,5 +1,5 @@
 .qr-wrapper {
-  background-color: var(--fg);
+  background-color: #fff;
  padding: 10px;
  padding-bottom: 5px;
  display: inline-block;
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
+++ b/frontend/src/app/components/block-health-graph/block-health-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
+++ b/frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
@ -651,13 +651,13 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
  getFilterColorFunction(flags: bigint, gradient: 'fee' | 'age'): ((tx: TxView) => Color) {
    return (tx: TxView) => {
      if ((this.filterMode === 'and' && (tx.bigintFlags & flags) === flags) || (this.filterMode === 'or' && (flags === 0n || (tx.bigintFlags & flags) > 0n))) {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
          return (gradient === 'age') ? ageColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000)) : defaultColorFunction(tx, defaultColors.fee, defaultAuditColors, this.relativeTime || (Date.now() / 1000));
        } else {
          return (gradient === 'age') ? ageColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000)) : contrastColorFunction(tx, contrastColors.fee, contrastAuditColors, this.relativeTime || (Date.now() / 1000));
        }
      } else {
-        if (this.themeService.theme !== 'contrast') {
+        if (this.themeService.theme !== 'contrast' && this.themeService.theme !== 'bukele') {
          return (gradient === 'age') ? { r: 1, g: 1, b: 1, a: 0.05 } : defaultColorFunction(
            tx,
            defaultColors.unmatchedfee,
--- a/frontend/src/app/components/block-overview-graph/block-scene.ts
+++ b/frontend/src/app/components/block-overview-graph/block-scene.ts
@ -69,7 +69,7 @@ export default class BlockScene {
  }

  setColorFunction(colorFunction: ((tx: TxView) => Color) | null): void {
-    this.theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    this.theme.theme === 'contrast' || this.theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
    this.updateAllColors();
  }

@ -246,7 +246,7 @@ export default class BlockScene {
    this.flip = flip;
    this.vertexArray = vertexArray;
    this.highlightingEnabled = highlighting;
-    theme.theme === 'contrast' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
+    theme.theme === 'contrast' || theme.theme === 'bukele' ? this.getColor = colorFunction || contrastColorFunction : this.getColor = colorFunction || defaultColorFunction;
    this.theme = theme;

    this.scene = {
--- a/frontend/src/app/components/block-overview-graph/utils.ts
+++ b/frontend/src/app/components/block-overview-graph/utils.ts
@ -177,7 +177,7 @@ export function ageColorFunction(
    return auditColors.accelerated;
  }

-  const color = theme !== 'contrast' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);
+  const color = theme !== 'contrast' && theme !== 'bukele' ? defaultColorFunction(tx, colors, auditColors, relativeTime) : contrastColorFunction(tx, colors, auditColors, relativeTime);

  const ageLevel = (!tx.time ? 0 : (0.8 * Math.tanh((1 / 15) * Math.log2((Math.max(1, 0.6 * ((relativeTime - tx.time) - 60)))))));
  return {
--- a/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
+++ b/frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
@ -1,6 +1,6 @@
 .block-overview-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+	background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
@ -30,7 +30,7 @@ th, td {
 }

 .badge.badge-accelerated {
-  background-color: var(--tertiary);
+  background-color: #653b9c;
  box-shadow: #ad7de57f 0px 0px 12px -2px;
  color: white;
  animation: acceleratePulse 1s infinite;
@ -71,7 +71,7 @@ th, td {
 }

@keyframes acceleratePulse {
-  0% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  0% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
  50% { background-color: #8457bb; box-shadow: #ad7de5 0px 0px 18px -2px;}
-  100% { background-color: var(--tertiary); box-shadow: #ad7de57f 0px 0px 12px -2px; }
+  100% { background-color: #653b9c; box-shadow: #ad7de57f 0px 0px 12px -2px; }
 }
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@ -63,7 +63,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@ -130,7 +130,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .flashing {
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@ -350,7 +350,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
    return {
      left: addLeft + this.blockOffset * index + 'px',
      background: `repeating-linear-gradient(
-        #2d3348,
+        var(--secondary),
        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[this.network][1]} 100%
@ -362,7 +362,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
  convertStyleForLoadingBlock(style) {
    return {
      ...style,
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

@ -371,7 +371,7 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {

    return {
      left: addLeft + (this.blockOffset * index) + 'px',
-      background: "#2d3348",
+      background: "var(--secondary)",
    };
  }

--- a/frontend/src/app/components/blockchain/blockchain.component.scss
+++ b/frontend/src/app/components/blockchain/blockchain.component.scss
@ -54,7 +54,7 @@
 }

 .time-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: -1.8em;
@ -68,7 +68,7 @@
 }

 .block-display-toggle {
-  color: white;
+  color: var(--fg);
  font-size: 0.8rem;
  position: absolute;
  bottom: 15.8em;
--- a/frontend/src/app/components/clock/clock.component.ts
+++ b/frontend/src/app/components/clock/clock.component.ts
@ -32,12 +32,12 @@ export class ClockComponent implements OnInit {
  limitHeight: number;

  gradientColors = {
-    '': ['#9339f4', '#105fb0'],
-    liquid: ['#116761', '#183550'],
-    'liquidtestnet': ['#494a4a', '#272e46'],
-    testnet: ['#1d486f', '#183550'],
-    testnet4: ['#1d486f', '#183550'],
-    signet: ['#6f1d5d', '#471850'],
+    '': ['var(--mainnet-alt)', 'var(--primary)'],
+    liquid: ['var(--liquid)', 'var(--testnet-alt)'],
+    'liquidtestnet': ['var(--liquidtestnet)', 'var(--liquidtestnet-alt)'],
+    testnet: ['var(--testnet)', 'var(--testnet-alt)'],
+    testnet4: ['var(--testnet)', 'var(--testnet-alt)'],
+    signet: ['var(--signet)', 'var(--signet-alt)'],
  };

  constructor(
@ -100,8 +100,8 @@ export class ClockComponent implements OnInit {

    return {
      background: `repeating-linear-gradient(
-        #2d3348,
-        #2d3348 ${greenBackgroundHeight}%,
+        var(--secondary),
+        var(--secondary) ${greenBackgroundHeight}%,
        ${this.gradientColors[''][0]} ${Math.max(greenBackgroundHeight, 0)}%,
        ${this.gradientColors[''][1]} 100%
      )`,
--- a/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
+++ b/frontend/src/app/components/difficulty-mining/difficulty-mining.component.scss
@ -119,7 +119,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty-tooltip.component.scss
@ -1,9 +1,9 @@
 .difficulty-tooltip {
  position: fixed;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  padding: 10px 15px;
  text-align: left;
  pointer-events: none;
--- a/frontend/src/app/components/difficulty/difficulty.component.html
+++ b/frontend/src/app/components/difficulty/difficulty.component.html
@ -15,8 +15,8 @@
          <svg #epochSvg class="epoch-blocks" height="22px" width="100%" viewBox="0 0 224 9" shape-rendering="crispEdges" preserveAspectRatio="none">
            <defs>
              <linearGradient id="diff-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stop-color="#105fb0" />
-                <stop offset="100%" stop-color="#9339f4" />
+                <stop offset="0%" stop-color="var(--primary)" />
+                <stop offset="100%" stop-color="var(--mainnet-alt)" />
              </linearGradient>
              <linearGradient id="diff-hover-gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
                <stop offset="0%" stop-color="#2486eb" />
--- a/frontend/src/app/components/difficulty/difficulty.component.scss
+++ b/frontend/src/app/components/difficulty/difficulty.component.scss
@ -128,7 +128,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
@ -223,7 +224,7 @@
    height: 100%;
  }
  .background {
-    background: linear-gradient(to right, var(--primary), #9339f4);
+    background: linear-gradient(to right, var(--primary), var(--mainnet-alt));
    left: 0;
    right: 0;
  }
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@ -79,7 +79,7 @@
  display: flex;
  flex-direction: row;
  transition: background-color 1s;
-  color: var(--color-fg);
+  color: #fff;
  &.priority {
    @media (767px < width < 992px), (width < 576px) {
      width: 100%;
--- a/frontend/src/app/components/fees-box/fees-box.component.ts
+++ b/frontend/src/app/components/fees-box/fees-box.component.ts
@ -16,8 +16,8 @@ export class FeesBoxComponent implements OnInit, OnDestroy {
  isLoading$: Observable<boolean>;
  recommendedFees$: Observable<Recommendedfees>;
  themeSubscription: Subscription;
-  gradient = 'linear-gradient(to right, #2e324e, #2e324e)';
-  noPriority = '#2e324e';
+  gradient = 'linear-gradient(to right, var(--skeleton-bg), var(--skeleton-bg))';
+  noPriority = 'var(--skeleton-bg)';
  fees: Recommendedfees;

  constructor(
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
+++ b/frontend/src/app/components/liquid-master-page/liquid-master-page.component.scss
@ -4,6 +4,7 @@
  top: 0;
  width: 100%;
  z-index: 100;
+  background-color: var(--bg);
 }

 li.nav-item.active {
@ -17,7 +18,7 @@ fa-icon {
 .navbar {
  z-index: 100;
  min-height: 64px;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@ -48,7 +49,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.html
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.html
@ -6,7 +6,7 @@
        <img [src]="enterpriseInfo.img" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
      }
      @if (enterpriseInfo?.header_img) {
-        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img *ngIf="enterpriseInfo.header_img" [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
      } @else {
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" width="500" height="126" class="mempool-logo" style="width: 200px; height: 50px"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" style="width: 200px; height: 50px" width="500" height="126" viewBox="0 0 500 126"></app-svg-images>
--- a/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
+++ b/frontend/src/app/components/master-page-preview/master-page-preview.component.scss
@ -5,6 +5,7 @@
  max-width: 1200px;
  max-height: 600px;
  padding-top: 80px;
+  background: var(--nav-bg);

  header {
    position: absolute;
@ -18,7 +19,7 @@
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
-    background: var(--stat-box-bg);
+    background: var(--nav-bg);
    text-align: start;
    font-size: 1.8em;
  }
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@ -17,16 +17,16 @@

  <!-- Large screen -->
  <a class="navbar-brand d-none d-md-flex" [ngClass]="{'dual-logos': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="48px" class="mr-3">
      } @else {
+        <ng-template [ngIf]="subdomain && enterpriseInfo">
+          <div class="subdomain_container">
+            <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+          </div>
+          <div class="vertical-line"></div>
+        </ng-template>
        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
      }
@ -38,24 +38,28 @@
  </a>
  <!-- Mobile -->
  <a class="navbar-brand d-flex d-md-none justify-content-center" [ngClass]="{'dual-logos': subdomain, 'mr-0': subdomain}" [routerLink]="['/' | relativeUrl]" (click)="brandClick($event)">
-    <ng-template [ngIf]="subdomain && enterpriseInfo">
-      <div class="subdomain_container">
-        <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
-      </div>
-      <div class="vertical-line"></div>
-    </ng-template>
-    <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
-      @if (enterpriseInfo?.header_img) {
-        <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
-      } @else {
-        <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
-        <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
-      }
-        <div class="connection-badge">
-        <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
-        <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
-      </div>
-    </ng-container>
+    @if (enterpriseInfo?.header_img) {
+      <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="42px">
+    } @else {
+      <ng-template [ngIf]="subdomain && enterpriseInfo">
+        <div class="subdomain_container">
+          <img [src]="enterpriseInfo.img || '/api/v1/services/enterprise/images/' + subdomain + '/logo?imageMd5=' + enterpriseInfo.imageMd5" class="subdomain_logo" [class]="{'rounded': enterpriseInfo.rounded_corner}">
+        </div>
+        <div class="vertical-line"></div>
+      </ng-template>
+      <ng-container *ngIf="{ val: connectionState$ | async } as connectionState">
+        @if (enterpriseInfo?.header_img) {
+          <img [src]="enterpriseInfo?.header_img" alt="enterpriseInfo.title" height="36px">
+        } @else {
+          <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126" class="mempool-logo" [ngStyle]="{'opacity': connectionState.val === 2 ? 1 : 0.5 }"></app-svg-images>
+          <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+        }
+          <div class="connection-badge">
+          <div class="badge badge-warning" *ngIf="connectionState.val === 0" i18n="master-page.offline">Offline</div>
+          <div class="badge badge-warning" *ngIf="connectionState.val === 1" i18n="master-page.reconnecting">Reconnecting...</div>
+        </div>
+      </ng-container>
+    }
  </a>

  <div (window:resize)="onResize()" ngbDropdown class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.TESTNET4_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.LIQUID_TESTNET_ENABLED">
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@ -3,6 +3,7 @@
  position: -webkit-sticky;
  top: 0;
  width: 100%;
+  background-color: var(--bg);
  z-index: 100;
 }

@ -18,7 +19,7 @@ fa-icon {
  z-index: 100;
  min-height: 64px;
  width: 100%;
-  background-color: var(--bg);
+  background-color: var(--nav-bg);
 }

 li.nav-item {
@ -59,7 +60,7 @@ li.nav-item {
 }

 .navbar-nav {
-  background: var(--navbar-bg);
+  background: var(--nav-bg);
  bottom: 0;
  box-shadow: 0px 0px 15px 0px #000;
  flex-direction: row;
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@ -56,7 +56,7 @@
 .fee-span {
  font-size: 11px;
  margin-bottom: 5px;
-  color: #fff000;
+  color: var(--yellow);
 }

 .transaction-count {
@ -119,7 +119,7 @@
  height: 0;
  border-left: calc(var(--block-size) * 0.3) solid transparent;
  border-right: calc(var(--block-size) * 0.3) solid transparent;
-  border-bottom: calc(var(--block-size) * 0.3) solid #FFF;
+  border-bottom: calc(var(--block-size) * 0.3) solid var(--fg);
 }

 .blockLink {
--- a/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
+++ b/frontend/src/app/components/mining-dashboard/mining-dashboard.component.scss
@ -63,7 +63,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline-tooltip.component.scss
@ -1,10 +1,10 @@
 .rbf-tooltip {
  position: fixed;
  z-index: 3;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
-  color: #b1b1b1;
+  color: var(--tooltip-grey);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
--- a/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
+++ b/frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss
@ -159,7 +159,7 @@

      &.selected {
        .shape-border {
-          background: #9339f4;
+          background: var(--mainnet-alt);
        }
      }

@ -183,7 +183,7 @@
          width: calc(1em + 16px);

          .shape {
-            border: solid 4px #9339f4;
+            border: solid 4px var(--mainnet-alt);
          }

          &:hover {
--- a/frontend/src/app/components/theme-selector/theme-selector.component.html
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.html
@ -3,5 +3,6 @@
        <option value="default" i18n="mempool-goggles.classic">Classic</option>
        <option value="contrast">BlueMatt</option>
        <option value="wiz">wiz</option>
+        <option value="bukele">Bukele</option>
    </select>
 </div>
--- a/frontend/src/app/components/theme-selector/theme-selector.component.ts
+++ b/frontend/src/app/components/theme-selector/theme-selector.component.ts
@ -11,7 +11,7 @@ import { Subscription } from 'rxjs';
 })
 export class ThemeSelectorComponent implements OnInit {
  themeForm: UntypedFormGroup;
-  themes = ['default', 'contrast', 'wiz'];
+  themes = ['default', 'contrast', 'wiz', 'bukele'];
  themeSubscription: Subscription;

  constructor(
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@ -103,7 +103,8 @@ td.amount.large {
 	margin-top: 10px;
 }
 .assetBox {
-	background-color: #653b9c90;
+	background: color-mix(in srgb, var(--tertiary) 56%, transparent);
+
 }

 .details-container {
--- a/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
+++ b/frontend/src/app/components/tx-bowtie-graph-tooltip/tx-bowtie-graph-tooltip.component.scss
@ -1,6 +1,6 @@
 .bowtie-graph-tooltip {
  position: absolute;
-  background: rgba(#11131f, 0.95);
+  background: color-mix(in srgb, var(--active-bg) 95%, transparent);
  border-radius: 4px;
  box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  color: var(--tooltip-grey);
--- a/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
+++ b/frontend/src/app/components/tx-bowtie-graph/tx-bowtie-graph.component.ts
@ -84,7 +84,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
  refreshOutspends$: ReplaySubject<string> = new ReplaySubject();

  gradientColors = {
-    '': ['#9339f4', '#105fb0', '#9339f400'],
+    '': ['var(--mainnet-alt)', 'var(--primary)', 'color-mix(in srgb, var(--mainnet-alt) 1%, transparent)'],
    // liquid: ['#116761', '#183550'],
    liquid: ['#09a197', '#0f62af', '#09a19700'],
    // 'liquidtestnet': ['#494a4a', '#272e46'],
@ -96,7 +96,7 @@ export class TxBowtieGraphComponent implements OnInit, OnChanges {
    signet: ['#d24fc8', '#a84fd2', '#d24fc800'],
  };

-  gradient: string[] = ['#105fb0', '#105fb0'];
+  gradient: string[] = ['var(--primary)', 'var(--primary)'];

  constructor(
    private router: Router,
--- a/frontend/src/app/dashboard/dashboard.component.scss
+++ b/frontend/src/app/dashboard/dashboard.component.scss
@ -301,7 +301,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
@ -435,7 +436,8 @@

 .in-progress-message {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: 20px;
  text-align: center;
  padding-bottom: 3px;
--- a/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
+++ b/frontend/src/app/lightning/lightning-dashboard/lightning-dashboard.component.scss
@ -66,7 +66,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.scss
@ -11,7 +11,8 @@

 .main-title {
  position: relative;
-  color: #ffffff91;
+  color: var(--fg);
+  opacity: var(--opacity);
  margin-top: -13px;
  font-size: 10px;
  text-transform: uppercase;
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@ -27,7 +27,9 @@ export interface Customization {
    name: string;
    site_id?: number;
    title: string;
-    img: string;
+    img?: string;
+    header_img?: string;
+    footer_img?: string;
    rounded_corner: boolean;
  },
  dashboard: {
--- a/frontend/src/app/services/theme.service.ts
+++ b/frontend/src/app/services/theme.service.ts
@ -17,14 +17,14 @@ export class ThemeService {
    private storageService: StorageService,
    private stateService: StateService,
  ) {
-    const theme = this.storageService.getValue('theme-preference') || this.stateService.env.customize?.theme || 'default';
+    const theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default';
    this.apply(theme);
  }

  apply(theme) {
    this.theme = theme;
    if (theme !== 'default') {
-      theme === 'contrast' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
+      theme === 'contrast'  || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
      try {
        if (!this.style) {
          this.style = document.createElement('link');
@ -44,7 +44,9 @@ export class ThemeService {
        this.style = null;
      }
    }
-    this.storageService.setValue('theme-preference', theme);
+    if (!this.stateService.env.customize?.theme) {
+      this.storageService.setValue('theme-preference', theme);
+    }
    this.themeChanged$.next(this.theme);
  }
 }
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.html
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.html
@ -4,13 +4,19 @@
    <div class="row main" [class]="{'services': isServicesPage}">
      <div class="col-md-12 branding mt-2">
        <div class="main-logo" [class]="{'services': isServicesPage}">
-          <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
-          <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+          @if (enterpriseInfo?.footer_img) {
+            <img [src]="enterpriseInfo?.footer_img" alt="enterpriseInfo.title" height="60px" class="mr-3">
+          } @else {
+            <app-svg-images *ngIf="officialMempoolSpace" name="officialMempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+            <app-svg-images *ngIf="!officialMempoolSpace" name="mempoolSpace" viewBox="0 0 500 126"></app-svg-images>
+          }
        </div>
-        <p class="explore-tagline-mobile">
-          <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-          <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
-        </p>
+        @if (!enterpriseInfo?.footer_img) {
+          <p class="explore-tagline-mobile">
+            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+          </p>
+        }
        <div class="site-options language-selector d-flex justify-content-center align-items-center" [class]="{'services': isServicesPage}">
          <div class="selector">
            <app-language-selector></app-language-selector>
@ -21,25 +27,31 @@
          <div class="selector">
            <app-rate-unit-selector></app-rate-unit-selector>
          </div>
-          <div class="selector d-none d-sm-flex">
-            <app-theme-selector></app-theme-selector>
-          </div>
+          @if (!env.customize?.theme) {
+            <div class="selector d-none d-sm-flex">
+              <app-theme-selector></app-theme-selector>
+            </div>
+          }
          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-none d-sm-flex justify-content-center" [routerLink]="['/login' | relativeUrl]">
            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
          </a>
        </div>
-        <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
-          <app-theme-selector></app-theme-selector>
-        </div>
-        <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
-          <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
-          <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
-        </a>
-        <p class="explore-tagline-desktop">
-          <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
-          <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
-        </p>
+        @if (!env.customize?.theme) {
+          <div class="selector d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0">
+            <app-theme-selector></app-theme-selector>
+          </div>
+        }
+        @if (!enterpriseInfo?.footer_img) {
+          <a *ngIf="stateService.isMempoolSpaceBuild" class="btn btn-purple sponsor d-flex d-sm-none justify-content-center ml-auto mr-auto mt-0 mb-2" [routerLink]="['/login' | relativeUrl]">
+            <span *ngIf="loggedIn" i18n="shared.my-account" class="nowrap">My Account</span>
+            <span *ngIf="!loggedIn" i18n="shared.sign-in" class="nowrap">Sign In</span>
+          </a>
+          <p class="explore-tagline-desktop">
+            <ng-container i18n="@@7deec1c1520f06170e1f8e8ddfbe4532312f638f">Explore the full Bitcoin ecosystem</ng-container>
+            <ng-template [ngIf]="locale.substr(0, 2) === 'en'">&reg;</ng-template>
+          </p>
+        }
      </div>
    </div>
    <div class="row col-md-12 link-tree" [class]="{'services': isServicesPage}">
--- a/frontend/src/app/shared/components/global-footer/global-footer.component.ts
+++ b/frontend/src/app/shared/components/global-footer/global-footer.component.ts
@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, Inject, LOCALE_ID, HostListener, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Observable, merge, of, Subject, Subscription } from 'rxjs';
 import { tap, takeUntil } from 'rxjs/operators';
@ -8,6 +8,7 @@ import { LanguageService } from '../../../services/language.service';
 import { NavigationService } from '../../../services/navigation.service';
 import { StorageService } from '../../../services/storage.service';
 import { WebsocketService } from '../../../services/websocket.service';
+import { EnterpriseService } from '../../../services/enterprise.service';

@Component({
  selector: 'app-global-footer',
@ -15,7 +16,7 @@ import { WebsocketService } from '../../../services/websocket.service';
  styleUrls: ['./global-footer.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GlobalFooterComponent implements OnInit {
+export class GlobalFooterComponent implements OnInit, OnDestroy {
  private destroy$: Subject<any> = new Subject<any>();
  env: Env;
  officialMempoolSpace = this.stateService.env.OFFICIAL_MEMPOOL_SPACE;
@ -32,10 +33,14 @@ export class GlobalFooterComponent implements OnInit {
  urlSubscription: Subscription;
  isServicesPage = false;

+  enterpriseInfo: any;
+  enterpriseInfo$: Subscription;
+
  constructor(
    public stateService: StateService,
    private languageService: LanguageService,
    private navigationService: NavigationService,
+    private enterpriseService: EnterpriseService,
    @Inject(LOCALE_ID) public locale: string,
    private storageService: StorageService,
    private route: ActivatedRoute,
@ -54,6 +59,9 @@ export class GlobalFooterComponent implements OnInit {
    this.navigationService.subnetPaths.subscribe((paths) => {
      this.networkPaths = paths;
    });
+    this.enterpriseInfo$ = this.enterpriseService.info$.subscribe(info => {
+      this.enterpriseInfo = info;
+    });
    this.network$ = merge(of(''), this.stateService.networkChanged$).pipe(
      tap((network: string) => {
        return network;
@ -73,6 +81,9 @@ export class GlobalFooterComponent implements OnInit {
    this.destroy$.next(true);
    this.destroy$.complete();
    this.urlSubscription.unsubscribe();
+    if (this.enterpriseInfo$) {
+      this.enterpriseInfo$.unsubscribe();
+    }
  }

  networkLink(network) {
--- a/frontend/src/index.sv.html
+++ b/frontend/src/index.sv.html
@ -3,7 +3,7 @@

 <head>
  <meta charset="utf-8">
-  <title>Oficina Nacional del Bitcoin - Bitcoin Explorer</title>
+  <title>Bitcoin Office - Explorer</title>
  <script src="/resources/config.js"></script>
  <script src="/resources/customize.js"></script>
  <base href="/">
--- a/frontend/src/resources/elsalvador.svg
+++ b/frontend/src/resources/elsalvador.svg
@ -1,37 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
   width="159.7426"
   height="162.47015"
   viewBox="0 0 42.26523 42.986894"
   version="1.1"
-   id="svg5"
-   sodipodi:docname="elsalvador.svg"
-   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   id="elsalvador"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview469"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="2.8463012"
-     inkscape:cx="21.606989"
-     inkscape:cy="67.982966"
-     inkscape:window-width="1728"
-     inkscape:window-height="1051"
-     inkscape:window-x="0"
-     inkscape:window-y="38"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg5" />
  <defs
     id="defs2">
    <clipPath
--- a/frontend/src/resources/onbtc.svg
+++ b/frontend/src/resources/onbtc.svg
@ -1,118 +1,44 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-
 <svg
-   width="166.66856mm"
-   height="27.910412mm"
-   viewBox="0 0 166.66856 27.910412"
+   width="73.044792mm"
+   height="27.902231mm"
+   viewBox="0 0 73.04479 27.902231"
   version="1.1"
-   id="svg5"
-   sodipodi:docname="onbtc.svg"
-   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   id="onbtc"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview188"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="1.9192657"
-     inkscape:cx="243.84326"
-     inkscape:cy="52.88481"
-     inkscape:window-width="1728"
-     inkscape:window-height="1051"
-     inkscape:window-x="0"
-     inkscape:window-y="38"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="text1855" />
  <defs
     id="defs2" />
  <g
-     aria-label="OFICINA NACIONAL DEL BITCOIN"
+     aria-label="BITCOIN OFFICE"
     id="text1855"
     style="fill:#d2d2d2;stroke-width:3.37609;stroke-linecap:square"
-     transform="translate(-15.744428,-40.187266)">
+     transform="translate(-15.744428,-40.187135)">
    <path
-       d="m 28.492368,45.40464 c 0,-3.039246 -2.735322,-5.217373 -5.92653,-5.217373 -3.596442,0 -6.179801,2.380743 -6.179801,5.740798 0,3.157439 2.785976,5.284912 6.095377,5.284912 3.275632,0 6.010954,-2.397628 6.010954,-5.808337 z m -1.587162,0.557195 c 0,2.397627 -1.317007,4.829024 -4.069213,4.829024 -2.718437,0 -4.862794,-2.22878 -4.862794,-5.386219 0,-2.026164 1.181929,-4.795255 4.153636,-4.795255 2.785976,0 4.778371,2.211895 4.778371,5.35245 z"
-       id="path415" />
+       d="m 17.787525,49.237549 c 0,1.063761 -0.270162,1.384578 -1.65474,1.384578 h -0.388357 v 0.320817 h 6.179946 c 2.718501,0 3.647182,-1.874246 3.647182,-3.208169 0,-1.317038 -0.928681,-2.347029 -2.51588,-2.819812 v -0.03377 c 1.131301,-0.202621 1.924901,-1.097532 1.924901,-2.059982 0,-0.810485 -0.337702,-1.384578 -1.029991,-1.874246 -0.607864,-0.439013 -1.908016,-0.658519 -3.393905,-0.658519 -0.320817,0 -1.604084,0.01689 -2.532765,0.05065 -0.489668,0.01689 -1.65474,0.08443 -2.127522,0.101311 v 0.320817 h 0.590978 c 1.181957,0 1.300153,0.506553 1.300153,1.469003 z m 1.401463,-8.577631 c 0.422127,-0.01688 1.114417,-0.05065 1.485889,-0.05065 2.076867,0 2.786041,1.080646 2.786041,2.262603 0,1.317038 -0.810485,1.958672 -2.431454,1.958672 h -1.840476 z m 0,4.491436 h 1.823591 c 1.975556,0 2.971777,1.333923 2.971777,2.634076 0,1.317038 -0.641634,2.701616 -2.870467,2.701616 -1.418348,0 -1.924901,-0.455898 -1.924901,-1.739165 z" />
    <path
-       d="m 37.390604,43.935671 h -0.28704 c -0.05065,0.726042 -0.354579,1.080621 -0.979313,1.080621 h -3.34317 v -3.967905 h 3.208093 c 1.046851,0 1.384545,0.405233 1.40143,1.384545 h 0.28704 v -1.992394 h -7.564346 v 0.320809 c 1.181929,0.01689 1.266352,0.506541 1.266352,1.587162 v 6.618803 c 0,1.36766 -0.185731,1.587161 -1.232583,1.6547 v 0.32081 h 4.102982 v -0.32081 c -1.266352,0 -1.468968,-0.354579 -1.468968,-1.300122 v -3.697749 h 3.123669 c 0.810466,0 1.165045,0.303924 1.198814,1.283237 h 0.28704 z"
-       id="path417" />
+       d="m 31.329346,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" />
    <path
-       d="m 43.215796,50.622012 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159113 c 0,-1.131275 0.371463,-1.367661 1.435199,-1.367661 v -0.320809 h -4.102982 v 0.320809 c 0.945543,0.05065 1.266353,0.303925 1.266353,1.215698 v 7.192883 c 0,1.131275 -0.219501,1.40143 -1.266353,1.452084 v 0.32081 h 4.102982 z"
-       id="path419" />
+       d="m 38.505484,41.048275 h 2.938008 c 0.675404,0 0.979335,0.388358 1.232612,1.874246 h 0.303932 l -0.270162,-2.735386 h -0.320817 c -0.03377,0.202621 -0.287046,0.253277 -0.523438,0.253277 h -8.121733 c -0.118195,0 -0.236391,-0.01689 -0.337702,-0.05066 -0.10131,-0.03377 -0.168851,-0.10131 -0.185736,-0.202621 h -0.320817 l -0.270161,2.735386 h 0.303932 c 0.253276,-1.485888 0.557208,-1.874246 1.232612,-1.874246 h 2.938007 v 8.341239 c 0,0.911796 -0.303932,1.232613 -1.333923,1.232613 H 35.14535 v 0.320817 h 5.318806 v -0.320817 h -0.624749 c -1.029991,0 -1.333923,-0.320817 -1.333923,-1.232613 z" />
    <path
-       d="m 55.18702,43.209629 -0.151963,-2.448282 h -0.25327 c -0.03377,0.05065 -0.118193,0.101308 -0.303925,0.101308 -0.523426,0 -1.435199,-0.675388 -3.562672,-0.675388 -3.528902,0 -6.061607,2.363858 -6.061607,5.63949 0,3.12367 2.465166,5.38622 5.89276,5.38622 1.992395,0 2.735322,-0.60785 3.815943,-0.455887 0.405233,-0.658504 0.861119,-1.705355 1.080621,-2.465167 h -0.32081 c -1.148159,2.043049 -2.785975,2.498936 -4.119867,2.498936 -2.566474,0 -4.761485,-2.245665 -4.761485,-5.301796 0,-2.83663 1.756009,-4.879678 4.575754,-4.879678 1.840432,0 3.292516,1.029966 3.849711,2.600244 z"
-       id="path421" />
+       d="m 54.732034,43.209568 -0.151966,-2.448339 h -0.253277 c -0.03377,0.05065 -0.118196,0.10131 -0.303932,0.10131 -0.523438,0 -1.435233,-0.675404 -3.562756,-0.675404 -3.528985,0 -6.06175,2.363914 -6.06175,5.639623 0,3.123744 2.465224,5.386347 5.892899,5.386347 1.992442,0 2.735387,-0.607863 3.816033,-0.455898 0.405242,-0.658518 0.86114,-1.705395 1.080646,-2.465224 h -0.320817 c -1.148186,2.043097 -2.786041,2.498995 -4.119964,2.498995 -2.566535,0 -4.761598,-2.245719 -4.761598,-5.301922 0,-2.836696 1.75605,-4.879793 4.575862,-4.879793 1.840476,0 3.292594,1.029991 3.849803,2.600305 z" />
    <path
-       d="m 61.147288,50.622012 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159113 c 0,-1.131275 0.371463,-1.367661 1.435199,-1.367661 v -0.320809 h -4.102982 v 0.320809 c 0.945543,0.05065 1.266352,0.303925 1.266352,1.215698 v 7.192883 c 0,1.131275 -0.219501,1.40143 -1.266352,1.452084 v 0.32081 h 4.102982 z"
-       id="path423" />
+       d="m 68.83106,45.404631 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157514 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829139 -4.069309,4.829139 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386347 0,-2.026212 1.181957,-4.795368 4.153735,-4.795368 2.786041,0 4.778483,2.211948 4.778483,5.352576 z" />
    <path
-       d="m 73.810786,51.061014 v -9.421663 c 0,-0.658503 0.270155,-0.878004 1.536508,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.350776,0.03377 1.654701,0.219501 1.654701,1.249468 v 6.720111 l -7.952694,-8.290388 h -2.650899 v 0.320809 c 0.590965,0.01689 1.029967,0.151962 1.418315,0.422117 v 8.307273 c 0,0.776696 -0.337694,1.131275 -1.384545,1.131275 h -0.06754 v 0.32081 h 3.917251 v -0.32081 c -1.4352,0 -1.705355,-0.25327 -1.705355,-1.468969 v -7.243536 l 8.746275,9.151507 z"
-       id="path425" />
+       d="m 74.588877,50.622127 c -1.165072,0 -1.435233,-0.337702 -1.435233,-1.333923 v -7.159282 c 0,-1.131302 0.371472,-1.367693 1.435233,-1.367693 v -0.320817 h -4.103079 v 0.320817 c 0.945565,0.05065 1.266382,0.303931 1.266382,1.215727 v 7.193052 c 0,1.131302 -0.219506,1.401463 -1.266382,1.452119 v 0.320817 h 4.103079 z" />
    <path
-       d="m 82.776557,46.282644 1.131275,3.073016 c 0.06754,0.168847 0.185732,0.422117 0.185732,0.692272 0,0.472772 -0.354579,0.57408 -1.317007,0.57408 h -0.439002 v 0.32081 h 4.643293 v -0.32081 c -0.844235,0 -1.198814,-0.168847 -1.536508,-1.063736 l -3.528902,-9.371009 h -1.468969 l 0.151962,0.371464 -3.073016,8.391696 c -0.54031,1.468969 -0.726042,1.6547 -1.823547,1.671585 v 0.32081 h 3.900366 v -0.32081 h -0.270156 c -0.928658,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.219501,-0.742927 0.337694,-1.063736 l 0.979312,-2.650898 z m -0.28704,-0.742927 h -2.921053 l 1.4352,-3.934135 z"
-       id="path427" />
+       d="m 87.252675,51.061139 v -9.421885 c 0,-0.658519 0.270161,-0.878025 1.536544,-0.878025 v -0.320817 h -3.951114 v 0.320817 c 1.350808,0.03377 1.65474,0.219506 1.65474,1.249497 v 6.72027 l -7.952882,-8.290584 h -2.65096 v 0.320817 c 0.590978,0.01689 1.029991,0.151966 1.418348,0.422127 v 8.307469 c 0,0.776715 -0.337702,1.131302 -1.384578,1.131302 h -0.06754 v 0.320817 h 3.917343 v -0.320817 c -1.435234,0 -1.705395,-0.253277 -1.705395,-1.469004 v -7.243708 l 8.746481,9.151724 z" />
    <path
-       d="m 103.6629,51.061014 v -9.421663 c 0,-0.658503 0.27015,-0.878004 1.53651,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.35077,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.720111 l -7.952698,-8.290388 h -2.650898 v 0.320809 c 0.590965,0.01689 1.029967,0.151962 1.418315,0.422117 v 8.307273 c 0,0.776696 -0.337694,1.131275 -1.384545,1.131275 h -0.06754 v 0.32081 h 3.91725 v -0.32081 c -1.435199,0 -1.705354,-0.25327 -1.705354,-1.468969 v -7.243536 l 8.74628,9.151507 z"
-       id="path429" />
+       d="m 27.851044,62.280894 c 0,-3.039318 -2.735386,-5.217496 -5.92667,-5.217496 -3.596526,0 -6.179946,2.380799 -6.179946,5.740934 0,3.157513 2.786041,5.285036 6.095521,5.285036 3.275709,0 6.011095,-2.397684 6.011095,-5.808474 z m -1.587199,0.557208 c 0,2.397684 -1.317038,4.829138 -4.069309,4.829138 -2.718501,0 -4.862909,-2.228833 -4.862909,-5.386346 0,-2.026212 1.181957,-4.795369 4.153735,-4.795369 2.786041,0 4.778483,2.211948 4.778483,5.352577 z" />
    <path
-       d="m 112.62867,46.282644 1.13127,3.073016 c 0.0675,0.168847 0.18574,0.422117 0.18574,0.692272 0,0.472772 -0.35458,0.57408 -1.31701,0.57408 h -0.439 v 0.32081 h 4.64329 v -0.32081 c -0.84424,0 -1.19881,-0.168847 -1.53651,-1.063736 l -3.5289,-9.371009 h -1.46897 l 0.15196,0.371464 -3.07301,8.391696 c -0.54031,1.468969 -0.72604,1.6547 -1.82355,1.671585 v 0.32081 h 3.90037 v -0.32081 h -0.27016 c -0.92866,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.2195,-0.742927 0.33769,-1.063736 l 0.97932,-2.650898 z m -0.28704,-0.742927 h -2.92105 l 1.4352,-3.934135 z"
-       id="path431" />
+       d="m 36.749491,60.81189 h -0.287047 c -0.05065,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.343249 v -3.967998 h 3.208168 c 1.046877,0 1.384579,0.405242 1.401464,1.384578 h 0.287046 v -1.992442 h -7.564524 v 0.320817 c 1.181957,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266382,0 -1.469003,-0.354587 -1.469003,-1.300152 V 62.5004 h 3.123743 c 0.810485,0 1.165072,0.303932 1.198842,1.283267 h 0.287047 z" />
    <path
-       d="m 127.45339,43.209629 -0.15196,-2.448282 h -0.25327 c -0.0338,0.05065 -0.1182,0.101308 -0.30393,0.101308 -0.52342,0 -1.4352,-0.675388 -3.56267,-0.675388 -3.5289,0 -6.06161,2.363858 -6.06161,5.63949 0,3.12367 2.46517,5.38622 5.89276,5.38622 1.9924,0 2.73533,-0.60785 3.81595,-0.455887 0.40523,-0.658504 0.86112,-1.705355 1.08062,-2.465167 h -0.32081 c -1.14816,2.043049 -2.78598,2.498936 -4.11987,2.498936 -2.56647,0 -4.76148,-2.245665 -4.76148,-5.301796 0,-2.83663 1.756,-4.879678 4.57575,-4.879678 1.84043,0 3.29252,1.029966 3.84971,2.600244 z"
-       id="path433" />
+       d="m 45.715447,60.81189 h -0.287046 c -0.05066,0.726059 -0.354587,1.080646 -0.979336,1.080646 h -3.34325 v -3.967998 h 3.208169 c 1.046876,0 1.384578,0.405242 1.401463,1.384578 h 0.287047 V 57.316674 H 38.43797 v 0.320817 c 1.181956,0.01689 1.266382,0.506553 1.266382,1.5872 v 6.618959 c 0,1.367693 -0.185736,1.587199 -1.232612,1.654739 v 0.320817 h 4.103079 v -0.320817 c -1.266383,0 -1.469004,-0.354587 -1.469004,-1.300152 V 62.5004 h 3.123744 c 0.810484,0 1.165071,0.303932 1.198842,1.283267 h 0.287046 z" />
    <path
-       d="m 133.41366,50.622012 c -1.16505,0 -1.4352,-0.337694 -1.4352,-1.333891 v -7.159113 c 0,-1.131275 0.37146,-1.367661 1.4352,-1.367661 v -0.320809 h -4.10299 v 0.320809 c 0.94555,0.05065 1.26636,0.303925 1.26636,1.215698 v 7.192883 c 0,1.131275 -0.2195,1.40143 -1.26636,1.452084 v 0.32081 h 4.10299 z"
-       id="path435" />
+       d="m 51.540777,67.498389 c -1.165072,0 -1.435234,-0.337702 -1.435234,-1.333923 v -7.159282 c 0,-1.131301 0.371472,-1.367693 1.435234,-1.367693 v -0.320817 h -4.10308 v 0.320817 c 0.945566,0.05066 1.266383,0.303932 1.266383,1.215727 v 7.193053 c 0,1.131301 -0.219506,1.401463 -1.266383,1.452118 v 0.320817 h 4.10308 z" />
    <path
-       d="m 147.17466,45.40464 c 0,-3.039246 -2.73532,-5.217373 -5.92653,-5.217373 -3.59644,0 -6.1798,2.380743 -6.1798,5.740798 0,3.157439 2.78597,5.284912 6.09537,5.284912 3.27564,0 6.01096,-2.397628 6.01096,-5.808337 z m -1.58717,0.557195 c 0,2.397627 -1.317,4.829024 -4.06921,4.829024 -2.71843,0 -4.86279,-2.22878 -4.86279,-5.386219 0,-2.026164 1.18193,-4.795255 4.15363,-4.795255 2.78598,0 4.77837,2.211895 4.77837,5.35245 z"
-       id="path437" />
+       d="m 63.512285,60.085831 -0.151966,-2.44834 h -0.253276 c -0.03377,0.05066 -0.118196,0.101311 -0.303932,0.101311 -0.523438,0 -1.435234,-0.675404 -3.562756,-0.675404 -3.528986,0 -6.061751,2.363914 -6.061751,5.639623 0,3.123744 2.465225,5.386347 5.8929,5.386347 1.992442,0 2.735386,-0.607864 3.816032,-0.455898 0.405243,-0.658519 0.86114,-1.705395 1.080647,-2.465224 h -0.320817 c -1.148187,2.043097 -2.786042,2.498994 -4.119964,2.498994 -2.566535,0 -4.761598,-2.245718 -4.761598,-5.301921 0,-2.836697 1.75605,-4.879794 4.575862,-4.879794 1.840475,0 3.292594,1.029991 3.849802,2.600306 z" />
    <path
-       d="m 159.97326,51.061014 v -9.421663 c 0,-0.658503 0.27016,-0.878004 1.53651,-0.878004 v -0.320809 h -3.95102 v 0.320809 c 1.35078,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.720111 l -7.95269,-8.290388 h -2.6509 v 0.320809 c 0.59096,0.01689 1.02996,0.151962 1.41831,0.422117 v 8.307273 c 0,0.776696 -0.33769,1.131275 -1.38454,1.131275 h -0.0675 v 0.32081 h 3.91725 v -0.32081 c -1.4352,0 -1.70536,-0.25327 -1.70536,-1.468969 v -7.243536 l 8.74628,9.151507 z"
-       id="path439" />
-    <path
-       d="m 168.93903,46.282644 1.13127,3.073016 c 0.0675,0.168847 0.18573,0.422117 0.18573,0.692272 0,0.472772 -0.35458,0.57408 -1.317,0.57408 h -0.43901 v 0.32081 h 4.6433 v -0.32081 c -0.84424,0 -1.19882,-0.168847 -1.53651,-1.063736 l -3.5289,-9.371009 h -1.46897 l 0.15196,0.371464 -3.07302,8.391696 c -0.54031,1.468969 -0.72604,1.6547 -1.82354,1.671585 v 0.32081 h 3.90036 v -0.32081 h -0.27015 c -0.92866,0 -1.36766,-0.168847 -1.36766,-0.624734 0,-0.236386 0.2195,-0.742927 0.33769,-1.063736 l 0.97931,-2.650898 z m -0.28704,-0.742927 h -2.92106 l 1.4352,-3.934135 z"
-       id="path441" />
-    <path
-       d="m 182.413,48.477655 h -0.30393 c -1.06373,1.468969 -1.36766,1.857317 -2.36386,1.857317 h -2.48205 c -0.48965,0 -0.67538,-0.168847 -0.67538,-0.624734 v -7.783847 c 0,-1.046851 0.28704,-1.165044 1.38454,-1.165044 h 0.62474 v -0.320809 h -4.98099 v 0.320809 h 0.23638 c 1.06374,0 1.3339,0.371463 1.3339,1.266352 v 7.479923 c 0,0.86112 -0.28704,1.11439 -1.06374,1.11439 h -0.5572 v 0.32081 h 7.54747 z"
-       id="path443" />
-    <path
-       d="m 17.36535,66.27413 c 0,0.979312 -0.422118,1.232583 -1.333892,1.232583 h -0.287039 v 0.320809 h 5.403104 c 4.271829,0 6.247339,-3.056131 6.247339,-5.60572 0,-2.785976 -1.97551,-5.048526 -6.433071,-5.048526 -0.878004,0 -1.907971,0.01689 -2.83663,0.05065 -0.928658,0.03377 -1.756009,0.06754 -2.380742,0.101308 v 0.32081 h 0.337694 c 0.996197,0 1.283237,0.270155 1.283237,1.36766 z m 1.40143,-8.712506 c 0.202616,-0.01688 0.658503,-0.06754 1.350776,-0.06754 2.363858,0 3.562672,0.590965 4.339368,1.367661 0.996197,0.996198 1.350776,2.380743 1.350776,3.630211 0,1.739124 -0.776696,3.039246 -1.40143,3.647095 -1.046851,1.046852 -1.992395,1.367661 -4.254945,1.367661 -1.333891,0 -1.384545,-0.236386 -1.384545,-0.928659 z"
-       id="path445" />
-    <path
-       d="m 36.157993,60.820371 h -0.320809 c -0.08442,0.979313 -0.371464,1.266353 -0.979313,1.266353 H 31.83551 v -4.153636 h 3.562672 c 0.607849,0 1.029966,0.303924 1.249468,1.739124 h 0.303924 L 36.816497,57.325238 H 28.71184 v 0.32081 h 0.371464 c 1.131275,0 1.350776,0.405233 1.350776,1.350776 v 7.125343 c 0,1.013083 -0.236386,1.384546 -1.587162,1.384546 h -0.472772 v 0.320809 h 8.965776 l 0.270155,-2.51582 h -0.303924 c -0.422118,1.452084 -0.776696,1.907971 -1.958625,1.907971 h -2.600244 c -0.624734,0 -0.911774,-0.151962 -0.911774,-0.928658 v -3.596442 h 2.853514 c 0.692273,0 1.013082,0.135078 1.14816,1.333892 h 0.320809 z"
-       id="path447" />
-    <path
-       d="m 47.53828,65.362356 h -0.303925 c -1.063736,1.468969 -1.367661,1.857317 -2.363858,1.857317 h -2.482051 c -0.489656,0 -0.675388,-0.168847 -0.675388,-0.624734 v -7.783847 c 0,-1.046851 0.28704,-1.165044 1.384545,-1.165044 h 0.624734 v -0.32081 h -4.980986 v 0.32081 h 0.236385 c 1.063737,0 1.333892,0.371463 1.333892,1.266352 v 7.479923 c 0,0.861119 -0.28704,1.11439 -1.063736,1.11439 h -0.557195 v 0.320809 h 7.547461 z"
-       id="path449" />
-    <path
-       d="m 54.410318,66.122167 c 0,1.063737 -0.270155,1.384546 -1.6547,1.384546 H 52.36727 v 0.320809 h 6.1798 c 2.718437,0 3.647095,-1.874202 3.647095,-3.208093 0,-1.317007 -0.928658,-2.346973 -2.51582,-2.819745 v -0.03377 c 1.131275,-0.202617 1.924856,-1.097506 1.924856,-2.059934 0,-0.810465 -0.337694,-1.384545 -1.029967,-1.874202 -0.607849,-0.439002 -1.907971,-0.658503 -3.393825,-0.658503 -0.320809,0 -1.604046,0.01689 -2.532705,0.05065 -0.489656,0.01688 -1.654701,0.08442 -2.127472,0.101308 v 0.32081 h 0.590964 c 1.181929,0 1.300122,0.506541 1.300122,1.468969 z m 1.40143,-8.577427 c 0.422118,-0.01688 1.114391,-0.05065 1.485854,-0.05065 2.076818,0 2.785976,1.080621 2.785976,2.26255 0,1.317007 -0.810466,1.958626 -2.431397,1.958626 h -1.840433 z m 0,4.49133 h 1.823548 c 1.97551,0 2.971707,1.333891 2.971707,2.634013 0,1.317007 -0.641618,2.701552 -2.870399,2.701552 -1.418315,0 -1.924856,-0.455887 -1.924856,-1.739124 z"
-       id="path451" />
-    <path
-       d="m 67.951819,67.506713 c -1.165044,0 -1.435199,-0.337694 -1.435199,-1.333891 v -7.159114 c 0,-1.131274 0.371463,-1.36766 1.435199,-1.36766 v -0.32081 h -4.102982 v 0.32081 c 0.945543,0.05065 1.266353,0.303924 1.266353,1.215698 v 7.192883 c 0,1.131275 -0.219502,1.40143 -1.266353,1.452084 v 0.320809 h 4.102982 z"
-       id="path453" />
-    <path
-       d="m 75.127789,57.933088 h 2.937938 c 0.675388,0 0.979313,0.388348 1.232584,1.874201 h 0.303924 L 79.33208,57.071968 h -0.320809 c -0.03377,0.202616 -0.28704,0.25327 -0.523426,0.25327 h -8.121541 c -0.118193,0 -0.236386,-0.01688 -0.337694,-0.05065 -0.101308,-0.03377 -0.168847,-0.101308 -0.185732,-0.202616 h -0.320809 l -0.270155,2.735321 h 0.303924 c 0.253271,-1.485853 0.557195,-1.874201 1.232583,-1.874201 h 2.937938 v 8.341042 c 0,0.911774 -0.303924,1.232583 -1.333891,1.232583 h -0.624734 v 0.320809 h 5.318681 v -0.320809 h -0.624734 c -1.029967,0 -1.333892,-0.320809 -1.333892,-1.232583 z"
-       id="path455" />
-    <path
-       d="m 91.353956,60.094329 -0.151962,-2.448281 h -0.25327 c -0.03377,0.05065 -0.118193,0.101308 -0.303925,0.101308 -0.523426,0 -1.4352,-0.675388 -3.562672,-0.675388 -3.528902,0 -6.061607,2.363858 -6.061607,5.63949 0,3.12367 2.465166,5.386219 5.89276,5.386219 1.992395,0 2.735322,-0.607849 3.815943,-0.455886 0.405232,-0.658504 0.861119,-1.705355 1.08062,-2.465167 h -0.320809 c -1.14816,2.043049 -2.785976,2.498936 -4.119867,2.498936 -2.566474,0 -4.761486,-2.245665 -4.761486,-5.301796 0,-2.83663 1.756009,-4.879679 4.575754,-4.879679 1.840433,0 3.292517,1.029967 3.849712,2.600244 z"
-       id="path457" />
-    <path
-       d="m 105.45265,62.28934 c 0,-3.039246 -2.73532,-5.217372 -5.926531,-5.217372 -3.596441,0 -6.1798,2.380743 -6.1798,5.740798 0,3.157439 2.785975,5.284911 6.095376,5.284911 3.275635,0 6.010955,-2.397627 6.010955,-5.808337 z m -1.58716,0.557196 c 0,2.397627 -1.31701,4.829024 -4.069216,4.829024 -2.718437,0 -4.862794,-2.228781 -4.862794,-5.38622 0,-2.026164 1.181929,-4.795255 4.153637,-4.795255 2.785973,0 4.778373,2.211896 4.778373,5.352451 z"
-       id="path459" />
-    <path
-       d="m 111.21033,67.506713 c -1.16504,0 -1.4352,-0.337694 -1.4352,-1.333891 v -7.159114 c 0,-1.131274 0.37147,-1.36766 1.4352,-1.36766 v -0.32081 h -4.10298 v 0.32081 c 0.94554,0.05065 1.26635,0.303924 1.26635,1.215698 v 7.192883 c 0,1.131275 -0.2195,1.40143 -1.26635,1.452084 v 0.320809 h 4.10298 z"
-       id="path461" />
-    <path
-       d="m 123.87383,67.945715 v -9.421663 c 0,-0.658503 0.27015,-0.878004 1.53651,-0.878004 v -0.32081 h -3.95102 v 0.32081 c 1.35077,0.03377 1.6547,0.219501 1.6547,1.249468 v 6.72011 l -7.9527,-8.290388 h -2.6509 v 0.32081 c 0.59097,0.01688 1.02997,0.151962 1.41832,0.422117 v 8.307273 c 0,0.776696 -0.33769,1.131275 -1.38455,1.131275 h -0.0675 v 0.320809 h 3.91726 v -0.320809 c -1.4352,0 -1.70536,-0.253271 -1.70536,-1.468969 v -7.243537 l 8.74628,9.151508 z"
-       id="path463" />
+       d="m 72.444469,60.81189 h -0.320817 c -0.08443,0.979336 -0.371472,1.266382 -0.979335,1.266382 h -3.022433 v -4.153734 h 3.562756 c 0.607863,0 1.029991,0.303932 1.249497,1.739165 h 0.303932 L 73.102988,57.316674 H 64.99814 v 0.320817 h 0.371473 c 1.131301,0 1.350808,0.405243 1.350808,1.350808 v 7.125512 c 0,1.013106 -0.236392,1.384578 -1.5872,1.384578 h -0.472783 v 0.320817 h 8.965988 l 0.270162,-2.51588 h -0.303932 c -0.422127,1.452119 -0.776715,1.908017 -1.958671,1.908017 h -2.600306 c -0.624748,0 -0.911795,-0.151966 -0.911795,-0.928681 v -3.596526 h 2.853582 c 0.692289,0 1.013106,0.135081 1.148186,1.333923 h 0.320817 z" />
  </g>
 </svg>
--- a/frontend/src/resources/onbtclogo.svg
+++ b/frontend/src/resources/onbtclogo.svg
--- a/frontend/src/resources/sv/onbtc-preview.jpg
+++ b/frontend/src/resources/sv/onbtc-preview.jpg
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -64,7 +64,6 @@ $dropdown-link-active-bg: $active-bg;
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
-  --color-fg: #ffffff;
  --title-fg: #{$title-fg};

  --primary: #{$primary};
@ -72,7 +71,11 @@ $dropdown-link-active-bg: $active-bg;
  --tertiary: #{$tertiary};
  --success: #{$success};
  --info: #{$info};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
  --icon: #f1f1f1;
+  --skeleton-bg: #2e324e;
+  --skeleton-bg-light: #5d6182;

  --box-bg: #24273e;
  --stat-box-bg: #181b2d;
@ -81,6 +84,7 @@ $dropdown-link-active-bg: $active-bg;
  --transparent-fg: #ffffff66;
  --fade-out-box-bg-start: rgba(36, 39, 62, 0);
  --fade-out-box-bg-end: rgba(36, 39, 62, 1);
+  --opacity: 0.57;

  --testnet: #1d486f;
  --signet: #6f1d5d;
@ -98,10 +102,15 @@ $dropdown-link-active-bg: $active-bg;

  --green: #3bcc49;
  --red: #dc3545;
-  --yellow: #ffd800;
+  --yellow: #fff000;
  --grey: #6c757d;
  --tooltip-grey: #b1b1b1;
  --orange: #b86d12;
+
+  --search-button: #4d2d77;
+  --search-button-border: #472a6e;
+  --search-button-focus: #533180;
+  --search-button-shadow: #7c58ab80;
 }

 html, body {
@ -171,13 +180,13 @@ main {
 }

 .form-control {
-  color: #fff;
+  color: var(--fg);
  background-color: var(--secondary);
  border: 1px solid rgba(17, 19, 31, 0.2);
 }

 .form-control:focus {
-  color: #fff;
+  color: var(--fg);
  background-color: var(--secondary);
 }

@ -188,25 +197,25 @@ main {

 .btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
  color: #fff;
-  background-color: #4d2d77;
-  border-color: #472a6e;
+  background-color: var(--search-button);
+  border-color: var(--search-button-border);
 }

 .btn-purple:focus, .btn-purple.focus {
  color: #fff;
-  background-color: #533180;
-  border-color: #4d2d77;
-  box-shadow: 0 0 0 0.2rem rgb(124 88 171 / 50%);
+  background-color: var(--search-button-focus);
+  border-color: var(--search-button);
+  box-shadow: 0 0 0 0.2rem var(--search-button-shadow);
 }

 .btn-purple:hover {
  color: #fff;
-  background-color: #533180;
-  border-color: #4d2d77;
+  background-color: var(--search-button-focus);
+  border-color: var(--search-button);
 }

 .form-control.form-control-secondary {
-  color: var(--fg);
+  color: #fff;
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
 }
@ -229,11 +238,11 @@ main {
  position: relative;

  animation: progress 2s ease-in-out infinite;
-  background: #2e324e no-repeat;
+  background: var(--skeleton-bg) no-repeat;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
-    #5d6182,
+    var(--skeleton-bg-light),
    rgba(255, 255, 255, 0)
  );
  background-size: 200px 100%;
@ -271,14 +280,14 @@ main {

 .progress-text {
  span {
-    color: var(--fg) !important;
+    color: #fff !important;
  }
 }

 .block-size, .blocks-container {
  .symbol {
    font-size: 16px;
-    color: var(--fg) !important;
+    color: #fff !important;
  }
 }

@ -418,18 +427,18 @@ html:lang(ru) .card-title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px;
-    color: var(--fg);
+    color: #fff;
    .total-value {
      float: right;
    }
  }
  .active {
-    color: yellow !important;
+    color: var(--yellow) !important;
    .value,
    .total-partial {
-      color: yellow !important;
+      color: var(--yellow) !important;
      .symbol {
-        color: yellow !important;
+        color: var(--yellow) !important;
      }
    }
  }
@ -477,7 +486,7 @@ html:lang(ru) .card-title {
  .total-label {
    width: 100%;
    text-align: left;
-    color: var(--fg);
+    color: #fff;
    margin-top: 5px;
    font-size: 14px;
    span {
@ -728,19 +737,19 @@ h1, h2, h3 {
 }

 .progress-mempool {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, var(--mainnet-alt) 100%);
+  background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, var(--mainnet-alt) 100%);
 }

 .progress-mempool.testnet {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
+  background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--testnet) 0%, var(--testnet-alt) 100%);
 }

 .progress-mempool.signet {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--signet) 0%, var(--signet-alt) 100%);
+  background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--signet) 0%, var(--signet-alt) 100%);
 }

 .progress-mempool.liquid {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
+  background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--liquid) 0%, var(--testnet-alt) 100%);
 }

 .progress-dark {
@ -752,11 +761,11 @@ h1, h2, h3 {
 }

 .progress-light {
-  background-color: #2e324e;
+  background-color: var(--skeleton-bg);
 }

 .progress.progress-health {
-  background: repeating-linear-gradient(to right, $secondary, $secondary 0%, $primary 0%, $success 100%);
+  background: repeating-linear-gradient(to right, var(--secondary), var(--secondary) 0%, var(--primary) 0%, $success 100%);
  justify-content: flex-end;
 }

@ -769,7 +778,7 @@ h1, h2, h3 {
 }

 .alert-mempool {
-  color: var(--fg);
+  color: #fff;
  background-color: var(--tertiary);
  border-color: var(--alert-bg);
  width: 100%;
@ -1137,7 +1146,7 @@ th {
      display: block;
      width: 100%;
      padding: 1rem 2rem;
-      color: var(--fg);
+      color: #fff;
      font-weight: bold;
      &:focus, &:hover, &:active {
        text-decoration: none;
@ -1221,7 +1230,7 @@ th {
 }

 .blink-bg {
-  color: var(--fg);
+  color: #fff;
  background: repeating-linear-gradient($taproot-dark, $taproot-dark 0.163525%, $taproot-light 100%) !important;
  animation: shadowyBackground 1s infinite;
  box-shadow: -10px -15px 75px rgba($taproot, 1);
@ -1244,7 +1253,7 @@ app-master-page, app-liquid-master-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
-  padding-bottom: 60px;
+  padding-bottom: 56px;
  @media (min-width: 992px) {
    padding-bottom: 0px;
  }
@ -1268,12 +1277,36 @@ app-global-footer {

 .dropdown-menu {
  background-color: var(--bg);
+  color: var(--fg);
  .dropdown-item:hover, .dropdown-item:focus { 
    background-color: var(--active-bg);
+    color: var(--fg);
  }
 }

 .btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
+}
+
+a {
+  color: var(--link-color);
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+.badge-primary {
+  color: var(--fg);
+  background-color: var(--primary);
+}
+
+.badge-info {
+  background-color: var(--info);
+}
+
+.btn-primary { 
+  color: var(--fg);
+  background-color: var(--primary);
+  border-color: var(--primary);
 }
--- a/frontend/src/theme-bukele.scss
+++ b/frontend/src/theme-bukele.scss
@ -0,0 +1,139 @@
+/* Theme */
+$bg: #11131f;
+$active-bg: #000000;
+$hover-bg: #12131e;
+$fg: #d2d2d2;
+$nav-bg: #111e60;
+$title-fg: #2055e3;
+
+$taproot: #eba814;
+$taproot-light: #d5a90a;
+$taproot-dark: #9d7c05;
+
+/* Bootstrap */
+$body-bg: $bg;
+$body-color: $fg;
+$gray-800: $bg;
+$gray-700: $fg;
+
+$nav-tabs-link-active-bg: $active-bg;
+
+$primary: #007cfa;
+$secondary: #272f4e;
+$tertiary: #ff9900;
+$success: #0aab2f;
+$info: #00ddff;
+
+$h5-font-size: 1.15rem !default;
+
+$pagination-bg: $body-bg;
+$pagination-border-color: $gray-800;
+$pagination-disabled-bg:           $fg;
+$pagination-disabled-border-color: $bg;
+$pagination-active-color:          $fg;
+$pagination-active-bg:             $tertiary;
+$pagination-hover-bg:              $hover-bg;
+$pagination-hover-border-color:     $bg;
+$pagination-disabled-bg:          $bg;
+
+$custom-select-indicator-color: $fg;
+
+.input-group-text {
+  background-color: #1c2031 !important;
+  border: 1px solid #20263e !important;
+}
+
+$link-color:                $info;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%) !default;
+$link-hover-decoration:     underline !default;
+
+$dropdown-bg: $bg;
+$dropdown-link-color: $fg;
+
+$dropdown-link-hover-color: $fg;
+$dropdown-link-hover-bg: $active-bg;
+
+$dropdown-link-active-color: $fg;
+$dropdown-link-active-bg: $active-bg;
+
+:root {
+  --bg: #{$bg};
+  --active-bg: #{$active-bg};
+  --hover-bg: #{$hover-bg};
+  --fg: #{$fg};
+  --nav-bg: #{$nav-bg};
+  --title-fg: #{$title-fg};
+
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --tertiary: #{$tertiary};
+  --success: #{$success};
+  --info: #{$info};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
+  --icon: #d2d2d2;
+  --skeleton-bg: #2e324e;
+  --skeleton-bg-light: #5d6182;
+
+  --box-bg: #171c2a;
+  --stat-box-bg: #0b1018;
+  --alert-bg: #3a1c61;
+  --transparent-fg: #ffffffbb;
+  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
+  --fade-out-box-bg-end: rgba(23, 28, 42, 1);
+  --opacity: 0.9;
+
+  --testnet: #1d486f;
+  --signet: #6f1d5d;
+  --liquid: #116761;
+  --liquidtestnet: #494a4a;
+
+  --mainnet-alt: #9339f4;
+  --testnet-alt: #183550;
+  --signet-alt: #471850;
+  --liquidtestnet-alt: #272e46;
+
+  --taproot: #eba814;
+  --taproot-light: #d5a90a;
+  --taproot-dark: #9d7c05;
+
+  --green: #83fd00;
+  --red: #ff3d00;
+  --yellow: #fff000;
+  --grey: #7e7e7e;
+  --tooltip-grey: #b1b1b1;
+  --orange: #ff9f00;
+
+  --search-button: #d5a90a;
+  --search-button-border: #d5a90a;
+  --search-button-focus: #eba814;
+  --search-button-shadow: #eba814;
+}
+
+.navbar {
+  --secondary: #041437;
+}
+
+.nav-item.active, .btn-purple {
+  --icon: white;
+}
+
+.btn-purple:not(:disabled):not(.disabled):active, .btn-purple:not(:disabled):not(.disabled).active, .show > .btn-purple.dropdown-toggle {
+  color: #fff;
+  background-color: var(--search-button);
+  border-color: var(--search-button-border);
+}
+
+.btn-purple:focus, .btn-purple.focus {
+  color: #fff;
+  background-color: var(--search-button-focus);
+  border-color: var(--search-button);
+  box-shadow: 0 0 0 0.2rem var(--search-button-shadow);
+}
+
+.btn-purple:hover {
+  color: #fff;
+  background-color: var(--search-button-focus);
+  border-color: var(--search-button);
+}
--- a/frontend/src/theme-contrast.scss
+++ b/frontend/src/theme-contrast.scss
@ -3,6 +3,7 @@ $bg: #11131f;
 $active-bg: #000000;
 $hover-bg: #12131e;
 $fg: #fff;
+$nav-bg: $bg;
 $title-fg: #2055e3;

 $taproot: #eba814;
@ -21,7 +22,7 @@ $primary: #007cfa;
 $secondary: #272f4e;
 $tertiary: #6225b2;
 $success: #0aab2f;
-$info: #10e0ff;
+$info: #00ddff;

 $h5-font-size: 1.15rem !default;

@ -61,7 +62,7 @@ $dropdown-link-active-bg: $active-bg;
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
-  --color-fg: #fff;
+  --nav-bg: #{$nav-bg};
  --title-fg: #{$title-fg};

  --primary: #{$primary};
@ -69,15 +70,19 @@ $dropdown-link-active-bg: $active-bg;
  --tertiary: #{$tertiary};
  --success: #{$success};
  --info: #{$info};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
  --icon: #f1f1f1;
+  --skeleton-bg: #2e324e;
+  --skeleton-bg-light: #5d6182;

  --box-bg: #171c2a;
  --stat-box-bg: #0b1018;
  --alert-bg: #3a1c61;
-  --navbar-bg: #212121;
  --transparent-fg: #ffffffbb;
  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
  --fade-out-box-bg-end: rgba(23, 28, 42, 1);
+  --opacity: 0.9;

  --testnet: #1d486f;
  --signet: #6f1d5d;
@ -95,8 +100,13 @@ $dropdown-link-active-bg: $active-bg;

  --green: #83fd00;
  --red: #ff3d00;
-  --yellow: #ffcc00;
+  --yellow: #fff000;
  --grey: #7e7e7e;
  --tooltip-grey: #b1b1b1;
  --orange: #ff9f00;
+
+  --search-button: #4d2d77;
+  --search-button-border: #472a6e;
+  --search-button-focus: #533180;
+  --search-button-shadow: #7c58ab80;
 }
--- a/frontend/src/theme-wiz.scss
+++ b/frontend/src/theme-wiz.scss
@ -3,6 +3,7 @@ $bg: #11131f;
 $active-bg: #000000;
 $hover-bg: #12131e;
 $fg: #fff;
+$nav-bg: $bg;
 $title-fg: #2055e3;

 $taproot: #eba814;
@ -21,7 +22,7 @@ $primary: #007cfa;
 $secondary: #272f4e;
 $tertiary: #6225b2;
 $success: #0aab2f;
-$info: #10e0ff;
+$info: #00ddff;

 $h5-font-size: 1.15rem !default;

@ -61,7 +62,7 @@ $dropdown-link-active-bg: $active-bg;
  --active-bg: #{$active-bg};
  --hover-bg: #{$hover-bg};
  --fg: #{$fg};
-  --color-fg: #fff;
+  --nav-bg: #{$nav-bg};
  --title-fg: #{$title-fg};

  --primary: #{$primary};
@ -69,15 +70,19 @@ $dropdown-link-active-bg: $active-bg;
  --tertiary: #{$tertiary};
  --success: #{$success};
  --info: #{$info};
+  --link-color: #{$link-color};
+  --link-hover-color: #{$link-hover-color};
  --icon: #f1f1f1;
+  --skeleton-bg: #2e324e;
+  --skeleton-bg-light: #5d6182;

  --box-bg: #171c2a;
  --stat-box-bg: #0b1018;
  --alert-bg: #3a1c61;
-  --navbar-bg: #212121;
  --transparent-fg: #ffffffbb;
  --fade-out-box-bg-start: rgba(23, 28, 42, 0);
  --fade-out-box-bg-end: rgba(23, 28, 42, 1);
+  --opacity: 0.57;

  --testnet: #1d486f;
  --signet: #6f1d5d;
@ -95,8 +100,13 @@ $dropdown-link-active-bg: $active-bg;

  --green: #83fd00;
  --red: #ff3d00;
-  --yellow: #ffcc00;
+  --yellow: #fff000;
  --grey: #7e7e7e;
  --tooltip-grey: #b1b1b1;
  --orange: #ff9f00;
+
+  --search-button: #4d2d77;
+  --search-button-border: #472a6e;
+  --search-button-focus: #533180;
+  --search-button-shadow: #7c58ab80;
 }