100 lines
1.7 KiB
CSS
100 lines
1.7 KiB
CSS
.text {
|
|
display: block;
|
|
font-family: var(--typography-Script-1-fontFamily);
|
|
text-transform: none;
|
|
}
|
|
|
|
.one {
|
|
font-size: clamp(
|
|
var(--typography-Script-1-Mobile-fontSize),
|
|
1.3vw + 14px,
|
|
var(--typography-Script-1-Desktop-fontSize)
|
|
);
|
|
font-weight: var(--typography-Script-1-fontWeight);
|
|
letter-spacing: var(--typography-Script-1-letterSpacing);
|
|
line-height: var(--typography-Script-1-lineHeight);
|
|
}
|
|
|
|
.two {
|
|
font-size: clamp(
|
|
var(--typography-Script-2-Mobile-fontSize),
|
|
0.6vw + 15px,
|
|
var(--typography-Script-2-Desktop-fontSize)
|
|
);
|
|
font-weight: var(--typography-Script-2-fontWeight);
|
|
letter-spacing: var(--typography-Script-2-letterSpacing);
|
|
line-height: var(--typography-Script-2-lineHeight);
|
|
}
|
|
|
|
.tiltedExtraSmall {
|
|
transform: rotate(-2deg);
|
|
}
|
|
|
|
.tiltedSmall {
|
|
transform: rotate(-3deg);
|
|
}
|
|
|
|
.tiltedMedium {
|
|
transform: rotate(-4deg) translate(0px, -15px);
|
|
}
|
|
|
|
.tiltedLarge {
|
|
transform: rotate(-13deg) translate(0px, -15px);
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.black {
|
|
color: var(--Main-Grey-100);
|
|
}
|
|
|
|
.burgundy {
|
|
color: var(--Scandic-Brand-Burgundy);
|
|
}
|
|
|
|
.pale {
|
|
color: var(--Scandic-Brand-Pale-Peach);
|
|
}
|
|
|
|
.peach80 {
|
|
color: var(--Base-Text-Medium-contrast);
|
|
}
|
|
|
|
.plosa {
|
|
color: var(--Primary-Light-On-Surface-Accent);
|
|
}
|
|
|
|
.red {
|
|
color: var(--Scandic-Brand-Scandic-Red);
|
|
}
|
|
|
|
.pink {
|
|
color: var(--Primary-Dark-On-Surface-Accent);
|
|
}
|
|
|
|
.secondaryLightAccent {
|
|
color: var(--Secondary-Light-On-Surface-Accent);
|
|
}
|
|
|
|
.tertiaryLightAccent {
|
|
color: var(--Tertiary-Light-On-Surface-Accent);
|
|
}
|
|
|
|
.primaryDimAccent {
|
|
color: var(--Primary-Dim-On-Surface-Accent);
|
|
}
|
|
|
|
.primaryStrongAccent {
|
|
color: var(--Primary-Strong-On-Surface-Accent);
|
|
}
|
|
|
|
.baseText {
|
|
color: var(--Base-Text-Inverted);
|
|
}
|