@charset "UTF-8"; /* Variables ---------------------------------------- */ :root { /* Theme Colors */ --upei-red: #7c2529; --upei-green: #789d4a; --upei-yellow: #f1b434; --theme-color: green; --theme-color-two: #383a68; --primary: #ffcc18; --secondary: #3e4182; --dark: #333; --dark-grey: #838383; --light: #edeef5; --border: #cccccc; --bold-color: var(--upei-red); --content-bg: #f2f2f2; --text-color: #222222; --body-font: "Noto Sans", sans-serif; --heading-font: "Adelle Regular", serif; } /* HTML and Body ---------------------------------------- */ body { font-family: var(--body-font); background: #ffffff; color: var(--text-color); background-color: #fff !important; } /* Regions ---------------------------------------- */ summary { color: var(--text-color); } /* Typography ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: var(--bold-color); } h1 { font-size: 2.2rem; font-size: 3.375em; } h2 { font-size: 1.9rem; font-size: 2.25em; } h3 { font-size: 1.6rem; font-size: 1.5em; } h4 { font-size: 1.3rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1.1rem; } strong { color: var(--bold-color); } em { color: var(--upei-green); } a { -webkit-transition: color 0.4s ease; -o-transition: color 0.4s ease; transition: color 0.4s ease; } a, a:active, li a.active { color: var(--upei-green); } a:hover { color: var(--primary); } /* Typography-> code tags */ code, kbd, pre, samp { background: var(--secondary); color: #ffffff; } mark { background: var(--primary); color: #ffffff; } figcaption { background: var(--secondary); color: #ffffff; } /* Form ---------------------------------------- */ /* Form -> Button */ a.button, .button, button, [type=button], [type=reset], [type=submit] { background-color: var(--secondary); color: #ffffff; border: 4px solid var(--primary); border-radius: 8px; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } a.button:hover, .button:hover, button:hover, [type=button]:hover, [type=reset]:hover, [type=submit]:hover { background-color: var(--dark); color: var(--primary); } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], textarea { -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], textarea { color: var(--text-color); background: var(--light); border: 1px solid var(--border); } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus { border: 1px solid var(--primary); background: #f0f0f0; } fieldset { border: 1px solid var(--border); } /* Form -> Label */ .form-item label, form label { font-weight: 700; color: var(--bold-color); } summary { font-family: var(--heading-font); font-weight: 700; } /* Form -> Radio buttons */ input[type=radio], input[type=checkbox] { border: 2px solid var(--secondary); } input[type=radio]:hover, input[type=checkbox]:hover { border: 2px solid var(--primary); } input[type=radio]:checked, input[type=checkbox]:checked { background-color: var(--primary); color: #000000; } input[type=checkbox] { appearance: none; } input[type=checkbox]::after { content: "✔"; text-align: center; display: none; } input[type=checkbox]:checked::after { display: block; } select { color: var(--text-color); background: #eeeeee; border: 1px solid var(--border); } ::-webkit-input-placeholder { color: var(--border); } ::placeholder { color: var(--border); opacity: 1; } :-ms-input-placeholder { color: var(--border); } ::-ms-input-placeholder { color: #969696; } :-moz-placeholder { color: var(--border); } ::-moz-placeholder { color: var(--border); } /* Table ---------------------------------------- */ th { background: var(--light); color: #fff; color: var(--upei-red); border: 1px solid var(--dark); } td { border: 1px solid var(--border); } /* Common HTML Elements ---------------------------------------- */ hr { background: var(--border); } dt, .search-result .views-label { color: var(--bold-color); } blockquote { background: var(--light); box-shadow: 2px 2px 6px var(--border); border-left: 8px solid var(--secondary); } /* Selection ---------------------------------------- */ ::-moz-selection { background: var(--primary); color: #fff; text-shadow: none; } ::selection { background: var(--primary); color: #fff; text-shadow: none; } @font-face { font-family: "ficon"; src: url("../fonts/ficon.ttf?ce63e9") format("truetype"), url("../fonts/ficon.woff?ce63e9") format("woff"), url("../fonts/ficon.svg?ce63e9#ficon") format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^=ficon-], [class*=" ficon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "ficon" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ficon-mail:before { content: "\f003"; } .ficon-map:before { content: "\f041"; } .ficon-calendar:before { content: "\f073"; } .ficon-phone:before { content: "\f095"; } .ficon-twitter:before { content: "\f099"; } .ficon-facebook:before { content: "\f09a"; } .ficon-github:before { content: "\f09b"; } .ficon-linkedin:before { content: "\f0e1"; } .ficon-youtube:before { content: "\f16a"; } .ficon-instagram:before { content: "\f16d"; } .ficon-vk:before { content: "\f189"; } .ficon-whatsapp:before { content: "\f232"; } .ficon-vimeo:before { content: "\f27d"; } .ficon-user:before { content: "\f2c0"; } .ficon-telegram:before { content: "\f2c6"; } .ficon-comments:before { content: "\e900"; } .ficon-add_comment:before { content: "\e901"; } .ficon-tag:before { content: "\e902"; } .ficon-file:before { content: "\e903"; } .ficon-search:before { content: "\e904"; } .ficon-tag:before { content: "\e902"; } .main-wrapper { padding: 0; } div#block-menudetailsforhomepage h4 a { color: var(--upei-red); } div#block-menudetailsforhomepage li { color: #333; } /* Header Top ------------------------------- */ .header-top { background: var(--upei-red); color: var(--light); } .header-top a { color: var(--light); } .header-top a:hover, .header-top i { color: var(--primary); } .header-top-block { text-align: center; } /* Header ------------------------------- */ .header { background: #fff; color: #ffffff; } .header a, .page-header a { color: var(--primary); color: var(--dark-grey); } .header-container { padding: 1rem 0; } .site-brand img { max-height: 50px; display: block; } .site-name { font-family: var(--heading-font); color: var(--primary); font-weight: 700; font-size: 2.25em; } .site-name a:hover { color: var(--primary); } /* Header -> Main menu */ .mobile-menu { border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .mobile-menu span { background-color: #ffffff; } .menu-wrap { font-family: var(--heading-font); font-weight: 700; } .menu-wrap .menu a { color: var(--dark-grey); } .menu-wrap ul.menu > li { margin-left: 6px; } .menu-wrap ul.menu li > a { padding: 10px; } .menu-wrap ul.menu { font-size: 1em; } /* Header -> search block region */ .search-icon { width: 36px; height: 36px; } .search-icon img { max-height: 30px; } .search-box { background-color: var(--dark); } .search-box-content .block-title, .search-box-content form label { color: var(--light); } .search-box-content input[type=search] { background: url(../images/icons/search-icon.svg) top right no-repeat; color: #ffffff; -webkit-text-fill-color: #ffffff; border-bottom: 2px solid var(--border); } .search-box-content input[type=search]:focus { background: url(../images/icons/search-icon.svg) top right no-repeat; border: 0; border-bottom: 2px solid var(--border); } .search-box-content input[type=search]:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--dark) inset; background-color: transparent; color: #ffffff; } .header-search-close { border: 3px solid var(--primary); } /* Header -> Page header */ .page-header { background: #fff; color: var(--upei-green); box-shadow: inset 0px 11px 8px -10px #ccc, inset 0px -11px 8px -10px #ccc; } .page-header a:hover { color: #ffffff; } .region-page-header { align-items: center; } .breadcrumb { color: var(--light); } .page-header .page-title { color: #ffffff; color: var(--upei-green); color: var(--dark); font-variant: small-caps; } /* Main ---------------------------------------- */ /* Main -> Admin tabs */ ul.page-tabs { border-bottom: 2px solid var(--upei-red); margin-top: 1rem; } .page-tabs li a { background: #dddddd; color: var(--upei-red); border-right: 2px solid #fff; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .page-tabs li.active-page-tab a, .page-tabs li a:hover { background: var(--upei-red); color: #fff; } /* Main -> Filter Module */ .filter-wrapper { border: 1px solid var(--border); } /* Node Submitted Details */ .submitted-icons { color: var(--primary); } .node-taxonomy-container .term-title::before { font-family: "ficon"; content: "\e902"; color: var(--primary); padding-right: 6px; } /* Sidebar ---------------------------------------- */ .sidebar .block { background-color: #f5f5ff; padding: 20px; margin-bottom: 2rem; box-shadow: 0 2px 2px var(--border); } .sidebar .block-title { font-size: 2.2rem; text-transform: none; } /* Comments --------------------------------------*/ #comments { border-top: 1px solid var(--border); } #comments i { color: var(--primary); } /* Comments -> single comment */ .comment { box-shadow: 3px 3px #cccccc; } .comment-header { background-color: #dcdee2; border-bottom: 2px solid #cccccc; } .comment-user-picture { padding: 0 1rem; border-right: 2px solid #cccccc; -ms-flex: 0 0 100px; flex: 0 0 100px; } .comment-title, .comment-title a { color: var(--secondary); font-weight: 400; } .comment-reply a, .comment-delete a, .comment-edit a { padding: 5px 12px; color: #fff; background: var(--secondary); border-radius: 4px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .comment-reply a:hover, .comment-delete a:hover, .comment-edit a:hover { background: var(--primary); color: #ffffff; } /* * Footer */ .footer-top { background-color: var(--upei-red); color: #ffffff; } .footer-blocks, .footer-bottom-blocks, .footer-bottom, .footer-social { background-color: var(--dark); color: #ffffff; } .footer .block-title { position: relative; font-size: 1.6rem; color: #ffffff; padding-bottom: 12px; margin-bottom: 12px; } .footer .block-title::before, .footer .block-title::after { content: ""; position: absolute; left: 0; height: 2px; background: var(--primary); } .footer .block-title::before { width: 30px; bottom: 6px; } .footer .block-title::after { width: 60px; bottom: 0; } .footer a { color: var(--primary); } .footer a:hover { color: #ffffff; } .footer-block ul { margin: 0; padding: 0; list-style: none; } .footer-block li { padding: 10px 0; border-bottom: 1px solid #000000; } .footer-bottom-container { border-top: 2px solid #000000; } /* Footer -> customization */ .footer-logo { max-height: 100px; width: auto; } .homepage-content .block-title { text-align: center; margin-bottom: 1rem; } .frontpage-main .block, .homepage-content-bottom .block { margin-bottom: 5rem; } .region-content-home-top .block { padding: 4rem 0; } .region-content-home-top .block:nth-child(even) { position: relative; background: #f0f0f0; } .region-content-home-top .block:last-child { margin: 0; } .slider { height: 400px; } .slider-container { height: 400px; } .slider-text { flex: 80%; } .slider-image { flex: 20%; margin-top: 0 !important; } .js-pager__items { position: relative; position: relative; margin: 0; padding: 1rem 0; list-style: none; list-style-type: none; clear: both; text-align: center; } .js-pager__items li { display: inline-block; padding: 12px 0; } .js-pager__items li a { padding: 8px 14px; color: #fff; background: var(--dark); } .js-pager__items li a:hover, .js-pager__items li .is-active a { background: var(--primary); color: #fff; } #edit-submit-dataset-search { background-color: var(--dark-grey); } form#views-exposed-form-dataset-search-page-1 { display: flex; justify-content: center; } .js-form-item-search-api-fulltext { margin: 0; } input#edit-search-api-fulltext { height: 54px; width: 100%; } /* Components -> Social icons */ .footer-social { padding: 1rem 0; } .social-icons { position: relative; margin: 0; padding: 0; list-style: none; } .social-icons li { display: inline-block; margin: 0; } .social-icons li a { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; border: 2px solid #000000; border-radius: 6px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .social-icons li a:hover { border: 2px solid var(--primary); } .social-icons i { padding: 10px; } /* components -> Scroll To Top. */ .scrolltop { background: var(--primary); color: #000000; transition: all 0.3s ease; } .scrolltop:hover { background: var(--secondary); color: #ffffff; } #accordion .accordion_question * { margin: 0; font-weight: bold; } #accordion .accordion_answer * { margin: 0; } form#node-data-management-plan-form { margin-top: 1rem; } form#node-data-management-plan-form td { padding: 1rem; } form#node-data-management-plan-form td.field-multiple-drag { padding: 0; padding-top: 1rem; } form#node-data-management-plan-form .button, form#node-data-management-plan-form .button, form#node-data-management-plan-form button, form#node-data-management-plan-form [type=button], form#node-data-management-plan-form [type=reset], form#node-data-management-plan-form [type=submit] { background-color: #ccc; color: initial; border: 1px solid var(--upei-red); border-radius: 4px; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; padding: 0 5px; } .footer-bottom-blocks .button { background: var(--upei-green); border: 4px solid var(--upei-yello); padding: 0 9px; } /* Style the tab */ .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons that are used to open the tab content */ .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; color: #333; border-radius: 0; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } /* * Custom Shortcodes */ /* Shortcodes -> Buttons */ .link-button, .button-link, .button-dark { display: inline-block; border-radius: 30px; padding: 0.8rem 1.8rem; transition: all 0.3s ease; border: 4px solid var(--upei-red); } a.button, .button, button, [type=button], [type=reset], [type=submit] { background-color: var(--dark); color: #ffffff; border: 4px solid var(--upei-red); border-radius: 8px; -webkit-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; } .link-button, .button-link { color: #ffffff; background-color: var(--dark); border: 6px solid var(--upei-red); } .feature h3 { color: var(--upei-green); } .footer a { color: #fff; font-family: var(--body-font); font-weight: 100; font-size: 1.2rem; } .footer-bottom-blocks .button { background: var(--upei-green); border: 4px solid var(--upei-yello); } .link-button:hover, .button-link:hover { color: var(--light); background-color: var(--dark); border: 4px solid var(--primary); } .button-dark { background-color: var(--dark); color: var(--light); border: 6px solid var(--upei-red); } .button-dark:hover { color: #ffffff; border: 6px solid var(--upei-green); } /* Elements -> Box */ .box { background-color: #ffffff; -webkit-box-shadow: 0 0 8px 4px var(--light); box-shadow: 0 0 8px 4px var(--light); } /* Icon Box */ .icon-box { font-family: var(--body-font); line-height: 1.7; background-color: var(--content-bg); box-shadow: 0 3px 6px #bbbbbb; display: flex; } .icon-box-icon { padding-right: 1rem; flex: 0 0 auto; } .icon-box-text { font-family: var(--body-font); line-height: 1.7; } /* * Features */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); grid-gap: 1rem; gap: 1rem; } .feature { background-color: #ffffff; padding: 1rem; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transition: all 0.4s linear; backface-visibility: hidden; } .feature:hover { -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } .feature-icon { display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; padding: 2rem; width: 100px; height: 100px; border-radius: 50%; background-color: var(--primary); color: #ffffff; transition: all 0.4s ease; box-shadow: 0 0 10px 2px #ffffff; } .feature:hover .feature-icon { background-color: #ffffff; -webkit-box-shadow: 0 0 10px 2px var(--secondary); box-shadow: 0 0 10px 2px var(--secondary); } .feature .link-button { display: inline-block; } /* * Notice */ .notice-block { position: relative; background-color: var(--primary); padding: 2rem; width: 100%; } .notice-block .views-row { padding: 1rem 0; } .notice-block .views-field-title { font-family: var(--heading-font); font-size: 1.4rem; font-weight: 700; } .notice-block .views-field-title a { color: var(--dark); } .notice-block .views-field-title a:hover { color: #ffffff; } .notice-block .views-row { border-bottom: 1px solid var(--dark); } @media (min-width: 768px) { /* Header */ .header-top-block { text-align: left; } .site-brand img { max-height: 60px; } /* Header -> Page Header */ .page-header { padding: 2rem 0 2rem 0; } /* Frontpage */ .homepage-content .block-title::before { position: absolute; content: ""; width: 40px; height: 2px; background: var(--primary); top: 50%; -webkit-transform: translateX(-50px); transform: translateX(-50px); } .homepage-content .block-title::after { position: absolute; content: ""; width: 40px; height: 2px; background: var(--primary); top: 50%; -webkit-transform: translateX(10px); transform: translateX(10px); } .region-content-home-top .block:nth-child(odd) { margin-bottom: 10rem; } .region-content-home-top .block:last-child:nth-child(odd) { margin-bottom: 0; } .region-content-home-top .block:nth-child(even) { padding: 0 0 4rem 0; } .region-content-home-top .block:nth-child(even)::before { position: absolute; content: ""; top: -10rem; left: 0; height: 10rem; width: 100%; background: #f0f0f0; clip-path: polygon(0 0, 100% 90%, 100% 100%, 0% 100%); } /* Notice */ .notice-block { width: 98%; } .notice-block::before { position: absolute; content: ""; top: 0; left: 0; background-color: var(--secondary); width: 95%; height: 100%; z-index: -1; transform: rotate(-5deg); } .feature { padding: 2rem; } } @media (min-width: 992px) { /* Header */ .site-brand img { max-height: 80px; } /* Header -> Main menu */ .menu-wrap ul.menu li { background: linear-gradient(to bottom, transparent 50%, var(--dark) 50%); background-size: 100% 200%; transition: all 0.2s linear; } .menu-wrap ul.menu li:hover { background-position: 0 -100%; } .menu-wrap ul.menu li:hover a { color: var(--light); } ul.main-menu li a:hover { color: var(--primary); } .menu-wrap .menu li span.dropdown-arrow { -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .menu-wrap ul.menu li.expanded:hover .dropdown-arrow, .menu-wrap ul.menu li.collapsed:hover .dropdown-arrow { -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); } .menu-wrap ul.menu ul.submenu { top: 36px; background-color: var(--dark); } .menu-wrap ul.menu ul.submenu li { border-bottom: 1px solid var(--primary); } .menu-wrap ul.menu ul.submenu li a:hover { color: #ffffff; } } @media (min-width: 1170px) { /* Header */ .site-brand img { max-height: 90px; } } .citation-block { margin-bottom: 2rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); display: flex; align-items: center; padding: 1rem; } .citation-block .icon { font-size: 6rem; padding-right: 0.5rem; border-right: 1px solid #ddd; } .citation-block .data-citation { padding-left: 1rem; } .rdm_metadata th { background: #f1f1f1; border: 1px solid #ccc; } .rdm_metadata .label { width: 12rem; } .rdm_metadata .field__label { display: none; } .search-results ul { list-style: none; padding: 0; } .search-result { background-color: #ffffff; -webkit-box-shadow: 0 0 8px 4px var(--light); box-shadow: 0 0 8px 4px var(--light); border: 1px solid #ccc; margin: 1em; padding: 1em; } .search-result .views-field { display: flex; border-bottom: 1px solid #e6e6e6; margin-bottom: 5px; padding-bottom: 3px; } .search-result .views-label { font-weight: 600; width: 10rem; } .search-result dl { margin: 0; } .search-result dl dt, .search-result dl .views-label { float: left; width: 5em; } .search-result dl dd { margin: 0 0 0.5rem 0; } .search-result dl dd:last-child { margin: 0; } .slider-image { margin-top: 4rem; } .slider-text, .slider-text h1, .slider-text h2, .slider-text h3, .slider-text h4 { color: var(--dark-grey); } .slider-text p { font-size: 1em; } .slider { background: var(--content-bg); } div#block-homepagewelcome { color: #fff !important; background: #789d4a; } div#block-homepagewelcome a { color: var(--upei-red); } div#block-homepagewelcome h2, div#block-homepagewelcome p { color: #fff !important; } .toolbar-horizontal .search-box.open { margin-top: 38px; } .toolbar-horizontal.toolbar-tray-open .search-box.open { margin-top: 84px; } div#block-homepagewelcome-2 { color: #fff !important; background: #789d4a; } div#block-homepagewelcome-2 a { color: var(--upei-red); } div#block-homepagewelcome-2 p { color: #fff !important; font-size: 1.5em; } div#block-homepagewelcome-2 h2 { color: #fff !important; font-size: 2.25em; } /*# sourceMappingURL=style.css.map */