/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden,
[hidden] {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
/* 1 */
}
/*
* Extends the .sr-only class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
/* Black prints faster */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,500;1,300;1,400&display=swap');
::-webkit-scrollbar{
width: 5px;
}
::-webkit-scrollbar-track-piece{
background-color: #FFF;
}
::-webkit-scrollbar-thumb{
background-color: #666;
outline: 2px solid #FFF;
outline-offset: -2px;
border: .1px solid #666;
}
::-webkit-scrollbar-thumb:hover{
background-color: #666;
}
body {
background: #f2f2f2;
font-family: 'Raleway', sans-serif;
color: #2e3333;
}
a{
color: #2e3333;
}
#home,
#menu,
#menu2{
min-height: calc(100vh - 75px);
}
#menu,
#menu2,
#allergeni{
display: none;
}
.mainimg {
width: calc(100% - 20px);
background-size: cover;
background-position: center;
border: 0;
padding: 150px 10px 50px 10px;
}
.lang-hide{
display: none;
}
.langCnt{
width: 100%;
margin-top: 35px;
text-align: center;
}
span.lang {
padding: 8px 10px;
line-height: 1;
text-transform: uppercase;
font-size: 11px;
cursor: pointer;
}
span.lang.lang-active {
color: #d24643;
}
.langCnt img {
width: 20px;
cursor: pointer;
}
.menu-name {
padding: 65px 10px 35px 10px;
text-align: center;
line-height: 1;
cursor: pointer;
width: calc(100% - 20px);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
font-weight: bold;
font-size: 25px;
color: #fff;
}
.go-home,
.go-menu {
font-size: 14px;
padding: 5px 10px;
width: calc(50% - 20px);
float:left;
cursor: pointer;
position: absolute;
z-index: 8;
color: #fff;
}
.fav{
font-size: 1px;
padding: 5px 10px;
width: calc(50% - 20px);
float:right;
text-align: right;
cursor: pointer;
position: absolute;
z-index: 10;
right: 0;
}
.fav .heart {
position: relative;
right: 0;
float: right;
top: 0;
}
.allergeni{
text-align: center;
margin-top:20px;
cursor: pointer;
}
#allergeni .contenuto {
border: 1px solid #e6e6e6;
background-color: #ffffff;
margin: 10px 10px 0 10px;
padding: 16px;
border-radius: 8px;
}
.item {
border-bottom: 1px solid #e6e6e6;
background-color: #ffffff;
/* margin: 10px 10px 0 10px; */
padding: 16px;
/* border-radius: 8px; */
cursor: pointer;
/* margin: 0 10px; */
/* box-shadow: 0px 2px 3px #ababab; */
position: relative;
}
.item-title {
color: #d24643;
font-size: 18px;
font-weight: bold;
float:left;
}
.item-info {
font-size: 11px;
line-height: 24px;
padding-left: 10px;
float: left;
display: none;
}
.item-description {
color: #828585;
font-size: 14px;
margin-bottom: 5px;
}
.item-description p{
margin: 0;
text-transform: capitalize;
padding: 0;
font-style: italic;
}
.item-desc {
font-size: 14px;
line-height: 1;
}
.item-prezzo {
color: #666;
font-weight: bold;
}
.item-category {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
font-weight: bold;
font-size: 38px;
color: #fff;
text-align: center;
flex-direction: column;
}
.item-image {
background-size: cover;
background-position: center;
padding: 35px 0;
position: relative;
margin-top:10px;
cursor: pointer;
}
.item-image:after {
content: "";
background: rgba(0, 0, 0, 0.2);
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 3;
}
#home .logo{
position: absolute;
text-align: center;
width: 100%;
}
#home .logo img{
max-height: 120px;
margin: 5px auto;
cursor: pointer;
margin-top:5px;
}
#menu .logo,
#menu2 .logo {
text-align: center;
background: #fff;
border-bottom: 1px solid #e6e6e6;
padding: 0;
margin: 0;
}
#menu .logo img,
#menu2 .logo img {
max-width: 100%;
max-height: 65px;
position: absolute;
z-index: 1000;
}
.itemD {
padding: 15px 15px;
}
.footer{
margin-top:40px;
border-top: 1px solid #e6e6e6;
padding: 5px;
text-align: center;
background: #fff;
font-size: 10px;
}
.select-css {
margin:10px 10px;
display: block;
font-size: 16px;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: 10px;
width: calc(100% - 20px);
max-width: 100%; /* useful when width is set to anything other than 100% */
box-sizing: border-box;
border: 1px solid #e6e6e6;
border-radius: 3px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
*/
background-image: url('data:image/svg+xml;charset=US-ASCII,<%2Fsvg>'),
linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
background-repeat: no-repeat, repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right .7em top 50%, 0 0;
/* icon size, then gradient */
background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
display: none;
}
/* Hover style */
.select-css:hover {
border-color: #888;
}
/* Focus style */
.select-css:focus {
border-color: #aaa;
/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
/* Set options to normal weight */
.select-css option {
font-weight:normal;
}
/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
background-position: left .7em top 50%, 0 0;
padding: .6em .8em .5em 1.4em;
}
/* Disabled styles */
.select-css:disabled, .select-css[aria-disabled=true] {
color: graytext;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}
.select-css:disabled:hover, .select-css[aria-disabled=true] {
border-color: #aaa;
}
#loader {
position: fixed;
z-index: 20;
display: none;
align-items: center;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .6);
}
.lds-ring {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 64px;
height: 64px;
margin: 8px;
border: 8px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.form-control{
background-clip: border-box !important;
height: auto !important;
}
.item-image.item-cat {
width: calc(50% - 20px);
border-radius: 5px;
overflow: hidden;
margin: 13px 0px 0px 13px;
float: left;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.item-cat .item-category {
font-size: 20px;
padding: 0 5px
}
.heart {
background-image: url(../img/heart.png);
background-size: contain;
display: inline-block;
height: 20px;
position: absolute;
width: 20px;
background-repeat: no-repeat;
right: 15px;
top: 14px;
}
.heart-active .heart,
.heart-active.heart{
background-image: url(../img/heart-active.png);
}
.modalBg {
display: none;
position: fixed;
z-index: 50;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal {
display: none;
position: fixed;
z-index: 51;
background-color: #fff;
width: 90%;
top: 5%;
left: 5%;
padding-bottom: 15px;
}
.modal-text{
padding: 10px 15px 5px 15px;
}
.close {
color: #000;
float: right;
font-size: 28px;
font-weight: bold;
top: 0;
right: 10px;
position: absolute;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal-content {
overflow: scroll;
max-height: 90vh;
}
.item-title-cat .item-category {
color: #2e3333;
font-size: 26px;
margin: 10px 0;
}
.container {
position: relative;
}
.item.itemMenu {
margin: 15px;
border-radius: 10PX;
box-shadow: 0px 2px 3px #bdbdbd;
padding-right: 30px;
background-image: url(../img/next.png);
background-position: 95% center;
background-repeat: no-repeat;
background-size: 20px;
}
@media only screen and (min-width: 768px){
body{
background-image: url(../img/phone.png);
width: 362px;
background-size: 600px 900px;
margin: 0 auto;
background-position: center top;
background-repeat: no-repeat;
position: relative;
padding-top:60px;
height: 900px;
}
body .frame {
overflow-y: scroll;
height: 775px;
border-radius: 34px;
}
.modal {
width: 350px;
left: 50%;
margin-left: -175px;
}
::-webkit-scrollbar{
width: 0px;
}
::-webkit-scrollbar-track-piece{
background-color: #FFF;
}
::-webkit-scrollbar-thumb{
background-color: #666;
outline: 0px solid #FFF;
outline-offset: -2px;
border: .1px solid #666;
}
::-webkit-scrollbar-thumb:hover{
background-color: #666;
}
}