site

custom.css (4178B)

---

 .custom-icon {
   height: 2em;      /* Match Font Awesome's fa-2x */
   width: 2em;      /* Match Font Awesome's fa-2x */
   vertical-align: text-bottom; /* Align nicely with inline icons */
   color: inherit;
   fill: currentColor;
 }
 
 .contact-page {
   margin: 0 auto;
   max-width: 400px;
 }
 
 .contact-form {
   display: flex;
   flex-direction: column;
   font-size: 2rem;
   gap: 1.5rem;
   width: 100%;
   max-width: 400px;
   margin: 0 auto;
 }
 
 .contact-form label {
   font-weight: bold;
 }
 
 .contact-form input,
 .contact-form textarea,
 .contact-form button {
   padding: 0.5rem;
   border: 1px solid #ccc;
   border-radius: 4px;
 }
 
 .contact-form textarea {
   min-height: 7.5em;
   resize: vertical;
 }
 
 .contact-form button {
   background-color: #007bff;
   color: white;
   border: none;
   cursor: pointer;
 }
 
 .contact-form button:hover {
   background-color: #0056b3;
 }
 
 .btc-card {
   max-width: 400px;
   margin: 2rem auto;
   padding: 1.5rem;
   border-radius: 16px;
   background: #f9fafb;
   border: 1px solid #e0e0e0;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
   transition: box-shadow 0.3s ease, transform 0.3s ease;
   font-family: system-ui, sans-serif;
   text-align: center;
   color: #111;
 }
 
 .btc-card:hover {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   transform: translateY(-4px);
 }
 
 .btc-header {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
 .btc-icon {
   color: #f7931a; /* Bitcoin orange */
 }
 
 .btc-card h2 {
   margin: 0;
   font-size: 1.25rem;
   color: #333;
 }
 
 .btc-qr img {
   width: 200px;
   height: 200px;
   margin: 1rem auto;
   border-radius: 8px;
   border: 1px solid #ccc;
   background: white;
 }
 
 .btc-address {
   margin: 0;
   font-family: monospace;
   padding: 0.75rem;
   border-radius: 4px;
   word-break: break-all;
   font-size: 0.95rem;
   background: #eef2f7;
   color: #1a1a1a;
   border: 1px solid #d0d7de;
 }
 
 .btc-card p.btc-note {
   color: #666;
   text-align: inherit;
 }
 
 .btc-address-row {
   margin: 0;
   display: flex;
   align-items: stretch;
   justify-content: center;
   gap: 0.5rem;
   flex-wrap: wrap;
   flex-direction: horizontal;
 }
 
 .btc-copy-icon {
   all: unset;
   border-radius: 4px;
   width: 4rem;
   cursor: pointer;
   transition:
     background-color 0.2s ease,
     color 0.2s ease,
     transform 0.05s ease,
     box-shadow 0.3s ease;
   color: #555;
   border: 1px solid #d0d7de;
 }
 
 .btc-copy-icon:hover {
   background-color: #f0f0f0;
   color: #000;
 }
 
 .btc-copy-icon:active {
   transform: scale(0.95); /* Pressed-in effect */
 }
 
 .btc-copy-icon.glow {
   box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.4),
               0 0 10px rgba(247, 147, 26, 0.7);
   background-color: #fff5e6; /* light bitcoin orange background */
   color: #f7931a;
 }
 
 .colorscheme-dark .btc-card {
   background: #1e1e1e;
   border: 1px solid #333;
   color: #eee;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
 }
 
 .colorscheme-dark .btc-card:hover {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
 }
 
 .colorscheme-dark .btc-card h2 {
   color: #f5f5f5;
 }
 
 .colorscheme-dark .btc-qr {
   border: 1px solid #444;
   background: #2a2a2a;
 }
 
 .colorscheme-dark .btc-address {
   background: #2a2a2a;
   color: #f5f5f5;
   border: 1px solid #444;
 }
 
 .colorscheme-dark .btc-card p.btc-note {
   color: #aaa;
 }
 
 .colorscheme-dark .btc-copy-icon {
   background: #2a2a2a;
   color: #f5f5f5;
   border: 1px solid #444;
 }
 
 .colorscheme-dark .btc-copy-icon:hover {
   background-color: #333;
   color: #fff;
 }
 
 .tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
 }
 
 .tooltip .tooltiptext {
   visibility: hidden;
   opacity: 0;
   position: absolute;
   z-index: 1000;
   bottom: 125%;
   left: 50%;
   transform: translateX(-50%);
   background-color: #333;
   color: #fff;
   padding: 6px 10px;
   border-radius: 4px;
   text-align: center;
   white-space: normal;
   width: max-content;
   max-width: 90vw;
   box-shadow: 0 2px 8px rgba(0,0,0,0.3);
   transition: opacity 0.2s ease-in-out;
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
 }
 
 .invert-me {
 }
 
 .colorscheme-dark .invert-me {
   fill: white;
 }
 
 .colorscheme-light .invert-me {
   fill: black;
 }