@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('/fonts/unbounded-5.3.0-latin-wght.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Unbounded';
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('/fonts/unbounded-5.3.0-cyrillic-wght.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/onest-5.3.1-latin-wght.woff2') format('woff2');
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Onest';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/onest-5.3.1-cyrillic-wght.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
:root {
color-scheme: light;
--free: #12b76a;
--free-soft: #dcf6e8;
--held: #f5a300;
--booked: #101814;
--ink: #101814;
--muted: #56625c;
--line: #e3e8e5;
--page: #ffffff;
--tint: #f5f7f6;
--floor: #f7f9f8;
--bench: #e9e2d7;
--accent-wall: #d6422e;
--display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
--text: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;
--mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;
--measure: 84rem;
--gutter: clamp(1.25rem, 4vw, 3rem);
--radius: 1.5rem;
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: var(--text);
font-size: 100%;
line-height: 1.6;
color: var(--ink);
background-color: var(--page);
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
scroll-padding-top: 5.5rem;
}
body {
margin: 0;
background-color: var(--page);
}
h1,
h2,
h3 {
margin: 0;
font-family: var(--display);
font-weight: 700;
color: var(--ink);
text-wrap: balance;
}
h1 {
font-size: clamp(2.3rem, 3.6vw + 0.6rem, 4.1rem);
line-height: 1;
letter-spacing: -0.045em;
}
h2 {
max-width: 20ch;
font-size: clamp(1.9rem, 2.4vw + 0.9rem, 3.1rem);
line-height: 1.05;
letter-spacing: -0.04em;
}
h3 {
font-size: 1.2rem;
line-height: 1.25;
letter-spacing: -0.025em;
}
p {
margin: 0;
}
a {
color: inherit;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.22em;
}
a:focus-visible,
summary:focus-visible {
outline: 3px solid var(--free);
outline-offset: 3px;
border-radius: 0.4rem;
}
.wrap {
width: 100%;
max-width: var(--measure);
margin: 0 auto;
padding-inline: var(--gutter);
}
.skip {
position: absolute;
left: 1rem;
top: -4rem;
z-index: 30;
padding: 0.6rem 1rem;
border-radius: 0.6rem;
background: var(--ink);
color: #fff;
}
.skip:focus {
top: 1rem;
}
.lead {
color: var(--muted);
font-size: clamp(1.05rem, 0.3vw + 1rem, 1.2rem);
line-height: 1.6;
}
.actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
margin-top: 1.75rem;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 3.1rem;
padding: 0.8rem 1.35rem;
border-radius: 0.85rem;
font-weight: 650;
text-decoration: none;
white-space: nowrap;
transition:
transform 160ms var(--ease),
background-color 160ms var(--ease);
}
.button:hover {
transform: translateY(-1px);
}
.button:focus-visible {
outline: 3px solid var(--free);
outline-offset: 3px;
}
.button--primary,
.button--small {
background: var(--ink);
color: #fff;
}
.button--primary:hover,
.button--small:hover {
background: #26332d;
}
.button--small {
min-height: 2.6rem;
padding: 0.5rem 1rem;
font-size: 0.95rem;
}
.button--light {
background: #fff;
color: var(--ink);
}
.link-arrow {
font-weight: 650;
}
.link-arrow::after {
content: ' →';
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
border-bottom: 1px solid var(--line);
background: var(--page);
}
.site-header__inner {
display: flex;
align-items: center;
gap: 1.5rem;
min-height: 4.5rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0;
font-family: var(--display);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: -0.035em;
text-decoration: none;
}
.brand__mark {
width: 1.5rem;
height: 1.5rem;
}
.brand__cell--free {
fill: var(--free);
}
.brand__cell--held {
fill: var(--held);
}
.brand__cell--booked {
fill: var(--booked);
}
.site-nav {
display: flex;
gap: 0.25rem 1.5rem;
margin-left: auto;
font-size: 0.95rem;
}
.site-nav a {
color: var(--muted);
text-decoration: none;
}
.site-nav a:hover {
color: var(--ink);
}
.site-nav a:not(.site-nav__language) {
display: none;
}
.site-header .button--small {
flex: none;
}
.hero {
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(5rem, 9vw, 8rem);
}
.hero__intro {
display: grid;
gap: 1.5rem 3rem;
align-items: end;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
margin: 1.5rem 0 0;
padding: 0;
color: var(--muted);
font-size: 0.9rem;
list-style: none;
}
.legend li {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.legend__swatch {
width: 0.85rem;
height: 0.85rem;
border-radius: 0.22rem;
}
.legend__swatch--free {
border: 2px solid var(--free);
background: var(--free-soft);
}
.legend__swatch--held {
background: var(--held);
}
.legend__swatch--booked {
background: var(--booked);
}
.pair {
position: relative;
display: grid;
gap: 1rem;
margin-top: clamp(2rem, 4vw, 3rem);
padding-bottom: 10rem;
}
.panel {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
}
.panel--photo {
overflow: hidden;
background: var(--tint);
}
.panel--photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.panel--plan {
border: 1px solid var(--line);
background: var(--floor);
}
.panel__label {
position: absolute;
left: 1rem;
top: 1rem;
z-index: 3;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: #fff;
font-size: 0.85rem;
font-weight: 650;
box-shadow: 0 6px 16px -8px rgb(16 24 20 / 35%);
}
.panel__credit {
position: absolute;
right: 0.9rem;
bottom: 0.7rem;
color: #fff;
font-size: 0.72rem;
text-shadow: 0 1px 3px rgb(0 0 0 / 80%);
}
.tags {
position: absolute;
inset: 0;
}
.tag {
position: absolute;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
margin: -1rem 0 0 -1rem;
border: 2.5px solid #fff;
border-radius: 50%;
background: var(--free);
color: #fff;
font-family: var(--display);
font-size: 0.72rem;
font-weight: 700;
box-shadow: 0 6px 14px -4px rgb(0 0 0 / 50%);
transition: transform 160ms var(--ease);
}
.tag--held {
background: var(--held);
color: var(--ink);
}
.tag--booked {
background: var(--booked);
}
.tag--chosen {
outline: 3px solid var(--free);
outline-offset: 2px;
animation: pulse 2s ease-out infinite;
}
.tag--live {
animation: tag-take 8s ease-in-out 1.5s infinite;
}
.bridge {
display: none;
}
.panel--plan .plan {
position: absolute;
top: 3.4rem;
left: 1rem;
width: calc(100% - 2rem);
height: calc(100% - 4.4rem);
}
.booking {
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
left: 0;
z-index: 4;
display: grid;
gap: 0.2rem;
padding: 1rem 1.15rem;
border-radius: 1rem;
background: var(--ink);
color: #fff;
box-shadow: 0 24px 48px -20px rgb(16 24 20 / 55%);
}
.booking__eyebrow,
.booking__meta {
color: #b3c1ba;
font-size: 0.82rem;
}
.booking__title {
font-family: var(--display);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.booking__action {
margin-top: 0.6rem;
padding: 0.6rem;
border-radius: 0.6rem;
background: var(--free);
color: var(--ink);
font-weight: 650;
text-align: center;
}
.plan {
display: block;
width: 100%;
height: auto;
}
.plan__plank {
fill: #f6f0e6;
}
.plan__plank-line {
stroke: #ebe1d1;
stroke-width: 1;
}
.plan__steel-top {
stop-color: #eef1f0;
}
.plan__steel-bottom {
stop-color: #d9dfdc;
}
.plan__hoods rect {
fill: none;
stroke: #b9c2bd;
stroke-width: 1.5;
}
.plan__label {
fill: #66736d;
font-family: var(--display);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-anchor: middle;
}
.plan__label--small {
font-size: 8px;
}
.plan__counter {
fill: #3a2e24;
}
.plan__stools circle {
fill: var(--accent-wall);
stroke: #fff;
stroke-width: 2;
}
.plan__bench rect {
fill: #cdbba0;
}
.plan__seams line {
stroke: #b8a283;
stroke-width: 1.5;
}
.plan__column {
fill: #fff;
stroke: #c9d0cc;
stroke-width: 1.5;
}
.plan__plant circle {
fill: #2f7d4f;
}
.plan__plant .plan__leaf {
fill: #47a26b;
}
.plan__walls {
fill: none;
stroke: var(--ink);
stroke-width: 7;
}
.plan__accent {
stroke: var(--accent-wall);
stroke-width: 7;
}
.plan__window {
stroke: #9cc8ea;
stroke-width: 7;
}
.plan__door-gap {
stroke: #f6f0e6;
stroke-width: 9;
}
.plan__door {
fill: none;
stroke: #8e9a94;
stroke-width: 1.5;
stroke-dasharray: 3 3;
}
.plan__scale line {
stroke: #66736d;
stroke-width: 1.5;
}
.plan__scale text {
fill: #66736d;
font-family: var(--text);
font-size: 10px;
font-weight: 600;
}
.t__top {
fill: var(--free-soft);
stroke: var(--free);
stroke-width: 2.5;
transition: stroke-width 160ms var(--ease);
}
.t__chair {
fill: #fff;
stroke: var(--free);
stroke-width: 1.5;
}
.t text {
fill: var(--ink);
font-family: var(--display);
font-size: 14px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: central;
}
.t--held .t__top {
fill: var(--held);
stroke: var(--held);
}
.t--held .t__chair {
stroke: var(--held);
}
.t--booked .t__top,
.t--seen .t__top {
fill: var(--booked);
stroke: var(--booked);
}
.t--booked .t__chair,
.t--seen .t__chair {
fill: #d7ddda;
stroke: var(--booked);
}
.t--booked text,
.t--seen text,
.t--chosen text {
fill: #fff;
}
.t--chosen .t__top {
fill: var(--free);
}
.t--chosen .t__chair {
fill: var(--free-soft);
}
.t--live .t__top {
animation: take 8s ease-in-out 1.5s infinite;
}
.t--cycle-0 .t__top {
animation: take 9s ease-in-out infinite;
}
.t--cycle-1 .t__top {
animation: take 9s ease-in-out -3s infinite;
}
.t--cycle-2 .t__top {
animation: take 9s ease-in-out -6s infinite;
}
.t--seen .t__top {
animation: seen 6s ease-in-out infinite;
}
.section {
padding-block: clamp(5rem, 9vw, 8rem);
}
.story {
background: var(--tint);
}
.story__steps {
display: grid;
gap: 1.25rem;
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
list-style: none;
}
.story__step {
display: grid;
gap: 1.5rem;
align-items: center;
padding: clamp(1.25rem, 3vw, 2.5rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--page);
box-shadow: 0 -12px 40px -30px rgb(16 24 20 / 45%);
}
.story__label {
margin-bottom: 0.75rem;
color: var(--muted);
font-family: var(--display);
font-size: 0.8rem;
font-weight: 600;
}
.story__text > p:last-child {
max-width: 34rem;
margin-top: 0.75rem;
color: var(--muted);
font-size: 1.05rem;
}
.story__visual {
overflow: hidden;
border-radius: 1rem;
background: var(--floor);
}
.story__visual--photo img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.story__visual--plan {
padding: 1rem;
border: 1px solid var(--line);
}
.story__visual--site {
display: grid;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--line);
}
.code {
margin: 0;
padding: 1rem 1.1rem;
overflow-x: auto;
border-radius: 0.8rem;
background: var(--ink);
color: #c9f2dc;
font-family: var(--mono);
font-size: 0.8rem;
line-height: 1.7;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.themes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.6rem;
}
.theme {
padding: 0.4rem;
border-radius: 0.6rem;
background: #fff;
}
.theme--sea {
--free: #1f6fd1;
--free-soft: #dbe8fb;
--held: #f2b705;
}
.theme--wine {
--free: #9b2242;
--free-soft: #f6dde4;
--held: #e3a63b;
--booked: #2a1018;
}
.theme--sun {
--free: #e8590c;
--free-soft: #ffe8d6;
--held: #6c63ff;
}
.who__inner {
display: grid;
gap: 2rem 4rem;
}
.who__list {
margin: 0;
padding: 0;
list-style: none;
}
.who__list li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 1.5rem;
padding-block: 1.1rem;
border-bottom: 1px solid var(--line);
}
.who__list li:first-child {
border-top: 1px solid var(--line);
}
.who__space {
font-family: var(--display);
font-size: clamp(1.15rem, 1vw + 0.9rem, 1.6rem);
font-weight: 700;
letter-spacing: -0.035em;
}
.who__objects {
color: var(--muted);
}
.why {
border-top: 1px solid var(--line);
}
.why__facts {
display: grid;
gap: 2rem;
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
list-style: none;
}
.why__facts li {
padding-top: 1.5rem;
border-top: 3px solid var(--ink);
}
.why__label {
margin-bottom: 0.6rem;
color: var(--muted);
font-size: 0.9rem;
font-weight: 600;
}
.why__facts li > p:last-child {
margin-top: 0.6rem;
color: var(--muted);
}
.team {
background: var(--tint);
}
.team__inner {
display: grid;
gap: 2rem 4rem;
}
.cameras__head {
display: grid;
gap: 1.25rem 4rem;
align-items: end;
}
.cameras__head .lead {
max-width: 34rem;
}
.cameras__pair {
display: grid;
gap: 1rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.camera,
.cameras__plan {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius);
}
.camera {
background: #2a2f2c;
}
.camera img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.camera__label {
position: absolute;
left: 1rem;
top: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: rgb(16 24 20 / 80%);
color: #fff;
font-size: 0.85rem;
font-weight: 650;
}
.camera__rec {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #ff4d3d;
animation: rec 1.6s steps(1, end) infinite;
}
.camera__boxes {
position: absolute;
inset: 0;
}
.box {
position: absolute;
border: 2px solid var(--free);
border-radius: 0.35rem;
box-shadow: 0 0 0 1px rgb(16 24 20 / 35%);
animation: detect 6s ease-in-out infinite;
}
.box__label {
position: absolute;
left: -2px;
top: -1.45rem;
padding: 0.1rem 0.4rem;
border-radius: 0.3rem 0.3rem 0.3rem 0;
background: var(--free);
color: var(--ink);
font-size: 0.7rem;
font-weight: 700;
white-space: nowrap;
}
.box--1 {
left: 5%;
top: 61%;
width: 24%;
height: 37%;
}
.box--2 {
left: 22%;
top: 49%;
width: 12%;
height: 18%;
}
.box--3 {
left: 34.5%;
top: 52%;
width: 10.5%;
height: 22%;
animation-delay: 0.4s;
}
.box--4 {
left: 58.5%;
top: 54%;
width: 11%;
height: 34%;
animation-delay: 0.8s;
}
.box--5 {
left: 83%;
top: 55%;
width: 13%;
height: 34%;
animation-delay: 1.2s;
}
.box--6 {
left: 1.5%;
top: 49%;
width: 8.5%;
height: 15%;
animation-delay: 1.6s;
}
.cameras__plan {
border: 1px solid var(--line);
background: var(--floor);
}
.cameras__plan .plan {
position: absolute;
top: 3.4rem;
left: 1rem;
width: calc(100% - 2rem);
height: calc(100% - 4.4rem);
}
.cameras__points {
display: grid;
gap: 1.25rem 2rem;
margin: clamp(2rem, 4vw, 3rem) 0 0;
padding: 0;
list-style: none;
counter-reset: point;
}
.cameras__points li {
position: relative;
padding-left: 3rem;
color: var(--muted);
counter-increment: point;
}
.cameras__points li::before {
content: counter(point);
position: absolute;
top: -0.1rem;
left: 0;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: var(--tint);
color: var(--ink);
font-family: var(--display);
font-size: 0.85rem;
font-weight: 700;
}
.quote {
margin: 0;
}
.quote blockquote {
margin: 0;
}
.quote blockquote p {
font-family: var(--display);
font-size: clamp(1.35rem, 1.4vw + 0.9rem, 2rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.035em;
text-wrap: pretty;
}
.quote blockquote p::before {
content: '«';
color: var(--free);
}
.quote blockquote p::after {
content: '»';
color: var(--free);
}
.quote figcaption {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem 1.25rem;
margin-top: 1.5rem;
}
.quote__name {
font-weight: 700;
}
.quote__role {
color: var(--muted);
}
.pilot {
background: var(--ink);
color: #fff;
}
.pilot h2 {
color: #fff;
}
.pilot__inner {
display: grid;
gap: 2.5rem 4rem;
align-items: start;
}
.pilot__intro {
max-width: 30rem;
margin-top: 1.25rem;
color: #b3c1ba;
font-size: 1.1rem;
}
.pilot__points {
display: grid;
gap: 0;
margin: 0;
padding: 0;
list-style: none;
counter-reset: point;
}
.pilot__points li {
position: relative;
padding: 1.25rem 0 1.25rem 3.25rem;
border-top: 1px solid rgb(255 255 255 / 14%);
font-size: 1.05rem;
counter-increment: point;
}
.pilot__points li::before {
content: counter(point);
position: absolute;
top: 1.15rem;
left: 0;
display: grid;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: var(--free);
color: var(--ink);
font-family: var(--display);
font-size: 0.85rem;
font-weight: 700;
}
.faq__inner {
display: grid;
gap: 2rem 4rem;
}
.faq__item {
border-bottom: 1px solid var(--line);
}
.faq__item:first-child {
border-top: 1px solid var(--line);
}
.faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.2rem;
font-size: 1.05rem;
font-weight: 650;
list-style: none;
cursor: pointer;
}
.faq__item summary::-webkit-details-marker {
display: none;
}
.faq__item summary::after {
content: '+';
flex: none;
display: grid;
place-items: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 0.5rem;
background: var(--tint);
font-size: 1.1rem;
transition: transform 200ms var(--ease);
}
.faq__item[open] summary::after {
transform: rotate(45deg);
}
.faq__item p {
max-width: 42rem;
padding-bottom: 1.4rem;
color: var(--muted);
}
.contact {
border-top: 1px solid var(--line);
}
.contact h2 {
max-width: 16ch;
font-size: clamp(2.2rem, 4vw + 0.6rem, 4.2rem);
}
.contact__intro {
max-width: 36rem;
margin-top: 1.25rem;
color: var(--muted);
font-size: 1.15rem;
}
.site-footer {
padding-block: 3rem;
border-top: 1px solid var(--line);
background: var(--tint);
}
.site-footer__inner {
display: grid;
gap: 2rem;
}
.site-footer__seller h2 {
max-width: none;
margin-bottom: 0.75rem;
color: var(--muted);
font-family: var(--text);
font-size: 0.85rem;
font-weight: 650;
letter-spacing: 0.02em;
}
.seller {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.35rem 1.25rem;
margin: 0;
font-size: 0.95rem;
}
.seller dt {
color: var(--muted);
}
.seller dd {
margin: 0;
}
.site-footer__links {
display: grid;
gap: 0.5rem;
align-content: start;
margin: 0;
padding: 0;
color: var(--muted);
font-size: 0.95rem;
list-style: none;
}
.policy__body {
display: grid;
gap: 1.25rem;
max-width: 48rem;
}
.policy__updated {
color: var(--muted);
font-size: 0.9rem;
font-weight: 600;
}
.policy__section {
display: grid;
gap: 0.75rem;
padding-top: 1.75rem;
border-top: 1px solid var(--line);
}
.policy__section h2 {
max-width: none;
font-size: 1.35rem;
}
.policy__section ul {
margin: 0;
padding-left: 1.25rem;
}
.missing .lead {
margin-top: 1.25rem;
}
@media (min-width: 48rem) {
.story__step {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
position: sticky;
}
.story__step:nth-child(1) {
top: 6rem;
}
.story__step:nth-child(2) {
top: 7rem;
}
.story__step:nth-child(3) {
top: 8rem;
}
.story__step:nth-child(4) {
top: 9rem;
}
.why__facts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.site-footer__inner {
grid-template-columns: 1fr 2fr 1fr;
}
}
@media (min-width: 60rem) {
.site-nav a:not(.site-nav__language) {
display: inline;
}
.hero__intro {
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
.pair {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
padding-bottom: 6.5rem;
}
.bridge {
position: absolute;
left: 50%;
top: calc(50% - 1.5rem);
z-index: 5;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-left: -1.5rem;
border-radius: 50%;
background: var(--ink);
color: #fff;
font-size: 1.2rem;
box-shadow: 0 0 0 6px #fff;
}
.booking {
top: auto;
right: 1.5rem;
bottom: -6rem;
left: auto;
width: 16rem;
}
.cameras__head,
.cameras__pair {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cameras__points {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.who__inner,
.team__inner,
.faq__inner,
.pilot__inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
}
@keyframes pulse {
0% {
box-shadow:
0 0 0 0 rgb(18 183 106 / 60%),
0 6px 14px -4px rgb(0 0 0 / 50%);
}
70%,
100% {
box-shadow:
0 0 0 14px rgb(18 183 106 / 0%),
0 6px 14px -4px rgb(0 0 0 / 50%);
}
}
@keyframes take {
0%,
50% {
fill: var(--free-soft);
stroke: var(--free);
}
56%,
76% {
fill: var(--held);
stroke: var(--held);
}
82%,
100% {
fill: var(--booked);
stroke: var(--booked);
}
}
@keyframes seen {
0%,
12% {
fill: var(--free-soft);
stroke: var(--free);
}
20%,
100% {
fill: var(--booked);
stroke: var(--booked);
}
}
@keyframes detect {
0%,
6% {
opacity: 0;
transform: scale(1.06);
}
12%,
100% {
opacity: 1;
transform: none;
}
}
@keyframes rec {
0%,
50% {
opacity: 1;
}
51%,
100% {
opacity: 0.25;
}
}
@keyframes tag-take {
0%,
50% {
background: var(--free);
color: #fff;
}
56%,
76% {
background: var(--held);
color: var(--ink);
}
82%,
100% {
background: var(--booked);
color: #fff;
}
}
.tag--1 {
left: 44%;
top: 82%;
}
.tag--2 {
left: 27%;
top: 67%;
}
.tag--3 {
left: 17%;
top: 58%;
}
.tag--4 {
left: 10%;
top: 51%;
}
.tag--5 {
left: 70%;
top: 73%;
}
.tag--6 {
left: 86%;
top: 66%;
}
.tag--7 {
left: 61%;
top: 59%;
}
.tag--8 {
left: 50%;
top: 55%;
}
.tag--9 {
left: 71%;
top: 52%;
}
.pair:has(.tag--1:hover) .t-n1 .t__top,
.pair:has(.tag--2:hover) .t-n2 .t__top,
.pair:has(.tag--3:hover) .t-n3 .t__top,
.pair:has(.tag--4:hover) .t-n4 .t__top,
.pair:has(.tag--5:hover) .t-n5 .t__top,
.pair:has(.tag--6:hover) .t-n6 .t__top,
.pair:has(.tag--7:hover) .t-n7 .t__top,
.pair:has(.tag--8:hover) .t-n8 .t__top,
.pair:has(.tag--9:hover) .t-n9 .t__top {
stroke: var(--ink);
stroke-width: 4;
}
.pair:has(.t-n1:hover) .tag--1,
.pair:has(.t-n2:hover) .tag--2,
.pair:has(.t-n3:hover) .tag--3,
.pair:has(.t-n4:hover) .tag--4,
.pair:has(.t-n5:hover) .tag--5,
.pair:has(.t-n6:hover) .tag--6,
.pair:has(.t-n7:hover) .tag--7,
.pair:has(.t-n8:hover) .tag--8,
.pair:has(.t-n9:hover) .tag--9 {
transform: scale(1.25);
z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}