*,
*::before,
*::after {
box-sizing: border-box;
} html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scrollbar-gutter: stable;
} body {
display: flex;
flex-direction: column;
min-height: 100svh;
scroll-behavior: smooth;
} body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
padding: 0;
} ul,
ol,
nav,
menu {
list-style: none;
margin: 0;
padding: 0;
} button,
.button,
input,
label,
.fs-label,
.menu-item a,
.logo-text {
line-height: 1.25;
} h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
} a:not([class]) {
text-decoration-skip-ink: auto;
} img,
picture,
svg {
max-width: 100%;
display: block;
} input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
} textarea:not([rows]) {
min-height: 10em;
} :target {
scroll-margin-block: 5ex;
}
:root {
interpolate-size: allow-keywords; --breakpoint-xxs: 20rem; --breakpoint-xs: 36rem; --breakpoint-sm: 48rem; --breakpoint-md: 62rem; --breakpoint-lg: 75rem; --breakpoint-xl: 97.5rem; --breakpoint-xxl: 120rem;  --columns-12: 97.5rem; --columns-10: 81rem; --columns-8: 64.5rem; --columns-6: 48rem;  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --space-48: 12rem; --space-60: 15rem; --space-64: 16rem;  --container-xl: calc(var(--columns-12) + (var(--clamp-4-6) * 2));
--container-l: calc(var(--columns-10) + (var(--clamp-4-6) * 2));
--container-m: calc(var(--columns-8) + (var(--clamp-4-6) * 2));
--container-s: calc(var(--columns-6) + (var(--clamp-4-6) * 2));  --color-neutral-100: hsl(49 0% 100%);
--color-neutral-95: hsl(49 8% 95%);
--color-neutral-88: hsl(49 8% 88%);
--color-neutral-80: hsl(49 8% 80%);
--color-neutral-26: hsl(49 4% 26%);
--color-neutral-20: hsl(49 4% 20%);
--color-neutral-14: hsl(49 4% 14%);
--color-neutral-8: hsl(49 4% 8%);
--color-neutral-0: hsl(49 0% 0%); --color-primary-light: hsl(49 84% 76%);
--color-primary: hsl(49 82% 51%);
--color-primary-dark: hsl(43 82% 40%);
--color-secondary-light: hsl(157 46% 34%);
--color-secondary: hsl(162 89% 17%);
--color-secondary-dark: hsl(161 89% 11%);
--color-red: hsl(3 68% 43%);
--color-blue: hsl(240 82% 51%); --border-radius-max: 999rem; --font-family-primary: "Montserrat", sans-serif;
--font-family-cj: "LINE Seed Sans", "Montserrat", sans-serif; --font-weight-default: 400;
--font-weight-bold: 600;
--font-weight-black: 800; --letter-spacing-tight: -0.015em;
--letter-spacing-tightest: -0.03em; --font-size-h1: clamp(3rem, 3.252vw + 1.829rem, 5rem);
--font-size-h2: clamp(2.5rem, 2.439vw + 1.622rem, 4rem);
--font-size-h3: clamp(2rem, 1.626vw + 1.415rem, 3rem);
--font-size-h4: clamp(1.75rem, 1.22vw + 1.311rem, 2.5rem);
--font-size-h5: clamp(1.5rem, 0.813vw + 1.207rem, 2rem);
--font-size-h6: clamp(1.25rem, 0.407vw + 1.104rem, 1.5rem);
--font-size-large: 1.25rem;
--font-size-default: 1rem;
--font-size-small: 0.875rem; --clamp-2-3: clamp(var(--space-2), 0.641vw + 0.269rem, var(--space-3));
--clamp-4-6: clamp(var(--space-4), 1.282vw + 0.538rem, var(--space-6));
--clamp-8-12: clamp(var(--space-8), 2.564vw + 1.077rem, var(--space-12)); --clamp-4-8: clamp(var(--space-4), 1.626vw + 0.415rem, var(--space-8));
--clamp-4-12: clamp(var(--space-4), 3.252vw + -0.171rem, var(--space-12));
--clamp-8-24: clamp(var(--space-8), 6.504vw + -0.341rem, var(--space-24));
--clamp-16-32: clamp(var(--space-16), 6.504vw + 1.659rem, var(--space-32));
--clamp-16-64: clamp(var(--space-16), 19.512vw + -3.024rem, var(--space-64)); --selection: hsl(from var(--color-primary) h s l / 0.35); --background-primary: light-dark(
var(--color-neutral-100),
var(--color-neutral-8)
);
--background-level-1: light-dark(
var(--color-neutral-95),
var(--color-neutral-14)
);
--background-level-2: light-dark(
var(--color-neutral-88),
var(--color-neutral-20)
);
--background-level-3: light-dark(
var(--color-neutral-80),
var(--color-neutral-26)
); --text-primary: light-dark(var(--color-neutral-14), var(--color-neutral-95));
--text-secondary: light-dark(
var(--color-neutral-26),
var(--color-neutral-80)
); --background-button: light-dark(
var(--color-neutral-8),
var(--color-neutral-100)
);
--background-button-hover: light-dark(
var(--color-neutral-20),
var(--color-neutral-88)
);
--text-button: light-dark(var(--color-neutral-95), var(--color-neutral-14)); --box-shadow: 0 var(--space-1) var(--space-2)
light-dark(
hsl(from var(--color-neutral-0) h s l / 0.04),
hsl(from var(--color-neutral-0) h s l / 0.12)
);
}
h1,
h2,
h3,
h4,
h5,
h6,
.fs-h1,
.fs-h2,
.fs-h3,
.fs-h4,
.fs-h5,
.fs-h6 {
font-weight: var(--font-weight-default);
position: relative;
isolation: isolate;
text-wrap: balance;
padding-left: var(--clamp-2-3);
&::before {
content: "";
position: absolute;
inset: 4% auto 4% 0;
width: calc(var(--space-1) / 2);
border-radius: var(--border-radius-max);
background-color: var(--color-primary);
}
}
h1,
.fs-h1 {
font-size: var(--font-size-h1);
line-height: 1.1;
letter-spacing: var(--letter-spacing-tightest);
}
h2,
.fs-h2 {
font-size: var(--font-size-h2);
line-height: 1.15;
letter-spacing: var(--letter-spacing-tightest);
}
h3,
.fs-h3 {
font-size: var(--font-size-h3);
line-height: 1.2;
letter-spacing: var(--letter-spacing-tight);
}
h4,
.fs-h4 {
font-size: var(--font-size-h4);
line-height: 1.25;
letter-spacing: var(--letter-spacing-tight);
}
h5,
.fs-h5 {
font-size: var(--font-size-h5);
line-height: 1.3;
}
h6,
.fs-h6 {
font-size: var(--font-size-h6);
line-height: 1.35;
} .fs-large {
font-size: var(--font-size-large);
}
.fs-small {
font-size: var(--font-size-small);
}
.site-container {
width: 100%;
max-width: var(--container-xl);
margin-inline: auto;
padding-inline: var(--clamp-4-6); &.container-l {
max-width: var(--container-l);
}
&.container-m {
max-width: var(--container-m);
}
&.container-s {
max-width: var(--container-s);
} .content-container {
&[class*="split-"] {
display: flex;
flex-direction: column;
gap: var(--clamp-8-12); @media (width >= 48rem) {
flex-direction: row;
> :first-child {
flex-basis: var(--col-1, 50%);
}
> :last-child {
flex-basis: var(--col-2, 50%);
}
&.right {
flex-direction: row-reverse;
}
&.split-30-70 {
--col-1: 30%;
--col-2: 70%;
}
&.split-40-60 {
--col-1: 40%;
--col-2: 60%;
}
&.split-50-50 {
--col-1: 50%;
--col-2: 50%;
}
&.split-60-40 {
--col-1: 60%;
--col-2: 40%;
}
&.split-70-30 {
--col-1: 70%;
--col-2: 30%;
}
&.top {
align-items: flex-start;
}
&.centre {
align-items: center;
}
&.bottom {
align-items: flex-end;
}
}
}
&.boxed {
gap: var(--clamp-4-6);
.content {
padding-block: var(--clamp-4-6);
} @media (width >= 48rem) {
.content {
padding-inline: var(--clamp-4-6);
}
}
}
}
} header {
position: fixed;
inset-inline: 0;
z-index: 999;
background-color: var(--background-primary);
transition:
background-color 0.4s ease,
color 0.4s ease;
.site-container {
padding-block: var(--space-4);
display: flex;
flex-wrap: wrap;
gap: 0 var(--clamp-4-6);
justify-content: space-between;
align-items: center;
position: relative;
isolation: isolate;
}
.menu-toggle {
width: var(--space-8);
height: var(--space-8);
position: relative;
isolation: isolate;
.menu-icon {
width: 100%;
top: 50%;
transform: translateY(-50%);
&,
&::before,
&::after {
content: "";
background-color: var(--text-primary);
position: absolute;
height: calc(var(--space-1) / 2);
transition:
background-color 0.4s ease,
transform 0.4s ease,
top 0.4s ease;
}
&::before {
width: 50%;
left: var(--space-4);
top: calc(0rem - var(--space-2));
transform-origin: 0 100%;
}
&::after {
width: 50%;
left: 0;
top: var(--space-2);
transform-origin: 100% 0;
}
}
&:hover {
cursor: pointer;
}
}
.menu-container {
position: absolute;
z-index: -1;
inset: 0 0 auto 0;
padding: 0 var(--clamp-4-6);
background-color: var(--background-primary);
.main-menu {
display: flex;
flex-direction: column;
gap: var(--space-2);
.menu-item {
border-radius: var(--space-2);
overflow: hidden;
a {
background-color: var(--background-level-1);
display: flex;
gap: var(--space-2);
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
transition:
background-color 0.4s ease,
color 0.4s ease;
&:hover {
background-color: var(--background-level-2);
}
&::selection {
background-color: transparent;
}
&:focus-visible {
outline-color: var(--text-primary);
}
}
&.menu-item-has-children {
> a {
&::after {
content: "";
display: block;
width: 0.75rem;
height: 0.438rem;
background-color: currentColor;
mask: center / contain no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none' viewBox='0 0 12 7'%3E%3Cpath fill='currentColor' d='M5.294 6.707c.39.39 1.025.39 1.415 0l4.998-4.999A1.001 1.001 0 0 0 10.292.293L6 4.586 1.708.296A1.001 1.001 0 0 0 .293 1.711l4.998 5 .003-.004Z'/%3E%3C/svg%3E");
transition: rotate 0.4s ease;
}
&:focus {
background-color: var(--background-level-1);
}
&:hover {
background-color: var(--background-level-2);
}
&:focus-visible {
outline-color: var(--text-primary);
}
}
.sub-menu {
li {
border-radius: 0;
a {
padding-left: var(--space-10);
position: relative;
&::before {
content: "";
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
width: var(--space-2);
height: calc(var(--space-1) / 2);
background-color: currentColor;
transition: background-color 0.4s ease;
}
&:hover {
&::before {
background-color: var(--color-primary);
}
}
}
&.current-menu-item {
> a {
&::before {
background-color: var(--color-primary);
}
}
}
}
}
&.opened {
> a {
background-color: var(--background-level-1);
&::after {
rotate: 180deg;
}
}
.sub-menu {
height: auto;
visibility: visible;
}
}
}
&.current-menu-parent,
&.current-menu-item {
> a {
background-color: var(--background-level-2);
}
}
}
}
}
.menu-container,
.main-menu,
.sub-menu {
height: 0;
overflow: clip;
visibility: hidden;
transition:
height 0.4s ease,
margin 0.4s ease,
padding 0.4s ease,
top 0.4s ease,
visibility 0.4s ease;
}  &.scrolled,
&.menu-opened {
box-shadow: var(--box-shadow);
.logo {
height: 3.5rem;
.logo-crest {
width: 4.12rem;
height: 3.5rem;
}
}
} &.menu-opened {
box-shadow: none;
.menu-toggle {
.menu-icon {
transform: rotate(45deg);
&,
&::before,
&::after {
background-color: var(--text-primary);
}
&::before {
transform: rotate(-90deg) translate(-0.438rem, 0.063rem);
}
&::after {
transform: rotate(-90deg) translate(0.438rem, -0.063rem);
}
}
}
.menu-container {
padding: var(--header-height) var(--clamp-4-6) var(--space-4)
var(--clamp-4-6);
box-shadow: var(--box-shadow);
}
.menu-container,
.main-menu {
height: auto;
visibility: visible;
}
} &:has(+ .main > .hero:first-child) {
background-color: transparent;
.logo {
svg {
&.crest {
opacity: 0;
}
&.crest-outline {
opacity: 1;
}
}
.logo-text {
color: var(--color-neutral-100);
}
&:focus-visible {
outline-color: var(--color-neutral-100);
}
}
.menu-toggle {
.menu-icon {
&,
&::before,
&::after {
content: "";
background-color: var(--color-neutral-100);
}
}
}
.menu-container {
.main-menu {
.menu-item {
a {
&:focus-visible {
outline-color: var(--color-neutral-100);
}
}
&.menu-item-has-children {
> a {
&:focus-visible {
color: var(--text-primary);
}
}
}
}
}
} &.scrolled,
&.menu-opened {
background-color: var(--background-primary);
.logo {
height: 3.5rem;
.logo-crest {
width: 4.12rem;
height: 3.5rem;
svg {
&.crest {
opacity: 1;
}
&.crest-outline {
opacity: 0;
}
}
}
.logo-text {
color: var(--text-primary);
}
&:focus-visible {
outline-color: var(--text-primary);
}
}
.menu-toggle {
.menu-icon {
&,
&::before,
&::after {
content: "";
background-color: var(--text-primary);
}
}
}
.menu-container {
.main-menu {
.menu-item {
a {
&:focus-visible {
outline-color: var(--text-primary);
}
}
}
}
}
}
} @media (width >= 62rem) {
.menu-toggle {
display: none;
}
.menu-container {
position: static;
padding: 0;
background-color: transparent;
.main-menu {
flex-direction: row;
.menu-item {
overflow: visible;
a {
background-color: transparent;
border-radius: var(--space-2);
&:hover {
background-color: var(--background-level-1);
}
}
&.menu-item-has-children {
position: relative;
> a {
&:hover {
cursor: default;
background-color: var(--background-level-1);
}
}
.sub-menu {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% + var(--space-2));
width: var(--space-60);
background-color: var(--background-level-1);
border-radius: var(--space-2);
li {
a {
border-radius: 0;
padding-left: var(--space-10);
&::before {
left: var(--space-4);
}
&:hover {
background-color: var(--background-level-2);
}
}
&.current-menu-item {
> a {
background-color: var(--background-level-2);
}
}
}
}
&::before {
content: "";
position: absolute;
bottom: calc(0rem - var(--space-3));
left: 50%;
transform: translateX(-50%);
display: block;
width: 100%;
height: var(--space-3);
}
&:hover {
> a {
background-color: var(--background-level-1);
}
.sub-menu {
height: auto;
visibility: visible;
}
}
}
&.current-menu-parent,
&.current-menu-item {
> a {
background-color: var(--background-level-1);
}
}
}
}
}
.menu-container,
.main-menu {
visibility: visible;
overflow: visible;
height: auto;
} &:has(+ .main > .hero:first-child) {
.menu-container {
.main-menu {
.menu-item {
a {
color: var(--color-neutral-100);
&:hover {
background-color: hsl(from var(--color-neutral-8) h s l / 0.4);
backdrop-filter: blur(var(--space-4));
}
}
&.menu-item-has-children {
.sub-menu {
background-color: hsl(from var(--color-neutral-8) h s l / 0.4);
backdrop-filter: blur(var(--space-4));
}
&:hover {
> a {
background-color: hsl(
from var(--color-neutral-8) h s l / 0.4
);
backdrop-filter: blur(var(--space-4));
}
}
}
&.current-menu-parent,
&.current-menu-item {
> a {
background-color: hsl(from var(--color-neutral-8) h s l / 0.4);
backdrop-filter: blur(var(--space-4));
}
}
}
}
} &.scrolled {
.menu-container {
.main-menu {
.menu-item {
a {
color: var(--text-primary);
&:hover {
background-color: var(--background-level-1);
backdrop-filter: none;
}
}
&.menu-item-has-children {
.sub-menu {
background-color: var(--background-level-1);
backdrop-filter: none;
li {
a {
&:hover {
background-color: var(--background-level-2);
}
}
}
}
&:hover {
> a {
background-color: var(--background-level-1);
backdrop-filter: none;
}
}
}
&.current-menu-parent,
&.current-menu-item {
> a {
background-color: var(--background-level-1);
backdrop-filter: none;
}
}
}
}
}
}
}
}
@media (width >= 97.5rem) {
.site-container {
&::before,
&::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50vw;
height: calc(var(--space-1) / 2);
border-radius: var(--space-2);
background-color: var(--color-primary);
}
&::before {
left: -50vw;
}
&::after {
right: -50vw;
}
} &:has(+ .main > .hero:first-child) {
.site-container {
&::before,
&::after {
background-color: var(--color-neutral-100);
}
}
&.scrolled {
.site-container {
&::before,
&::after {
background-color: var(--color-primary);
}
}
}
}
}
}
footer {
--text-primary: var(--color-neutral-100);
background-color: var(--color-secondary);
color: var(--text-primary);
a {
display: inline-block;
transition: color 0.4s ease;
&:hover {
color: var(--color-primary);
}
}
.cms-content {
> * {
margin-block: var(--space-4);
}
}
.footer-main {
padding-block: var(--space-8);
display: flex;
flex-direction: column;
gap: var(--clamp-4-6);
> * {
flex-basis: 100%;
}
.fs-large {
color: var(--color-primary);
}
.menu-container {
.fs-large {
margin-bottom: var(--space-3);
}
.footer-links-menu {
display: flex;
flex-direction: column;
gap: var(--space-2) var(--clamp-4-6);
a {
padding-block: var(--space-1);
}
.sub-menu {
a {
padding-left: var(--space-5);
position: relative;
isolation: isolate;
&::before {
content: "";
position: absolute;
top: 0.813rem;
left: 0;
height: calc(var(--space-1) / 2);
width: var(--space-2);
background-color: var(--color-primary);
}
}
}
}
}
.footer-contact-details {
p {
&:nth-child(2),
&:nth-child(3) {
display: flex;
gap: var(--clamp-2-3);
align-items: center;
&::before {
content: "";
display: block;
min-width: var(--space-4);
aspect-ratio: 1;
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
}
&:nth-child(2) {
&::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' fill='none' viewBox='0 0 20 15'%3E%3Cpath fill='%23000' d='M1.875 0A1.875 1.875 0 0 0 .75 3.375l8.125 6.094c.668.5 1.582.5 2.25 0l8.125-6.094A1.876 1.876 0 0 0 18.125 0zM0 5.156V12.5C0 13.879 1.121 15 2.5 15h15c1.379 0 2.5-1.121 2.5-2.5V5.156l-7.75 5.813a3.75 3.75 0 0 1-4.5 0z'/%3E%3C/svg%3E");
}
}
&:nth-child(3) {
&::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='20' fill='none' viewBox='0 0 15 20'%3E%3Cpath fill='%23000' d='M.004 7.324C.004 3.278 3.362 0 7.502 0S15 3.278 15 7.324c0 4.633-4.694 10.187-6.655 12.303-.46.497-1.23.497-1.69 0C4.695 17.511 0 11.957 0 7.324zm7.498 2.618c.663 0 1.299-.262 1.767-.728a2.48 2.48 0 0 0 0-3.515 2.506 2.506 0 0 0-3.534 0 2.48 2.48 0 0 0 0 3.515 2.5 2.5 0 0 0 1.767.728'/%3E%3C/svg%3E");
}
}
}
}
}
.footer-end {
background-color: var(--color-secondary-dark);
.site-container {
padding-block: var(--space-4);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2) var(--clamp-4-6);
}
.cj-creative {
font-family: var(--font-family-cj);
strong,
b {
--font-weight-bold: 700;
}
}
} @media (width >= 36rem) {
.footer-main {
.menu-container {
.footer-links-menu {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
.menu-item {
flex-basis: calc(50% - ((var(--clamp-4-6) * 1) / 2));
}
}
}
}
.footer-end {
.site-container {
flex-direction: row;
justify-content: space-between;
}
}
}
@media (width >= 48rem) {
.footer-main {
flex-direction: row;
flex-wrap: wrap;
.footer-contact-details {
flex-basis: calc(40% - ((var(--clamp-4-6) * 1) / 2));
}
.menu-container {
flex-basis: calc(60% - ((var(--clamp-4-6) * 1) / 2));
}
}
}
@media (width >= 75rem) {
.footer-main {
.logo {
flex-basis: calc(20% - ((var(--clamp-4-6) * 2) / 3));
}
.menu-container {
flex-basis: calc(49% - ((var(--clamp-4-6) * 2) / 3));
}
.footer-contact-details {
flex-basis: calc(31% - ((var(--clamp-4-6) * 2) / 3));
}
}
}
} .logo {
height: clamp(3.5rem, 5.357vw + 2.429rem, 5rem);
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-2);
transition: height 0.4s ease;
.logo-crest {
position: relative;
isolation: isolate;
width: clamp(4.12rem, 6.493vw + 2.821rem, 5.938rem);
height: clamp(3.5rem, 5.357vw + 2.429rem, 5rem);
transition:
width 0.4s ease,
height 0.4s ease;
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.crest {
opacity: 1;
.crest-color {
fill: var(--color-primary);
}
.crest-left {
fill: var(--color-red);
}
.crest-right {
fill: var(--color-blue);
}
}
&.crest-outline {
opacity: 0;
.crest-color {
fill: var(--color-neutral-100);
}
.crest-outline-color {
stroke: var(--color-neutral-100);
}
}
&.crest,
&.crest-outline {
transition: opacity 0.4s ease;
}
}
}
.logo-text {
font-size: clamp(var(--space-3), 1.843vw + 0.381rem, var(--space-4));
color: var(--text-primary);
transition: color 0.4s ease;
& > span {
display: block;
font-weight: var(--font-weight-bold);
}
}
&:focus-visible {
outline-color: var(--text-primary);
}
}
button,
.button {
display: inline-flex;
border: calc(var(--space-1) / 4) solid var(--background-button);
border-radius: var(--space-2);
padding: var(--space-3) var(--space-6);
background-color: var(--background-button);
color: var(--text-button);
font-weight: var(--font-weight-bold);
text-align: center;
text-decoration: none;
transition: scale 0.4s ease;
&:hover,
&:focus {
opacity: 1;
scale: 1.04;
}
&::selection {
background-color: var(--background-button);
}
&:focus-visible {
outline-color: var(--background-button);
} &.gold {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-neutral-8);
&::selection {
background-color: var(--color-primary);
}
&:focus-visible {
outline-color: var(--color-primary);
}
}
&.green {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: var(--color-neutral-100);
&::selection {
background-color: var(--color-secondary);
}
&:focus-visible {
outline-color: var(--color-secondary);
}
}
}
.match-listing {
display: flex;
gap: var(--clamp-4-6);
.list-item {
.match-card {
padding: var(--clamp-4-6);
border: calc(var(--space-1) / 4) solid var(--background-level-1);
border-radius: var(--clamp-2-3);
height: 100%;
display: flex;
flex-direction: column;
gap: var(--space-4);
box-shadow: var(--box-shadow);
transition: background-color 0.4s ease;
.match-title {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--space-2);
}
.match-details {
display: flex;
flex-direction: column;
gap: var(--space-2) var(--clamp-4-6);
.match-info {
display: flex;
gap: var(--space-4);
align-items: center;
.icon {
min-width: var(--space-5);
aspect-ratio: 1;
mask-size: contain;
background-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
&.date-time {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='currentColor' d='M18.125 10a8.125 8.125 0 1 1-16.25 0 8.125 8.125 0 0 1 16.25 0M0 10a10 10 0 1 0 20 0 10 10 0 0 0-20 0m9.063-5.312V10c0 .313.156.605.417.781l3.75 2.5a.935.935 0 0 0 1.301-.261.934.934 0 0 0-.261-1.301L10.938 9.5V4.688A.935.935 0 0 0 10 3.75a.935.935 0 0 0-.937.938'/%3E%3C/svg%3E");
}
&.match-type-league {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='17' fill='none'%3E%3Cpath fill='currentColor' d='M.968 0A.97.97 0 0 0 0 .98v1.962c0 .544.431.981.968.981h1.935a.97.97 0 0 0 .968-.98V.98A.97.97 0 0 0 2.903 0zm6.129.654c-.714 0-1.29.584-1.29 1.308 0 .723.576 1.307 1.29 1.307H18.71c.713 0 1.29-.584 1.29-1.307 0-.724-.577-1.308-1.29-1.308zm0 6.538c-.714 0-1.29.585-1.29 1.308s.576 1.308 1.29 1.308H18.71c.713 0 1.29-.585 1.29-1.308s-.577-1.308-1.29-1.308zm0 6.539c-.714 0-1.29.584-1.29 1.308 0 .723.576 1.307 1.29 1.307H18.71c.713 0 1.29-.584 1.29-1.307 0-.724-.577-1.308-1.29-1.308zM0 7.519v1.962c0 .543.431.98.968.98h1.935a.97.97 0 0 0 .968-.98V7.519a.97.97 0 0 0-.968-.98H.968a.97.97 0 0 0-.968.98m.968 5.558a.97.97 0 0 0-.968.98v1.962c0 .544.431.981.968.981h1.935a.97.97 0 0 0 .968-.98v-1.962a.97.97 0 0 0-.968-.981z'/%3E%3C/svg%3E");
}
&.match-type-cup {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='currentColor' d='M5.611.004h8.777c1.039 0 1.885.851 1.846 1.882q-.011.311-.028.617h1.944c1.022 0 1.924.844 1.845 1.945-.294 4.05-2.37 6.277-4.623 7.44-.62.32-1.25.559-1.85.735-.791 1.117-1.614 1.706-2.268 2.023V17.5h2.507a1.25 1.25 0 1 1 0 2.5H6.238a1.25 1.25 0 1 1 0-2.5h2.508v-2.854c-.627-.301-1.407-.86-2.167-1.887a9.5 9.5 0 0 1-2.269-.902C2.19 10.674.28 8.444.004 4.441-.07 3.343.827 2.5 1.85 2.5h1.943c-.011-.204-.02-.407-.027-.618C3.726.847 4.573 0 5.61 0zM3.934 4.378H1.881c.243 3.308 1.767 4.964 3.339 5.843-.565-1.457-1.031-3.36-1.286-5.843m10.913 5.655c1.587-.93 3.02-2.581 3.264-5.655h-2.05c-.243 2.378-.681 4.226-1.214 5.655'/%3E%3C/svg%3E");
}
&.venue-tbc,
&.venue-home-away {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='20' fill='none'%3E%3Cpath fill='%23000' d='M.004 7.324C.004 3.278 3.362 0 7.502 0S15 3.278 15 7.324c0 4.633-4.694 10.187-6.655 12.303-.46.497-1.23.497-1.69 0C4.695 17.511 0 11.957 0 7.324zm7.498 2.618c.663 0 1.299-.262 1.767-.728a2.48 2.48 0 0 0 0-3.515 2.506 2.506 0 0 0-3.534 0 2.48 2.48 0 0 0 0 3.515 2.5 2.5 0 0 0 1.767.728'/%3E%3C/svg%3E");
}
&.venue-home {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='currentColor' d='M9.378.24a.933.933 0 0 1 1.25 0l9.06 8.126a.935.935 0 0 1 .07 1.324.934.934 0 0 1-1.323.07l-.313-.28v8.02c0 1.379-1.12 2.5-2.5 2.5H4.377a2.5 2.5 0 0 1-2.5-2.5V9.48l-.312.28A.94.94 0 0 1 .24 9.69a.94.94 0 0 1 .07-1.324zm.625 1.957L3.755 7.803v9.7c0 .344.281.626.625.626h1.874v-4.063a2.81 2.81 0 0 1 2.812-2.813h1.874a2.81 2.81 0 0 1 2.812 2.813v4.063h1.875a.627.627 0 0 0 .625-.625v-9.7L10.003 2.2zM8.13 18.13h3.749v-4.063a.935.935 0 0 0-.937-.938H9.066a.935.935 0 0 0-.937.938z'/%3E%3C/svg%3E");
}
&.venue-away,
&.venue-neutral {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='currentColor' d='M20 3.75c0 1.96-2.309 4.887-3.305 6.055a.59.59 0 0 1-.566.195H12.5c-.691 0-1.25.559-1.25 1.25s.559 1.25 1.25 1.25h3.75a3.751 3.751 0 0 1 0 7.5H5.453c.34-.387.754-.883 1.172-1.437.246-.329.5-.688.742-1.063h8.883c.691 0 1.25-.559 1.25-1.25S16.941 15 16.25 15H12.5a3.751 3.751 0 0 1 0-7.5h1.555c-.82-1.23-1.555-2.645-1.555-3.75a3.751 3.751 0 0 1 7.5 0M4.574 19.106l-.394.44-.07.079-.008-.008a.58.58 0 0 1-.782-.07C2.336 18.477 0 15.723 0 13.75a3.751 3.751 0 0 1 7.5 0c0 1.172-.824 2.617-1.7 3.824a23 23 0 0 1-1.202 1.504zM5 13.75a1.25 1.25 0 1 0-2.5 0 1.25 1.25 0 0 0 2.5 0M16.25 5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
}
}
} &.league {
.match-details {
.match-info {
.icon {
background-color: var(--color-secondary-light);
}
}
}
&:hover {
background-color: light-dark(
hsl(from var(--color-secondary-light) h s l / 0.075),
hsl(from var(--color-secondary-light) h s l / 0.05)
);
}
} &.cup {
.match-details {
.match-info {
.icon {
background-color: light-dark(
var(--color-primary-dark),
var(--color-primary)
);
}
}
}
&:hover {
background-color: light-dark(
hsl(from var(--color-primary-dark) h s l / 0.075),
hsl(from var(--color-primary) h s l / 0.05)
);
}
}
}
}
}
.social-media-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: var(--space-3);
align-items: center;
.social-link {
width: var(--space-8);
aspect-ratio: 1;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
background-color: currentColor;
transition: color 0.4s ease;
&.facebook {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='currentColor' d='M32 16.098C32 7.208 24.837 0 16.002 0 7.163.002 0 7.207 0 16.1 0 24.133 5.851 30.792 13.498 32V20.751h-4.06V16.1h4.064v-3.55c0-4.033 2.39-6.26 6.044-6.26 1.751 0 3.581.313 3.581.313v3.96H21.11c-1.985 0-2.605 1.242-2.605 2.515v3.02h4.435l-.708 4.651h-3.73v11.249C26.15 30.79 32 24.131 32 16.098'/%3E%3C/svg%3E");
}
&.instagram {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='currentColor' d='M16 0c-4.342 0-4.888.02-6.594.096C7.7.176 6.538.444 5.52.84a7.8 7.8 0 0 0-2.834 1.846A7.8 7.8 0 0 0 .84 5.52C.444 6.536.174 7.7.096 9.4.02 11.11 0 11.654 0 16.002c0 4.344.02 4.888.096 6.594.08 1.704.348 2.866.744 3.884a7.86 7.86 0 0 0 1.846 2.834 7.8 7.8 0 0 0 2.832 1.846c1.02.396 2.18.666 3.884.744C11.11 31.98 11.654 32 16 32s4.888-.02 6.596-.096c1.702-.08 2.868-.348 3.886-.744a7.8 7.8 0 0 0 2.832-1.846 7.86 7.86 0 0 0 1.846-2.834c.394-1.018.664-2.18.744-3.884C31.98 20.89 32 20.346 32 16s-.02-4.89-.096-6.598c-.08-1.702-.35-2.866-.744-3.882a7.8 7.8 0 0 0-1.846-2.834A7.8 7.8 0 0 0 26.48.84C25.46.444 24.296.174 22.594.096 20.886.02 20.344 0 15.996 0zm-1.434 2.884h1.436c4.272 0 4.778.014 6.464.092 1.56.07 2.408.332 2.972.55.746.29 1.28.638 1.84 1.198s.906 1.092 1.196 1.84c.22.562.48 1.41.55 2.97.078 1.686.094 2.192.094 6.462s-.016 4.778-.094 6.464c-.07 1.56-.332 2.406-.55 2.97a5 5 0 0 1-1.198 1.838c-.56.56-1.092.906-1.84 1.196-.56.22-1.408.48-2.97.552-1.686.076-2.192.094-6.464.094s-4.78-.018-6.466-.094c-1.56-.072-2.406-.332-2.97-.552a5 5 0 0 1-1.84-1.196 5 5 0 0 1-1.2-1.84c-.218-.562-.48-1.41-.55-2.97-.076-1.686-.092-2.192-.092-6.466s.016-4.776.092-6.462c.072-1.56.332-2.408.552-2.972.29-.746.638-1.28 1.198-1.84a4.94 4.94 0 0 1 1.84-1.196c.564-.22 1.41-.48 2.97-.552 1.476-.068 2.048-.088 5.03-.09zm9.976 2.656a1.92 1.92 0 1 0 0 3.841 1.92 1.92 0 0 0 0-3.841m-8.54 2.244a8.218 8.218 0 1 0-.256 16.433 8.218 8.218 0 0 0 .256-16.433m0 2.882a5.335 5.335 0 1 1 0 10.67 5.335 5.335 0 0 1 0-10.67'/%3E%3C/svg%3E");
}
}
}
.fluentform {
margin-bottom: 0;
.frm-fluent-form { .ff-t-container {
gap: var(--clamp-4-6);
}
.ff-el-group {
margin-bottom: var(--clamp-4-6);
.ff-el-input--label {
margin-bottom: var(--space-1);
label {
font-weight: var(--font-weight-bold);
&:after {
color: var(--color-red) !important;
content: "*" !important;
margin-left: var(--space-1) !important;
}
}
}
.ff-el-input--content {
.ff-el-form-control {
padding: var(--space-3) var(--space-4);
background-color: var(--background-level-1);
border: calc(var(--space-1) / 4) solid var(--background-level-4);
border-radius: var(--clamp-2-3);
color: var(--text-primary);
transition: border 0.4s ease;
&::placeholder {
color: var(--text-secondary);
}
}
}
&.ff-el-is-error {
.ff-el-input--content {
.ff-el-form-control {
border: calc(var(--space-1) / 4) solid var(--color-red);
}
.text-danger {
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
color: var(--color-red);
}
}
}
&.ff_submit_btn_wrapper {
margin-bottom: 0;
button {
border: none !important;
border-radius: var(--space-2) !important;
padding: var(--space-3) var(--space-6) !important;
background-color: var(--color-primary) !important;
color: var(--color-neutral-8) !important;
font-weight: var(--font-weight-bold) !important;
transition: opacity 0.4s ease;
}
}
}
}
}
html {
scroll-behavior: smooth;
color-scheme: light dark; .mce-content-body {
background-color: var(--color-neutral-100);
color: var(--color-neutral-14);
padding: var(--space-2);
> * {
margin-block: var(--space-2);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
button:not(.gold, .green),
.button:not(.gold, .green) {
border: calc(var(--space-1) / 4) solid var(--color-neutral-88);
background-color: var(--color-neutral-88);
}
}
body {
background-color: var(--background-primary);
font-family: var(--font-family-primary);
font-weight: var(--font-weight-default);
font-optical-sizing: auto;
font-style: normal;
font-size: var(--font-size-default);
line-height: 1.5;
color: var(--text-primary);
text-wrap: pretty;
strong,
b {
font-weight: var(--font-weight-bold);
} ::selection {
background-color: var(--selection);
text-shadow: none;
} a {
display: inline-flex;
color: currentColor;
text-decoration: none;
&:focus-visible {
outline: calc(var(--space-1) / 4) solid var(--text-primary);
outline-offset: var(--space-1);
border-radius: var(--space-1);
}
}
header,
footer {
flex: 0 0 auto;
}
main {
margin-top: var(--header-height);
flex: 1 0 auto;
&:has(> .hero:first-child) {
margin-top: 0;
padding-block: 0;
}
section.section {
scroll-margin-top: var(--header-height);
&:not(.hero) {
margin-block: var(--clamp-8-24);
}
&.content-media {
margin-block: var(--clamp-4-12);
&:last-of-type {
margin-bottom: var(--clamp-8-24);
}
}
} .cms-content { & > :not(script, style) {
margin-block: var(--clamp-4-6);
&:first-child {
margin-top: 0;
}
&:last-child,
&:has(+ script, + style) {
margin-bottom: 0;
}
} a:not(.button) {
font-weight: var(--font-weight-bold);
text-decoration: underline;
transition: opacity 0.4s ease;
&:hover {
opacity: 0.6;
}
} ul,
ol {
li {
position: relative;
isolation: isolate;
padding-left: var(--space-5);
margin-bottom: var(--space-2);
&::before {
content: "";
position: absolute;
top: 0.656rem;
left: 0;
height: calc(var(--space-1) / 2);
width: var(--space-2);
background-color: var(--color-primary);
border-radius: var(--border-radius-max);
}
&:last-of-type {
margin-bottom: 0;
}
}
} .button-container {
display: flex;
flex-wrap: wrap;
gap: var(--clamp-2-3);
&:only-child {
margin-top: 0;
}
&[style*="text-align: center"],
&[style*="text-align: right"] {
justify-content: center;
} @media (width >= 36rem) {
&[style*="text-align: right"] {
justify-content: flex-end;
}
}
}
} .content-contact-details {
p {
&:nth-child(3),
&:nth-child(4) {
display: flex;
gap: var(--space-3);
align-items: center;
&::before {
content: "";
display: block;
width: var(--space-4);
aspect-ratio: 1;
background-color: currentColor;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
}
&:nth-child(3) {
&::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='15' fill='none' viewBox='0 0 20 15'%3E%3Cpath fill='%23000' d='M1.875 0A1.875 1.875 0 0 0 .75 3.375l8.125 6.094c.668.5 1.582.5 2.25 0l8.125-6.094A1.876 1.876 0 0 0 18.125 0zM0 5.156V12.5C0 13.879 1.121 15 2.5 15h15c1.379 0 2.5-1.121 2.5-2.5V5.156l-7.75 5.813a3.75 3.75 0 0 1-4.5 0z'/%3E%3C/svg%3E");
}
}
&:nth-child(4) {
&::before {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='20' fill='none' viewBox='0 0 15 20'%3E%3Cpath fill='%23000' d='M.004 7.324C.004 3.278 3.362 0 7.502 0S15 3.278 15 7.324c0 4.633-4.694 10.187-6.655 12.303-.46.497-1.23.497-1.69 0C4.695 17.511 0 11.957 0 7.324zm7.498 2.618c.663 0 1.299-.262 1.767-.728a2.48 2.48 0 0 0 0-3.515 2.506 2.506 0 0 0-3.534 0 2.48 2.48 0 0 0 0 3.515 2.5 2.5 0 0 0 1.767.728'/%3E%3C/svg%3E");
}
}
}
} .image-container {
position: relative;
isolation: isolate;
aspect-ratio: 4 / 3;
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--clamp-2-3);
object-fit: cover;
object-position: center;
}
}
} .section-404 {
text-align: center;
} .cky-consent-container,
.cky-modal {
.cky-consent-bar {
background-color: var(--background-primary) !important;
box-shadow: none !important;
border: none !important;
border-top: calc(var(--space-1) / 4) solid var(--background-level-1) !important;
padding: 0 !important;
.cky-notice {
max-width: var(--container-xl);
margin-inline: auto;
padding: var(--clamp-4-6);
.cky-title,
.cky-notice-des {
color: var(--text-primary) !important;
}
.cky-notice-group {
display: flex;
flex-direction: column;
gap: var(--clamp-4-6);
}
}
} .cky-notice-btn-wrapper,
.cky-prefrence-btn-wrapper {
margin: 0;
width: 100%;
flex-direction: column;
gap: var(--space-2);
}
.cky-btn {
justify-content: center !important;
text-align: center !important;
margin: 0 !important;
border: calc(var(--space-1) / 4) solid var(--color-primary) !important;
border-radius: var(--space-2);
padding: var(--space-3) var(--space-6) !important;
background-color: var(--color-primary) !important;
color: var(--color-neutral-8) !important;
font-weight: var(--font-weight-bold) !important;
&:hover {
opacity: 1 !important;
}
&:focus-visible {
outline-color: var(--color-primary) !important;
}
&::selection {
background-color: var(--selection) !important;
}
&.cky-btn-customize,
&.cky-btn-reject,
&.cky-btn-preferences {
background-color: transparent !important;
color: var(--text-primary) !important;
}
}
.cky-show-desc-btn {
color: currentColor !important;
text-decoration: underline;
&:hover {
text-decoration: underline !important;
}
} @media (width >= 36rem) {
.cky-consent-bar {
.cky-notice {
.cky-notice-group {
display: flex;
flex-direction: column;
gap: var(--clamp-4-6);
}
}
} .cky-notice-btn-wrapper,
.cky-prefrence-btn-wrapper {
flex-direction: row;
}
}
@media (width >= 48rem) {
.cky-consent-bar {
.cky-notice {
.cky-notice-group {
flex-direction: row;
}
}
} .cky-notice-btn-wrapper,
.cky-prefrence-btn-wrapper {
width: auto;
}
}
}
.cky-modal {
background: var(--background-primary) !important;
box-shadow: var(--box-shadow) !important;
border-radius: var(--clamp-4-6) !important;
color: var(--text-primary) !important;
.cky-preference-center {
background-color: var(--background-primary) !important;
color: var(--text-primary) !important;
border-color: var(--background-level-1) !important;
.cky-preference-title,
.cky-preference-content-wrapper,
.cky-accordion-btn,
.cky-accordion-header-des {
color: var(--text-primary) !important;
}
.cky-always-active {
color: var(--color-secondary-light) !important;
}
.cky-audit-table {
color: var(--text-primary) !important;
background-color: var(--background-level-1) !important;
border-color: var(--background-level-1) !important;
}
.cky-footer-wrapper {
.cky-footer-shadow {
background: linear-gradient(
hsl(from var(--background-primary) h s l / 0%),
hsl(from var(--background-primary) h s l / 100%)
) !important;
}
}
}
}
.cky-btn-revisit-wrapper {
display: none !important;
}
.cky-revisit-bottom-left {
display: none !important;
left: auto !important;
right: var(--space-4) !important;
}
}
}.hero {
--text-primary: var(--color-neutral-100);
color: var(--text-primary);
width: 100%;
position: relative;
isolation: isolate;
&::before,
.hero-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&::before {
content: "";
z-index: -1;
background: linear-gradient(
180deg,
hsl(from var(--color-neutral-0) h s l / 0.5),
hsl(from var(--color-neutral-0) h s l / 0) 100%
);
}
.hero-image {
object-fit: cover;
object-position: center;
z-index: -2;
}
.cms-content {
max-width: var(--columns-8);
}
button:not(.gold, .green),
.button:not(.gold, .green) {
background-color: var(--color-neutral-100);
border-color: var(--color-neutral-100);
color: var(--color-neutral-8);
&::selection {
background-color: var(--color-neutral-100);
}
&:focus-visible {
outline-color: var(--color-neutral-100);
}
} &.small {
.site-container {
padding-block: var(--clamp-16-32) var(--clamp-8-24);
}
}
&.large {
.site-container {
padding-block: var(--clamp-16-64) var(--clamp-8-24);
}
}
} main {
> .hero {
&:first-child {
padding-top: var(--header-height);
}
}
}.matches-upcoming {
.site-container {
display: flex;
flex-direction: column;
gap: var(--clamp-4-8);
.above-content {
display: flex;
flex-direction: column;
gap: var(--clamp-4-6);
.cms-content {
max-width: 64.5rem;
}
}
.match-listing {
flex-flow: row wrap;
justify-content: center;
.list-item {
flex: 0 0 100%;
align-self: stretch;
.match-card {
.match-info {
&:last-child {
flex: auto;
}
}
}
}
}
} @media (width >= 36rem) {
.site-container {
.above-content {
flex-direction: row;
align-items: baseline;
justify-content: space-between;
.updated-notice {
margin-left: auto;
}
}
}
}
@media (width >= 48rem) {
.site-container {
.match-listing {
.list-item {
flex-basis: calc(50% - (var(--clamp-4-6) / 2));
}
}
}
}
@media (width >= 62rem) {
.site-container {
.match-listing {
.list-item {
flex-basis: calc(33.333% - ((var(--clamp-4-6) * 2) / 3));
}
}
}
}
}.logo-slider {
.site-container {
display: flex;
flex-direction: column;
gap: var(--clamp-4-6);
.logo-container {
overflow: hidden;
.logo-track {
display: flex;
width: max-content;
animation: scroll 30s linear infinite;
.logo-item {
display: flex;
align-items: center;
margin-inline: var(--clamp-2-3);
img {
height: 140px;
width: auto;
object-fit: contain;
border: calc(var(--space-1) / 4) solid var(--background-level-1);
border-radius: var(--clamp-2-3);
box-shadow: var(--box-shadow);
transition: opacity 0.4 ease;
}
}
&:hover {
animation-play-state: paused;
.logo-item {
img {
opacity: 0.5;
}
}
}
.logo-item:hover {
img {
opacity: 1;
}
}
&:focus-within {
animation-play-state: paused;
}
}
}
}
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}