|
|
Line 68: |
Line 68: |
| } | | } |
|
| |
|
| /* Kafelki strony głównej */ | | ////////// table koniec |
| .mainpage-cards {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 30px;
| |
| margin: 32px 0;
| |
| }
| |
| .mainpage-card {
| |
| background: #fff;
| |
| border: 2px solid #eee;
| |
| border-radius: 20px;
| |
| box-shadow: 0 2px 12px rgba(0,0,0,0.08);
| |
| padding: 20px 18px 10px 18px;
| |
| width: 180px;
| |
| text-align: center;
| |
| transition: box-shadow 0.15s, border 0.15s, transform 0.12s;
| |
| cursor: pointer;
| |
| min-height: 180px;
| |
| position: relative;
| |
| }
| |
| .mainpage-card:hover {
| |
| box-shadow: 0 6px 20px rgba(0,0,0,0.14);
| |
| border: 2px solid #bdaaff;
| |
| transform: translateY(-3px) scale(1.03);
| |
| z-index: 2;
| |
| }
| |
| .mainpage-card img {
| |
| margin-bottom: 10px;
| |
| max-width: 74px;
| |
| max-height: 74px;
| |
| filter: drop-shadow(0 1px 2px #bbb);
| |
| }
| |
| .mainpage-card-title {
| |
| font-weight: bold;
| |
| font-size: 1.15em;
| |
| color: #7566c7;
| |
| margin-bottom: 4px;
| |
| }
| |
| .mainpage-card-desc {
| |
| font-size: 0.95em;
| |
| color: #444;
| |
| }
| |
| @media (max-width: 700px) {
| |
| .mainpage-cards {
| |
| flex-direction: column;
| |
| gap: 15px;
| |
| align-items: center;
| |
| }
| |
| .mainpage-card {
| |
| width: 95vw;
| |
| min-width: unset;
| |
| padding: 14px 6vw 7px 6vw;
| |
| }
| |
| }
| |
| | |
| | |
| /* Kafelkowa tabela */ | |
| .tile-table {
| |
| width: 100%;
| |
| max-width: 940px;
| |
| margin: 34px auto;
| |
| border-spacing: 18px 20px;
| |
| }
| |
| .tile-cell {
| |
| background: #fff;
| |
| border: 2px solid #eee;
| |
| border-radius: 18px;
| |
| box-shadow: 0 2px 10px rgba(0,0,0,0.09);
| |
| text-align: center;
| |
| vertical-align: top;
| |
| transition: box-shadow 0.17s, border 0.14s, transform 0.13s;
| |
| cursor: pointer;
| |
| min-width: 130px;
| |
| padding: 18px 10px 10px 10px;
| |
| }
| |
| .tile-cell:hover {
| |
| box-shadow: 0 7px 25px rgba(110,110,200,0.16);
| |
| border: 2px solid #bdaaff;
| |
| transform: translateY(-4px) scale(1.025);
| |
| z-index: 2;
| |
| }
| |
| .tile-table img {
| |
| margin-bottom: 8px;
| |
| max-width: 70px;
| |
| max-height: 72px;
| |
| filter: drop-shadow(0 1px 2px #bbb);
| |
| }
| |
| .tile-title {
| |
| font-weight: bold;
| |
| color: #7566c7;
| |
| font-size: 1.13em;
| |
| margin: 0.35em 0 0.15em 0;
| |
| }
| |
| .tile-desc {
| |
| font-size: 0.93em;
| |
| color: #444;
| |
| }
| |
| @media (max-width: 650px) {
| |
| .tile-table, .tile-table tr, .tile-cell { display: block !important; width: 99vw !important; }
| |
| .tile-cell { margin-bottom: 14px; }
| |
| }
| |
| | |
| .responsive-cards {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| justify-content: center;
| |
| gap: 24px;
| |
| margin: 36px auto;
| |
| max-width: 930px;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
| .responsive-card {
| |
| background: #fff;
| |
| border: 2px solid #eee;
| |
| border-radius: 18px;
| |
| box-shadow: 0 2px 10px rgba(0,0,0,0.09);
| |
| text-align: center;
| |
| transition: box-shadow 0.17s, border 0.14s, transform 0.13s;
| |
| cursor: pointer;
| |
| min-width: 140px;
| |
| max-width: 200px;
| |
| flex: 1 1 180px;
| |
| padding: 18px 10px 10px 10px;
| |
| margin: 0;
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| }
| |
| .responsive-card:hover {
| |
| box-shadow: 0 7px 25px rgba(110,110,200,0.16);
| |
| border: 2px solid #bdaaff;
| |
| transform: translateY(-4px) scale(1.025);
| |
| z-index: 2;
| |
| }
| |
| .responsive-card img {
| |
| margin-bottom: 8px;
| |
| max-width: 74px;
| |
| max-height: 74px;
| |
| filter: drop-shadow(0 1px 2px #bbb);
| |
| }
| |
| .responsive-card-title {
| |
| font-weight: bold;
| |
| color: #7566c7;
| |
| font-size: 1.13em;
| |
| margin: 0.35em 0 0.15em 0;
| |
| }
| |
| .responsive-card-desc {
| |
| font-size: 0.93em;
| |
| color: #444;
| |
| }
| |
| | |
| @media (max-width: 800px) {
| |
| .responsive-cards {
| |
| gap: 14px;
| |
| max-width: 460px;
| |
| }
| |
| .responsive-card {
| |
| flex: 1 1 46vw;
| |
| max-width: 48vw;
| |
| min-width: 140px;
| |
| padding: 12px 2vw 8px 2vw;
| |
| }
| |
| }
| |
| @media (max-width: 480px) {
| |
| .responsive-cards {
| |
| gap: 10px;
| |
| max-width: 99vw;
| |
| padding: 0;
| |
| }
| |
| .responsive-card {
| |
| flex: 1 1 95vw;
| |
| max-width: 97vw;
| |
| min-width: unset;
| |
| padding: 12px 2vw 8px 2vw;
| |
| }
| |
| }
| |