108 lines
2.0 KiB
CSS
108 lines
2.0 KiB
CSS
.button {
|
|
padding: var(--Space-x2) var(--Space-x15);
|
|
border-radius: var(--Corner-radius-md);
|
|
border: 0;
|
|
cursor: pointer;
|
|
background: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
color: var(--Text-Brand-OnPrimary-3-Accent);
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background:
|
|
linear-gradient(
|
|
0deg,
|
|
rgb(255 255 255 / 10%) 0%,
|
|
rgb(255 255 255 / 10%) 100%
|
|
),
|
|
var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
}
|
|
&:disabled {
|
|
background: var(--Surface-UI-Fill-Disabled);
|
|
color: var(--Text-Interactive-Disabled);
|
|
}
|
|
}
|
|
|
|
.text {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: var(--Space-x1);
|
|
}
|
|
|
|
.title {
|
|
color: var(--Text-Accent-Primary);
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: var(--Corner-radius-lg);
|
|
box-shadow: 0 2px 1px rgb(255 255 255 / 11%) inset;
|
|
padding: var(--Space-x2);
|
|
height: 400px;
|
|
width: 327px;
|
|
max-width: 100%;
|
|
color: var(--Text-Brand-OnPrimary-3-Accent);
|
|
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 2;
|
|
bottom: 158px;
|
|
left: 132px;
|
|
width: 360px;
|
|
height: 360px;
|
|
opacity: 0.3;
|
|
background: #e9aba3;
|
|
box-shadow: 192px 192px 192px;
|
|
border-radius: 9999px;
|
|
filter: blur(96px);
|
|
}
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 60px;
|
|
left: -210px;
|
|
width: 2465px;
|
|
height: 459px;
|
|
background-image: url("/_static/img/scandic-logotype.svg");
|
|
background-repeat: no-repeat;
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
z-index: 3;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.employeeNumber {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: var(--Base-Text-Inverted);
|
|
}
|
|
|
|
.top,
|
|
.bottom {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.middle {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 50px;
|
|
}
|
|
|
|
.footer {
|
|
text-align: center;
|
|
}
|