/** * bn-brickmap.css — port din legacy data/harta-noua.php (varianta live). * Culori/tooltip din legacy: #ab1642 tooltip, #540c21 buton, zonele colorate * după status. Fără reset global (`* {margin:0}` din legacy NU se portă — * ar strica tema). */ .bn-harta.image-scroll { padding-bottom: 60px; width: 100%; height: auto; overflow: auto; } .bn-harta .image-wrapper { position: relative; display: inline-block; width: 100%; min-width: 1000px; } .bn-harta #myImage { display: block; width: 100%; height: auto; } .bn-harta .grid-overlay { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(50, 1fr); grid-template-columns: repeat(80, 1fr); pointer-events: auto; z-index: 2; } .bn-harta .faza3, .bn-harta .faza2, .bn-harta .faza1, .bn-harta .faza0 { display: grid; grid-template-columns: repeat(50, minmax(0, 1fr)); grid-auto-rows: 1fr; } .bn-harta .faza3, .bn-harta .faza2, .bn-harta .faza1 { border-bottom: 2px solid yellow; } .bn-harta .cell { width: 100%; height: 100%; } .bn-harta .area-selection-brick { background-color: rgba(205, 92, 8, 0.65); border: 1px solid #333; } .bn-harta .area-reserved { background-color: rgba(205, 92, 8, 0.55); border: 1px solid rgba(120, 60, 0, 0.7); } .bn-harta .area-gray { background-color: rgba(140, 140, 140, 0.55); border: 1px solid rgba(80, 80, 80, 0.7); } .bn-harta .area-green { background-color: rgba(86, 210, 118, 0.55); border: 1px solid rgba(40, 160, 90, 0.7); } .bn-harta .area-red { background-color: rgba(255, 100, 100, 0.55); border: 1px solid rgba(120, 0, 0, 0.7); } .bn-harta .area-red, .bn-harta .area-green, .bn-harta .area-reserved { cursor: pointer; } /* Tooltipul e creat de JS și atașat la — de aceea nu e sub .bn-harta. */ .bn-tooltipx { position: absolute; display: none; z-index: 9999; } .bn-tooltipx .bn-tooltipxtext { display: block; width: 10em; font-size: 1.25em; background-color: #ab1642; border: 1px solid; color: #fff; text-align: center; border-radius: 6px; padding: 10px; } .bn-tooltipx #bn-tooltip-text { display: block; margin-bottom: 10px; width: 100%; white-space: normal; } .bn-tooltipx .buton_caramida { font-size: 1em; border: 1px solid; color: white; width: 100%; background-color: #540c21; padding: 8px; margin: 5px 0 0; display: block; cursor: pointer; } .bn-tooltipx .buton_caramida:hover { color: #540c21; background-color: #fff; } .bn-tooltipx img.brick-popup { display: block; width: 100px; height: auto; border-radius: 4px; margin: 0 auto 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } @media (max-width: 800px) { .bn-tooltipx img.brick-popup { width: 50px; } .bn-tooltipx .bn-tooltipxtext { font-size: 1em; width: 8em; } } /* Secțiunea promo de sub hartă (din harta-noua.php). */ .bn-harta-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1200px; margin: 2rem auto; } .bn-harta-promo .bn-promo img { width: 100%; display: block; } .bn-harta-promo .bn-promo-btns { text-align: center; margin-top: 0.75rem; display: flex; justify-content: center; gap: 0.75rem; } .bn-harta-promo .bn-promo-btn { background: #7f1131; color: #fff; padding: 0.6rem 1.6rem; border-radius: 4px; text-decoration: none; font-weight: 500; } .bn-harta-promo .bn-promo-btn:hover { background: #ab1642; color: #fff; } @media (max-width: 800px) { .bn-harta-promo { grid-template-columns: 1fr; } } /* Lista donatorilor (port din data/donatori.php: header #7f1131). */ .bn-donatori { width: 100%; border-collapse: collapse; } .bn-donatori th { border: 1px solid; background-color: #7f1131; color: #fff; font-weight: bold; padding: 6px; text-align: left; } .bn-donatori td { border: 1px solid; padding: 6px; } .bn-donatori tbody tr:nth-child(even) td { background-color: #eee; } .bn-donatori .bn-donatori-nr { text-align: center; max-width: 30px; }