/* Theme Name: Ruedigers '2020 Author: iuno.co Version: 1.0 */ /* ROOT ==================================================== */ :root { --white: #fff; --black: #000; --dark: #222830; --light: #D8D8D8; --rued: #5F0019; --r-sign: rgba(202,187,171,0.388); --beige: #e5ceba; --ov-white: rgba(255,255,255,0.5); --ov-rued: rgba(95,0,25,0.95); --ov-black: rgba(0,0,0,0.8); } body { position: relative; overflow: auto; margin-top: 4rem; } @media (min-width: 768px) { body { margin-top: 0; } } section { padding-bottom: 8rem; } * { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-weight: 300; -webkit-text-size-adjust: none !important; text-size-adjust: none !important; } h1, h2, h3, h4, h5, h6 { } .h0 { font-size: 5rem; line-height: 5rem; font-family: 'Great Vibes', sans-serif; font-style: normal; font-weight: 400; } h1, .h1 { font-family: 'Great Vibes', sans-serif; font-style: normal; font-weight: 400; } h2 { font-size: 1.2rem; text-transform: uppercase; color: var(--rued); font-weight: 400; padding: 1rem 0 1rem 0; letter-spacing: 0.1rem; } .h3 { font-size: 2rem; font-weight: 300; padding: 1rem 0 1rem 0; letter-spacing: 0.1rem; } .h3 strong { font-weight: 400; } .vollkorn { font-family: 'Vollkorn', serif; font-style: italic; font-weight: 700; font-size: 2.4rem; line-height: 1; text-transform: uppercase; } .rued { color: var(--rued); } p { position: relative; margin-left: auto; margin-right: auto; } strong { font-weight: 700; } p a { color: var(--rued); text-decoration: underline; } p a:hover { color: var(--rued); text-decoration: underline; } .wp-block-kadence-rowlayout p a, .wp-block-kadence-rowlayout p a:hover { color: inherit; } .alignright { text-align: right; } .alignleft { text-align: left; } p { max-width: calc(100% - 4rem); } @media (min-width: 576px) { p { max-width: calc(540px - 4rem); } } @media (min-width: 768px) { p { max-width: calc(720px - 4rem); } } @media (min-width: 992px) { p { /* max-width: calc(960px - 4rem); */ } } @media (min-width: 1200px) { p { /* max-width: calc(1140px - 4rem); */ } } .btn-primary { background-color: var(--rued); color: var(--white); transition: all 0.5s ease-in-out; outline: none; border: 0; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--rued) !important; color: var(--white) !important; } .btn-secondary { background-color: var(--beige); color: var(--black); transition: all 0.5s ease-in-out; outline: none; border: 0; } .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background-color: var(--rued) !important; color: var(--white) !important; } .btn { text-transform: uppercase; display: inline-block; width: auto; padding: 0.75rem 1.5rem; font-size: 1rem; line-height: 1; border-radius: 1px; } #sticky-header { position: fixed; top: 0; left: 0; width: 100%; height: 8rem; background-color: var(--white); z-index: 1000; } #sticky-header a.rued { display: inline-block; margin: 0; padding: 1rem 1rem 0.5rem 1rem; } #sticky-header a.rued svg { height: 2.5rem; width: auto; } #sticky-header a.rued svg path { fill: var(--rued); } #sticky-header a.btn { margin-bottom: 0.75rem; display: block; } @media (min-width: 768px) { #sticky-header { height: 4rem; } #sticky-header a.btn { margin-top: 0.75rem; margin-bottom: 0; display: inline-block; } } #sticky-header .order { text-transform: uppercase; line-height: 1.8; font-size: 0.8rem; padding-left: 5rem; } #sticky-header .order a { color: var(--rued); font-size: 1.3rem; line-height: 1; font-weight: 500; text-decoration: none; } #sticky-header .order a:hover { opacity: 0.5; } #showmenu { position: absolute; top: 3.5rem; left: 0; width: 4rem; height: 3.5rem; z-index: 500; cursor: pointer; padding-top: 0.5rem; font-size: 6rem; line-height: 0.5rem; text-align: center; } @media (min-width: 768px) { #showmenu { top: 0rem; } } .container { position: relative; z-index: +1; background-color: var(--white); } .container.first { margin-top: 0; height: 0; } .container-fluid { position: relative; z-index: +1; } .wp-block-kadence-rowlayout { max-width: 900px; margin: 0px auto; } .wp-block-kadence-rowlayout.alignfull { max-width: 100vw; margin-left: calc( -100vw / 2 + 100% / 2 ); margin-right: calc( -100vw / 2 + 100% / 2 ); max-width: 100vw; } @media (min-width: 768px) { .container.first { margin-top: -6.5rem; height: 7rem; margin-bottom: -7rem; z-index: -1; } } #screen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1030; background-color: var(--ov-white); opacity: 0; visibility: hidden; transition: opacity .5s linear, visibility .5s ease-in; } #screen-overlay.show { width: 100%; opacity: 1; visibility: visible; } #reservation { position: fixed; display: block; width: 100%; top: 0; height: 100%; right: 0; z-index: 1200; visibility: visible; transform: translateX(100%); transition: all 1s; background-color: var(--ov-black); border-radius: 0; } #reservation.show { transform: translateX(0); box-shadow: 0 0 25px rgba(0,0,0,0.5); } #reservation iframe { width: 100%; max-width: 380px; min-width: 280px; height: calc(100vh - 10rem); margin: 0 auto; display: block; } #reservation .hide { width: 100%; max-width: 380px; min-width: 280px; height: 4rem; margin: 2rem auto 0 auto; display: block; font-size: 1rem; line-height: 4rem; text-transform: uppercase; color: var(--white); font-weight: 500; cursor: pointer; } @media (min-width: 425px) { #reservation { width: 425px; } } @media (min-width: 1050px) { #reservation { width: calc(100vw * 0.5); } #reservation.show { transform: translateX(calc(100% - (100vw * 0.5))); } } #mobile-menu { position: fixed; display: block; width: 100%; top: 0; height: 100%; left: 0; z-index: 1200; visibility: visible; transform: translateX(-100%); transition: all 1s; background-color: var(--ov-rued); border-radius: 0; } #mobile-menu .hide { width: 100%; max-width: 380px; min-width: 280px; height: 4rem; margin: 2rem auto 0 auto; display: block; text-align: right; font-size: 1rem; line-height: 4rem; text-transform: uppercase; color: var(--white); font-weight: 500; cursor: pointer; } #mobile-menu .menu-frame { width: 100%; max-width: 380px; min-width: 280px; height: auto; margin: 0 auto; display: block; } #mobile-menu .menu-frame ul { list-style: none outside none; padding: 0; } #mobile-menu .menu-frame ul li { text-align: right; } #mobile-menu .menu-frame ul li a { display: block; text-align: right; color: var(--white); font-size: 1rem; line-height: 3rem; text-transform: uppercase; text-decoration: none; } #mobile-menu.show { transform: translateX(0); box-shadow: 0 0 25px rgba(0,0,0,0.5); } @media (min-width: 425px) { #mobile-menu { width: 425px; } } .iuno-block-hero-home { position: relative; border-width: 4rem 0 0 0; border-color: var(--white); border-style: solid; width: 100%; text-align: center; } .iuno-block-hero-home .subtitle { position: relative; padding: 7rem 2rem 2rem 2rem; display: block; font-size: 1.4rem; text-align: center; color: var(--white); text-transform: uppercase; letter-spacing: 0.2rem; } .iuno-block-hero-home h1 { position: relative; font-size: 4rem; text-align: center; padding: 0 2rem 0 2rem; color: var(--white); } .iuno-block-hero-home .request { position: relative; display: inline-block; margin: 2rem auto 10rem auto; } .iuno-block-hero-home img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; z-index: -2; } @media (min-width: 768px) { .iuno-block-hero-home h1 { font-size: 6vw; padding: 0 5rem 0 5rem; } } .iuno-block-hero-klein { position: relative; border-width: 4rem 0 0 0; border-color: var(--white); border-style: solid; width: 100%; } .iuno-block-hero-klein h1 { position: relative; font-size: 10vw; text-align: center; padding: 8rem 2rem 2rem 2rem; color: var(--white); } .iuno-block-hero-klein img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } @media (min-width: 768px) { .iuno-block-hero-klein h1 { font-size: 6vw; padding: 12rem 5rem 10rem 5rem; } } .iuno-block-speisekarte { max-width: 900px; margin-left: auto; margin-right: auto; padding: 0rem 0 5rem 0; } .iuno-block-speisekarte h2 { padding: 1rem 2rem 0rem 2rem; text-align: center; } .iuno-block-speisekarte ul { list-style: none outside none; padding: 0 2rem; margin: 0; } .iuno-block-speisekarte ul li { padding: 0; margin: 0; display: block; } .iuno-block-speisekarte .title { clear: both; position: relative; display: block; width: 100%; padding: 2rem 0 0 0; font-weight: bold; } .iuno-block-speisekarte .title .name { display: inline-block; text-align: left; background-color: var(--white); padding-right: 0.5rem; font-weight: 700; } .iuno-block-speisekarte .title .dots { position: absolute; bottom: 6px; left: 0; width: 100%; height: 5px; z-index: -1; background-image: radial-gradient(circle closest-side, currentColor 99%, transparent 1%); background-position: bottom; background-size: 5px 1px; background-repeat: repeat-x; } .iuno-block-speisekarte .title .price { display: inline-block; text-align: right; float: right; background-color: var(--white); padding-left: 0.5rem; font-weight: 700; } .iuno-block-speisekarte .description { clear: both; display: block; width: 100%; font-size: 80%; } .iuno-block-speisekarte .option { clear: both; position: relative; display: block; width: 100%; font-size: 80%; font-weight: bold; } .iuno-block-speisekarte .option .name { display: inline-block; text-align: left; background-color: var(--white); padding-right: 0.5rem; font-weight: 700; } .iuno-block-speisekarte .option .dots { position: absolute; bottom: 6px; left: 0; width: 100%; height: 5px; z-index: -1; background-image: radial-gradient(circle closest-side, currentColor 99%, transparent 1%); background-position: bottom; background-size: 5px 1px; background-repeat: repeat-x; } .iuno-block-speisekarte .option .price { display: inline-block; text-align: right; float: right; background-color: var(--white); padding-left: 0.5rem; font-weight: 700; } @media (min-width: 768px) { .iuno-block-speisekarte ul.wine::after { content: ''; clear: both; display: block; } .iuno-block-speisekarte ul.wine li { width: calc(50% - 2rem); float: left; } .iuno-block-speisekarte ul.wine li:nth-of-type(2n+1) { margin-right: 2rem; } .iuno-block-speisekarte ul.wine li:nth-of-type(2n+0) { margin-left: 2rem; } } .iuno-block-separator { width: 100%; } .iuno-block-separator .r-sign { display: inline-block; width: auto; height: 2rem; margin: 2rem 0.5rem 0.5rem 0.5rem; } .iuno-block-separator .r-sign path { fill: var(--r-sign); } .iuno-block-img-title { display: block; color: var(--white); } .iuno-block-img-title .img-title { color: var(--white); font-family: 'Great Vibes', sans-serif; font-style: normal; font-weight: 400; font-size: 1.5rem; line-height: 1; } .iuno-block-img-title .img-subtitle { color: var(--white); text-transform: uppercase; font-weight: 400; } .facebook, .tripadvisor { display: inline-block; height: 1rem; width: auto; margin: 0 0.5rem 0 0; } footer { position: relative; width: 100%; padding: 2rem 2rem 0 2rem; background-color: var(--dark); color: var(--light); } footer .col-12 { padding-bottom: 2rem; font-size: 0.9rem; font-weight: 300; line-height: 1.8; } footer a { color: var(--light); text-decoration: none; } footer a:hover, footer a:active, footer a:focus { color: var(--white); text-decoration: none; } footer svg { height: 4rem; width: auto; max-width: 200px; } footer svg path, footer svg polygon, footer svg rect { fill: var(--light); } footer .r-sign { width: auto; height: 2rem; margin: 0 0.5rem 0.5rem 0.5rem; } footer .r-sign path { fill: var(--r-sign); } footer .facebook, footer .tripadvisor { height: 1rem; width: auto; margin: 0.5rem; } footer .facebook path, footer .tripadvisor path, footer .tripadvisor circle { fill: var(--white); }