Page History

CSS Stylesheet

/*only for dev*/
/*.section { border:1px solid red;}
.cols { border:1px solid green;}*/

/*erase main CSS*/
.cols { margin-top: 0;}
.cols:last-child { margin-bottom: 0;}
.cols:not(:last-child) { margin-bottom: 0;}
.cols > div { padding-top: 0; padding-bottom:0;}

/*remove empty p added by Confluence*/ 
#main-content p:empty { display: none;}  

/*-----------------------------------------------*/
/*---OOH FORUM EVENT DETAIL PAGE - 06-10-2023---*/
/*---------------------------------------------*/  

/*---INTRODUCTION---*/
#introduction .container > p:first-child { display: none; border:1px solid purple;}
.introduction-box { display: flex; border-radius: 16px; overflow: hidden; }
.introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-event-introduction-citizens.jpg"); background-size: cover;} 
.introduction-box-content { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;}
.introduction-box-content * { position: relative;}
.introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;}
.introduction-box-content p:last-child { margin-bottom:0;}
.heading-subtitle { display: block; font-size: 14px; line-height: 24px;}

@media screen and (max-width: 768px) {
    .introduction-box { display: block;}
    .introduction-box-cover { height: 12rem; width: 100%;}
    .introduction-box-content { padding: 2rem; width: 100%;}
    .introduction-box-content:before { width: 0;}
}

