* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: Inter,Arial,sans-serif;
background: #f1efe9;
color: #101010;
}
.nav {
display: flex;
gap: 24px;
}
.nav a,.menu-toggle {
color: inherit;
text-decoration: none;
font-size: 13px;
}
.menu-toggle {
display: none;
background: none;
border: 0;
}
.section {
padding: 140px 24px 110px;
}
.section-dark {
background: #111;
color: #f4f2ec;
}
.section-light {
background: #f1efe9;
}
.section-accent {
background: #d9ff45;
color: #101010;
}
.section-contact {
background: #ff674d;
}
.section-grid {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 4vw;
max-width: 1440px;
margin: 0 auto;
}
.eyebrow {
margin: 0 0 24px;
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.h1,h1,h2 {
font-family: Manrope,Inter,sans-serif;
font-weight: 600;
letter-spacing: -.055em;
margin: 0;
}
h1 {
font-size: clamp(64px,9vw,150px);
line-height: .9;
max-width: 9ch;
}
h2 {
font-size: clamp(48px,6vw,96px);
line-height: .95;
max-width: 10ch;
}
.lead {
font-family: Manrope,Inter,sans-serif;
font-size: clamp(24px,3vw,44px);
line-height: 1.08;
letter-spacing: -.035em;
margin: 0 0 34px;
}
.dark {
color: #111;
}
.copy p:not(.lead) {
max-width: 700px;
font-size: 18px;
line-height: 1.55;
}
.copy-light p {
color: #f4f2ec;
}
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 150px;
}
.design-system-demo {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
background: #bbb8ae;
max-width: 1440px;
margin: 110px auto 0;
border: 1px solid #bbb8ae;
}
.demo-card {
background: #f1efe9;
padding: 28px;
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.label {
font-size: 10px;
letter-spacing: .14em;
font-weight: 600;
}
.section-quote {
background: #d1d6ff;
}
.section-quote blockquote {
font: 600 clamp(48px,7vw,116px)/.96 Manrope,sans-serif;
letter-spacing: -.055em;
margin: 80px 0 0;
max-width: 1300px;
}
.section-contact h2 {
max-width: 12ch;
}
footer {
padding: 24px 24px 32px;
background: #101010;
font-size: 10px;
}
@media (max-width:900px) {
.nav {
display: none;
position: absolute;
top: 58px;
left: 0;
right: 0;
background: #111;
padding: 24px;
flex-direction: column;
}
.nav.open {
display: flex;
}
.menu-toggle {
display: block;
}
.section {
padding: 110px 20px 80px;
}
.section-grid,.hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.hero {
padding-top: 120px;
}
h1 {
font-size: clamp(58px,18vw,100px);
}
h2 {
font-size: clamp(46px,14vw,78px);
}
.design-system-demo {
grid-template-columns: 1fr;
}
.demo-card {
min-height: 280px;
}
.section-quote blockquote {
font-size: clamp(46px,13vw,86px);
}
}
.footer-tagline-box,
.footer-top-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 74px;
margin-top: 34px;
padding: 0 32px;
border: 1px solid #ff674d;
border-radius: 18px;
color: #ff674d;
}
@media (max-width:900px) {
.footer-tagline-box,
.footer-top-box {
min-height: 64px;
margin-top: 24px;
padding: 0 20px;
border-radius: 14px;
gap: 16px;
}
}
.footer-tagline-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 96px;
margin-top: 34px;
padding: 0 32px;
border: 1px solid #ff674d;
border-radius: 18px;
color: #ff674d;
}
.footer-name {
flex: 0 0 auto;
font: 600 18px/1 Manrope,Inter,sans-serif;
letter-spacing: -.02em;
color: #ff674d;
}
.footer-tagline {
display: block;
margin-left: auto;
flex: 0 1 auto;
font: 500 clamp(18px,1.8vw,28px)/1.15 Manrope,Inter,sans-serif;
letter-spacing: -.025em;
text-align: right;
color: #ff674d;
}
@media (max-width:900px) {
.footer-tagline-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 96px;
margin-top: 34px;
padding: 0 32px;
border: 1px solid #ff674d;
border-radius: 18px;
color: #ff674d;
}
.footer-name {
font-size: 16px;
}
.footer-tagline {
display: block;
margin-left: auto;
flex: 0 1 auto;
font: 500 clamp(18px,1.8vw,28px)/1.15 Manrope,Inter,sans-serif;
letter-spacing: -.025em;
text-align: right;
color: #ff674d;
}
}
.footer-logo {
display: block;
width: 100%;
height: auto;
margin: 0;
}
.what-followup {
margin-top: 80px;
}
.demo-card h3 {
font: 600 clamp(26px,3vw,42px)/1.05 Manrope,Inter,sans-serif;
letter-spacing: -.04em;
margin: 50px 0 20px;
}
.flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 24px;
align-items: center;
max-width: 1440px;
margin: 100px auto 0;
}
.flow>div {
min-height: 180px;
border: 1px solid #aaa;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.flow span {
font: 600 clamp(28px,3vw,44px)/1 Manrope,Inter,sans-serif;
letter-spacing: -.04em;
}
.flow small {
font-size: 13px;
line-height: 1.45;
max-width: 24ch;
}
.flow b {
font-size: 28px;
font-weight: 400;
}
.section-important {
background: #d1d6ff;
}
.hero-copy>p:not(.lead) {
font-size: 18px;
line-height: 1.55;
max-width: 680px;
margin-bottom: 28px;
}
@media (max-width:900px) {
.flow {
grid-template-columns: 1fr;
gap: 14px;
}
.flow b {
transform: rotate(90deg);
justify-self: center;
}
.flow>div {
min-height: 140px;
}
.what-followup {
margin-top: 54px;
}
}
@media (max-width:900px) {
.footer-tagline-box {
min-height: 86px;
padding: 0 20px;
}
.footer-tagline {
font-size: 16px;
max-width: 62%;
}
}
.site-header {
position: fixed;
z-index: 20;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
border-bottom: 1px solid currentColor;
color: #fff;
transition: color .18s ease,border-color .18s ease;
mix-blend-mode: normal;
}
.site-header.is-dark {
color: #111;
}
.site-header.is-light {
color: #fff;
}
.brand {
display: block;
width: 150px;
color: inherit;
text-decoration: none;
}
.header-randorff-svg {
display: block;
width: 100%;
height: auto;
}
.header-randorff-svg .randorff-logo-shape,
.header-randorff-svg path {
fill: currentColor !important;
stroke: none !important;
}
.nav a,.menu-toggle {
color: inherit;
}
@media (min-width: 901px) {
.section-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 4vw;
row-gap: 72px;
align-items: start;
}
.section-grid > :first-child {
grid-column: 1 / -1;
max-width: none;
}
.section-grid > :first-child h2 {
max-width: 14ch;
}
.section-grid > :nth-child(2) {
grid-column: 2;
width: 100%;
max-width: none;
}
.section-grid > :first-child .eyebrow {
margin-bottom: 28px;
}
}
@media (min-width: 901px) {
.what-followup > :first-child {
display: none;
}
.what-followup > :nth-child(2) {
grid-column: 2;
}
}
@media (min-width: 901px) {
.section-grid > :first-child h2 {
max-width: 18ch;
}
.section-grid > :nth-child(2) {
transform: translateX(-100px);
padding-right: 100px;
}
.what-followup > :nth-child(2) {
transform: translateX(-100px);
padding-right: 100px;
}
}
.hero {
min-height: 100vh;
display: flex;
align-items: flex-start;
}
.hero-editorial {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 4vw;
row-gap: 72px;
align-items: start;
}
.hero-heading {
grid-column: 1 / -1;
}
.hero-heading h1 {
max-width: 16ch;
}
.hero-copy {
grid-column: 2;
transform: translateX(-100px);
padding-right: 100px;
max-width: none;
}
@media (max-width:900px) {
.hero {
min-height: auto;
}
.hero-editorial {
display: block;
}
.hero-heading h1 {
max-width: none;
}
.hero-copy {
transform: none;
padding-right: 0;
margin-top: 48px;
}
}
.hero-heading h1 {
max-width: 20ch;
}
.hero-positioning {
margin-top: 34px;
font: 600 clamp(24px,2.4vw,38px)/1.12 Manrope,Inter,sans-serif;
letter-spacing: -.035em;
}
.section-net-case {
background: #d1d6ff;
}
.net-investment {
margin-top: 42px;
padding-top: 28px;
border-top: none;
}
.net-reasons {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1px;
margin-top: 96px;
border: 1px solid #111;
background: #111;
}
.net-reason {
min-height: 300px;
padding: 28px;
background: #d1d6ff;
display: flex;
flex-direction: column;
}
.net-reason .label {
font-size: 10px;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: auto;
}
.net-reason h3 {
font: 600 clamp(24px,2.1vw,34px)/1.05 Manrope,Inter,sans-serif;
letter-spacing: -.04em;
margin: 56px 0 18px;
}
.net-reason p {
margin: 0;
font-size: 16px;
line-height: 1.5;
}
@media (max-width:900px) {
.net-reasons {
grid-template-columns: 1fr;
margin-top: 64px;
}
.net-reason {
min-height: 240px;
}
}
.demo-card h3 {
font-size: clamp(34px,3.8vw,58px);
line-height: .96;
letter-spacing: -.045em;
}
.net-reason h3 {
font-size: clamp(30px,2.8vw,46px);
line-height: .98;
}
.section-grid > :first-child .eyebrow,
.section-grid > :first-child h2 {
margin-left: 0;
padding-left: 0;
text-indent: 0;
}
.section-grid > :first-child h2 {
width: 100%;
}
@media (min-width: 901px) {
.section-grid > :first-child h2 {
transform: translateX(-8px);
}
}
:root {
--fundament-body: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.copy p,
.hero-copy p,
.net-reason p,
.conclusion-copy,
.section-conclusion .copy p,
.demo-card p,
.flow small {
font-family: var(--fundament-body);
font-weight: 200;
letter-spacing: -.01em;
}
.copy p,
.hero-copy p,
.net-reason p,
.section-conclusion .copy p,
.demo-card p {
line-height: 1.65;
}
.terminal-statement {
font-family: var(--fundament-body) !important;
font-weight: 200 !important;
font-size: clamp(18px,1.7vw,26px);
line-height: 1.35;
letter-spacing: -.015em !important;
min-height: 1.35em;
}
.terminal-statement__text {
display: inline;
}
@keyframes fundament-cursor-blink {
0%,48% {
opacity: 1;
}
49%,100% {
opacity: 0;
}
}
.copy p.lead,
.hero-copy p.lead,
.lead {
font-family: Manrope,Inter,sans-serif !important;
font-weight: 500 !important;
letter-spacing: -.035em !important;
line-height: 1.08 !important;
}
.copy p:not(.lead),
.hero-copy p:not(.lead),
.net-reason p,
.section-conclusion .copy p:not(.lead),
.demo-card p,
.flow small {
font-family: var(--fundament-body);
font-weight: 200;
letter-spacing: -.01em;
}
.terminal-statement {
font-family: var(--fundament-body) !important;
font-weight: 700 !important;
}
.terminal-statement__text {
font-weight: 700 !important;
}
.terminal-inline {
display: inline;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-weight: 700;
letter-spacing: -.015em;
line-height: inherit;
}
.terminal-inline__text {
display: inline;
font: inherit;
white-space: pre-line;
}
.terminal-inline__text.is-selected {
color: #383838 !important;
background: #f2f0eb;
}
.terminal-inline__cursor {
display: inline-block;
width: 1px;
height: .88em;
margin-left: .12em;
background: currentColor;
transform: translateY(.08em);
animation: fundament-terminal-cursor .8s steps(1,end) infinite;
}
.footer-tagline .terminal-inline__text.is-selected {
color: #111 !important;
background: #ff674d;
}
@keyframes fundament-terminal-cursor {
0%,48% {
opacity: 1;
}
49%,100% {
opacity: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.terminal-inline__cursor {
display: none;
}
}
.footer-tagline .terminal-inline--footer {
font-size: clamp(14px,1.25vw,20px) !important;
line-height: 1.25;
}
.footer-tagline {
max-width: none !important;
white-space: nowrap;
}
.footer-tagline .terminal-inline--footer {
display: inline-block;
font-size: clamp(11px,.9vw,15px) !important;
line-height: 1.2;
white-space: nowrap;
letter-spacing: -.02em;
}
.footer-tagline .terminal-inline__text {
white-space: nowrap;
}
.footer-tagline .terminal-inline--footer {
transform: translateY(-10px);
}
.footer-policy-link {
color: #ff674d;
text-decoration: none;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: 11px;
font-weight: 400;
letter-spacing: .02em;
white-space: nowrap;
}
.footer-policy-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width:900px) {
.footer-tagline-box {
flex-wrap: wrap;
row-gap: 18px;
}
.footer-policy-link {
order: 3;
width: 100%;
}
}
.flow {
grid-template-columns: 1fr 54px 1fr 54px 1fr;
}
.flow-symbol {
display: flex;
align-items: center;
justify-content: center;
color: #111;
}
@media (max-width:900px) {
.flow {
grid-template-columns: 1fr;
}
.flow-symbol {
transform: rotate(90deg);
min-height: 34px;
}
.flow-symbol--equals {
transform: none;
}
}
.footer-policy-link {
font-size: clamp(14px,1.15vw,18px) !important;
font-weight: 700 !important;
}
.legal-page {
background: #f2f0eb;
}
.legal-page .site-header {
color: #111;
background: #f2f0eb;
}
.legal-page .site-header.is-light,
.legal-page .site-header.is-dark {
color: #111;
}
.legal-document {
width: min(calc(100% - 48px),980px);
margin: 0 auto;
padding: 180px 0 120px;
}
.legal-document__header {
padding-bottom: 56px;
border-bottom: 1px solid #111;
}
.legal-document__header .eyebrow {
margin-bottom: 24px;
}
.legal-document__header h1 {
margin: 0;
max-width: 14ch;
font: 600 clamp(48px,6vw,84px)/.98 Manrope,Inter,sans-serif;
letter-spacing: -.05em;
}
.legal-intro {
max-width: 760px;
margin: 40px 0 0;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: clamp(15px,1.05vw,17px);
font-weight: 200;
line-height: 1.7;
}
.legal-copy {
max-width: 760px;
margin: 0;
}
.legal-copy section {
padding: 48px 0;
border-bottom: 1px solid rgba(17,17,17,.35);
}
.legal-copy h2 {
margin: 0 0 22px;
font: 600 clamp(22px,2vw,30px)/1.15 Manrope,Inter,sans-serif;
letter-spacing: -.025em;
}
.legal-copy p {
margin: 0 0 1.25em;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: clamp(14px,1vw,16px);
font-weight: 200;
line-height: 1.75;
}
.legal-copy p:last-child {
margin-bottom: 0;
}
.legal-copy strong {
font-weight: 700;
}
.legal-back {
margin-top: 54px;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: 13px;
}
.legal-back a {
text-decoration: none;
}
.legal-back a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-page footer {
margin-top: 0;
}
@media (max-width:900px) {
.legal-document {
width: calc(100% - 32px);
padding: 130px 0 80px;
}
.legal-document__header h1 {
max-width: none;
}
.legal-copy section {
padding: 36px 0;
}
}
.legal-copy h2 {
max-width: none !important;
width: auto !important;
white-space: normal !important;
}
.legal-back a {
color: #ff674d !important;
}
.legal-page footer {
margin-top: 0;
}
.legal-page .footer-tagline-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.legal-back {
margin-top: 54px;
}
.legal-back a {
color: #ff674d !important;
text-decoration: none;
}
.legal-back a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-policy-link {
font-size: clamp(11px,.9vw,15px) !important;
line-height: 1.2;
}
.footer-tagline-box {
align-items: center !important;
}
.footer-name,
.footer-policy-link,
.footer-tagline {
display: flex;
align-items: center;
align-self: stretch;
}
.footer-tagline {
justify-content: flex-end;
}
.footer-tagline .terminal-inline--footer {
transform: none !important;
display: flex !important;
align-items: center;
}
.flow {
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: stretch;
}
.flow-symbol {
border: none !important;
background: transparent !important;
padding: 0 !important;
min-width: 54px;
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
}
.flow-symbol--plus img {
display: block;
width: 28px;
height: 28px;
object-fit: contain;
}
.flow-symbol--equals {
font-family: Arial,Helvetica,sans-serif;
font-size: 42px;
font-weight: 600;
line-height: 1;
color: #111;
}
@media (max-width:900px) {
.flow-symbol {
min-height: 42px;
transform: none !important;
}
}
.flow {
align-items: center !important;
}
.flow > div:not(.flow-symbol) {
align-self: stretch;
}
.flow-symbol {
align-self: center !important;
min-width: 68px;
height: auto !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px !important;
}
.flow-symbol--plus,
.flow-symbol--equals {
transform: translateY(-2px);
}
.flow-symbol--plus img {
width: 26px;
height: 26px;
}
.flow-symbol--equals {
font-size: 48px;
line-height: 1;
}
@media (max-width:900px) {
.flow-symbol--plus,
.flow-symbol--equals {
transform: none;
}
}
.flow {
align-items: stretch !important;
}
.flow-symbol {
align-self: stretch !important;
height: 100% !important;
min-height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
}
.flow-symbol--plus,
.flow-symbol--equals {
transform: none !important;
}
.brand {
display: flex;
align-items: center;
min-width: 0;
}
.site-header {
position: sticky;
top: 0;
z-index: 1000;
}
.menu-toggle {
appearance: none;
border: 1px solid currentColor;
background: transparent;
border-radius: 8px;
padding: 8px 12px;
font-family: Inter, Arial, sans-serif;
font-weight: 600;
cursor: pointer;
}
@media (min-width:901px) {
.menu-toggle {
display: none !important;
}
.nav {
display: flex !important;
align-items: center;
gap: 24px;
position: static !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
}
}
@media (max-width:900px) {
.site-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
}
.menu-toggle {
display: block !important;
}
.nav {
display: none !important;
grid-column: 1 / -1;
position: relative;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
margin-top: 6px;
padding: 8px 0 2px;
background: inherit;
border-top: 1px solid currentColor;
}
.nav.open {
display: flex !important;
}
.nav a {
display: block;
width: 100%;
padding: 14px 0;
border-bottom: 1px solid rgba(17,17,17,.12);
}
.site-header.is-dark .nav a {
border-bottom-color: rgba(255,255,255,.14);
}
}
footer {
overflow: hidden;
}
@media (max-width:900px) {
.footer-tagline-box {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: start !important;
justify-content: start !important;
min-height: auto !important;
padding: 16px 18px 18px !important;
}
.footer-name,
.footer-policy-link {
display: block !important;
align-self: auto !important;
}
.footer-tagline {
display: block !important;
width: 100%;
margin-left: 0 !important;
justify-content: flex-start !important;
overflow: hidden;
}
.footer-tagline .terminal-inline--footer {
display: inline-flex !important;
max-width: 100%;
white-space: normal !important;
word-break: break-word;
}
.footer-tagline .terminal-inline__text {
white-space: normal !important;
}
}
@media (max-width:900px) {
.flow {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
margin-top: 56px !important;
align-items: stretch !important;
}
.flow > div:not(.flow-symbol) {
min-height: 0 !important;
width: 100% !important;
}
.flow-symbol {
align-self: center !important;
justify-self: center !important;
min-height: 36px !important;
height: auto !important;
min-width: auto !important;
padding: 0 !important;
}
.flow-symbol--plus img {
width: 22px !important;
height: 22px !important;
}
.flow-symbol--equals {
font-size: 40px !important;
line-height: 1 !important;
}
}
.legal-back {
margin-top: 54px;
}
.legal-back a {
color: #ff674d !important;
text-decoration: none;
}
.legal-back a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.brand {
display: block !important;
width: 150px !important;
}
.header-randorff-svg {
display: block !important;
width: 100% !important;
height: auto !important;
}
.header-randorff-svg .randorff-logo-shape,
.header-randorff-svg path {
fill: currentColor !important;
stroke: none !important;
}
@media (max-width:900px) {
.flow > div:not(.flow-symbol) {
padding: 28px !important;
min-height: 185px !important;
justify-content: flex-start !important;
}
.flow > div:not(.flow-symbol) > span {
display: block;
margin-bottom: 54px !important;
}
.flow > div:not(.flow-symbol) > small {
display: block;
margin-top: 0 !important;
}
.footer-tagline-box {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 0 !important;
}
.footer-name {
order: 1;
margin-bottom: 28px;
}
.footer-policy-link {
order: 2 !important;
width: auto !important;
margin-bottom: 34px;
}
.footer-tagline {
order: 3;
width: 100% !important;
margin: 0 !important;
margin-top: auto !important;
justify-content: flex-start !important;
text-align: left !important;
}
.footer-tagline .terminal-inline--footer {
display: inline-flex !important;
justify-content: flex-start !important;
text-align: left !important;
white-space: normal !important;
}
.footer-tagline .terminal-inline__text {
text-align: left !important;
white-space: normal !important;
}
}
@media (max-width:900px) {
.nav {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 12px 20px 18px !important;
background: #f1efe9 !important;
color: #111 !important;
border-top: 1px solid #111 !important;
box-shadow: 0 18px 30px rgba(0,0,0,.12);
z-index: 999 !important;
}
.nav.open {
display: flex !important;
}
.nav a {
color: #111 !important;
padding: 14px 0 !important;
border-bottom: 1px solid rgba(17,17,17,.15) !important;
}
.flow > div:not(.flow-symbol) {
min-height: 160px !important;
}
.flow > div:not(.flow-symbol) > span {
margin-bottom: 30px !important;
}
.footer-tagline-box {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 8px !important;
min-height: auto !important;
padding: 16px 18px 18px !important;
}
.footer-name,
.footer-policy-link,
.footer-tagline {
order: initial !important;
display: block !important;
width: auto !important;
margin: 0 !important;
align-self: auto !important;
}
.footer-tagline {
width: 100% !important;
text-align: left !important;
justify-content: flex-start !important;
}
.footer-tagline .terminal-inline--footer {
display: inline-flex !important;
text-align: left !important;
justify-content: flex-start !important;
white-space: normal !important;
}
.footer-tagline .terminal-inline__text {
white-space: normal !important;
text-align: left !important;
}
}
.net-investment {
margin-top: 18px !important;
padding-top: 0 !important;
}
.section-net-case {
background: #35565E !important;
color: #FFFFFF !important;
}
.section-net-case .eyebrow,
.section-net-case h2,
.section-net-case .net-reason h3 {
font-family: "Barlow Condensed","Arial Narrow",sans-serif !important;
color: #FFFFFF !important;
}
.section-net-case .eyebrow {
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
}
.section-net-case h2 {
font-weight: 700 !important;
letter-spacing: 0 !important;
line-height: 1.02 !important;
}
.section-net-case .copy p,
.section-net-case .lead,
.section-net-case .net-reason p,
.section-net-case .net-reason .label,
.section-net-case .terminal-inline {
font-family: "Barlow",system-ui,-apple-system,sans-serif !important;
color: #FFFFFF !important;
letter-spacing: 0 !important;
}
.section-net-case .copy p,
.section-net-case .net-reason p {
font-weight: 300 !important;
line-height: 1.5 !important;
}
.section-net-case .lead {
font-weight: 600 !important;
line-height: 1.1 !important;
}
.section-net-case .terminal-inline {
font-weight: 700 !important;
}
.section-net-case .net-reasons {
border-color: rgba(255,255,255,.45) !important;
background: rgba(255,255,255,.45) !important;
}
.section-net-case .net-reason {
background: #35565E !important;
color: #FFFFFF !important;
}
.section-net-case .net-reason .label {
font-weight: 500 !important;
letter-spacing: .06em !important;
text-transform: uppercase;
}
.section-net-case .terminal-inline__cursor {
background: #FFFFFF !important;
}
.section-net-case h2 {
line-height: .92 !important;
}
.section-net-case .lead {
line-height: 1.02 !important;
}
.section-net-case h2 {
white-space: normal !important;
}
.section-net-case .lead {
line-height: .96 !important;
}
.section-net-case h2 {
max-width: none !important;
line-height: .90 !important;
}
.section-net-case .lead {
line-height: .90 !important;
}
.section-net-case .copy p.lead {
line-height: .90 !important;
}
.section-net-case .copy p.lead {
line-height: .98 !important;
}
.design-system-demo .demo-card {
display: grid !important;
grid-template-rows: auto 1fr auto !important;
align-items: start !important;
}
.design-system-demo .demo-card .label {
align-self: start !important;
}
.design-system-demo .demo-card h3 {
align-self: start !important;
margin-top: 56px !important;
margin-bottom: 0 !important;
}
.design-system-demo .demo-card p {
align-self: end !important;
margin-top: 32px !important;
margin-bottom: 0 !important;
}
.section-net-case .net-reasons {
background: rgba(255,255,255,.25) !important;
border-color: rgba(255,255,255,.25) !important;
}
.section-net-case .net-reason {
border-color: rgba(255,255,255,.25) !important;
}
.section-net-case .net-reason:nth-child(1) {
background: #557370 !important;
color: #FFFFFF !important;
}
.section-net-case .net-reason:nth-child(3) {
background: #35565E !important;
color: #FFFFFF !important;
}
.section-net-case .net-reason:nth-child(5) {
background: #4F5761 !important;
color: #FFFFFF !important;
}
.section-net-case .net-reason:nth-child(2) {
background: #8BA293 !important;
color: #2D333A !important;
}
.section-net-case .net-reason:nth-child(4) {
background: #A19C9D !important;
color: #2D333A !important;
}
.section-net-case .net-reason:nth-child(6) {
background: #94A8AE !important;
color: #2D333A !important;
}
.section-net-case .net-reason:nth-child(1) .label,
.section-net-case .net-reason:nth-child(1) h3,
.section-net-case .net-reason:nth-child(1) p,
.section-net-case .net-reason:nth-child(3) .label,
.section-net-case .net-reason:nth-child(3) h3,
.section-net-case .net-reason:nth-child(3) p,
.section-net-case .net-reason:nth-child(5) .label,
.section-net-case .net-reason:nth-child(5) h3,
.section-net-case .net-reason:nth-child(5) p {
color: #FFFFFF !important;
}
.section-net-case .net-reason:nth-child(2) .label,
.section-net-case .net-reason:nth-child(2) h3,
.section-net-case .net-reason:nth-child(2) p,
.section-net-case .net-reason:nth-child(4) .label,
.section-net-case .net-reason:nth-child(4) h3,
.section-net-case .net-reason:nth-child(4) p,
.section-net-case .net-reason:nth-child(6) .label,
.section-net-case .net-reason:nth-child(6) h3,
.section-net-case .net-reason:nth-child(6) p {
color: #2D333A !important;
}
.section-net-case .net-case-cta-wrap {
margin: 26px 0 0 !important;
}
.section-net-case .net-case-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px 24px;
border-radius: 999px;
background: #E0D9CF;
color: #2D333A !important;
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: filter .15s ease, transform .1s ease;
}
.section-net-case .net-case-cta:hover {
filter: brightness(1.04);
}
.section-net-case .net-case-cta:active {
transform: translateY(1px);
}
.section-net-case .net-reason:nth-child(3) .label,
.section-net-case .net-reason:nth-child(3) h3,
.section-net-case .net-reason:nth-child(3) p {
color: #E0D9CF !important;
}
.section-net-case .net-reason:nth-child(3) {
background: #E0D9CF !important;
color: #2D333A !important;
}
.section-net-case .net-reason:nth-child(3) .label,
.section-net-case .net-reason:nth-child(3) h3,
.section-net-case .net-reason:nth-child(3) p {
color: #2D333A !important;
}
.section-net-case .net-case-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 18px 40px !important;
border: 0 !important;
border-radius: 999px !important;
background: #DA6151 !important;
color: #FFFFFF !important;
font-family: "Barlow",system-ui,-apple-system,sans-serif !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent;
transition: filter .15s ease, transform .1s ease;
}
.section-net-case .net-case-cta:hover {
filter: brightness(1.08) !important;
}
.section-net-case .net-case-cta:active {
transform: translateY(1px) !important;
}
.section-net-case {
position: relative;
overflow: hidden;
}
.net-case-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(520px, 1.05fr);
column-gap: 7vw;
row-gap: 38px;
align-items: start;
max-width: 1440px;
margin: 0 auto;
}
.net-case-heading {
grid-column: 1 / -1;
}
.net-case-heading .eyebrow {
margin-bottom: 24px;
}
.net-case-heading h2 {
max-width: 14ch !important;
}
.net-case-visual {
grid-column: 1;
position: relative;
min-height: 600px;
align-self: start;
}
.net-case-copy {
grid-column: 2;
transform: none !important;
padding-right: 0 !important;
max-width: 640px;
justify-self: start;
}
.net-candlestick-svg-wrap {
position: absolute;
left: -24px;
top: 160px;
width: min(92%, 560px);
pointer-events: none;
z-index: 0;
}
.net-candlestick-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.net-stick {
transform-box: fill-box;
transform: scaleY(var(--stick-progress, 0));
opacity: calc(.28 + (.72 * var(--stick-progress, 0)));
will-change: transform,opacity;
}
.net-stick--up {
transform-origin: center bottom;
}
.net-stick--down {
transform-origin: center top;
}
.net-stick:nth-child(7) {
--stick-start: 0.00;
--stick-end: .20;
}
.net-stick:nth-child(4) {
--stick-start: .10;
--stick-end: .30;
}
.net-stick:nth-child(5) {
--stick-start: .20;
--stick-end: .42;
}
.net-stick:nth-child(2) {
--stick-start: .32;
--stick-end: .52;
}
.net-stick:nth-child(1) {
--stick-start: .44;
--stick-end: .64;
}
.net-stick:nth-child(3) {
--stick-start: .56;
--stick-end: .76;
}
.net-stick:nth-child(6) {
--stick-start: .68;
--stick-end: 1.00;
}
.section-net-case .net-reasons {
margin-top: 72px;
}
@media (max-width:1100px) {
.net-case-top {
grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
column-gap: 5vw;
}
.net-candlestick-svg-wrap {
top: 190px;
width: min(94%, 500px);
}
}
@media (max-width:900px) {
.net-case-top {
grid-template-columns: 1fr;
row-gap: 34px;
}
.net-case-heading,
.net-case-visual,
.net-case-copy {
grid-column: 1;
}
.net-case-heading h2 {
max-width: none !important;
}
.net-case-visual {
min-height: auto;
}
.net-candlestick-svg-wrap {
position: relative;
left: auto;
top: auto;
width: min(88vw, 430px);
margin: 8px 0 12px -20px;
}
.net-case-copy {
max-width: none;
}
.section-net-case .net-reasons {
margin-top: 56px;
}
}
.net-case-heading h2 {
max-width: none !important;
}
.net-candlestick-svg-wrap {
left: calc((100vw - min(1440px, 100vw - 48px)) / -2 - 24px) !important;
}
@media (max-width:900px) {
.net-candlestick-svg-wrap {
left: -20px !important;
}
}
.net-candlestick-svg-wrap {
left: calc((100vw - min(1440px, 100vw - 48px)) / -2) !important;
}
@media (max-width:900px) {
.net-candlestick-svg-wrap {
left: -20px !important;
}
}
.section-net-case .net-reasons {
max-width: 1440px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 900px) {
.section-net-case .net-reasons {
width: 100%;
}
}
.section-net-case .net-reasons {
margin-top: 144px !important;
}
.section-net-case .net-reason {
display: grid !important;
grid-template-rows: auto 1fr auto !important;
align-items: start !important;
}
.section-net-case .net-reason .label {
align-self: start !important;
margin-bottom: 0 !important;
}
.section-net-case .net-reason h3 {
align-self: start !important;
margin-top: 56px !important;
margin-bottom: 0 !important;
}
.section-net-case .net-reason p {
align-self: end !important;
margin-top: 28px !important;
margin-bottom: 0 !important;
}
.net-case-top {
row-gap: 64px !important;
}
@media (min-width:901px) {
.net-case-top {
grid-template-columns: 1fr 1fr !important;
column-gap: 4vw !important;
}
.net-case-copy {
grid-column: 2 !important;
width: 100% !important;
max-width: none !important;
transform: translateX(-100px) !important;
padding-right: 100px !important;
justify-self: stretch !important;
}
}
.section-net-case .net-case-investment-block {
max-width: 900px;
margin: 96px auto 0;
padding: 0 24px;
text-align: center;
}
.section-net-case .net-case-investment-block .net-investment {
margin: 0 !important;
padding: 0 !important;
text-align: center;
font-family: "Barlow",system-ui,-apple-system,sans-serif !important;
font-size: clamp(22px,2vw,30px);
line-height: 1.25;
}
.section-net-case .net-case-investment-block .terminal-inline {
display: inline;
}
.section-net-case .net-case-investment-block .net-case-cta-wrap {
margin: 32px 0 0 !important;
text-align: center;
}
.section-net-case .net-reasons {
margin-top: 144px !important;
}
@media (max-width:900px) {
.section-net-case .net-case-investment-block {
margin-top: 64px;
padding: 0;
}
.section-net-case .net-case-investment-block .net-investment {
font-size: 22px;
}
.section-net-case .net-case-investment-block .net-case-cta-wrap {
margin-top: 26px !important;
}
}
footer .footer-tagline-box {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
flex-wrap: nowrap !important;
}
footer .footer-name,
footer .footer-policy-link,
footer .footer-tagline,
footer .terminal-inline,
footer .terminal-inline__text {
font-size: 12px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
footer .footer-name {
font-weight: 700 !important;
}
footer .footer-policy-link,
footer .footer-tagline,
footer .terminal-inline,
footer .terminal-inline__text {
font-weight: 400 !important;
}
footer .footer-policy-link {
text-decoration: none;
}
@media (max-width:900px) {
footer .footer-tagline-box {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
flex-wrap: nowrap !important;
}
footer .footer-name,
footer .footer-policy-link,
footer .footer-tagline,
footer .terminal-inline,
footer .terminal-inline__text {
font-size: 12px !important;
white-space: nowrap !important;
}
}
.hero-heading h1,.section-grid h2,.net-case-heading h2 {
margin-top: 0 !important;
}
body:not(.legal-page) .site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body:not(.legal-page) .site-header.is-light {
color: #fff !important;
background: transparent !important;
}
body:not(.legal-page) .site-header.is-light .nav {
background: transparent !important;
}
@media (max-width:900px) {
body:not(.legal-page) .site-header.is-light {
background: transparent !important;
}
}
:root {
--fundament-light: #E7E3DD;
--fundament-coral: #FF6B57;
--fundament-black: #0B0B0C;
--fundament-line: #B8B0A6;
--fundament-coral-dark: #E85B49;
--fundament-line-dark: #D85A47;
}
body {
background: var(--fundament-light) !important;
color: var(--fundament-black) !important;
}
.section-light,
.section-quote,
.section-important,
.section-accent {
background: var(--fundament-light) !important;
color: var(--fundament-black) !important;
}
.section-dark {
background: var(--fundament-black) !important;
color: var(--fundament-light) !important;
}
.section-contact {
background: var(--fundament-coral) !important;
color: var(--fundament-black) !important;
}
footer {
background: var(--fundament-black) !important;
}
.design-system-demo {
background: var(--fundament-line) !important;
border-color: var(--fundament-line) !important;
}
.demo-card {
background: var(--fundament-light) !important;
}
.footer-tagline-box {
border-color: var(--fundament-coral) !important;
color: var(--fundament-coral) !important;
}
.footer-name,
.footer-policy-link,
.footer-tagline,
footer .terminal-inline,
footer .terminal-inline__text,
footer .terminal-inline__cursor {
color: var(--fundament-coral) !important;
}
.section-contact-form .contact-grid {
align-items: start;
}
.section-contact-form .contact-intro h2 {
max-width: 10ch;
}
.section-contact-form .contact-copy {
width: 100%;
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 28px;
margin-top: 58px;
}
.contact-form label {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 10px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.contact-form input {
width: 100%;
appearance: none;
-webkit-appearance: none;
border: 0;
border-bottom: 1px solid var(--fundament-black);
border-radius: 0;
background: transparent;
color: var(--fundament-black);
padding: 8px 0 12px;
font: 500 20px/1.2 Manrope,Inter,sans-serif;
outline: none;
}
.contact-form input:focus {
border-bottom-width: 2px;
}
.contact-submit {
grid-column: 1 / -1;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 18px;
margin-top: 14px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid currentColor;
background: transparent;
color: var(--fundament-black);
font: 600 20px/1 Manrope,Inter,sans-serif;
cursor: pointer;
}
@media (max-width:900px) {
.contact-form {
grid-template-columns: 1fr;
margin-top: 42px;
}
.contact-submit {
grid-column: 1;
}
}
.section-heading-wide {
max-width: 1440px;
margin: 0 auto;
}
.section-heading-wide h2 {
max-width: none !important;
}
@media (min-width:901px) {
.section-contact-form .contact-intro {
grid-column: 1 / -1;
}
.section-contact-form .contact-intro h2 {
max-width: none !important;
white-space: nowrap;
font-size: clamp(54px,5.3vw,86px);
}
.section-contact-form .contact-copy {
grid-column: 2;
}
}
@media (max-width:900px) {
.section-contact-form .contact-intro h2 {
white-space: normal;
}
}
@media (min-width:901px) {
.section-contact-form .contact-intro h2 {
max-width: none !important;
white-space: normal !important;
font-size: clamp(72px,6.6vw,108px) !important;
line-height: .92 !important;
letter-spacing: -.055em !important;
}
}
.flow > div:not(.flow-symbol) small {
display: block;
font-size: 17px !important;
line-height: 1.4 !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
margin-top: 28px !important;
}
.contact-submit {
border: 0 !important;
background: var(--fundament-black) !important;
color: var(--fundament-coral) !important;
padding: 16px 28px !important;
margin-top: 18px !important;
text-decoration: none !important;
font-size: 18px !important;
line-height: 1 !important;
}
.contact-submit:hover {
background: #1A1A1D !important;
color: var(--fundament-coral) !important;
}
@media (max-width:900px) {
.flow > div:not(.flow-symbol) small {
font-size: 15px !important;
margin-top: 18px !important;
}
}
.flow > div:not(.flow-symbol) .flow-bullets {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
margin-top: 28px !important;
font-size: 17px !important;
line-height: 1.35 !important;
}
.flow > div:not(.flow-symbol) .flow-bullets span {
display: block !important;
position: relative;
padding-left: 18px;
}
.flow > div:not(.flow-symbol) .flow-bullets span::before {
content: "•";
position: absolute;
left: 0;
top: 0;
}
.contact-submit {
width: calc((100% - 28px) / 2) !important;
justify-content: space-between !important;
justify-self: start !important;
}
@media (max-width:900px) {
.flow > div:not(.flow-symbol) .flow-bullets {
font-size: 15px !important;
gap: 5px !important;
margin-top: 18px !important;
}
.contact-submit {
width: 100% !important;
}
}
.contact-submit {
justify-content: center !important;
text-align: center !important;
}
.flow > div:not(.flow-symbol) {
min-height: 200px;
}
.flow > div:not(.flow-symbol):nth-child(1) {
background: #F3EFE7 !important;
}
.flow > div:not(.flow-symbol):nth-child(3) {
background: #E9EDF8 !important;
}
.flow > div:not(.flow-symbol):nth-child(5) {
background: #F6E9E2 !important;
}
.flow > div:not(.flow-symbol) .flow-bullets {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 10px 22px !important;
margin-top: 18px !important;
font-family: "JetBrains Mono", monospace !important;
font-size: 14px !important;
line-height: 1.45 !important;
letter-spacing: 0 !important;
font-weight: 400 !important;
max-width: none !important;
}
.flow > div:not(.flow-symbol) .flow-bullets span {
display: inline-flex !important;
align-items: flex-start !important;
position: relative !important;
padding-left: 14px !important;
font-family: "JetBrains Mono", monospace !important;
font-size: 14px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
.flow > div:not(.flow-symbol) .flow-bullets span::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
font-size: 14px !important;
line-height: 1.45 !important;
}
@media (max-width:900px) {
.flow > div:not(.flow-symbol) {
min-height: 160px;
}
.flow > div:not(.flow-symbol) .flow-bullets {
gap: 8px 18px !important;
margin-top: 14px !important;
font-size: 13px !important;
}
.flow > div:not(.flow-symbol) .flow-bullets span,
.flow > div:not(.flow-symbol) .flow-bullets span::before {
font-size: 13px !important;
line-height: 1.45 !important;
}
}
.flow > div:not(.flow-symbol) {
background: var(--fundament-light) !important;
}
.flow > div:not(.flow-symbol):nth-child(1),
.flow > div:not(.flow-symbol):nth-child(3),
.flow > div:not(.flow-symbol):nth-child(5) {
background: var(--fundament-light) !important;
}
.flow > div:not(.flow-symbol) .flow-bullets {
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 7px !important;
}
.flow > div:not(.flow-symbol) .flow-bullets span {
width: 100%;
}
@media (min-width:901px) {
.section-contact-form .contact-intro h2 {
font-size: clamp(52px,4.8vw,76px) !important;
line-height: .94 !important;
max-width: none !important;
white-space: normal !important;
}
}
h1,
h2,
.demo-card h3,
.net-reason h3 {
line-height: 1.02 !important;
}
@media (min-width:901px) {
.section-contact-form .contact-intro h2 {
line-height: 1.02 !important;
}
.section-net-case h2 {
line-height: .96 !important;
}
}
.section-contact-form .contact-details {
margin-top: 64px;
max-width: 520px;
}
.section-contact-form .contact-detail-phone,
.section-contact-form .contact-detail-address {
margin: 0;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: 18px;
line-height: 1.55;
font-weight: 200;
letter-spacing: -.01em;
}
.section-contact-form .contact-detail-name {
margin-top: 42px;
margin-bottom: 12px;
}
@media (max-width:900px) {
.section-contact-form .contact-details {
margin-top: 42px;
}
.section-contact-form .contact-detail-phone,
.section-contact-form .contact-detail-address {
font-size: 16px;
}
}
@media (min-width:901px) {
.section-contact-form .contact-grid {
grid-template-columns: 1fr 1fr !important;
column-gap: 4vw !important;
row-gap: 72px !important;
align-items: start !important;
}
.section-contact-form .contact-intro {
grid-column: 1 / -1 !important;
transform: none !important;
padding-right: 0 !important;
}
.section-contact-form .contact-details {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: center !important;
margin: 0 !important;
max-width: none !important;
transform: none !important;
padding-right: 0 !important;
}
.section-contact-form .contact-copy {
grid-column: 2 !important;
grid-row: 2 !important;
align-self: start !important;
}
}
.section-contact-form .contact-detail-email,
.section-contact-form .contact-detail-phone {
display: block;
margin: 0;
font-family: Manrope,Inter,sans-serif !important;
font-size: clamp(30px,3vw,46px) !important;
line-height: 1.08 !important;
letter-spacing: -.04em !important;
color: var(--fundament-black) !important;
}
.section-contact-form .contact-detail-email {
font-weight: 500 !important;
text-decoration: none !important;
margin-bottom: 10px !important;
}
.section-contact-form .contact-detail-phone {
font-weight: 600 !important;
}
.section-contact-form .contact-detail-name {
margin: 44px 0 6px !important;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
font-size: 18px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
}
.section-contact-form .contact-detail-address {
margin: 0 !important;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
font-size: 18px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
@media (max-width:900px) {
.section-contact-form .contact-details {
margin-top: 10px !important;
}
.section-contact-form .contact-detail-email,
.section-contact-form .contact-detail-phone {
font-size: clamp(25px,8vw,36px) !important;
}
.section-contact-form .contact-detail-name,
.section-contact-form .contact-detail-address {
font-size: 16px !important;
}
}
.footer-menu,
.footer-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.footer-menu {
gap: 2px;
}
.footer-menu a,
.footer-contact a {
color: var(--fundament-light);
text-decoration: none;
font: inherit;
}
.footer-menu a:hover,
.footer-contact a:hover {
color: var(--fundament-coral);
}
.footer-contact {
justify-self: end;
text-align: right;
align-items: flex-end;
}
.footer-contact p {
margin: 18px 0 0;
font: inherit;
color: var(--fundament-light);
}
@media (max-width:900px) {
.footer-contact {
justify-self: end;
}
}
@media (max-width:620px) {
.footer-contact {
justify-self: start;
text-align: left;
align-items: flex-start;
}
}
footer .footer-tagline-box {
display: grid !important;
grid-template-columns: auto minmax(420px, 1fr) auto !important;
align-items: start !important;
gap: 54px !important;
min-height: 200px !important;
padding: 34px 30px !important;
}
footer .footer-left {
display: flex;
align-items: flex-start;
gap: 28px;
white-space: nowrap;
}
footer .footer-left .footer-name,
footer .footer-left .footer-policy-link {
display: block !important;
align-self: auto !important;
width: auto !important;
margin: 0 !important;
}
footer .footer-menu,
footer .footer-contact {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-self: start !important;
text-align: left !important;
}
footer .footer-menu {
gap: 1px !important;
}
footer .footer-menu a,
footer .footer-contact a,
footer .footer-contact p {
color: var(--fundament-light) !important;
font: inherit !important;
text-decoration: none !important;
}
footer .footer-contact p {
margin: 16px 0 0 !important;
}
footer .footer-tagline {
align-self: start !important;
justify-self: end !important;
width: auto !important;
margin: 0 !important;
text-align: right !important;
white-space: nowrap !important;
}
@media (max-width:1100px) {
footer .footer-tagline-box {
grid-template-columns: 1fr 1fr !important;
}
footer .footer-left {
grid-column: 1;
}
footer .footer-tagline {
grid-column: 2;
grid-row: 1;
}
}
@media (max-width:700px) {
footer .footer-tagline-box {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 28px !important;
}
footer .footer-tagline {
justify-self: start !important;
text-align: left !important;
white-space: normal !important;
}
}
footer .footer-tagline-box {
grid-template-columns: auto 1fr auto !important;
}
footer .footer-contact {
justify-self: center !important;
align-self: start !important;
text-align: left !important;
align-items: flex-start !important;
font-family: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: 10px;
line-height: 1.55;
}
footer .footer-moving-right {
display: flex;
align-items: flex-start;
justify-content: flex-end;
gap: 72px;
justify-self: end;
min-width: 0;
}
footer .footer-moving-right .footer-menu {
flex: 0 0 auto;
}
footer .footer-moving-right .footer-tagline {
flex: 0 0 auto;
align-self: flex-start !important;
justify-self: auto !important;
width: auto !important;
margin: 0 !important;
text-align: right !important;
white-space: nowrap !important;
}
@media (max-width:1100px) {
footer .footer-tagline-box {
grid-template-columns: 1fr 1fr !important;
}
footer .footer-left {
grid-column: 1;
grid-row: 1;
}
footer .footer-contact {
grid-column: 2;
grid-row: 1;
justify-self: end !important;
}
footer .footer-moving-right {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
justify-content: flex-end;
}
}
@media (max-width:700px) {
footer .footer-moving-right {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
footer .footer-moving-right .footer-tagline {
text-align: left !important;
white-space: normal !important;
}
}
footer .footer-tagline-box {
grid-template-columns: auto 1fr !important;
}
footer .footer-moving-right {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-end !important;
gap: 72px !important;
justify-self: end !important;
min-width: 0 !important;
}
footer .footer-info-group {
display: grid !important;
grid-template-columns: auto auto !important;
gap: 56px !important;
align-items: start !important;
flex: 0 0 auto !important;
}
footer .footer-info-group .footer-contact,
footer .footer-info-group .footer-menu {
justify-self: start !important;
align-self: start !important;
}
footer .footer-contact {
text-align: left !important;
align-items: flex-start !important;
}
footer .footer-menu {
text-align: left !important;
align-items: flex-start !important;
}
footer .footer-moving-right .footer-tagline {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
@media (max-width:1100px) {
footer .footer-tagline-box {
grid-template-columns: 1fr !important;
}
footer .footer-left {
grid-column: 1 !important;
grid-row: 1 !important;
}
footer .footer-moving-right {
grid-column: 1 !important;
grid-row: 2 !important;
width: 100% !important;
}
}
@media (max-width:700px) {
footer .footer-moving-right {
flex-direction: column !important;
align-items: flex-start !important;
gap: 28px !important;
}
footer .footer-info-group {
grid-template-columns: 1fr 1fr !important;
width: 100% !important;
gap: 28px !important;
}
}
footer .footer-legal-links {
display: flex;
align-items: flex-start;
gap: 22px;
white-space: nowrap;
}
footer .footer-left {
align-items: flex-start !important;
}
.privacy-consent[hidden] {
display: none !important;
}
.privacy-consent {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 24px;
background: rgba(11,11,12,.38);
}
.privacy-consent__panel {
width: min(100%, 1120px);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 28px;
align-items: center;
padding: 24px 28px;
border: 1px solid var(--fundament-coral);
border-radius: 18px;
background: var(--fundament-black);
color: var(--fundament-light);
box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.privacy-consent__title {
margin: 0;
color: var(--fundament-coral);
font: 700 13px/1.2 "JetBrains Mono",monospace;
text-transform: uppercase;
}
.privacy-consent__copy {
margin: 0;
font: 400 13px/1.55 "JetBrains Mono",monospace;
}
.privacy-consent__copy a {
color: var(--fundament-coral);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.privacy-consent__actions {
display: flex;
align-items: center;
gap: 10px;
}
.privacy-consent__button {
min-width: 112px;
border: 1px solid var(--fundament-coral);
padding: 12px 18px;
font: 600 13px/1 "JetBrains Mono",monospace;
cursor: pointer;
}
.privacy-consent__button--accept {
background: var(--fundament-coral);
color: var(--fundament-black);
}
.legal-copy a {
color: inherit;
text-underline-offset: 3px;
}
@media (max-width:900px) {
footer .footer-legal-links {
flex-direction: column;
gap: 4px;
}
.privacy-consent {
padding: 14px;
}
.privacy-consent__panel {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
}
.privacy-consent__actions {
width: 100%;
}
.privacy-consent__button {
flex: 1 1 0;
}
}
footer .footer-legal-links {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 1px !important;
white-space: nowrap !important;
}
footer .footer-policy-link {
display: block !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.55 !important;
}
footer .footer-tagline,
footer .footer-tagline .terminal-inline--footer,
footer .footer-tagline .terminal-inline__text {
white-space: pre-line !important;
}
footer .footer-tagline .terminal-inline--footer {
display: inline-flex !important;
align-items: flex-start !important;
}
footer .footer-tagline .terminal-inline__text {
display: inline !important;
line-height: 1.45 !important;
text-align: left !important;
}
footer .footer-tagline-box {
min-height: 0 !important;
height: auto !important;
padding: 28px 30px 24px !important;
}
footer .footer-tagline .terminal-inline--footer {
display: inline !important;
white-space: pre-line !important;
line-height: 1.45 !important;
}
footer .footer-tagline .terminal-inline__text {
display: inline !important;
white-space: pre-line !important;
line-height: 1.45 !important;
}
footer .footer-tagline .terminal-inline__cursor {
display: inline-block !important;
vertical-align: baseline !important;
transform: translateY(.08em) !important;
}
footer .footer-left {
align-items: flex-start !important;
}
footer .footer-randorff-svg {
display: block !important;
width: 150px !important;
height: auto !important;
color: #ff674d !important;
margin: 0 0 14px 0 !important;
flex: 0 0 auto !important;
}
footer .footer-randorff-svg .randorff-logo-shape,
footer .footer-randorff-svg path {
fill: currentColor !important;
stroke: none !important;
}
footer .footer-tagline {
font-size: clamp(18px, 1.6vw, 26px) !important;
line-height: 1.4 !important;
}
footer .footer-tagline .terminal-inline--footer,
footer .footer-tagline .terminal-inline__text,
footer .footer-tagline .terminal-inline__cursor {
font-size: inherit !important;
line-height: inherit !important;
}
@media (max-width: 900px) {
footer .footer-randorff-svg {
width: 150px !important;
margin-bottom: 12px !important;
}
footer .footer-tagline {
font-size: 18px !important;
line-height: 1.45 !important;
}
}
footer .footer-tagline-box {
align-items: center !important;
}
footer .footer-moving-right {
align-items: center !important;
}
footer .footer-tagline {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
align-self: center !important;
min-height: 3.1em !important;
margin: 0 !important;
font-size: 15px !important;
line-height: 1.45 !important;
white-space: pre-line !important;
}
footer .footer-tagline .terminal-inline--footer {
display: inline !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: pre-line !important;
}
footer .footer-tagline .terminal-inline__text {
display: inline !important;
font-size: inherit !important;
line-height: inherit !important;
white-space: pre-line !important;
}
footer .footer-tagline .terminal-inline__cursor {
display: inline-block !important;
font-size: inherit !important;
line-height: inherit !important;
vertical-align: baseline !important;
transform: translateY(.08em) !important;
}
@media (max-width:900px) {
footer .footer-tagline {
min-height: 3.1em !important;
font-size: 14px !important;
justify-content: flex-start !important;
}
}
footer .footer-left {
display: grid !important;
grid-template-columns: 150px auto !important;
column-gap: 34px !important;
align-items: start !important;
align-self: center !important;
white-space: normal !important;
}
footer .footer-brand-block {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 9px !important;
}
footer .footer-randorff-svg {
width: 150px !important;
height: auto !important;
margin: 0 !important;
}
footer .footer-name {
display: block !important;
margin: 0 !important;
line-height: 1.55 !important;
}
footer .footer-legal-links {
align-self: end !important;
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
padding-bottom: 0 !important;
}
footer .footer-policy-link {
line-height: 1.55 !important;
}
@media (max-width:700px) {
footer .footer-left {
grid-template-columns: 1fr !important;
row-gap: 20px !important;
}
footer .footer-legal-links {
align-self: start !important;
}
}
footer .footer-left {
align-self: start !important;
}
footer .footer-brand-block,
footer .footer-legal-links {
align-self: start !important;
}
footer .footer-info-group {
align-self: flex-start !important;
align-items: start !important;
}
footer .footer-info-group .footer-contact,
footer .footer-info-group .footer-menu {
align-self: start !important;
}
footer .footer-contact p {
margin-top: 0 !important;
}
footer .footer-contact,
footer .footer-contact a,
footer .footer-contact p,
footer .footer-menu,
footer .footer-menu a,
footer .footer-legal-links,
footer .footer-policy-link {
line-height: 1.7 !important;
}
footer .footer-contact p {
margin: 0 !important;
}
footer .footer-contact,
footer .footer-menu {
display: grid !important;
grid-auto-rows: 1.65em !important;
align-items: start !important;
row-gap: 0 !important;
}
footer .footer-contact > *,
footer .footer-menu > a {
display: flex !important;
align-items: flex-start !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.65 !important;
}
footer .footer-legal-links {
display: grid !important;
grid-auto-rows: 1.65em !important;
row-gap: 0 !important;
}
footer .footer-legal-links .footer-policy-link {
display: flex !important;
align-items: flex-start !important;
line-height: 1.65 !important;
margin: 0 !important;
padding: 0 !important;
}
.site-header .brand,
.site-header .menu-toggle {
position: relative !important;
z-index: 1003 !important;
}
.menu-toggle {
width: 42px !important;
height: 34px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: inherit !important;
}
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
position: absolute;
left: 5px;
width: 32px;
height: 2px;
background: currentColor;
content: "";
transition: transform .22s ease, top .22s ease, opacity .18s ease;
}
.menu-toggle__icon {
top: 16px;
}
.menu-toggle__icon::before {
top: -8px;
left: 0;
}
.menu-toggle__icon::after {
top: 8px;
left: 0;
}
.site-header.menu-active .menu-toggle__icon {
background: transparent;
}
.site-header.menu-active .menu-toggle__icon::before {
top: 0;
transform: rotate(45deg);
}
.site-header.menu-active .menu-toggle__icon::after {
top: 0;
transform: rotate(-45deg);
}
body.menu-open {
overflow: hidden !important;
}
.site-header.menu-active {
color: #0B0B0C !important;
}
@media (min-width:901px) {
.site-header:not(.is-scrolled) .menu-toggle {
display: none !important;
}
.site-header:not(.is-scrolled) .nav:not(.open) {
display: flex !important;
}
.site-header.is-scrolled .menu-toggle {
display: block !important;
}
.site-header.is-scrolled .nav:not(.open) {
display: none !important;
}
}
.site-header .nav.open {
position: fixed !important;
inset: 0 !important;
z-index: 1001 !important;
width: 100vw !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: rgba(255,107,87,.90) !important;
color: #0B0B0C !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 0 !important;
}
.site-header .nav.open a {
display: block !important;
width: auto !important;
margin-left: 50vw !important;
padding: 4px 0 !important;
border: 0 !important;
color: #0B0B0C !important;
text-decoration: none !important;
font-family: Manrope,Inter,sans-serif !important;
font-size: clamp(24px,3vw,44px) !important;
font-weight: 500 !important;
line-height: 1.08 !important;
letter-spacing: -.035em !important;
}
.site-header.menu-active,
body:not(.legal-page) .site-header.menu-active,
.legal-page .site-header.menu-active {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
@media (max-width:900px) {
.site-header .menu-toggle {
display: block !important;
}
.site-header .nav:not(.open) {
display: none !important;
}
.site-header .nav.open {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
padding: 0 !important;
}
.site-header .nav.open a {
margin-left: 50vw !important;
padding: 4px 0 !important;
font-size: clamp(24px,7vw,38px) !important;
}
}
body.menu-open .nav a:hover,
body.menu-open .nav a:focus-visible {
color: #fff !important;
}
body.menu-open::before {
content: "" !important;
position: fixed !important;
inset: 0 !important;
z-index: 1000 !important;
width: 100vw !important;
height: 100dvh !important;
background: rgba(255,107,87,.90) !important;
pointer-events: none !important;
}
body.menu-open .site-header .nav.open {
background: transparent !important;
z-index: 1001 !important;
}
body.menu-open .site-header .brand,
body.menu-open .site-header .menu-toggle {
z-index: 1003 !important;
}
footer .footer-moving-right {
align-self: stretch !important;
height: 100% !important;
align-items: center !important;
}
footer .footer-moving-right .footer-tagline {
align-self: center !important;
margin-top: auto !important;
margin-bottom: auto !important;
}
footer .footer-info-group {
align-self: flex-start !important;
}
footer .footer-tagline-box {
position: relative !important;
}
@media (min-width:1101px) {
footer .footer-moving-right {
align-items: flex-start !important;
height: auto !important;
}
footer .footer-moving-right .footer-tagline {
position: absolute !important;
top: 50% !important;
right: 30px !important;
transform: translateY(-50%) !important;
margin: 0 !important;
min-height: 0 !important;
align-self: auto !important;
z-index: 2 !important;
}
}
@media (max-width:1100px) {
footer .footer-moving-right .footer-tagline {
position: static !important;
transform: none !important;
}
}
@media (min-width:1101px) {
footer .footer-tagline-box {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: stretch !important;
column-gap: 54px !important;
position: relative !important;
}
footer .footer-left {
align-self: start !important;
}
footer .footer-moving-right {
display: grid !important;
grid-template-columns: auto minmax(300px, 360px) !important;
column-gap: 72px !important;
align-items: stretch !important;
align-self: stretch !important;
justify-content: end !important;
justify-self: stretch !important;
width: 100% !important;
height: auto !important;
}
footer .footer-info-group {
align-self: start !important;
justify-self: end !important;
}
footer .footer-moving-right .footer-tagline {
position: static !important;
top: auto !important;
right: auto !important;
transform: none !important;
align-self: center !important;
justify-self: end !important;
margin: 0 !important;
min-height: 3.1em !important;
display: flex !important;
align-items: center !important;
text-align: right !important;
z-index: auto !important;
}
}
@media (min-width:1101px) {
footer .footer-moving-right .footer-tagline {
transform: translateY(-8px) !important;
}
}
@media (min-width:1101px) {
footer .footer-moving-right .footer-tagline {
transform: translateY(-14px) !important;
}
}
@media (max-width:1100px) {
footer .footer-moving-right .footer-tagline {
justify-content: flex-start !important;
justify-self: start !important;
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
}
footer .footer-tagline .terminal-inline--footer,
footer .footer-tagline .terminal-inline__text {
text-align: left !important;
}
}
:root {
--font-sans-local: Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--font-mono-local: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
body {
font-family: var(--font-mono-local) !important;
}
h1,h2,h3,h4,h5,h6,
.lead,
.nav,
.menu-toggle,
.brand,
.contact-detail-email,
.contact-detail-phone,
.footer-tagline {
font-family: var(--font-sans-local) !important;
}
.terminal-inline,
.footer-menu,
.footer-contact,
.footer-legal-links,
.footer-name {
font-family: var(--font-mono-local) !important;
}
@media (min-width:1101px) and (max-width:1800px) {
.section {
padding-left: 36px !important;
padding-right: 36px !important;
}
.site-header {
padding-left: 36px !important;
padding-right: 36px !important;
}
footer {
padding-left: 36px !important;
padding-right: 36px !important;
}
}
@media (min-width:1101px) and (max-width:1800px) {
.section {
padding-left: 64px !important;
padding-right: 64px !important;
}
.site-header {
padding-left: 64px !important;
padding-right: 64px !important;
}
footer {
padding-left: 64px !important;
padding-right: 64px !important;
}
.net-candlestick-svg-wrap {
left: min(-64px, calc((1440px - 100vw) / 2)) !important;
}
}
@media (min-width:1801px) {
.net-candlestick-svg-wrap {
left: calc((1440px - 100vw) / 2) !important;
}
}
@media (min-width:1101px) and (max-width:1800px) {
.site-header {
padding-left: 24px !important;
padding-right: 24px !important;
}
footer {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
@media (min-width:1101px) and (max-width:1800px) {
.section {
padding-left: 96px !important;
padding-right: 96px !important;
}
.net-candlestick-svg-wrap {
left: min(-96px, calc((1440px - 100vw) / 2)) !important;
}
.site-header {
padding-left: 24px !important;
padding-right: 24px !important;
}
footer {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
@media (min-width:1101px) {
.section-grid > :first-child h2,
.section-heading-wide h2,
.net-case-heading h2,
.section-contact-form .contact-intro h2 {
transform: translateX(24px) !important;
}
}
.site-header {
border-bottom: none !important;
}
footer,
footer a,
footer p,
footer span,
footer nav,
footer .footer-name,
footer .footer-contact,
footer .footer-contact a,
footer .footer-contact span,
footer .footer-contact p,
footer .footer-menu,
footer .footer-menu a,
footer .footer-legal-links,
footer .footer-policy-link,
footer .footer-tagline,
footer .terminal-inline,
footer .terminal-inline__text,
footer .terminal-inline__cursor {
color: #ff6b57 !important;
}
.footer-logo-animated {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.footer-logo-animated .footer-logo-letter {
fill: transparent;
stroke: #FF6B57;
stroke-width: 1;
vector-effect: non-scaling-stroke;
stroke-linejoin: miter;
stroke-linecap: butt;
stroke-dasharray: none;
stroke-dashoffset: 0;
opacity: 1;
/* Animation timing and easing live in script.js. */
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.footer-logo-animated .footer-logo-letter {
transition: none !important;
fill: transparent !important;
stroke-dashoffset: 0 !important;
opacity: 1 !important;
}
}
.section-net-case .net-showcase-row {
max-width: 1440px;
width: 100%;
margin: 32px auto 0;
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 24px;
}
.section-net-case .net-showcase-card {
min-height: 360px;
position: relative;
overflow: hidden;
}
.section-net-case .net-showcase-card--logo {
background: #35565E;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .45s ease;
}
.section-net-case .net-showcase-logo {
display: block;
width: 68%;
height: auto;
max-width: 420px;
}
@media (max-width:900px) {
.section-net-case .net-showcase-row {
grid-template-columns: 1fr;
gap: 18px;
margin-top: 18px;
}
.section-net-case .net-showcase-card {
min-height: 280px;
}
.section-net-case .net-showcase-logo {
width: 72%;
}
}
.section-net-case .net-showcase-card {
min-height: 0 !important;
height: 100% !important;
aspect-ratio: auto !important;
}
.section-net-case .net-showcase-row {
align-items: stretch !important;
}
@media (min-width:901px) {
.section-net-case .net-showcase-card {
min-height: 320px !important;
}
}
@media (max-width:900px) {
.section-net-case .net-showcase-card {
min-height: 0 !important;
}
}
@media (min-width:901px) {
.section-net-case .net-showcase-card {
min-height: 300px !important;
}
}
.section-net-case .net-showcase-row {
max-width: 1440px !important;
width: 100% !important;
margin: 1px auto 0 !important;
display: grid !important;
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
gap: 1px !important;
align-items: stretch !important;
}
.section-net-case .net-showcase-card {
min-width: 0 !important;
min-height: 300px !important;
height: 300px !important;
}
@media (max-width:900px) {
.section-net-case .net-showcase-row {
grid-template-columns: 1fr !important;
gap: 1px !important;
}
.section-net-case .net-showcase-card {
min-height: 240px !important;
height: 240px !important;
}
}
.section-net-case .net-showcase-logo.is-square {
width: 34% !important;
max-width: 210px !important;
}
@media (max-width:900px) {
.section-net-case .net-showcase-logo.is-square {
width: 36% !important;
max-width: 180px !important;
}
}
.section-net-case .net-showcase-card--logo {
position: relative !important;
}
.section-net-case .net-showcase-label {
position: absolute !important;
top: 28px !important;
left: 28px !important;
margin: 0 !important;
z-index: 2 !important;
color: #fff;
transition: color .45s ease;
}
.section-net-case .net-showcase-card--candlesticks,
.section-net-case .net-showcase-card--photo {
position: relative !important;
overflow: hidden !important;
}
.section-net-case .net-showcase-card--candlesticks {
background: #fff;
transition: background-color .55s ease;
}
.section-net-case .net-candlestick-card-label {
color: #2D333A;
transition: color .55s ease;
}
.section-net-case .net-showcase-card--photo {
background: #35565E;
}
.section-net-case .net-photo-card-label {
color: #fff !important;
z-index: 4 !important;
}
.section-net-case .net-photo-overlay-label {
position: absolute;
left: 28px;
bottom: 28px;
margin: 0;
z-index: 4;
color: #fff;
pointer-events: none;
}
@media (max-width:900px) {
.section-net-case .net-photo-overlay-label {
left: 20px;
bottom: 20px;
}
}
.section-net-case .net-showcase-card--candlesticks {
transition: background-color 1800ms cubic-bezier(.22,.72,.22,1) !important;
}
.section-net-case .net-mini-stage,
.section-net-case .net-mini-photo-stage {
position: relative !important;
overflow: hidden !important;
isolation: isolate;
}
.section-net-case .net-mini-bg,
.section-net-case .net-mini-photo,
.section-net-case .net-mini-photo-overlay {
position: absolute;
inset: 0;
}
.section-net-case .net-mini-bg {
z-index: 0;
}
.section-net-case .net-mini-photo {
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
}
.section-net-case .net-mini-photo-overlay {
z-index: 1;
background: #557370;
opacity: .35;
}
.section-net-case .net-showcase-label,
.section-net-case .net-photo-overlay-label {
z-index: 5 !important;
}
.section-net-case .net-mini-lockup {
position: absolute;
left: 50%;
top: 50%;
width: 46%;
aspect-ratio: 381.21 / 357.38;
transform: translate(-50%,-50%);
z-index: 3;
pointer-events: none;
}
.section-net-case .net-mini-cols {
position: absolute;
inset: 0;
}
.section-net-case .net-mini-col {
position: absolute;
width: 12.5%;
top: 0;
height: 0;
will-change: top,height;
}
.section-net-case .net-mini-col i {
position: absolute;
inset: 0;
display: block;
will-change: opacity,background;
}
.section-net-case .net-photo-overlay-label {
position: absolute;
left: 28px;
bottom: 28px;
margin: 0;
color: #fff !important;
}
@media (max-width:900px) {
.section-net-case .net-mini-lockup {
width: 54%;
}
.section-net-case .net-photo-overlay-label {
left: 20px;
bottom: 20px;
}
}
.section-net-case .net-reasons,
.section-net-case .net-showcase-row {
background: #DA6151 !important;
border: 1px solid #DA6151 !important;
gap: 1px !important;
box-sizing: border-box !important;
}
.section-net-case .net-showcase-row {
margin-top: -1px !important;
}
.section-net-case .net-reasons,
.section-net-case .net-showcase-row {
background: #0B0B0C !important;
border-color: #0B0B0C !important;
}
.section-net-case .net-reasons,
.section-net-case .net-showcase-row {
background: #2D333A !important;
border-color: #2D333A !important;
}
.section-net-case .net-showcase-card--photo .net-mini-lockup {
display: none !important;
}
.section-net-case .net-photo-corner-candlestick {
position: absolute;
top: 0;
right: 0;
width: 44%;
height: auto;
z-index: 3;
pointer-events: none;
}
@media (max-width:900px) {
.section-net-case .net-photo-corner-candlestick {
width: 48%;
}
}
.section-net-case .net-showcase-label--dark {
color: #2D333A !important;
}
.section-net-case .net-showcase-row--system .net-showcase-card {
position: relative;
}
.section-net-case .net-showcase-card--colors {
background: #FFFFFF;
color: #2D333A;
}
.section-net-case .net-color-board {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(12,minmax(0,1fr));
grid-template-rows: repeat(4,minmax(0,1fr));
}
.section-net-case .net-color-surface {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
padding: 12px 10px;
min-width: 0;
text-align: center;
}
.section-net-case .net-color-surface--span-all {
grid-column: span 12;
}
.section-net-case .net-color-surface:not(.net-color-surface--span-all) {
grid-column: span 4;
}
.section-net-case .net-color-surface--span-3 {
grid-column: span 3;
}
.section-net-case .net-color-surface--energreen { background:#35565E; }
.section-net-case .net-color-surface--greenery { background:#557370; }
.section-net-case .net-color-surface--forresthope { background:#8BA293; }
.section-net-case .net-color-surface--rainysommer { background:#A19C9D; }
.section-net-case .net-color-surface--blackish { background:#2D333A; }
.section-net-case .net-color-surface--bley { background:#4F5761; }
.section-net-case .net-color-surface--lightdays { background:#94A8AE; }
.section-net-case .net-color-surface--wetsand { background:#66635D; }
.section-net-case .net-color-surface--nordical { background:#A79F8F; }
.section-net-case .net-color-surface--bestcoast { background:#E0D9CF; }
.section-net-case .net-color-surface--light {
color: #FFFFFF;
}
.section-net-case .net-color-surface--dark {
color: #2D333A;
}
.section-net-case .net-color-surface-name {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 17px;
line-height: 1.05;
font-weight: 600;
}
.section-net-case .net-color-surface-role {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .9;
}
.section-net-case .net-showcase-card--type {
background: #E0D9CF;
color: #2D333A;
}
.section-net-case .net-type-card {
position: absolute;
inset: 72px 28px 28px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
@media (max-width:900px) {
.section-net-case .net-type-card,
.section-net-case .net-placeholder-copy {
inset: auto;
padding: 0;
}
.section-net-case .net-color-board {
position: absolute;
inset: 0;
}
.section-net-case .net-color-surface {
padding: 10px 8px;
gap: 4px;
}
.section-net-case .net-color-surface-name {
font-size: 14px;
}
.section-net-case .net-color-surface-role {
font-size: 10px;
}
.section-net-case .net-color-chip {
width: 22px;
height: 22px;
flex-basis: 22px;
}
.section-net-case .net-color-name {
font-size: 14px;
}
.section-net-case .net-color-role {
font-size: 10px;
}
.section-net-case .net-type-card {
position: absolute;
top: 58px;
left: 20px;
right: 20px;
bottom: 20px;
}
}
.section-net-case .net-type-card--simple {
justify-content: center !important;
gap: 28px;
}
.section-net-case .net-type-specimen {
margin: 0;
}
.section-net-case .net-type-specimen-display {
margin: 0 0 6px;
font-family: "Barlow Condensed","Arial Narrow",sans-serif;
font-size: 46px;
line-height: 1;
font-weight: 700;
color: #2D333A;
text-wrap: balance;
}
.section-net-case .net-type-specimen-body {
margin: 0 0 6px;
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 28px;
line-height: 1.1;
font-weight: 300;
color: #2D333A;
}
.section-net-case .net-type-specimen-role {
margin: 0;
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: #557370;
}
@media (max-width:900px) {
.section-net-case .net-type-card--simple {
gap: 20px;
}
.section-net-case .net-type-specimen-display {
font-size: 38px;
}
.section-net-case .net-type-specimen-body {
font-size: 20px;
}
}
.section-net-case .net-showcase-card--accent-colors {
background: #D6D0C6;
color: #2D333A;
}
.section-net-case .net-accent-grid {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.section-net-case .net-accent-panel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
min-width: 0;
min-height: 0;
padding: 14px;
text-align: center;
}
.section-net-case .net-accent-panel--poppy {
background: #DA6151;
color: #FFFFFF;
}
.section-net-case .net-accent-panel--sunflower {
background: #EDE184;
color: #2D333A;
}
.section-net-case .net-accent-panel--bluey {
background: #90B5E1;
color: #2D333A;
}
.section-net-case .net-accent-panel--softpink {
background: #DCB1D3;
color: #2D333A;
}
.section-net-case .net-accent-panel-role {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .85;
}
.section-net-case .net-accent-panel-name {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 17px;
line-height: .95;
font-weight: 600;
letter-spacing: .01em;
}
@media (max-width:900px) {
.section-net-case .net-accent-grid {
inset: 0;
}
.section-net-case .net-accent-panel {
padding: 12px;
gap: 4px;
}
.section-net-case .net-accent-panel-role {
font-size: 10px;
}
.section-net-case .net-accent-panel-name {
font-size: 14px;
}
}
@media (max-width:900px) {
.section-net-case .net-reason {
min-height: 320px !important;
height: auto !important;
}
.section-net-case .net-showcase-card {
min-height: 360px !important;
height: 360px !important;
}
}
.site-header .nav a:hover,
.site-header .nav a:focus-visible,
body.menu-open .nav a:hover,
body.menu-open .nav a:focus-visible {
text-decoration: none !important;
}
footer .footer-menu a,
footer .footer-policy-link {
text-decoration: none !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
}
footer .footer-menu a:hover,
footer .footer-menu a:focus-visible,
footer .footer-policy-link:hover,
footer .footer-policy-link:focus-visible {
text-decoration: underline !important;
text-underline-offset: 3px !important;
text-decoration-thickness: 1px !important;
}
/* v188 — richer typography card hierarchy */
.section-net-case .net-type-specimen-subhead{
margin:0;
font-family:"Barlow Condensed","Arial Narrow",sans-serif;
font-size:20px;
line-height:1.1;
font-weight:600;
color:#557370;
text-wrap:balance;
}
.section-net-case .net-type-specimen-copy{
margin:0 0 7px;
max-width:28ch;
font-family:"Barlow",system-ui,-apple-system,sans-serif;
font-size:16px;
line-height:1.35;
font-weight:300;
color:#2D333A;
text-wrap:pretty;
}
.section-net-case .net-type-specimen-weights{
margin:0;
max-width:32ch;
font-family:"Barlow",system-ui,-apple-system,sans-serif;
font-size:11px;
line-height:1.25;
font-weight:500;
color:#557370;
text-transform:none;
letter-spacing:0;
}
@media(max-width:900px){
.section-net-case .net-type-specimen-subhead{
font-size:18px;
}
.section-net-case .net-type-specimen-copy{
font-size:15px;
}
.section-net-case .net-type-specimen-weights{
font-size:10px;
}
}
/* v189 — keep Barlow supporting lines on one line */
.section-net-case .net-type-specimen-copy,
.section-net-case .net-type-specimen-weights{
max-width:none!important;
white-space:nowrap;
}
@media(max-width:900px){
.section-net-case .net-type-specimen-copy,
.section-net-case .net-type-specimen-weights{
white-space:nowrap;
}
}
.section-net-case .net-showcase-row--extras .net-showcase-card {
position: relative;
}
.section-net-case .net-showcase-card--gradients {
background: #FFFFFF;
overflow: hidden;
}
.section-net-case .net-gradient-board {
position: absolute;
inset: 0;
overflow: hidden;
color: #FFFFFF;
transition: color .8s ease;
}
.section-net-case .net-gradient-board.is-dark {
color: #2D333A;
}
.section-net-case .net-gradient-stage {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: opacity 1.15s ease;
}
.section-net-case .net-gradient-stage--current {
opacity: 1;
}
.section-net-case .net-gradient-stage--next {
opacity: 0;
}
.section-net-case .net-gradient-copy {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
padding: 28px;
pointer-events: none;
}
.section-net-case .net-gradient-board .net-showcase-label {
position: absolute;
top: 28px;
left: 28px;
z-index: 2;
color: inherit;
}
.section-net-case .net-gradient-panel-name {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 17px;
line-height: 1.05;
font-weight: 600;
letter-spacing: .01em;
color: inherit;
}
.section-net-case .net-gradient-panel-stops {
font-family: "Barlow",system-ui,-apple-system,sans-serif;
font-size: 10px;
line-height: 1;
font-weight: 600;
letter-spacing: .06em;
color: inherit;
opacity: .92;
}
@media (max-width:900px) {
.section-net-case .net-gradient-board .net-showcase-label {
top: 20px;
left: 20px;
}
.section-net-case .net-gradient-copy {
padding: 20px;
}
.section-net-case .net-gradient-panel-name {
font-size: 14px;
}
.section-net-case .net-gradient-panel-stops {
font-size: 10px;
}
}
.section-net-case .net-showcase-card--placeholder-a {
background: #A79F8F;
}
.section-net-case .net-showcase-card--placeholder-b {
background: #94A8AE;
}
@media (max-width:900px) {
.section-net-case .net-gradient-panel {
padding: 10px 8px;
gap: 4px;
}
.section-net-case .net-gradient-panel-name {
font-size: 14px;
}
.section-net-case .net-gradient-panel-stops {
font-size: 9px;
}
}
/* v197 — slideshow card for NET example slides */
.section-net-case .net-showcase-card--slides {
background: #FFFFFF;
}
.section-net-case .net-slide-carousel {
position: absolute;
inset: 0;
overflow: hidden;
background: #FFFFFF;
}
.section-net-case .net-slide-track {
display: flex;
height: 100%;
width: 600%;
animation: net-slide-track-loop 26s infinite;
will-change: transform;
}
.section-net-case .net-slide-frame {
flex: 0 0 calc(100% / 6);
width: calc(100% / 6);
height: 100%;
margin: 0;
padding: 24px;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.section-net-case .net-slide-frame img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
box-shadow: 0 6px 18px rgba(45,51,58,0.12);
}
@keyframes net-slide-track-loop {
0%, 14% { transform: translateX(0); }
18%, 32% { transform: translateX(-16.6666667%); }
36%, 50% { transform: translateX(-33.3333334%); }
54%, 68% { transform: translateX(-50%); }
72%, 86% { transform: translateX(-66.6666667%); }
90%, 100% { transform: translateX(-83.3333334%); }
}
@media (max-width:900px) {
.section-net-case .net-slide-frame {
padding: 18px;
}
.section-net-case .net-slide-frame img {
box-shadow: 0 5px 14px rgba(45,51,58,0.12);
}
}
/* v201 — embedded NET event landing in final case card */
.section-net-case .net-showcase-card--event-landing {
background:#FFFFFF;
position:relative;
overflow:hidden;
}
.section-net-case .net-showcase-card--event-landing > div {
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
aspect-ratio:auto !important;
}
.section-net-case .net-showcase-card--event-landing iframe {
display:block;
border:0 !important;
}
/* v203 — Event landing preview: preserve its 1280×760 viewport and scale the whole page to card width */
.section-net-case .net-showcase-card--event-landing{
position:relative;
overflow:hidden;
background:#FFFFFF;
}
.section-net-case .net-event-preview{
position:absolute;
inset:0;
overflow:hidden;
background:#FFFFFF;
}
.section-net-case .net-event-preview-frame{
position:absolute;
top:0;
left:0;
width:1280px !important;
border:0;
background:#FFFFFF;
transform-origin:0 0;
pointer-events:none;
}
/* v206 — separate the six FUNDAMENT benefits from the NET Design System examples */
.section-net-case .net-design-system-heading{
margin: 96px 0 44px;
}
.section-net-case .net-design-system-heading h2{
margin-top: 0;
margin-bottom: 0;
max-width: 980px;
}
.section-net-case .net-showcase-row--first{
margin-top: 0 !important;
}
@media(max-width:900px){
.section-net-case .net-design-system-heading{
margin: 64px 0 32px;
}
}
/* v207 — centered Design System intro + presentation eyebrow */
.section-net-case .net-design-system-heading{
margin: 88px auto 38px;
text-align: center;
}
.section-net-case .net-design-system-heading h2{
max-width: 760px;
margin: 0 auto;
font-size: clamp(24px, 2.1vw, 32px);
line-height: 1.12;
text-align: center;
text-wrap: balance;
}
.section-net-case .net-showcase-card--slides .net-showcase-label{
z-index: 5;
}
.section-net-case .net-showcase-card--slides .net-slide-carousel{
inset: 54px 0 0;
}
.section-net-case .net-showcase-card--slides .net-slide-frame{
padding: 0 24px 24px;
align-items: flex-end;
}
@media(max-width:900px){
.section-net-case .net-design-system-heading{
margin: 60px auto 28px;
}
.section-net-case .net-design-system-heading h2{
max-width: 520px;
font-size: 22px;
}
.section-net-case .net-showcase-card--slides .net-slide-carousel{
inset: 50px 0 0;
}
.section-net-case .net-showcase-card--slides .net-slide-frame{
padding: 0 18px 18px;
}
}
/* v208 — stronger shadows and LinkedIn template card */
.section-net-case .net-slide-frame img{
box-shadow: 0 14px 34px rgba(45,51,58,0.22), 0 4px 10px rgba(45,51,58,0.14);
}
.section-net-case .net-showcase-row--social .net-showcase-card{
position: relative;
}
.section-net-case .net-showcase-card--linkedin-templates{
background: #FFFFFF;
}
.section-net-case .net-linkedin-carousel{
position:absolute;
inset:54px 0 0;
overflow:hidden;
background:#FFFFFF;
}
.section-net-case .net-linkedin-track{
display:flex;
align-items:flex-end;
gap:18px;
height:100%;
width:max-content;
will-change:transform;
}
.section-net-case .net-linkedin-frame{
flex:0 0 auto;
width:auto;
height:auto;
margin:0 0 24px;
padding:0;
display:flex;
align-items:flex-end;
justify-content:center;
box-sizing:border-box;
}
.section-net-case .net-linkedin-frame img{
display:block;
width:100%;
height:100%;
object-fit:contain;
box-shadow:0 14px 34px rgba(45,51,58,0.22),0 4px 10px rgba(45,51,58,0.14);
}
.section-net-case .net-showcase-row--social .net-showcase-card--placeholder-a{
background: #E0D9CF;
}
.section-net-case .net-showcase-row--social .net-showcase-card--placeholder-b{
background: #94A8AE;
}
@media(max-width:900px){
.section-net-case .net-slide-frame img,
.section-net-case .net-linkedin-frame img{
box-shadow: 0 10px 24px rgba(45,51,58,0.20), 0 3px 8px rgba(45,51,58,0.12);
}
.section-net-case .net-linkedin-carousel{
inset: 50px 0 0;
}
.section-net-case .net-linkedin-track{
gap:14px;
}
.section-net-case .net-linkedin-frame{
margin-bottom:18px;
}
}
/* v214 — full-width LinkedIn templates showcase */
.section-net-case .net-showcase-row--linkedin-wide{
display:block;
width:100vw;
max-width:none;
margin:32px calc(50% - 50vw) 0;
}
.section-net-case .net-showcase-card--linkedin-templates-wide{
width:100%;
height:40vh !important;
min-height:320px !important;
max-height:520px;
background:#FFFFFF;
}
.section-net-case .net-showcase-card--linkedin-templates-wide .net-linkedin-carousel{
inset:54px 0 0;
}
.section-net-case .net-showcase-card--linkedin-templates-wide .net-linkedin-frame{
margin-bottom:24px;
}
@media(max-width:900px){
.section-net-case .net-showcase-row--linkedin-wide{
margin:18px calc(50% - 50vw) 0;
}
.section-net-case .net-showcase-card--linkedin-templates-wide{
height:40vh !important;
min-height:260px !important;
}
.section-net-case .net-showcase-card--linkedin-templates-wide .net-linkedin-carousel{
inset:50px 0 0;
}
.section-net-case .net-showcase-card--linkedin-templates-wide .net-linkedin-frame{
margin-bottom:18px;
}
}
/* v215 — LinkedIn templates as a true full-bleed showcase, not a card */
.section-net-case .net-showcase-row--linkedin-wide,
.section-net-case .net-showcase-card--linkedin-templates-wide{
display:none !important;
}
.section-net-case .net-linkedin-wide-showcase{
position:relative;
width:100vw;
height:40vh;
min-height:320px;
max-height:520px;
margin:32px calc(50% - 50vw) 0;
overflow:hidden;
background:transparent;
}
.section-net-case .net-linkedin-wide-label{
position:absolute;
top:28px;
left:max(28px, calc((100vw - 1440px) / 2 + 28px));
z-index:5;
color:#2D333A;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-carousel{
position:absolute;
inset:0;
overflow:hidden;
background:transparent;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
height:100%;
align-items:center;
gap:22px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame{
margin:0;
padding:68px 0 18px;
align-items:center;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
max-height:100%;
width:auto;
height:auto;
}
@media(max-width:900px){
.section-net-case .net-linkedin-wide-showcase{
height:40vh;
min-height:260px;
margin-top:18px;
}
.section-net-case .net-linkedin-wide-label{
top:20px;
left:20px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame{
padding:58px 0 14px;
}
}
/* v218 — never crop LinkedIn artwork in the full-width strip */
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame{
overflow:visible;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
display:block;
width:100%;
height:100%;
max-width:100%;
max-height:100%;
object-fit:contain;
}
/* v219 — full-width LinkedIn strip: correct proportions, same height, variable widths, equal gaps */
.section-net-case .net-linkedin-wide-showcase{
min-height: 320px;
}
.section-net-case .net-linkedin-wide-label{
top: 16px;
left: max(28px, calc((100vw - 1440px) / 2 + 28px));
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-carousel{
inset: 0;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
align-items: flex-end;
gap: 22px;
padding: 50px 0 12px;
box-sizing: border-box;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame{
margin: 0;
padding: 0;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: visible;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
box-shadow: 0 12px 28px rgba(45,51,58,0.18);
}
@media(max-width:900px){
.section-net-case .net-linkedin-wide-label{
top: 14px;
left: 20px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
gap: 18px;
padding: 44px 0 10px;
}
}
/* v221 — three-card LinkedIn row removed from HTML; full-width LinkedIn strip remains. */
.section-net-case .net-linkedin-wide-showcase{
overflow:hidden;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
align-items:flex-end;
gap:22px;
padding:56px 0 38px;
box-sizing:border-box;
will-change:transform;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame{
margin:0;
padding:0;
align-items:flex-end;
justify-content:center;
overflow:visible;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
box-shadow:0 24px 48px rgba(45,51,58,0.34), 0 10px 20px rgba(45,51,58,0.18);
}
@media(max-width:900px){
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
gap:18px;
padding:48px 0 32px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
box-shadow:0 18px 36px rgba(45,51,58,0.30), 0 8px 16px rgba(45,51,58,0.16);
}
}
/* v222 — LinkedIn strip 25% larger and with more air below so the shadow is not clipped */
.section-net-case .net-linkedin-wide-showcase{
height:50vh;
min-height:400px;
max-height:650px;
overflow-x:hidden;
overflow-y:hidden;
}
.section-net-case .net-linkedin-wide-label{
top:20px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
gap:22px;
padding:56px 0 56px;
box-sizing:border-box;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
box-shadow:0 14px 28px rgba(45,51,58,0.36), 0 6px 12px rgba(45,51,58,0.20);
}
@media(max-width:900px){
.section-net-case .net-linkedin-wide-showcase{
height:50vh;
min-height:320px;
max-height:none;
}
.section-net-case .net-linkedin-wide-label{
top:18px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-track{
gap:18px;
padding:48px 0 44px;
}
.section-net-case .net-linkedin-wide-showcase .net-linkedin-frame img{
box-shadow:0 11px 22px rgba(45,51,58,0.32), 0 5px 10px rgba(45,51,58,0.18);
}
}
/* v237 — cleaned NET Design System case layout */
.section-net-case .net-showcase-row--visual-top,
.section-net-case .net-showcase-row--palette-band,
.section-net-case .net-showcase-row--type-gradient{
max-width:1440px !important;
width:100% !important;
margin:0 auto !important;
padding:0 !important;
gap:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
box-sizing:border-box;
}
/* Row 1: logo / candlesticks / images */
.section-net-case .net-showcase-row--visual-top{
display:flex !important;
align-items:stretch !important;
}
.section-net-case .net-showcase-row--visual-top > .net-showcase-card{
flex:1 1 0 !important;
width:33.333333% !important;
min-width:0 !important;
height:300px !important;
min-height:300px !important;
margin:0 !important;
padding:0;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
/* Row 2: one uninterrupted 15-colour band */
.section-net-case .net-showcase-row--palette-band{
display:block !important;
height:100px !important;
}
.section-net-case .net-showcase-row--palette-band > .net-palette-grid--card{
display:flex !important;
width:100% !important;
height:100px !important;
min-height:100px !important;
max-width:none !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
background:transparent !important;
}
.section-net-case .net-showcase-row--palette-band .net-palette-card{
flex:1 1 0 !important;
width:6.666667% !important;
min-width:0 !important;
height:100px !important;
min-height:100px !important;
margin:0 !important;
padding:7px 4px !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
gap:2px !important;
box-sizing:border-box !important;
font-family:"Barlow",system-ui,-apple-system,sans-serif;
}
.section-net-case .net-showcase-row--palette-band .net-palette-name{
display:block;
width:100%;
margin:0;
font-size:11px;
line-height:1.02;
font-weight:600;
text-align:center;
}
.section-net-case .net-showcase-row--palette-band .net-palette-role,
.section-net-case .net-showcase-row--palette-band .net-palette-hex{
display:block;
width:100%;
margin:0;
font-size:8px;
line-height:1.02;
font-weight:500;
text-align:center;
}
.section-net-case .net-showcase-row--palette-band .net-palette-hex{
letter-spacing:.01em;
text-transform:uppercase;
}
.section-net-case .net-palette-card--energreen{background:#35565E;color:#FFFFFF;}
.section-net-case .net-palette-card--white{background:#FFFFFF;color:#2D333A;}
.section-net-case .net-palette-card--greenery{background:#557370;color:#FFFFFF;}
.section-net-case .net-palette-card--forresthope{background:#8BA293;color:#2D333A;}
.section-net-case .net-palette-card--rainysommer{background:#A19C9D;color:#2D333A;}
.section-net-case .net-palette-card--blackish{background:#2D333A;color:#FFFFFF;}
.section-net-case .net-palette-card--bley{background:#4F5761;color:#FFFFFF;}
.section-net-case .net-palette-card--lightdays{background:#94A8AE;color:#2D333A;}
.section-net-case .net-palette-card--wetsand{background:#66635D;color:#FFFFFF;}
.section-net-case .net-palette-card--nordical{background:#A79F8F;color:#2D333A;}
.section-net-case .net-palette-card--bestcoast{background:#E0D9CF;color:#2D333A;}
.section-net-case .net-palette-card--poppy{background:#DA6151;color:#FFFFFF;}
.section-net-case .net-palette-card--sunflower{background:#EDE184;color:#2D333A;}
.section-net-case .net-palette-card--bluey{background:#90B5E1;color:#2D333A;}
.section-net-case .net-palette-card--softpink{background:#DCB1D3;color:#2D333A;}
/* Row 3: typography 2/3 + gradients 1/3 */
.section-net-case .net-showcase-row--type-gradient{
display:flex !important;
align-items:stretch !important;
margin-bottom:32px !important;
}
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card{
height:300px !important;
min-height:300px !important;
min-width:0 !important;
margin:0 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card--type{
flex:2 1 0 !important;
width:66.666667% !important;
}
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card--gradients{
flex:1 1 0 !important;
width:33.333333% !important;
}
@media(max-width:900px){
.section-net-case .net-showcase-row--visual-top,
.section-net-case .net-showcase-row--type-gradient{
display:block !important;
}
.section-net-case .net-showcase-row--visual-top > .net-showcase-card,
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card--type,
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card--gradients{
width:100% !important;
height:240px !important;
min-height:240px !important;
}
.section-net-case .net-showcase-row--palette-band{
height:auto !important;
}
.section-net-case .net-showcase-row--palette-band > .net-palette-grid--card{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
height:auto !important;
min-height:0 !important;
}
.section-net-case .net-showcase-row--palette-band .net-palette-card{
width:auto !important;
height:72px !important;
min-height:72px !important;
}
.section-net-case .net-showcase-row--type-gradient{
margin-bottom:18px !important;
}
}
/* v238 — typography card white */
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card--type{
background:#FFFFFF !important;
}
/* v239 — same shadow as the LinkedIn carousel on the NET Design System cards */
.section-net-case .net-showcase-row--visual-top > .net-showcase-card,
.section-net-case .net-showcase-row--palette-band > .net-palette-grid--card,
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card{
position:relative;
box-shadow:0 14px 28px rgba(45,51,58,0.36), 0 6px 12px rgba(45,51,58,0.20) !important;
}
@media(max-width:900px){
.section-net-case .net-showcase-row--visual-top > .net-showcase-card,
.section-net-case .net-showcase-row--palette-band > .net-palette-grid--card,
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card{
box-shadow:0 11px 22px rgba(45,51,58,0.32), 0 5px 10px rgba(45,51,58,0.18) !important;
}
}
/* v240 — one shadow around the complete NET Design System group */
.section-net-case .net-showcase-row--visual-top > .net-showcase-card,
.section-net-case .net-showcase-row--palette-band > .net-palette-grid--card,
.section-net-case .net-showcase-row--type-gradient > .net-showcase-card{
box-shadow:none !important;
}
.section-net-case .net-design-system-group{
max-width:1440px;
width:100%;
margin:0 auto 32px;
padding:0;
position:relative;
box-shadow:0 14px 28px rgba(45,51,58,0.36), 0 6px 12px rgba(45,51,58,0.20);
}
.section-net-case .net-design-system-group .net-showcase-row{
max-width:none !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}
.section-net-case .net-design-system-group .net-showcase-row--type-gradient{
margin-bottom:0 !important;
}
@media(max-width:900px){
.section-net-case .net-design-system-group{
margin-bottom:18px;
box-shadow:0 11px 22px rgba(45,51,58,0.32), 0 5px 10px rgba(45,51,58,0.18);
}
}
/* v241 — smoother colour fade in logo card */
.section-net-case .net-showcase-card--logo{
transition: background-color 1.4s cubic-bezier(.45,0,.55,1) !important;
will-change: background-color;
}
/* v242 — real crossfade in logo card + larger Design System heading */
.section-net-case .net-showcase-card--logo{
background:transparent !important;
transition:none !important;
isolation:isolate;
}
.section-net-case .net-logo-bg{
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0;
will-change:opacity;
backface-visibility:hidden;
transform:translateZ(0);
}
.section-net-case .net-showcase-card--logo .net-showcase-label,
.section-net-case .net-showcase-card--logo .net-showcase-logo{
position:relative;
z-index:2;
}
.section-net-case .net-design-system-heading h2{
max-width:980px;
font-size:clamp(32px, 3.2vw, 50px);
line-height:1.06;
}
@media(max-width:900px){
.section-net-case .net-design-system-heading h2{
max-width:620px;
font-size:clamp(28px, 7vw, 38px);
}
}
/* v244 — clean contiguous Design System group: no internal lines, one group shadow */
.section-net-case .net-design-system-group{
max-width:1440px !important;
width:100% !important;
margin:0 auto 32px !important;
padding:0 !important;
position:relative !important;
overflow:hidden !important;
border:0 !important;
outline:0 !important;
box-shadow:0 14px 28px rgba(45,51,58,0.36), 0 6px 12px rgba(45,51,58,0.20) !important;
background:transparent !important;
}
/* remove all card-level lines and shadows inside the grouped design preview */
.section-net-case .net-design-system-group *,
.section-net-case .net-design-system-group *::before,
.section-net-case .net-design-system-group *::after{
border-color:transparent;
}
.section-net-case .net-design-system-group .net-showcase-card,
.section-net-case .net-design-system-group .net-palette-grid--card,
.section-net-case .net-design-system-group .net-palette-card,
.section-net-case .net-design-system-group .net-gradient-board{
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
/* Row 1: exact three equal columns, no fractional flex seams */
.section-net-case .net-design-system-group .net-showcase-row--visual-top{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
height:300px !important;
background:transparent !important;
}
.section-net-case .net-design-system-group .net-showcase-row--visual-top > .net-showcase-card{
width:auto !important;
min-width:0 !important;
height:300px !important;
min-height:300px !important;
margin:0 !important;
padding:0 !important;
}
/* Row 2: colour band touches row 1 and row 3 directly */
.section-net-case .net-design-system-group .net-showcase-row--palette-band{
display:block !important;
height:100px !important;
margin:0 !important;
padding:0 !important;
gap:0 !important;
background:transparent !important;
}
.section-net-case .net-design-system-group .net-showcase-row--palette-band > .net-palette-grid--card{
display:grid !important;
grid-template-columns:repeat(15,minmax(0,1fr)) !important;
gap:0 !important;
width:100% !important;
height:100px !important;
margin:0 !important;
padding:0 !important;
background:transparent !important;
}
.section-net-case .net-design-system-group .net-showcase-row--palette-band .net-palette-card{
width:auto !important;
min-width:0 !important;
height:100px !important;
margin:0 !important;
}
/* Row 3: 2/3 typography + 1/3 gradient, no seam/gap */
.section-net-case .net-design-system-group .net-showcase-row--type-gradient{
display:grid !important;
grid-template-columns:2fr 1fr !important;
gap:0 !important;
margin:0 !important;
padding:0 !important;
height:300px !important;
background:transparent !important;
}
.section-net-case .net-design-system-group .net-showcase-row--type-gradient > .net-showcase-card{
width:auto !important;
min-width:0 !important;
height:300px !important;
min-height:300px !important;
margin:0 !important;
padding:0 !important;
}
@media(max-width:900px){
.section-net-case .net-design-system-group{
margin-bottom:18px !important;
box-shadow:0 11px 22px rgba(45,51,58,0.32), 0 5px 10px rgba(45,51,58,0.18) !important;
}
.section-net-case .net-design-system-group .net-showcase-row--visual-top{
display:block !important;
height:auto !important;
}
.section-net-case .net-design-system-group .net-showcase-row--visual-top > .net-showcase-card{
width:100% !important;
height:240px !important;
min-height:240px !important;
}
.section-net-case .net-design-system-group .net-showcase-row--palette-band{
height:auto !important;
}
.section-net-case .net-design-system-group .net-showcase-row--palette-band > .net-palette-grid--card{
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
height:auto !important;
}
.section-net-case .net-design-system-group .net-showcase-row--palette-band .net-palette-card{
height:72px !important;
min-height:72px !important;
}
.section-net-case .net-design-system-group .net-showcase-row--type-gradient{
display:block !important;
height:auto !important;
}
.section-net-case .net-design-system-group .net-showcase-row--type-gradient > .net-showcase-card{
width:100% !important;
height:240px !important;
min-height:240px !important;
}
}
/* v245 — benefit cards cleaned up as one unified block */
.section-net-case .net-reasons{
display:grid !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;
margin-top:96px !important;
padding:0 !important;
border:0 !important;
outline:0 !important;
background:transparent !important;
overflow:hidden !important;
box-shadow:0 14px 34px rgba(45,51,58,0.22), 0 4px 10px rgba(45,51,58,0.14) !important;
}
.section-net-case .net-reason{
margin:0 !important;
border:0 !important;
outline:0 !important;
box-shadow:none !important;
}
.section-net-case .net-reason + .net-reason{
margin-left:0 !important;
}
@media (max-width:900px){
.section-net-case .net-reasons{
grid-template-columns:1fr !important;
gap:0 !important;
margin-top:64px !important;
box-shadow:0 10px 24px rgba(45,51,58,0.20), 0 3px 8px rgba(45,51,58,0.12) !important;
}
.section-net-case .net-reason{
min-height:240px !important;
}
}
/* v246 — lift typography content slightly, keep eyebrow in place */
.section-net-case .net-showcase-card--type .net-type-card{
inset: 56px 28px 28px !important;
}
@media (max-width:900px){
.section-net-case .net-showcase-card--type .net-type-card{
padding-top: 0 !important;
}
}
/* =========================================================
v247 — FUNDAMENT simplified landing page + scroll story
========================================================= */
.landing-hero{
min-height:100svh;
display:flex;
align-items:flex-end;
}
.landing-hero .hero-editorial{
width:100%;
}
.landing-hero .hero-heading h1{
max-width:1500px;
}
.fundament-story{
position:relative;
height:560vh;
background:#FF6B57;
color:#0B0B0C;
}
.fundament-story__sticky{
position:sticky;
top:0;
height:100svh;
min-height:680px;
display:grid;
grid-template-columns:minmax(0,2fr) minmax(0,3fr);
gap:clamp(32px,5vw,96px);
align-items:center;
padding:104px 96px 72px;
overflow:hidden;
}
.fundament-story__copy{
position:relative;
height:min(58vh,520px);
}
.fundament-story__scene{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
opacity:0;
transform:translateY(28px);
pointer-events:none;
transition:opacity .22s linear, transform .32s cubic-bezier(.2,.75,.2,1);
}
.fundament-story__scene.is-active{
opacity:1;
transform:translateY(0);
}
.story-kicker{
font-family:"JetBrains Mono",monospace;
font-size:12px;
line-height:1;
font-weight:700;
letter-spacing:.12em;
margin-bottom:28px;
}
.fundament-story__scene h2{
max-width:670px;
margin:0;
font:600 clamp(48px,6vw,96px)/.95 Manrope,Inter,sans-serif;
letter-spacing:-.055em;
}
.fundament-story__scene p{
max-width:560px;
margin:32px 0 0;
font-family:"JetBrains Mono",monospace;
font-size:clamp(15px,1.15vw,19px);
line-height:1.48;
font-weight:200;
}
.fundament-story__visual{
position:relative;
width:100%;
height:min(72vh,720px);
}
.story-board{
position:relative;
width:100%;
height:100%;
min-height:520px;
}
.story-layer{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(24px) scale(.96);
pointer-events:none;
will-change:opacity,transform;
}
.story-layer--identity{
opacity:1;
transform:none;
}
.identity-grid{
width:min(92%,760px);
aspect-ratio:1.18/1;
display:grid;
grid-template-columns:1.08fr .92fr;
grid-template-rows:1fr 1fr;
box-shadow:0 24px 58px rgba(11,11,12,.2),0 7px 18px rgba(11,11,12,.12);
}
.identity-card{
position:relative;
padding:22px;
overflow:hidden;
}
.identity-card>span,
.pdf-top span,
.output-card>span{
font-family:"JetBrains Mono",monospace;
font-size:10px;
font-weight:700;
letter-spacing:.12em;
}
.identity-card--logo{
background:#0B0B0C;
color:#E7E3DD;
display:flex;
flex-direction:column;
justify-content:space-between;
}
.identity-card--logo strong{
font:700 clamp(36px,4.2vw,70px)/.9 Manrope,Inter,sans-serif;
letter-spacing:-.06em;
}
.identity-card--color{
background:#E7E3DD;
color:#0B0B0C;
}
.identity-swatches{
position:absolute;
inset:auto 0 0;
height:62%;
display:grid;
grid-template-columns:repeat(4,1fr);
}
.identity-swatches i:nth-child(1){background:#FF6B57}
.identity-swatches i:nth-child(2){background:#0B0B0C}
.identity-swatches i:nth-child(3){background:#B8B0A6}
.identity-swatches i:nth-child(4){background:#FFFFFF}
.identity-card--type{
background:#FFFFFF;
color:#0B0B0C;
display:grid;
align-content:space-between;
}
.identity-card--type strong{
font:600 clamp(70px,9vw,130px)/.75 Manrope,Inter,sans-serif;
letter-spacing:-.09em;
}
.identity-card--type small{
font-family:"JetBrains Mono",monospace;
font-size:10px;
}
.identity-card--image{
background:#383838;
color:#FFFFFF;
}
.identity-image-mark{
position:absolute;
right:-8%;
bottom:-18%;
width:84%;
aspect-ratio:1;
border-radius:50%;
border:clamp(28px,4vw,54px) solid #FF6B57;
}
.pdf-sheet{
width:min(66%,520px);
aspect-ratio:.72/1;
background:#FFFFFF;
color:#0B0B0C;
padding:28px;
box-shadow:0 30px 70px rgba(11,11,12,.24),0 8px 20px rgba(11,11,12,.14);
display:flex;
flex-direction:column;
}
.pdf-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.pdf-top b{
display:grid;
place-items:center;
width:58px;
height:58px;
background:#FF6B57;
font:700 14px/1 "JetBrains Mono",monospace;
}
.pdf-logo{
margin-top:18%;
font:700 clamp(48px,5.5vw,84px)/.85 Manrope,Inter,sans-serif;
letter-spacing:-.065em;
}
.pdf-lines{
margin-top:auto;
display:grid;
gap:12px;
}
.pdf-lines i{
height:5px;
background:#0B0B0C;
opacity:.16;
}
.pdf-lines i:nth-child(2){width:82%}
.pdf-lines i:nth-child(3){width:92%}
.pdf-lines i:nth-child(4){width:68%}
.pdf-palette{
height:64px;
margin-top:28px;
display:grid;
grid-template-columns:repeat(4,1fr);
}
.pdf-palette i:nth-child(1){background:#FF6B57}
.pdf-palette i:nth-child(2){background:#0B0B0C}
.pdf-palette i:nth-child(3){background:#B8B0A6}
.pdf-palette i:nth-child(4){background:#E7E3DD}
.files-window{
width:min(90%,720px);
background:#0B0B0C;
color:#E7E3DD;
box-shadow:0 30px 70px rgba(11,11,12,.28),0 8px 20px rgba(11,11,12,.16);
}
.files-bar{
height:54px;
display:flex;
align-items:center;
gap:8px;
padding:0 18px;
border-bottom:1px solid rgba(231,227,221,.18);
}
.files-bar span{
width:9px;
height:9px;
border-radius:50%;
background:#E7E3DD;
opacity:.35;
}
.files-bar b{
margin-left:10px;
font:500 11px/1 "JetBrains Mono",monospace;
letter-spacing:.07em;
}
.file-row{
min-height:78px;
display:grid;
grid-template-columns:50px 1fr 1.35fr;
align-items:center;
gap:18px;
padding:0 22px;
border-bottom:1px solid rgba(231,227,221,.12);
font-family:"JetBrains Mono",monospace;
}
.file-row:last-child{border-bottom:0}
.file-row i{
font-style:normal;
font-size:9px;
font-weight:700;
letter-spacing:.08em;
opacity:.65;
}
.file-row span{
font-size:15px;
font-weight:700;
}
.file-row small{
font-size:11px;
opacity:.58;
}
.ai-shell{
width:min(84%,650px);
min-height:420px;
background:#E7E3DD;
color:#0B0B0C;
border:18px solid #0B0B0C;
box-shadow:0 30px 70px rgba(11,11,12,.25),0 8px 20px rgba(11,11,12,.14);
display:flex;
flex-direction:column;
}
.ai-shell__head{
min-height:110px;
display:flex;
justify-content:space-between;
align-items:flex-end;
padding:24px;
border-bottom:1px solid #0B0B0C;
}
.ai-shell__head span{
font:700 clamp(52px,7vw,98px)/.7 Manrope,Inter,sans-serif;
letter-spacing:-.08em;
}
.ai-shell__head small{
font:700 10px/1 "JetBrains Mono",monospace;
letter-spacing:.09em;
}
.ai-shell__terminal{
flex:1;
padding:34px 26px;
display:grid;
align-content:start;
gap:18px;
font:500 13px/1.3 "JetBrains Mono",monospace;
}
.ai-shell__terminal span{opacity:.55}
.ai-shell__terminal .ai-shell__ok{
margin-top:22px;
opacity:1;
color:#E85B49;
font-weight:700;
}
.story-layer--outputs{
display:block;
}
.output-card{
position:absolute;
width:42%;
aspect-ratio:1.28/1;
padding:18px;
box-shadow:0 18px 38px rgba(11,11,12,.18);
overflow:hidden;
}
.output-card--presentation{
left:4%;
top:5%;
background:#0B0B0C;
color:#FFFFFF;
transform:rotate(-3deg);
}
.output-card--presentation div{
position:absolute;
left:18px;
right:18px;
bottom:18px;
height:46%;
display:grid;
gap:7px;
}
.output-card--presentation i{background:#FF6B57}
.output-card--presentation i:nth-child(2){width:72%;background:#E7E3DD}
.output-card--presentation i:nth-child(3){width:52%;background:#B8B0A6}
.output-card--social{
right:2%;
top:14%;
background:#E7E3DD;
color:#0B0B0C;
transform:rotate(2deg);
}
.output-social-mark{
position:absolute;
right:18px;
bottom:10px;
font:700 clamp(70px,8vw,120px)/.8 Manrope,Inter,sans-serif;
letter-spacing:-.08em;
color:#FF6B57;
}
.output-card--campaign{
left:12%;
bottom:5%;
background:#FF6B57;
color:#0B0B0C;
transform:rotate(2deg);
}
.output-card--campaign strong{
position:absolute;
left:18px;
bottom:18px;
font:700 clamp(30px,3.5vw,58px)/.9 Manrope,Inter,sans-serif;
letter-spacing:-.06em;
}
.output-card--web{
right:8%;
bottom:1%;
background:#FFFFFF;
color:#0B0B0C;
transform:rotate(-2deg);
}
.output-web-lines{
position:absolute;
left:18px;
right:18px;
bottom:22px;
display:grid;
gap:9px;
}
.output-web-lines i{
height:9px;
background:#0B0B0C;
}
.output-web-lines i:nth-child(2){width:74%}
.output-web-lines i:nth-child(3){width:48%;background:#FF6B57}
.story-progress{
position:absolute;
left:0;
right:0;
bottom:0;
height:4px;
background:rgba(11,11,12,.14);
}
.story-progress span{
display:block;
height:100%;
width:0;
background:#0B0B0C;
transform-origin:left center;
}
.fundament-package{
position:relative;
}
.anchor-marker{
position:absolute;
top:0;
}
.fundament-package__grid{
max-width:1440px;
margin:84px auto 0;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:0;
box-shadow:0 14px 34px rgba(11,11,12,.14),0 4px 10px rgba(11,11,12,.08);
}
.package-card{
min-height:230px;
padding:26px;
background:#FFFFFF;
display:flex;
flex-direction:column;
border:0;
}
.package-card:nth-child(2){background:#E7E3DD}
.package-card:nth-child(3){background:#0B0B0C;color:#FFFFFF}
.package-card:nth-child(4){background:#B8B0A6}
.package-card:nth-child(5){background:#FF6B57}
.package-card .label{
margin-bottom:auto;
}
.package-card strong{
font:600 clamp(24px,2.1vw,34px)/1 Manrope,Inter,sans-serif;
letter-spacing:-.045em;
}
.package-card small{
margin-top:14px;
font:200 12px/1.45 "JetBrains Mono",monospace;
}
/* Case is now deliberately shorter: visual proof instead of a long explanation. */
.section-net-case .net-case-top{
margin-bottom:72px !important;
}
.section-net-case .net-case-copy p:not(.lead){
max-width:720px;
}
.section-net-case .net-design-system-heading{
margin-top:40px !important;
}
/* Smooth layer handling driven by JS. */
.fundament-story[data-scene="0"] .story-layer--identity,
.fundament-story[data-scene="1"] .story-layer--pdf,
.fundament-story[data-scene="2"] .story-layer--files,
.fundament-story[data-scene="3"] .story-layer--ai,
.fundament-story[data-scene="4"] .story-layer--outputs{
opacity:1;
transform:translateY(0) scale(1);
}
@media (max-width:1100px){
.fundament-story__sticky{
padding-left:48px;
padding-right:48px;
grid-template-columns:1fr 1.25fr;
}
.fundament-package__grid{
grid-template-columns:repeat(3,1fr);
}
.package-card:nth-child(4),
.package-card:nth-child(5){
min-height:190px;
}
}
@media (max-width:760px){
.landing-hero{
min-height:auto;
}
.fundament-story{
height:500vh;
}
.fundament-story__sticky{
min-height:620px;
grid-template-columns:1fr;
grid-template-rows:38% 62%;
gap:0;
padding:82px 24px 26px;
}
.fundament-story__copy{
height:100%;
}
.fundament-story__scene{
justify-content:flex-start;
padding-top:10px;
}
.story-kicker{
margin-bottom:14px;
}
.fundament-story__scene h2{
max-width:100%;
font-size:clamp(36px,10vw,54px);
}
.fundament-story__scene p{
margin-top:16px;
font-size:13px;
max-width:95%;
}
.fundament-story__visual{
height:100%;
min-height:0;
}
.story-board{
min-height:0;
}
.identity-grid{
width:92%;
}
.identity-card{
padding:14px;
}
.identity-card>span,
.pdf-top span,
.output-card>span{
font-size:7px;
}
.files-window{
width:94%;
}
.file-row{
min-height:56px;
grid-template-columns:34px 1fr;
gap:8px;
padding:0 14px;
}
.file-row small{
display:none;
}
.ai-shell{
width:90%;
min-height:300px;
border-width:10px;
}
.ai-shell__head{
min-height:78px;
padding:16px;
}
.ai-shell__terminal{
padding:22px 18px;
gap:12px;
font-size:10px;
}
.output-card{
width:46%;
padding:12px;
}
.fundament-package__grid{
margin-top:48px;
grid-template-columns:1fr;
}
.package-card{
min-height:150px;
}
}
@media (prefers-reduced-motion:reduce){
.fundament-story{
height:auto;
}
.fundament-story__sticky{
position:relative;
height:auto;
min-height:0;
display:block;
}
.fundament-story__copy{
height:auto;
}
.fundament-story__scene{
position:relative;
opacity:1 !important;
transform:none !important;
padding:64px 0;
}
.fundament-story__visual{
display:none;
}
}
/* =========================================================
v267 — FUNDAMENT four-point sequence
Isolated component. No hero classes, no legacy scroll CSS.
========================================================= */
.fundament-points{
background:#FF6B57;
color:#0B0B0C;
}
.fundament-point{
min-height:100svh;
display:flex;
align-items:center;
padding:104px 96px 72px;
}
.fundament-point__layout{
width:100%;
display:flex;
flex-direction:column;
justify-content:center;
gap:52px;
}
/* Exact same composition for all four points:
heading across both columns, body copy in the right column. */
.fundament-point__header{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:4vw;
row-gap:72px;
align-items:start;
}
.fundament-point__heading{
grid-column:1 / -1;
}
.fundament-point__heading h2{
margin:0;
max-width:20ch;
font-family:Manrope,Inter,sans-serif;
font-weight:600;
font-size:clamp(48px,6vw,96px);
line-height:.95;
letter-spacing:-.055em;
}
.fundament-point__copy{
grid-column:2;
transform:translateX(-100px);
padding-right:100px;
}
.fundament-point__copy p{
margin:0;
max-width:700px;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:18px;
line-height:1.65;
font-weight:200;
letter-spacing:-.01em;
}
.fundament-point__media,
.fundament-point__prompt{
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
.fundament-point__media img{
display:block;
width:auto;
height:auto;
max-width:100%;
}
.fundament-point__media--pdf img{
width:min(18%,250px);
}
.fundament-point__icons{
width:min(78%,980px);
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:24px;
align-items:end;
}
.fundament-point__icons img{
display:block;
width:85%;
height:auto;
margin:0 auto;
}
.fundament-point__prompt-art{
position:relative;
width:min(55%,650px);
aspect-ratio:678.82 / 100.01;
}
.fundament-point__prompt-art > img{
display:block;
width:100%;
height:100%;
object-fit:contain;
}
.fundament-prompt-terminal{
position:absolute;
left:7.8%;
top:43.9%;
width:67%;
height:55.6%;
display:flex;
align-items:center;
color:#1d1d1b;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:clamp(9px,1vw,14px);
line-height:1;
font-weight:400;
white-space:nowrap;
overflow:hidden;
}
.fundament-prompt-terminal i{
display:inline-block;
width:.55em;
height:1.08em;
flex:0 0 auto;
margin-left:2px;
background:#1d1d1b;
animation:fundamentPromptCursor .8s steps(1,end) infinite;
}
@keyframes fundamentPromptCursor{
0%,49%{opacity:1}
50%,100%{opacity:0}
}
/* Terminal animations are regular, never bold. */
.terminal-inline,
.terminal-inline__text,
.terminal-statement,
.terminal-statement__text,
.fundament-prompt-terminal,
.fundament-prompt-terminal__text{
font-weight:400 !important;
}
@media(max-width:1100px){
.fundament-point{
padding-left:48px;
padding-right:48px;
}
}
@media(max-width:900px){
.fundament-point{
min-height:auto;
padding:96px 20px 80px;
}
.fundament-point__layout{
gap:34px;
}
.fundament-point__header{
display:block;
}
.fundament-point__heading h2{
max-width:none;
font-size:clamp(36px,10vw,56px);
}
.fundament-point__copy{
transform:none;
padding-right:0;
margin-top:32px;
}
.fundament-point__copy p{
font-size:13px;
line-height:1.5;
}
.fundament-point__media--pdf img{
width:min(34%,220px);
}
.fundament-point__icons{
width:100%;
gap:7px;
}
.fundament-point__icons img{
width:88%;
}
.fundament-point__prompt-art{
width:84%;
}
.fundament-prompt-terminal{
font-size:8px;
}
}
/* v268 — FUNDAMENT file cards, using the same card logic as the NET case */
.fundament-file-cards{
width:100%;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
margin:0;
overflow:hidden;
box-shadow:0 14px 34px rgba(45,51,58,.22), 0 4px 10px rgba(45,51,58,.14);
}
.fundament-file-card{
min-height:310px;
padding:28px;
margin:0;
display:flex;
flex-direction:column;
border:0;
box-shadow:none;
}
.fundament-file-card .label{
margin:0 0 auto;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:10px;
line-height:1;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
}
.fundament-file-card h3{
margin:56px 0 18px;
font:600 clamp(28px,2.4vw,42px)/1 Manrope,Inter,sans-serif;
letter-spacing:-.045em;
}
.fundament-file-card p{
margin:auto 0 0;
max-width:34ch;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:15px;
line-height:1.5;
font-weight:200;
letter-spacing:-.01em;
}
/* FUNDAMENT palette, while keeping the case-card rhythm */
.fundament-file-card:nth-child(1){
background:#E7E3DD;
color:#0B0B0C;
}
.fundament-file-card:nth-child(2){
background:#0B0B0C;
color:#E7E3DD;
}
.fundament-file-card:nth-child(3){
background:#B8B0A6;
color:#0B0B0C;
}
.fundament-file-card:nth-child(4){
background:#E85B49;
color:#0B0B0C;
}
@media(max-width:900px){
.fundament-file-cards{
grid-template-columns:1fr 1fr;
}
.fundament-file-card{
min-height:250px;
padding:22px;
}
.fundament-file-card h3{
margin-top:40px;
font-size:clamp(25px,7vw,36px);
}
.fundament-file-card p{
font-size:13px;
}
}
@media(max-width:560px){
.fundament-file-cards{
grid-template-columns:1fr;
}
.fundament-file-card{
min-height:220px;
}
}
/* v270 — align file-card titles at the top and body copy at the bottom */
.fundament-file-card .label{
margin:0 !important;
}
.fundament-file-card h3{
margin:92px 0 0 !important;
}
.fundament-file-card p{
margin:auto 0 0 !important;
}
@media(max-width:900px){
.fundament-file-card h3{
margin-top:56px !important;
}
}
/* v271 — merged FUNDAMENT definition into the prompt section */
.fundament-point--prompt .fundament-point__copy p + p{
margin-top:22px;
}
/* v272 — FUNDAMENT statement moved below the prompt animation */
.fundament-point__prompt-block{
width:100%;
}
.fundament-point__prompt-note{
width:min(55%,650px);
margin:24px auto 0;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:18px;
line-height:1.65;
font-weight:200;
letter-spacing:-.01em;
}
@media(max-width:900px){
.fundament-point__prompt-note{
width:84%;
margin-top:18px;
font-size:13px;
line-height:1.5;
}
}
/* v273 — note below prompt aligned exactly like the body copy above */
.fundament-point__prompt-note-row{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:4vw;
align-items:start;
margin-top:24px;
}
.fundament-point__prompt-note{
grid-column:2;
width:auto !important;
max-width:700px;
margin:0 !important;
transform:translateX(-100px);
padding-right:100px;
font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:18px;
line-height:1.65;
font-weight:200;
letter-spacing:-.01em;
}
@media(max-width:900px){
.fundament-point__prompt-note-row{
display:block;
margin-top:18px;
}
.fundament-point__prompt-note{
width:auto !important;
max-width:none;
transform:none;
padding-right:0;
margin:0 !important;
font-size:13px;
line-height:1.5;
}
}
/* v274 — more breathing room around the note below the prompt */
.fundament-point__prompt-note-row{
margin-top:48px !important;
margin-bottom:48px !important;
}
@media(max-width:900px){
.fundament-point__prompt-note-row{
margin-top:32px !important;
margin-bottom:32px !important;
}
}
/* v276 — hero positioning matches the contact lead typography */
.hero-positioning{
margin-top:34px !important;
font-family:Manrope,Inter,sans-serif !important;
font-size:clamp(24px,3vw,44px) !important;
line-height:1.08 !important;
font-weight:500 !important;
letter-spacing:-.035em !important;
}
.hero-positioning .terminal-inline,
.hero-positioning .terminal-inline__text{
font-family:Manrope,Inter,sans-serif !important;
font-size:inherit !important;
line-height:inherit !important;
font-weight:500 !important;
letter-spacing:inherit !important;
white-space:pre-line !important;
}
/* v278 — contact details use exactly the same horizontal offset as the contact heading */
@media (min-width:901px) and (max-width:1100px){
.section-contact-form .contact-details{
transform:translateX(-8px) !important;
}
}
@media (min-width:1101px){
.section-contact-form .contact-details{
transform:translateX(24px) !important;
}
}
/* v279 — keep the hero terminal cursor directly after “AI.” on line two */
.hero-positioning .terminal-inline{
display:inline-block !important;
white-space:pre !important;
}
.hero-positioning .terminal-inline__text{
white-space:pre !important;
}
/* Standalone NET case v2: equal typography cards and unchanged LinkedIn animation in centre */
.section-net-case .net-design-system-group .net-showcase-row--three-cards{
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
gap:0 !important;width:100% !important;max-width:none !important;
height:300px !important;margin:0 !important;padding:0 !important;
}
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card{
width:100% !important;min-width:0 !important;height:300px !important;min-height:300px !important;
margin:0 !important;padding:0 !important;overflow:hidden !important;
}
.section-net-case .net-showcase-card--type .net-type-card{display:flex !important;align-items:center !important;}
.section-net-case .net-showcase-card--type .net-type-specimen{min-width:0;}
.section-net-case .net-showcase-card--type-condensed .net-type-specimen-display{font-size:clamp(25px,2.9vw,46px) !important;}
.section-net-case .net-showcase-card--type-barlow .net-type-specimen-body{font-size:clamp(28px,3.1vw,48px) !important;}
.section-net-case .net-showcase-card--type-barlow .net-type-specimen-weights{overflow-wrap:anywhere;}
.section-net-case .net-showcase-card--linkedin{position:relative;background:#E0D9CF;}
.section-net-case .net-showcase-card--linkedin .net-linkedin-wide-showcase{
width:100% !important;height:100% !important;min-height:0 !important;max-height:none !important;
margin:0 !important;position:absolute !important;inset:0 !important;overflow:hidden !important;
}
.section-net-case .net-showcase-card--linkedin .net-linkedin-wide-label{left:28px !important;top:20px !important;}
.section-net-case .net-design-system-group .net-showcase-row--gradient-single{
display:grid !important;grid-template-columns:1fr !important;margin:0 !important;padding:0 !important;
width:100% !important;height:300px !important;
}
.section-net-case .net-design-system-group .net-showcase-row--gradient-single .net-showcase-card--gradients{
height:300px !important;min-height:300px !important;width:100% !important;margin:0 !important;
}
@media(max-width:900px){
.section-net-case .net-design-system-group .net-showcase-row--three-cards{display:block !important;height:auto !important;}
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card{height:240px !important;min-height:240px !important;}
.section-net-case .net-showcase-card--linkedin .net-linkedin-wide-label{left:20px !important;top:18px !important;}
.section-net-case .net-design-system-group .net-showcase-row--gradient-single,
.section-net-case .net-design-system-group .net-showcase-row--gradient-single .net-showcase-card--gradients{height:240px !important;min-height:240px !important;}
}
/* v4: six equal main cards, 3 × 2; palette stays a separate unaltered band. */
.section-net-case .net-design-system-group .net-showcase-row--three-cards {
display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
height:300px !important;gap:0 !important;
}
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card {
height:300px !important;min-height:300px !important;width:100% !important;min-width:0 !important;
}
.section-net-case .net-showcase-row--three-cards .net-type-specimen {
display:flex !important;flex-direction:column !important;gap:4px !important;justify-content:center !important;
}
.section-net-case .net-showcase-row--three-cards .net-type-specimen-display {font-size:clamp(25px,2.7vw,43px) !important;margin:0 !important;}
.section-net-case .net-showcase-row--three-cards .net-type-specimen-body {font-size:clamp(24px,2.5vw,40px) !important;margin:9px 0 0 !important;}
.section-net-case .net-showcase-row--three-cards .net-type-specimen-weights {font-size:11px !important;overflow-wrap:anywhere;}
.section-net-case .net-showcase-row--three-cards .net-showcase-card--gradients .net-gradient-board {height:100% !important;}
@media(max-width:900px) {
.section-net-case .net-design-system-group .net-showcase-row--three-cards {display:block !important;height:auto !important;}
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card {height:240px !important;min-height:240px !important;}
}
/* Kun typografi- og LinkedIn-kort får hvid baggrund. Animation uændret. */
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card--type,
.section-net-case .net-design-system-group .net-showcase-row--three-cards > .net-showcase-card--linkedin { background: #FFFFFF !important; }