2188 lines
37 KiB
CSS
2188 lines
37 KiB
CSS
:root {
|
|
--orange: #f2562b;
|
|
--orange-dark: #c93612;
|
|
--ink: #171717;
|
|
--graphite: #4d4d4d;
|
|
--paper: #f6f5f1;
|
|
--white: #ffffff;
|
|
--line: rgba(23, 23, 23, 0.18);
|
|
--line-light: rgba(255, 255, 255, 0.24);
|
|
--pad: clamp(20px, 4.4vw, 72px);
|
|
--nav-height: 82px;
|
|
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
background: var(--paper);
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
color: var(--ink);
|
|
background: var(--paper);
|
|
font-family: Inter, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.45;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body.menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
::selection {
|
|
color: var(--white);
|
|
background: var(--orange);
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button,
|
|
a {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.skip-link {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 12px;
|
|
left: 12px;
|
|
padding: 12px 16px;
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
transform: translateY(-140%);
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.skip-link:focus {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.scroll-progress {
|
|
position: fixed;
|
|
z-index: 1001;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.scroll-progress span {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--orange);
|
|
transform: scaleX(0);
|
|
transform-origin: left center;
|
|
}
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
z-index: 100;
|
|
top: 0;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
|
|
height: var(--nav-height);
|
|
border-bottom: 1px solid var(--line);
|
|
background: rgba(246, 245, 241, 0.96);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding-left: var(--pad);
|
|
font-size: clamp(17px, 1.6vw, 23px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.05em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.brand-logo {
|
|
width: clamp(142px, 15vw, 190px);
|
|
height: 58px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: stretch;
|
|
justify-content: flex-end;
|
|
border-left: 1px solid var(--line);
|
|
padding-right: var(--pad);
|
|
}
|
|
|
|
.site-nav a {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 clamp(13px, 1.6vw, 26px);
|
|
border-left: 1px solid transparent;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
transition: color 0.25s ease, background 0.25s ease;
|
|
}
|
|
|
|
.nav-divider {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
color: var(--graphite);
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-nav a::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 3px;
|
|
background: var(--orange);
|
|
content: "";
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.35s var(--ease);
|
|
}
|
|
|
|
.site-nav a:hover,
|
|
.site-nav a[aria-current="page"] {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.site-nav a:hover::after,
|
|
.site-nav a[aria-current="page"]::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.site-nav .nav-cta {
|
|
align-self: center;
|
|
height: 44px;
|
|
margin-left: 12px;
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.audience-split {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.audience-card {
|
|
position: relative;
|
|
min-height: 520px;
|
|
padding: clamp(30px, 4vw, 64px);
|
|
overflow: hidden;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
transition: color 0.45s ease, background 0.45s ease;
|
|
}
|
|
|
|
.audience-card:nth-child(2) {
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.audience-card h3 {
|
|
max-width: 650px;
|
|
margin: 120px 0 26px;
|
|
font-size: clamp(43px, 6vw, 96px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.07em;
|
|
line-height: 0.86;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.audience-card p {
|
|
max-width: 490px;
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
font-size: clamp(17px, 1.5vw, 22px);
|
|
}
|
|
|
|
.audience-card:nth-child(2) p {
|
|
color: rgba(255, 255, 255, 0.66);
|
|
}
|
|
|
|
.audience-card .arrow {
|
|
position: absolute;
|
|
right: 38px;
|
|
bottom: 34px;
|
|
color: var(--orange);
|
|
font-size: 40px;
|
|
transition: transform 0.35s var(--ease);
|
|
}
|
|
|
|
.audience-card:hover .arrow {
|
|
transform: translate(8px, -8px);
|
|
}
|
|
|
|
.discord-panel {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
min-height: 680px;
|
|
overflow: hidden;
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.discord-copy {
|
|
grid-column: 1 / span 7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: clamp(50px, 7vw, 110px) var(--pad);
|
|
}
|
|
|
|
.discord-copy .section-title {
|
|
max-width: 900px;
|
|
}
|
|
|
|
.discord-copy p {
|
|
max-width: 600px;
|
|
margin: 32px 0 0;
|
|
font-size: clamp(18px, 1.7vw, 26px);
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.discord-visual {
|
|
position: relative;
|
|
grid-column: 8 / -1;
|
|
overflow: hidden;
|
|
border-left: 1px solid rgba(255, 255, 255, 0.35);
|
|
background-color: #242424;
|
|
background-image:
|
|
linear-gradient(rgba(242, 86, 43, 0.28) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(242, 86, 43, 0.28) 1px, transparent 1px);
|
|
background-size: 25% 12.5%;
|
|
}
|
|
|
|
.discord-visual::before,
|
|
.discord-visual::after {
|
|
position: absolute;
|
|
border: 2px solid var(--orange);
|
|
border-radius: 50%;
|
|
content: "";
|
|
}
|
|
|
|
.discord-visual::before {
|
|
top: 15%;
|
|
left: 10%;
|
|
width: 66%;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
.discord-visual::after {
|
|
right: -20%;
|
|
bottom: -5%;
|
|
width: 72%;
|
|
aspect-ratio: 1;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.discord-channels {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 50%;
|
|
left: 12%;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.discord-channels li {
|
|
padding: 11px 0;
|
|
font-size: clamp(17px, 1.5vw, 24px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.discord-channels li::before {
|
|
margin-right: 10px;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
content: "#";
|
|
}
|
|
|
|
.builder-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.builder-card {
|
|
min-height: 380px;
|
|
padding: clamp(26px, 3vw, 46px);
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.builder-card:nth-child(even) {
|
|
background: #eceae4;
|
|
}
|
|
|
|
.builder-card h3 {
|
|
margin: 105px 0 20px;
|
|
font-size: clamp(28px, 3vw, 48px);
|
|
letter-spacing: -0.055em;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.builder-card p {
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
}
|
|
|
|
.builder-glyph {
|
|
display: block;
|
|
width: 52px;
|
|
height: 52px;
|
|
border: 2px solid var(--orange);
|
|
transition: transform 0.5s var(--ease), border-radius 0.5s var(--ease);
|
|
}
|
|
|
|
.builder-card:hover .builder-glyph {
|
|
border-radius: 50%;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.media-direction {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1px;
|
|
background: var(--line);
|
|
}
|
|
|
|
.media-card {
|
|
position: relative;
|
|
min-height: 560px;
|
|
padding: 28px;
|
|
overflow: hidden;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.media-card img {
|
|
position: absolute;
|
|
z-index: 0;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: saturate(0.88) contrast(1.04);
|
|
transition: transform 1s var(--ease), filter 0.8s ease;
|
|
}
|
|
|
|
.media-card::after {
|
|
position: absolute;
|
|
z-index: 1;
|
|
inset: 0;
|
|
background: linear-gradient(to bottom, rgba(23, 23, 23, 0.2), rgba(23, 23, 23, 0.08) 42%, rgba(23, 23, 23, 0.86));
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media-card:hover img {
|
|
filter: saturate(1) contrast(1.08);
|
|
transform: scale(1.035);
|
|
}
|
|
|
|
.media-card:nth-child(2) {
|
|
background: var(--orange);
|
|
}
|
|
|
|
.media-card:nth-child(3) {
|
|
background: #d8d8d3;
|
|
}
|
|
|
|
.media-card::before {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.17) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.17) 1px, transparent 1px);
|
|
background-size: 25% 12.5%;
|
|
content: "";
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.media-card-label,
|
|
.media-card-prompt {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.media-card-label {
|
|
color: var(--white);
|
|
}
|
|
|
|
.media-card-prompt {
|
|
position: absolute;
|
|
right: 28px;
|
|
bottom: 28px;
|
|
left: 28px;
|
|
margin: 0;
|
|
color: var(--white);
|
|
font-size: clamp(22px, 2.4vw, 38px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.05em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.application-layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
.application-aside {
|
|
grid-column: 1 / span 4;
|
|
padding-right: clamp(32px, 5vw, 80px);
|
|
}
|
|
|
|
.application-form {
|
|
grid-column: 6 / -1;
|
|
}
|
|
|
|
.application-points {
|
|
margin: 42px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.application-points li {
|
|
padding: 15px 0;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.choice-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px;
|
|
margin: 12px 0 38px;
|
|
}
|
|
|
|
.choice {
|
|
position: relative;
|
|
}
|
|
|
|
.choice input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.choice label {
|
|
display: block;
|
|
min-height: 58px;
|
|
padding: 18px;
|
|
border: 1px solid var(--line);
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
|
|
}
|
|
|
|
.choice input:checked + label {
|
|
border-color: var(--orange);
|
|
color: var(--white);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.form-note {
|
|
max-width: 550px;
|
|
margin: 20px 0 0;
|
|
color: var(--graphite);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.site-nav .nav-cta:hover {
|
|
color: var(--white);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: none;
|
|
width: 82px;
|
|
border: 0;
|
|
border-left: 1px solid var(--line);
|
|
color: var(--ink);
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.menu-toggle span,
|
|
.menu-toggle::before,
|
|
.menu-toggle::after {
|
|
display: block;
|
|
width: 24px;
|
|
height: 2px;
|
|
margin: 5px auto;
|
|
background: currentColor;
|
|
content: "";
|
|
transition: transform 0.35s var(--ease), opacity 0.2s ease;
|
|
}
|
|
|
|
.menu-open .menu-toggle span {
|
|
opacity: 0;
|
|
}
|
|
|
|
.menu-open .menu-toggle::before {
|
|
transform: translateY(7px) rotate(45deg);
|
|
}
|
|
|
|
.menu-open .menu-toggle::after {
|
|
transform: translateY(-7px) rotate(-45deg);
|
|
}
|
|
|
|
.grid-surface {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.grid-surface::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0 var(--pad);
|
|
background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 12));
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.section {
|
|
padding: clamp(72px, 10vw, 160px) var(--pad);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.section-tight {
|
|
padding: clamp(48px, 6.5vw, 104px) var(--pad);
|
|
}
|
|
|
|
.section-dark {
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.section-orange {
|
|
color: var(--ink);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0 0 22px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.eyebrow::before {
|
|
width: 18px;
|
|
height: 18px;
|
|
background: var(--orange);
|
|
content: "";
|
|
}
|
|
|
|
.section-orange .eyebrow::before {
|
|
background: var(--ink);
|
|
}
|
|
|
|
.section-dark .eyebrow::before {
|
|
border: 1px solid var(--orange);
|
|
background: transparent;
|
|
}
|
|
|
|
.display,
|
|
.page-title,
|
|
.section-title,
|
|
.card-title {
|
|
margin: 0;
|
|
font-weight: 800;
|
|
letter-spacing: -0.07em;
|
|
line-height: 0.86;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.display {
|
|
max-width: 1500px;
|
|
font-size: clamp(68px, 13.4vw, 224px);
|
|
}
|
|
|
|
.page-title {
|
|
max-width: 1500px;
|
|
font-size: clamp(62px, 11vw, 190px);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: clamp(48px, 7.2vw, 118px);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: clamp(27px, 3vw, 52px);
|
|
line-height: 0.95;
|
|
}
|
|
|
|
.outline-text {
|
|
color: transparent;
|
|
-webkit-text-stroke: 1.5px currentColor;
|
|
}
|
|
|
|
.text-orange {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.text-white {
|
|
color: var(--white);
|
|
}
|
|
|
|
.lede {
|
|
max-width: 720px;
|
|
margin: 0;
|
|
font-size: clamp(20px, 2vw, 32px);
|
|
font-weight: 500;
|
|
letter-spacing: -0.035em;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.body-copy {
|
|
max-width: 600px;
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
font-size: clamp(16px, 1.3vw, 20px);
|
|
}
|
|
|
|
.section-dark .body-copy {
|
|
color: rgba(255, 255, 255, 0.68);
|
|
}
|
|
|
|
.meta {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.button-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
min-height: 50px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 26px;
|
|
padding: 0 20px;
|
|
border: 1px solid var(--ink);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
transition: color 0.3s ease, background 0.3s ease, transform 0.3s var(--ease);
|
|
}
|
|
|
|
.btn::after {
|
|
content: "\2197";
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btn:hover {
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
.btn-orange {
|
|
border-color: var(--orange);
|
|
color: var(--white);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.btn-orange:hover {
|
|
border-color: var(--white);
|
|
color: var(--ink);
|
|
background: var(--white);
|
|
}
|
|
|
|
.btn-light {
|
|
border-color: var(--white);
|
|
color: var(--white);
|
|
}
|
|
|
|
.btn-light:hover {
|
|
color: var(--ink);
|
|
background: var(--white);
|
|
}
|
|
|
|
.hero {
|
|
min-height: calc(100svh - var(--nav-height));
|
|
padding: clamp(42px, 6vw, 90px) var(--pad) 0;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-topline {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 0;
|
|
margin-bottom: clamp(48px, 7vw, 112px);
|
|
}
|
|
|
|
.hero-topline .eyebrow {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
.hero-intro {
|
|
grid-column: 8 / -1;
|
|
max-width: 500px;
|
|
margin: 0;
|
|
font-size: clamp(16px, 1.4vw, 22px);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.hero-title-row {
|
|
position: relative;
|
|
}
|
|
|
|
.hero .display {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-orbit {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 52%;
|
|
right: 8%;
|
|
width: clamp(150px, 28vw, 480px);
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: var(--orange);
|
|
transform: translateY(-50%);
|
|
animation: breathe 8s var(--ease) infinite alternate;
|
|
}
|
|
|
|
@keyframes breathe {
|
|
from { transform: translateY(-50%) scale(0.92); }
|
|
to { transform: translateY(-50%) scale(1.05); }
|
|
}
|
|
|
|
.hero-bottom {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
margin-top: clamp(52px, 7vw, 100px);
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-note {
|
|
grid-column: 1 / span 3;
|
|
padding: 24px 20px 34px 0;
|
|
border-right: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-actions {
|
|
grid-column: 7 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24px 0 34px 24px;
|
|
}
|
|
|
|
.hero-actions p {
|
|
max-width: 340px;
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
}
|
|
|
|
.marquee {
|
|
overflow: hidden;
|
|
border-bottom: 1px solid var(--line);
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.marquee-track {
|
|
display: flex;
|
|
width: max-content;
|
|
animation: marquee 22s linear infinite;
|
|
}
|
|
|
|
.marquee span {
|
|
display: block;
|
|
padding: 20px 26px;
|
|
font-size: clamp(20px, 2.4vw, 40px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.04em;
|
|
line-height: 1;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.marquee i {
|
|
color: var(--orange);
|
|
font-style: normal;
|
|
}
|
|
|
|
@keyframes marquee {
|
|
to { transform: translateX(-50%); }
|
|
}
|
|
|
|
.intro-grid,
|
|
.split-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
|
|
.intro-grid .section-title {
|
|
grid-column: 1 / span 7;
|
|
}
|
|
|
|
.intro-copy {
|
|
grid-column: 9 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
gap: 28px;
|
|
}
|
|
|
|
.service-list {
|
|
margin-top: clamp(70px, 9vw, 140px);
|
|
border-top: 1px solid var(--line);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.service-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 5fr 4fr 1fr;
|
|
min-height: 150px;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--line);
|
|
transition: color 0.35s ease, background 0.35s ease;
|
|
}
|
|
|
|
.service-row > * {
|
|
padding: 28px 20px;
|
|
}
|
|
|
|
.service-row > * + * {
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.service-row h3 {
|
|
margin: 0;
|
|
font-size: clamp(29px, 4vw, 66px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.06em;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.service-row p {
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
}
|
|
|
|
.service-row .arrow {
|
|
font-size: 30px;
|
|
text-align: right;
|
|
transition: transform 0.35s var(--ease);
|
|
}
|
|
|
|
.service-row:hover {
|
|
color: var(--white);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.service-row:hover p {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.service-row:hover .arrow {
|
|
transform: translate(5px, -5px);
|
|
}
|
|
|
|
.feature-collage {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
min-height: min(900px, 80vw);
|
|
padding: clamp(54px, 8vw, 120px) var(--pad);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.collage-image {
|
|
position: relative;
|
|
grid-column: 1 / span 8;
|
|
min-height: 600px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.image-panel img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
filter: grayscale(1) contrast(1.12);
|
|
transition: filter 0.8s ease, transform 1s var(--ease);
|
|
}
|
|
|
|
.collage-image::after,
|
|
.project-image::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px solid var(--line-light);
|
|
content: "";
|
|
pointer-events: none;
|
|
}
|
|
|
|
.collage-card {
|
|
z-index: 2;
|
|
grid-column: 7 / -1;
|
|
align-self: center;
|
|
margin-left: -1px;
|
|
padding: clamp(32px, 5vw, 78px);
|
|
color: var(--ink);
|
|
background: var(--orange);
|
|
}
|
|
|
|
.collage-card .section-title {
|
|
max-width: 700px;
|
|
}
|
|
|
|
.collage-card p {
|
|
max-width: 500px;
|
|
margin: 28px 0 0;
|
|
font-size: clamp(17px, 1.5vw, 22px);
|
|
}
|
|
|
|
.visual-system {
|
|
position: relative;
|
|
isolation: isolate;
|
|
color: var(--white);
|
|
background-color: #242424;
|
|
background-image:
|
|
linear-gradient(var(--line-light) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
|
|
background-size: 12.5% 12.5%;
|
|
}
|
|
|
|
.visual-system::before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
inset: 0;
|
|
background: linear-gradient(135deg, transparent 0 48%, rgba(242, 86, 43, 0.18) 48% 66%, transparent 66%);
|
|
content: "";
|
|
}
|
|
|
|
.visual-index,
|
|
.visual-caption {
|
|
position: absolute;
|
|
z-index: 3;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.visual-index {
|
|
top: 28px;
|
|
left: 28px;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.visual-caption {
|
|
right: 28px;
|
|
bottom: 28px;
|
|
max-width: 160px;
|
|
text-align: right;
|
|
}
|
|
|
|
.visual-word {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 50%;
|
|
left: -0.04em;
|
|
font-size: clamp(90px, 15vw, 230px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.1em;
|
|
line-height: 0.75;
|
|
transform: translateY(-50%) rotate(-90deg);
|
|
transform-origin: center;
|
|
}
|
|
|
|
.visual-axis {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 18%;
|
|
right: 12%;
|
|
width: 17%;
|
|
height: 64%;
|
|
background: var(--orange);
|
|
transition: width 0.8s var(--ease), transform 0.8s var(--ease);
|
|
}
|
|
|
|
.visual-orbit {
|
|
position: absolute;
|
|
z-index: 2;
|
|
right: 6%;
|
|
bottom: 12%;
|
|
width: 42%;
|
|
aspect-ratio: 1;
|
|
border: 2px solid var(--white);
|
|
border-radius: 50%;
|
|
mix-blend-mode: difference;
|
|
transition: transform 0.9s var(--ease);
|
|
}
|
|
|
|
.visual-system:hover .visual-axis {
|
|
width: 29%;
|
|
transform: translateX(-12%);
|
|
}
|
|
|
|
.visual-system:hover .visual-orbit {
|
|
transform: translate(-8%, -7%) scale(0.86);
|
|
}
|
|
|
|
.visual-system-form {
|
|
color: var(--ink);
|
|
background-color: var(--paper);
|
|
background-image:
|
|
linear-gradient(var(--line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
|
}
|
|
|
|
.visual-system-form .visual-word {
|
|
top: auto;
|
|
bottom: 8%;
|
|
left: 5%;
|
|
font-size: clamp(80px, 13vw, 200px);
|
|
transform: none;
|
|
}
|
|
|
|
.visual-system-form .visual-axis {
|
|
top: 12%;
|
|
right: 18%;
|
|
width: 31%;
|
|
height: 56%;
|
|
}
|
|
|
|
.visual-system-form .visual-orbit {
|
|
top: 16%;
|
|
right: 8%;
|
|
bottom: auto;
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border-top: 1px solid var(--line-light);
|
|
border-left: 1px solid var(--line-light);
|
|
}
|
|
|
|
.stat {
|
|
min-height: 250px;
|
|
padding: clamp(24px, 3vw, 48px);
|
|
border-right: 1px solid var(--line-light);
|
|
border-bottom: 1px solid var(--line-light);
|
|
}
|
|
|
|
.stat strong {
|
|
display: block;
|
|
margin-top: 65px;
|
|
color: var(--orange);
|
|
font-size: clamp(56px, 7vw, 112px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.08em;
|
|
line-height: 0.8;
|
|
}
|
|
|
|
.stat p {
|
|
max-width: 210px;
|
|
margin: 20px 0 0;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.statement {
|
|
position: relative;
|
|
padding: clamp(90px, 13vw, 210px) var(--pad);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.statement p {
|
|
position: relative;
|
|
z-index: 2;
|
|
max-width: 1250px;
|
|
margin: 0;
|
|
font-size: clamp(44px, 7.5vw, 126px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.07em;
|
|
line-height: 0.92;
|
|
}
|
|
|
|
.statement-mark {
|
|
position: absolute;
|
|
right: -5vw;
|
|
bottom: -30%;
|
|
width: min(64vw, 900px);
|
|
opacity: 0.13;
|
|
mix-blend-mode: multiply;
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
.page-hero {
|
|
min-height: 72svh;
|
|
padding: clamp(50px, 7vw, 105px) var(--pad) clamp(70px, 9vw, 140px);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.page-hero-head {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 0;
|
|
margin-bottom: clamp(65px, 8vw, 130px);
|
|
}
|
|
|
|
.page-hero-head .eyebrow {
|
|
grid-column: 1 / span 3;
|
|
}
|
|
|
|
.page-hero-copy {
|
|
grid-column: 8 / -1;
|
|
max-width: 570px;
|
|
margin: 0;
|
|
font-size: clamp(18px, 1.7vw, 27px);
|
|
letter-spacing: -0.03em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.page-hero .page-title span {
|
|
display: block;
|
|
}
|
|
|
|
.page-index {
|
|
display: inline-block;
|
|
margin-right: 14px;
|
|
color: var(--orange);
|
|
font-size: 0.16em;
|
|
letter-spacing: 0;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.capability-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.capability-card {
|
|
min-height: 460px;
|
|
padding: clamp(28px, 3.5vw, 56px);
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
background: var(--paper);
|
|
transition: color 0.4s ease, background 0.4s ease;
|
|
}
|
|
|
|
.capability-card:nth-child(2) {
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.capability-card:nth-child(2) .body-copy {
|
|
color: rgba(255, 255, 255, 0.62);
|
|
}
|
|
|
|
.capability-card:nth-child(3) {
|
|
background: var(--orange);
|
|
}
|
|
|
|
.capability-card .card-title {
|
|
margin: 100px 0 30px;
|
|
}
|
|
|
|
.capability-card ul {
|
|
margin: 30px 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.capability-card li {
|
|
padding: 9px 0;
|
|
border-top: 1px solid currentColor;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.process {
|
|
counter-reset: process;
|
|
}
|
|
|
|
.process-step {
|
|
display: grid;
|
|
grid-template-columns: 1fr 4fr 4fr;
|
|
min-height: 230px;
|
|
align-items: start;
|
|
padding: clamp(30px, 4vw, 62px) 0;
|
|
border-top: 1px solid var(--line-light);
|
|
counter-increment: process;
|
|
}
|
|
|
|
.process-step::before {
|
|
color: var(--orange);
|
|
content: "0" counter(process);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.process-step h3 {
|
|
margin: 0;
|
|
padding-right: 30px;
|
|
font-size: clamp(34px, 4.5vw, 74px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.06em;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.process-step p {
|
|
max-width: 500px;
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: clamp(17px, 1.5vw, 21px);
|
|
}
|
|
|
|
.principles-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
gap: 0;
|
|
}
|
|
|
|
.principles-lead {
|
|
grid-column: 1 / span 7;
|
|
}
|
|
|
|
.principles-aside {
|
|
grid-column: 9 / -1;
|
|
align-self: end;
|
|
}
|
|
|
|
.principle-list {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
margin-top: clamp(70px, 9vw, 140px);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.principle {
|
|
min-height: 290px;
|
|
padding: clamp(30px, 4vw, 58px);
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.principle h3 {
|
|
margin: 52px 0 18px;
|
|
font-size: clamp(30px, 3vw, 50px);
|
|
letter-spacing: -0.05em;
|
|
line-height: 0.95;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.principle p {
|
|
max-width: 460px;
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
}
|
|
|
|
.project-list {
|
|
display: grid;
|
|
gap: clamp(70px, 10vw, 160px);
|
|
}
|
|
|
|
.project {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.project-image {
|
|
position: relative;
|
|
grid-column: 1 / span 8;
|
|
min-height: clamp(440px, 55vw, 800px);
|
|
overflow: hidden;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.project-info {
|
|
grid-column: 9 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 0 0 0 clamp(24px, 3vw, 50px);
|
|
}
|
|
|
|
.project:nth-child(even) .project-image {
|
|
grid-column: 5 / -1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.project:nth-child(even) .project-info {
|
|
grid-column: 1 / span 4;
|
|
grid-row: 1;
|
|
padding: 0 clamp(24px, 3vw, 50px) 0 0;
|
|
}
|
|
|
|
.project-visual {
|
|
position: relative;
|
|
isolation: isolate;
|
|
overflow: hidden;
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
background-image:
|
|
linear-gradient(var(--line-light) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
|
|
background-size: 12.5% 12.5%;
|
|
}
|
|
|
|
.project-visual-code,
|
|
.project-visual-note {
|
|
position: absolute;
|
|
z-index: 4;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.project-visual-code {
|
|
top: 30px;
|
|
left: 30px;
|
|
color: var(--orange);
|
|
}
|
|
|
|
.project-visual-note {
|
|
right: 30px;
|
|
bottom: 30px;
|
|
max-width: 180px;
|
|
text-align: right;
|
|
}
|
|
|
|
.project-visual-title {
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 4%;
|
|
bottom: 5%;
|
|
font-size: clamp(76px, 12vw, 190px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.1em;
|
|
line-height: 0.72;
|
|
text-transform: uppercase;
|
|
transition: transform 0.9s var(--ease);
|
|
}
|
|
|
|
.project-visual-shape {
|
|
position: absolute;
|
|
z-index: 2;
|
|
top: 15%;
|
|
right: 8%;
|
|
width: 46%;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: var(--orange);
|
|
transition: border-radius 0.9s var(--ease), transform 0.9s var(--ease);
|
|
}
|
|
|
|
.project:hover .project-visual-title {
|
|
transform: translateX(2%);
|
|
}
|
|
|
|
.project:hover .project-visual-shape {
|
|
border-radius: 0;
|
|
transform: rotate(12deg) scale(0.9);
|
|
}
|
|
|
|
.project-visual-forme {
|
|
color: var(--ink);
|
|
background-color: var(--paper);
|
|
background-image:
|
|
linear-gradient(var(--line) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
|
}
|
|
|
|
.project-visual-forme .project-visual-title {
|
|
top: 8%;
|
|
bottom: auto;
|
|
font-size: clamp(86px, 14vw, 220px);
|
|
color: var(--orange);
|
|
}
|
|
|
|
.project-visual-forme .project-visual-shape {
|
|
top: auto;
|
|
right: 20%;
|
|
bottom: 8%;
|
|
width: 35%;
|
|
border: 2px solid var(--ink);
|
|
background: transparent;
|
|
}
|
|
|
|
.project-visual-forme .project-visual-note {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.project-visual-axis {
|
|
background-color: var(--orange);
|
|
background-image:
|
|
linear-gradient(rgba(23, 23, 23, 0.22) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(23, 23, 23, 0.22) 1px, transparent 1px);
|
|
}
|
|
|
|
.project-visual-axis .project-visual-code,
|
|
.project-visual-axis .project-visual-note {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.project-visual-axis .project-visual-title {
|
|
top: 50%;
|
|
bottom: auto;
|
|
left: 50%;
|
|
color: var(--ink);
|
|
transform: translate(-50%, -50%) rotate(-90deg);
|
|
}
|
|
|
|
.project-visual-axis .project-visual-shape {
|
|
top: 12%;
|
|
right: 8%;
|
|
width: 20%;
|
|
height: 76%;
|
|
border-radius: 0;
|
|
background: var(--ink);
|
|
}
|
|
|
|
.project:hover .project-visual-axis .project-visual-title {
|
|
transform: translate(-50%, -50%) rotate(-90deg) scale(1.04);
|
|
}
|
|
|
|
.project-number {
|
|
color: var(--orange);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.project-info h2 {
|
|
margin: 22px 0;
|
|
font-size: clamp(39px, 5vw, 82px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.065em;
|
|
line-height: 0.88;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.project-info p {
|
|
margin: 0;
|
|
color: var(--graphite);
|
|
}
|
|
|
|
.project-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 7px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.project-tags span {
|
|
padding: 7px 9px;
|
|
border: 1px solid var(--line);
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.contact-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
min-height: 75svh;
|
|
}
|
|
|
|
.contact-intro {
|
|
grid-column: 1 / span 5;
|
|
padding-right: clamp(30px, 5vw, 80px);
|
|
}
|
|
|
|
.contact-form {
|
|
grid-column: 7 / -1;
|
|
}
|
|
|
|
.field-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 0 24px;
|
|
}
|
|
|
|
.field {
|
|
position: relative;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.field-wide {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.field label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.13em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.field input,
|
|
.field textarea,
|
|
.field select {
|
|
width: 100%;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--ink);
|
|
border-radius: 0;
|
|
outline: 0;
|
|
padding: 12px 0 16px;
|
|
color: var(--ink);
|
|
background: transparent;
|
|
font-size: clamp(18px, 1.7vw, 26px);
|
|
appearance: none;
|
|
}
|
|
|
|
.field textarea {
|
|
min-height: 130px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.field::after {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 2px;
|
|
background: var(--orange);
|
|
content: "";
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.35s var(--ease);
|
|
}
|
|
|
|
.field:focus-within::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.form-status {
|
|
min-height: 24px;
|
|
margin-top: 18px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.contact-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
margin-top: clamp(70px, 9vw, 130px);
|
|
border-top: 1px solid var(--line);
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.contact-detail {
|
|
min-height: 210px;
|
|
padding: 28px;
|
|
border-right: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.contact-detail p,
|
|
.contact-detail a {
|
|
display: block;
|
|
margin: 70px 0 0;
|
|
font-size: clamp(17px, 1.6vw, 24px);
|
|
font-weight: 600;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.site-footer {
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.footer-cta {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
padding: clamp(70px, 9vw, 140px) var(--pad);
|
|
border-bottom: 1px solid var(--line-light);
|
|
}
|
|
|
|
.footer-cta h2 {
|
|
grid-column: 1 / span 8;
|
|
margin: 0;
|
|
font-size: clamp(54px, 9vw, 150px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.075em;
|
|
line-height: 0.83;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-cta .btn {
|
|
grid-column: 10 / -1;
|
|
align-self: end;
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: grid;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
align-items: end;
|
|
min-height: 260px;
|
|
padding: 50px var(--pad) 32px;
|
|
}
|
|
|
|
.footer-brand {
|
|
grid-column: 1 / span 5;
|
|
color: var(--orange);
|
|
font-size: clamp(34px, 5vw, 76px);
|
|
font-weight: 800;
|
|
letter-spacing: -0.07em;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-logo {
|
|
width: min(100%, 300px);
|
|
}
|
|
|
|
.footer-links {
|
|
grid-column: 7 / span 4;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px 20px;
|
|
}
|
|
|
|
.footer-links a,
|
|
.footer-meta {
|
|
color: rgba(255, 255, 255, 0.62);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.footer-meta {
|
|
grid-column: 11 / -1;
|
|
text-align: right;
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(45px);
|
|
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
|
|
}
|
|
|
|
.reveal.is-visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.reveal-delay {
|
|
transition-delay: 0.12s;
|
|
}
|
|
|
|
.cursor-dot,
|
|
.cursor-ring {
|
|
position: fixed;
|
|
z-index: 999;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translate(-50%, -50%);
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.cursor-dot.is-active,
|
|
.cursor-ring.is-active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cursor-dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
background: var(--orange);
|
|
}
|
|
|
|
.cursor-ring {
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 1px solid var(--orange);
|
|
transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.cursor-ring.is-hovering {
|
|
width: 62px;
|
|
height: 62px;
|
|
background: rgba(242, 86, 43, 0.15);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
:root {
|
|
--nav-height: 72px;
|
|
}
|
|
|
|
.site-header {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: block;
|
|
}
|
|
|
|
.site-nav {
|
|
position: fixed;
|
|
z-index: -1;
|
|
top: var(--nav-height);
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding: 22px var(--pad) 50px;
|
|
border: 0;
|
|
color: var(--white);
|
|
background: var(--ink);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-18px);
|
|
transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.45s var(--ease);
|
|
}
|
|
|
|
body.menu-open .site-nav {
|
|
display: flex;
|
|
z-index: 99;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
.site-nav a {
|
|
min-height: auto;
|
|
padding: 17px 0;
|
|
border-bottom: 1px solid var(--line-light);
|
|
color: var(--white);
|
|
font-size: clamp(30px, 6vw, 56px);
|
|
font-weight: 700;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.site-nav a::after {
|
|
display: none;
|
|
}
|
|
|
|
.site-nav .nav-cta {
|
|
align-self: stretch;
|
|
height: auto;
|
|
margin: 18px 0 0;
|
|
padding: 18px;
|
|
color: var(--ink);
|
|
background: var(--orange);
|
|
font-size: 16px;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.nav-divider {
|
|
display: none;
|
|
}
|
|
|
|
.hero-intro,
|
|
.page-hero-copy {
|
|
grid-column: 6 / -1;
|
|
}
|
|
|
|
.intro-grid .section-title,
|
|
.principles-lead {
|
|
grid-column: 1 / span 8;
|
|
}
|
|
|
|
.intro-copy,
|
|
.principles-aside {
|
|
grid-column: 9 / -1;
|
|
}
|
|
|
|
.service-row {
|
|
grid-template-columns: 0.7fr 4fr 4fr 0.8fr;
|
|
}
|
|
|
|
.feature-collage {
|
|
min-height: 720px;
|
|
}
|
|
|
|
.collage-image {
|
|
grid-column: 1 / span 9;
|
|
min-height: 560px;
|
|
}
|
|
|
|
.collage-card {
|
|
grid-column: 6 / -1;
|
|
}
|
|
|
|
.capability-card {
|
|
min-height: 410px;
|
|
}
|
|
|
|
.capability-card .card-title {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.builder-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
:root {
|
|
--pad: 20px;
|
|
}
|
|
|
|
.brand {
|
|
padding-left: var(--pad);
|
|
}
|
|
|
|
.brand-logo {
|
|
width: 126px;
|
|
height: 50px;
|
|
}
|
|
|
|
.grid-surface::before {
|
|
background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 25%);
|
|
}
|
|
|
|
.hero {
|
|
min-height: auto;
|
|
padding-top: 34px;
|
|
}
|
|
|
|
.hero-topline,
|
|
.page-hero-head,
|
|
.intro-grid,
|
|
.split-grid,
|
|
.principles-grid,
|
|
.contact-grid {
|
|
display: block;
|
|
}
|
|
|
|
.hero-topline {
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
.hero-intro,
|
|
.page-hero-copy {
|
|
max-width: 430px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.hero-orbit {
|
|
top: 62%;
|
|
right: -8%;
|
|
width: 50vw;
|
|
}
|
|
|
|
.hero-bottom {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.hero-note,
|
|
.hero-actions {
|
|
grid-column: 1;
|
|
padding: 22px 0;
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.hero-actions {
|
|
display: block;
|
|
}
|
|
|
|
.hero-actions .btn {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.intro-copy,
|
|
.principles-aside {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.service-row {
|
|
grid-template-columns: 42px minmax(0, 1fr) auto;
|
|
min-height: 0;
|
|
align-items: start;
|
|
}
|
|
|
|
.service-row > * {
|
|
padding: 24px 12px;
|
|
}
|
|
|
|
.service-row h3 {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.service-row p {
|
|
grid-column: 2 / -1;
|
|
grid-row: 2;
|
|
padding-top: 0;
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.service-row .arrow {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.feature-collage {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
}
|
|
|
|
.collage-image {
|
|
min-height: 470px;
|
|
}
|
|
|
|
.collage-card {
|
|
margin: 0;
|
|
padding: 48px var(--pad) 54px;
|
|
}
|
|
|
|
.stats-grid,
|
|
.capability-grid,
|
|
.contact-details,
|
|
.audience-split,
|
|
.builder-grid,
|
|
.media-direction {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.audience-card {
|
|
min-height: 430px;
|
|
}
|
|
|
|
.audience-card h3 {
|
|
margin-top: 85px;
|
|
}
|
|
|
|
.discord-panel {
|
|
display: flex;
|
|
min-height: 0;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.discord-copy {
|
|
min-height: 570px;
|
|
}
|
|
|
|
.discord-visual {
|
|
min-height: 520px;
|
|
border-top: 1px solid rgba(255, 255, 255, 0.35);
|
|
border-left: 0;
|
|
}
|
|
|
|
.media-card {
|
|
min-height: 430px;
|
|
}
|
|
|
|
.application-layout {
|
|
display: block;
|
|
}
|
|
|
|
.application-aside {
|
|
padding: 0 0 70px;
|
|
}
|
|
|
|
.choice-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stat {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.stat strong {
|
|
margin-top: 45px;
|
|
}
|
|
|
|
.page-hero {
|
|
min-height: auto;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
.page-hero-head {
|
|
margin-bottom: 75px;
|
|
}
|
|
|
|
.capability-card {
|
|
min-height: 390px;
|
|
}
|
|
|
|
.process-step {
|
|
grid-template-columns: 48px 1fr;
|
|
min-height: 0;
|
|
}
|
|
|
|
.process-step h3 {
|
|
padding: 0;
|
|
}
|
|
|
|
.process-step p {
|
|
grid-column: 2;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.principle-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.principle {
|
|
min-height: 260px;
|
|
}
|
|
|
|
.project {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.project-image {
|
|
min-height: 430px;
|
|
}
|
|
|
|
.project-info,
|
|
.project:nth-child(even) .project-info {
|
|
padding: 28px 0 0;
|
|
}
|
|
|
|
.project-info .btn {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.contact-intro {
|
|
padding: 0 0 70px;
|
|
}
|
|
|
|
.field-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.field-wide {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.footer-cta {
|
|
display: block;
|
|
}
|
|
|
|
.footer-cta .btn {
|
|
margin-top: 42px;
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 42px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.footer-brand,
|
|
.footer-links,
|
|
.footer-meta {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.footer-meta {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
@media (pointer: coarse), (max-width: 900px) {
|
|
.cursor-dot,
|
|
.cursor-ring {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html {
|
|
scroll-behavior: auto;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.reveal {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
}
|