...
CSS Stylesheet |
---|
/*--------------------------------------------------*/ /*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/ /*------------------------------------------------*/ #main-content p:empty { display: none;} /*#main-content p span:empty { display: none;}*/ .mb-0 { margin-bottom:0;} /*---INTRODUCTION---*/ #introduction {} #introduction h1 { margin-bottom:2.5rem;} #introduction p { margin-bottom:0;} .introduction-illu { line-height:0 !important;} .introduction-illu img { width: 180px;} @media screen and (min-width: 769px) { .introduction-illu img { width: 100%; max-width: 320px; height: auto;} } /*---BENEFITS---*/ #benefits { padding-bottom:10rem; background: #F3F4F7;} #benefits ul { display: flex; flex-wrap: wrap; margin-bottom:0; padding:0; list-style:none;} #benefits ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.75rem; width: 50%;} #benefits ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;} @media screen and (min-width: 769px) { #benefits { padding-bottom:15rem; background: #F3F4F7;} #benefits ul li { padding:0 3rem 0 1.75rem;} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; position:relative;} #box-cta-projectathon .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;} #box-cta-projectathon .container .cols { margin-bottom:-1rem;} #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:1rem;} #box-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;} #box-cta-projectathon h3, #box-cta-projectathon p { color: white;} #box-cta-projectathon p.p-opacity { opacity: 0.75} #box-cta-projectathon p:last-of-type { margin-bottom:0;} /*hack - remove empty p from confluence*/ #box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;} @media screen and (min-width: 769px) { #box-cta-projectathon { margin-top:-12rem;} #box-cta-projectathon .projectathon-box { padding:2.5rem;} #box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;} #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0} } @media screen and (min-width: 1366px) { #box-cta-projectathon .projectathon-box { padding:5rem;} } /*---TEAMS AND ACTORS---*/ #teams-actors { padding-top:0;} #teams > p { display: none; border:1px solid red;} #teams ul { margin:2.5rem 0 0 0; padding:0; list-style:none; } #teams ul li { margin-top:24px;} #teams ul li h4 { margin-bottom:12px; color:#3D597A !important;} #teams ul li p { margin-bottom:0;} #teams .teams-text { z-index: 3; position: relative;} #teams .teams-illu { position: relative;} .teams-illu-img { z-index: 2; position: relative; width: 180px;} .teams-illu p { margin-bottom:0;} @media screen and (max-width: 768px) { .teams-illu-bg { width: 100%; height: auto;} .teams-illu-bg { z-index: 1; position:absolute; top: 0; left:0;} } @media screen and (min-width: 769px) { #teams-actors { overflow:hidden;} .teams-illu-img { width: 100%; max-width: 250px; height: auto;} .teams-illu-bg { z-index: 1; position:absolute; top: -80px; left:-80px;} } /*---ACTORS---*/ #actors { position:relative; z-index:3; margin-top:2.5rem;} #actors ul { margin-top:2.5rem !important; margin-bottom:2.5rem; padding:0; list-style:none; } #actors ul li:last-child { border-bottom: none;} #actors ul li h4 { margin-bottom:12px; color:#3D597A !important;} @media screen and (min-width: 1366px) { #actors ul { display: flex; flex-wrap: wrap;} #actors ul li { flex-shrink: 2; padding:0 30px; width: 50%; border-left:1px solid #E3E6EB; border-bottom: none;} #actors ul li:first-child { padding-left:0; border-left:none;} } /*---HOW TO PARTICIPATE---*/ #how-to-participate { padding-top:0; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-sigle-how-to-participate.svg"); background-repeat: no-repeat; background-position: 100% 60%;} #how-to-participate .cols p:first-child { display: none;} #how-to-participate ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #how-to-participate ul li > div { display:flex; align-items: baseline; gap:10px;} #how-to-participate ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;} #how-to-participate h3 { margin-bottom:2.5rem;} /*---PROJECTATHON DETAIL---*/ #projectathon-detail {margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; padding-bottom:6rem; position:relative;} #projectathon-detail .cols { margin-bottom:0;} @media screen and (min-width: 769px) { #projectathon-detail { padding-bottom:9rem;} } /*---BOX CTA PROJECTATHON DETAIL---*/ #box-cta-projectathon-detail { position:relative;} #box-cta-projectathon-detail { padding:1.5rem; background-color: #00284A; border-radius:20px;} #box-cta-projectathon-detail h3 { color: #FBC11D;} #box-cta-projectathon-detail p { color: white; opacity: 0.75} #box-cta-projectathon-detail img { position:absolute; bottom:-40px; right:20px; width: 100px;} @media screen and (min-width: 769px) { #projectathon-detail {margin-top:-12rem;} #box-cta-projectathon-detail { padding:2.5rem;} #box-cta-projectathon-detail img { bottom:-55px; right:40px; width: 150px;} } @media screen and (min-width: 1366px) { #box-cta-projectathon-detail { padding:5rem;} #box-cta-projectathon-detail img { bottom:-80px; right:80px; width: 180px;} } /*---UPCOMING PROJECTATONS---*/ #upcoming-projectatons {} .card-upcoming-cols { margin-top: 1.5rem;} /*---UPCOMING CARDS---*/ .card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;} .card-upcoming-body a { display: block; line-height:0; text-align: right; height: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;} .card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-01.png"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;} .card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-02.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;} .card-upcoming-col:nth-child(3) .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;} .card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;} .card-upcoming-body p { position:relative;} .card-upcoming-body p.label { margin-bottom:12px; display: inline-block;} .card-upcoming-body p:last-child { margin-bottom:0;} .card-upcoming-date { font-size: 14px !important; color: #5E748E !important;} .card-upcoming-footer { margin-top:24px; text-align: right;} .card-upcoming-footer .label { display: inline;} .card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;} .card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;} .card-upcoming .label.past { color: #3D597A; background: #E3E6EB;} .card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;} @media screen and (max-width: 991px) { .card-upcoming-col { margin-bottom: 1.5rem;} } @media screen and (min-width: 992px) { .card-upcoming-cols { display: flex; width: 100%; gap:20px;} .card-upcoming-col:nth-child(1) { width: 31%;} .card-upcoming-col:nth-child(2) { width: 31%;} .card-upcoming-col:nth-child(3) { width: 38%31%;} .card-upcoming-body { flex: 1 1 auto;} } /*---PAST INSIGHTS---*/ .past-insights { padding-top:4rem;} .past-insights .col-7, .past-insights .col-4 { padding-top: 0; padding-bottom: 0;} .wiki-content .past-insights-p { margin-bottom:2rem;} .wiki-content .past-insights-illu { margin-bottom:0; line-height:0 !important;} .past-insights-illu img { width: 180px;} .wiki-content .past-insights-cta { margin-bottom:0;} @media screen and (min-width: 769px) { .past-insights-illu img { width: 100%; max-width: 200px; height: auto;} } /*---PROJECTATHON HIGHLIGHT---*/ #projectathon-highlight { padding-bottom: 0;} #projectathon-highlight .cols {} .projectathon-highlight-past .col-7, .projectathon-highlight-past .col-4 { padding-top: 0; padding-bottom: 0;} .wiki-content #projectathon-highlight .past-insights-p { margin-bottom:2rem;} .wiki-content #projectathon-highlight .past-insights-illu { margin-bottom:0; line-height:0 !important;} .projectathon-highlight-past img { width: 180px;} .wiki-content .projectathon-highlight-past .past-insights-cta { margin-bottom:0;} @media screen and (min-width: 769px) { .projectathon-highlight-past img { width: 100%; max-width: 200px; height: auto;} } /*cols video*/ .cols-video div p:first-child { display: none; border:1px solid yellow;} /*tabs video*/ #tabs-video-nav { list-style: none; margin: 0; padding: 0; overflow: auto;} #tabs-video-nav li a { text-decoration: none; color: #001832;} #tabs-video-nav li a .cover-play { position: relative; display:inline-block; line-height: 0;} #tabs-video-nav li a .cover-play:before { z-index: 1000; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 40px; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-play-video-secondary.svg)} #tabs-video-nav li a .cover-play img { width: 100%; max-width: 110px; height: auto; border: 2px solid transparent; border-radius:16px; opacity: 1; filter: brightness(0.7) saturate(0.7);} #tabs-video-nav li:hover a .cover-play img { opacity: 1; filter: none;} #tabs-video-nav li.active a .cover-play:before { display: none;} #tabs-video-nav li.active a .cover-play img { /*border: 2px solid #842DB5;*/ opacity: 1; filter: none;} #tabs-video-nav li a .cover-text { display: block; color: #3D597A;} #tabs-video-nav li.active a .cover-text { color:#842DB5;} .tabs-video-content { background-color: #FFF;} .tabs-video-content-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */} .tabs-video-content-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;} @media screen and (min-width: 769px) { #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; margin: 0; padding: 0; overflow: auto;} #tabs-video-nav li { width: 20%; cursor: pointer;} #tabs-video-nav li a .cover-play img { width: 100%; max-width: 300px; height: auto;} } /*---BOX CTA REPORT---*/ #box-cta-report { padding-bottom:0; position:relative;} #box-cta-report .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;} #box-cta-report .container .cols { margin-bottom:-1rem;} #box-cta-report .projectathon-box-col-illu { margin-bottom:1rem;} #box-cta-report .projectathon-box-col-illu img { width: 120px; height:auto;} #box-cta-report h3, #box-cta-report p { color: white;} #box-cta-report p.p-opacity { opacity: 0.75} #box-cta-report p:last-of-type { margin-bottom:0;} /*hack - remove empty p from confluence*/ #box-cta-report .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;} @media screen and (min-width: 769px) { #box-cta-report .projectathon-box { padding:2.5rem;} #box-cta-report .projectathon-box-cols { display: flex; align-items: center;} #box-cta-report .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0} } @media screen and (min-width: 1366px) { #box-cta-report .projectathon-box { padding:5rem;} } |