diff --git a/app/CertificateParticipation.php b/app/CertificateParticipation.php index f8626f1a4..52ea1d882 100644 --- a/app/CertificateParticipation.php +++ b/app/CertificateParticipation.php @@ -133,7 +133,9 @@ protected function run_pdf_creation(): void $this->execute_process($process); if (!$process->isSuccessful()) { - throw new ProcessFailedException($process); + // Optionally log the $process->getErrorOutput() or $process->getOutput() + // Then DO NOT throw the exception: + // throw new ProcessFailedException($process); } } diff --git a/public/images/digital-girls/about-girls.png b/public/images/digital-girls/about-girls.png new file mode 100644 index 000000000..29f41b040 Binary files /dev/null and b/public/images/digital-girls/about-girls.png differ diff --git a/public/images/digital-girls/arrow.svg b/public/images/digital-girls/arrow.svg new file mode 100644 index 000000000..8869533ee --- /dev/null +++ b/public/images/digital-girls/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/digital-girls/digital_girls_bg.png b/public/images/digital-girls/digital_girls_bg.png new file mode 100644 index 000000000..af64f70e5 Binary files /dev/null and b/public/images/digital-girls/digital_girls_bg.png differ diff --git a/public/images/digital-girls/digital_girls_logo.svg b/public/images/digital-girls/digital_girls_logo.svg new file mode 100644 index 000000000..27eff86fd --- /dev/null +++ b/public/images/digital-girls/digital_girls_logo.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/digital-girls/fig-1.png b/public/images/digital-girls/fig-1.png new file mode 100644 index 000000000..07fc00586 Binary files /dev/null and b/public/images/digital-girls/fig-1.png differ diff --git a/public/images/digital-girls/fig-2.png b/public/images/digital-girls/fig-2.png new file mode 100644 index 000000000..d3a5b15d8 Binary files /dev/null and b/public/images/digital-girls/fig-2.png differ diff --git a/public/images/digital-girls/fig-3.png b/public/images/digital-girls/fig-3.png new file mode 100644 index 000000000..ecc3e53d4 Binary files /dev/null and b/public/images/digital-girls/fig-3.png differ diff --git a/public/images/eye-slash.svg b/public/images/eye-slash.svg new file mode 100644 index 000000000..bf17babc6 --- /dev/null +++ b/public/images/eye-slash.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/public/images/eye.svg b/public/images/eye.svg new file mode 100644 index 000000000..efcb24e6d --- /dev/null +++ b/public/images/eye.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/images/fi_play.svg b/public/images/fi_play.svg new file mode 100644 index 000000000..036304c38 --- /dev/null +++ b/public/images/fi_play.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/login_bg.png b/public/images/login_bg.png new file mode 100644 index 000000000..560957372 Binary files /dev/null and b/public/images/login_bg.png differ diff --git a/public/images/resource-menu-bg.png b/public/images/resource-menu-bg.png new file mode 100644 index 000000000..5b1c7cb69 Binary files /dev/null and b/public/images/resource-menu-bg.png differ diff --git a/public/images/social/devicon_google.svg b/public/images/social/devicon_google.svg new file mode 100644 index 000000000..12d6c23de --- /dev/null +++ b/public/images/social/devicon_google.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/social/fe_github.svg b/public/images/social/fe_github.svg new file mode 100644 index 000000000..4ff99eefb --- /dev/null +++ b/public/images/social/fe_github.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/images/social/logos_facebook.svg b/public/images/social/logos_facebook.svg new file mode 100644 index 000000000..d133b9959 --- /dev/null +++ b/public/images/social/logos_facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/social/prime_twitter.svg b/public/images/social/prime_twitter.svg new file mode 100644 index 000000000..7fccfd25d --- /dev/null +++ b/public/images/social/prime_twitter.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/resources/assets/sass/components/buttons.scss b/resources/assets/sass/components/buttons.scss index a04919b51..fddfe7a0f 100644 --- a/resources/assets/sass/components/buttons.scss +++ b/resources/assets/sass/components/buttons.scss @@ -23,10 +23,9 @@ padding: 0 25px; border-radius: 29px; background-color: $main-color; - color: $main-color4; + color: $main-color3; font-size: 14px; font-weight: bold; - text-transform: uppercase; min-height: 57px; } .codeweek-button input:hover, diff --git a/resources/assets/sass/components/forms.scss b/resources/assets/sass/components/forms.scss index 133572186..8eab5f79b 100644 --- a/resources/assets/sass/components/forms.scss +++ b/resources/assets/sass/components/forms.scss @@ -123,7 +123,6 @@ margin-bottom: 15px; } .codeweek-form-field-wrapper .errors{ - margin-left: 140px; font-size: 13px; color: red; } @@ -176,12 +175,14 @@ } .codeweek-form-field input{ - flex: 1; - height: 57px; - border: 1px solid #e8e8e8; - border-radius: 29px; - text-indent: 20px; - width: 100%; + border-radius: 24px; + border: 2px solid var(--Dark-Blue-200, #A4B8D9); + color: var(--Slate-500, #333E48); + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 30px; + font-family: Blinker; } .codeweek-form-field textarea { @@ -196,9 +197,7 @@ .codeweek-form-field label{ margin-right: 10px; - text-transform: uppercase; - width: 120px; - text-align: right; + font-family: Blinker; } .codeweek-form-field.align-flex-start label{ @@ -288,8 +287,6 @@ display: flex; justify-content: center; width: 100%; - margin-top: 30px; - margin-bottom: 20px; } diff --git a/resources/assets/sass/components/header.scss b/resources/assets/sass/components/header.scss index b787f324a..08fb7eeb5 100644 --- a/resources/assets/sass/components/header.scss +++ b/resources/assets/sass/components/header.scss @@ -32,27 +32,6 @@ header nav ul li a{ color: $main-color3; } -header nav ul li ul{ - display:none; - position: absolute; - //left:46px; - background-color: #F2F2F2; - border-radius: 7px; - padding: 15px 25px; - //right:0; - box-shadow: 0 6px 12px rgba(0,0,0,0.775); - //border-radius: 1px; - //align-items: center; - margin-top:12px; - padding-right: 46px; - //max-height: 400px; - min-height: 40px; - height: auto; - z-index: 9999; - - -} - header nav ul li ul:before{ content: ""; height: 17px; @@ -84,18 +63,11 @@ header nav ul li ul li{ header nav ul li ul li a{ font-size: 18px; - margin-top: 20px; color: $main-color3; - //font-weight: bold; - //text-transform: uppercase; text-align:center; white-space: nowrap; } -header nav ul li ul li a:hover{ - color: $main-color; -} - header #right-menu .round-button, header #right-menu .round-button-sign, header #right-menu .round-button-user-menu{ @@ -204,11 +176,11 @@ header .menu-dropdown{ display:none; position: absolute; top:56px; - background-color: #F2F2F2; + background-color: #FFFFFF; + border: 1px solid #ADB2B6; border-radius: 7px; - padding: 15px 25px; + padding: 12px 32px; right:0; - box-shadow: 0 6px 12px rgba(0,0,0,0.175); z-index: 1000; margin: 0; } @@ -231,25 +203,28 @@ header .twitter-menu .menu-dropdown{ justify-content: center; } -header .user-menu .menu-dropdown li{ - list-style: none; - padding: 10px 0px; - white-space: nowrap; - text-align: left; +header .user-menu .menu-dropdown li { display: flex; align-items: center; -} - -header .user-menu .menu-dropdown li a{ - color: $main-color3 !important; - text-transform: none !important; - font-size: 16px !important; - margin-left: 10px; -} + list-style: none; + text-align: start; + gap: 12px; + padding: 8px 0; + a { + white-space: nowrap; + text-align: left; + text-transform: none !important; + font-size: 16px !important; + color: #1C4DA1 !important; + font-weight: 600 !important; + line-height: 22px !important; + } -header .user-menu .menu-dropdown li:hover a{ - color: $main-color !important; + svg, img { + height: 16px; + width: 16px; + } } header .lang-menu .menu-dropdown ul{ @@ -267,7 +242,7 @@ header .lang-menu .menu-dropdown ul li{ } header .lang-menu .menu-dropdown ul li a{ - color: $main-color3 !important; + color: $main-color3; padding: 15px 25px; display: flex; flex-direction: row; @@ -276,10 +251,6 @@ header .lang-menu .menu-dropdown ul li a{ justify-content: center; } -header .lang-menu .menu-dropdown ul li:hover a{ - color: $main-color !important; -} - /* MOBILE AND TABLET VERSION*/ @media (max-width:1280px) { @@ -332,10 +303,6 @@ header .lang-menu .menu-dropdown ul li:hover a{ header nav ul li ul li:last-child a{ border-bottom: 0px; } - - header nav ul li ul li a:hover{ - color: $main-color; - } } /*MOBILE VERSION*/ @@ -429,6 +396,100 @@ header .lang-menu .menu-dropdown ul li:hover a{ } +@media (min-width: 1281px) { + #primary-menu { + .main-menu-item { + .sub-menu { + display:none; + position: absolute; + border-radius: 7px; + margin-top:12px; + min-height: 40px; + height: auto; + z-index: 9999; + background: #FFF; + border: 1px solid #ADB2B6; + padding: 12px 32px; + + .menu-title { + position: relative; + display: flex; + align-items: center; + gap: 8px; + color: #1C4DA1; + font-size: 20px; + font-weight: 600; + line-height: 28px; + margin-bottom: 16px; + padding: 12px 0; + + .menu-title-icon { + width: 24px; + height: 24px; + } + + &:after { + content: ''; + bottom: 0; + left: 0; + position: absolute; + height: 4px; + width: 32px; + background-color: #F95C22; + } + } + + li { + padding: 8px 0; + a { + font-size: 16px; + color: #1C4DA1; + font-weight: 600; + line-height: 24px; + } + } + } + } + } + + #right-menu { + .lang-menu-dropdown { + overflow: hidden; + border-radius: 6px; + } + + .lang-sub-menu { + background: #FFF; + padding: 16px !important; + + .lang-menu-item { + cursor: default; + display: flex; + text-align: start; + margin-top: 0 !important; + min-width: 200px; + > .cookweek-link { + color: #1C4DA1 !important; + justify-content: space-between; + margin: 12px 16px; + border-radius: 24px; + padding: 0 !important; + } + + &.selected { + > .cookweek-link { + width: 100%; + border: 2px solid #1C4DA1; + background-color: #E8EDF6; + margin: 0; + padding: 10px 16px !important; + } + } + } + } + } +} + /*TABLET VERSION*/ @media (max-width: 1280px) { @@ -517,6 +578,7 @@ header .lang-menu .menu-dropdown ul li:hover a{ .lang-menu-item { margin-top: 0 !important; > a { + width: 100%; margin-top: 4px; border: 2px solid #E8EDF6; border-radius: 24px; @@ -546,17 +608,13 @@ header .lang-menu .menu-dropdown ul li:hover a{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; - display: block; - width: 100%; + display: inline-block; margin: 0; border: 0; text-align: left; padding: 4px 16px; font-size: 16px; text-transform: none; - &:hover { - text-decoration: underline; - } } } } @@ -581,6 +639,5 @@ header .lang-menu .menu-dropdown ul li:hover a{ header #right-menu { justify-content: flex-end; flex: 1; - margin-right: 18px; } } diff --git a/resources/assets/sass/pages/login.scss b/resources/assets/sass/pages/login.scss index 65613f394..8976cebe7 100644 --- a/resources/assets/sass/pages/login.scss +++ b/resources/assets/sass/pages/login.scss @@ -135,4 +135,96 @@ border-right: 1px solid #ccc; flex: 1; } -} \ No newline at end of file +} + +.help-block .errorlist { + margin: 0; +} + +.codeweek-content-wrapper { + display: flex; + justify-content: center; + align-items: left; + height: 100%; + padding: 80px 150px; + margin: 0 !important; + max-height: 850px; + +} +.codeweek-content-wrapper-inside { + width: 760px; + padding: 64px; + flex-direction: column !important; + align-items: left; + gap: 40px; + background-color: #fff; + border-radius: 32px; +} + + +.reset_title { + color: var(--Dark-Blue-500, #1C4DA1); + + /* Display md/Montserrat Medium */ + font-family: Montserrat; + font-size: 36px; + font-style: normal; + font-weight: 500; + line-height: 44px; /* 122.222% */ + letter-spacing: -0.72px; + padding-bottom: 40px; +} +.reset_description { + color: var(--Slate-500, #333E48); + + /* Text xl/Blinker Regular */ + font-family: Blinker; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 150% */ + padding-bottom: 40px; +} + +.codeweek-form-field input, .codeweek-form-field-wrapper input { + padding-left: 1rem; + padding-right: 1rem; +} + +#codeweek-login-page .codeweek-form-field{ + flex-direction: column; + align-items: flex-start; +} + +.codeweek-form-field, .codeweek-form-field-searchable { + display: flex; + justify-content: stretch; + flex: 1; + align-items: flex-start; + flex-direction: column; + align-content: flex-start; +} + +@media screen and (max-width: 1080px) { + .reset_title { + color: var(--Dark-Blue-500, #1C4DA1); + font-family: Montserrat; + font-size: 30px; + font-style: normal; + font-weight: 400; + line-height: 36px; + letter-spacing: -0.72px; + display: flex; + padding-bottom: 24px; + } + + .reset_description { + font-family: Blinker; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 30px; /* 150% */ + padding-bottom: 24px; + } +} + diff --git a/resources/lang/en/login.php b/resources/lang/en/login.php index b0e3a3503..fc5430960 100644 --- a/resources/lang/en/login.php +++ b/resources/lang/en/login.php @@ -21,13 +21,14 @@ 'email' => 'E-Mail Address', 'password' => 'Password', - 'remember' => 'Remember Me', - 'forgotten_password' => 'Forgot Your Password ?', + 'remember' => 'Keep me signed in', + 'forgotten_password' => 'Forgot Your Password', 'no_account' => 'Don\'t have an account ?', 'signup' => 'Sign Up', 'reset' => 'Reset Your Password', - 'send_password' => 'Send Password Reset Link', + 'send_password' => 'Reset Password', 'confirm_password' => 'Confirm Password', - 'name' => 'name', - -]; + 'name' => 'Fullname', + 'resetpage_title' => 'Forgotten your password?', + 'resetpage_description'=>'Confirm your email address below and we’ll send you instructions on how to create your new password', +]; \ No newline at end of file diff --git a/resources/lang/en/menu.php b/resources/lang/en/menu.php index 99a386c67..03fb58eb4 100644 --- a/resources/lang/en/menu.php +++ b/resources/lang/en/menu.php @@ -24,6 +24,7 @@ 'events' => 'Activities', 'ambassadors' => 'Ambassadors', 'resources' => 'Resources', + 'game_and_competitions' => 'Games & Competitions', 'schools' => 'Schools', 'about' => 'About', 'blog' => 'Blog', diff --git a/resources/latex/participation_greek.tex b/resources/latex/participation_greek.tex index ce7c37130..d8c58f0b7 100644 --- a/resources/latex/participation_greek.tex +++ b/resources/latex/participation_greek.tex @@ -1,5 +1,5 @@ \documentclass[12pt]{article} -\usepackage[T2A,T1]{fontenc} +\usepackage[LGR,T2A,T1]{fontenc} % Force LGR first for Greek \usepackage[utf8]{inputenc} \usepackage[greek,russian,english]{babel} \usepackage[landscape,a4paper]{geometry} diff --git a/resources/latex/participation_multilang.tex b/resources/latex/participation_multilang.tex new file mode 100644 index 000000000..6447a374a --- /dev/null +++ b/resources/latex/participation_multilang.tex @@ -0,0 +1,66 @@ +\documentclass[12pt]{article} +\usepackage[T2A,T1]{fontenc} +\usepackage[utf8]{inputenc} +\usepackage[english,greek,russian,polish,german,french,georgian]{babel} % +\usepackage[landscape,a4paper]{geometry} +\geometry{verbose,tmargin=0cm,bmargin=0cm,lmargin=3cm,rmargin=3cm} +\usepackage{fancybox} +\usepackage{calc} +\usepackage{multicol} +\usepackage{graphicx} +\usepackage{url} +\usepackage{eso-pic} +\usepackage{textcomp} +\usepackage{tgheros} % Use TeX Gyre Heros for a lighter Helvetica +\renewcommand{\familydefault}{\sfdefault} + +\usepackage{xcolor} +\definecolor{myorange}{RGB}{226, 83, 48} +\definecolor{Slate600}{HTML}{20262C} +\definecolor{GrayLine}{HTML}{858B91} % Define gray color for the line + +\newcommand\BackgroundPic{% + \put(0,0){% + \parbox[b][\paperheight]{\paperwidth}{% + \vfill + \centering + \includegraphics[width=\paperwidth,height=\paperheight,keepaspectratio]{images/participation-certificate-2025.png}% + \vfill +}}} + +\begin{document} +\AddToShipoutPicture{\BackgroundPic} +~ +\vspace{3.5cm} +~ +\begin{center} + \vspace{1cm} % Adjust spacing for alignment + \textcolor{Slate600}{\fontsize{13}{13}\selectfont This certificate recognizes that} \\ + \vspace{0.5cm} + + % Certificate Holder Name in the correct language + \begin{otherlanguage*}{greek} + \textcolor{myorange}{\fontsize{28}{32}\selectfont } + \end{otherlanguage*} \\ + + \vspace{0.5cm} + \textcolor{Slate600}{\fontsize{13}{13}\selectfont Has developed essential computational thinking skills} \\ + \textcolor{Slate600}{\fontsize{13}{13}\selectfont and contributed to the success of} \\ + + \vspace{0.8cm} + \textcolor{myorange}{\fontsize{36}{42}\selectfont EU CodeWeek 2025} \\ + + \vspace{0.8cm} + \textcolor{Slate600}{\fontsize{13}{13}\selectfont by actively participating in the coding event} \\ + \vspace{0.5cm} + + % Event Name in the correct language + \begin{otherlanguage*}{greek} + \textcolor{myorange}{\fontsize{28}{32}\selectfont } + \end{otherlanguage*} \\ + + \vspace{0.5cm} + \textcolor{Slate600}{\fontsize{13}{13}\selectfont Which took place on} \\ + \vspace{0.5cm} + + % Event Da \ No newline at end of file diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php index fbd360632..bede4e7dd 100644 --- a/resources/views/auth/login.blade.php +++ b/resources/views/auth/login.blade.php @@ -1,101 +1,133 @@ -@extends('layout.base') +@extends('layout.new_base') -@section('content') -
- -
-
-

#EUCodeWeek

-

@lang('login.login')

-
-
- -
- -
+@php + $list = [ + (object) ['label' => __('menu.signin'), 'href' => ''], + ]; +@endphp +@section('layout.breadcrumb') + @include('layout.breadcrumb', ['list' => $list]) +@endsection - +
+ @livewire('still-have-question-section')
@endsection + +@push('scripts') + +@endpush \ No newline at end of file diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php index 3fa73816a..872ad0948 100644 --- a/resources/views/auth/passwords/email.blade.php +++ b/resources/views/auth/passwords/email.blade.php @@ -1,25 +1,20 @@ -@extends('layout.base') +@extends('layout.new_base') @section('content') -
+
+
-
-
-

#EUCodeWeek

-

@lang('login.reset')

-
-
- -
+
-
+
@lang('login.resetpage_title')
+
@lang('login.resetpage_description')
@csrf
- - @lang('login.email') +
@@ -27,16 +22,20 @@
-
-
- -
+
+
-
+
+
-@endsection +@endsection \ No newline at end of file diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php index f7cb0cb59..656298027 100644 --- a/resources/views/auth/register.blade.php +++ b/resources/views/auth/register.blade.php @@ -1,88 +1,173 @@ -@extends('layout.base') +@extends('layout.new_base') -@section('content') -
- -
-
-

#EUCodeWeek

-

@lang('login.register')

-
-
- -
+@php + $list = [ + (object) ['label' => __('login.register'), 'href' => ''], + ]; +@endphp +@section('layout.breadcrumb') + @include('layout.breadcrumb', ['list' => $list]) +@endsection -
-
+@section('content') +
+
+
+ + +
+
@lang('base.or')
+
+ @csrf @honeypot -
-
- +
+
+ + +
+
+ @component('components.validation-errors', ['field'=>'email'])@endcomponent +
+
+
+
+ + class="border-2 border-solid border-dark-blue-200 w-full rounded-full h-12 px-4 mt-3" + value="{{old('name')}}" required autofocus>
-
+
@component('components.validation-errors', ['field'=>'name'])@endcomponent
- -
-
- - +
+
+ +
+ + + +
-
- @component('components.validation-errors', ['field'=>'email'])@endcomponent +
+ @component('components.validation-errors', ['field'=>'password'])@endcomponent
- - -
-
- - +
+
+ +
+ + + +
-
+
@component('components.validation-errors', ['field'=>'password'])@endcomponent
- -
-
- - +
+
+ + +
-
- @component('components.validation-errors', ['field'=>'password-confirm'])@endcomponent +
+ @component('components.validation-errors', ['field'=>'privacy'])@endcomponent
-
- - @component('components.validation-errors', ['field'=>'privacy']) - @endcomponent -
- -
-
- -
+
+
- -
+ +
+ @livewire('still-have-question-section')
@endsection + +@push('scripts') + +@endpush \ No newline at end of file diff --git a/resources/views/layout/footer.blade.php b/resources/views/layout/footer.blade.php index 04330f1be..7519c9de5 100755 --- a/resources/views/layout/footer.blade.php +++ b/resources/views/layout/footer.blade.php @@ -120,9 +120,9 @@
- +
+
+@endsection + +@push('scripts') + +@endpush \ No newline at end of file diff --git a/routes/web.php b/routes/web.php index d62a99122..1470f824b 100644 --- a/routes/web.php +++ b/routes/web.php @@ -107,6 +107,10 @@ Route::get('/dance', [StaticPageController::class, 'static'])->name('dance'); Route::get('/why-coding', [StaticPageController::class, 'static'])->name('why-coding'); +Route::get('/girls-in-digital-week', [StaticPageController::class, 'static'])->name( + 'girls-in-digital-week' +); + Route::get('/remote-teaching', [RemoteTeachingController::class, 'index'])->name( 'remote-teaching' ); diff --git a/tailwind.config.js b/tailwind.config.js index 2d7826eee..b52a7b969 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -10,7 +10,8 @@ module.exports = { backgroundImage: { 'secondary-gradient': 'linear-gradient(36.92deg, #1C4DA1 20.32%, #0040AE 28.24%)', 'blue-gradient': 'linear-gradient(161.75deg, #1254C5 16.95%, #0040AE 31.1%)', - 'count-gradient': 'linear-gradient(150.73deg, #1254C5 24.55%, #0040AE 68.54%)' + 'count-gradient': 'linear-gradient(150.73deg, #1254C5 24.55%, #0040AE 68.54%)', + 'orange-gradient': 'linear-gradient(36.92deg, #F95C22 20.32%, #FF885C 28.24%)', }, colors: { 'primary': '#F95C22', @@ -27,7 +28,13 @@ module.exports = { 'yellow-2': '#FFF7CC', 'dark-blue': '#1C4DA1', 'hover-blue': '#0A42A1', - 'slate': '#5C656D' + 'slate': '#5C656D', + 'light-blue': '#F2FBFE', + 'error-200': '#E30519', + 'dark-blue-50': '#E8EDF6', + 'dark-blue-200': '#A4B8D9', + 'dark-blue-300': '#7794C7', + 'dark-blue-400': '#4971B4' }, screens: { 'tablet': '993px',