/* GANTRY5 DEVELOPMENT MODE ENABLED. * * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost! * * For more information on modifying CSS, please read: * * http://docs.gantry.org/gantry5/configure/styles * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet */ @charset "UTF-8"; /* * ------------------------------------------------------------------------ * Custom CSS For dkarousos.com - Joomla 6 * ------------------------------------------------------------------------ * Owner: Dionisis Karousos (dkarousos.com) * Author: Dionisis Karousos * Date: 06/2024 * Last update: 21/07/2026 edited by dionisis karousos * ------------------------------------------------------------------------ */ /* @import "custom.scss" */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Knewave&display=swap"); .etl-imagegrid-bloc *, .etl-imagegrid-bloc *:before, .etl-imagegrid-bloc *:after { -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; } .etl-imagegrid-bloc .etl-imagegrid-wrapper { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -0.25rem; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; display: inline-block; vertical-align: top; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-1:hover .etl-imagegrid-link:before, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2:hover .etl-imagegrid-link:before, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3:hover .etl-imagegrid-link:before { opacity: 1; } .etl-imagegrid-bloc .etl-imagegrid-desc, .etl-imagegrid-bloc .etl-imagegrid-footer { margin: 1.5rem 0; } .etl-imagegrid-bloc .etl-imagegrid-link { display: block; position: relative; background: #a8a7a7; border-radius: 8px; overflow: hidden; } .etl-imagegrid-bloc .etl-imagegrid-link:before { content: ""; font-family: FontAwesome, Font Awesome\ 5 Free; font-size: 1.25rem; color: #fff; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -13px; z-index: 1; opacity: 0; } .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 50%; } @media only all and (max-width: 47.99rem) { .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-2cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 100%; } } .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 33.33333%; } @media only all and (min-width: 48rem) and (max-width: 59.99rem) { .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 50%; } } @media only all and (max-width: 47.99rem) { .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-3cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 100%; } } .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 25%; } @media only all and (min-width: 48rem) and (max-width: 59.99rem) { .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 50%; } } @media only all and (max-width: 47.99rem) { .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-4cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 100%; } } .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 20%; } @media only all and (min-width: 48rem) and (max-width: 59.99rem) { .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 33.33333%; } } @media only all and (max-width: 47.99rem) { .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etl-imagegrid-5cols .etl-imagegrid-item-etl-bloc-image-style-4 { width: 50%; } } .etl-imagegrid-bloc .etlradius-0 .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-0 .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-0 .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link { border-radius: 0px; } .etl-imagegrid-bloc .etlradius-8 .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-8 .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-8 .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link { border-radius: 8px; } .etl-imagegrid-bloc .etlradius-12 .etl-imagegrid-item-etl-bloc-image-style-1 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-12 .etl-imagegrid-item-etl-bloc-image-style-2 .etl-imagegrid-link, .etl-imagegrid-bloc .etlradius-12 .etl-imagegrid-item-etl-bloc-image-style-3 .etl-imagegrid-link { border-radius: 12px; } .etl-imagegrid-bloc .etlpadding-00 .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etlpadding-00 .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etlpadding-00 .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etlpadding-00 .etl-imagegrid-item-etl-bloc-image-style-4 { padding: 0px; } .etl-imagegrid-bloc .etlpadding-05 .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etlpadding-05 .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etlpadding-05 .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etlpadding-05 .etl-imagegrid-item-etl-bloc-image-style-4 { padding: 0.5px; } .etl-imagegrid-bloc .etlpadding-40 .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etlpadding-40 .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etlpadding-40 .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etlpadding-40 .etl-imagegrid-item-etl-bloc-image-style-4 { padding: 4px; } .etl-imagegrid-bloc .etlpadding-80 .etl-imagegrid-item-etl-bloc-image-style-1, .etl-imagegrid-bloc .etlpadding-80 .etl-imagegrid-item-etl-bloc-image-style-2, .etl-imagegrid-bloc .etlpadding-80 .etl-imagegrid-item-etl-bloc-image-style-3, .etl-imagegrid-bloc .etlpadding-80 .etl-imagegrid-item-etl-bloc-image-style-4 { padding: 8px; } .etl-imagegrid-bloc .etl-imagegrid-item-desc { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; box-direction: normal; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; color: #ffffff; font-weight: 400; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; } .etl-imagegrid-bloc .etl-imagegrid-item-desc span { -webkit-box-flex: none; -moz-box-flex: none; box-flex: none; -webkit-flex: none; -moz-flex: none; -ms-flex: none; flex: none; } .etl-imagegrid-bloc .etl-imagegrid-item-desc .etl-imagegrid-item-desc-title { padding: 0 1.138rem; font-size: 1.2rem; } .etl-imagegrid-bloc .etl-imagegrid-item-desc .etl-imagegrid-item-desc-subtitle { padding: 1.138rem; padding-top: 0; font-size: 0.8rem; } .etl-imagegrid-bloc .etl-link .etl-imagegrid-link:before { content: ""; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-1:hover img { opacity: 0.25; -webkit-transition: opacity 0.35s; -moz-transition: opacity 0.35s; transition: opacity 0.35s; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2:hover, .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-2:hover img { z-index: 10; -webkit-transform: rotate(0deg) scale(1.2); -o-transform: rotate(0deg) scale(1.2); -moz-transform: rotate(0deg) scale(1.2); -ms-transform: rotate(0deg) scale(1.2); transform: rotate(0deg) scale(1.2); } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3 a { background: none; border-radius: 0px; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3 img { padding: 10px; border: 1px solid #eee; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 95%; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-3:hover img { -webkit-transform: rotate(0deg) scale(1.5); -o-transform: rotate(0deg) scale(1.5); -moz-transform: rotate(0deg) scale(1.5); -ms-transform: rotate(0deg) scale(1.5); transform: rotate(0deg) scale(1.5); width: 95%; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; display: inline-block; vertical-align: middle; position: relative; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 img { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; width: 100%; height: 100%; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-imagegrid-caption-v4 { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; font-size: 1.1rem; color: #ffffff; font-weight: 700; left: 0; right: 0; margin-left: auto; margin-right: auto; z-index: 1; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-inside { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; color: #ffffff; font-style: normal; position: absolute; z-index: 1; top: 0; left: 0; bottom: 0; right: 0; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-inside div { font-size: 1.5rem; flex: none; -webkit-flex: none; opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .dir-rtl .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-inside div { margin-right: 0; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-inside div .fa { font-size: 4rem; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover { z-index: 10; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover .etl-imagegrid-link-v4:before { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover .etl-inside div { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .etl-imagegrid-bloc .etl-imagegrid-link-v4 { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; position: relative; width: 100%; height: 100%; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .etl-imagegrid-bloc .etl-imagegrid-link-v4:before { color: #ffffff; background-image: -webkit-linear-gradient(top, rgba(168, 167, 167, 0.1) 0%, #a8a7a7 100%); background-image: linear-gradient(to bottom, rgba(168, 167, 167, 0.1) 0%, #a8a7a7 100%); content: ""; position: absolute; z-index: 1; opacity: 0.5; width: 100%; height: 100%; text-align: center; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } .etl-grid-caption { text-align: center; opacity: 0.75; margin: 0.6rem 0; } @media only all and (min-width: 60rem) and (max-width: 79.99rem) { .etl-grid-caption { font-size: 0.9rem; } } @media only all and (min-width: 48rem) and (max-width: 59.99rem) { .etl-grid-caption { font-size: 0.8rem; } } .imagegrid-firstlarge .etl-imagegrid-wrapper { margin: 0; } .imagegrid-firstlarge .etl-imagegrid-wrapper .etl-imagegrid-item:first-child { width: 100%; } .imagegrid-lastlarge .etl-imagegrid-wrapper { margin: 0; } .imagegrid-lastlarge .etl-imagegrid-wrapper .etl-imagegrid-item:last-child { width: 100%; } /* ............................ */ /* ............................ */ /* .............................. */ html { scroll-behavior: smooth; } body { font-family: Inter, serif; } h1 { font-size: 1.7rem; } .view-article article a { border-bottom: 1px solid #475E45; } #g-container-main { min-height: calc(100vh - 302px); } .moments-page [class^="module-under-content-"].moduletable, .web-projects-page [class^="module-under-content-"].moduletable, .courses-page [class^="module-under-content-"].moduletable { margin-top: -40px; margin-bottom: 25px; } ul.pager.pagenav { margin-top: 50px; } .underline-like { border-bottom: 1px solid #A8A7A7; } * { caret-color: transparent; } #tinymce { caret-color: black !important; } /* Επαναφέρει τον κέρσορα ΜΟΝΟ εκεί που ο χρήστης όντως πρέπει να γράψει */ input, textarea, [contenteditable="true"] { caret-color: auto; } #top-menu .g-menu-parent-indicator { margin-left: 5px; } /* ............................... */ /* .............................. */ #home #g-header { margin-top: -100px; } @media (max-width: 980px) { #home #g-header { margin-top: -60px; } } @media (max-width: 600px) { #home #g-header { margin-top: -40px; } } @media (max-width: 500px) { #home #g-header { margin-top: -20px; } } #home .g-content.g-particle h2 { position: relative; text-align: left; line-height: 3rem; font-weight: bold; font-size: 1.5rem; margin-top: -10px !important; margin-bottom: 50px; border-bottom: 1px solid #2a363b; } @media (max-width: 350px) { #home .g-content.g-particle h2 { font-size: 1.1rem; } } /* ............................... */ /* ........................... */ #g-navigation { border-radius: 60px; margin: 15px; } @media (max-width: 1279px) { #g-navigation .g-container { width: 100%; } } #g-navigation .g-logo.g-logo-helium svg { min-width: 190px; } @media (max-width: 349px) { #g-navigation .g-logo.g-logo-helium svg { min-width: unset; } } #g-navigation .g-main-nav .g-toplevel > li { margin: 0 0.4rem; padding-bottom: 10px; } #g-navigation .g-main-nav .g-toplevel > li.g-menu-item:hover > .g-dropdown, #g-navigation .g-main-nav .g-toplevel > li.g-menu-item.g-selected > .g-dropdown, #g-navigation .g-main-nav .g-toplevel > li.g-menu-item.is-open > .g-dropdown { display: block; visibility: visible; opacity: 1; } #g-navigation .g-main-nav .g-dropdown { margin-top: 0; } #g-navigation #top-menu .g-content, #g-navigation .g-social-header .g-content { padding: 0.938rem 0; } @media (max-width: 1320px) { #g-navigation .g-social { padding-right: 25px; } } /* .......................... */ /* .......................... */ .g-social a { color: rgba(255, 255, 255, 0.5); } .g-social a:hover { color: #ffffff; } @media (min-width: 80rem) { .g-social { padding-right: 8px; } } /* .......................... */ /* ........................ */ #hero-video { margin-bottom: -10px; } @media (min-width: 1280px) { #hero-video { background-image: url('../images/bgline.png'), url('../images/bgline.png'); background-position: left bottom 5px, right bottom 0px; background-repeat: no-repeat no-repeat; background-size: 50% 100%; } } #hero-video .video-container { max-width: 1280px; margin: auto; position: relative; } @media (min-width: 1280px) { #hero-video .video-container::before { content: ""; position: absolute; top: 394px; left: 0; width: 30px; height: 15px; background: #A4A1A0; border-radius: 20px / 50px; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } #hero-video .video-container::after { content: ""; position: absolute; top: 399px; right: -10px; width: 30px; height: 15px; background: #A4A1A0; border-radius: 20px / 50px; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } } #hero-video .video-container video.responsive-video { width: 100%; height: auto; aspect-ratio: 1.807; object-fit: cover; position: relative; } #hero-video .video-container video::-webkit-media-controls { display: none !important; } #home-title { float: right; margin-bottom: -33px; position: absolute; bottom: 40px; color: #242424; font-weight: normal; font-size: 1.2rem; text-align: right; width: 100%; right: 20px; } #home-title #name { font-family: "Knewave", system-ui; } @media (max-width: 500px) { #home-title #name { display: none; } } #home-title #fed { font-family: "Knewave", system-ui; color: #595959; } #about-link { position: absolute; position: absolute; color: #ffffff; top: 33px; width: max-content; right: 138px; z-index: 1; font-weight: bold; background: #474747; border-radius: 2.5rem; font-size: 1rem; border: 2px solid white; padding: 0 10px !important; } @supports (-webkit-touch-callout: none) { #home #g-header { margin-top: 0 !important; } #home #hero-video { margin-bottom: 0; background-image: none !important; } #home #hero-video .video-container { overflow: hidden; } #home #hero-video .video-container::before, #home #hero-video .video-container::after { content: none !important; display: none !important; box-shadow: none !important; } @media (hover: none) and (pointer: coarse) { #home #hero-video .video-container { aspect-ratio: 1.807; background-image: url('../images/spourgos.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; isolation: isolate; } #home #hero-video .responsive-video { display: block !important; position: relative; z-index: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } } } /* ....................... */ /* ............................... */ #home #g-intro { padding-top: 4rem; padding-bottom: 4rem; margin: 0; } #home #g-intro .g-content { padding: 0; margin: 0; } .pure .g-grid { display: flex; justify-content: space-between; margin: 0.625rem; padding: 0.938rem; margin-bottom: 0; } .pure .g-grid .size-33-3 { flex: 0 0 calc(33.33333% - 20px); border-radius: 8px; background: white; box-shadow: 0 0 2px rgba(0, 0, 0, 0.15); position: relative; } @media (max-width: 767px) { .pure .g-grid .size-33-3 { flex: 0 100%; max-width: 100%; margin-bottom: 40px; } .pure .g-grid .size-33-3:nth-child(3) { margin-bottom: 0; } } .pure .g-grid .size-33-3 h2 { font-family: "JetBrains Mono", monospace; text-align: center !important; margin: 0 !important; line-height: 1.7rem !important; padding: 20px; border-radius: 25px 25px 250% 250%; border-bottom: 10px solid #F4F5F7 !important; position: relative; } .pure .g-grid .size-33-3 p { padding: 0 20px; line-height: 1.6; } .pure .g-grid .size-33-3#pure-code h2 { background: #9EBFBB; } .pure .g-grid .size-33-3#pure-teach h2 { background: #EEC873; } .pure .g-grid .size-33-3#pure-life h2 { background: #E5B6A1; } /* .............................. */ /* ................... */ #recent-contracts { margin-top: -5px; } #recent-contracts .contracts-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 30px; width: 100%; } @media (max-width: 850px) { #recent-contracts .contracts-grid a { display: flex; /* 3 ανά σειρά */ flex: 0 0 33.33% !important; width: 33.33% !important; margin: 0 !important; } #recent-contracts .contracts-grid a:nth-child(3n+1) { justify-content: flex-start; } #recent-contracts .contracts-grid a:nth-child(3n+2) { justify-content: center; } #recent-contracts .contracts-grid a:nth-child(3n) { justify-content: flex-end; } } #recent-contracts .contracts-grid a { text-decoration: none; transition: all 0.3s ease; } #recent-contracts .contracts-grid a img { display: block; max-height: 90px; width: auto; transition: transform 0.3s ease, filter 0.3s ease; cursor: pointer; filter: brightness(0.95); } @media (max-width: 959px) { #recent-contracts .contracts-grid a img { max-height: 80px; } } @media (max-width: 850px) { #recent-contracts .contracts-grid a img { max-height: 65px; } } @media (max-width: 400px) { #recent-contracts .contracts-grid a img { max-height: 50px; } } #recent-contracts .contracts-grid a:hover img { transform: scale(1.1); filter: brightness(1) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2)); } /* ................. */ /* ..................... */ #featured-web-projects { margin: calc(0.625rem - 4px) 0.625rem calc(0.625rem + 4px) 0.625rem; padding: 0.938rem; } #featured-web-projects .g-content { padding: 0; margin: 0; } #featured-web-projects .etl-imagegrid-wrapper.etl-imagegrid-4cols { margin-left: -8px; margin-right: -8px; } /* .................... */ /* .......................... */ #partners .partners-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 0; } #partners .partners-grid a { display: flex; } #partners .partners-grid a img { display: block; max-height: 50px; width: auto; transition: all 0.3s ease; } @media (max-width: 959px) { #partners .partners-grid a img { max-height: 45px; } } @media (max-width: 600px) { #partners .partners-grid a img { max-height: 35px; } } @media (max-width: 300px) { #partners .partners-grid a img { max-height: 30px; } } @media (max-width: 850px) { #partners .partners-grid a:nth-child(-n+3) { flex: 0 0 calc(100% / 3); } #partners .partners-grid a:nth-child(-n+3):nth-child(1) { justify-content: flex-start; } #partners .partners-grid a:nth-child(-n+3):nth-child(2) { justify-content: center; margin-left: -8%; } #partners .partners-grid a:nth-child(-n+3):nth-child(3) { justify-content: flex-end; } #partners .partners-grid a:nth-child(4), #partners .partners-grid a:nth-child(5) { flex: 0 0 50%; margin-top: 20px; } #partners .partners-grid a:nth-child(4):nth-child(4), #partners .partners-grid a:nth-child(5):nth-child(4) { justify-content: center; } #partners .partners-grid a:nth-child(4):nth-child(5), #partners .partners-grid a:nth-child(5):nth-child(5) { justify-content: center; } } @media (max-width: 400px) { #partners .partners-grid a { flex: 0 0 calc(50% - 10px); justify-content: center !important; margin-left: 0 !important; } #partners .partners-grid a:first-child { flex: 0 0 100%; margin-bottom: 10px; } #partners .partners-grid a:nth-child(-n+3):nth-child(2) { justify-content: flex-start !important; } } #partners .partners-grid a:hover img { transform: scale(1.1); filter: brightness(1) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2)); } /* ......................... */ /* ........................ */ .etl-imagegrid-item-desc-title, .etl-imagegrid-item-desc-subtitle { font-family: Inter, serif; } .etl-imagegrid-item-desc-title { font-weight: bold; margin-top: -10px; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 img { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 8px; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4 .etl-inside div { text-align: center; font-size: 1.2rem; max-width: 100%; line-height: 1.3rem; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover { z-index: 10; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover .etl-imagegrid-link-v4:before { opacity: 0.7; } .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover .etl-inside div { display: block; line-height: 1.8rem; } @media (max-width: 250px) { .etl-imagegrid-bloc .etl-imagegrid-item-etl-bloc-image-style-4:hover .etl-inside div { margin-top: 3px; } } .etl-imagegrid-bloc .etl-imagegrid-link-v4:before { background: #242424; border-radius: 8px; } div.etl-inside { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 8px; } .subcaption { display: block; line-height: 1.2rem; font-size: 1rem; font-weight: normal; margin-top: 10px; background-color: rgba(0, 0, 0, 0.01); } @media (max-width: 250px) { .subcaption { font-size: 0.8rem; padding: 5px; } } .etl-imagegrid-caption-v4 { background-color: rgba(0, 0, 0, 0.01); } a.etl-imagegrid-link-v4[href]::after { display: block; position: absolute; left: 5px; opacity: 0.6; } a.etl-imagegrid-link-v4[href][href*="moodle"]::after, a.etl-imagegrid-link-v4[href][href*="colorcourse"]::after { content: url('../images/webprojects/icons/moodle.svg'); width: 50px; bottom: -15px; left: 0px; } a.etl-imagegrid-link-v4[href][href*="lexipaignio"]::after, a.etl-imagegrid-link-v4[href][href*="mentep"]::after, a.etl-imagegrid-link-v4[href][href*="trapeza"]::after, a.etl-imagegrid-link-v4[href][href*="escape"]::after, a.etl-imagegrid-link-v4[href][href*="epimorfosi"]::after, a.etl-imagegrid-link-v4[href][href*="kratiko"]::after { content: url('../images/webprojects/icons/joomla.svg'); width: 35px; bottom: -5px; } a.etl-imagegrid-link-v4[href][href*="icvirtual"]::after { content: url('../images/webprojects/icons/wordpress.svg'); width: 35px; bottom: -5px; } a.etl-imagegrid-link-v4[href][href*="icrepo"]::after, a.etl-imagegrid-link-v4[href][href*="ifigeneia"]::after { content: url('../images/webprojects/icons/dspace.svg'); width: 60px; bottom: -28px; left: 4px; } a.etl-imagegrid-link-v4[href][href*="liteclass"]::after { content: url('../images/webprojects/icons/custom.svg'); width: 40px; bottom: -8px; left: 3px; } .etl-imagegrid-item-desc-title, .etl-imagegrid-item-desc-subtitle { background-color: rgba(0, 0, 0, 0.01); } /* ....................... */ /* ====== PAGINATION ====== */ .pagination.ms-0:has(> a.btn.btn-sm.btn-secondary.next:first-child) { justify-content: flex-end; } .com-content-article .pagination.ms-0 { margin-top: 50px; justify-content: space-between; } .com-content-article .pagination.ms-0 { margin-top: 50px; justify-content: space-between; } .fixnext .pagination.ms-0 { justify-content: end; } .com-content-article .pagination.ms-0 .btn.btn-sm.btn-secondary.previous, .com-content-article .pagination.ms-0 .btn.btn-sm.btn-secondary.next { border: 3px solid #5A5858; font-weight: bold; text-align: center; min-width: 150px; text-transform: uppercase; border-radius: 50px; } .com-content-article .pagination .btn.btn-sm.btn-secondary.previous, .com-content-article .pagination .btn.btn-sm.btn-secondary.next { color: #5A5858; } .com-content-article .pagination .btn.btn-sm.btn-secondary.previous:hover, .com-content-article .pagination .btn.btn-sm.btn-secondary.next:hover { background: #EBEAEA; } .com-content-article .pagination .icon-chevron-left, .com-content-article .pagination .icon-chevron-right { display: none; } .com-content-category-blog__pagination .pagination { justify-content: center; margin-top: 50px; } .page-link, .page-link:hover { color: #475E45; } .page-item.active .page-link { z-index: 3; color: #fff; background-color: #475E45; border-color: #475E45; } #g-intro { margin-top: 0; padding-top: 0; } span.g-contenttabs-tab-title { font-size: 0.9rem !important; } h2.g-title, .g-container { margin-top: 0; } /* ====== KATHE ERGO ====== */ div.parousiasi .titlos { background: #F8F8F6; border: none; } div.parousiasi .g-title h1 { margin-bottom: -20px; } div.parousiasi .bg-site { background-size: cover cover; display: block; position: relative; } div.ligalogia { padding: 10px; } div.parousiasi .over-bg-site { display: block; background: white; opacity: 0.85; width: 55%; float: right; height: 100%; position: relative; text-align: right; border: none; } div.parousiasi h2 { margin-bottom: 0px; } div.parousiasi .g-title h3 { font-size: 1.2rem; margin: 0; } div.parousiasi .g-title h2 { font-size: 1.3rem; margin: 0; text-align: center; } div.parousiasi .website-url { margin: auto; color: #474747; text-decoration: underline; text-align: center; } div.parousiasi .website-url a { color: #474747; } div.parousiasi .website-url a:hover { color: #A8A7A7; } .mentep .parousiasi .bg-site { background: url('../../../../images/erga/top-mentep.jpg'); } .b-epipedo .parousiasi .bg-site { background: url('../../../../images/erga/top-epimorfosi.jpg'); } .trapeza .parousiasi .bg-site { background: url('../../../../images/erga/top-trapeza.jpg'); } .pistopoihsh .parousiasi .bg-site { background: url('../../../../images/erga/top-pistopoihsh-mathiton.jpg'); } .mc2 .parousiasi .bg-site { background: url('../../../../images/erga/top-mc2project.jpg'); } .patrastrafficmobile .parousiasi .bg-site { background: url('../../../../images/erga/top-patras-traffic-mobile.jpg'); } .patrastraffic .parousiasi .bg-site { background: url('../../../../images/erga/top-patras-traffic.jpg'); } .adep .parousiasi .bg-site { background: url('../../../../images/erga/top-adep.jpg'); } .flexprint .parousiasi .bg-site { background: url('../../../../images/erga/top-flexprint.jpg'); } .kemedin .parousiasi .bg-site { background: url('../../../../images/erga/top-kemedin.jpg'); } .kpp .parousiasi .bg-site { background: url('../../../../images/erga/top-kpp.jpg'); } .moodlepake .parousiasi .bg-site { background: url('../../../../images/erga/top-moodlepake.jpg'); } .moodleb2 .parousiasi .bg-site { background: url('../../../../images/erga/top-moodle-b2.jpg'); } .lexipaignio .parousiasi .bg-site { background: url('../../../../images/erga/top-lexipaignio.jpg'); } .escape .parousiasi .bg-site { background: url('../../../../images/erga/top-escape.jpg'); } .sc .g-particle p { margin-left: -0.938rem; margin-right: -0.938rem; margin-top: -1.5rem; } .sc .g-particle { border: none; } ul.check { list-style-type: none; margin-left: 5px; } .title-gradient .g-title { background-color: transparent !important; background-image: none; color: #333; text-align: center; border-bottom: 5px solid #F8F8F6; border-top: 5px solid #F8F8F6; margin-bottom: 40px; padding: 0; } .project h2 { font-size: 0; } .project img { display: block; margin: auto; } /* ........................ */ @media (width < 768px), (width > 959px) { .fix-image-grid-width { margin-left: -4px !important; margin-right: -4px !important; } } /* ........................ */ /* ........................ */ .experience-page .mod-lite-accordion { margin-top: -30px; } .experience-page .mod-lite-accordion .accordion-button { font-weight: normal !important; line-height: 1.5rem; border-radius: 16px 16px 0 0 !important; z-index: 0 !important; position: relative; } .experience-page .mod-lite-accordion .accordion-button.collapsed { border-radius: 16px !important; } .experience-page .mod-lite-accordion .accordion-button .mod-lite-accordion__icon--plusminus::before, .experience-page .mod-lite-accordion .accordion-button .mod-lite-accordion__icon--plusminus::after { height: 3px !important; } .experience-page .mod-lite-accordion .accordion-button .mod-lite-accordion__icon--plusminus { background-color: #a8a7a7 !important; } .experience-page .mod-lite-accordion .accordion-body { position: relative; } @media (max-width: 981px) { .experience-page .mod-lite-accordion .accordion-body p:first-of-type { margin-top: 2.3rem; } } .experience-page .mod-lite-accordion .accordion-body ul { margin-top: -5px; } .experience-page .mod-lite-accordion .accordion-body .url-under-tab { width: max-content; float: right; margin: -18px -20px 0 0; background: var(--mca-tab-bg); border-radius: 0 0 0 6px; padding: 1px; z-index: 100; position: relative; } .experience-page .mod-lite-accordion .accordion-body .url-under-tab a { color: var(--mca-tab-text); padding: 5px; font-size: 0.9rem; border: none; } .experience-page .mod-lite-accordion .accordion-body .url-under-tab a .fa { font-size: 0.75rem; } .experience-page .mod-lite-accordion .accordion-body span.contract-dates { display: inline-block; background-color: #f1f3f4; border-radius: 6px; padding: 3px 10px; font-weight: 500; font-size: 14px; color: #3c4043; margin-right: 5px; margin-bottom: 8px; white-space: nowrap; } /* ....................... */ /* ........................ */ .grid-moments .etl-grid-caption { display: none; } .grid-moments .etl-imagegrid-item-desc-title, .grid-moments .etl-imagegrid-item-desc-subtitle { font-family: Inter, serif; padding-bottom: 0.5rem !important; } .grid-moments .etl-imagegrid-item-desc-title { font-weight: bold; margin-bottom: -20px; font-size: 1rem !important; } /* ....................... */ /* ====== CONTACT ====== */ .contact h1 { margin-bottom: 0; } .contact h2 { font-size: 1.4rem; } .contact #g-container-main .g-container { padding: 1rem; } .contact #custom-8901-particle { margin-top: 0; margin-left: 0; padding: 10px 0 10px 10px; } .contact #forma { background: #ffffff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); border: 0 0 10px rgba(0, 0, 0, 0.15); padding: 0; margin: 3rem 0.6rem; } .contact #forma .cf-footer { margin: 40px 0 15px; line-height: 1.2rem; background: #F9F9F9; padding: 15px; font-size: 0.7rem !important; } .box-1 .g-content { background: #ffffff; border: 1px solid #a8a7a7; } .box-2 .g-content { background: #D8D7D7; } .dk-btn, .cf-btn { padding: 0.8rem 2.725rem !important; font-size: 0.7rem !important; font-weight: 600; line-height: 1.15; letter-spacing: 0.1rem; transition: all 0.3s ease; border: none; } .dk-btn:hover, .cf-btn:hover { background: #4D4D4D !important; } .dk-btn:focus, .cf-btn:focus { outline: 3px solid #474747; outline-offset: 2px; } .box-3 .g-content { background: #474747; color: #ffffff; border: 1px solid #a8a7a7; } .box-3 img { height: 40px; margin-top: 5px; margin-bottom: 7px; } .dk-btn { background-color: #2e2e2e; color: #ffffff; transition: all 0.3s ease; padding: 0.8rem 2.725rem; border: none; } .dk-btn:hover { background-color: #333333; border-color: #333333; color: #ffffff; } .dk-btn:focus { outline: 3px solid #474747; outline-offset: 2px; } .contact-box { text-align: center; padding: 0.5rem; } .contact-box .box-title { font-size: 1rem; } .contact-box .box-text { margin-top: -1rem; } .view-contact #g-sidebar, .view-contact #g-mainbar { padding: 0; } #g-mainbar { padding: 0; } /* .................... */ .courses-page span.aa { display: none; } .courses-page table.sortable { margin-top: 10px; } .courses-page table.sortable a { color: #2A363B; } .courses-page table.sortable a:link { border: none; } .courses-page table.sortable a:hover { color: #a8a7a7; border-bottom: 2px solid #a8a7a7; padding-bottom: 3px; } .courses-page table.sortable tr th { text-align: center; background-color: #595959 !important; color: #fff !important; } .courses-page table.sortable tr th a { color: #fff; } .courses-page table.sortable tr th a:hover { color: #fff; border-bottom: 2px solid #fff; } .courses-page table.sortable tr:nth-child(even) { background-color: #FFFFFF !important; } .courses-page table.sortable tr:nth-child(odd) { background-color: #ebeaea !important; } .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper.ui-state-active .g-contenttabs-tab-wrapper-head { background: unset; border-color: #2a363b; border-radius: 0; } .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper .g-contenttabs-tab-wrapper-head { padding: 5px; border-radius: 0; background: unset; border: 2px solid transparent; border-width: 2px 0; border-radius: 0; } /* 1. Γενικό container των Tabs */ .g-contenttabs-tab-wrapper-container { display: flex; border-bottom: 0; padding: 0; margin: 0; list-style: none; } /* 2. Το κάθε Tab (li) */ .g-contenttabs-tab-wrapper { margin-right: 10px; /* Απόσταση μεταξύ των tabs */ padding-bottom: 10px; position: relative; cursor: pointer; } /* 3. Το κείμενο και το link */ .g-contenttabs-tab { appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: inherit; } .g-contenttabs-tab-wrapper .g-contenttabs-tab-title { font-weight: 700; font-size: 1.1rem; color: #595959; /* Χρώμα για τα ανενεργά tabs */ text-transform: none; transition: color 0.3s ease; } .g-contenttabs-content[hidden] { display: none !important; } /* 4. Το Ενεργό Tab (Active State) */ .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper.ui-state-active { border-bottom: 0; margin-bottom: 0; } .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper.ui-state-active .g-contenttabs-tab-title { color: #1a2b3c; /* Σκούρο χρώμα για το ενεργό κείμενο */ } .courses-page .g-contenttabs-tab-wrapper:focus-visible { box-shadow: none; } /* 5. Προσθήκη του Checkmark (Icon) στο ενεργό Tab */ /* Αν δεν έχεις το icon στο HTML, το προσθέτουμε μέσω CSS */ .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper.ui-state-active .g-contenttabs-tab-title::before { content: ""; /* Κωδικός FontAwesome για το checkmark */ font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 10px; color: #1a2b3c; } /* 6. Hover εφέ */ .g-contenttabs-tab-wrapper:hover .g-contenttabs-tab-title { color: #1a2b3c; } /* 7. Αφαίρεση περιττών στυλ από το Gantry/jQuery UI */ .g-contenttabs-tab-wrapper-container.ui-widget-header { background: none; border: none; } .g-contenttabs-tab-wrapper.ui-state-default { background: none; border: none; } .courses-page .g-contenttabs-tab-wrapper:focus-visible, .courses-page .g-contenttabs-tab-wrapper.is-keyboard-focus { outline: none; } .courses-page .g-contenttabs-tab-wrapper:focus-visible .g-contenttabs-tab-wrapper-head, .courses-page .g-contenttabs-tab-wrapper.is-keyboard-focus .g-contenttabs-tab-wrapper-head { border-color: #475E45; } .courses-page .g-contenttabs-tab-wrapper:focus-visible .g-contenttabs-tab-title, .courses-page .g-contenttabs-tab-wrapper.is-keyboard-focus .g-contenttabs-tab-title { color: #1a2b3c; } /* 1. Αφαιρούμε το προεπιλεγμένο outline για να μην εμφανίζεται στο κλικ με ποντίκι */ .g-contenttabs-container .g-contenttabs-tab:focus { outline: none; } /* 2. Ενεργοποιούμε το μπλε περίγραμμα ΜΟΝΟ όταν χρησιμοποιείται το Tab (keyboard navigation) */ .g-contenttabs-container .g-contenttabs-tab:focus-visible { outline: 3px solid #007bff !important; /* Έντονο μπλε */ outline-offset: 2px; /* Κενό ανάμεσα στο κουμπί και το περίγραμμα για να φαίνεται καλύτερα */ box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Προαιρετικό: λάμψη για καλύτερη ορατότητα */ } #g-contenttabs-item-module-contenttabs-110-2:target { scroll-margin-top: 100vh !important; } .courses-page article .g-content { padding: 0.938rem 0; margin: 40px 0.625rem 0.625rem 0; } @media (max-width: 768px) { .g-contenttabs-container { display: flex; flex-direction: column; align-items: center; } .g-contenttabs-tab-wrapper-container { display: flex; flex-direction: column; align-items: center; width: 90%; margin-left: auto; margin-right: auto; justify-content: center; gap: 10px; } .g-contenttabs-tab-wrapper { margin-right: 0; padding-bottom: 0; width: 100%; } .g-contenttabs-tab-wrapper-container > .g-contenttabs-tab-wrapper .g-contenttabs-tab-wrapper-head { display: block; width: 100%; text-align: center; margin-right: 0; } .g-contenttabs-tab { display: block; width: 100%; } .g-contenttabs-tab-wrapper:last-child { margin-top: 0; } } #uop:target, #teiwest:target, #upatras:target { position: relative; border: none; } #uop:target::before, #teiwest:target::before, #upatras:target::before { content: ""; font-family: FontAwesome; font-size: 1.2rem; color: #2a363b; position: absolute; left: -30px; top: 50%; transform: translateY(-50%); animation: slideIn 0.5s ease-out forwards; } @media (max-width: 800px) { #uop:target::before, #teiwest:target::before, #upatras:target::before { left: -23px; } } /* ................... */ /* ..................... */ .mathima h2 { margin-bottom: -20px; font-size: 1.1rem; border: 5px solid #A8A7A7; border-width: 0 0 5px 0; margin-top: 30px; font-weight: 600; } .mathima h2:nth-child(1) { margin-top: 30px; } .mathima div.mathima-sect { border: 1px solid #F8F8F6; margin-top: 20px; padding: 0 10px; background: #f8f8f6 none repeat scroll 0 0; } .mathima div.mathima-sect p, .mathima div.mathima-sect ul { margin-top: 5px; margin-bottom: 5px; } .mathima div.mathima-sect a:link { color: #2a363b; } .mathima div.mathima-sect a:hover { color: #A8A7A7; } .mathima .list-inline-item { margin-top: 15px; } .mathima .list-inline-item .btn { border: none; pointer-events: none; background: #f8f8f6; } /* .................... */ /* .................... */ .ptyxiaki p { border-left: 5px solid #A8A7A7; padding-left: 1rem; line-height: 1.6rem; } /* ................... */ /* ....................... */ .publications-page .blog-items { margin-top: 35px; } .publications-page .blog-items figure { display: none; } .publications-page .blog-items .blog-item { border-bottom: 2px solid #829C79; padding-bottom: 1.5rem; margin-top: -1.2rem; } .publications-page .blog-items .blog-item:last-child { border-bottom: none; } .publications-page .blog-items .blog-item p.leptomeries { margin: 0; font-size: 0.9rem; } .publications-page .blog-items .blog-item .page-header h2 { line-height: 1.2rem; margin-bottom: 1rem; } .publications-page .blog-items .blog-item .page-header h2 a { font-size: 1.1rem; } .publications-page .blog-items .blog-item .page-header h2 a:hover { border-bottom: 1px solid #829C79; } /* ...................... */ /* ....................... */ .onepaper .page-header h1 { font-size: 1.4rem; line-height: 1.6rem; } .onepaper .page-header h1::before { content: none; } .onepaper .page-header h2 { line-height: 2rem; } .onepaper p.paper-links { margin-bottom: 5rem; margin-top: 3rem; } .onepaper .paper-label { border-left: 5px solid #A8A7A7; margin-bottom: -0.7rem; padding: 0 0 0 0.5rem; line-height: 1.6rem; margin-top: 2.5rem; font-size: 1rem; font-weight: bold; } /* ...................... */ /* ...................... */ .sitemap .com-content-article ul { margin: 0; padding: 0; list-style: none; } .sitemap .com-content-article ul li ul { padding: 0 0 0 10px; } .sitemap .com-content-article ul li a { background: #B5B5B5; width: 100%; display: block; padding: 10px; margin: 10px 0; border: 1px solid #B5B5B5; color: white; transition: 0.3s ease; } .sitemap .com-content-article ul li a:hover { background: white; color: #242424; } .sitemap .com-content-article .separator { border: 1px solid #B5B5B5; background: #949292; width: 100%; display: block; padding: 10px; margin: 10px 0; color: #fff; } /* ..................... */ /* ====== COOKIES ====== */ social.ch2-icon a svg { width: 15px !important; height: 15px !important; padding: 3px !important; margin-top: 9px !important; margin-left: 3px !important; } .ch2-container, .ch2-icon { font-family: Inter, serif; } .ch2-settings-content th { color: #000 !important; } a.ch2-open-settings-btn span { text-transform: none; } .ch2-icon { bottom: 3px !important; left: 3px !important; } .ch2-settings-header p strong { font-size: 1.2rem !important; } div.ch2-settings-declaration p:nth-child(2) { display: none; } /* ====== USERWAY ====== */ body .uwy.userway_p3 #userwayAccessibilityIcon.uai { bottom: 10px !important; } body .uwy.userway_p2 .uai, body .uwy.userway_p3 .uai { left: calc(100vw - 23px) !important; } div.uwaw__inner { margin-right: 20px !important; } /* ...................... */ #error404 { text-align: center; margin: 0 auto; padding: 0; } #error404 #img-container { max-width: 1280px; margin: auto; position: relative; } @media (min-width: 1280px) { #error404 #img-container::before, #error404 #img-container::after { content: ""; position: absolute; width: 30px; height: 15px; background: #A4A1A0; border-radius: 20px / 50px; z-index: 1; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } #error404 #img-container::before { top: 386px; left: -5px; } #error404 #img-container::after { top: 390px; right: -10px; } } #error404 #g-header { z-index: 0; } @media (min-width: 1280px) { #error404 #g-header { background-image: url('../images/bgline.png'), url('../images/bgline.png'); background-position: left bottom -4px, right bottom -10px; background-repeat: no-repeat no-repeat; background-size: 50% 100%; } } #error404 #g-container-main { min-height: unset; } #error404 #g-container-main article h1 { font-size: clamp(1.1rem, 3vw, 2rem); color: #333333; margin-top: -100px; position: relative; z-index: 1; } @media (max-width: 767px) { #error404 #g-container-main article h1 { margin-top: unset; } } @media (max-width: 320px) { #error404 #g-container-main article h1 { font-size: 1rem; } } #error404 #g-container-main article .btn-return { display: inline-block; margin-top: 2.5rem; padding: 0.4rem 1.8rem; background-color: transparent; color: #242424 !important; text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; border-radius: 2.5rem; transition: all 0.3s ease; border: 2px solid #242424; margin-bottom: 100px; } #error404 #g-container-main article .btn-return:hover { background-color: #DBDBDB; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } #error404 #g-container-main article .btn-return:focus { outline: 3px solid #2c3e50; outline-offset: 3px; } @media (max-width: 415px) { #error404 #g-container-main article .btn-return { width: auto; box-sizing: border-box; padding: 0 0.5rem; } } /* ..................... */ /* .................. */ #g-footer { background-color: #333333; margin: 0 15px 15px 15px; border-radius: 60px; /* Tablet & Mobile Layout (2 γραμμές) */ /* Στα 431px φεύγει η λέξη "Report" */ /* Πολύ μικρά κινητά */ } #g-footer .footer-custom-wrapper { color: #ffffff; } #g-footer .footer-custom-wrapper .footer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; } #g-footer .footer-custom-wrapper .footer-top .footer-brand { display: flex; align-items: center; gap: 15px; } #g-footer .footer-custom-wrapper .footer-top .footer-brand .dev-logo { width: 44px; height: 44px; display: flex; align-items: center; } #g-footer .footer-custom-wrapper .footer-top .footer-brand .brand-text { display: flex; flex-direction: column; } #g-footer .footer-custom-wrapper .footer-top .footer-brand .brand-text .copyright { font-size: 13px; font-weight: 500; line-height: 1.2; color: #ffffff; } #g-footer .footer-custom-wrapper .footer-top .footer-brand .brand-text .tech-stack { font-size: 11px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; } #g-footer .footer-custom-wrapper .footer-top .scroll-top { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: background 0.3s; } #g-footer .footer-custom-wrapper .footer-top .scroll-top:hover { background: rgba(255, 255, 255, 0.2); } #g-footer .footer-custom-wrapper .accessibility-bar { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 15px; display: flex; justify-content: space-between; align-items: center; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta { font-size: 11px; display: flex; align-items: center; gap: 8px; color: #ffffff; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta .acc-tag { font-weight: 700; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta .acc-divider { color: rgba(255, 255, 255, 0.6); } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta .aaa-verified { color: #83ff88 !important; font-weight: bold; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges { display: flex; align-items: center; gap: 10px; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges img { height: 18px; display: block; border-radius: 2px; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges .report-link { font-size: 10px; color: #ffffff; text-decoration: none; opacity: 0.85; text-transform: uppercase; white-space: nowrap; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges .report-link:hover { opacity: 1; text-decoration: underline; } @media (max-width: 768px) { #g-footer .footer-custom-wrapper .footer-top { flex-direction: column; gap: 20px; text-align: center; } #g-footer .footer-custom-wrapper .footer-top .footer-brand { flex-direction: column; gap: 12px; } #g-footer .footer-custom-wrapper .footer-top .footer-brand .dev-logo { margin: 0 auto; } #g-footer .footer-custom-wrapper .footer-top .footer-extra { margin-top: 10px; } #g-footer .footer-custom-wrapper .footer-top .footer-extra .scroll-top { margin: 0 auto; } #g-footer .footer-custom-wrapper .accessibility-bar { flex-direction: column; gap: 15px; padding: 20px 10px 0; text-align: center; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta { justify-content: center; width: 100%; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges { justify-content: center; width: 100%; flex-wrap: wrap; gap: 12px; } } @media (max-width: 431px) { #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges .report-link { text-decoration: none !important; font-size: 16px; font-weight: bold; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges .report-link .report-text { display: none; } } @media (max-width: 391px) { #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta { flex-direction: column; gap: 4px; font-size: 9px; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-meta .acc-divider { display: none; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges { gap: 8px; } #g-footer .footer-custom-wrapper .accessibility-bar .acc-badges img { height: 14px; } } /* ................. */ /* ................. */ .accessibility-page h2 { font-size: 1.2rem; font-weight: bold; margin: 2.5rem 0 0 0; border: 1px solid #e0e0e0; padding-left: 10px; padding-right: 10px; background: #FBFAFA; border-radius: 8px; } .accessibility-seal { margin: 40px auto; padding: 25px; border: 1px solid #e0e0e0; border-radius: 12px; background-color: #fdfdfd; max-width: fit-content; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; /* Mobile View Optimization (κάτω από 600px) */ } .accessibility-seal:hover { transform: translateY(-2px); } .accessibility-seal .seal-content { display: flex; align-items: center; gap: 25px; } .accessibility-seal .seal-icon { font-size: 45px; color: #2a363b; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1)); } .accessibility-seal .seal-text { display: flex; flex-direction: column; line-height: 1.4; } .accessibility-seal .seal-text .seal-title { font-weight: 800; font-size: 1.1rem; color: #2a363b; letter-spacing: 0.5px; text-transform: uppercase; } .accessibility-seal .seal-text .seal-details { font-size: 0.9rem; color: #444; } .accessibility-seal .seal-text .seal-tools { display: flex; gap: 6px; margin-top: 10px; } .accessibility-seal .seal-text .seal-tools .tool-tag { font-size: 0.65rem; background: #2a363b !important; color: #ffffff !important; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; font-weight: bold; border: none; white-space: nowrap; } .accessibility-seal .seal-text .seal-tools .tool-tag.lighthouse { background: #00843d !important; } .accessibility-seal .seal-status { border-left: 2px solid #2a363b; padding-left: 25px; display: flex; flex-direction: column; align-items: center; gap: 5px; } .accessibility-seal .seal-status .status-badge { background-color: #1e7e34 !important; color: #ffffff !important; padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: bold; display: inline-block; white-space: nowrap; } .accessibility-seal .seal-status small { font-size: 0.75rem; color: #2a363b !important; text-transform: uppercase; font-weight: 600; display: block; margin-top: 4px; } @media (max-width: 600px) { .accessibility-seal { max-width: 100%; margin: 20px 10px; } .accessibility-seal .seal-content { flex-direction: column; text-align: center; gap: 15px; } .accessibility-seal .seal-text .seal-tools { justify-content: center; flex-wrap: wrap; } .accessibility-seal .seal-status { border-left: none; border-top: 2px solid #eee; padding-left: 0; padding-top: 20px; width: 100%; } } /* ................. */ /* ................. */ .profile-page #g-mainbar { padding: 0 0.938rem 0.938rem 0.938rem; margin: 0 0.938rem 0.938rem 0.938rem; } /* --- Γενικές Ρυθμίσεις Grid --- */ .profile-page #g-mainbar .g-grid { display: flex !important; flex-wrap: wrap; gap: 2rem; margin: 1.5rem 0; align-items: stretch !important; /* Κάνει κάρτα και φωτό ίσο ύψος */ } /* Ρυθμίσεις για τα Blocks */ .profile-page #g-mainbar .g-grid .g-block.size-50 { flex: 1 1 calc(50% - 1rem) !important; width: auto !important; display: flex; /* Επιτρέπει στο περιεχόμενο να τεντώνεται */ } .profile-page #g-mainbar > .g-grid > .g-block.size-100 > .g-content { margin: 0; padding: 0; } .profile-page #g-mainbar .g-grid .g-block.size-50 p { margin-top: 0; } /* --- Χρωματιστά Boxes --- */ .profile-box-life, .profile-box-code, .profile-box-teach { border-radius: 15px; overflow: hidden; color: #242424; } .profile-box-life .g-content, .profile-box-code .g-content, .profile-box-teach .g-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; /* Κεντράρει το κείμενο αν η φωτό είναι πιο ψηλή */ height: 100%; } /* Χρώματα από τις μεταβλητές σου */ .profile-box-life { background-color: #E5B6A1 !important; } .profile-box-code { background-color: #9EBFBB !important; } .profile-box-teach { background-color: #EEC873 !important; } /* --- Ρυθμίσεις Εικόνας --- */ .profile-page .pure-image { display: flex; } .profile-page .pure-image .g-content { width: 100%; height: 100%; display: flex; } .profile-page .pure-image img { width: 100%; height: 100%; object-fit: cover; /* Γεμίζει το χώρο χωρίς παραμόρφωση */ object-position: center; border-radius: 15px; display: block; } .profile-header { display: flex; align-items: end; gap: 20px; border-bottom: 1px solid #242424; padding-bottom: 20px; } .profile-header img { max-width: 250px; height: auto; } .profile-header .profile-text { text-align: right; width: 100%; } .profile-header .profile-text p { margin: 0; } @media (max-width: 767px) { .profile-header { flex-direction: column; align-items: center; gap: 15px; } .profile-header img { max-width: 100%; width: 200px; } .profile-header .profile-text { text-align: center; margin-top: 10px; } } /* --- Responsive (Mobile) --- */ @media (max-width: 767px) { /* Προαιρετικά: Αν θες η εικόνα να είναι πάντα πάνω από το κείμενο στο κινητό */ .profile-page #g-mainbar .g-grid { flex-direction: column-reverse !important; gap: 1.5rem; } .profile-page #g-mainbar .g-grid .g-block.size-50 { flex: 1 1 100% !important; width: 100% !important; } .profile-page #g-mainbar .g-grid { display: flex; flex-direction: column; } .profile-page .pure-image { order: -1; } } /* ................. */ /* strogilo */ .contact .g-particle, .contact #forma, div.parousiasi .titlos, .parousiasi .bg-site, .parousiasi .g-particle { border-radius: 8px; } /* ####### Media Rules ####### */ @media screen and (min-width: 79.939rem) { #forma .g-content { padding-left: 10rem; padding-right: 10rem; } #form h2 { color: #474747; } } @media screen and (min-width: 47.938rem) { .page-header > h1, .content-category > h1 { border-bottom: 2px solid #a8a7a7; width: fit-content; line-height: 3rem; } .g-home-particles.g-helium-style #g-navigation { background: #474747 !important; } } /* 75rem - 1280px - desktop */ @media only screen and (max-width: 79.938rem) { .g-social-header { width: auto; position: absolute; right: 0; min-width: 150px; } } @media only screen and (max-width: 800px) { p#ch2-settings-title { text-align: center; } } /* ------For Mobile Menu - 80rem ----- */ /* 45rem - 75rem | 768px - 1280px */ @media screen and (min-width: 47.938rem) and (max-width: 79.938rem) { #g-navigation .g-logo-helium img { max-width: 210% !important; } .g-offcanvas-toggle { top: 2rem; } } /* 60rem - 960px - desktop */ @media only screen and (max-width: 59.938rem) { span.g-contenttabs-tab-title { font-size: 0.9rem !important; } .g-logo.g-logo-helium img, .g-logo.g-logo-helium svg { margin-top: 3px; } span.item-link-text { display: none !important; } } /*@media screen and (min-width:960px) and (max-width:1050px){ .g-logo.g-logo-helium svg{ margin-left: 25%; } } new*/ /* @media screen and (min-width:768px) and (max-width:820px){ .g-logo.g-logo-helium svg{ margin-left: 25%; } } new*/ /* @media screen and (min-width:768px) and (max-width:840px){ #g-navigation .size-20{ margin-left:10%; } } new*/ /* 48rem - 768px - tablet */ @media only screen and (max-width: 47.938rem) { .g-logo { padding-left: unset; } .pager.pagenav li a { font-size: 0; } .pager.pagenav li a span.icon-chevron-left, .pager.pagenav li a span.icon-chevron-right { font-size: 20px !important; } div.parousiasi .over-bg-site { width: 100%; float: none; margin: auto; text-align: justify; } #home #g-expanded .g-container .g-content { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #g-navigation .g-logo { padding-left: 0; margin: -0.85rem 5rem; } div.g-block.g-social-header { display: none; } .page-header > h1, .content-category > h1 { background: #f0f0ee; text-align: center; font-size: 1.2rem; text-transform: uppercase; } div.parousiasi .g-title h1 { background: none !important; } div.parousiasi .titlos h1 { font-size: 1.2rem; text-transform: uppercase; margin-right: 0.938rem; } .courses-tabs .ui-tabs .ui-tabs-nav li { text-align: center; } .platform-content.container { padding-left: 0; padding-right: 0; } .platform-content.container > .row > .col { padding-left: 0; } .courses .g-contenttabs .g-contenttabs-tab-wrapper-head { margin-right: 0; } .epikoinonia #custom-8901-particle { padding-right: 0; } .onepaper .page-header > h1, .onepaper .content-category > h1 { font-size: 1.1rem; text-transform: inherit; text-align: left; padding: 10px; } } /* 30rem - 48rem | 480px - 768px */ @media screen and (min-width: 29.938rem) and (max-width: 47.938rem) { .g-container { width: 100%; } } /* 36rem - 577px - between tablet and mobile */ @media only screen and (max-width: 35.938rem) { #home #g-expanded .g-container { width: 100%; } } /* 30rem - 480px - mobile */ @media only screen and (max-width: 29.938rem) { #custom-5807-particle p.g-title { font-size: 1.1rem; } #home #g-features .size-16-7 { flex: 0 1 50% !important; } table.sortable tr td:nth-child(3), table.sortable tr th:nth-child(3) { display: none; } div.parousiasi .over-bg-site { width: 100%; text-align: left; } div.parousiasi div.g-block.bg-site .g-content.g-particle { padding: 0; } #home #g-expanded { padding: 0 25px; } div.g-block.g-social-header { display: none; } #kefalonia-button a { width: 180px; height: 154px; } .g-recaptcha > div > div { transform: scale(0.9); -webkit-transform: scale(0.9); width: 122% !important; margin-left: -11%; } .ch2-settings-scan .ch2-settings-tabs ul li a { padding: 10px !important; } body .uwy .uai { height: 30px !important; width: 30px !important; } .uwy .uai img, body .uwy .uai img { width: 30px !important; height: 30px !important; } body .uwy .uai .ups { width: 15px !important; height: 15px !important; margin-left: 5px !important; margin-top: 5px !important; } #home #g-features .size-25-4 { flex: 0 1 50% !important; } .g-home-particles.g-helium-style .fp-features .g-block:not(:last-child) { margin-bottom: 0; } } /* 520px */ @media only screen and (max-width: 520px) { .epikoinonia iframe { display: inline-block; transform: scale(0.9); -webkit-transform: scale(0.9); } .pagination ul > li > a, .pagination ul > li > span { border-radius: 25%; margin: 10px; border-width: 1px !important; } .theses-page li.pagination-start, .theses-page li.pagination-prev, .theses-page li.pagination-next, .theses-page li.pagination-end { display: none; } .theses-page .pagination ul { box-shadow: unset !important; } } @media only screen and (max-width: 350px) { #g-navigation .g-logo { max-width: 60%; margin: -0.85rem auto; } #g-footer .g-horizontalmenu { display: none; } } @media only screen and (min-width: 29.938rem) and (max-width: 47.938rem) { .platform-content.container > .row > .col { padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 59.938rem) { .platform-content.container > .row > .col { padding-left: 0; padding-right: 0; } } #g-contenttabs-item-module-contenttabs-110-2:target { scroll-margin-top: 100vh !important; } /* ................. */ #logo-mobile-menu { margin-top: 0; padding: 0.85rem 1rem 0.45rem; display: flex; align-items: center; justify-content: center; gap: 0.65rem; width: 100%; margin-left: 0; margin-right: 0; } #logo-mobile-menu .g-content.g-particle { padding: 0; display: flex; align-items: center; gap: 0; order: 1; width: 100%; margin: 0 auto; justify-content: center; position: relative; } #logo-mobile-menu .g-logo { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 auto; text-decoration: none; white-space: nowrap; } #logo-mobile-menu .g-logo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1.5px; background-color: #000000; z-index: -1; } #logo-mobile-menu .g-logo::after { content: "dkarousos.com"; font-family: Inter, serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: #2a363b; line-height: 1; margin-right: 10px; } #logo-mobile-menu img { display: block; margin: 0; width: 42px; height: auto; } /* -------------------- 1. OFFCANVAS OVERLAY -------------------- */ #g-offcanvas { box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5); } body.g-offcanvas-open #g-page-surround { transform: none !important; left: 0 !important; } /* -------------------- 2. MAIN STRUCTURE -------------------- */ #g-offcanvas .g-content.g-particle { padding: 0.3rem; } #g-offcanvas .g-main-nav .g-toplevel { display: block !important; } #g-offcanvas .g-main-nav .g-toplevel > li { display: block !important; width: 100%; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.05); position: relative !important; } /* Menu item */ #right-mobile-menu .g-menu-item-container { padding: 10px 12px; margin-bottom: 5px; display: flex; align-items: center; outline: none; } /* -------------------- 3. DROPDOWN (ACCORDION) -------------------- */ #g-offcanvas .g-dropdown { position: relative !important; width: 100% !important; /* ΔΙΟΡΘΩΣΗ: Κρύβουμε χωρίς display:none για να δουλεύει το Tab */ max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; background: transparent !important; box-shadow: none; border-left: 1px solid rgba(255, 255, 255, 0.2); transition: max-height 0.3s ease-out, opacity 0.3s ease; } /* Εμφάνιση όταν είναι ανοιχτό (JS click) ή όταν έχει Focus (Tab) */ #g-offcanvas li.is-open > .g-dropdown, #g-offcanvas li.g-selected > .g-dropdown { max-height: 1500px; /* Επιτρέπει στο περιεχόμενο να φανεί */ visibility: visible !important; opacity: 1 !important; overflow: visible; } /* -------------------- 4. SUBMENU -------------------- */ #g-offcanvas .g-sublevel { padding: 0 !important; } #g-offcanvas .g-sublevel > li { margin: 5px; } #g-offcanvas .g-sublevel > li .g-menu-item-container { padding: 8px 10px 8px 15px !important; font-size: 0.9rem; line-height: 1.3; white-space: normal; } /* 5. FIX PADDING & COLORS (ACTIVE vs OPEN/SEPARATOR) */ #g-offcanvas .g-main-nav { /* Highlights για Active, Open, Hover και TAB */ } #g-offcanvas .g-main-nav li, #g-offcanvas .g-main-nav .g-dropdown { background: transparent !important; } #g-offcanvas .g-main-nav li.active > .g-menu-item-container, #g-offcanvas .g-main-nav li.g-selected > .g-menu-item-container, #g-offcanvas .g-main-nav li.g-separator > .g-menu-item-container, #g-offcanvas .g-main-nav li.is-open > .g-menu-item-container, #g-offcanvas .g-main-nav li > .g-menu-item-container:hover, #g-offcanvas .g-main-nav li:focus-within > .g-menu-item-container { border-radius: 100px !important; display: flex !important; align-items: center !important; } #g-offcanvas .g-main-nav li.active > .g-menu-item-container, #g-offcanvas .g-main-nav li.g-selected > .g-menu-item-container, #g-offcanvas .g-main-nav li > .g-menu-item-container:hover, #g-offcanvas .g-main-nav li:focus-within > .g-menu-item-container { background-color: #ffffff !important; color: #000 !important; } #g-offcanvas .g-main-nav li.active > .g-menu-item-container { border: 1px solid gray; } #g-offcanvas .g-main-nav li.g-separator > .g-menu-item-container, #g-offcanvas .g-main-nav li.is-open > .g-menu-item-container { background-color: #eeeeee !important; } #g-offcanvas .g-main-nav .g-menu-parent-indicator { margin-left: auto !important; padding-left: 10px; display: flex !important; align-items: center; } /* -------------------- 6. ICONS FIX (FULL REPAIR) -------------------- */ #right-mobile-menu { --mobile-menu-transition: 0.3s ease-out; } #right-mobile-menu .g-dropdown { transition: max-height var(--mobile-menu-transition), opacity var(--mobile-menu-transition); } /* 1. Σιγουρευόμαστε ότι το container του μενού αφήνει χώρο για το κλικ */ #g-offcanvas .g-menu-item-container { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* 2. Ρυθμίσεις για το εικονίδιο (βελάκι) */ #right-mobile-menu .g-menu-parent-indicator { position: relative !important; z-index: 9999 !important; /* Πάνω από όλα */ pointer-events: none !important; /* Το toggle γίνεται μόνο από όλο το row */ cursor: default !important; margin-left: auto; /* Σπρώξιμο τέρμα δεξιά */ display: flex !important; align-items: center; justify-content: center; transition: transform var(--mobile-menu-transition), color var(--mobile-menu-transition), background-color var(--mobile-menu-transition); } /* 3. Default: βελάκι δεξιά */ #right-mobile-menu .g-menu-parent-indicator:before { content: "" !important; /* FontAwesome βελάκι δεξιά */ font-family: "Font Awesome 6 Free", "FontAwesome" !important; font-weight: 900; transition: opacity var(--mobile-menu-transition); } #right-mobile-menu .g-menu-parent-indicator:after { content: none !important; display: none !important; } #right-mobile-menu .g-menu-parent-indicator i { display: none !important; } /* 4. Open state: βελάκι κάτω */ #right-mobile-menu li.is-open > .g-menu-item-container .g-menu-parent-indicator:before, #right-mobile-menu li.g-selected > .g-menu-item-container .g-menu-parent-indicator:before, #right-mobile-menu .g-menu-parent-indicator[aria-expanded="true"]:before { content: "" !important; /* FontAwesome βελάκι κάτω */ } /* 5. Περιστροφή μόνο αν το στοιχείο είναι ανοιχτό */ #right-mobile-menu li.is-open > .g-menu-item-container .g-menu-parent-indicator { transform: none !important; /* Απενεργοποίηση περιστροφής αν μπερδεύει το κλικ */ } /* 6. Εξασφάλιση ότι το κείμενο του μενού δεν καλύπτει το βελάκι */ #right-mobile-menu .g-menu-item-content { flex: 1; pointer-events: none; /* Το κείμενο δεν κλέβει το κλικ */ } #right-mobile-menu .g-menu-item-content a { pointer-events: auto; /* Οι σύνδεσμοι δουλεύουν κανονικά */ } /* Ενίσχυση ορατότητας (Accessibility) */ #right-mobile-menu .g-menu-parent-indicator:focus { outline: none; } /* Visible keyboard focus ring for mobile offcanvas rows */ #right-mobile-menu .g-menu-item-container:focus, #right-mobile-menu .g-menu-item-container:focus-visible, #right-mobile-menu .g-menu-item-container:focus-within { outline: 2px solid #0a84ff !important; outline-offset: 2px; border-radius: 999px; } #right-mobile-menu .g-menu-parent-indicator:focus-visible, #right-mobile-menu .g-menu-item-content a:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; border-radius: 999px; } /* -------------------- 7. DESKTOP HIDE -------------------- */ .g-offcanvas-right .g-offcanvas-toggle { right: 1.563rem; } @media (max-width: 1280px) { .g-offcanvas-right .g-offcanvas-toggle { right: 2.563rem; top: 3rem; } } @media (min-width: 1280px) { #g-offcanvas-handle, .g-offcanvas-toggle { display: none !important; } } @media (max-width: 768px) { .g-offcanvas-right .g-offcanvas-toggle { top: 2.3rem; } } @media (max-width: 430px) { .g-offcanvas-right .g-offcanvas-toggle { top: 2rem; } } @media (max-width: 400px) { .g-offcanvas-right .g-offcanvas-toggle { top: 1.9rem; } } @media (max-width: 370px) { .g-offcanvas-right .g-offcanvas-toggle { top: 1.7rem; } } @media (max-width: 350px) { .g-offcanvas-right .g-offcanvas-toggle { top: 2rem; } } @media (max-width: 330px) { .g-offcanvas-right .g-offcanvas-toggle { top: 1.7rem; } } /* ................. */ .fist-card { border: 2px solid #474747; flex-direction: column; padding: 10px; border-radius: 8px; } .web-project-title { text-align: center; margin: 0; } .web-project-keywords { text-align: right; color: #494949; margin-bottom: 2rem; } .parousiasi .foreas { text-align: right; margin-bottom: 0; } .parousiasi .g-grid { margin-bottom: 1rem; } .parousiasi .g-grid .g-content { height: 100%; overflow: auto; } /* ................. */ .web-project-presentation { --ink: #2b2b2d; --metric-title: #A53701; --brick: #fd9124; --card: rgba(255, 255, 255, 0.86); --line: rgba(43, 43, 45, 0.14); --radius: 18px; --shadow: 0 14px 34px rgba(24, 24, 26, 0.1); --project-color-1: #1f317c; --project-color-2: #fd9124; --project-color-3: #9d9d9d; --project-color-4: #324A5E; position: relative; margin: 0; padding: 0; color: var(--ink); font-family: "Inter", sans-serif; line-height: 1.45; } .web-project-presentation * { box-sizing: border-box; } .web-project-presentation .hero { padding: 28px; background: linear-gradient(110deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 246, 0.82) 100%); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; position: relative; } .web-project-presentation .hero::after { content: ""; position: absolute; width: 160px; height: 160px; right: -36px; top: -26px; background: conic-gradient(from 40deg, var(--project-color-1), transparent 28%, var(--project-color-2), transparent 62%, var(--project-color-3), transparent); opacity: 0.2; border-radius: 50%; } .web-project-presentation .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: #5a5b63; margin-bottom: 10px; } .web-project-presentation .web-project-logo { height: 60px; width: auto; position: absolute; right: 25px; top: 25px; filter: brightness(1) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2)); } @media (max-width: 767px) { .web-project-presentation .web-project-logo { display: none; } } .web-project-presentation .exams-repo .web-project-logo { right: 17px; top: 32px; } .web-project-presentation .moodle-b2 .web-project-logo { right: 10px; top: 32px; } .web-project-presentation .moodle-bkyklos .web-project-logo { right: 10px; top: 30px; } .web-project-presentation .icvirtual .web-project-logo { height: 70px; right: 22px; top: 22px; } .web-project-presentation .icrepo .web-project-logo { height: 52px; right: 26px; top: 35px; } .web-project-presentation h1 { font-family: "Inter", sans-serif; font-size: clamp(1.5rem, 3.6vw, 2rem); line-height: 1.14; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; margin: 0 0 14px; max-width: calc(100% - 110px); } .web-project-presentation .lead { margin: 0; max-width: calc(100% - 110px); font-size: clamp(1rem, 2vw, 1.15rem); color: #3d3e44; } .web-project-presentation .metrics { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } .web-project-presentation .metric { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-width: 130px; transition: transform 0.22s ease; } @media (max-width: 767px) { .web-project-presentation .metric { width: 100%; } } @media (min-width: 768px) { .web-project-presentation .metric { flex-grow: 1; width: calc(33% - 5px); } } .web-project-presentation .metric:hover { transform: translateY(-3px); } .web-project-presentation .metric strong { display: block; font-size: 1.2rem; color: var(--metric-title); } .web-project-presentation .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .web-project-presentation .case-strip { margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .web-project-presentation .case-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 10px 24px rgba(31, 30, 28, 0.08); } .web-project-presentation .case-card small { display: inline-block; text-transform: uppercase; letter-spacing: 0.08em; color: #3D5E5A; font-weight: 700; } .web-project-presentation .case-card h2 { margin: 0 0 7px; font-size: 1.04rem; } .web-project-presentation .case-card p { margin: 0; font-size: 0.95rem; color: #433f38; } .web-project-presentation .panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); backdrop-filter: blur(7px); box-shadow: var(--shadow); overflow: hidden; opacity: 0; transform: translateY(16px); animation: rise 0.65s ease forwards; } .web-project-presentation .panel:nth-child(2) { animation-delay: 0.08s; } .web-project-presentation .panel:nth-child(3) { animation-delay: 0.14s; } .web-project-presentation .panel:nth-child(4) { animation-delay: 0.2s; } @keyframes rise { to { opacity: 1; transform: translateY(0); } } .web-project-presentation .panel-body { padding: 18px; } .web-project-presentation .fullheight.panel-body { display: flex; flex-direction: column; height: 100%; } .web-project-presentation .work { grid-column: span 7; } .web-project-presentation .work h2, .web-project-presentation .stack h2 { margin: 0 0 12px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.09em; color: #46423c; } .web-project-presentation .shot { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; margin-top: -5px; margin-right: -12px; margin-left: -12px; } .web-project-presentation .fullheight .shot { overflow-y: auto; /* Ενεργοποιεί το κάθετο scroll όταν περιεχόμενο ξεχειλίζει */ overflow-x: hidden; /* Κρύβει τυχόν οριζόντιο ξεχείλισμα */ height: 100%; aspect-ratio: 1.7777777778; position: relative; cursor: ns-resize; } .web-project-presentation .panel.work .fullheight .shot:active { cursor: grabbing; } .web-project-presentation .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .web-project-presentation .shot img:hover { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .web-project-presentation .up-5px { transition: transform 0.18s ease; } .web-project-presentation .up-5px:hover { transform: translateY(-5px); } .web-project-presentation .fullheight .shot img { display: block; width: 100%; /* Πιάνει όλο το πλάτος του .shot */ height: auto; /* Αφήνει το ύψος ελεύθερο (7598px) για να προκληθεί το scroll */ } .web-project-presentation .shot-label { position: absolute; left: 10px; bottom: 10px; background: rgba(47, 63, 146, 0.86); color: #fff; font-size: 12px; padding: 6px 8px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; display: none; } .web-project-presentation .stack { grid-column: span 5; } .web-project-presentation .stack-list { display: flex; flex-direction: column; gap: 15px; margin-top: 17px; } .web-project-presentation .stack-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.93rem; } .web-project-presentation .contribution-item { align-items: flex-start; flex-wrap: wrap; gap: 10px; } .web-project-presentation .contribution-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .web-project-presentation .contrib-chip { display: inline-block; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(31, 49, 124, 0.28); background: rgba(31, 49, 124, 0.09); font-size: 0.82rem; line-height: 1.25; white-space: nowrap; } .web-project-presentation .palette-dots { display: inline-flex; gap: 8px; align-items: center; } .web-project-presentation .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); display: inline-block; } .web-project-presentation .site-screens { margin-top: 14px; } .web-project-presentation .site-screens h2 { margin: 0 0 10px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.09em; color: #46423c; } .web-project-presentation .site-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .web-project-presentation .border-sc { border: 1px solid lightgray; border-radius: 10px; } .web-project-presentation .site-gallery figure { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; } .web-project-presentation .screen-btn { display: block; width: 100%; border: 0 !important; padding: 0; margin: 0; background: transparent; cursor: pointer; text-decoration: none; } .web-project-presentation .screen-btn:focus-visible { outline: 3px solid #0a84ff; outline-offset: -3px; } .web-project-presentation .site-gallery img { width: 100%; aspect-ratio: 1.6; object-fit: cover; display: block; } .web-project-presentation .site-cta { margin-top: 14px; display: flex; justify-content: center; } .web-project-presentation .project-live-btn { text-decoration: none; display: inline-block; text-align: center; font-weight: 700; letter-spacing: 0.02em; border: 3px solid #5A5858; color: #5A5858; transition: all 0.3s ease; border-radius: 50px; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1rem; line-height: 1; } .web-project-presentation .project-live-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(31, 49, 124, 0.35); background: #5A5858; color: #fff; } .web-project-presentation .foot { margin-top: 18px; text-align: center; color: #5b574f; font-size: 0.9rem; } @media (max-width: 980px) { .web-project-presentation .case-strip { grid-template-columns: 1fr; } .web-project-presentation .work, .web-project-presentation .stack { grid-column: span 12; } .web-project-presentation .fullheight .shot { aspect-ratio: auto; } .web-project-presentation .lead { max-width: 100%; } } @media (max-width: 767px) { .web-project-presentation h1 { max-width: 100%; } .web-project-presentation .stack-item { align-items: start; } .web-project-presentation .stack-item span { padding-right: 10px; } .web-project-presentation .stack-item strong { text-align: right; } } .web-project-presentation .wf-mediabox-caption { text-align: center; border: 1px solid #333; border-radius: 12px; width: max-content; padding: 5px 10px; margin: 10px auto auto auto; } .web-project-presentation #wf-mediabox-modal-title { font-size: 0.9rem; color: #333; max-width: 100%; } .web-project-presentation #wf-mediabox-modal-title::after { content: ""; width: 40px; height: 1px; background: #333; display: block; margin: 5px auto 3px auto; } .web-project-presentation #wf-mediabox-modal-description { font-size: 0.8rem; color: #333; } @media (max-width: 580px) { .web-project-presentation .hero, .web-project-presentation .panel-body { padding: 14px; } .web-project-presentation .metric { min-width: 110px; } .web-project-presentation .site-gallery { grid-template-columns: 1fr; } .web-project-presentation .contribution-item { flex-direction: column; align-items: flex-start; } .web-project-presentation .contribution-tags { max-width: 100%; justify-content: flex-start; } } /* ................. */ /* ................. */ .live-cameras-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .live-cameras-container .photos-badge, .live-cameras-container .live-badge, .live-cameras-container .cam-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; line-height: 1; box-sizing: border-box; border-radius: 20px; font-size: 0.9rem; font-weight: 600; text-decoration: none; } .live-cameras-container .photos-badge { background-color: #e6f2ff; border: 1px solid #b3d7ff; color: #003d9a; gap: 6px; } .live-cameras-container .photos-badge .photos-icon { font-size: 0.9rem; display: inline-block; } .live-cameras-container .right-side-wrapper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .live-cameras-container .live-badge { background-color: #fcebeb; border: 1px solid #f5c2c2; color: #972020; gap: 6px; } .live-cameras-container .live-badge .live-dot { width: 8px; height: 8px; background-color: #972020; border-radius: 50%; position: relative; animation: blink 1.5s infinite ease-in-out; } .live-cameras-container .live-badge .live-dot::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: #972020; animation: pulse 1.5s infinite ease-in-out; opacity: 0.4; } .live-cameras-container .camera-buttons { display: flex; gap: 6px; flex-wrap: wrap; } .live-cameras-container .camera-buttons .cam-btn { border: 1px solid #ccc; color: #555; transition: all 0.3s ease; } .live-cameras-container .camera-buttons .cam-btn:hover { border-color: #333; color: #000; background-color: #f9f9f9; } @media (max-width: 500px) { .live-cameras-container { flex-direction: column-reverse; align-items: center; } .live-cameras-container .right-side-wrapper { width: 100%; justify-content: center; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } } .moments-page .g-offcanvas-toggle { z-index: 2000; } @media screen and (max-width: 640px) { a[class*="lightcase-icon-"] { font-size: 35px; } a[class*="lightcase-icon-"].lightcase-icon-close { top: 30px; right: 30px; } a[class*="lightcase-icon-"].lightcase-icon-prev { left: 30px; bottom: 30px; } a[class*="lightcase-icon-"].lightcase-icon-next { right: 30px; bottom: 30px; } } /* ................. */ /*# sourceMappingURL=custom_13.css.map */