diff --git a/public/locales/en/brand-assets.json b/public/locales/en/brand-assets.json
index 5186d23..f09568f 100644
--- a/public/locales/en/brand-assets.json
+++ b/public/locales/en/brand-assets.json
@@ -1,103 +1,111 @@
{
- "hero": {
- "title": "Our brand assets",
- "text": "Learn how to use all the foundational elements of our brand, from colour to tone of voice, across product and marketing"
- },
- "logo": {
- "suptitle": "Taiko Logo",
- "button": "Download logo",
- "logos": [
- {
- "id": 1,
- "img": "/img/brand/taiko.zip",
- "background": "#F3F3F3"
- }, {
- "id": 2,
- "img": "/img/brand/logo-pw.svg",
- "background": "#10151B"
- }, {
- "id": 3,
- "img": "/img/brand/logo-ww.svg",
- "background": "#E81899"
- }, {
- "id": 4,
- "img": "/img/brand/logo-pw.svg",
- "background": "url(/img/brand/logo-background-1.jpg)",
- "backgroundImage": "url(/img/brand/background.jpg)"
- }
+ "hero": {
+ "title": "Our brand assets",
+ "text": "Learn how to use all the foundational elements of our brand, from colour to tone of voice, across product and marketing"
+ },
+ "logo": {
+ "suptitle": "Taiko Logo",
+ "button": "Download logo",
+ "logos": [
+ {
+ "id": 1,
+ "img": "/img/brand/taiko.zip",
+ "background": "#F3F3F3"
+ },
+ {
+ "id": 2,
+ "img": "/img/brand/logo-pw.svg",
+ "background": "#10151B"
+ },
+ {
+ "id": 3,
+ "img": "/img/brand/logo-ww.svg",
+ "background": "#E81899"
+ },
+ {
+ "id": 4,
+ "img": "/img/brand/logo-pw.svg",
+ "background": "url(/img/brand/logo-background-1.jpg)",
+ "backgroundImage": "url(/img/brand/background.jpg)"
+ }
+ ]
+ },
+ "colorPalette": {
+ "suptitle": "Color palette",
+ "colors": [
+ {
+ "title": "Primary",
+ "items": [
+ { "name": "Taiko Pink", "color": "#E81899" },
+ { "name": "Deep Gray", "color": "#0C101B" }
]
- },
- "colorPalette": {
- "suptitle": "Color palette",
- "colors": [
- {
- "title": "Primary",
- "items": [
- { "name": "Taiko Pink", "color": "#E91898" },
- { "name": "Deep Gray", "color": "#0C101B" }
- ]
- }, {
- "title": "Secondary",
- "items": [
- { "name": "", "color": "#5D07C8" },
- { "name": "", "color": "#6ECFB0" },
- { "name": "", "color": "#FC6264" },
- { "name": "", "color": "#FFE2A0" }
- ]
- }
+ },
+ {
+ "title": "Secondary",
+ "items": [
+ { "name": "", "color": "#5D07C8" },
+ { "name": "", "color": "#6ECFB0" },
+ { "name": "", "color": "#FC6264" },
+ { "name": "", "color": "#FFE2A0" }
]
- },
- "topography": {
- "suptitle": "Typography",
- "title": "We use the following typefaces to communicate as a brand",
- "downloadFont": "Download font",
- "list": [
- {
- "title": "Clash Grotesk",
- "text": "Our display font is clear and bold. Use it for short and sweet headlines.
The typeface can be a loud and proud hero or a humble supporting actor for all sorts of designs"
- }, {
- "title": "Public Sans",
- "text": "We use Public Sans on most occasions. It’s clean and legible as headings and body copy."
- }
+ }
+ ]
+ },
+ "topography": {
+ "suptitle": "Typography",
+ "title": "We use the following typefaces to communicate as a brand",
+ "downloadFont": "Download font",
+ "list": [
+ {
+ "title": "Clash Grotesk",
+ "text": "Our display font is clear and bold. Use it for short and sweet headlines.
The typeface can be a loud and proud hero or a humble supporting actor for all sorts of designs"
+ },
+ {
+ "title": "Public Sans",
+ "text": "We use Public Sans on most occasions. It’s clean and legible as headings and body copy."
+ }
+ ],
+ "fonts": [
+ {
+ "title": "Primary",
+ "fontFamily": "Clash Grotesk",
+ "font": "/img/brand/fonts-grotesk.svg",
+ "variants": [
+ {
+ "name": "Clash Grotesk Semibold",
+ "weight": 600
+ },
+ {
+ "name": "Clash Grotesk Medium",
+ "weight": 500
+ }
],
- "fonts": [
- {
- "title": "Primary",
- "fontFamily": "Clash Grotesk",
- "font": "/img/brand/fonts-grotesk.svg",
- "variants": [
- {
- "name": "Clash Grotesk Semibold",
- "weight": 600
- }, {
- "name": "Clash Grotesk Medium",
- "weight": 500
- }
- ],
- "url": "/files/ClashGrotesk.zip"
- },
- {
- "title": "Secondary",
- "fontFamily": "Public Sans",
- "font": "/img/brand/fonts-sans.svg",
- "variants": [
- {
- "name": "Public Sans Bold",
- "weight": 700
- }, {
- "name": "Public Sans Medium",
- "weight": 500
- }, {
- "name": "Public Sans Regular",
- "weight": 400
- }
- ],
- "url": "/files/PublicSans.zip"
- }
- ]
- },
- "brandBook": {
- "title": "Our brand book",
- "button": "Download brand book"
- }
-}
\ No newline at end of file
+ "url": "/files/ClashGrotesk.zip"
+ },
+ {
+ "title": "Secondary",
+ "fontFamily": "Public Sans",
+ "font": "/img/brand/fonts-sans.svg",
+ "variants": [
+ {
+ "name": "Public Sans Bold",
+ "weight": 700
+ },
+ {
+ "name": "Public Sans Medium",
+ "weight": 500
+ },
+ {
+ "name": "Public Sans Regular",
+ "weight": 400
+ }
+ ],
+ "url": "/files/PublicSans.zip"
+ }
+ ]
+ },
+ "brandBook": {
+ "title": "Our brand book",
+ "button": "Download brand book"
+ }
+}
diff --git a/src/widgets/footer/ui/footer-nav/footer-nav.module.scss b/src/widgets/footer/ui/footer-nav/footer-nav.module.scss
index f0bee9a..52f4253 100644
--- a/src/widgets/footer/ui/footer-nav/footer-nav.module.scss
+++ b/src/widgets/footer/ui/footer-nav/footer-nav.module.scss
@@ -1,120 +1,120 @@
.root {
- display: flex;
- align-items: center;
- gap: 65px;
+ display: flex;
+ align-items: center;
+ gap: 65px;
}
.content {
- max-width: 212px;
- width: 100%;
+ max-width: 212px;
+ width: 100%;
- display: flex;
- flex-direction: column;
- gap: 16px;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
}
.title {
- font: 500 36px/1.15 $kFontClashGrotesk;
- letter-spacing: -.015em;
- color: $kColorBlack;
+ font: 500 36px/1.15 $kFontClashGrotesk;
+ letter-spacing: -0.015em;
+ color: $kColorBlack;
}
.text {
- font: 400 16px/1.5 $kFontPublicSans;
- color: $kColorGray;
+ font: 400 16px/1.5 $kFontPublicSans;
+ color: $kColorGray;
}
.nav {
- flex-grow: 1;
- padding: 45px;
- border-radius: 20px;
- background: $kColorThemeWhite;
-
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- gap: 30px;
+ flex-grow: 1;
+ padding: 45px;
+ border-radius: 20px;
+ background: $kColorThemeWhite;
+
+ display: flex;
+ align-items: flex-end;
+ justify-content: space-between;
+ gap: 30px;
}
.nav_list {
- max-width: 550px;
- width: 100%;
- display: flex;
- justify-content: space-between;
- gap: 25px;;
+ max-width: 550px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ gap: 25px;
}
.nav_item {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.nav_title {
- font: 700 16px/1.5 $kFontPublicSans;
- letter-spacing: .05em;
- color: #191E28;
- text-transform: uppercase;
+ font: 700 16px/1.5 $kFontPublicSans;
+ letter-spacing: 0.05em;
+ color: #191e28;
+ text-transform: uppercase;
}
.nav_link {
- margin-top: 20px;
+ margin-top: 20px;
- font: 400 16px/1.5 $kFontPublicSans;
- letter-spacing: .05em;
- color: #444A55;
- transition: color .1s ease;
+ font: 400 16px/1.5 $kFontPublicSans;
+ letter-spacing: 0.05em;
+ color: #444a55;
+ transition: color 0.1s ease;
- + .nav_link {
- margin-top: 16px;
- }
+ + .nav_link {
+ margin-top: 16px;
+ }
- &:hover {
- color: #E91898;
- }
+ &:hover {
+ color: #e81899;
+ }
}
.copyright {
- font: 400 16px/1.5 $kFontPublicSans;
- color: #444A55;
- white-space: nowrap;
+ font: 400 16px/1.5 $kFontPublicSans;
+ color: #444a55;
+ white-space: nowrap;
}
@media screen and (max-width: $kTabletXXL) {
- .root {
- gap: 36px;
- }
+ .root {
+ gap: 36px;
+ }
- .nav {
- padding: 28px;
- }
+ .nav {
+ padding: 28px;
+ }
}
@media screen and (max-width: $kTabletM) {
- .root {
- flex-direction: column;
- }
-
- .nav {
- width: 100%;
- order: -1;
- }
-
- .content {
- text-align: center;
- }
+ .root {
+ flex-direction: column;
+ }
+
+ .nav {
+ width: 100%;
+ order: -1;
+ }
+
+ .content {
+ text-align: center;
+ }
}
@media screen and (max-width: $kMobileXXL) {
- .nav_list {
- flex-wrap: wrap;
- gap: 40px;
- }
-
- .nav_link {
- white-space: nowrap;
- }
-
- .copyright {
- margin-top: 24px;
- }
-}
\ No newline at end of file
+ .nav_list {
+ flex-wrap: wrap;
+ gap: 40px;
+ }
+
+ .nav_link {
+ white-space: nowrap;
+ }
+
+ .copyright {
+ margin-top: 24px;
+ }
+}