/* iQcomputers — Contacts Block (drop-in, no global resets) */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@500;700;800&family=Commissioner:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap");
.iqc-contacts{
/* brand palette core */
--bg: #F6F6F6;
--surface: #FFFFFF;
--ink: #111111; /* deep black/charcoal */
--ink2: #2B2B2B; /* matte/dark gray */
--accent: #FFC107; /* vibrant yellow/amber */
--accent2: #FFD700; /* sharp accent */
--radius: 22px;
position: relative;
padding: clamp(28px, 4vw, 56px);
color: var(--ink);
background:
radial-gradient(1100px 520px at 10% -10%, rgba(255,193,7,.55) 0%, rgba(255,193,7,0) 60%),
radial-gradient(900px 520px at 110% 15%, rgba(17,17,17,.12) 0%, rgba(17,17,17,0) 55%),
linear-gradient(180deg, #FFFFFF 0%, var(--bg) 100%);
overflow: hidden;
}
.iqc-contacts::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
z-index:0;
opacity:.55;
background:
repeating-linear-gradient(90deg, rgba(17,17,17,.06) 0 1px, transparent 1px 30px),
repeating-linear-gradient(0deg, rgba(17,17,17,.06) 0 1px, transparent 1px 30px),
repeating-linear-gradient(135deg, rgba(255,193,7,.16) 0 2px, transparent 2px 22px);
-webkit-mask: radial-gradient(900px 600px at 16% 18%, #000 0%, transparent 70%);
mask: radial-gradient(900px 600px at 16% 18%, #000 0%, transparent 70%);
}
.iqc-contacts::after{
content:"";
position:absolute;
right:-220px;
bottom:-260px;
width: 520px;
height: 520px;
z-index:0;
pointer-events:none;
border-radius: 120px;
opacity:.55;
background:
conic-gradient(from 210deg,
rgba(255,193,7,.28),
rgba(17,17,17,.08),
rgba(255,193,7,.22),
rgba(17,17,17,.06),
rgba(255,193,7,.28)
);
transform: rotate(10deg);
}
.iqc-contacts__container{
position: relative;
z-index: 1;
max-width: 1120px;
margin: 0 auto;
}
.iqc-contacts__header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 16px 18px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.iqc-contacts__badge{
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
font-size: 12px;
color: var(--accent);
background: var(--ink);
padding: 10px 14px;
border-radius: 999px;
box-shadow: 0 0 0 2px var(--ink);
position: relative;
}
.iqc-contacts__badge::after{
content:"";
position:absolute;
right: 10px;
top: 50%;
width: 8px;
height: 8px;
background: var(--accent2);
border-radius: 99px;
transform: translateY(-50%);
box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.iqc-contacts__headText{
max-width: 720px;
}
.iqc-contacts__title{
font-family: "Unbounded", system-ui, sans-serif;
font-weight: 800;
letter-spacing: -0.02em;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.02;
margin: 0;
display: inline-block;
position: relative;
}
.iqc-contacts__title::after{
content:"";
position:absolute;
left: -0.14em;
right: -0.14em;
bottom: 0.06em;
height: 0.46em;
z-index: -1;
transform: skewX(-12deg);
background: linear-gradient(90deg,
rgba(255,193,7,0),
rgba(255,193,7,.9),
rgba(255,193,7,0)
);
opacity: 0;
animation: iqc-highlight .8s .24s ease forwards;
}
.iqc-contacts__lead{
font-family: "Commissioner", system-ui, sans-serif;
margin: 10px 0 0;
font-size: 15.5px;
line-height: 1.45;
color: rgba(17,17,17,.78);
}
.iqc-contacts__layout{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
}
@media (max-width: 900px){
.iqc-contacts__layout{ grid-template-columns: 1fr; }
}
.iqc-contacts__panel{
position: relative;
background: var(--surface);
border: 2px solid var(--ink);
border-radius: var(--radius);
padding: 18px;
overflow: hidden;
/* “printed hardware label” vibe */
box-shadow:
10px 10px 0 rgba(17,17,17,.92),
0 26px 70px rgba(17,17,17,.14);
}
.iqc-contacts__panel::before{
content:"";
position:absolute;
right: 0;
top: 0;
width: 88px;
height: 88px;
opacity: .9;
background: repeating-linear-gradient(
45deg,
var(--ink) 0 10px,
var(--accent) 10px 20px
);
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.iqc-contacts__panel::after{
content:"";
position:absolute;
inset: 0;
background:
radial-gradient(600px 140px at 12% 0%, rgba(255,193,7,.16) 0%, transparent 60%),
repeating-linear-gradient(0deg, rgba(17,17,17,.04) 0 1px, transparent 1px 12px);
opacity: .55;
pointer-events:none;
}
.iqc-contacts__panel > *{
position: relative;
z-index: 1;
}
.iqc-contacts__infoList{
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 14px;
}
.iqc-contacts__row{
display:flex;
gap: 14px;
align-items:flex-start;
opacity: 0;
transform: translateY(10px);
animation: iqc-rise .68s cubic-bezier(.2,.8,.2,1) forwards;
animation-delay: var(--delay, 0ms);
}
.iqc-contacts__glyph{
width: 46px;
height: 46px;
flex: 0 0 46px;
display:grid;
place-items:center;
border: 2px solid var(--ink);
border-radius: 16px;
color: var(--ink);
background:
linear-gradient(180deg, #fff 0%, #f4f4f4 100%);
position: relative;
overflow:hidden;
}
.iqc-contacts__glyph::after{
content:"";
position:absolute;
left: 0;
bottom: 0;
width: 100%;
height: 7px;
background: linear-gradient(90deg, var(--accent), transparent);
opacity: .8;
}
.iqc-contacts__rowBody{ min-width: 0; }
.iqc-contacts__rowLabel{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-weight: 600;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(17,17,17,.72);
}
.iqc-contacts__rowValue{
font-family: "Commissioner", system-ui, sans-serif;
font-size: 16px;
line-height: 1.35;
margin-top: 4px;
color: rgba(17,17,17,.92);
}
.iqc-contacts__rowValue strong{
font-weight: 650;
}
.iqc-contacts__miniLink{
display:inline-flex;
margin-top: 8px;
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12.5px;
text-decoration: none;
color: var(--ink);
border-bottom: 1px dashed rgba(17,17,17,.55);
padding-bottom: 2px;
}
.iqc-contacts__miniLink:hover{ border-bottom-color: var(--accent); }
.iqc-contacts__phone{
font-family: "Unbounded", system-ui, sans-serif;
font-weight: 700;
text-decoration: none;
color: var(--ink);
background:
linear-gradient(90deg, rgba(255,193,7,.0), rgba(255,193,7,.55), rgba(255,193,7,0));
padding: 2px 6px;
border-radius: 10px;
}
.iqc-contacts__phone:hover{ filter: contrast(1.05); }
.iqc-contacts__microNote{
font-family: "Commissioner", system-ui, sans-serif;
margin-top: 6px;
font-size: 13.5px;
color: rgba(17,17,17,.62);
}
/* Messengers panel */
.iqc-contacts__panelTop{
margin-bottom: 12px;
}
.iqc-contacts__panelTitle{
font-family: "Unbounded", system-ui, sans-serif;
font-weight: 800;
margin: 0;
font-size: 20px;
letter-spacing: -0.01em;
}
.iqc-contacts__panelHint{
font-family: "Commissioner", system-ui, sans-serif;
margin: 8px 0 0;
color: rgba(17,17,17,.72);
line-height: 1.35;
font-size: 14.5px;
}
.iqc-contacts__apps{
display: grid;
gap: 12px;
}
.iqc-contacts__app{
--brand: var(--ink);
display:flex;
align-items:center;
gap: 12px;
padding: 12px 14px;
border: 2px solid var(--ink);
border-radius: 18px;
text-decoration: none;
color: var(--ink);
background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
position: relative;
overflow:hidden;
opacity: 0;
transform: translateY(10px);
animation: iqc-rise .68s cubic-bezier(.2,.8,.2,1) forwards;
}
.iqc-contacts__app:nth-child(1){ animation-delay: 140ms; }
.iqc-contacts__app:nth-child(2){ animation-delay: 220ms; }
.iqc-contacts__app:nth-child(3){ animation-delay: 300ms; }
.iqc-contacts__app:nth-child(4){ animation-delay: 380ms; }
.iqc-contacts__app::before{
content:"";
position:absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--brand);
}
.iqc-contacts__app::after{
content:"";
position:absolute;
inset:-40%;
background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%);
transform: translateX(-65%) rotate(10deg);
opacity: 0;
}
.iqc-contacts__app:hover,
.iqc-contacts__app:focus-visible{
transform: translateY(-2px);
border-color: var(--accent);
box-shadow:
10px 10px 0 rgba(17,17,17,.92),
0 30px 80px rgba(17,17,17,.16);
}
.iqc-contacts__app:hover::after,
.iqc-contacts__app:focus-visible::after{
opacity: 1;
animation: iqc-shine .62s ease-out;
}
.iqc-contacts__appIcon{
width: 34px;
height: 34px;
border-radius: 14px;
flex: 0 0 34px;
box-shadow: 0 0 0 2px rgba(17,17,17,.12);
}
.iqc-contacts__appName{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-weight: 600;
letter-spacing: .02em;
}
.iqc-contacts__appArrow{
margin-left: auto;
font-family: "JetBrains Mono", ui-monospace, monospace;
opacity: .55;
}
.iqc-contacts__app--vk{ --brand: #0077FF; }
.iqc-contacts__app--tg{ --brand: #26A5E4; }
.iqc-contacts__app--wa{ --brand: #25D366; }
.iqc-contacts__app--max{ --brand: #111111; }
.iqc-contacts__footerNote{
display:flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.iqc-contacts__footerChip{
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 12px;
padding: 6px 10px;
border: 1.5px solid rgba(17,17,17,.22);
border-radius: 999px;
background: rgba(255,193,7,.16);
}
@keyframes iqc-rise{
from{ opacity:0; transform: translateY(10px); }
to{ opacity:1; transform: translateY(0); }
}
@keyframes iqc-shine{
from{ transform: translateX(-65%) rotate(10deg); }
to{ transform: translateX(55%) rotate(10deg); }
}
@keyframes iqc-highlight{
to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
.iqc-contacts__row,
.iqc-contacts__app,
.iqc-contacts__title::after{
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
