/* For developers page styles */
.model-title {
margin: 0 0 1.4rem;
}
.dev-grid-section {
position: relative;
min-height: 92vh;
background-image: url("../img/for-devs-2.jpeg");
background-size: cover;
background-position: center;
color: #f4efe7;
text-align: left;
padding: clamp(110px, 16vh, 240px) clamp(20px, 6vw, 100px);
}
.dev-grid-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
}
.dev-grid-inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.dev-grid {
margin: 3.2rem 0 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dev-grid-item {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
padding: clamp(22px, 3.2vw, 34px) clamp(90px, 10vw, 140px);
font-size: clamp(0.9rem, 1.5vw, 1.1rem);
line-height: 1.45;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #f4efe7;
opacity: 1;
transform: none;
transition: opacity 1100ms ease, transform 1200ms cubic-bezier(0.16, 0.84, 0.44, 1);
will-change: transform, opacity;
}
.dev-grid-item {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.985);
}
.dev-grid-number {
margin: 0 0 0.9rem;
opacity: 0.35;
}
.dev-grid-text {
max-width: 18ch;
}
.dev-grid-item + .dev-grid-item {
border-left: 2px solid rgba(244, 239, 231, 0.75);
}
.dev-grid-item {
padding-left: clamp(18px, 3.4vw, 36px);
padding-right: clamp(18px, 3.4vw, 36px);
}
.dev-grid-item.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
@media (max-width: 900px) {
.dev-grid {
grid-template-columns: 1fr;
margin-top: 2.2rem;
}
.dev-grid-item {
opacity: 0;
transform: translateY(14px) scale(0.98);
transition: opacity 700ms ease, transform 700ms ease;
}
.dev-grid-text {
max-width: 26ch;
}
.dev-grid-item + .dev-grid-item {
border-left: none;
border-top: 2px solid rgba(244, 239, 231, 0.75);
margin-top: 1.2rem;
padding-top: 1.2rem;
}
.dev-grid-section {
min-height: 70vh;
padding: clamp(70px, 10vh, 140px) clamp(20px, 6vw, 60px);
}
}
@media (max-width: 640px) {
.dev-grid-item {
min-height: 170px;
padding: clamp(12px, 2.4vw, 20px);
}
.developers-hero .contact-hero__eyebrow {
font-size: 0.78rem;
letter-spacing: 0.12em;
line-height: 1.4;
margin-bottom: 0.6rem;
}
.developers-preview-subtitle {
font-size: 0.78rem;
letter-spacing: 0.12em;
line-height: 1.4;
}
}
@media (prefers-reduced-motion: reduce) {
.dev-grid-item {
opacity: 1;
transform: none;
transition: none;
}
}
.developers-preview-section {
position: relative;
min-height: 100vh;
min-height: 100svh;
background-image: url("../img/dev-bg-prv.jpg");
background-size: cover;
background-position: center;
overflow: hidden;
}
.developers-preview-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.5) 14%,
rgba(0, 0, 0, 0.18) 27%,
rgba(0, 0, 0, 0) 42%
);
}
.developers-preview-content {
position: relative;
z-index: 1;
min-height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(10px, 1.8vh, 22px);
padding: clamp(20px, 4vh, 40px) clamp(16px, 3vw, 40px);
text-align: center;
}
.developers-preview-text {
position: absolute;
top: clamp(30px, 7vh, 90px);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
width: min(92vw, 900px);
}
.developers-preview-title {
margin: 0;
font-size: clamp(2.6rem, 5.2vw, 4.2rem);
font-weight: 700;
letter-spacing: 0.02em;
color: #f4efe7;
line-height: 1.15;
}
.developers-preview-subtitle {
margin: 0;
font-size: clamp(0.9rem, 1.35vw, 1.2rem);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 239, 231, 0.95);
}
.developers-preview-bld {
display: block;
position: relative;
width: clamp(110px, 10vw, 180px);
transform: translateZ(0);
cursor: pointer;
}
.developers-preview-bld img {
width: 100%;
height: auto;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
pointer-events: none;
}
.developers-preview-bld__default {
display: block;
visibility: visible;
}
.developers-preview-bld__hover {
position: absolute;
inset: 0;
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.developers-preview-bld:hover .developers-preview-bld__hover {
opacity: 1;
visibility: visible;
transition-delay: 80ms, 0s;
}
@media (max-width: 900px) {
.developers-preview-section {
min-height: 72vh;
min-height: 72svh;
}
.developers-preview-title {
font-size: clamp(2.2rem, 5.2vw, 4.4rem);
}
.developers-preview-subtitle {
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
letter-spacing: 0.18em;
line-height: 1.4;
}
.developers-preview-bld {
width: clamp(85px, 20vw, 130px);
}
}