|
|
| Строка 1: |
Строка 1: |
| .recipe-card {
| |
| width: 100%;
| |
| max-width: 340px;
| |
| margin: 1em auto;
| |
| padding: 1rem;
| |
| box-sizing: border-box;
| |
| background-color: #2a2a2a;
| |
| border: 2px solid #4fc3f7;
| |
| border-radius: 8px;
| |
| color: #f5f5f5;
| |
| font-size: 15px;
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
|
| .recipe-card:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| .collapsible-block {
| |
| margin-bottom: 1.2rem;
| |
| }
| |
|
| |
| .collapsible-header {
| |
| background-color: #37474f;
| |
| color: #81d4fa;
| |
| font-weight: 600;
| |
| text-transform: uppercase;
| |
| border-radius: 6px;
| |
| padding: 0.8rem 1.2rem;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 12px;
| |
| transition: background 0.3s ease;
| |
| }
| |
|
| |
| .collapsible-header:hover {
| |
| background-color: #455a64;
| |
| color: #b3e5fc;
| |
| }
| |
|
| |
| .sprite {
| |
| width: 28px;
| |
| height: 28px;
| |
| background-image: url('Beaker.png');
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| transition: transform 0.2s ease;
| |
| }
| |
|
| |
| .collapsible-header:hover .sprite {
| |
| transform: scale(1.1);
| |
| }
| |
|
| |
| .collapsible-content {
| |
| overflow: hidden;
| |
| max-height: 0;
| |
| opacity: 0;
| |
| margin-top: 0;
| |
| transition: max-height 0.35s ease-out, opacity 0.3s ease-out;
| |
| border-left: 3px solid #4fc3f7;
| |
| padding-left: 1.8rem;
| |
| }
| |
|
| |
| .collapsible-content.active {
| |
| max-height: 500px;
| |
| opacity: 1;
| |
| margin-top: 1rem;
| |
| }
| |
|
| |
| .recipe-list, .effect-list {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| display: grid;
| |
| gap: 8px;
| |
| }
| |
|
| |
| .recipe-list li, .effect-list li {
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 6px;
| |
| padding: 6px 0;
| |
| border-bottom: 1px solid #37474f;
| |
| position: relative;
| |
| padding-left: 24px;
| |
| }
| |
|
| |
| .effect-list li::before {
| |
| content: '•';
| |
| position: absolute;
| |
| left: 0;
| |
| color: #4fc3f7;
| |
| font-size: 1.4em;
| |
| line-height: 0.8;
| |
| }
| |
|
| |
| .chem-icon {
| |
| width: 20px;
| |
| height: 20px;
| |
| object-fit: contain;
| |
| filter: drop-shadow(0 0 2px #4fc3f7);
| |
| }
| |
|
| |
| .instruction {
| |
| color: #81d4fa;
| |
| font-weight: 600;
| |
| font-size: 15px;
| |
| background: rgba(129, 212, 250, 0.1);
| |
| border-radius: 4px;
| |
| padding: 8px 12px;
| |
| }
| |
|
| |
| .instruction::before {
| |
| content: '➤';
| |
| margin-right: 8px;
| |
| color: #4fc3f7;
| |
| }
| |
|
| |
| .recipe-description {
| |
| margin-top: 1.2rem;
| |
| padding: 1rem;
| |
| background: rgba(255, 255, 255, 0.05);
| |
| border-radius: 6px;
| |
| font-size: 14px;
| |
| line-height: 1.5;
| |
| color: #cfd8dc;
| |
| border-left: 3px solid #4fc3f7;
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .recipe-card {
| |
| font-size: 14px;
| |
| padding: 0.8rem;
| |
| }
| |
| .collapsible-header {
| |
| padding: 0.6rem 1rem;
| |
| }
| |
| .instruction {
| |
| font-size: 14px;
| |
| }
| |
| }
| |
