Lera Kharatyan

Телеграмма

@import url(‘https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap’);

body {
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #8B7355 0%, #A0826D 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.telegram-container {
width: 600px;
max-width: 95%;
background: #F4E4C1;
background-image:
repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139, 69, 19, 0.03) 2px, rgba(139, 69, 19, 0.03) 4px),
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139, 69, 19, 0.03) 2px, rgba(139, 69, 19, 0.03) 4px);
padding: 40px;
box-shadow:
0 20px 60px rgba(0,0,0,0.3),
inset 0 0 120px rgba(139, 69, 19, 0.1);
position: relative;
transform: rotate(-1deg);
}

.telegram-container::before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(160, 82, 45, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(139, 69, 19, 0.05) 0%, transparent 70%);
pointer-events: none;
}

.header {
text-align: center;
border-bottom: 3px double #8B4513;
padding-bottom: 20px;
margin-bottom: 30px;
position: relative;
}

.company-name {
font-family: ‘Courier Prime’, monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
color: #5D4037;
margin-bottom: 10px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.sub-header {
font-family: ‘Courier Prime’, monospace;
font-size: 11px;
color: #6D4C41;
letter-spacing: 2px;
margin-top: 5px;
}

.stamp {
position: absolute;
top: 10px;
right: 20px;
width: 80px;
height: 80px;
border: 3px solid #8B4513;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(15deg);
opacity: 0.7;
background: rgba(255,255,255,0.3);
}

.stamp-text {
font-family: ‘Courier Prime’, monospace;
font-size: 10px;
font-weight: 700;
color: #8B4513;
text-align: center;
transform: rotate(-15deg);
}

.meta-info {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
font-family: ‘Courier Prime’, monospace;
font-size: 11px;
color: #6D4C41;
}

.message-body {
font-family: ‘Courier Prime’, monospace;
font-size: 13px;
line-height: 2;
color: #3E2723;
letter-spacing: 1px;
padding: 20px;
background: linear-gradient(180deg, transparent 0%, rgba(139, 69, 19, 0.02) 100%);
border: 1px dashed #A0826D;
margin: 20px 0;
text-transform: uppercase;
word-spacing: 5px;
text-align: center;
}

.footer {
text-align: right;
margin-top: 30px;
font-family: ‘Courier Prime’, monospace;
font-size: 12px;
color: #5D4037;
border-top: 1px solid #A0826D;
padding-top: 20px;
}

.postmark {
position: absolute;
bottom: 30px;
left: 30px;
width: 100px;
height: 100px;
border: 2px solid rgba(139, 69, 19, 0.3);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: rotate(-20deg);
opacity: 0.5;
}

.postmark-date {
font-family: ‘Courier Prime’, monospace;
font-size: 10px;
color: #8B4513;
font-weight: 700;
}

.holes {
position: absolute;
top: 15px;
left: 0;
right: 0;
height: 20px;
display: flex;
justify-content: space-evenly;
padding: 0 50px;
}

.hole {
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #8B7355 0%, #A0826D 100%);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
to { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

.telegram-container {
animation: fadeIn 1s ease-out;
}

.button-container {
text-align: center;
margin-top: 40px;
}

.details-button {
display: inline-block;
padding: 12px 30px;
background: #5D4037;
color: #F4E4C1;
text-decoration: none;
font-family: ‘Courier Prime’, monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
border: 2px solid #3E2723;
box-shadow:
0 4px 10px rgba(0,0,0,0.3),
inset 0 -2px 0 rgba(0,0,0,0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.details-button::before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(244, 228, 193, 0.2), transparent);
transition: left 0.6s ease;
}

.details-button:hover {
background: #6D4C41;
transform: translateY(-2px);
box-shadow:
0 6px 15px rgba(0,0,0,0.4),
inset 0 -2px 0 rgba(0,0,0,0.3);
}

.details-button:hover::before {
left: 100%;
}

.details-button:active {
transform: translateY(0);
box-shadow:
0 2px 5px rgba(0,0,0,0.3),
inset 0 -1px 0 rgba(0,0,0,0.2);
}