/*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* end of RESETCSS */ /* Basic reset and full viewport layout */ * { box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } /* Prevent any scroll */ body { margin: 0; background: #000; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; } /* Main section fills the viewport. Background is aligned TOP-CENTER so the top of the image is always visible. */ .main { position: relative; height: 100svh; /* mobile-safe viewport height */ width: 100vw; background: top center / cover no-repeat url("./imagens/main.jpg"); display: flex; justify-content: center; /* center flags horizontally */ align-items: flex-end; /* place flags at the bottom */ } /* Flags container centered at the bottom */ .flagscontainer { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 3.6vmin, 34px); margin-bottom: clamp(22px, 4.5vmin, 52px); padding: clamp(10px, 2.4vmin, 22px) clamp(18px, 3.6vmin, 32px); border-radius: 999px; backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.65); } /* Larger, fluid flag buttons */ .flagscontainer img { width: clamp(56px, 9.2vmin, 90px); height: auto; display: block; transition: transform 0.15s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } /* Hover and focus accessibility */ .flagscontainer a:hover img, .flagscontainer a:focus-visible img { transform: scale(1.08); } /* ===== Theme variables ===== */ :root { --vicci-brand: #a13765; /* brand color */ --vicci-contrast: #ffffff; /* optional contrast */ --bar-h: clamp(56px, 8.5vmin, 72px); /* global height for the top bar */ } /* ===== Fixed top bar ===== */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: clamp(12px, 4vw, 28px); background: var(--vicci-brand); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, #000 18%, var(--vicci-brand) 82%); } .topbar .brandmark img { display: block; height: calc(var(--bar-h) * 0.68); width: auto; } .topbar .langswitch { display: flex; align-items: center; gap: clamp(16px, 4.5vmin, 20px); } .topbar .langswitch img { display: block; height: clamp(36px, 6.2vmin, 48px); width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); transition: transform .15s ease; } .topbar .langswitch a:hover img, .topbar .langswitch a:focus-visible img { transform: scale(1.08); } /* Push the scrolling content below the fixed bar */ .menu-page, .menu-page { padding-top: var(--bar-h); box-sizing: border-box; } /* ===== PT Menu page styling ===== */ html.menu, body.menu { height: auto !important; min-height: 100%; overflow-y: auto !important; overflow-x: hidden !important; background: var(--vicci-brand); } .menu-page { width: 100%; min-height: 100%; background: var(--vicci-brand); } .menu-page .imgcontainer { width: 100%; max-width: 100%; display: flex; justify-content: center; } .menu-page img { display: block; width: 100vw; /* mobile: full width */ height: auto; image-rendering: auto; } /* Desktop */ @media (min-width: 1024px) { .menu-page img { width: 70vw; margin: 0 auto; } } /* =========================================================== FOOTER — phone (left) | center (socials over review) | address (right) Mobile order: phone → address → review → socials =========================================================== */ .footer { margin-top: clamp(20px, 4vmin, 36px); padding: clamp(20px, 4.5vmin, 40px) 0 clamp(24px, 5vmin, 48px); background: var(--vicci-brand); color: #fff; border-top: 1px solid color-mix(in srgb, #000 20%, var(--vicci-brand) 80%); } /* Match page width logic */ .footer .content-width { width: 100vw; margin: 0 auto; padding: 0 clamp(12px, 3.5vmin, 24px); } @media (min-width: 1024px) { .footer .content-width { width: 70vw; } } /* === Grid: mobile (1 column) vs desktop (3 columns) === */ .footer .footer-row { display: grid; gap: clamp(14px, 3vmin, 20px); align-items: start; /* Mobile: stack in required order */ grid-template-areas: "phone" "address" "center"; /* center contains review + socials, reordered inside */ } @media (min-width: 1024px) { .footer .footer-row { grid-template-columns: 1fr auto 1fr; /* left | center | right */ grid-template-areas: "phone center address"; align-items: center; } } /* Area assignment */ .footer-phone { grid-area: phone; text-align: center; } .footer-center { grid-area: center; text-align: center; } .footer-address { grid-area: address; text-align: center; } @media (min-width: 1024px) { .footer-phone { text-align: left; } .footer-address { text-align: right; } } /* Inside the center column: stack socials and review */ .footer-center { display: flex; flex-direction: column; gap: clamp(10px, 2vmin, 14px); } /* Default (desktop/tablet): socials on top, review below */ .footer-socials { order: 1; } .footer-review { order: 2; } /* Mobile: change order to phone → address → review → socials */ @media (max-width: 1023.98px) { .footer-socials { order: 2; } .footer-review { order: 1; } } /* Headings & CTA links */ .footer h3, .footer h4 { margin: 0 0 6px 0; font-weight: 700; line-height: 1.2; } .footer .cta { display: inline-flex; flex-direction: column; gap: 2px; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .2px; } .footer .cta:hover { text-decoration: underline; } /* Social icons (no background) */ .footer .socials { display: inline-flex; align-items: center; gap: clamp(10px, 2.4vmin, 16px); margin-top: 8px; } .footer .social { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: clamp(28px, 5.2vmin, 36px); height: clamp(28px, 5.2vmin, 36px); transition: transform .1s ease, filter .2s ease; } .footer .social img { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); transition: transform .15s ease, filter .2s ease; } .footer .social:hover img { transform: scale(1.1); filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); } /* Review button */ .review-btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #ffffff; color: #111; font-weight: 700; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,.18); transition: transform .1s ease, filter .2s ease; } .review-btn:hover { transform: translateY(-1px); filter: brightness(1.03); } .review-btn img { width: 20px; height: 20px; display: block; } /* Safety: avoid overlap on ultra-short screens with fixed topbar */ .menu .footer { padding-top: max(16px, calc(var(--bar-h) / 6)); } /* ===== Highlight active language flag ===== */ /* Base style */ .topbar .langswitch img { border: 2px solid transparent; border-radius: 6px; transition: border-color .2s ease, transform .2s ease; } .topbar .langswitch a:hover img, .topbar .langswitch a:focus-visible img { transform: scale(1.08); } /* Highlight the current language — robust against translation */ .topbar .langswitch a[aria-current="page"] img { border-color: color-mix(in srgb, #fff 70%, var(--vicci-brand) 30%); box-shadow: 0 0 4px rgba(0,0,0,.25); } /* ===== Floating Review FAB (bottom-right) ===== */ .review-fab { position: fixed; right: calc(env(safe-area-inset-right, 0px) + clamp(6px, 1.5vw, 16px)); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 3vw, 22px)); z-index: 1100; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: 999px; background: var(--vicci-brand); color: #fff; text-decoration: none; font-weight: 700; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 1; transform: translateY(0); transition: opacity .25s ease, transform .15s ease, filter .2s ease; } .review-fab img { width: 22px; height: 22px; display: block; } .review-fab:hover { filter: brightness(1.06); } /* Hide when footer is visible */ .review-fab.is-hidden { opacity: 0; pointer-events: none; transform: translateY(8px); } /* --- Desktop layout: vertical (icon over text) --- */ @media (min-width: 1024px) { .review-fab { flex-direction: column; padding: 16px 18px; border-radius: 24px; gap: 6px; max-width: min(300px, calc((100vw - 70vw) / 2 - clamp(20px, 2.7vw, 40px))); width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; text-align: center; } .review-fab img { width: 36px; height: 36px; } .review-fab span { font-size: 15px; line-height: 1.2; font-weight: 700; } } /* --- Very small screens: icon only --- */ @media (max-width: 380px) { /*.review-fab span { display: none; }*/ } /* Respect reduced motion preferences */ @media (prefers-reduced-motion: reduce) { .review-fab { transition: none; } } /* Stars inside the FAB */ .review-fab .fab-stars { color: #FFD700; /* classic gold */ font-size: 16px; letter-spacing: 1px; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } /* Slightly bigger on desktop, matching vertical layout */ @media (min-width: 1024px) { .review-fab .fab-stars { font-size: 20px; } }