/* Colors */ :root, #device-wrapper { --background-color: #faf6ec; --text-color: #1f2417; --accent-color: #c66a3d; --background-color-secondary: #f7f1e3; --text-color-secondary: #1f2417; --accent-color-secondary: #2f3a22; } #device-wrapper body { background-color: #faf6ec; color: var(--text-color); } #device-wrapper a { color: var(--accent-color); } /* Typography */ :root, #device-wrapper { --h1-font-family: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif; --h1-font-size-value: 4.6rem; --h1-size: 4.6rem; --h1-line-height: 1.05; --h1-font-weight: 300; --h1-font-style: normal; --h1-text-transform: none; --h1-letter-spacing: -0.01em; --h1-color: var(--text-color); --h2-font-family: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif; --h2-size: 2.8rem; --h2-line-height: 1.15; --h2-font-weight: 400; --h2-font-style: normal; --h2-text-transform: none; --h2-letter-spacing: -0.01em; --h2-color: var(--text-color); --h3-font-family: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif; --h3-size: 1.7rem; --h3-line-height: 1.2; --h3-font-weight: 500; --h3-font-style: normal; --h3-text-transform: none; --h3-letter-spacing: 0; --h3-color: var(--text-color); --h4-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --h4-size: 0.78rem; --h4-line-height: 1.3; --h4-font-weight: 600; --h4-font-style: normal; --h4-text-transform: uppercase; --h4-letter-spacing: 0.12em; --h4-color: var(--text-color-secondary); --p-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --p-size: 1rem; --p-line-height: 1.6; --p-font-weight: 400; --p-font-style: normal; --p-text-transform: none; --p-letter-spacing: 0; --p-color: var(--text-color-secondary); --p2-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --p2-size: 1.15rem; --p2-line-height: 1.65; --p2-font-weight: 400; --p2-font-style: normal; --p2-text-transform: none; --p2-letter-spacing: 0; --p2-color: var(--text-color-secondary); --p3-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --p3-size: 0.92rem; --p3-line-height: 1.55; --p3-font-weight: 400; --p3-font-style: normal; --p3-text-transform: none; --p3-letter-spacing: 0; --p3-color: var(--text-color-secondary); --p4-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --p4-size: 0.78rem; --p4-line-height: 1.4; --p4-font-weight: 500; --p4-font-style: normal; --p4-text-transform: uppercase; --p4-letter-spacing: 0.16em; --p4-color: var(--accent-color-secondary); --button-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --button-font-size: 0.95rem; --button-line-height: 1.2; --button-font-weight: 500; --button-font-style: normal; --button-text-transform: none; --button-letter-spacing: 0.02em; --button-color: var(--text-color); --link-color: var(--text-color); --link-underline: none; --link-hover-color: var(--accent-color); --link-hover-underline: underline; } @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&display=swap'); #device-wrapper body { font-family: var(--p-font-family); font-size: var(--p-size); line-height: var(--p-line-height); font-weight: var(--p-font-weight); font-style: var(--p-font-style); text-transform: var(--p-text-transform); letter-spacing: var(--p-letter-spacing); } #device-wrapper h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size-value); line-height: var(--h1-line-height); font-weight: var(--h1-font-weight); font-style: var(--h1-font-style); text-transform: var(--h1-text-transform); letter-spacing: var(--h1-letter-spacing); color: var(--h1-color); } #device-wrapper h2 { font-family: var(--h2-font-family); font-size: var(--h2-size); line-height: var(--h2-line-height); font-weight: var(--h2-font-weight); font-style: var(--h2-font-style); text-transform: var(--h2-text-transform); letter-spacing: var(--h2-letter-spacing); color: var(--h2-color); } #device-wrapper h3 { font-family: var(--h3-font-family); font-size: var(--h3-size); line-height: var(--h3-line-height); font-weight: var(--h3-font-weight); font-style: var(--h3-font-style); text-transform: var(--h3-text-transform); letter-spacing: var(--h3-letter-spacing); color: var(--h3-color); } #device-wrapper h4 { font-family: var(--h4-font-family); font-size: var(--h4-size); line-height: var(--h4-line-height); font-weight: var(--h4-font-weight); font-style: var(--h4-font-style); text-transform: var(--h4-text-transform); letter-spacing: var(--h4-letter-spacing); color: var(--h4-color); } #device-wrapper p { font-family: var(--p-font-family); font-size: var(--p-size); line-height: var(--p-line-height); font-weight: var(--p-font-weight); font-style: var(--p-font-style); text-transform: var(--p-text-transform); letter-spacing: var(--p-letter-spacing); color: var(--p-color); } #device-wrapper .p2 { font-family: var(--p2-font-family); font-size: var(--p2-size); line-height: var(--p2-line-height); font-weight: var(--p2-font-weight); color: var(--p2-color); } #device-wrapper .p3 { font-family: var(--p3-font-family); font-size: var(--p3-size); line-height: var(--p3-line-height); color: var(--p3-color); } #device-wrapper .p4 { font-family: var(--p4-font-family); font-size: var(--p4-size); line-height: var(--p4-line-height); font-weight: var(--p4-font-weight); text-transform: var(--p4-text-transform); letter-spacing: var(--p4-letter-spacing); color: var(--p4-color); } #device-wrapper button, #device-wrapper .btn, #device-wrapper input[type="submit"], #device-wrapper input[type="button"] { font-family: var(--button-font-family); font-size: var(--button-font-size); line-height: var(--button-line-height); font-weight: var(--button-font-weight); font-style: var(--button-font-style); text-transform: var(--button-text-transform); letter-spacing: var(--button-letter-spacing); color: var(--button-color); } /* Subratllat clàssic (només a #page) */ #device-wrapper #page a:not([class*="btn"]):not([class*="button"]):not(.anima-btn) { color: var(--link-color); text-decoration: var(--link-underline); } #device-wrapper #page a:not([class*="btn"]):not([class*="button"]):not(.anima-btn):hover { color: var(--link-hover-color); text-decoration: var(--link-hover-underline); } @container device (max-width: 768px) { #device-wrapper h1 { font-size: calc(var(--h1-font-size-value) * 0.6); } #device-wrapper h2 { font-size: calc(var(--h2-size) * 0.7); } } /* Buttons */ :root, #device-wrapper { /* Primary Button — pill claro (acción CTA destacada) */ --btn-primary-bg-color: var(--accent-color); --btn-primary-text-color: #ffffff; --btn-primary-border-color: var(--accent-color); --btn-primary-hover-bg-color: #a65428; --btn-primary-hover-text-color: #ffffff; --btn-primary-hover-border-color: #a65428; --btn-primary-selected-bg-color: #1f2417; --btn-primary-selected-text-color: var(--background-color); --btn-primary-selected-border-color: #1f2417; --btn-primary-border-radius: 999px; --btn-primary-border-width: 1px; --btn-primary-box-shadow: none; --btn-primary-padding-vertical: 14px; --btn-primary-padding-horizontal: 32px; --btn-primary-min-width: 120px; /* Secondary Button — pill oscuro (acción principal neutra) */ --btn-secondary-bg-color: var(--text-color); --btn-secondary-text-color: var(--background-color); --btn-secondary-border-color: var(--text-color); --btn-secondary-hover-bg-color: var(--accent-color); --btn-secondary-hover-text-color: #ffffff; --btn-secondary-hover-border-color: var(--accent-color); --btn-secondary-selected-bg-color: rgba(31,36,23,0.7); --btn-secondary-selected-text-color: #ffffff; --btn-secondary-selected-border-color: rgba(31,36,23,0.7); --btn-secondary-border-radius: 999px; --btn-secondary-border-width: 1px; --btn-secondary-box-shadow: none; --btn-secondary-padding-vertical: 14px; --btn-secondary-padding-horizontal: 32px; --btn-secondary-min-width: 120px; /* Menu */ --menu-bg-color: transparent; --menu-text-color: var(--text-color-secondary); --menu-border-color: transparent; --menu-hover-bg-color: transparent; --menu-hover-text-color: var(--text-color); --menu-hover-border-color: var(--text-color); --menu-active-bg-color: transparent; --menu-active-text-color: var(--text-color); --menu-active-border-color: var(--text-color); --menu-border-radius: 0px; --menu-border-width: 0 0 1px 0; --menu-box-shadow: none; --menu-font-size: 0.92rem; --menu-padding-vertical: 6px; --menu-padding-horizontal: 0px; --menu-font-weight: 400; --menu-text-transform: none; } #device-wrapper .btn-primary, #device-wrapper .button-primary, .btn-primary, .button-primary { background-color: var(--btn-primary-bg-color) !important; color: var(--btn-primary-text-color) !important; border: var(--btn-primary-border-width) solid var(--btn-primary-border-color) !important; border-radius: var(--btn-primary-border-radius) !important; box-shadow: var(--btn-primary-box-shadow) !important; padding: var(--btn-primary-padding-vertical) var(--btn-primary-padding-horizontal) !important; min-width: var(--btn-primary-min-width) !important; transition: all 0.25s ease !important; } #device-wrapper .btn-primary:hover, #device-wrapper .button-primary:hover, .btn-primary:hover, .button-primary:hover { background-color: var(--btn-primary-hover-bg-color) !important; color: var(--btn-primary-hover-text-color) !important; border-color: var(--btn-primary-hover-border-color) !important; } #device-wrapper .btn-secondary, #device-wrapper .button-secondary, .btn-secondary, .button-secondary { background-color: var(--btn-secondary-bg-color) !important; color: var(--btn-secondary-text-color) !important; border: var(--btn-secondary-border-width) solid var(--btn-secondary-border-color) !important; border-radius: var(--btn-secondary-border-radius) !important; box-shadow: var(--btn-secondary-box-shadow) !important; padding: var(--btn-secondary-padding-vertical) var(--btn-secondary-padding-horizontal) !important; min-width: var(--btn-secondary-min-width) !important; transition: all 0.25s ease !important; } #device-wrapper .btn-secondary:hover, #device-wrapper .button-secondary:hover, .btn-secondary:hover, .button-secondary:hover { background-color: var(--btn-secondary-hover-bg-color) !important; color: var(--btn-secondary-hover-text-color) !important; border-color: var(--btn-secondary-hover-border-color) !important; } #device-wrapper ul.menu li.item a { background-color: var(--menu-bg-color) !important; color: var(--menu-text-color) !important; border-radius: var(--menu-border-radius) !important; padding: var(--menu-padding-vertical) var(--menu-padding-horizontal) !important; font-size: var(--menu-font-size) !important; font-weight: var(--menu-font-weight) !important; text-decoration: none !important; transition: all 0.2s ease !important; } #device-wrapper ul.menu li.item a:hover, #device-wrapper ul.menu li.item.selected a { color: var(--menu-hover-text-color) !important; border-bottom: 1px solid var(--menu-hover-border-color) !important; } /* Layout */ :root, #device-wrapper { --container-width-value: 1200px; --spacing-value: 40px; --header-height: 80px; --logo-max-height: 115px; --page-side-padding-base: 20px; --page-side-padding: var(--page-side-padding-base); --header-fixed: 0; --header-expandable: 0; --header-max-width: var(--container-width-value); --header-bg-color-select: var(--background-color); --header-bg-color-custom: #ffffff; --header-bg-color: var(--background-color); --page-bg-color-select: var(--background-color); --page-bg-color-custom: #ffffff; --page-bg-color: var(--background-color); --footer-bg-color-select: var(--text-color-secondary); --footer-bg-color-custom: #ffffff; --footer-bg-color: var(--text-color-secondary); } #device-wrapper .container { max-width: var(--container-width-value); padding-top: var(--spacing-value); padding-bottom: var(--spacing-value); } #device-wrapper header { background-color: var(--header-bg-color) !important; min-height: var(--header-height); padding-left: var(--page-side-padding) !important; padding-right: var(--page-side-padding) !important; } #device-wrapper header .container, #device-wrapper header .head, #device-wrapper header .maxwidth, #device-wrapper header > .block { max-width: var(--header-max-width) !important; } #device-wrapper #page, #device-wrapper main { background-color: var(--page-bg-color) !important; } #device-wrapper #page section, #device-wrapper main section { padding-left: var(--page-side-padding); padding-right: var(--page-side-padding); } #device-wrapper footer { background-color: var(--footer-bg-color) !important; padding-left: var(--page-side-padding) !important; padding-right: var(--page-side-padding) !important; } /* En mòbil: meitat del page-side-padding */ @media (max-width: 768px) { :root, #device-wrapper { --page-side-padding: calc(var(--page-side-padding-base) / 2); } } /* Custom */ /* Spacing */ /* Responsive root font-size: scales all rem values with viewport width */ /* 16px at 1200px viewport, scales down to 12px on small screens, up to 18px on large */ html { font-size: clamp(12px, 0.6vw + 9px, 18px); } /* Base styles - HTML and body scoped to device-wrapper */ #device-wrapper html, #device-wrapper body { background- overscroll-behavior: contain; /* Control the scrolling behavior */ } /* screen reader only */ #device-wrapper .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } #device-wrapper html, #device-wrapper body { width:100%; height:100%; } #device-wrapper body { background:#000; display:block; } #device-wrapper html { border-top:0 solid #00481d; } /* Selection color scoped to device-wrapper */ #device-wrapper ::selection, ::selection { background: var(--accent-color); color: #000000; } #device-wrapper .black ::selection, .black ::selection { background: var(--accent-color); color: #000000; } /* Links scoped to device-wrapper */ #device-wrapper a:link, #device-wrapper a:visited { transition: 0.3s; } #device-wrapper a{ outline: 0; } /* Placeholder styles scoped to device-wrapper */ #device-wrapper ::placeholder, #device-wrapper -ms-input-placeholder, #device-wrapper ::input-placeholder { color:#510027 !important } /* Container and layout scoped to device-wrapper */ #device-wrapper .container-fluid { padding:0 !important; } #device-wrapper .row { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; width:100%; display:block; } #device-wrapper .contact-full .row { align-items: center; justify-content: space-between; } #device-wrapper .sb-section.option-align-left .sb-section-alignable { margin-right: auto; margin-left: 0; text-align: left; } /* Utility classes scoped to device-wrapper */ #device-wrapper .nomargin { margin:0 !important; } #device-wrapper .nomargins, #device-wrapper .nomargins div { margin:0 !important; padding:0 !important; } #device-wrapper .width100 { width:100%; } #device-wrapper .left { float:left; } #device-wrapper .right { float:right; text-align:right; } #device-wrapper .center { margin:auto; vertical-align:top; margin-top:0 !important; display:block; left:0; right:0; text-align:center; } #device-wrapper .mini img { width:30px; } #device-wrapper .mob { display:none; } /* Padding utilities scoped to device-wrapper */ #device-wrapper .pad10 { padding:10px !important; } #device-wrapper .pad15 { padding:15px !important; } #device-wrapper .pad20 { padding:20px !important; } #device-wrapper .pad30 { padding:30px !important; } #device-wrapper .pad40 { padding:40px !important; } /* Color utilities scoped to device-wrapper */ #device-wrapper .blackink { } #device-wrapper .bold { } #device-wrapper .grey { } #device-wrapper .txt, #device-wrapper .txt p { } #device-wrapper .positive { } #device-wrapper .negative { } #device-wrapper .neutral { } #device-wrapper .neutralized { text-decoration:line-through !important; } #device-wrapper .error { background- padding:4px 10px; } #device-wrapper .small, #device-wrapper .small div, #device-wrapper .small div span { } #device-wrapper .small div, #device-wrapper .small div span { background:none !important; } #device-wrapper .mini, #device-wrapper .mini div { border:0; padding:5px; } /* Page container */ #device-wrapper .page_container { max-width:1000px; margin:auto; } #device-wrapper .page-center { max-width:800px; margin:auto; } /* Wrapper */ #device-wrapper .wrapper { margin-top: 80px; margin-bottom: 80px; } /* Fixed background */ #device-wrapper .fixed { background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } /* Classic border */ #device-wrapper .classic { border:1px solid #000; padding:3px; background:none; max-width:100%; } /* Margin utilities */ #device-wrapper .margin_left_40_desktop { padding:0 0 0 40px !important; } #device-wrapper .addspace { padding-top:40px; } /* Unbreakable layout */ #device-wrapper .unbreakable { width:100% !important; float:left !important; margin: 0; page-break-inside: avoid; break-inside: avoid-column; display:table; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; list-style:none; } #device-wrapper .unbreakable li { list-style:none; padding-bottom:5px; } /* Cap text style */ #device-wrapper .cap { letter-spacing:1px; text-transform:uppercase; } /* Grey box */ #device-wrapper .greybox { padding:30px 20px !important; background- } /* Amagar sidebar legacy */ #device-wrapper > .sidebar { display: none; } #device-wrapper html, #device-wrapper body { width: 100%; display:block; overscroll-behavior: contain; } #device-wrapper #page.shopping_cart { padding-top:50px; } #device-wrapper .container-fluid { padding: 0 !important; } #device-wrapper .block { /* min-height: 322px;*/ margin: auto; } #device-wrapper .bgwhite { background- } .col-round { width: 270px; min-height: 400px; border-radius: 20px; padding: 25px; margin:0px 10px; vertical-align:top; display:flex; align-items: flex-start; } .flex {display:flex !important; flex-wrap:wrap;justify-content:center; align-items:center; } .top { align-self: flex-start; } .flex-column { flex-direction:column;max-width:560px; } .flex-row { flex-direction:row; flex-flow:row} .desktop, .tablet { display:inline-block; } .top0 { top:0px !important; } .sidepad { padding:0px 30px !important} .sidepad100 { padding:0px 100px !important} .maxsize { max-width:100%;width:100%; } .maxwidth { max-width:1350px !important; width:100%; } .maxwidth-shorter { max-width:1250px; width:100%; } .custompad { padding: 30px 18px 20px 18px !important } .nopad { padding:0px !important } .leftpad10 { padding-left:10px; } .h400 { height:300px;} div.block0 { min-height:690px } div.page { width:100%; margin-top:100px !important;} #page .block { padding:40px 30px 40px 30px;} .top5 { padding-top:5px;} .top15 { padding-top:15px; } .radius10 { border-radius:10px } div#header-bg { max-height:282px; } .padside10 { padding:0px 10px; } .padside10.first { padding:0px 10px 0px 0px; } .padside10.last { padding:0px 0px 0px 10px; } #device-wrapper img { margin:0;text-align:left; display:block; } #device-wrapper .shadow { box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); } /* logo */ .logo_mob { padding:0; } .logo a,.logo_mob a {text-decoration:none !important; } .logo img, .logo_mob img { width:100%;margin:0 !important; } header .head div.logo { padding:15px 0px 0px 0px} .light .logo-light { display:block; } .light .logo-dark { display:none; } .light .logo-light img { } .dark .logo-light { display:none; } .dark .logo-dark { display:block; opacity:0.8} /* Header global styles — l'alcada s'adapta al contingut (logo + padding) */ header { width: 100%; transition: background-color 0.5s, opacity 0.3s ease-in-out; z-index: 50; } #device-wrapper header { width: 100%; transition: background-color 0.5s, opacity 0.3s ease-in-out; z-index: 50; } .triangle { position:relative;left:-10px;top:-8px;display:none; justify-content:center; align-items:center;} header .head { padding: 0 !important; margin: auto; max-width: 1400px; } .top { display: flex; z-index: 99; width: 100%; border-top: 0 solid #000; margin-top: 0; } .table-wrapper { overflow-x: auto; margin-top: 20px; } @media(max-width: 900px) { .col-round { width:100%; margin-bottom:20px; align-items: center; } #column1 { width:80%;padding:30px 0px;min-height:auto } .flex-column { max-width: 100%; } } @media (max-width: 680px) { .desktop { display: none !important; } .mob { display: block !important; } } /* Botó de més informació */ .whitebut { background: white; text-decoration:none !important; display: inline-block; padding: 9px 16px; text-decoration: none; border-radius: 19px; width: fit-content; } .whitebut:hover { background: #eee !important; } .whitebut2 { background: white !important; text-decoration:none !important; display: inline-block; padding: 5px 16px; text-decoration: none; border-radius: 19px; border:2px solid #30a3aa; width: fit-content; cursor:pointer; } .bg0 a.whitebut2:hover { } .whitebut2:hover { background: #30a3aa !important; } /* =================================== PRIMARY BUTTON - Using CSS variables =================================== */ .button-primary { float: inherit; clear: both; border: var(--btn-primary-border-width, 2px) solid var(--btn-primary-border-color, #16b5b6); border-radius: var(--btn-primary-border-radius, 6px); transition: .3s ease; background-color: var(--btn-primary-bg-color, #16b5b6); margin-top: 30px; font-size: var(--btn-primary-font-size, 14px); padding: var(--btn-primary-padding-vertical, 12px) var(--btn-primary-padding-horizontal, 24px); text-align: center; width: fit-content; color: var(--btn-primary-text-color, #ffffff); text-decoration: none; box-shadow: var(--btn-primary-box-shadow, none); cursor: pointer; display: inline-block; } .button-primary:hover { text-decoration: none; background-color: var(--btn-primary-hover-bg-color, #139d9e); color: var(--btn-primary-hover-text-color, #ffffff); border-color: var(--btn-primary-hover-border-color, #139d9e); } .button-primary:active, .button-primary.active { background-color: var(--btn-primary-selected-bg-color, #0f7c7d); color: var(--btn-primary-selected-text-color, #ffffff); border-color: var(--btn-primary-selected-border-color, #0f7c7d); } /* =================================== SECONDARY BUTTON - Using CSS variables =================================== */ .button-secondary { float: inherit; clear: both; border: var(--btn-secondary-border-width, 1px) solid var(--btn-secondary-border-color, #dee2e6); border-radius: var(--btn-secondary-border-radius, 6px); transition: .3s ease; background-color: var(--btn-secondary-bg-color, #f8f9fa); margin-top: 30px; font-size: var(--btn-secondary-font-size, 14px); padding: var(--btn-secondary-padding-vertical, 12px) var(--btn-secondary-padding-horizontal, 24px); text-align: center; width: fit-content; color: var(--btn-secondary-text-color, #495057); text-decoration: none; box-shadow: var(--btn-secondary-box-shadow, none); cursor: pointer; display: inline-block; } .button-secondary:hover { text-decoration: none; background-color: var(--btn-secondary-hover-bg-color, #e2e6ea); color: var(--btn-secondary-hover-text-color, #495057); border-color: var(--btn-secondary-hover-border-color, #adb5bd); } .button-secondary:active, .button-secondary.active { background-color: var(--btn-secondary-selected-bg-color, #d3d9df); color: var(--btn-secondary-selected-text-color, #495057); border-color: var(--btn-secondary-selected-border-color, #98a2ac); } .loginbox .button-primary { margin-top:20px; } /* Disabled state for both button types */ .button-primary:disabled, .button-secondary:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* Cancel button */ .btn-cancel { background: #dc3545; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } .btn-cancel:hover { background: #c82333; } /* Save button */ .btn-save { background: #28a745; padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; } .btn-save:hover { background: #218838; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); } /* Upload button */ .btn-upload { background: #007bff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease; } .btn-upload:hover { background: #0056b3; } .btn-lg, .btn-group-lg > .btn { border-radius:0; } button.button-primary { width: 100%; } button.button-secondary { width: 100%; } .openbtn { cursor: pointer; background-color: #111; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } #contact_bt { padding:10px 20px; } /* Media queries for buttons */ @media (max-width: 900px) { button.btn { margin-bottom:20px; } } .cart-container { max-width: 800px; margin: 3rem auto; padding: 2rem; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .cart-header { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; } .cart-item { border-bottom: 1px solid #dee2e6; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; } .item-details { flex: 2; } .item-actions { display: flex; align-items: center; gap: 0.5rem; min-width: 140px; justify-content: flex-end; } .checkout-btn { margin-top: 2rem; width: 100%; } .remove-btn { padding: 0.2rem 0.4rem; font-size: 0.8rem; } .tax-note { font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem; text-align: right; } .btn-sm { margin:0px !important; } .btn-outline-danger { color:#dc3545 !important; } .btn-outline-danger:hover { color:#fff !important; } /* Sistema de grid personalitzat per substituir Bootstrap al header */ /* Aquest sistema utilitza CSS Grid i container queries quan estiguin disponibles */ .custom-header { width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 0 20px; } /* Logo always on the left */ .custom-header .header-logo { grid-column: 1; justify-self: start; } /* Menu aligned to the right */ .custom-header .header-menu { grid-column: 2; justify-self: end; } /* Options before mobile menu */ .custom-header .header-options { grid-column: 3; justify-self: end; } /* Mobile menu always on the far right (hidden in desktop) */ .custom-header .header-mobile { grid-column: 4; justify-self: end; } /* Desktop layout - hide mobile menu and show desktop menu */ .custom-header.desktop-layout .header-mobile, .custom-header:not(.mobile-layout):not(.tablet-layout) .header-mobile { display: none !important; } .custom-header.desktop-layout .header-menu, .custom-header:not(.mobile-layout):not(.tablet-layout) .header-menu { display: block !important; } /* Mobile layout - logo centered, mobile menu and options to the right */ .custom-header.mobile-layout { grid-template-columns: 1fr auto auto; gap: 10px; } .custom-header.mobile-layout .header-logo { grid-column: 1; justify-self: left; } .custom-header.mobile-layout .header-menu { display: none; /* Hide desktop menu in mobile layout */ } .custom-header.mobile-layout .header-options { grid-column: 2; justify-self: end; } .custom-header.mobile-layout .header-mobile { grid-column: 3; justify-self: end; } /* Tablet layout - similar to desktop but condensed */ .custom-header.tablet-layout { grid-template-columns: auto 1fr auto auto; gap: 15px; } .custom-header.tablet-layout .header-logo { grid-column: 1; justify-self: start; } .custom-header.tablet-layout .header-menu { display: none; /* Hide desktop menu in tablet, show mobile instead */ } .custom-header.tablet-layout .header-options { grid-column: 3; justify-self: end; } .custom-header.tablet-layout .header-mobile { grid-column: 4; justify-self: end; } /* Flexbox fallback per navegadors antics */ .custom-header-flex { display: flex; width: 100%; align-items: center; padding: 0 20px; gap: 15px; } .custom-header-flex .header-logo { flex: 0 0 auto; } .custom-header-flex .header-menu { flex: 1 1 auto; text-align: center; } .custom-header-flex .header-options { flex: 0 0 auto; } .custom-header-flex .header-mobile { flex: 0 0 auto; } /* Mobile flexbox layout */ .custom-header-flex.mobile-layout { justify-content: space-between; } .custom-header-flex.mobile-layout .header-logo { flex: 1 1 auto; text-align: center; } .custom-header-flex.mobile-layout .header-menu { display: none; } .custom-header-flex.mobile-layout .header-options { flex: 0 0 auto; order: 2; } .custom-header-flex.mobile-layout .header-mobile { flex: 0 0 auto; order: 3; } /* Tablet flexbox layout */ .custom-header-flex.tablet-layout .header-menu { display: none; } .custom-header-flex.tablet-layout .header-options, .custom-header-flex.tablet-layout .header-mobile { flex: 0 0 auto; } /* Responsive content containers - alternativa a Bootstrap */ .responsive-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; } .responsive-row { display: flex; flex-wrap: wrap; margin: 0 -15px; } .responsive-col { padding: 0 15px; flex: 1 1 auto; } /* Columnes específiques sense media queries */ .responsive-col-12 { flex: 0 0 100%; max-width: 100%; } .responsive-col-9 { flex: 0 0 75%; max-width: 75%; } .responsive-col-6 { flex: 0 0 50%; max-width: 50%; } .responsive-col-3 { flex: 0 0 25%; max-width: 25%; } .responsive-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .responsive-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .responsive-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .responsive-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; } /* Responsive classes controlades per JavaScript */ .responsive-mobile .responsive-col, .responsive-mobile .responsive-col-2, .responsive-mobile .responsive-col-3, .responsive-mobile .responsive-col-4, .responsive-mobile .responsive-col-6, .responsive-mobile .responsive-col-8, .responsive-mobile .responsive-col-9, .responsive-mobile .responsive-col-10 { flex: 0 0 100% !important; max-width: 100% !important; } .responsive-tablet .responsive-col-3 { flex: 0 0 50% !important; max-width: 50% !important; } .responsive-tablet .responsive-col-9 { flex: 0 0 50% !important; max-width: 50% !important; } /* Utilities for hiding/showing elements */ .show-mobile { display: none; } .show-tablet { display: none; } .show-desktop { display: block; } .hide-mobile { display: block; } .hide-tablet { display: block; } .hide-desktop { display: none; } /* When mobile layout is active */ .responsive-mobile .show-mobile { display: block !important; } .responsive-mobile .hide-mobile { display: none !important; } .responsive-mobile .show-desktop { display: none !important; } .responsive-mobile .show-tablet { display: none !important; } /* When tablet layout is active */ .responsive-tablet .show-tablet { display: block !important; } .responsive-tablet .hide-tablet { display: none !important; } .responsive-tablet .show-desktop { display: none !important; } /* When desktop layout is active */ .responsive-desktop .show-desktop { display: block !important; } .responsive-desktop .hide-desktop { display: none !important; } .responsive-desktop .show-mobile { display: none !important; } .responsive-desktop .show-tablet { display: none !important; } /* Force correct alignment for mobile menu and options */ .header-mobile { display: flex; align-items: center; gap: 10px; } .header-options { display: flex; align-items: center; gap: 10px; } /* Layout per als elements fills de menu_options */ .header-options > div { display: flex; align-items: center; flex: 0 0 auto; } .header-options > div:first-child { margin-right: 10px; } .header-options > div:last-child { margin-left: 10px; } /* Ensure mobile menu is always visible when needed */ body.menu-mobile-active .header-mobile { display: flex !important; } body.menu-desktop-active .header-mobile { display: none !important; } /* Mobile specific adjustments */ .custom-header.mobile-layout .header-options, .custom-header-flex.mobile-layout .header-options { margin-right: 10px; } .custom-header.mobile-layout .header-mobile, .custom-header-flex.mobile-layout .header-mobile { margin-left: auto; } /* Assegurar que menu_mobile sigui sempre visible quan està activat */ body.menu-mobile-active #menu_mobile { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Específicament per a l'alineació dins del header */ .header-mobile #menu_mobile { display: block !important; } /* Forçar que el menú mòbil aparegui dins del header */ header .header-mobile { display: flex !important; align-items: center !important; justify-content: flex-end !important; } header .custom-header.mobile-layout .header-mobile, header .custom-header-flex.mobile-layout .header-mobile { display: flex !important; } /* Assegurar que les options sempre siguin visibles en mobile */ header .custom-header.mobile-layout .header-options, header .custom-header-flex.mobile-layout .header-options { display: flex !important; align-items: center !important; } /* Forçar ordre correcte: options a l'esquerra, mobile a la dreta */ header .custom-header.mobile-layout { grid-template-columns: 1fr auto auto; } header .custom-header.mobile-layout .header-options { grid-column: 2; justify-self: end; } header .custom-header.mobile-layout .header-mobile { grid-column: 3; justify-self: end; } /* Debug: outline per veure els elements */ .debug-mode .header-mobile { outline: 3px solid lime !important; } .debug-mode #menu_mobile { outline: 2px solid orange !important; } .debug-mode .header-options { outline: 2px solid yellow !important; } /** * Device Wrapper Styles * Styles for the device-wrapper that contains all page content * Works in both edit and non-edit modes */ /* Default device-wrapper styles (non-edit mode) */ #device-wrapper { min-height: 100vh; position: relative; width: 100%; box-sizing: border-box; } /* When NOT in edit mode, ensure wrapper takes full space */ body:not(.edit-mode-active) #device-wrapper { margin: 0; padding: 0; background: transparent; } /* Ensure smooth transitions */ #device-wrapper { transition: all 0.3s ease; } /* Make sure content inside wrapper flows normally */ #device-wrapper > * { position: relative; }/* Custom */ /* Tipus de ressaltat */ /* Clàssic */ #device-wrapper u.ws-classic, u.ws-classic { text-decoration: underline; text-decoration-color: #000; text-underline-offset: 0.15em; text-decoration-thickness: 2px; } /* Corba */ #device-wrapper .ws-curve, .ws-curve { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0em; } /* Cercle */ #device-wrapper .ws-circle, .ws-circle { text-decoration: none; position: relative; display: inline-block; isolation: isolate; } #device-wrapper .ws-circle svg.ws-circle-shape, .ws-circle svg.ws-circle-shape { position: absolute; top: -0.2em; left: -0.15em; width: calc(100% + 0.3em); height: calc(100% + 0.4em); pointer-events: none; overflow: visible; z-index: 0; } #device-wrapper .ws-circle svg.ws-circle-shape path, .ws-circle svg.ws-circle-shape path { fill: none; stroke: var(--accent-color, #ffff7f); stroke-width: 5px; stroke-linecap: square; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; } /* Retrocompatibilitat: sense classe = corba (comportament anterior) */ #device-wrapper u:not([class]), u:not([class]) { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0.15em; } #device-wrapper > .sidebar { display: none; } /* ======================== */ /* ESTUDI PAGE */ /* ======================== */ #device-wrapper .estudi-page { width: 100%; } #device-wrapper .estudi-container { max-width: 1200px; margin: 0 auto; padding: 0 max(20px, 4vw); } /* Hero */ #device-wrapper .estudi-hero { padding: 80px 0 40px; text-align: left; } #device-wrapper .estudi-hero-title { font-weight: 500; line-height: 1.1; margin-bottom: 30px; color: var(--text-color); } #device-wrapper .estudi-underline { position: relative; display: inline; --underline-color: var(--accent-color); --underline-width: 0.2em; } #device-wrapper .estudi-underline svg.underline-curve { position: absolute; left: 0; bottom: -0.1em; width: 100%; height: 0.4em; overflow: visible; pointer-events: none; } #device-wrapper .estudi-underline svg.underline-curve path { fill: none; stroke: var(--underline-color); stroke-width: var(--underline-width); stroke-linecap: square; stroke-linejoin: bevel; stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawUnderline 0.8s ease forwards; } @keyframes drawUnderline { to { stroke-dashoffset: 0; } } #device-wrapper .estudi-hero-desc { line-height: 1.7; max-width: 800px; margin-bottom: 40px; color: var(--text-color-secondary); } #device-wrapper .estudi-hero-nav { display: flex; flex-direction: row; gap: 12px; flex-wrap: nowrap; } #device-wrapper .estudi-hero-nav .button { flex: 1 1 0; min-width: 0 !important; white-space: nowrap; } #device-wrapper .estudi-anchor-btn { display: inline-block; text-decoration: none !important; cursor: pointer; padding: 10px 28px !important; } /* Section Title */ #device-wrapper .estudi-section-title { margin-bottom: 40px; color: var(--text-color); } /* Filosofia / 4 Potes */ #device-wrapper .estudi-filosofia { padding: 80px 0; background-color: var(--background-color-secondary); } #device-wrapper .estudi-filosofia-layout { display: flex; gap: 60px; align-items: flex-start; } #device-wrapper .estudi-filosofia-left { flex: 0 0 30%; } #device-wrapper .estudi-filosofia-img img { width: 100%; height: auto; border-radius: 8px; margin-top: 20px; } #device-wrapper .estudi-filosofia-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } #device-wrapper .estudi-filosofia-item { padding: 20px 0; } #device-wrapper .estudi-item-num { font-family: var(--h1-font-family); font-weight: 600; color: var(--text-color); display: block; margin-bottom: 4px; } #device-wrapper .estudi-filosofia-item h3 { margin-bottom: 8px; color: var(--text-color); } #device-wrapper .estudi-filosofia-item p { line-height: 1.6; color: var(--text-color-secondary); } /* Mètode */ #device-wrapper .estudi-metode { padding: 80px 0; background-color: var(--background-color); } #device-wrapper .estudi-metode-layout { display: flex; gap: 60px; align-items: flex-start; } #device-wrapper .estudi-metode-left { flex: 0 0 30%; } #device-wrapper .estudi-metode-right { flex: 1; } #device-wrapper .estudi-metode-intro { line-height: 1.7; margin-bottom: 16px; color: var(--text-color-secondary); } #device-wrapper .estudi-metode-list { margin-top: 30px; } #device-wrapper .estudi-metode-item { border-bottom: 1px solid #000; } #device-wrapper .estudi-metode-item:first-child { border-top: 1px solid #000; } #device-wrapper .estudi-metode-header { display: flex; align-items: center; padding: 20px 0; cursor: pointer; gap: 16px; user-select: none; } #device-wrapper .estudi-metode-header:hover { opacity: 0.7; } #device-wrapper .estudi-step-num { font-family: var(--h1-font-family); font-weight: 600; color: var(--text-color); opacity: 0.4; min-width: 28px; } #device-wrapper .estudi-metode-header h3 { font-weight: 500; margin: 0; flex: 1; color: var(--text-color); } #device-wrapper .estudi-metode-toggle { font-size: 2rem; font-weight: 300; color: var(--text-color); transition: transform 0.3s ease; line-height: 1; } #device-wrapper .estudi-metode-item.open .estudi-metode-toggle { transform: none; } #device-wrapper .estudi-metode-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 0 0 44px; } #device-wrapper .estudi-metode-item.open .estudi-metode-body { max-height: 300px; padding: 0 0 24px 44px; } #device-wrapper .estudi-metode-body p { line-height: 1.7; color: var(--text-color-secondary); } #device-wrapper .estudi-metode-body strong { font-weight: 600; color: var(--text-color); } /* Equip */ #device-wrapper .estudi-equip { padding: 80px 0; background-color: var(--background-color-secondary); } #device-wrapper .estudi-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; margin-bottom: 50px; } #device-wrapper .estudi-team-member { text-align: center; } #device-wrapper .estudi-team-photo { width: 90%; max-width: 280px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; } #device-wrapper .estudi-team-photo img { width: 100%; height: 100%; object-fit: cover; } #device-wrapper .estudi-team-member h3 { font-weight: 600; margin-bottom: 4px; color: var(--text-color); } #device-wrapper .estudi-team-member p { color: var(--text-color-secondary); } #device-wrapper .estudi-team-desc { max-width: 800px; margin: 0 auto; text-align: center; } #device-wrapper .estudi-team-desc p { line-height: 1.7; color: var(--text-color-secondary); } /* Cooperativa */ #device-wrapper .estudi-cooperativa { padding: 80px 0; background-color: var(--background-color); } #device-wrapper .estudi-coop-intro { line-height: 1.7; max-width: 700px; margin-bottom: 40px; color: var(--text-color-secondary); } #device-wrapper .estudi-coop-logos { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 50px; } #device-wrapper .estudi-coop-logos img { height: 50px; width: auto; object-fit: contain; filter: grayscale(0.3); transition: filter 0.3s ease; } #device-wrapper .estudi-coop-logos img:hover { filter: grayscale(0); } #device-wrapper .estudi-coop-details { display: flex; gap: 60px; flex-wrap: wrap; } #device-wrapper .estudi-coop-block h3 { font-weight: 600; margin-bottom: 12px; color: var(--text-color); } #device-wrapper .estudi-coop-block p { line-height: 1.6; color: var(--text-color-secondary); margin-bottom: 4px; } /* Testimonials */ #device-wrapper .estudi-testimonials { padding: 100px 0; background-color: var(--background-color); } #device-wrapper .estudi-testimonials-carousel { position: relative; display: flex; align-items: center; gap: 16px; } #device-wrapper .estudi-testimonials-track { display: flex; gap: 24px; overflow: hidden; flex: 1; } #device-wrapper .estudi-testimonials-track .estudi-testimonial { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--background-color-secondary); border-radius: 0; padding: 40px 30px 30px; transition: transform 0.4s ease; } #device-wrapper .estudi-testimonial-prev, #device-wrapper .estudi-testimonial-next { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); opacity: 0.3; transition: opacity 0.2s; padding: 8px; flex-shrink: 0; } #device-wrapper .estudi-testimonial-prev:hover, #device-wrapper .estudi-testimonial-next:hover { opacity: 1; } #device-wrapper .estudi-testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; background: #ddd; } #device-wrapper .estudi-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } #device-wrapper .estudi-testimonial-quote { font-size: 0.9rem; line-height: 1.7; font-style: italic; color: var(--text-color); margin-bottom: 20px; flex: 1; } #device-wrapper .estudi-testimonial-author { margin-bottom: 4px; font-size: 0.85rem; } #device-wrapper .estudi-testimonial-author strong { font-weight: 600; color: var(--text-color); } #device-wrapper .estudi-testimonial-org { color: var(--text-color); opacity: 0.5; font-size: 0.8rem; letter-spacing: 2px; } /* Clients */ #device-wrapper .estudi-clients { padding: 80px 0; background-color: var(--background-color); } #device-wrapper .estudi-clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } #device-wrapper .estudi-clients-grid img { width: 100%; height: auto; border-radius: 6px; object-fit: cover; aspect-ratio: 4/3; } /* Footer */ #device-wrapper .lataula-footer { padding: 60px 0; border-top: 1px solid #e0e0e0; } #device-wrapper .lataula-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start; } #device-wrapper .lataula-footer .footer-col { display: flex; flex-direction: column; gap: 6px; } #device-wrapper .lataula-footer .footer-logo { height: clamp(15px, 2.5cqi, 25px); width: auto !important; max-width: 100%; object-fit: contain; } #device-wrapper .lataula-footer .footer-address { line-height: 1.6; color: var(--text-color-secondary); } #device-wrapper .lataula-footer .footer-col a { color: var(--text-color) !important; transition: opacity 0.2s; display: flex; align-items: center; gap: 8px; } #device-wrapper .lataula-footer .footer-col a:hover { opacity: 0.6; } /* ======================== */ /* RESPONSIVE - ESTUDI */ /* ======================== */ @container device (max-width: 1024px) { #device-wrapper .estudi-filosofia-layout { flex-direction: column; } #device-wrapper .estudi-filosofia-left { flex: none; } #device-wrapper .estudi-clients-grid { grid-template-columns: repeat(2, 1fr); } } @container device (max-width: 768px) { #device-wrapper .estudi-metode-layout { flex-direction: column; gap: 20px; } #device-wrapper .estudi-metode-left { flex: none; position: static; } #device-wrapper .estudi-hero { padding: 50px 0 30px; } #device-wrapper .estudi-filosofia, #device-wrapper .estudi-metode, #device-wrapper .estudi-equip, #device-wrapper .estudi-cooperativa, #device-wrapper .estudi-testimonials, #device-wrapper .estudi-clients { padding: 50px 0; } #device-wrapper .estudi-filosofia-left { flex: none; } #device-wrapper .estudi-filosofia-grid { grid-template-columns: 1fr; gap: 20px; } #device-wrapper .estudi-team-grid { grid-template-columns: 1fr; gap: 30px; } #device-wrapper .estudi-team-photo { width: 60%; max-width: 160px; } #device-wrapper .estudi-coop-logos { gap: 20px; } #device-wrapper .estudi-coop-logos img { height: 35px; } #device-wrapper .estudi-coop-details { flex-direction: column; gap: 30px; } #device-wrapper .estudi-hero-nav { flex-direction: column; gap: 8px; } #device-wrapper .estudi-hero-nav .button { flex: none; width: 100%; margin: 0 !important; } #device-wrapper .estudi-anchor-btn { padding: 8px 20px !important; } #device-wrapper .estudi-clients-grid { grid-template-columns: 1fr; } #device-wrapper .lataula-footer .footer-content { flex-direction: column; } #device-wrapper .lataula-footer .footer-contact-info { flex-direction: column; gap: 16px; } #device-wrapper .lataula-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } #device-wrapper .lataula-footer .footer-col-logo { grid-column: 1 / -1; } } /* Spacing */ .nomob { display:block !important; } .mob { display: none !important; } @media (max-width: 900px) { .nomob { display:none !important; } .mob { display:block !important; } header { height:77px !important;} } /* Secció principal */ .features { max-width: 1000px; margin: auto; margin-top:0px; } .features h2 { margin-bottom: 20px; } /* Estructura de la graella */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } /* Cada bloc */ .feature { background: rgba(255, 255, 255, 0.06); padding: 20px; border-radius: 10px; text-align: center; /* transition: transform 0.3s;*/ display: flex; /* Disposa els elements en línia (icon + text) */ align-items: center; /* Centra verticalment */ gap: 15px; /* Espai entre la icona i el text */ } /* Icones */ .icon-container { flex-shrink: 0; /* Evita que la icona es redueixi */ align-self:normal; float: left; padding: 0px 15px 0px 0px; } .text-container { flex-grow: 1; /* Permet que el text ocupi l’espai disponible */ float: left; width: calc(100% - 60px); } .icon { display: block; margin-bottom: 10px; height:auto; } img.icon { max-width:30px; height:30px; margin:auto; } /* Titols */ .feature h3 { padding-top:0px !important; line-height:normal; } /* Text */ .feature p { margin-bottom: 10px; } .feature a { text-decoration:none !important; display: inline-block; padding: 5px 16px; text-decoration: none; border-radius: 19px; } /* Contenidor principal */ .pricing-container { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } /* Targetes de preus */ .pricing-card { background- border-radius: 12px; /* box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);*/ width: 300px; text-align: center; padding: 20px; border: 2px solid #fff; transition: transform 0.3s ease-in-out; } /* Destacar el pla més popular */ .popular { border- } /* Capçalera */ .pricing-header .badge { background: #38b48b; padding: 6px 12px; border-radius: 15px; display: inline-block; margin-bottom: 8px; } .pricing-header h3 { margin-bottom: 10px; } .discount { background: #eaf8f0; padding: 6px; border-radius: 5px; display: inline-block; } .old-price { } .price { margin-bottom:0px; } .yearly-price { margin-bottom:0px; } .taxes { } /* Característiques */ .pricing-features { margin: 15px 0px 0px 15px; text-align: left; max-width:550px; } .feature-title { display: block; background: #ebf5f3; padding: 6px; text-align: center; border-radius: 5px; } .pricing-features ul { list-style: none; padding: 0; } .pricing-features li { padding: 4px 0; } .pricing-features li, .pricing-features li strong { } .pricing-container .pricing-features li { } .pricing-container .pricing-features { margin:15px 0px 15px 15px } .featured { background: linear-gradient(to right,#5ac4b6 0,#50caad 100%); transition: background 0s ease-in-out; } /* Quan es fa hover, s'activa l'animació de fons en moviment */ .featured:hover { background: linear-gradient(45deg,#4dbfa7,#4cc1a7,#35d1af,#579ca6); background-size: 400% 400%; animation: gradientMove 1s linear forwards; } /* Animació del moviment del degradat */ @keyframes gradientMove { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @media (min-width: 1000px) and (max-width: 1320px) { .pricing-card { width: 45%; } } @media (max-width: 999px) { .pricing-card { width: 100%;} .grid { margin-top:0px; } .grid .feature { padding:0px !important; background:none; } } .icon-round { display: inline-block; font-size: 24px; /* Adjust icon size */ width: 50px; /* Make it a square */ height: 50px; line-height: 50px; /* Center the icon vertically */ text-align: center; /* Center the icon horizontally */ border: 1px solid #fff; /* Add the border with desired color */ border-radius: 50%; /* Make it round */ color: #fff; /* Icon color */ transition: all 0.3s ease; /* Add a smooth hover effect */ padding:12px 0px; margin:10px 2px; } footer, .footer { clear: left; padding: 30px; height: auto; margin: 0 auto; left: 0; right: 0; } .footer { text-align: center; } .footer { position: relative; bottom: 0; width: 100%; } .footer, .footer .menu a, .footer .menu span { color:#fff !important; font-size:15px;line-height:auto !important } .footer span.title.bg { font-size:1.3em;} footer img.logo { margin:auto; max-width:173px} /* General Menu Styling */ footer .menu { width: 100%; max-width: 1200px; margin: auto; font-family: var(--p-font-family); } /* Main menu items (Titles) */ footer .menu > .title { text-decoration: none; color: black; font-weight: bold; display: block; padding: 10px; text-align:left; } /* Submenu Styling */ footer .submenu { display: none; padding-top: 5px; } footer .submenu .level2 { margin: 5px 0; } footer .submenu .level2 a { font-weight: normal; background: none; padding: 5px 0px; color: #555; display: block; } footer .submenu .level2 a:hover { color: black; } /* Default: Show Submenus */ footer .menu .submenu { display: block; } .footer h4 { font-size: 1.2rem; } @media (max-width: 1170px) { footer div.left { float:inherit !important;padding: 0px !important } footer .submenu .level2 { margin:0px !important; } } @media (max-width: 900px) { .footer { text-align:left;} footer .menu { display: block; } footer img.logo { margin:0; } } @media (min-width: 900px) { footer .menu { display: flex; justify-content: space-between; gap: 20px; } /* Each menu title and its submenu in a column */ footer .menu > .title { flex: 1; padding: 15px; } /* Ensure submenus appear below their respective titles */ footer .menu > .title + .option { display: flex; flex-direction: column; align-items: center; background: #f9f9f9; padding: 10px; border-radius: 5px; margin-top: 5px; } footer .menu .option .level2 { width: 100%; text-align: left; } footer .menu .bg { text-align:left !important; } } /* Additional footer styles from style2.css */ /* Social media buttons */ .social-buttons { display: flex; justify-content: center; gap: 10px; margin: 20px 0; } .social-button { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; color: white; text-decoration: none; transition: all 0.3s ease; font-size: 18px; } .social-button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .social-button.facebook { background: #3b5998; } .social-button.twitter { background: #1da1f2; } .social-button.instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .social-button.linkedin { background: #0077b5; } .social-button.youtube { background: #ff0000; } /* Footer contact info */ .footer-contact { text-align: center; margin: 20px 0; } .footer-contact p { margin: 5px 0; color: #666; } .footer-contact a { color: #0254c1; text-decoration: none; } .footer-contact a:hover { text-decoration: underline; } /* Footer copyright */ .footer-copyright { text-align: center; padding: 20px 0; border-top: 1px solid #eee; margin-top: 20px; color: #666; font-size: 14px; } /* Footer newsletter */ .footer-newsletter { background: #f8f9fa; padding: 30px; text-align: center; margin: 20px 0; border-radius: 8px; } .footer-newsletter h3 { margin-bottom: 15px; color: #333; } .footer-newsletter p { margin-bottom: 20px; color: #666; } .newsletter-form { display: flex; max-width: 400px; margin: 0 auto; gap: 10px; } .newsletter-form input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .newsletter-form button { padding: 12px 20px; background: #0254c1; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.3s; } .newsletter-form button:hover { background: #0142a0; } /* LATAULA Footer Styles */ .lataula-footer { background-color: #f4d03f; padding: 40px 0; color: #333; } .lataula-footer .footer-content { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .lataula-footer .footer-left h2 { margin: 0; } .lataula-footer .footer-right { display: flex; align-items: center; } .lataula-footer .footer-contact-info { display: flex; gap: 40px; align-items: center; } .lataula-footer .contact-item { display: flex; flex-direction: column; text-align: center; } .lataula-footer .contact-item strong { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; line-height: 1.2; } .lataula-footer .contact-item span { font-size: 12px; color: #555; font-weight: 400; line-height: 1.2; } @media (max-width: 768px) { .lataula-footer .footer-content { flex-direction: column; text-align: center; gap: 30px; } .lataula-footer .footer-contact-info { flex-direction: column; gap: 20px; } .lataula-footer .footer-left h2 { font-size: 1.5rem; } } @media (max-width: 480px) { .lataula-footer .footer-contact-info { gap: 15px; } .lataula-footer .contact-item strong { font-size: 13px; } .lataula-footer .contact-item span { font-size: 11px; } } /* Footer responsive */ @media (max-width: 768px) { .social-buttons { flex-wrap: wrap; } .newsletter-form { flex-direction: column; } .newsletter-form input, .newsletter-form button { width: 100%; } } /* Form styles */ form input[type="text"], form input[type="email"], form input { padding:5px; } form input[type="submit"], form input[type="submit"]:hover { border:none; } form input[type="submit"]:hover, input[type="button"]:hover { transition: 0.3s; } /* input[type="text"], input[type="password"], input[type="email"], textarea { max-width:400px; width:100%; border:1px solid #e4ccce; line-height:1; padding:7px 10px 0 !important; margin-bottom:10px; background-image:none; background:none; outline:none !important; } */ input[type="button"], input[type="submit"] { cursor:pointer; } input[type="checkbox"] { margin-bottom:20px; } select, #login input[type="text"], #afiliat input[type="text"] { width:calc(100% - 16px); margin-bottom:20px; } #login input[type="submit"], #afiliat input[type="submit"] { width:100%; } input#newsletter { max-width: calc(100% - 55px); } input.del { } /* Form compra */ #form_compra table { margin:60px auto 30px; } /* Contact form */ .bt-contact-form-lmw { padding:40px 0 0 50px; } .bt-contact-form-lmw form.wpcf7-form > .item-form.bt-submit input[type="submit"] { height: 58px; width: 225px; border-radius: 0; line-height: 22px; background- } .bt-contact-form-lmw form > .item-form.bt-submit { margin-top: 30px; position: relative; } .bt-contact-form-lmw form > .item-form textarea, .bt-contact-form-lmw form > .item-form input { background- padding:10px !important; } /* Form structure styles */ .form-section { margin-bottom: 30px; } .form-section h4 { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; background- transition: border-color 0.2s ease, box-shadow 0.2s ease; } .form-group input:hover, .form-group textarea:hover, .form-group select:hover { border- } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border- box-shadow: 0 0 0 3px rgba(22, 181, 182, 0.1); } .form-group textarea { min-height: 100px; resize: vertical; } .form-help { display: block; margin-top: 5px; } .form-row { display: flex; gap: 20px; margin-bottom: 20px; } .form-row .form-group { flex: 1; margin-bottom: 0; } .form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e0e0e0; } .form-control { margin-bottom:10px; } .form div b { padding-top:10px; } .form-signin { max-width: 380px; padding: 15px 35px 45px; margin: 0 auto; } /* Newsletter */ a#ssbut { border:1px solid #222; margin-left:5px; padding:3px 3px 2px; } a#ssbut:hover { background- } /* Search form */ #searchbox { display:none; float: right; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background:rgb(81 6 73 / 80%); z-index: 9999; text-align: center; padding-top: 20%; } #searchbox input { width:33%; background:#fff; padding:20px 55px 20px 20px !important; } #exec_search { margin-left:-50px; cursor:pointer; } #close_searchbox { -webkit-touch-callout: none; user-select: none; cursor:pointer; text-decoration:none; top:5px; right:30px; position:absolute; } #searchbox_mobile { padding:15px 0 15px 33px; } #searchbox_mobile input { width:178px !important; background:none; } /* Pros and contras lists */ form#list_pros li, form#list_contras li { padding: 5px 0; } /* Media queries for forms */ @media (max-width: 900px) { div.form input, div.form textarea { width:100%; } #searchbox { display:none !important; } #searchbox input { width:70%; } } @media (max-width: 1300px) { #searchbox input { width:70%; } } @media screen and (max-width: 767px) { #search_button { cursor:pointer; top: 26px; position: absolute; left: 30px; } }/** * Header positioning fix for device-wrapper * Garanteix transicions suaus i z-index correcte. * (No forcem alcada ni position: el client (anima-header) ho gestiona.) */ #device-wrapper header { transition: background-color .5s, opacity .3s ease-in-out; z-index: 50; margin-top: 0; } /* Tipus de ressaltat */ /* Classic */ #device-wrapper u.ws-classic, u.ws-classic { text-decoration: underline; text-decoration-color: #000; text-underline-offset: 0.15em; text-decoration-thickness: 2px; } /* Corba */ #device-wrapper .ws-curve, .ws-curve { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0em; } /* Cercle */ #device-wrapper .ws-circle, .ws-circle { text-decoration: none; position: relative; display: inline-block; isolation: isolate; } #device-wrapper .ws-circle svg.ws-circle-shape, .ws-circle svg.ws-circle-shape { position: absolute; top: -0.2em; left: -0.15em; width: calc(100% + 0.3em); height: calc(100% + 0.4em); pointer-events: none; overflow: visible; z-index: -1; } #device-wrapper .ws-circle svg.ws-circle-shape path, .ws-circle svg.ws-circle-shape path { fill: none; stroke: var(--accent-color, #ffff7f); stroke-width: 5px; stroke-linecap: square; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; } /* Retrocompatibilitat: sense classe = corba */ #device-wrapper u:not([class]), u:not([class]) { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0.15em; } /* ========================================================= Anima Catering — Estilos públicos Inspirado en norarealfood: minimalismo premium, paleta crema/verde, tipografía serif en titulares. Todo escopado a #device-wrapper (Websfera). ========================================================= */ /* --- Tokens / variables --- */ #device-wrapper { --anima-cream: #f7f1e3; --anima-cream-soft: #faf6ec; --anima-cream-dark: #ece4d1; --anima-ink: #1f2417; --anima-ink-soft: #3a4031; --anima-green: #2f3a22; --anima-green-mid: #5d6f3e; --anima-green-soft: #8a9c6a; --anima-accent: #c66a3d; /* terracota suave para CTAs */ --anima-accent-hover: #a65428; --anima-muted: #6b6f5f; --anima-line: #ddd6c2; --anima-serif: 'Fraunces', 'Cormorant Garamond', 'Playfair Display', 'Times New Roman', serif; --anima-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --anima-radius: 4px; --anima-shadow: 0 2px 24px rgba(31, 36, 23, 0.06); --anima-container: 1240px; --anima-container-narrow: 880px; } /* Fonts vía Google Fonts (carga selectiva) */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Inter:wght@300;400;500;600&display=swap'); /* --- Resetillo dentro del wrapper --- */ #device-wrapper body, #device-wrapper { font-family: var(--anima-sans); color: var(--anima-ink); background: var(--anima-cream-soft); font-weight: 400; line-height: 1.6; font-size: 16px; } #device-wrapper * { box-sizing: border-box; } #device-wrapper img { max-width: 100%; height: auto; display: block; } #device-wrapper a { color: inherit; text-decoration: none; } #device-wrapper a:hover { color: var(--anima-accent); } #device-wrapper h1, #device-wrapper h2, #device-wrapper h3, #device-wrapper h4 { font-family: var(--anima-serif); font-weight: 400; color: var(--anima-ink); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.6em; } #device-wrapper h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); font-weight: 300; } #device-wrapper h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 400; } #device-wrapper h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; } #device-wrapper h4 { font-size: 1.1rem; font-weight: 500; } #device-wrapper p { margin: 0 0 1em; color: var(--anima-ink-soft); } /* --- Container --- */ #device-wrapper .anima-container { width: 100%; max-width: var(--anima-container); margin: 0 auto; padding: 0 24px; } #device-wrapper .anima-container--narrow { max-width: var(--anima-container-narrow); } /* --- Botones --- */ #device-wrapper .anima-btn { display: inline-block; padding: 14px 32px; border: 1px solid var(--anima-ink); background: var(--anima-ink); color: var(--anima-cream); font-family: var(--anima-sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; border-radius: 999px; cursor: pointer; transition: all 0.25s ease; text-align: center; line-height: 1.2; } #device-wrapper .anima-btn:hover { background: var(--anima-accent); border-color: var(--anima-accent); color: #fff; } #device-wrapper .anima-btn--ghost { background: transparent; color: var(--anima-ink); } #device-wrapper .anima-btn--ghost:hover { background: var(--anima-ink); color: var(--anima-cream); border-color: var(--anima-ink); } #device-wrapper .anima-btn--accent { background: var(--anima-accent); border-color: var(--anima-accent); color: #fff; } #device-wrapper .anima-btn--accent:hover { background: var(--anima-accent-hover); border-color: var(--anima-accent-hover); } /* ========================================================= Header (anima-header) ========================================================= */ #device-wrapper header.anima-header { background: var(--anima-cream-soft); padding: 0; position: sticky; top: 0; z-index: 50; } #device-wrapper .anima-header-inner { max-width: var(--anima-container); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } #device-wrapper .anima-header-logo a { display: flex; align-items: center; gap: 10px; font-family: var(--anima-serif); font-size: 1.4rem; font-weight: 500; color: var(--anima-ink); letter-spacing: 0.02em; } #device-wrapper .anima-header-logo img { max-height: var(--logo-max-height, 42px); height: auto; width: auto; } #device-wrapper .anima-header-nav { display: flex; } #device-wrapper .anima-header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } #device-wrapper .anima-header-nav a { font-size: 0.92rem; color: var(--anima-ink-soft); font-weight: 400; letter-spacing: 0.01em; transition: color 0.2s; padding: 6px 0; border-bottom: 1px solid transparent; } #device-wrapper .anima-header-nav a:hover, #device-wrapper .anima-header-nav .selected a { color: var(--anima-ink); border-bottom-color: var(--anima-ink); } #device-wrapper .anima-header-actions { display: flex; align-items: center; gap: 12px; } #device-wrapper .anima-header-mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: var(--anima-ink); } /* ========================================================= Footer ========================================================= */ #device-wrapper footer.anima-footer { background: var(--anima-green); color: var(--anima-cream); padding: 64px 24px 28px; } #device-wrapper .anima-footer-inner { max-width: var(--anima-container); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } #device-wrapper .anima-footer h4 { color: var(--anima-cream); font-family: var(--anima-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; opacity: 0.7; } #device-wrapper .anima-footer p, #device-wrapper .anima-footer a, #device-wrapper .anima-footer li { color: var(--anima-cream); opacity: 0.85; font-size: 0.92rem; line-height: 1.7; } #device-wrapper .anima-footer a:hover { opacity: 1; color: #fff; } #device-wrapper .anima-footer ul { list-style: none; padding: 0; margin: 0; } #device-wrapper .anima-footer-brand h3 { color: var(--anima-cream); font-family: var(--anima-serif); font-size: 1.7rem; font-weight: 400; margin-bottom: 12px; } #device-wrapper .anima-footer-bottom { max-width: var(--anima-container); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(247, 241, 227, 0.18); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.82rem; opacity: 0.65; } /* ========================================================= HOME — Hero full-width amb imatge i text a sobre ========================================================= */ #device-wrapper .anima-hero-full { position: relative; width: 100%; min-height: 56vh; display: flex; align-items: flex-end; justify-content: center; background-color: var(--anima-green); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; padding: 100px 24px 70px; overflow: hidden; } #device-wrapper .anima-hero-full-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.05) 100%); pointer-events: none; z-index: 1; } #device-wrapper .anima-hero-full-content { position: relative; z-index: 2; max-width: 960px; width: 100%; text-align: center; color: #fff; } #device-wrapper .anima-hero-full-eyebrow { display: inline-block; font-family: var(--anima-sans); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); margin-bottom: 28px; padding: 6px 16px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; backdrop-filter: blur(2px); } #device-wrapper .anima-hero-full-title { font-family: var(--anima-serif); font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 300; line-height: 1.05; color: #fff; margin: 0 0 64px; letter-spacing: -0.01em; text-shadow: 0 2px 30px rgba(0,0,0,0.25); } #device-wrapper .anima-hero-full-title em { font-style: italic; font-weight: 300; color: var(--anima-cream); opacity: 0.95; } #device-wrapper .anima-hero-full-lead { font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, 0.92); margin: 36px auto 36px; max-width: 640px; text-shadow: 0 1px 20px rgba(0,0,0,0.3); } #device-wrapper .anima-hero-full-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* CTA principal del hero: fons negre per defecte, terracota al hover */ #device-wrapper .anima-hero-full-cta .anima-btn--accent { background: var(--anima-ink); border-color: var(--anima-ink); color: #fff; } #device-wrapper .anima-hero-full-cta .anima-btn--accent:hover { background: var(--anima-accent); border-color: var(--anima-accent); color: #fff; } /* CTA secundari sobre imatge (text blanc, vora translúcida, hover invert) */ #device-wrapper .anima-btn.anima-hero-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); backdrop-filter: blur(2px); } #device-wrapper .anima-btn.anima-hero-btn-ghost:hover { background: #fff; color: var(--anima-ink); border-color: #fff; } @media (max-width: 720px) { #device-wrapper .anima-hero-full { min-height: 56vh; padding: 80px 20px; } } /* ========================================================= HOME — Hero antic (mantingut per altres pàgines: empresas, etc.) ========================================================= */ #device-wrapper .anima-hero { padding: 120px 24px 100px; background: linear-gradient(180deg, var(--anima-cream-soft) 0%, var(--anima-cream) 100%); position: relative; overflow: hidden; } #device-wrapper .anima-hero-inner { max-width: var(--anima-container); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } #device-wrapper .anima-hero-eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anima-green-mid); margin-bottom: 24px; display: block; } #device-wrapper .anima-hero-title { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: 1.05; margin-bottom: 28px; color: var(--anima-ink); } #device-wrapper .anima-hero-title em { font-style: italic; color: var(--anima-green-mid); font-weight: 300; } #device-wrapper .anima-hero-lead { font-size: 1.15rem; line-height: 1.65; margin-bottom: 36px; max-width: 480px; } #device-wrapper .anima-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } #device-wrapper .anima-hero-media { aspect-ratio: 4/5; background: var(--anima-cream-dark); border-radius: 6px; overflow: hidden; background-size: cover; background-position: center; box-shadow: var(--anima-shadow); } #device-wrapper .anima-hero-media img { width: 100%; height: 100%; object-fit: cover; } /* Section base */ #device-wrapper .anima-section { padding: 100px 24px; } #device-wrapper .anima-section--cream { background: var(--anima-cream); } #device-wrapper .anima-section--soft { background: var(--anima-cream-soft); } #device-wrapper .anima-section--dark { background: var(--anima-green); color: var(--anima-cream); } #device-wrapper .anima-section--dark h2, #device-wrapper .anima-section--dark h3 { color: var(--anima-cream); } #device-wrapper .anima-section--dark p { color: rgba(247, 241, 227, 0.85); } #device-wrapper .anima-section-eyebrow { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--anima-green-mid); margin-bottom: 18px; display: block; } #device-wrapper .anima-section-title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 24px; max-width: 780px; } #device-wrapper .anima-section-lead { font-size: 1.1rem; max-width: 680px; margin-bottom: 56px; } /* Pasos cómo funciona */ #device-wrapper .anima-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; } #device-wrapper .anima-step { border-top: 1px solid var(--anima-line); padding-top: 24px; } #device-wrapper .anima-step-num { font-family: var(--anima-serif); font-size: 2.4rem; font-weight: 300; color: var(--anima-green-mid); margin-bottom: 16px; line-height: 1; } #device-wrapper .anima-step h3 { font-size: 1.2rem; font-weight: 500; margin-bottom: 10px; } #device-wrapper .anima-step p { font-size: 0.95rem; line-height: 1.6; } /* Feature split */ #device-wrapper .anima-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } #device-wrapper .anima-split--reverse > *:first-child { order: 2; } #device-wrapper .anima-split-media { aspect-ratio: 5/4; background: var(--anima-cream-dark); border-radius: 6px; overflow: hidden; background-size: cover; background-position: center; } /* Cards */ #device-wrapper .anima-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } #device-wrapper .anima-card { background: var(--anima-cream-soft); border: 1px solid var(--anima-line); border-radius: 6px; padding: 32px; transition: transform 0.25s ease, box-shadow 0.25s ease; } #device-wrapper .anima-card:hover { transform: translateY(-3px); box-shadow: var(--anima-shadow); } #device-wrapper .anima-card-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--anima-cream-dark); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; color: var(--anima-green); } /* Stats */ #device-wrapper .anima-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; } #device-wrapper .anima-stat-num { font-family: var(--anima-serif); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 300; color: var(--anima-cream); line-height: 1; margin-bottom: 10px; } #device-wrapper .anima-stat-label { font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; } /* CTA banda */ #device-wrapper .anima-cta-band { background: var(--anima-green); color: var(--anima-cream); text-align: center; padding: 80px 24px; } #device-wrapper .anima-cta-band h2 { color: var(--anima-cream); margin-bottom: 24px; } #device-wrapper .anima-cta-band p { color: rgba(247, 241, 227, 0.85); } #device-wrapper .anima-cta-band .anima-btn { background: var(--anima-cream); color: var(--anima-ink); border-color: var(--anima-cream); margin-top: 20px; } #device-wrapper .anima-cta-band .anima-btn:hover { background: var(--anima-accent); color: #fff; border-color: var(--anima-accent); } /* Plates grid (Menús page) */ #device-wrapper .anima-plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } #device-wrapper .anima-plate { background: var(--anima-cream-soft); border-radius: 6px; overflow: hidden; transition: transform 0.25s ease; } #device-wrapper .anima-plate:hover { transform: translateY(-2px); } #device-wrapper .anima-plate-media { aspect-ratio: 4/3; background: var(--anima-cream-dark); background-size: cover; background-position: center; } #device-wrapper .anima-plate-body { padding: 20px 22px 24px; } #device-wrapper .anima-plate-course { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--anima-green-mid); margin-bottom: 6px; display: block; } #device-wrapper .anima-plate-name { font-family: var(--anima-serif); font-size: 1.25rem; font-weight: 500; margin-bottom: 8px; color: var(--anima-ink); } #device-wrapper .anima-plate-desc { font-size: 0.92rem; color: var(--anima-muted); margin-bottom: 14px; line-height: 1.55; } #device-wrapper .anima-badges { display: flex; flex-wrap: wrap; gap: 6px; } #device-wrapper .anima-badge { font-size: 0.7rem; padding: 3px 10px; border-radius: 999px; background: var(--anima-cream-dark); color: var(--anima-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } #device-wrapper .anima-badge.vegan { background: #d8e6c0; color: #38501a; } #device-wrapper .anima-badge.veggie { background: #e8edd2; color: #4a5b1f; } #device-wrapper .anima-badge.gf { background: #ead8be; color: #6b4f2a; } #device-wrapper .anima-badge.lf { background: #efe2cf; color: #6b4f2a; } #device-wrapper .anima-badge.warn { background: #f3dcc7; color: #8a4a18; } /* ========================================================= FORMS (contacto, login) ========================================================= */ #device-wrapper .anima-form { display: flex; flex-direction: column; gap: 18px; max-width: 540px; } #device-wrapper .anima-form-field { display: flex; flex-direction: column; gap: 6px; } #device-wrapper .anima-form label { font-size: 0.85rem; color: var(--anima-ink-soft); font-weight: 500; } #device-wrapper .anima-form input, #device-wrapper .anima-form textarea { padding: 12px 14px; border: 1px solid var(--anima-line); background: #fff; font-family: inherit; font-size: 0.98rem; color: var(--anima-ink); border-radius: var(--anima-radius); transition: border-color 0.2s; } #device-wrapper .anima-form input:focus, #device-wrapper .anima-form textarea:focus { outline: none; border-color: var(--anima-green-mid); } #device-wrapper .anima-form-error { color: #b13a2a; font-size: 0.88rem; margin: -4px 0 0; } #device-wrapper .anima-form-success { background: #e8edd2; color: #38501a; padding: 12px 16px; border-radius: var(--anima-radius); font-size: 0.92rem; } /* Login específico (centrado) */ #device-wrapper .anima-login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 60px 24px; background: var(--anima-cream); } #device-wrapper .anima-login-card { background: #fff; border: 1px solid var(--anima-line); border-radius: 10px; padding: 48px 40px; max-width: 440px; width: 100%; box-shadow: var(--anima-shadow); } #device-wrapper .anima-login-card h1 { font-size: 1.9rem; margin-bottom: 8px; } #device-wrapper .anima-login-card .anima-form { max-width: none; } #device-wrapper .anima-login-card .anima-btn { width: 100%; } #device-wrapper .anima-login-foot { margin-top: 24px; text-align: center; font-size: 0.9rem; color: var(--anima-muted); } /* ========================================================= PEDIDO — wizard estil norarealfood (dia → steps → cards) ========================================================= */ #device-wrapper .pedido-app { background: var(--anima-cream); min-height: 100vh; padding: 32px 24px 140px; max-width: 1320px; margin: 0 auto; --pedido-accent: var(--anima-accent); } #device-wrapper .pedido-topbar { margin-bottom: 24px; } #device-wrapper .pedido-topbar h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 6px; } #device-wrapper .pedido-topbar p { margin: 0; color: var(--anima-muted); font-size: 0.95rem; } #device-wrapper .pedido-deadline-pill { display: inline-block; background: var(--anima-cream-dark); color: var(--anima-ink-soft); padding: 4px 12px; border-radius: 999px; font-size: 0.82rem; margin-left: 6px; } #device-wrapper .pedido-deadline-pill.closed { background: #e8d8d4; color: #7a2a1a; } #device-wrapper .pedido-error { background: #fde7d8; color: #8a3220; border: 1px solid #f0c4a0; padding: 12px 16px; border-radius: 6px; margin-top: 12px; font-size: 0.92rem; } /* Selector de dia (tabs) */ #device-wrapper .pedido-days { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 4px; scrollbar-width: thin; } #device-wrapper .pedido-day-tab { flex: 1 1 0; min-width: 110px; background: #fff; border: 1px solid var(--anima-line); border-radius: 10px; padding: 14px 16px; cursor: pointer; text-align: center; transition: all 0.15s ease; font-family: var(--anima-sans); } #device-wrapper .pedido-day-tab:hover { border-color: var(--anima-ink); } #device-wrapper .pedido-day-tab.active { background: var(--anima-ink); border-color: var(--anima-ink); color: var(--anima-cream); } #device-wrapper .pedido-day-tab-name { display: block; font-family: var(--anima-serif); font-size: 1.1rem; font-weight: 500; text-transform: capitalize; line-height: 1.1; margin-bottom: 2px; } #device-wrapper .pedido-day-tab-date { display: block; font-size: 0.82rem; opacity: 0.8; } /* Steps wizard */ #device-wrapper .pedido-steps { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 28px; flex-wrap: wrap; } #device-wrapper .pedido-step { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; border-radius: 999px; color: var(--anima-muted); transition: all 0.15s ease; user-select: none; } #device-wrapper .pedido-step:hover { color: var(--anima-ink); } #device-wrapper .pedido-step.active { background: var(--anima-cream-dark); color: var(--anima-ink); } #device-wrapper .pedido-step.done { color: var(--anima-green-mid); } #device-wrapper .pedido-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--anima-cream-dark); color: var(--anima-ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; } #device-wrapper .pedido-step.active .pedido-step-num { background: var(--pedido-accent); color: #fff; } #device-wrapper .pedido-step.done .pedido-step-num { background: var(--anima-green-mid); color: #fff; } #device-wrapper .pedido-step-label { font-size: 0.95rem; font-weight: 500; } #device-wrapper .pedido-step-sep { width: 24px; height: 1px; background: var(--anima-line); } /* Filtres */ #device-wrapper .pedido-filters { margin-bottom: 22px; } #device-wrapper .pedido-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } #device-wrapper .pedido-chip { background: #fff; border: 1px solid var(--anima-line); border-radius: 999px; padding: 8px 16px; font-size: 0.88rem; color: var(--anima-ink-soft); cursor: pointer; transition: all 0.15s ease; font-family: var(--anima-sans); line-height: 1.2; } #device-wrapper .pedido-chip:hover { border-color: var(--anima-ink); color: var(--anima-ink); } #device-wrapper .pedido-chip.active { background: var(--anima-green); border-color: var(--anima-green); color: var(--anima-cream); } #device-wrapper .pedido-chip-dropdown { display: inline-flex; align-items: center; gap: 8px; } #device-wrapper .pedido-chip-dropdown svg { transition: transform 0.15s; } #device-wrapper .pedido-excluir { position: relative; } #device-wrapper .pedido-excluir-count:not(:empty) { background: var(--pedido-accent); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.78rem; margin-left: 4px; } #device-wrapper .pedido-excluir-menu { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid var(--anima-line); border-radius: 8px; padding: 8px 0; min-width: 220px; max-height: 320px; overflow-y: auto; box-shadow: 0 8px 30px rgba(0,0,0,0.08); z-index: 20; } #device-wrapper .pedido-excluir-item { display: flex; align-items: center; gap: 10px; padding: 8px 16px; cursor: pointer; font-size: 0.92rem; color: var(--anima-ink-soft); } #device-wrapper .pedido-excluir-item:hover { background: var(--anima-cream-soft); } #device-wrapper .pedido-excluir-item input { accent-color: var(--anima-green-mid); } /* Grid de plats */ #device-wrapper .pedido-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; } #device-wrapper .pedido-empty { background: #fff; border: 1px dashed var(--anima-line); border-radius: 10px; padding: 60px 20px; text-align: center; color: var(--anima-muted); } #device-wrapper .pedido-dish-card { background: #fff; border: 1px solid var(--anima-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s ease, box-shadow 0.15s ease; } #device-wrapper .pedido-dish-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); } #device-wrapper .pedido-dish-img { aspect-ratio: 4/3; background: var(--anima-cream-dark); background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: center; color: var(--anima-muted); } #device-wrapper .pedido-dish-img-placeholder svg { width: 64px; height: 64px; } #device-wrapper .pedido-dish-qty-badge { position: absolute; top: 12px; right: 12px; background: var(--pedido-accent); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.92rem; box-shadow: 0 2px 8px rgba(0,0,0,0.18); } #device-wrapper .pedido-dish-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; } #device-wrapper .pedido-dish-name { font-family: var(--anima-serif); font-size: 1.18rem; font-weight: 500; margin: 0 0 6px; color: var(--anima-ink); } #device-wrapper .pedido-dish-desc { font-size: 0.9rem; color: var(--anima-muted); margin: 0 0 12px; line-height: 1.45; flex: 1; } #device-wrapper .pedido-dish-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; } #device-wrapper .pedido-dish-actions { margin-top: auto; } #device-wrapper .pedido-add-btn { width: 100%; border: 1px solid var(--anima-ink); background: #fff; color: var(--anima-ink); padding: 10px; border-radius: 999px; cursor: pointer; font-family: var(--anima-sans); font-size: 0.95rem; font-weight: 500; transition: all 0.15s; } #device-wrapper .pedido-add-btn:hover { background: var(--anima-ink); color: var(--anima-cream); } #device-wrapper .pedido-qty-inline { display: flex; align-items: center; justify-content: space-between; background: var(--anima-cream-soft); border: 1px solid var(--anima-line); border-radius: 999px; overflow: hidden; } #device-wrapper .pedido-qty-btn { background: none; border: none; width: 40px; height: 38px; cursor: pointer; color: var(--anima-ink); font-size: 1.1rem; font-weight: 600; transition: background 0.15s; } #device-wrapper .pedido-qty-btn:hover { background: var(--anima-cream-dark); } #device-wrapper .pedido-qty-val { flex: 1; text-align: center; font-size: 1rem; font-weight: 500; } /* Resumen */ #device-wrapper .pedido-resumen { background: #fff; border: 1px solid var(--anima-line); border-radius: 12px; padding: 32px; max-width: 880px; margin: 0 auto; } #device-wrapper .pedido-resumen h2 { font-size: 1.6rem; margin: 0 0 6px; } #device-wrapper .pedido-resumen-lead { color: var(--anima-muted); margin: 0 0 28px; } #device-wrapper .pedido-resumen-day { border-top: 1px solid var(--anima-line); padding: 18px 0; } #device-wrapper .pedido-resumen-day:last-of-type { border-bottom: 1px solid var(--anima-line); } #device-wrapper .pedido-resumen-day--empty { color: var(--anima-muted); } #device-wrapper .pedido-resumen-day-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } #device-wrapper .pedido-resumen-day h3 { font-size: 1.05rem; margin: 0; text-transform: capitalize; color: var(--anima-ink); font-family: var(--anima-serif); font-weight: 500; } #device-wrapper .pedido-resumen-edit { background: none; border: none; color: var(--pedido-accent); cursor: pointer; font-size: 0.9rem; text-decoration: underline; font-family: var(--anima-sans); } #device-wrapper .pedido-resumen-items { list-style: none; margin: 0; padding: 0; } #device-wrapper .pedido-resumen-items li { padding: 4px 0; color: var(--anima-ink-soft); font-size: 0.95rem; } #device-wrapper .pedido-resumen-qty { display: inline-block; background: var(--anima-cream-dark); color: var(--anima-ink); padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; margin-right: 6px; min-width: 32px; text-align: center; } #device-wrapper .pedido-resumen-cta { margin-top: 28px; text-align: center; } #device-wrapper .pedido-confirm-btn { padding: 14px 40px; font-size: 1rem; } /* Bottom bar fixa */ #device-wrapper .pedido-bottombar { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--anima-line); padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 30; box-shadow: 0 -4px 20px rgba(0,0,0,0.04); } #device-wrapper .pedido-bottombar-info { color: var(--anima-ink-soft); font-size: 0.95rem; } #device-wrapper .pedido-bottombar-actions { display: flex; gap: 10px; } @media (max-width: 720px) { #device-wrapper .pedido-app { padding: 20px 16px 140px; } #device-wrapper .pedido-day-tab { min-width: 90px; padding: 10px 8px; } #device-wrapper .pedido-day-tab-name { font-size: 0.95rem; } #device-wrapper .pedido-step-label { display: none; } #device-wrapper .pedido-grid { grid-template-columns: 1fr; } #device-wrapper .pedido-bottombar { flex-direction: column; gap: 10px; padding: 10px 16px; } } /* ========================================================= PEDIDO antic — selector setmanal (deprecat, mantingut per compatibilitat) ========================================================= */ #device-wrapper .pedido-page { background: var(--anima-cream); min-height: 100vh; padding: 40px 20px 80px; } #device-wrapper .pedido-header { max-width: 1320px; margin: 0 auto 32px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; } #device-wrapper .pedido-header h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 0 0 4px; } #device-wrapper .pedido-header p { margin: 0; color: var(--anima-muted); } #device-wrapper .pedido-deadline { background: var(--anima-cream-dark); padding: 10px 16px; border-radius: 999px; font-size: 0.88rem; color: var(--anima-ink-soft); border: 1px solid var(--anima-line); } #device-wrapper .pedido-deadline.urgent { background: #fde7d8; color: #8a4a18; border-color: #f0c4a0; } #device-wrapper .pedido-deadline.closed { background: #e8d8d4; color: #7a2a1a; border-color: #d6b6b0; } #device-wrapper .pedido-week { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } #device-wrapper .pedido-day { background: #fff; border: 1px solid var(--anima-line); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } #device-wrapper .pedido-day-head { padding: 16px 18px; border-bottom: 1px solid var(--anima-line); background: var(--anima-cream-soft); } #device-wrapper .pedido-day-name { font-family: var(--anima-serif); font-size: 1.2rem; font-weight: 500; color: var(--anima-ink); text-transform: capitalize; } #device-wrapper .pedido-day-date { font-size: 0.85rem; color: var(--anima-muted); } #device-wrapper .pedido-day-body { padding: 14px 14px 18px; flex: 1; } #device-wrapper .pedido-course { margin-bottom: 18px; } #device-wrapper .pedido-course:last-child { margin-bottom: 0; } #device-wrapper .pedido-course-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--anima-green-mid); margin-bottom: 8px; font-weight: 600; } #device-wrapper .pedido-dish { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--anima-line); gap: 8px; } #device-wrapper .pedido-dish:last-child { border-bottom: none; } #device-wrapper .pedido-dish-info { flex: 1; min-width: 0; } #device-wrapper .pedido-dish-name { font-size: 0.92rem; font-weight: 500; color: var(--anima-ink); line-height: 1.3; margin-bottom: 2px; } #device-wrapper .pedido-dish-tags { display: flex; gap: 4px; flex-wrap: wrap; } #device-wrapper .pedido-dish-tags .anima-badge { font-size: 0.62rem; padding: 1px 6px; } #device-wrapper .pedido-qty { display: inline-flex; align-items: center; background: var(--anima-cream-soft); border: 1px solid var(--anima-line); border-radius: 999px; overflow: hidden; } #device-wrapper .pedido-qty button { background: none; border: none; width: 26px; height: 26px; cursor: pointer; color: var(--anima-ink); font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } #device-wrapper .pedido-qty button:hover { background: var(--anima-cream-dark); } #device-wrapper .pedido-qty button:disabled { opacity: 0.35; cursor: not-allowed; } #device-wrapper .pedido-qty input { width: 32px; border: none; background: transparent; text-align: center; font-size: 0.92rem; font-weight: 500; color: var(--anima-ink); -moz-appearance: textfield; } #device-wrapper .pedido-qty input::-webkit-outer-spin-button, #device-wrapper .pedido-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #device-wrapper .pedido-day--closed { opacity: 0.55; pointer-events: none; } #device-wrapper .pedido-day--closed .pedido-day-head { background: var(--anima-cream-dark); } #device-wrapper .pedido-summary { max-width: 1320px; margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 26px; background: #fff; border: 1px solid var(--anima-line); border-radius: 10px; flex-wrap: wrap; } #device-wrapper .pedido-summary-info { color: var(--anima-ink-soft); } #device-wrapper .pedido-summary-info strong { color: var(--anima-ink); font-weight: 600; } #device-wrapper .pedido-summary-actions { display: flex; gap: 10px; } /* ========================================================= MI CUENTA ========================================================= */ #device-wrapper .anima-account { background: var(--anima-cream); min-height: 70vh; padding: 60px 24px; } #device-wrapper .anima-account-grid { max-width: var(--anima-container); margin: 0 auto; display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; } #device-wrapper .anima-account-side { background: #fff; border: 1px solid var(--anima-line); border-radius: 8px; padding: 28px; } #device-wrapper .anima-account-side h3 { font-size: 1.3rem; margin-bottom: 8px; } #device-wrapper .anima-account-side p { margin: 0 0 6px; font-size: 0.92rem; color: var(--anima-muted); } #device-wrapper .anima-account-side .anima-btn { margin-top: 18px; width: 100%; } #device-wrapper .anima-account-orders { background: #fff; border: 1px solid var(--anima-line); border-radius: 8px; padding: 32px; } #device-wrapper .anima-order-row { padding: 18px 0; border-bottom: 1px solid var(--anima-line); display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: center; } #device-wrapper .anima-order-row:last-child { border-bottom: none; } #device-wrapper .anima-order-date { font-family: var(--anima-serif); font-size: 1.05rem; color: var(--anima-ink); } #device-wrapper .anima-order-summary { font-size: 0.92rem; color: var(--anima-muted); } #device-wrapper .anima-order-status { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: var(--anima-cream-dark); color: var(--anima-ink-soft); } #device-wrapper .anima-order-status.submitted { background: #d8e6c0; color: #38501a; } #device-wrapper .anima-order-status.pending { background: #f3dcc7; color: #8a4a18; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1024px) { #device-wrapper .anima-hero-inner, #device-wrapper .anima-split { grid-template-columns: 1fr; gap: 40px; } #device-wrapper .anima-split--reverse > *:first-child { order: 0; } #device-wrapper .anima-cards, #device-wrapper .anima-plates { grid-template-columns: repeat(2, 1fr); } #device-wrapper .anima-steps, #device-wrapper .anima-stats { grid-template-columns: repeat(2, 1fr); } #device-wrapper .anima-footer-inner { grid-template-columns: 1fr 1fr; } #device-wrapper .pedido-week { grid-template-columns: repeat(2, 1fr); } #device-wrapper .anima-account-grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { #device-wrapper .anima-header-nav { display: none; } #device-wrapper .anima-header-mobile-toggle { display: inline-flex; } #device-wrapper .anima-header-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--anima-cream-soft); border-bottom: 1px solid var(--anima-line); padding: 16px 24px; } #device-wrapper .anima-header-nav.is-open ul { flex-direction: column; gap: 14px; } #device-wrapper .anima-section { padding: 60px 20px; } #device-wrapper .anima-hero { padding: 60px 20px; } #device-wrapper .anima-cards, #device-wrapper .anima-plates, #device-wrapper .anima-steps, #device-wrapper .anima-stats { grid-template-columns: 1fr; } #device-wrapper .anima-footer-inner { grid-template-columns: 1fr; gap: 28px; } #device-wrapper .pedido-week { grid-template-columns: 1fr; } } /* Limpiar restos LATAULA / wsf-home si aún quedan */ #device-wrapper .wsf-home { display: none; } svg.angledown { width:10px;padding:15px 0px;margin-left:8px;fill:#aaa } .icon-round { display: inline-block; font-size: 24px; /* Adjust icon size */ width: 50px; /* Make it a square */ height: 50px; line-height: 50px; /* Center the icon vertically */ text-align: center; /* Center the icon horizontally */ border: 1px solid #fff; /* Add the border with desired color */ border-radius: 50%; /* Make it round */ color: #fff; /* Icon color */ transition: all 0.3s ease; /* Add a smooth hover effect */ padding:12px 0px; margin:10px 2px; } /* .iconcolor1 { filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(400%) hue-rotate(120deg) brightness(100%) contrast(90%); } .iconcolor2 { filter: brightness(0) saturate(100%) invert(71%) sepia(43%) saturate(410%) hue-rotate(130deg) brightness(97%) contrast(91%); } .iconcolor3 { filter: brightness(0) saturate(100%) invert(72%) sepia(36%) saturate(420%) hue-rotate(145deg) brightness(96%) contrast(91%); } .iconcolor4 { filter: brightness(0) saturate(100%) invert(72%) sepia(28%) saturate(450%) hue-rotate(160deg) brightness(94%) contrast(91%); } .iconcolor5 { filter: brightness(0) saturate(100%) invert(72%) sepia(24%) saturate(480%) hue-rotate(180deg) brightness(92%) contrast(91%); } .iconcolor6 { filter: brightness(0) saturate(100%) invert(74%) sepia(19%) saturate(520%) hue-rotate(195deg) brightness(94%) contrast(93%); } .iconcolor7 { filter: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(550%) hue-rotate(210deg) brightness(95%) contrast(94%); } .iconcolor8 { filter: brightness(0) saturate(100%) invert(77%) sepia(13%) saturate(580%) hue-rotate(215deg) brightness(96%) contrast(94%); } .iconcolor9 { filter: brightness(0) saturate(100%) invert(78%) sepia(13%) saturate(600%) hue-rotate(220deg) brightness(97%) contrast(95%); } */ .iconcolor1,.iconcolor2,.iconcolor3,.iconcolor4,.iconcolor5,.iconcolor6,.iconcolor7,.iconcolor8,.iconcolor9 { filter:brightness(0) saturate(100%) invert(20%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); } /* Dark mode styles for Font Awesome icons */ .dark .fa, .dark [class^="fa-"], .dark [class*=" fa-"] { color: #c7c7c7 !important; } .dark .icon-round { color: #c7c7c7 !important; border-color: #c7c7c7 !important; } div#languageDropdownContainer_mobile button { padding-top:12px !important; } div#languageDropdownContainer_mobile button, div#languageDropdownContainer button { vertical-align:top;padding-top:3px; } div#languageDropdownContainer_mobile svg.angledown, div#languageDropdownContainer svg.angledown { padding:0px !important; } .dark #languageDropdownContainer_mobile button, .dark #languageDropdownContainer button{color:#111} .light #languageDropdownContainer_mobile button, .light #languageDropdownContainer button{color:#212529 !important} #languageDropdown { right: -16px; top:32px;} #languageDropdownContainer_mobile, #languageDropdownContainer { float:right;padding-top:0px; } .dropdown-content { display: none; position: absolute; background- min-width: 80px; z-index: 999999999; } .dropdown button { } .dropdown-content { opacity:0.9; border-radius:20px; } .dropdown-content a { background:none; } .dropdown-content a,.dropdown-content a:hover { border-radius:0px !important; } .dropdown-content a:hover:first-child { border-radius:20px 20px 0px 0px !important; } .dropdown-content a:hover:last-child { border-radius:0px 0px 20px 20px !important; } .dropdown.active .dropdown-content { display: block; } .dropdown-content a { padding: 12px 16px; text-align:left; display:block; } .dropdown-content a:hover { background- } /* Hide language selector for all devices */ #languageDropdownContainer, #languageDropdownContainer_mobile, div#languageDropdownContainer, div#languageDropdownContainer_mobile, #menu_mobile #languageDropdownContainer_mobile, #device-wrapper #languageDropdownContainer, #device-wrapper #languageDropdownContainer_mobile, #device-wrapper #menu_mobile #languageDropdownContainer_mobile { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; overflow: hidden !important; } body.clients #page { min-height:600px !important; } #clients { padding: 100px 0px; /* height: 100vh; */ } #clients .container { display: flex; height: 500px; } #clients .half { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; } #clients .left { background: linear-gradient(135deg, #3ec5a3, #3ca9b0); } #clients .left h2, #clients .right h2 { display: flex; align-items: center; margin-bottom: 20px; } #clients .left h2::before { margin-right: 10px; } #clients .right h2::before { margin-right: 10px; } #clients input[type="text"], #clients input[type="password"] { width: 100%; padding: 12px 25px; border-radius: 30px; border: none; margin: 10px 0; } #clients .button-primary { padding: 12px 24px; border-radius: 30px; background: #7ad9c5 !important; border: none; cursor: pointer; margin-top: 20px; text-align: center; text-decoration: none; display: inline-block; } #clients .button-primary:hover { background: #347c7e !important; } #clients .left .button-primary { background-color: #47c1a0; } #clients a { text-decoration: underline; } #clients .right a { } #clients .right { background-color: #ffffff; border: 1px solid #e0e0e0; margin-left: 20px; } } input::-webkit-input-placeholder { } input::-moz-placeholder { opacity: 1; } input:-ms-input-placeholder { } input::placeholder { } .icon_login { width:70px; padding-right:10px; } @media screen and (max-width: 768px) { #clients .container { flex-direction: column; height: auto; } #clients .half { padding: 30px 20px; } #clients .left, #clients .right { margin: 10px 0; } #clients h2 { } #clients input { } #clients .button-primary { padding: 10px 20px; } } div#menu_mobile .icon-bar { background-color: var(--text-color, #000); } div#menu_mobile { top:0px; position: relative !important; display: none; z-index: 9999; } /* Assegurar que menu_mobile mai es vegi en desktop */ @media (min-width: 901px) { #menu_mobile { display: none !important; } } #menu_desktop { position:relative; left:0; padding-top: 30px; display: block; } div#menu_options { display:block;float:right;text-align:right;padding-top: 35px; } /* Estils per defecte dels menús - gestionats per JavaScript */ #device-wrapper body.menu-mobile-active #menu_desktop { display: none !important; } #device-wrapper body.menu-mobile-active #menu_mobile, body.menu-mobile-active #menu_mobile { display: block !important; } #device-wrapper body.menu-desktop-active #menu_desktop { display: block !important; } #device-wrapper body.menu-desktop-active #menu_mobile, body.menu-desktop-active #menu_mobile { display: none !important; } #menu_desktop ul.menu { float:right; cursor:pointer; margin:0 11px 0 0; } #menu_desktop li.item a span { padding:8px 0; height:auto; letter-spacing:0px; } #menu_desktop li.item.selected a span { font-weight:normal} #menu_desktop li.item.level1 { margin: 0 20px; } #menu_desktop a.level1, #menu_desktop span.level1 { padding: 0; } #menu_desktop li.item { float: left; margin: 0; list-style: none; padding: 0; } #menu_desktop li { position: relative; z-index: 15; margin: 0; text-align: left; } #menu_desktop li.item a { text-decoration: none; cursor:pointer; } #menu_desktop a.level1 span.bg, #menu_desktop span.level1 span.bg { white-space: nowrap; overflow: visible; display: block; } #menu_desktop li.level1.item a span,#search_button i {} #menu_desktop li.level2.item a span {} #menu_desktop ul { padding:0; list-style:none; overflow:visible;} #page { position:relative; min-height:1200px; /* margin-top:115px;*/ } #device-wrapper ul.menu .submenu { position:fixed; width:100%; left:0px; top:79px; width:100%; max-width:100%; } #device-wrapper .submenu h3, #device-wrapper .submenu h2, #device-wrapper .submenu p {text-align:left } .submenu.container { display: flex; background: linear-gradient(225deg,#579CA6 0,#4CC1A7 100%); border-radius: 0px; padding: 30px; align-items: center; } /* Features Section */ .submenu .features { display: flex; flex-wrap: wrap; flex: 1; gap: 20px; } .submenu .feature { display: flex; align-items: center; width: 45%; gap: 15px; } .submenu .icon { width:30px; max-height:35px; position:relative; top:-13px; } #menu_desktop li.item.selected a span { border-bottom: 4px solid #48baa8 } /* Estils per al disseny estudi - menú simplificat */ .estudi-style #menu_desktop { padding-top: 50px; text-align: right; display: flex; justify-content: flex-end; align-items: center; } .estudi-style #menu_desktop ul.menu { float: right; margin: 0 !important; display: flex; align-items: center; justify-content: flex-end; } .estudi-style #menu_desktop li.item.level1 { margin: 0 0 0 30px; display: inline-block; } .estudi-style #menu_desktop li.item.level1:last-child { margin-right: 20px; } .estudi-style #menu_desktop li.item a span { text-transform: none; letter-spacing: 0; padding: 0; } .estudi-style #menu_desktop li.item.selected a span { border-bottom: 1px solid #000; padding-bottom: 0px; } .estudi-style #menu_desktop li.item a:hover span { } /* Ajustar logo per a l'estil estudi (només quan no estem en mode d'edició) */ .estudi-style div[name="logo"] { padding-top: 15px; } .estudi-style .logo img { max-height: var(--logo-max-height, 50px); height: clamp(30px, 5vw, var(--logo-max-height, 50px)); width: auto; } /* Ocultar elements del menú no necessaris en estil estudi */ .estudi-style #menu_options { display: none !important; } /* Responsivitat per a l'estil estudi */ @media (max-width: 1170px) { .estudi-style #menu_desktop { display: none !important; } .estudi-style #menu_mobile { display: block !important; } } /* Assegurar que el menú mòbil funcioni amb l'estil estudi */ .estudi-style #menu_mobile { padding: 0; margin: 0; margin-top: 15px !important; } .estudi-style #menu_mobile .navbar-toggler { border: none; padding: 4px 8px; } .estudi-style #menu_mobile .navbar-toggler:focus { box-shadow: none; } /* Ocultar selector d'idiomes en el menú mòbil per a l'estil estudi */ .estudi-style #menu_mobile .group_buttons > div:not(.menuicon) { display: none; } /* Restablir estils originals del menú quan estem en mode d'edició */ #shopping_cart { float: right !important; padding: 5px 0 0 15px; } #shopping_cart a { } .dropdown button { background: 0; border: 0; padding: 5px; } #mySidebar span {} .navbar-toggle .icon-bar { display: block; width: 28px; height: 2px; border-radius: 1px; transition: 0.4s; } .navbar-toggle.close #bar1 { transform: rotate(-45deg) translate(-5px, 6px); } .navbar-toggle.close #bar2 { opacity: 0; } .navbar-toggle.close #bar3 { transform: rotate(45deg) translate(-5px, -6px); } div#menu_mobile { display: none; position: relative; z-index: 99999; width: auto; right: 0; } div.group_buttons { position: relative; z-index: 999999; top: 0px; right: 10px; float: right; display: flex; gap: 1rem; justify-content: flex-start; align-items: center; flex-direction: row-reverse; } /* Aplicar margin-top específic a .menuicon */ .menuicon { margin-top: 15px !important; display: flex; align-items: center; position: relative; } div#menu_mobile .navbar-toggle.close .icon-bar { } .navbar-toggle:focus { outline: none; } .navbar .navbar-toggle { top: 10px; } .navbar-toggle { cursor: pointer; position: relative; float: right; margin: 7px 10px 8px 0px; padding: 0px; background: transparent !important; background-color: transparent !important; background-image: none; border: 1px solid transparent !important; border-radius: 4px; display: flex; flex-direction: column; box-shadow: none !important; } .navbar-toggle .icon-bar + .icon-bar { margin-top: 6px; } /* Prevenir que el botó del menú mòbil apliqui els estils generals de button:hover */ .navbar-toggle:hover, .navbar-toggle.openbn:hover, button.navbar-toggle:hover, .menuicon button.navbar-toggle:hover, #menu_mobile button.navbar-toggle:hover, #menu_mobile .navbar-toggle:hover { background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; } /* També prevenir canvis en active i focus */ .navbar-toggle:active, .navbar-toggle:focus, button.navbar-toggle:active, button.navbar-toggle:focus { background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; outline: none !important; } /* sidebar */ .sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9998; background: var(--background-color, #fff); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 0; margin: 0; overflow-y: auto; } .sidebar.open { opacity: 1; visibility: visible; } #device-wrapper .sidebar, #device-wrapper > .sidebar, body > .sidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9998; background: var(--background-color, #fff); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } #device-wrapper .sidebar.open, #device-wrapper > .sidebar.open, body > .sidebar.open { opacity: 1; visibility: visible; } body.mobile-menu-open .sidebar.open, body.menu-mobile-active .sidebar.open { display: flex !important; visibility: visible !important; opacity: 1 !important; } body.mobile-menu-open .sidebar { display: flex; } button.close { opacity:1 !important } .sidebar a { text-align: center; padding: 12px 0; text-decoration: none; display: block; transition: opacity 0.2s; color: var(--text-color, #000); font-family: inherit; font-size: 2.5rem; font-weight: normal; letter-spacing: 0; text-transform: none; line-height: 2; } .sidebar a.level1 { padding: 12px 0; } .sidebar a:hover { opacity: 0.6; } #mySidebar a, #mySidebar a span, #mySidebar a.level1, #mySidebar a.level2, .sidebar a span, .sidebar a.level1 span, .sidebar a.level2 span { color: var(--text-color, #000); } #mySidebar a:hover, #mySidebar a:hover span, .sidebar a:hover span { } .sidebar .closebtn { position: absolute; top: 0; right: 25px; margin-left: 50px; } @media (max-width: 900px) { .submenu .container { flex-direction: column; text-align: center; } .submenu .features { flex-direction: column; } .submenu .feature { width: 100%; } } /* Media query comentada - ara la visibilitat dels menús es gestiona amb JavaScript basat en l'amplada del device-wrapper @media (max-width: 1170px) { div#menu_desktop, .desktop { display: none !important; } div#menu_mobile { display: block !important; } } */ /* Additional menu styles from style2.css */ /* Navigation styles */ .nav { display:flex; align-items:center; justify-content:space-between; } .nav-item { margin:0 10px; } .nav-link { text-decoration:none; padding:8px 12px; border-radius:4px; transition:all 0.3s ease; } .nav-link:hover { background:#f0f0f0; } /* Dropdown menus */ .dropdown { position:relative; display:inline-block; } .dropdown-content { display:none; position:absolute; background:#fff; min-width:160px; box-shadow:0 8px 16px rgba(0,0,0,0.2); z-index:1; border-radius:4px; overflow:hidden; } .dropdown:hover .dropdown-content { display:block; } .dropdown-content a { padding:12px 16px; text-decoration:none; display:block; } .dropdown-content a:hover { background:#f1f1f1; } /* Breadcrumb navigation */ .breadcrumb { display:flex; list-style:none; padding:0; margin:0; } .breadcrumb li { margin-right:8px; } .breadcrumb li:after { content:'/'; margin-left:8px; } .breadcrumb li:last-child:after { content:''; } .breadcrumb a { text-decoration:none; } .breadcrumb a:hover { text-decoration:underline; } /* Modal and popup styles */ /* Modal base styles */ .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background- } .modal-content { background- margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; max-width: 600px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #ddd; } .modal-title { margin: 0; } .modal-close { float: right; cursor: pointer; border: none; background: none; } .modal-close:hover, .modal-close:focus { text-decoration: none; } .modal-body { padding: 15px 0; } .modal-footer { padding-top: 15px; border-top: 1px solid #ddd; text-align: right; } /* Modal animations */ .modal.show { display: block; animation: fadeIn 0.3s; } .modal.hide { animation: fadeOut 0.3s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } /* Popup styles */ .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); z-index: 1001; max-width: 90vw; max-height: 90vh; overflow: auto; } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; } /* Tooltip styles */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background- text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border- } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } /* Alert styles */ .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-success { background- border- } .alert-info { background- border- } .alert-warning { background- border- } .alert-danger { background- border- } .alert-dismissible { padding-right: 35px; } .alert-dismissible .close { position: relative; top: -2px; right: -21px; } /* Notification styles */ .notification { position: fixed; top: 20px; right: 20px; padding: 15px 20px; background: #333; border-radius: 4px; z-index: 1002; max-width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } .notification.success { background: #28a745; } .notification.error { background: #dc3545; } .notification.warning { background: #ffc107; } .notification.info { background: #17a2b8; } /* Responsive modal */ @media (max-width: 768px) { .modal-content { width: 95%; margin: 10% auto; } .popup { width: 95%; max-width: none; } .notification { right: 10px; left: 10px; max-width: none; } }/* Eliminar outline de tots els botons */ #device-wrapper button, #device-wrapper button:focus, #device-wrapper button:active, #device-wrapper button:hover, #device-wrapper .btn, #device-wrapper .btn:focus, #device-wrapper .btn:active, #device-wrapper .btn:hover, #device-wrapper input[type="button"], #device-wrapper input[type="button"]:focus, #device-wrapper input[type="button"]:active, #device-wrapper input[type="button"]:hover, #device-wrapper input[type="submit"], #device-wrapper input[type="submit"]:focus, #device-wrapper input[type="submit"]:active, #device-wrapper input[type="submit"]:hover, #device-wrapper input[type="reset"], #device-wrapper input[type="reset"]:focus, #device-wrapper input[type="reset"]:active, #device-wrapper input[type="reset"]:hover, #device-wrapper [role="button"], #device-wrapper [role="button"]:focus, #device-wrapper [role="button"]:active, #device-wrapper [role="button"]:hover, #device-wrapper .whitebut, #device-wrapper .whitebut:focus, #device-wrapper .whitebut:active, #device-wrapper .whitebut:hover, #device-wrapper .whitebut2, #device-wrapper .whitebut2:focus, #device-wrapper .whitebut2:active, #device-wrapper .whitebut2:hover, #device-wrapper .specialbut, #device-wrapper .specialbut:focus, #device-wrapper .specialbut:active, #device-wrapper .specialbut:hover, #device-wrapper .roundbut, #device-wrapper .roundbut:focus, #device-wrapper .roundbut:active, #device-wrapper .roundbut:hover, #device-wrapper .roundbut2, #device-wrapper .roundbut2:focus, #device-wrapper .roundbut2:active, #device-wrapper .roundbut2:hover, #device-wrapper .alt, #device-wrapper .alt:focus, #device-wrapper .alt:active, #device-wrapper .alt:hover, #device-wrapper .but, #device-wrapper .but:focus, #device-wrapper .but:active, #device-wrapper .but:hover, #device-wrapper .openbtn, #device-wrapper .openbtn:focus, #device-wrapper .openbtn:active, #device-wrapper .openbtn:hover { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; box-shadow: none !important; } /* Eliminar outline específic de Bootstrap */ #device-wrapper .button-primary:focus, #device-wrapper .button-secondary:focus, #device-wrapper .btn-success:focus, #device-wrapper .btn-danger:focus, #device-wrapper .btn-warning:focus, #device-wrapper .btn-info:focus, #device-wrapper .btn-light:focus, #device-wrapper .btn-dark:focus, #device-wrapper .btn-outline-primary:focus, #device-wrapper .btn-outline-secondary:focus, #device-wrapper .btn-outline-success:focus, #device-wrapper .btn-outline-danger:focus, #device-wrapper .btn-outline-warning:focus, #device-wrapper .btn-outline-info:focus, #device-wrapper .btn-outline-light:focus, #device-wrapper .btn-outline-dark:focus { outline: none !important; box-shadow: none !important; } /* Eliminar focus ring de webkit */ #device-wrapper button:focus:not(:focus-visible), #device-wrapper .btn:focus:not(:focus-visible), #device-wrapper input[type="button"]:focus:not(:focus-visible), #device-wrapper input[type="submit"]:focus:not(:focus-visible), #device-wrapper input[type="reset"]:focus:not(:focus-visible) { outline: 0 !important; } /* Eliminar inner focus de Firefox */ #device-wrapper button::-moz-focus-inner, #device-wrapper .btn::-moz-focus-inner, #device-wrapper input[type="button"]::-moz-focus-inner, #device-wrapper input[type="submit"]::-moz-focus-inner, #device-wrapper input[type="reset"]::-moz-focus-inner { border: 0 !important; padding: 0 !important; outline: none !important; }/* Page-specific styles */ /* Home page styles */ body.home { background: #fff; } body.home .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } body.home .hero { text-align: center; padding: 80px 0; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } body.home .hero h1 { margin-bottom: 20px; } body.home .hero p { margin-bottom: 30px; opacity: 0.9; } body.home .features { padding: 80px 0; background: #f8f9fa; } body.home .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-top: 50px; } body.home .feature-card { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; } body.home .feature-card:hover { transform: translateY(-5px); } body.home .feature-icon { margin-bottom: 20px; } body.home .feature-title { margin-bottom: 15px; } body.home .feature-description { line-height: 1.6; } /* Presentation page styles */ body.presentacio { background: #f5f5f5; } body.presentacio .header { background: linear-gradient(45deg, #2c3e50, #3498db); padding: 60px 0; text-align: center; } body.presentacio .content { max-width: 800px; margin: 0 auto; padding: 40px 20px; background: white; border-radius: 8px; margin-top: -30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } body.presentacio .section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #eee; } body.presentacio .section:last-child { border-bottom: none; } body.presentacio .section-title { margin-bottom: 20px; position: relative; } body.presentacio .section-title:after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 3px; background: #3498db; } /* Contact page styles */ body.contact { background: #f8f9fa; } body.contact .contact-header { background: #343a40; padding: 60px 0; text-align: center; } body.contact .contact-content { max-width: 1000px; margin: 0 auto; padding: 60px 20px; } body.contact .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 40px; } body.contact .contact-info { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } body.contact .contact-form { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } body.contact .info-item { display: flex; align-items: center; margin-bottom: 20px; } body.contact .info-icon { margin-right: 15px; width: 30px; } body.contact .info-text { } /* About page styles */ body.about { background: white; } body.about .about-hero { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/images/about-bg.jpg'); background-size: cover; background-position: center; padding: 120px 0; text-align: center; } body.about .about-content { max-width: 800px; margin: 0 auto; padding: 80px 20px; } body.about .about-section { margin-bottom: 60px; } body.about .about-title { margin-bottom: 30px; text-align: center; } body.about .about-text { line-height: 1.8; margin-bottom: 20px; } body.about .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px; } body.about .team-member { text-align: center; background: #f8f9fa; padding: 30px; border-radius: 8px; } body.about .member-photo { width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px; background: #ddd; background-size: cover; background-position: center; } body.about .member-name { margin-bottom: 10px; } body.about .member-role { margin-bottom: 15px; } body.about .member-bio { line-height: 1.6; } /* Blog page styles */ body.blog { background: #f8f9fa; } body.blog .blog-header { background: #fff; padding: 40px 0; border-bottom: 1px solid #eee; } body.blog .blog-title { text-align: center; margin-bottom: 10px; } body.blog .blog-subtitle { text-align: center; } body.blog .blog-content { max-width: 1200px; margin: 0 auto; padding: 60px 20px; } body.blog .blog-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; } body.blog .blog-posts { display: grid; gap: 40px; } body.blog .blog-post { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; } body.blog .blog-post:hover { transform: translateY(-5px); } body.blog .post-image { height: 200px; background: #ddd; background-size: cover; background-position: center; } body.blog .post-content { padding: 30px; } body.blog .post-title { margin-bottom: 15px; } body.blog .post-title a { text-decoration: none; } body.blog .post-title a:hover { } body.blog .post-meta { margin-bottom: 15px; } body.blog .post-excerpt { line-height: 1.6; margin-bottom: 20px; } body.blog .read-more { text-decoration: none; } body.blog .read-more:hover { text-decoration: underline; } /* Blog post categories */ body.blog .blog-post-categories { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 8px; } body.blog .category-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; text-decoration: none; transition: opacity 0.3s ease; } body.blog .category-tag:hover { opacity: 0.8; } body.blog .blog-sidebar { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: fit-content; } body.blog .sidebar-widget { margin-bottom: 40px; } body.blog .sidebar-widget:last-child { margin-bottom: 0; } body.blog .widget-title { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #007bff; } body.blog .widget-content ul { list-style: none; padding: 0; } body.blog .widget-content li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; } body.blog .widget-content li:last-child { border-bottom: none; } body.blog .widget-content a { text-decoration: none; } body.blog .widget-content a:hover { } /* Tipus de ressaltat */ u.ws-classic { text-decoration: underline; text-decoration-color: #000; text-underline-offset: 0.15em; text-decoration-thickness: 2px; } .ws-curve { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0em; } .ws-circle { text-decoration: none; position: relative; display: inline-block; isolation: isolate; } .ws-circle svg.ws-circle-shape { position: absolute; top: -0.2em; left: -0.15em; width: calc(100% + 0.3em); height: calc(100% + 0.4em); pointer-events: none; overflow: visible; z-index: 0; } .ws-circle svg.ws-circle-shape path { fill: none; stroke: var(--accent-color, #ffff7f); stroke-width: 5px; stroke-linecap: square; stroke-linejoin: bevel; vector-effect: non-scaling-stroke; } u:not([class]) { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 218 12' preserveAspectRatio='none'%3E%3Cpath d='M 0,10 c 27,-2 55,-4 109,-4.5 c 54,-0.5 83,0 109,0.2 c 5,0.05 -4,0.6 -4.4,0.7' fill='none' stroke='%23ffff7f' stroke-width='4' stroke-linecap='square' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-position: bottom; background-repeat: no-repeat; background-size: 100% 0.2em; padding-bottom: 0.15em; } /* ======================== */ /* ESTUDI PAGE */ /* ======================== */ .estudi-page { width: 100%; } .estudi-container { max-width: 1200px; margin: 0 auto; padding: 0 max(20px, 4vw); } /* Hero */ .estudi-hero { padding: 80px 0 40px; text-align: left; } .estudi-hero-title { font-weight: 500; line-height: 1.1; margin-bottom: 30px; } .estudi-underline { position: relative; display: inline; --underline-color: var(--accent-color); --underline-width: 0.2em; } .estudi-underline svg.underline-curve { position: absolute; left: 0; bottom: -0.1em; width: 100%; height: 0.4em; overflow: visible; pointer-events: none; } .estudi-underline svg.underline-curve path { fill: none; stroke: var(--underline-color); stroke-width: var(--underline-width); stroke-linecap: square; stroke-linejoin: bevel; stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawUnderline 0.8s ease forwards; } @keyframes drawUnderline { to { stroke-dashoffset: 0; } } .estudi-hero-desc { line-height: 1.7; max-width: 800px; margin-bottom: 40px; color: var(--text-color-secondary); } .estudi-hero-nav { display: flex; flex-direction: row; gap: 12px; flex-wrap: nowrap; } .estudi-hero-nav .button { flex: 1 1 0; min-width: 0 !important; white-space: nowrap; } .estudi-anchor-btn { display: inline-block; text-decoration: none !important; cursor: pointer; padding: 10px 28px !important; } /* Section Title */ .estudi-section-title { margin-bottom: 40px; } /* Filosofia / 4 Potes */ .estudi-filosofia { padding: 80px 0; background-color: var(--background-color-secondary); } .estudi-filosofia-layout { display: flex; gap: 60px; align-items: flex-start; } .estudi-filosofia-left { flex: 0 0 30%; } .estudi-filosofia-img img { width: 100%; height: auto; border-radius: 8px; margin-top: 20px; } .estudi-filosofia-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .estudi-filosofia-item { padding: 20px 0; } .estudi-item-num { font-family: var(--h1-font-family); font-weight: 600; display: block; margin-bottom: 4px; } .estudi-filosofia-item h3 { margin-bottom: 8px; } .estudi-filosofia-item p { line-height: 1.6; color: var(--text-color-secondary); } /* Mètode */ .estudi-metode { padding: 80px 0; } .estudi-metode-layout { display: flex; gap: 60px; align-items: flex-start; } .estudi-metode-left { flex: 0 0 30%; } .estudi-metode-right { flex: 1; } .estudi-metode-intro { line-height: 1.7; margin-bottom: 16px; color: var(--text-color-secondary); } .estudi-metode-list { margin-top: 30px; } .estudi-metode-item { border-bottom: 1px solid #000; } .estudi-metode-item:first-child { border-top: 1px solid #000; } .estudi-metode-header { display: flex; align-items: center; padding: 20px 0; cursor: pointer; gap: 16px; user-select: none; } .estudi-metode-header:hover { opacity: 0.7; } .estudi-step-num { font-family: var(--h1-font-family); font-weight: 600; opacity: 0.4; min-width: 28px; } .estudi-metode-header h3 { font-weight: 500; margin: 0; flex: 1; } .estudi-metode-toggle { font-size: 2rem; font-weight: 300; transition: transform 0.3s ease; line-height: 1; } .estudi-metode-item.open .estudi-metode-toggle { transform: none; } .estudi-metode-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; padding: 0 0 0 44px; } .estudi-metode-item.open .estudi-metode-body { max-height: 300px; padding: 0 0 24px 44px; } .estudi-metode-body p { line-height: 1.7; color: var(--text-color-secondary); } .estudi-metode-body strong { font-weight: 600; } /* Equip */ .estudi-equip { padding: 80px 0; background-color: var(--background-color-secondary); } .estudi-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 40px; margin-bottom: 50px; } .estudi-team-member { text-align: center; } .estudi-team-photo { width: 90%; max-width: 280px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; } .estudi-team-photo img { width: 100%; height: 100%; object-fit: cover; } .estudi-team-member h3 { font-weight: 600; margin-bottom: 4px; } .estudi-team-member p { color: var(--text-color-secondary); } .estudi-team-desc { max-width: 800px; margin: 0 auto; text-align: center; } .estudi-team-desc p { line-height: 1.7; color: var(--text-color-secondary); } /* Cooperativa */ .estudi-cooperativa { padding: 80px 0; } .estudi-coop-intro { line-height: 1.7; max-width: 700px; margin-bottom: 40px; color: var(--text-color-secondary); } .estudi-coop-logos { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; margin-bottom: 50px; } .estudi-coop-logos img { height: 50px; width: auto; object-fit: contain; filter: grayscale(0.3); transition: filter 0.3s ease; } .estudi-coop-logos img:hover { filter: grayscale(0); } .estudi-coop-details { display: flex; gap: 60px; flex-wrap: wrap; } .estudi-coop-block h3 { font-weight: 600; margin-bottom: 12px; } .estudi-coop-block p { line-height: 1.6; color: var(--text-color-secondary); margin-bottom: 4px; } /* Testimonials */ .estudi-testimonials { padding: 100px 0; background-color: var(--background-color); } .estudi-testimonials-carousel { position: relative; display: flex; align-items: center; gap: 16px; } .estudi-testimonials-track { display: flex; gap: 24px; overflow: hidden; flex: 1; } .estudi-testimonials-track .estudi-testimonial { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--background-color-secondary); border-radius: 0; padding: 40px 30px 30px; transition: transform 0.4s ease; } .estudi-testimonial-prev, .estudi-testimonial-next { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-color); opacity: 0.3; transition: opacity 0.2s; padding: 8px; flex-shrink: 0; } .estudi-testimonial-prev:hover, .estudi-testimonial-next:hover { opacity: 1; } .estudi-testimonial-avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; background: #ddd; } .estudi-testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .estudi-testimonial-quote { font-size: 0.9rem; line-height: 1.7; font-style: italic; color: var(--text-color); margin-bottom: 20px; flex: 1; } .estudi-testimonial-author { margin-bottom: 4px; font-size: 0.85rem; } .estudi-testimonial-author strong { font-weight: 600; } .estudi-testimonial-org { color: var(--text-color); opacity: 0.5; font-size: 0.8rem; } /* Clients */ .estudi-clients { padding: 80px 0; } .estudi-clients-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .estudi-clients-grid img { width: 100%; height: auto; border-radius: 6px; object-fit: cover; aspect-ratio: 4/3; } /* Footer */ .lataula-footer { padding: 60px 0; border-top: 1px solid #e0e0e0; } .lataula-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start; } .lataula-footer .footer-col { display: flex; flex-direction: column; gap: 6px; } .lataula-footer .footer-logo { height: clamp(15px, 2.5vw, 25px); width: auto !important; max-width: 100%; object-fit: contain; } .lataula-footer .footer-address { line-height: 1.6; color: var(--text-color-secondary); } .lataula-footer .footer-col a { color: var(--text-color) !important; transition: opacity 0.2s; display: flex; align-items: center; gap: 8px; } .lataula-footer .footer-col a:hover { opacity: 0.6; } /* Responsive design for pages */ @media (max-width: 1024px) { .estudi-filosofia-layout { flex-direction: column; } .estudi-filosofia-left { flex: none; } .estudi-clients-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .estudi-container, #device-wrapper .estudi-container { padding: 0 20px; } body.home .hero h1 { } body.home .features-grid { grid-template-columns: 1fr; gap: 30px; } body.contact .contact-grid { grid-template-columns: 1fr; gap: 40px; } body.about .team-grid { grid-template-columns: 1fr; } body.blog .blog-grid { grid-template-columns: 1fr; gap: 40px; } body.presentacio .content { margin-top: 0; border-radius: 0; } /* Estudi responsive */ .estudi-metode-layout { flex-direction: column; gap: 20px; } .estudi-metode-left { flex: none; position: static; } .estudi-hero { padding: 50px 0 30px; } .estudi-filosofia, .estudi-metode, .estudi-equip, .estudi-cooperativa, .estudi-testimonials, .estudi-clients { padding: 50px 0; } .estudi-testimonial-prev, .estudi-testimonial-next { display: none; } .estudi-testimonials-track { flex-wrap: wrap; } .estudi-testimonials-track .estudi-testimonial { width: 100% !important; } .estudi-filosofia-left { flex: none; } .estudi-filosofia-grid, #device-wrapper .estudi-filosofia-grid { grid-template-columns: 1fr !important; gap: 20px; } .estudi-team-grid, #device-wrapper .estudi-team-grid { grid-template-columns: 1fr; gap: 30px; } .estudi-team-photo { width: 60%; max-width: 160px; } .estudi-coop-logos { gap: 20px; } .estudi-coop-logos img { height: 35px; } .estudi-coop-details { flex-direction: column; gap: 30px; } .estudi-hero-nav, #device-wrapper .estudi-hero-nav { flex-direction: column; gap: 8px; flex-wrap: wrap; } .estudi-hero-nav .button, #device-wrapper .estudi-hero-nav .button { flex: none; width: 100%; white-space: normal; margin: 0 !important; } .estudi-anchor-btn { padding: 8px 20px !important; } .estudi-clients-grid { grid-template-columns: 1fr; } .lataula-footer .footer-grid, #device-wrapper .lataula-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .lataula-footer .footer-col-logo { grid-column: 1 / -1; } } @media (max-width: 480px) { body.home .hero { padding: 60px 0; } body.home .hero h1 { } body.home .feature-card { padding: 30px; } body.contact .contact-info, body.contact .contact-form { padding: 30px; } body.about .about-hero { padding: 80px 0; } body.blog .post-content { padding: 20px; } body.blog .blog-sidebar { padding: 30px; } .lataula-footer .footer-grid, #device-wrapper .lataula-footer .footer-grid { grid-template-columns: 1fr; gap: 20px; } } /* ========================================================================== Contacte page — replicating lataula.studio Squarespace layout ========================================================================== */ #device-wrapper .contacte-page, .contacte-page { width: 100%; } #device-wrapper .contacte-container, .contacte-container { max-width: 1200px; margin: 0 auto; padding: 0 max(20px, 4vw); } #device-wrapper .contacte-hero, .contacte-hero { padding: 80px 0 60px; } #device-wrapper .contacte-grid, .contacte-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } #device-wrapper .contacte-info, .contacte-info { display: flex; flex-direction: column; gap: 22px; } #device-wrapper .contacte-title, .contacte-title { font-weight: 500; font-size: clamp(42px, 6vw, 72px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 10px 0; } #device-wrapper .contacte-info p, .contacte-info p { margin: 0; line-height: 1.6; font-size: clamp(16px, 1.3vw, 19px); } #device-wrapper .contacte-link, .contacte-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease, opacity .2s ease; } #device-wrapper .contacte-link:hover, .contacte-link:hover { border-bottom-color: currentColor; } /* ---------- Form ---------- */ #device-wrapper .contacte-form-wrap, .contacte-form-wrap { width: 100%; } #device-wrapper .contacte-form, .contacte-form { display: flex; flex-direction: column; gap: 20px; } #device-wrapper .contacte-form-field, .contacte-form-field { display: flex; flex-direction: column; gap: 6px; } #device-wrapper .contacte-label, .contacte-label { font-size: 14px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.85; } #device-wrapper .contacte-input, .contacte-input { width: 100%; padding: 12px 14px; font-size: 16px; font-family: inherit; line-height: 1.4; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 2px; outline: none; transition: border-color .2s ease, background .2s ease; box-sizing: border-box; } #device-wrapper .contacte-input:focus, .contacte-input:focus { border-color: var(--accent-color, #ffff7f); box-shadow: 0 0 0 2px var(--accent-color, #ffff7f); } #device-wrapper .contacte-textarea, .contacte-textarea { resize: vertical; min-height: 120px; } /* Honeypot — visually hidden but not display:none (bots skip display:none) */ .contacte-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } #device-wrapper .contacte-form-actions, .contacte-form-actions { margin-top: 8px; } /* Let .button-secondary handle the visual style; only keep sizing + wait cursor */ #device-wrapper .contacte-submit, .contacte-submit { padding: 12px 32px; letter-spacing: 0.04em; } #device-wrapper .contacte-submit[disabled], .contacte-submit[disabled] { cursor: wait; } /* Feedback banner */ #device-wrapper .contacte-feedback, .contacte-feedback { display: none; max-width: 1200px; margin: 20px auto 0; padding: 14px 18px; border-radius: 4px; font-size: 15px; line-height: 1.5; } #device-wrapper .contacte-feedback--success, .contacte-feedback--success { background: #e5f4ea; color: #0d5c2a; border: 1px solid #9dd4ae; } #device-wrapper .contacte-feedback--error, .contacte-feedback--error { background: #fdecec; color: #7a1b1b; border: 1px solid #e6a4a4; } /* ---------- Dark theme ---------- */ .edit-dark-theme .contacte-feedback--success, #device-wrapper.edit-dark-theme .contacte-feedback--success { background: #12351f; color: #b6e4c1; border-color: #2a6a3e; } .edit-dark-theme .contacte-feedback--error, #device-wrapper.edit-dark-theme .contacte-feedback--error { background: #3a1414; color: #f4b6b6; border-color: #7a2b2b; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .contacte-grid, #device-wrapper .contacte-grid { grid-template-columns: 1fr; gap: 40px; } .contacte-hero, #device-wrapper .contacte-hero { padding: 60px 0 40px; } } @media (max-width: 480px) { .contacte-hero, #device-wrapper .contacte-hero { padding: 40px 0 30px; } } /* Websfera editor: mobile preview uses container queries (container: device) */ @container device (max-width: 900px) { .contacte-grid, #device-wrapper .contacte-grid { grid-template-columns: 1fr; gap: 40px; } } /* Products Gallery Styles - Minimalist Design */ /* Contenidor principal de productes */ .products-container { max-width: var(--container-width-value); margin: 0px auto; padding: 40px 20px; text-align: center; } /* Ajustar padding responsive del contenidor principal */ @container device (max-width: 768px) { .products-container { padding: 0 !important; margin: 30px auto !important; } #page .block { padding: 0 !important; } } @container device (max-width: 480px) { .products-container { padding: 0 !important; margin: 20px auto !important; } #page .block { padding: 0 !important; } } /* Search Box */ .products-search-container { max-width: 600px; margin: 0 auto 60px auto; position: relative; } .products-search-input { width: 100%; padding: 15px 50px 15px 20px; font-size: 16px; border: 1px solid #e0e0e0; border-radius: 4px; font-family: inherit; transition: all 0.3s ease; background: #fafafa; } .products-search-input:focus { outline: none; border-color: var(--text-color); background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .products-search-input::placeholder { color: var(--text-color-secondary); } .products-search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text-color-secondary); pointer-events: none; } .products-search-clear { position: absolute; right: 45px; top: 25%; transform: translateY(-50%); background: none; border: none; color: var(--text-color-secondary); cursor: pointer; padding: 5px; display: none; transition: color 0.2s; } .products-search-clear:hover { color: var(--text-color); } .products-search-clear.visible { display: block; } .products-search-results { text-align: center; color: var(--text-color-secondary); margin-bottom: 20px; font-size: 14px; } /* Gallery Grid - 3 columns */ .product-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0; max-width: var(--container-width-value); margin: 0 auto; } .product-item { position: relative; } .product-item a { display: block; text-decoration: none; color: inherit; } .product-item .image-wrapper { position: relative; width: 100%; aspect-ratio: 4/5; overflow: hidden; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .product-item .image-wrapper.loaded { background: none; animation: none; } .product-item img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.4s ease-in; } .product-item img.loaded { opacity: 1; } .product-info { margin-top: 15px; text-align: left; } .product-name { font-size: 15px; font-weight: 400; color: var(--text-color); margin-bottom: 5px; } .product-category { font-size: 13px; color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .product-ref { font-size: 12px; color: var(--text-color-secondary); margin-top: 3px; } /* Product Detail Page */ .product-detail-container { max-width: 1200px; margin: 0px auto; padding: 40px 0px; } .product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .product-gallery-container { position: sticky; top: 100px; } .product-main-image { width: 100%; height: 500px; background: #fafafa; overflow: hidden; margin-bottom: 20px; touch-action: manipulation; } .product-slider-track { display: flex; width: 100%; height: 100%; } .product-slide { display: none; min-width: 100%; width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; } .product-slide.active { display: block; } .product-slider-dots { display: none; } .product-thumbnails { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; } .product-thumbnail { width: 100%; height: 80px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer; overflow: hidden; } .product-thumbnail:hover, .product-thumbnail.active { border-color: var(--text-color); } .product-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .product-details h1 { font-size: 32px; margin: 0 0 10px 0; } .product-details .product-ref { font-size: 16px; color: var(--text-color-secondary); margin-bottom: 30px; } .product-description { font-size: 16px; line-height: 1.6; color: var(--text-color); margin-bottom: 30px; } .product-meta { border-top: 1px solid #e5e5e5; padding-top: 20px; } .product-meta-item { margin-bottom: 15px; } .product-meta-item strong { display: inline-block; width: 120px; color: var(--text-color); } /* Loading Indicator - Skeleton Style */ .loading-indicator { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 0; margin: 20px 0; } .loading-skeleton { width: 100%; animation: fadeIn 0.3s ease-in; position: relative; } .loading-skeleton-image { width: 100%; aspect-ratio: 4/5; background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: 2px; position: relative; overflow: hidden; } /* Efecte de pols animat al centre */ .loading-skeleton-image::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #b0b0b0; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite; } .loading-skeleton-info { margin-top: 15px; } .loading-skeleton-text { height: 15px; background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: 3px; width: 85%; margin-bottom: 8px; } .loading-skeleton-text-small { height: 13px; background: linear-gradient(90deg, #e8e8e8 25%, #d0d0d0 50%, #e8e8e8 75%); background-size: 200% 100%; animation: shimmer 1.8s ease-in-out infinite; border-radius: 3px; width: 65%; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Animació per als nous productes */ .product-item { animation: fadeIn 0.5s ease-out; } /* Responsive loading skeletons */ @media (max-width: 1024px) { .loading-indicator { grid-template-columns: repeat(2, 1fr); gap: 30px; } /* Ocultar alguns skeletons en tablet */ .loading-skeleton:nth-child(n+5) { display: none; } } @media (max-width: 768px) { .loading-indicator { grid-template-columns: 1fr; gap: 40px; padding: 0 20px; } /* Mostrar menys skeletons en mòbil */ .loading-skeleton:nth-child(n+4) { display: none; } } /* Responsive Design basat en l'ample del #device-wrapper */ /* Tablet - quan device-wrapper té entre 768px i 1024px */ @container device (max-width: 1024px) { .products-search-container { max-width: 90%; margin-bottom: 40px; } .product-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 30px; padding: 0 20px; } .product-detail-grid { grid-template-columns: 1fr; gap: 30px; } .product-gallery-container { position: static; } } /* Mobile - quan device-wrapper té menys de 768px */ @container device (max-width: 768px) { .product-detail-container { padding: 0 !important; margin: 30px auto !important; } /* Slider mòbil */ .product-slider-track { transition: transform 0.35s ease; will-change: transform; } .product-slide { display: block; cursor: zoom-in; } .product-thumbnails { display: none; } .product-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; padding: 4px 0; } .product-dot { width: 7px; height: 7px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.2s; flex-shrink: 0; } .product-dot.active { background: #333; } .products-search-container { max-width: 100%; margin: 0 0 30px 0; padding: 0; } .products-search-input { padding: 12px 45px 12px 15px; font-size: 15px; } .products-search-icon { font-size: 14px; right: 15px; } .products-search-clear { font-size: 14px; right: 40px; top: 22%; } .product-gallery { grid-template-columns: 1fr !important; gap: 25px; padding: 0; margin-top: 0; } .product-item { max-width: 100%; } .product-info { margin-top: 12px; } .product-name { font-size: 14px; } .product-category { font-size: 12px; } } /* Extra small - quan device-wrapper té menys de 480px */ @container device (max-width: 480px) { .product-gallery { gap: 20px; padding: 0; } .products-search-container { margin: 0; padding: 0 0 15px 0; } .products-search-input { font-size: 14px; padding: 10px 40px 10px 12px; } .products-search-icon { top: 50%; right: 12px; } .products-search-clear { right: 35px; top: 22%; } .product-name { font-size: 13px; } .product-category { font-size: 11px; } } /* Products page title */ .products-container h1 { text-align: center; margin-bottom: 70px !important; } /* Buy Now Button */ .product-buy-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e5e5e5; } .btn-buy-now { display: inline-block; background: #333; color: white !important; padding: 15px 40px; text-decoration: none !important; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; transition: background 0.3s ease; border: none; cursor: pointer; font-weight: 400; } .btn-buy-now:hover { background: #000; color: white !important; } /* Sold Button */ .btn-sold { display: inline-block; background: #999; color: white !important; padding: 15px 40px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; border: none; cursor: not-allowed; opacity: 0.6; font-weight: 400; } /* Responsive Buy Button */ @container device (max-width: 768px) { .product-buy-section { text-align: center; } .btn-buy-now { display: block; width: 100%; padding: 18px 40px; } .btn-sold { display: block; width: 100%; padding: 18px 40px; } } /* Related Products Section */ .related-products-section { max-width: 1200px; margin: 80px auto 60px auto; padding: 60px 0 0 0; border-top: 1px solid #e5e5e5; } .related-products-title { text-align: center; font-size: 24px; font-weight: 300; margin-bottom: 50px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-color); } .related-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .related-product-item { position: relative; transition: transform 0.3s ease; } .related-product-item:hover { transform: translateY(-5px); } .related-product-item a { display: block; text-decoration: none; color: inherit; } .related-product-image { width: 100%; aspect-ratio: 4/5; overflow: hidden; background: #fafafa; margin-bottom: 15px; } .related-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .related-product-item:hover .related-product-image img { transform: scale(1.05); } .related-product-info { text-align: left; } .related-product-name { font-size: 15px; font-weight: 400; color: var(--text-color); margin: 0 0 5px 0; } .related-product-category { font-size: 13px; color: var(--text-color-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } /* Related Products Responsive */ @container device (max-width: 1024px) { .related-products-grid { grid-template-columns: repeat(3, 1fr); gap: 25px; } .related-products-section { margin: 60px auto 40px auto; padding: 40px 20px 0 20px; } } @container device (max-width: 768px) { .related-products-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .related-products-title { font-size: 20px; margin-bottom: 30px; } .related-products-section { margin: 40px auto 30px auto; padding: 30px 0 0 0; } } @container device (max-width: 480px) { .related-products-grid { grid-template-columns: 1fr; gap: 25px; } .related-products-title { font-size: 18px; margin-bottom: 25px; } .related-product-name { font-size: 14px; } .related-product-category { font-size: 12px; } } /* Estils per eliminar la doble fletxa dels selects */ select { /* Eliminem l'aparença per defecte */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Afegim una fletxa personalitzada */ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.7em top 50% !important; background-size: 1em auto !important; padding-right: 2.5em !important; } /* Regla més específica per selects dins de formularis */ .form-group select, form select, .edit-modal select, .edit-sidebar select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.7em top 50% !important; background-size: 1em auto !important; padding-right: 2.5em !important; } /* Per assegurar que es veu en dark mode */ .edit-dark-theme select { background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important; } /* Eliminem la fletxa a Firefox */ select::-ms-expand { display: none; }/* Typography using CSS variables */ a, p, li { font-family: var(--p-font-family); } span { font-family: inherit; } html, body, .txt, .shortbody, .custom { font-family: var(--p-font-family), helvetica, sans-serif, 'Lucida Grande', Arial !important; } body { font-family: var(--p-font-family) !important; font-size: var(--p-size) !important; line-height: var(--p-line-height) !important; font-weight: var(--p-font-weight) !important; font-style: var(--p-font-style) !important; } p { font-family: var(--p-font-family); font-size: var(--p-size); line-height: var(--p-line-height); font-weight: var(--p-font-weight); font-style: var(--p-font-style); } h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size-value); line-height: var(--h1-line-height); font-weight: var(--h1-font-weight); font-style: var(--h1-font-style); padding-top: 0; padding-bottom: 0; margin-bottom: 10px !important; } h2 { font-family: var(--h2-font-family); font-size: var(--h2-size) !important; line-height: var(--h2-line-height); font-weight: var(--h2-font-weight); font-style: var(--h2-font-style); } h3 { font-family: var(--h3-font-family); font-size: var(--h3-size); line-height: var(--h3-line-height); font-weight: var(--h3-font-weight); font-style: var(--h3-font-style); } /* Link styles */ a:link, a:visited { transition: .3s; } a { outline: 0; }