* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
background-color: #fff1e5;
color: #333;
line-height: 1.6;
padding: 40px 20px;
}
.wrapper {
max-width: 900px;
margin: 0 auto;
}
header {
position: relative;
margin-bottom: 60px;
padding-bottom: 30px;
}
header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, transparent, #ddd 20%, #ddd 80%, transparent);
}
h1 {
font-size: 48px;
font-weight: normal;
margin: 0;
color: #000;
letter-spacing: 0.05em;
}
.quote {
margin: 10px 0 0 0;
font-size: 16px;
color: #999;
font-style: italic;
}
.mail-link {
position: absolute;
top: 0;
right: 0;
color: #999;
transition: color 0.2s ease;
text-decoration: none;
}
.mail-link:hover {
color: #8b4513;
}
.mail-icon {
width: 24px;
height: 24px;
}
.sections {
display: grid;
grid-template-columns: auto 20px 60px 150px auto 20px 60px;
gap: 0;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
gap: 50px;
}
.text-column {
/* Колонки с текстом */
}
.icon-column {
/* Колонки с иконками */
}
.spacer {
/* Центральный разделитель */
}
.section {
position: relative;
padding: 20px 0;
height: 60px;
display: flex;
align-items: center;
}
.link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #000;
font-size: 18px;
transition: all 0.2s ease;
}
.link:hover {
color: #8b4513;
}
.link .icon {
margin-right: 8px;
transition: transform 0.2s ease;
}
.link:hover .icon {
transform: translateX(3px);
}
.link.disabled {
color: #999;
cursor: default;
}
.bg-icon {
width: 50px;
height: 50px;
opacity: 0.12;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
transition: opacity 0.3s ease;
margin: 5px 0;
}
.text-column:hover + .icon-column .bg-icon,
.section:hover ~ .bg-icon {
opacity: 0.18;
}
.section.inactive ~ .bg-icon {
opacity: 0.05;
}
/* Самолет для путешествий */
.travel-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Книжная полка */
.book-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Кинолента */
.cinema-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Телевизор */
.serial-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Мозг для размышлений */
.think-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Радио/патефон для слушаю */
.listen-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Шестеренка для работы */
.work-icon {
background-image: url('data:image/svg+xml;utf8,');
}
/* Сердце для люблю */
.love-icon {
background-image: url('data:image/svg+xml;utf8,');
}
@media (max-width: 700px) {
body {
padding: 30px 20px;
}
h1 {
font-size: 36px;
margin-bottom: 40px;
}
.sections {
grid-template-columns: auto 40px;
gap: 0;
}
.spacer {
display: none;
}
.column {
gap: 30px;
}
.section {
padding: 15px 0;
height: 50px;
}
.link {
font-size: 16px;
}
.bg-icon {
width: 40px;
height: 40px;
}
}