html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
:root {
--bg: #061009;
--ink: #f2efe4;
--soft: rgba(242,239,228,.72);
--muted: rgba(242,239,228,.46);
--accent: #b9df72;
--line: rgba(242,239,228,.14);
--glass: rgba(3,9,5,.44);
--x: clamp(24px,5vw,84px);
--ease:
cubic-bezier(.22,1,.36,1);
}
/* =========================================================
RESET
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-width: 320px;
color: var(--ink);
background: var(--bg);
font-family:
Arial,
Helvetica,
sans-serif;
}
body {
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
select,
textarea {
font: inherit;
}
/* =========================================================
FOREST BACKGROUND
========================================================= */
.video-world {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
background: #061009;
}
.forest-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
filter:
brightness(.42)
contrast(1.12)
saturate(.90);
}
.video-grade,
.video-vignette {
position: absolute;
inset: 0;
pointer-events: none;
}
.video-grade {
z-index: 2;
background:
linear-gradient(
90deg,
rgba(2,7,4,.63) 0%,
rgba(2,7,4,.32) 46%,
rgba(2,7,4,.46) 100%
),
linear-gradient(
180deg,
rgba(0,0,0,.30),
rgba(0,0,0,.08) 40%,
rgba(0,0,0,.34)
);
}
.video-vignette {
z-index: 3;
background:
radial-gradient(
circle at 50% 40%,
transparent 25%,
rgba(0,0,0,.20) 72%,
rgba(0,0,0,.54) 100%
);
}
/* =========================================================
NAVBAR
========================================================= */
.topbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding:
14px
var(--x);
}
.brand-logo-link {
display: flex;
align-items: center;
}
.brand-logo {
display: block;
width: auto;
height: 120px;
object-fit: contain;
}
.main-nav {
display: flex;
align-items: center;
gap:
clamp(
18px,
2.2vw,
36px
);
}
.main-nav > a {
position: relative;
padding: 8px 0;
color:
rgba(242,239,228,.74);
font-size: 10px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
transition:
color .3s ease;
}
.main-nav > a:hover,
.main-nav > a.active {
color: var(--accent);
}
.main-nav .nav-cta {
padding:
12px
16px;
border:
1px solid
rgba(242,239,228,.22);
color: var(--ink);
background:
rgba(3,9,5,.22);
backdrop-filter:
blur(10px);
-webkit-backdrop-filter:
blur(10px);
}
.main-nav .nav-cta:hover {
color: #071009;
background: var(--accent);
}
/* =========================================================
PAGE
========================================================= */
.contact-page {
position: relative;
z-index: 10;
min-height: 100vh;
padding:
130px
var(--x)
80px;
}
/* =========================================================
GIANT BACKGROUND CONTACT WORD
========================================================= */
.contact-watermark {
position: absolute;
z-index: -1;
top: 80px;
left: 50%;
transform:
translateX(-50%);
color:
rgba(242,239,228,.035);
font-size:
clamp(
130px,
19vw,
330px
);
font-weight: 900;
line-height: 1;
letter-spacing: -.08em;
pointer-events: none;
user-select: none;
}
/* =========================================================
CONTACT LAYOUT
========================================================= */
.contact-layout {
width:
min(
1380px,
100%
);
min-height:
calc(
100vh - 200px
);
margin:
0 auto;
display: grid;
grid-template-columns:
.85fr
1.15fr;
gap:
clamp(
55px,
8vw,
130px
);
align-items: center;
}
/* =========================================================
LEFT
========================================================= */
.contact-left {
padding:
30px 0;
}
.contact-pill {
display: inline-flex;
align-items: center;
gap: 9px;
padding:
9px
13px;
border:
1px solid
rgba(242,239,228,.17);
border-radius: 100px;
color: var(--soft);
background:
rgba(3,9,5,.32);
backdrop-filter:
blur(10px);
font-size: 8px;
font-weight: 900;
letter-spacing: .14em;
}
.contact-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background:
var(--accent);
}
.contact-heading h1 {
margin:
28px
0
22px;
font-size:
clamp(
58px,
7vw,
108px
);
font-weight: 900;
line-height: .79;
letter-spacing: -.07em;
text-transform: uppercase;
}
.contact-heading h1 span {
color: var(--accent);
}
.contact-heading > p {
max-width: 470px;
margin:
0
0
50px;
color: var(--soft);
font-size:
clamp(
14px,
1.15vw,
17px
);
font-weight: 600;
line-height: 1.55;
}
/* =========================================================
CONTACT INFO CARDS
========================================================= */
.contact-details {
display: grid;
gap: 10px;
max-width: 520px;
}
.contact-card {
position: relative;
min-height: 78px;
padding:
12px
55px
12px
12px;
display: grid;
grid-template-columns:
50px
1fr;
align-items: center;
gap: 14px;
border:
1px solid
rgba(242,239,228,.14);
border-radius: 10px;
background:
linear-gradient(
90deg,
rgba(8,16,11,.74),
rgba(8,16,11,.41)
);
backdrop-filter:
blur(16px);
-webkit-backdrop-filter:
blur(16px);
transition:
transform .35s var(--ease),
border-color .3s ease,
background .3s ease;
}
a.contact-card:hover {
transform:
translateX(7px);
border-color:
rgba(185,223,114,.40);
background:
rgba(10,20,13,.74);
}
.contact-card-icon {
width: 48px;
height: 48px;
display: grid;
place-items: center;
border:
1px solid
rgba(242,239,228,.14);
border-radius: 9px;
background:
rgba(255,255,255,.025);
}
.contact-card-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke:
var(--ink);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-card-copy {
display: grid;
gap: 6px;
}
.contact-card-copy span {
color: var(--muted);
font-size: 8px;
font-weight: 900;
letter-spacing: .14em;
}
.contact-card-copy strong {
color: var(--ink);
font-size:
clamp(
12px,
1vw,
15px
);
font-weight: 700;
}
.contact-arrow {
position: absolute;
top: 50%;
right: 17px;
transform:
translateY(-50%);
width: 30px;
height: 30px;
display: grid;
place-items: center;
border:
1px solid
rgba(242,239,228,.13);
border-radius: 50%;
color: var(--soft);
font-size: 11px;
}
/* =========================================================
FORM WRAPPER
========================================================= */
.contact-form-wrap {
padding:
clamp(
25px,
3vw,
48px
);
border:
1px solid
rgba(242,239,228,.15);
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(11,23,15,.67),
rgba(3,9,5,.48)
);
backdrop-filter:
blur(22px);
-webkit-backdrop-filter:
blur(22px);
box-shadow:
0
35px
80px
rgba(0,0,0,.28);
}
.form-top {
margin-bottom: 28px;
}
.form-top span {
display: block;
margin-bottom: 8px;
color: var(--accent);
font-size: 8px;
font-weight: 900;
letter-spacing: .17em;
}
.form-top strong {
font-size:
clamp(
20px,
2vw,
30px
);
font-weight: 800;
letter-spacing: -.035em;
}
/* =========================================================
FORM
========================================================= */
.contact-form {
display: grid;
grid-template-columns:
1fr
1fr;
gap: 13px;
}
.form-field {
position: relative;
}
.form-field label {
display: block;
margin:
0
0
8px;
color:
rgba(242,239,228,.50);
font-size: 8px;
font-weight: 900;
letter-spacing: .13em;
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
border:
1px solid
rgba(242,239,228,.13);
outline: none;
border-radius: 8px;
color: var(--ink);
background:
rgba(2,6,4,.53);
transition:
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.form-field input {
height: 58px;
padding:
0
17px;
}
.form-field select {
height: 58px;
padding:
0
44px
0
17px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.form-field textarea {
height: 165px;
padding: 17px;
resize: vertical;
min-height: 130px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color:
rgba(242,239,228,.31);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color:
rgba(185,223,114,.58);
background:
rgba(4,12,7,.74);
box-shadow:
0 0 0 3px
rgba(185,223,114,.06);
}
.select-wrap {
position: relative;
}
.select-wrap::after {
content: "⌄";
position: absolute;
top: 50%;
right: 17px;
transform:
translateY(-54%);
color: var(--accent);
pointer-events: none;
}
.form-field--message {
grid-column:
1 / -1;
}
/* =========================================================
SUBMIT
========================================================= */
.submit-button {
grid-column:
1 / -1;
min-height: 60px;
padding:
0
20px;
display: flex;
align-items: center;
justify-content: space-between;
border: 0;
border-radius: 8px;
color: #071009;
background: var(--accent);
font-size: 10px;
font-weight: 900;
letter-spacing: .12em;
cursor: pointer;
transition:
transform .35s var(--ease),
background .3s ease;
}
.submit-button:hover {
transform:
translateY(-3px);
background:
#caef83;
}
.submit-button:disabled {
opacity: .55;
cursor: wait;
transform: none;
}
.form-status {
grid-column:
1 / -1;
min-height: 18px;
color: var(--soft);
font-size: 10px;
}
/* =========================================================
FINAL CTA
========================================================= */
.contact-bottom {
min-height: 75vh;
padding:
140px
20px
80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.contact-bottom p {
margin: 0;
color: var(--muted);
font-size: 8px;
font-weight: 900;
letter-spacing: .20em;
}
.contact-bottom h2 {
margin:
28px
0
0;
font-size:
clamp(
58px,
9vw,
150px
);
font-weight: 900;
line-height: .78;
letter-spacing: -.075em;
text-transform: uppercase;
}
.contact-bottom h2 span {
color: var(--accent);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.main-nav > a:not(.nav-cta) {
display: none;
}
.contact-layout {
grid-template-columns:
1fr;
gap: 70px;
}
.contact-details {
max-width: none;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 760px) {
:root {
--x: 20px;
}
.topbar {
padding:
12px
20px;
}
.brand-logo {
height: 46px;
}
.contact-page {
padding:
110px
20px
60px;
}
.contact-watermark {
top: 100px;
font-size: 27vw;
}
.contact-heading h1 {
font-size: 17vw;
}
.contact-heading > p {
margin-bottom: 35px;
}
.contact-layout {
gap: 50px;
}
.contact-form-wrap {
padding: 18px;
}
.contact-form {
grid-template-columns: 1fr;
}
.form-field,
.form-field--message,
.submit-button,
.form-status {
grid-column: 1;
}
.contact-bottom {
min-height: 65vh;
padding:
100px
10px;
}
.contact-bottom h2 {
font-size: 15vw;
}
}