@property --sweep-x {
syntax: '<percentage>';
inherits: false;
initial-value: 50%;
}
body {
background: var(--graphite);
color: var(--paper);
}
h1,
h2 {
font-family: "Archivo Expanded", Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.95;
}
h1 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
}
h2 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
h3 {
font-family: "IBM Plex Sans", Arial, sans-serif;
font-weight: 500;
font-size: 1.125rem;
}
p + p,
p + ul,
p + ol,
h2 + p,
h3 + p,
details + details {
margin-top: 1rem;
}
.hero-badge,
.mono-note,
.services-tier-label,
.review-label,
.job-card,
.footer-contact,
.footer-nav,
.hero-meta {
font-family: "IBM Plex Mono", monospace;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.6rem;
border: 1px solid var(--chrome-light);
border-radius: 2px;
color: var(--paper);
margin-bottom: 1rem;
font-size: 0.85rem;
}
.hero-badge::before {
content: "";
width: 8px;
height: 8px;
background: var(--marque);
border-radius: 1px;
}
.hero-copy,
.page-hero p:not(.hero-badge),
.final-cta p,
.location-block p,
.authorisation p,
.cyprus p,
.process p,
.section p {
color: var(--paper);
max-width: 65ch;
}
.hero-tagline {
margin-top: 1rem;
color: var(--chrome-light);
}
.hero-meta,
.mono-note,
.services-tier-label {
color: var(--chrome-mid);
font-size: 0.9rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
padding: 0.875rem 1.25rem;
border: 1px solid var(--chrome-light);
border-radius: 2px;
transition: background-color 0.2s ease, color 0.2s ease, border-color
0.2s ease;
}
.btn:hover,
.btn:focus-visible {
border-color: var(--paper);
}
.btn-primary {
background: var(--marque);
border-color: var(--marque);
color: var(--paper);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: #bb1d23;
border-color: #bb1d23;
}
.btn-secondary {
background: transparent;
border-color: var(--chrome-light);
color: var(--paper);
}
.btn-mono {
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(11, 14, 19, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(212, 216, 220, 0.12);
}
.site-header--transparent {
background: rgba(11, 14, 19, 0.3);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
gap: 1rem;
}
.brand img {
display: block;
height: 40px;
width: auto;
}
.desktop-nav {
display: none;
align-items: center;
gap: 1rem;
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
}
.desktop-nav a,
.mobile-nav a,
.footer-nav a {
color: var(--paper);
}
.desktop-nav a[aria-current="page"],
.mobile-nav a[aria-current="page"],
.footer-nav a[aria-current="page"] {
color: var(--chrome-light);
}
.menu-toggle {
display: inline-flex;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--chrome-dark);
background: transparent;
color: var(--paper);
border-radius: 2px;
}
.menu-toggle span {
width: 18px;
height: 1px;
background: currentColor;
}
.mobile-menu {
border-top: 1px solid rgba(212, 216, 220, 0.12);
background: var(--graphite);
}
.mobile-nav {
display: grid;
gap: 0.5rem;
padding: 1rem;
font-family: "IBM Plex Mono", monospace;
}
@media (min-width: 992px) {
.desktop-nav {
display: inline-flex;
}
.menu-toggle,
.mobile-menu {
display: none;
}
}
.hero {
position: relative;
min-height: 92vh;
display: grid;
align-items: end;
isolation: isolate;
overflow: clip;
}
.hero-media,
.hero-overlay,
.hero-sweep,
.hero-sweep-beam {
position: absolute;
inset: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
background:
linear-gradient(rgba(11, 14, 19, 0.35), rgba(11, 14, 19, 0.55)),
url("/assets/media/hero/hero-poster.jpg") center / cover no-repeat;
}
.hero-overlay {
background:
linear-gradient(180deg, rgba(11,14,19,0.2) 0%, rgba(11,14,19,0.45) 50%,
rgba(11,14,19,0.88) 100%);
z-index: 0;
}
.hero-content {
position: relative;
z-index: 2;
padding-top: 7rem;
padding-bottom: 4rem;
}
.hero-actions,
.section-actions,
.location-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.hero-sweep {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.hero-sweep-beam {
position: absolute;
top: -10%;
left: 0;
width: 45%;
height: 120%;
transform: translateX(calc(var(--sweep-x) - 50%));
background:
radial-gradient(
60% 120% at 50% 50%,
rgba(220, 235, 250, 0.20) 0%,
rgba(220, 235, 250, 0.11) 26%,
rgba(220, 235, 250, 0.04) 46%,
rgba(220, 235, 250, 0) 68%
);
mix-blend-mode: screen;
opacity: 0.8;
will-change: transform;
}
.hero-sweep--auto .hero-sweep-beam {
animation: heroSweepTransform 4s ease-out 1 forwards;
}
@keyframes heroSweepTransform {
0% {
transform: translateX(-35%);
}
100% {
transform: translateX(115%);
}
}
.checker-rule {
width: 100%;
height: 8px;
background-image:
linear-gradient(90deg, var(--chrome-dark) 0 4px, transparent 4px 8px),
linear-gradient(90deg, transparent 0 4px, var(--chrome-dark) 4px 8px);
background-size: 8px 4px, 8px 4px;
background-position: 0 0, 0 4px;
background-repeat: repeat-x;
}
.before-after-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 2rem 0 1rem;
}
.before-after-tabs [role="tab"] {
min-height: 44px;
padding: 0.6rem 0.85rem;
border: 1px solid var(--chrome-dark);
border-radius: 2px;
background: transparent;
color: var(--paper);
font-family: "IBM Plex Mono", monospace;
}
.before-after-tabs [role="tab"][aria-selected="true"] {
border-color: var(--chrome-light);
background: var(--graphite-lift);
}
.compare {
position: relative;
overflow: hidden;
border: 1px solid var(--chrome-dark);
border-radius: 2px;
margin-top: 1rem;
touch-action: none;
background: var(--graphite-lift);
}
.compare > img,
.compare [data-compare-after] img {
width: 100%;
height: auto;
object-fit: cover;
}
.compare [data-compare-after] {
position: absolute;
inset: 0 auto 0 0;
overflow: hidden;
width: 50%;
}
.compare-handle {
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border: 1px solid var(--chrome-light);
border-radius: 999px;
background: var(--graphite);
color: var(--paper);
z-index: 2;
}
.compare-handle::before {
content: "";
position: absolute;
left: 50%;
top: -100vh;
bottom: -100vh;
width: 1px;
transform: translateX(-50%);
background: var(--chrome-light);
}
.services-tier + .services-tier {
margin-top: 2rem;
}
.services-tier ul {
margin-top: 0.75rem;
}
.services-tier li + li {
margin-top: 0.5rem;
}
.process-list {
display: grid;
gap: 0.75rem;
margin-top: 1.5rem;
}
.job-card {
margin-top: 1.5rem;
border: 1px solid var(--chrome-dark);
border-radius: 2px;
padding: 1rem;
background: var(--graphite-lift);
display: grid;
gap: 0.5rem;
color: var(--paper);
}
.reviews-grid {
display: grid;
gap: 1rem;
margin-top: 1.5rem;
}
.review-card {
border: 1px solid var(--chrome-dark);
border-radius: 2px;
padding: 1rem;
background: var(--graphite-lift);
}
.image-grid {
display: grid;
gap: 1rem;
}
.image-grid img {
border: 1px solid var(--chrome-dark);
border-radius: 2px;
}
details {
border: 1px solid var(--chrome-dark);
border-radius: 2px;
background: var(--graphite-lift);
padding: 0;
overflow: hidden;
}
summary {
cursor: pointer;
list-style: none;
padding: 1rem;
font-weight: 500;
}
details p {
padding: 0 1rem 1rem;
}
.site-footer {
border-top: 1px solid rgba(212, 216, 220, 0.12);
padding: 3rem 0 6rem;
background: var(--graphite);
}
.footer-grid {
display: grid;
gap: 2rem;
}
.footer-nav {
display: grid;
gap: 0.5rem;
}
.footer-contact {
display: grid;
gap: 0.35rem;
}
.mobile-cta-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--graphite);
border-top: 1px solid var(--chrome-light);
z-index: 90;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-cta {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "IBM Plex Mono", monospace;
border-right: 1px solid rgba(212, 216, 220, 0.12);
}
.mobile-cta:last-child {
border-right: 0;
}
@media (min-width: 768px) {
.image-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.reviews-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.site-footer {
padding-bottom: 3rem;
}
.mobile-cta-bar {
display: none;
}
}
@media (min-width: 992px) {
.footer-grid {
grid-template-columns: 1.2fr 1fr 1fr;
align-items: start;
}
}