/* Theme Name: iuno sake embassy Author: iuno.co Version: 1.0 */ /* ROOT ==================================================== */ :root { --red: #dc3545; --white_0: rgba(255,255,255,0); --white_10: rgba(255,255,255,0.1); --white_25: rgba(255,255,255,0.25); --white_80: rgba(255,255,255,0.8); --white_90: rgba(255,255,255,0.9); --white_95: rgba(255,255,255,0.95); --white: rgba(255,255,255,1); --black_0: rgba(0,0,0,0); --black_05: rgba(0,0,0,0.05); --black_10: rgba(0,0,0,0.1); --black_25: rgba(0,0,0,0.25); --black_50: rgba(0,0,0,0.5); --black: rgba(0,0,0,1); --contrast_1: #78bc9f; --contrast_2: #5a8e78; --contrast_3: #b44943; --contrast_4: #8a3935; --contrast_5: #dcb34d; --contrast_6: #b5873d; --contrast_7: #40545c; --contrast_8: #233338; --contrast_9: #233338; --english: rgba(0,0,0,0.8); } * { font-family: 'Roboto', sans-serif; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } .screen-reader-text { display: none; } *:focus, *:active, *:hover { outline: none !important; } body { position: relative; overflow-x: hidden; min-height: 100vh; } h1, .h1 { font-size: 2rem; line-height: 1.2; font-weight: 400; text-transform: uppercase; margin: 0; padding: 0; } h2, .h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 400; text-transform: uppercase; margin: 0; padding: 0 0 2rem 0; } h3, .h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 400; text-transform: uppercase; margin: 0; padding: 0; } h4, .h4 { font-size: 1rem; line-height: 1.6; font-weight: 400; text-transform: uppercase; margin: 0; padding: 1rem 0 0 0; } h5, .h5 { font-size: 1rem; line-height: 1.6; font-weight: 400; margin: 0; padding: 0; } h6, .h6 { font-size: 1rem; line-height: 1.6; font-weight: 400; margin: 0; padding: 0; } p { font-size: 1rem; line-height: 1.6; margin: 0; padding: 0 0 0.5rem 0; } ul { list-style: disc outside none; margin: 0; padding: 0 0 0.5rem 0; } ul, li { font-size: 1rem; line-height: 1.6; margin: 0 0 0 0.75rem; padding: 0; } b, strong { font-weight: 700; } i, em { font-style: italic; font-weight: 300 !important; } i b, b i, i strong, strong i, em strong, strong em, em b, b em, .is-style-english b, .is-style-english strong { font-family: italic; font-weight: 500 !important; } a { color: var(--contrast_3); } header#sticky-header { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; background-color: var(--white_90); height: 6rem; transition: all .25s ease-in-out; } .iuno-top #sticky-header { background-color: var(--white_90); } #sticky-header nav { margin: 0 !important; padding: 3rem 0 0 0; height: 2rem; } #sticky-header nav .nav { width: 100%; } #sticky-header nav .nav-item { margin: 0; } #sticky-header nav .nav-link { color: var(--black); line-height: 2rem; padding: 0 1rem; text-transform: uppercase; font-size: 1rem; font-weight: 600; white-space: nowrap; transition: color .5s ease-in-out; } #sticky-header nav .nav-link:hover { color: var(--contrast_3) !important; } #sticky-header nav .nav-link.lang-de { font-size: 0; background-position: center center; background-repeat: no-repeat; background-image: url('components/de.svg'); width: 3rem; height: auto; background-size: 1.2rem auto; display: block; } #sticky-header nav .nav-link.lang-en { font-size: 0; background-position: center center; background-repeat: no-repeat; background-image: url('components/en.svg'); width: 3rem; height: auto; background-size: 1.2rem auto; display: block; } #sticky-header nav .menu-dropdown .nav-link { line-height: 1.2; padding: 0.5rem 1rem; color: var(--contrast_8) !important; } #sticky-header nav .menu-dropdown .nav-link:hover { color: var(--contrast_3) !important; } #sticky-header nav .nav-link[aria-expanded="true"] { color: var(--black); } #sticky-header .iuno-logo svg { width: auto; height: 4rem; margin: 1rem 0 0 0; } #side-navigation-show { position: relative; display: block; width: 2rem; margin: 2.4rem 0 0 0; padding: .375rem 0; z-index: +1; border: 0 !important; } #side-navigation-show span { position: relative; display: block; float: right; width: 2rem; height: 0.67rem; transition: all .25s ease-in-out; border-color: var(--black); border-width: 3px 0 0 0; border-style: solid; } #side-navigation-show:hover span { border-color: var(--contrast_3); } #side-navigation-hide { position: relative; display: block; width: 2rem; margin: 2.5rem 0.75rem 0 0; padding: .375rem 0; z-index: +1; border: 0 !important; } #side-navigation-hide span { position: absolute; top: 0.65rem; display: block; width: 2rem; height: 2rem; transition: all .25s ease-in-out; border-color: var(--black); border-width: 3px 0 0 0; border-style: solid; } #side-navigation-hide:hover span { border-color: var(--contrast_3); } #side-navigation-hide span:first-of-type { transform-origin: center center; transform: rotate(45deg);} #side-navigation-hide span:last-of-type { transform-origin: center center; transform: rotate(-45deg); left: 1.25rem; } #side-navigation { padding: 0 2rem 0 2rem; width: 100%; height: 100%; } #side-navigation .iuno-logo svg { width: auto; height: 3rem; margin: 1.5rem 0 1rem 0; } #side-navigation ul { list-style: none outside none; padding: 1rem 0 1rem 0; margin: 0 0 0 -1rem; } #side-navigation ul li { display: block; margin: 0 0 0.25rem 0; width: 100%; } #side-navigation ul li button { width: 100%; text-align: left; border: 0 !important; border-radius: 0; } #side-navigation ul li button, #side-navigation ul li a { color: var(--black); display: block; line-height: auto; padding: 0.5rem 1rem; text-decoration: none; font-weight: 600; transition: all .25s ease-in-out; background-color: var(--black_10); } #side-navigation ul li button:hover, #side-navigation ul li a:hover { color: var(--contrast_3); } #side-navigation ul li button[aria-expanded="false"]::after { content: "+"; float: right; } #side-navigation ul li button[aria-expanded="true"]::after { content: "-"; float: right; } #side-navigation ul li ul { list-style: none outside none; padding: 0; margin: 0; } #side-navigation ul li ul li { margin: 0; } #side-navigation ul li ul li a { background-color: var(--black_05); } #side-navigation ul li ul li a::before { content: ""; position: relative; display: inline-block; top: -0.3rem; width: 0.5rem; height: 0.1rem; margin: 0 0.5rem 0 0; border-radius: 0.25rem; background-color: var(--black); line-height: 0; font-size: 0; } #side-navigation #side-imprint { padding: 0 0 1rem 0; } #side-navigation #side-imprint ul li { display: inline-block; width: calc(50% - 0.125rem); margin: 0; } #side-navigation #side-imprint ul li:first-of-type { margin: 0 0.125rem 0 0; float: left; } #side-navigation #side-imprint ul li:last-child { margin: 0 0 0 0.125rem; float: right; } #side-navigation #side-imprint ul li:last-child::after { content: ""; width: 0; height: 0; overflow: hidden; clear: both; } footer { background-color: var(--white); padding: 3rem 1rem 1rem 1rem; } footer ul { list-style: none outside none; margin: 0; padding: 0.5rem 0.5rem 0 0; border-top: 2px var(--contrast_3) solid; } footer ul li { display: inline-block; margin: 0; padding: 0; width: 32%; text-align: center; } footer ul li a { display: block; margin: 0; padding: 0; color: var(--black); text-decoration: none; } footer ul li a:hover { color: var(--contrast_3); } @media (min-width: 767px) { footer ul li { display: block; width: 100%; text-align: left; } } footer .address svg { width: auto; height: 100%; max-height: 5rem; margin: -0.7rem 0 1rem 0; } footer .address a { color: var(--contrast_3); } footer .address a:hover { color: var(--black); } footer .copyright { text-align: center; font-size: 0.7rem; line-height: 2rem; padding-top: 2rem; } .iuno-body { position: relative; min-height: calc(100vh - 10rem); display: block; padding: 8rem 0 5rem 0; } .iuno-body.sake-week { min-height: 100vh; padding: 0; } .container { width: 100% !important; max-width: 1200px !important; padding-left: 2rem; padding-right: 2rem; } .alignfull .wp-block-kadence-rowlayout.container .kt-row-column-wrap { padding-left: 0; padding-right: 0; } .wp-block-kadence-rowlayout.alignfull, .wp-block-kadence-rowlayout.alignwide { margin-left: -50vw; margin-right: -50vw; max-width: 100vw; width: 100vw; position: relative; left: 50%; } @media (min-width: 767px) { .wp-block-kadence-rowlayout.alignfull { left: 50%; } } @media (min-width: 1330px) { .wp-block-kadence-rowlayout.alignwide { margin-left: -80px; margin-right: -80px; max-width: calc(100% + 160px); width: calc(100% + 160px); left: 0; } } .wp-block-separator.is-style-seg-sign { position: relative; border: 0 !important; height: calc(5rem + 1px); width: 100%; opacity: 1; background-image: url(components/sake-embassy-germany-sign.svg); background-repeat: no-repeat; background-position: center center; background-size: auto 1rem; } .wp-block-separator.is-style-seg-sign::before { content: ''; position: absolute; top: 2.5rem; left: calc(50% + 2rem); height: 1px; width: 40vw; background-color: var(--black_50); } .wp-block-separator.is-style-seg-sign::after { content: ''; position: absolute; top: 2.5rem; right: calc(50% + 2rem); height: 1px; width: 40vw; background-color: var(--black_50); } .is-style-english { position: relative; margin: -0.5rem -1rem 0 -1rem; padding: 0.5rem 1rem; border-radius: 0.5rem; background-color: var(--black_05); } .is-style-english * { font-style: italic; font-weight: 300; } .wp-block-image { border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 0 0.25rem var(--black_05); margin: 0; } .wp-block-image img { width: 100%; } .wp-block-image.is-style-b-0_w-100 { box-shadow: 0 0 0 0 var(--black_0); } #sake-artwork { position: fixed; display: block; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; backgrouhnd-repeat: repeat; background-position: center center; background-size: 40rem auto; } h2.is-style-sake-week { font-size: 2.5rem; font-weight: 700; color: var(--contrast_3); } .is-style-sake-week-idea { width: 100%; overflow: hidden; } .is-style-sake-week-idea .wp-block-image { width: calc(100% + 10vw); margin: 0 -5vw; box-shadow: 0 0 0 0 var(--black_0); } .wp-block-image.is-style-sake-week { width: 600px; display: inline-block; max-width: 100%; margin: 0px auto; } .is-style-sake-week-idea-24 { width: 100%; overflow: hidden; } .is-style-sake-week-idea-24 .wp-block-image { width: calc(100% + 5vw); margin: 0 0 0 -5vw; box-shadow: 0 0 0 0 var(--black_0); } .wp-block-image.is-style-sake-week-24 { width: 600px; display: inline-block; max-width: 100%; margin: 0px auto; } #sw-partner ul { list-style: none outside none; text-align: center; } #sw-partner ul li { display: inline-block; margin: 1rem; height: 12vh; transition: all 1s ease-in-out; filter: grayscale(100%); } #sw-partner ul li:hover { filter: grayscale(0%); } #sw-partner ul li:nth-of-type(1), #sw-partner ul li:nth-of-type(2) { text-align: center; height: 18vh; } #sw-partner ul li:nth-of-type(3) { width: 100%; display: block; height: 1px; } #sw-partner ul li img { display: block; height: 100%; width: auto; margin: 0 auto; background-color: var(--white); box-shadow: 0 0 0 0.25rem var(--black_05); } .iuno-slick { margin: 0; padding: 1rem 0; line-height: 0; } .iuno-slick.type_1 { background-color: var(--contrast_1); } .iuno-slick.type_2 { background-color: var(--contrast_2); } .iuno-slick.type_3 { background-color: var(--contrast_3); } .iuno-slick.type_4 { background-color: var(--contrast_4); } .iuno-slick.type_5 { background-color: var(--contrast_5); } .iuno-slick.type_6 { background-color: var(--contrast_6); } .iuno-slick.type_7 { background-color: var(--contrast_7); } .iuno-slick.type_8 { background-color: var(--contrast_8); } .iuno-slick.type_9 { background-color: var(--contrast_8); } .iuno-slick .slick-track { padding: 0.25rem 0; } .iuno-slick li { margin: 0 1rem 0 0; } .iuno-slick img { background-color: var(--white); box-shadow: 0 0 0 0.25rem var(--white_25); border-radius: 0.5rem; height: 300px; width: auto; } #tpl-events h3 { color: var(--contrast_3); } #tpl-events h3 span { background-color: var(--contrast_4); color: var(--white); padding: 0.25rem 0.5rem; margin: 0 0 1rem 0; line-height: 1; font-size: 0.75rem; display: inline-block; } #tpl-events a { color: var(--contrast_3); text-decoration: underline; } #tpl-events .btn { background-color: var(--contrast_3); color: var(--white); border-radius: 0.25rem; text-transform: uppercase; text-decoration: none; margin: 1rem 1rem 2rem 0; padding: 0.25rem 0.75rem 0.2rem 0.75rem; } #tpl-events .btn:hover { background-color: var(--black); } #tpl-events .btn::before { content: '❯ '; } .event-calendar .event-date { position: relative; width: 100%; display: block; color: var(--white); background-color: var(--contrast_8); line-height: 1.4; font-size: 2rem; text-transform: uppercase; padding: 0; text-align: center; font-weight: bold; margin: 0 0 0.5rem 0; border-radius: 0.5rem; } .event-calendar ul { list-style: none outside none; width: 100%; padding: 0; margin: 0; text-align: center; } .event-calendar ul li { position: relative; display: inline-block; margin: 0.5vw; overflow: hidden; background-color: var(--black); width: 400px; height: calc(400px * 6 / 16); border-radius: 0.5rem; box-shadow: 0 0 0 0.25rem var(--black_05); } .event-calendar ul li.type_1 { background-color: var(--contrast_1); } .event-calendar ul li.type_2 { background-color: var(--contrast_2); } .event-calendar ul li.type_3 { background-color: var(--contrast_3); } .event-calendar ul li.type_4 { background-color: var(--contrast_4); } .event-calendar ul li.type_5 { background-color: var(--contrast_5); } .event-calendar ul li.type_6 { background-color: var(--contrast_6); } .event-calendar ul li.type_7 { background-color: var(--contrast_7); } .event-calendar ul li.type_8 { background-color: var(--contrast_8); } .event-calendar ul li.type_9 { background-color: var(--contrast_8); } .event-calendar ul li a { position: absolute; top: 0; left: 0; padding: 0; text-decoration: none; z-index: 20; display: block; height: 100%; width: 100%; transition: all 1s ease-in-out; } .event-calendar ul li a * { color: #ffffff; } .event-calendar ul li h4 { font-size: 1rem; position: absolute; top: 0.5rem; width: calc(70% - 1rem); right: 0.5rem; display: block; text-align: left; padding: 0; margin: 0; } .event-calendar ul li h3 { font-size: 1.5rem; position: absolute; bottom: 0.5rem; width: calc(70% - 1rem); right: 0.5rem; display: block; text-align: left; padding: 0; margin: 0; text-transform: none; } .event-calendar ul li span { position: absolute; top: 0; left: 0; width: 30%; height: 100%; background-size: cover; background-position: center center; z-index: 10; background-color: var(--white); } .wp-block-post-featured-image img { border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0 0 0.25rem var(--black_05); margin: 0; } .wp-block-post-title a { text-decoration: none; padding: 0 0 0.25rem 0; } .wp-block-post-title a:hover { border-bottom: 1px var(--contrast_3) solid; } /* */