/*---INFORMATION---*/
#information { padding-top:0; padding-bottom:0;}
#information h2 { margin:3rem 0 2.5rem 0;}
#information p:last-child { margin-bottom:0;}
.information-list { margin: 0; padding: 0;}
.information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;}
.information-list li:first-child { margin-top:0;}
.information-list li:last-child { padding-bottom:0; border-bottom: none;}
.information-col:nth-child(1) p { font-size: 18px; color: #001832;}

@media screen and (min-width: 769px) {
	#information h2 { margin:6rem 0 2.5rem 0;}  
	.information-cols { display: flex; align-items: center;}
	.information-col:nth-child(1) { width: 30%;}
	.information-col:nth-child(2) { width: 70%}
}

/*---AGENDA BOX---*/
.agenda-content-box { margin-bottom:6rem; padding:80px 60px 60px 60px; background-color:#F3F4F7; border-radius:20px;}
.agenda-content-box:last-child { margin-bottom:0;}
.agenda-content-box h2 + p { color: white; opacity: 0.75;}  

@media screen and (max-width: 768px) { 
  .agenda-content-box { margin-bottom:3rem; padding:40px 20px 20px 20px;}
}

.agenda-content-box {background-color: #00284A;}
.agenda-content-box h2 {color: #FFF;}

.agenda-content-box .expand-container { border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
.agenda-content-box .expand-container:last-child { border-bottom: 1px solid transparent;}
.agenda-content-box .expand-control-text {color: #FFF;}
.agenda-content-box .expand-container .aui-icon::before { color: #FFF;}

.agenda-content-box .agenda-hour li {border-bottom: 1px dashed rgba(255, 255, 255, 0.25);}
.agenda-content-box .agenda-hour li:last-child { border-bottom: 1px dashed transparent;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(1) {color: #FFF;}
.agenda-content-box .agenda-hour li .agenda-hour-col:nth-child(2) {color: rgba(255, 255, 255, 0.75);}

.agenda-content-box { position: relative;}
.illu-forum-agenda { position: absolute; bottom: -65px; right: 50px;}
.illu-forum-agenda img {width: 90px;}

@media screen and (min-width: 769px) {
  .illu-forum-agenda { bottom: -110px; right: 100px;}
  .illu-forum-agenda img {width: 180px;}
}

/*--- AGENDA MACRO EXPAND ---*/  
.agenda-content-box .expand-container:last-child { border-bottom:1px solid transparent;}
.expand-container { margin:0; padding:0; border-bottom:1px solid #E3E6EB;}
.expand-control { display: flex; flex-direction: row-reverse; align-items: center; margin-bottom:0; padding:1rem 0;}
.expand-control-text { margin:0 0.5rem 0.5rem 0; width: 100%; font-size: 20px; color:#001832;}
.expand-content { margin:0; padding: 0; color: #5E748E;}
.expand-container [aria-expanded="true"] .aui-iconfont-chevron-down { transform: rotate(180deg);}
.expand-container [aria-expanded="false"] .aui-iconfont-chevron-right { transform: rotate(90deg);}
.expand-container .aui-icon::before { font-size: 20px !important;}

@media screen and (max-width: 768px) { 
  .expand-control-text { font-size: 16px;}
}

/*---AGENDA HOUR---*/
.agenda-hour { margin: 0; padding:0; }
.agenda-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #E3E6EB;}
.agenda-hour li:first-child { padding-top:0;}
.agenda-hour li:last-child { padding-bottom:0; border-bottom: none;}
.agenda-hour li .agenda-hour-cols { display: flex;}
.agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%;  font-family: Source Sans Pro SB;}
.agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;}
.agenda-hour .label { margin-bottom:0;}
.agenda-hour .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}
.agenda-hour .label.plenary span { color: #842DB5; background: #F2E5F7;}
.agenda-hour .label.ccab span { color: #995E00; background: #FFEECC;}
.agenda-hour .label.tbc span { background: #E3E6EB;}

@media screen and (min-width: 769px) {
	.agenda-cols { display: flex;}
	.agenda-col:nth-child(1) { width: 30%;}
	.agenda-col:nth-child(2) { width: 70%}
}   

/*---UPCOMING EVENT---*/
#upcoming-event h2 + p { margin-bottom:3rem;}

/*---UPCOMING CARDS---*/
.card-upcoming-col { margin-top: 1.5rem;}

.card-upcoming-col:nth-child(0) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-event-introduction-citizens.jpg"); background-size: 100%; background-position: 0 10%;border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}     
.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/688493907/illu-forum-event-introduction-students.jpg"); background-size: 100%; background-position: center; 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/688493907/illu-forum-event-introduction-expats.jpg"); background-size: 100%; background-position: 0 26%; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.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-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p { position:relative;}
.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;} 

@media screen and (min-width: 992px) {
  .card-upcoming-cols { display: flex; width: 100%; gap:20px;}
  .card-upcoming-col:nth-child(0) { width: 44%;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  .card-upcoming-body { flex: 1 1 auto;}
}

/*---BOX CTA PLAYBOOK---*/
#box-cta-playbook { position:relative;}
#box-cta-playbook .playbook-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-playbook .playbook-box-col-illu { margin-bottom:1rem;}
#box-cta-playbook .playbook-box-col-illu img { width: 120px; height:auto;}
#box-cta-playbook h3, #box-cta-playbook p { color: white;}
#box-cta-playbook p.p-opacity { opacity: 0.75}
#box-cta-playbook p:last-of-type { margin-bottom:0;} 
#box-cta-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: white;}
#box-cta-playbook a.secondary-download { color: #EC8FFF;} 
/*hack - remove empty p from confluence*/
#box-cta-playbook .container > p:first-child, #box-cta-playbook .container > p:last-child { display: none; border:1px solid green;}

@media screen and (min-width: 769px) {
 #box-cta-playbook .playbook-box { padding:2.5rem;}
 #box-cta-playbook .playbook-box-cols { display: flex; align-items: center;}
 #box-cta-playbook .playbook-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-playbook .playbook-box { padding:5rem;}
}

Div

id	introduction
class	section

Div

class	container

Html-bobswift

<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/once-only+forum+events"><span>Back to Once-Only Forum events</span></a></p>

<div class="introduction-box">

<div class="introduction-box-cover">
</div>

<div class="introduction-box-content">
<p class="h5">23 November 2023 | Brussels, Belgium</p>
<h1 class="h2"><span class="heading-subtitle">Once-Only Forum</span>for Citizens and Students</h1>
<p>Onsite focus group for a selected group of citizens who have first-hand experience in administrative procedures related to either moving and/or studying abroad.</p> 
<p>Application: <strong>Open</strong></p>
<p class="text-right"><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OOTSRegistrationFormFocusGroupCitizensStudents"><span>Apply</span></a></p>
</div>

</div>

Div

id	information
class	section

Div

class	container

Div

class	cols

Html-bobswift

<div class="col-8">

<!-- START PRACTICAL INFORMATION -->

<h2 class="h3">Practical information</h2>

<ul class="information-list">

<li>
<div class="information-cols">
<div class="information-col"><p>Location</p></div>
<div class="information-col"><p>Brussels, Belgium</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Date</p></div>
<div class="information-col"><p>23 November 2023, full-day session</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Target groups</p></div>
<div class="information-col">
<p>
<strong>Age:</strong> 18+<br>
<strong>Country of residency:</strong> All EU Member States<br>
<strong>Characteristics:</strong> EU citizens who have previous experience with online cross-border administrative procedures in the following areas:<br>
- Initial application for admission to public tertiary education institution, or <br>
- Applying for a tertiary education study financing, or <br>
- Registering a motor vehicle.  
</p>
</div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Per diem</p></div>
<div class="information-col"><p>Per diem (an allowance to cover living expenses) of EUR 90 per Forum event will be provided. The per diems are paid after participating in the Forum based on an attendance list.</p>
</div>
</div>
</li>

</ul>

<!--END PRACTICAL INFORMATION -->

<!-- START DESCRIPTION -->

<h2 class="h3">Description</h2>

<p>The Once-Only Forum for Citizens and Students is an onsite focus group for a selected group of citizens who have first-hand experience in administrative procedures related to either moving and/or studying abroad. Participants will explore different cross-border procedures, provide feedback, and help refine the upcoming Once-Only Forums for Citizens.</p> 
<p>Participants will explore how the Once-Only Technical System (OOTS) can make cross-border administration as easy as possible while studying abroad, seeking grants and/or registering a motor vehicle in another Member State.</p>  
<p>During this event, you will have the unique opportunity to personally test the Once-Only Technical System and share your valuable insights and recommendations to enhance its user-friendliness.</p> 
<p>Based on your application, the Commission will check if you have relevant experience in the selected administrative procedures and will contact you about next steps.</p>

<!-- END DESCRIPTION -->

<!-- START APPLY -->

<h2 class="h3">Interested in participating? Apply here:</h2>
<p>Are you interested in participating in this Once-Only Citizens’ Forum? Apply here!</p>

<p><a class="btn primary" href="https://ec.europa.eu/eusurvey/runner/OOTSRegistrationFormFocusGroupCitizensStudents"><span>Apply</span></a></p>

<p style="margin-top:2.5rem;"><a class="link-download primary" href="#"><span>Download the privacy statement (note: no link)</span></a></p>  

<!-- END APPLY -->  

</div>

Div

class	section agenda-box

Div

class	container

Div

id	agenda-content

Div

class	agenda-content-box

Html-bobswift

<h2 class="h3">Forum  agenda</h2>
<p>During this event you will, amongst other things, discuss your experiences with the administrative procedures when moving and/or studying abroad.</p>
<p class="illu-forum-agenda"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-agenda.png"></p>
<p><span class="badge warning">Coming soon</span></p>

Div

style	display:none;

Expand

title	See full agenda

Html-bobswift

<ul class="agenda-hour">
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">08:00 - 09:00</div>
<div class="agenda-hour-col">Welcome coffee & registration
</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:00 - 09:45</div>
<div class="agenda-hour-col">Introduction to the Once-Only Technical System Projectathon (day 1)
</div>
</div>
</li>

</ul>

Div

id	upcoming-event
class	section

Div

class	container

Html-bobswift
<div class="cols"> <div class="col-8"> <h2>Upcoming Forums</h2> </div> </div>

Html-bobswift

<div class="card-upcoming-cols">

<!--CARD 01-->
<!--<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body"> 
<a href="#" style="pointer-events: none;"></a> 
<h3>Once-Only Forum for Citizens and Students</h3> 
<p>Onsite focus group in Brussels for max. 15 citizens, that have experience in administrative procedures related to either moving and/or studying abroad. Participants will explore different cross-border procedures, provide feedback, and help refine the upcoming Once-Only Forums for Citizens.</p>  
<p class="card-upcoming-date">23 November 2023, Brussels</p> 
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Once-Only+Forum+event+Citizens"><span>Apply</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
-->
<!---->

<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body"> 
<a href="#" style="pointer-events: none;"></a> 
<h3>Once-Only Forum for Students and Recent Graduates</h3>
<p>Online event for 50 students and recent graduates to share experiences related to administrative procedures when studying abroad, and to learn how the Once-Only Technical System can improve your experience.</p>
</div>
<div class="card-upcoming-footer">  
<p><span class="badge warning">Coming soon</span></p> 
</div>
</div>
</div>
<!---->

<!--CARD 03-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Once-Only Forum for Expats</h3>  
<p>Online event for 50 citizens to share experiences related to administrative procedures when registering a motor vehicle abroad, and to learn how the Once-Only Technical System can improve your experience.</p>
</div>
<div class="card-upcoming-footer">    
<p><span class="badge warning">Coming soon</span></p> 
</div>
</div>
</div>
<!---->   

</div>

Div

id	box-cta-playbook
class	section

Div

class	container

Html-bobswift

<div class="cols justify-content-center">

<div class="col-8">
<div class="playbook-box">
<div class="playbook-box-cols">

<div class="playbook-box-col-illu">
<img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/688493907/illu-forum-playbook.png">  
</div>

<div class="playbook-box-col-content">
<h3 class="h5">Once-Only Forum for Citizens Playbook</h3>
<p class="p-opacity">The Once-Only Forum Playbook provides a complete overview of the Forums, including background information on the Once-Only Technical System, what to expect during the Forums, and other important logistics information.</p> 
<p><span class="badge warning">Coming soon</span></p>
<!--<p><a class="btn primary-bis" href="#" onclick="_paq.push(['trackEvent','conversion','oots-once-only-forum-for-citizens','oots-once-only-forum-for-citizens-playbook'])"><span>Download the Once-Only<br> Forum Playbook for Citizens (note: no link)</span><span class="ico-download"></span></a></p>-->

</div>

</div>
</div>
</div>

</div>

Page tree

Versions Compared

Old Version 96

New Version 97

Key