/* * Porto skin → WordPress palette (Europneumaq brand). * * Porto's CSS (assets/porto/css) reads its colours from these variables * (originally css/skins/default.css). They point to the theme.json palette, so * changing a colour in Appearance → Editor → Styles → Colors restyles every * Porto component on the front end and in the editor. * * Porto → theme.json * primary primary #003A5D Azul Europneumaq * secondary secondary #00AEEF Azul técnico * tertiary accent #F1B434 Destaque (laranja #E94E1B nas secções EMR) * quaternary accent-emr #E94E1B Destaque EMR * dark contrast #071521 Neutro escuro * light base #FFFFFF * * Shades: -100/-200/-300 are darker, --100/--200/--300 lighter, -rgba-N are N% opacity. */ :root { --border-radius: var(--wp--custom--radius--small, 8px); --border-radius2x: var(--wp--custom--radius--medium, 16px); --default: var(--wp--preset--color--body, #44525F); --primary: var(--wp--preset--color--primary); --primary-100: color-mix(in srgb, var(--primary), #000 12%); --primary-200: color-mix(in srgb, var(--primary), #000 18%); --primary-300: color-mix(in srgb, var(--primary), #000 25%); --primary--100: color-mix(in srgb, var(--primary), #fff 10%); --primary--200: color-mix(in srgb, var(--primary), #fff 15%); --primary--300: color-mix(in srgb, var(--primary), #fff 20%); --primary-rgba-0: color-mix(in srgb, var(--primary) 0%, transparent); --primary-rgba-10: color-mix(in srgb, var(--primary) 10%, transparent); --primary-rgba-20: color-mix(in srgb, var(--primary) 20%, transparent); --primary-rgba-30: color-mix(in srgb, var(--primary) 30%, transparent); --primary-rgba-40: color-mix(in srgb, var(--primary) 40%, transparent); --primary-rgba-50: color-mix(in srgb, var(--primary) 50%, transparent); --primary-rgba-60: color-mix(in srgb, var(--primary) 60%, transparent); --primary-rgba-70: color-mix(in srgb, var(--primary) 70%, transparent); --primary-rgba-80: color-mix(in srgb, var(--primary) 80%, transparent); --primary-rgba-90: color-mix(in srgb, var(--primary) 90%, transparent); --secondary: var(--wp--preset--color--secondary); --secondary-100: color-mix(in srgb, var(--secondary), #000 12%); --secondary-200: color-mix(in srgb, var(--secondary), #000 18%); --secondary-300: color-mix(in srgb, var(--secondary), #000 25%); --secondary--100: color-mix(in srgb, var(--secondary), #fff 10%); --secondary--200: color-mix(in srgb, var(--secondary), #fff 15%); --secondary--300: color-mix(in srgb, var(--secondary), #fff 20%); --secondary-rgba-0: color-mix(in srgb, var(--secondary) 0%, transparent); --secondary-rgba-10: color-mix(in srgb, var(--secondary) 10%, transparent); --secondary-rgba-20: color-mix(in srgb, var(--secondary) 20%, transparent); --secondary-rgba-30: color-mix(in srgb, var(--secondary) 30%, transparent); --secondary-rgba-40: color-mix(in srgb, var(--secondary) 40%, transparent); --secondary-rgba-50: color-mix(in srgb, var(--secondary) 50%, transparent); --secondary-rgba-60: color-mix(in srgb, var(--secondary) 60%, transparent); --secondary-rgba-70: color-mix(in srgb, var(--secondary) 70%, transparent); --secondary-rgba-80: color-mix(in srgb, var(--secondary) 80%, transparent); --secondary-rgba-90: color-mix(in srgb, var(--secondary) 90%, transparent); --tertiary: var(--wp--preset--color--accent); --tertiary-100: color-mix(in srgb, var(--tertiary), #000 12%); --tertiary-200: color-mix(in srgb, var(--tertiary), #000 18%); --tertiary-300: color-mix(in srgb, var(--tertiary), #000 25%); --tertiary--100: color-mix(in srgb, var(--tertiary), #fff 10%); --tertiary--200: color-mix(in srgb, var(--tertiary), #fff 15%); --tertiary--300: color-mix(in srgb, var(--tertiary), #fff 20%); --tertiary-rgba-0: color-mix(in srgb, var(--tertiary) 0%, transparent); --tertiary-rgba-10: color-mix(in srgb, var(--tertiary) 10%, transparent); --tertiary-rgba-20: color-mix(in srgb, var(--tertiary) 20%, transparent); --tertiary-rgba-30: color-mix(in srgb, var(--tertiary) 30%, transparent); --tertiary-rgba-40: color-mix(in srgb, var(--tertiary) 40%, transparent); --tertiary-rgba-50: color-mix(in srgb, var(--tertiary) 50%, transparent); --tertiary-rgba-60: color-mix(in srgb, var(--tertiary) 60%, transparent); --tertiary-rgba-70: color-mix(in srgb, var(--tertiary) 70%, transparent); --tertiary-rgba-80: color-mix(in srgb, var(--tertiary) 80%, transparent); --tertiary-rgba-90: color-mix(in srgb, var(--tertiary) 90%, transparent); --quaternary: var(--wp--preset--color--accent-emr); --quaternary-100: color-mix(in srgb, var(--quaternary), #000 12%); --quaternary-200: color-mix(in srgb, var(--quaternary), #000 18%); --quaternary-300: color-mix(in srgb, var(--quaternary), #000 25%); --quaternary--100: color-mix(in srgb, var(--quaternary), #fff 10%); --quaternary--200: color-mix(in srgb, var(--quaternary), #fff 15%); --quaternary--300: color-mix(in srgb, var(--quaternary), #fff 20%); --quaternary-rgba-0: color-mix(in srgb, var(--quaternary) 0%, transparent); --quaternary-rgba-10: color-mix(in srgb, var(--quaternary) 10%, transparent); --quaternary-rgba-20: color-mix(in srgb, var(--quaternary) 20%, transparent); --quaternary-rgba-30: color-mix(in srgb, var(--quaternary) 30%, transparent); --quaternary-rgba-40: color-mix(in srgb, var(--quaternary) 40%, transparent); --quaternary-rgba-50: color-mix(in srgb, var(--quaternary) 50%, transparent); --quaternary-rgba-60: color-mix(in srgb, var(--quaternary) 60%, transparent); --quaternary-rgba-70: color-mix(in srgb, var(--quaternary) 70%, transparent); --quaternary-rgba-80: color-mix(in srgb, var(--quaternary) 80%, transparent); --quaternary-rgba-90: color-mix(in srgb, var(--quaternary) 90%, transparent); --dark: var(--wp--preset--color--contrast); --dark-100: color-mix(in srgb, var(--dark), #000 12%); --dark-200: color-mix(in srgb, var(--dark), #000 18%); --dark-300: color-mix(in srgb, var(--dark), #000 25%); --dark--100: color-mix(in srgb, var(--dark), #fff 10%); --dark--200: color-mix(in srgb, var(--dark), #fff 15%); --dark--300: color-mix(in srgb, var(--dark), #fff 20%); --dark-rgba-0: color-mix(in srgb, var(--dark) 0%, transparent); --dark-rgba-10: color-mix(in srgb, var(--dark) 10%, transparent); --dark-rgba-20: color-mix(in srgb, var(--dark) 20%, transparent); --dark-rgba-30: color-mix(in srgb, var(--dark) 30%, transparent); --dark-rgba-40: color-mix(in srgb, var(--dark) 40%, transparent); --dark-rgba-50: color-mix(in srgb, var(--dark) 50%, transparent); --dark-rgba-60: color-mix(in srgb, var(--dark) 60%, transparent); --dark-rgba-70: color-mix(in srgb, var(--dark) 70%, transparent); --dark-rgba-80: color-mix(in srgb, var(--dark) 80%, transparent); --dark-rgba-90: color-mix(in srgb, var(--dark) 90%, transparent); --light: var(--wp--preset--color--base); --light-100: color-mix(in srgb, var(--light), #000 12%); --light-200: color-mix(in srgb, var(--light), #000 18%); --light-300: color-mix(in srgb, var(--light), #000 25%); --light--100: color-mix(in srgb, var(--light), #fff 10%); --light--200: color-mix(in srgb, var(--light), #fff 15%); --light--300: color-mix(in srgb, var(--light), #fff 20%); --light-rgba-0: color-mix(in srgb, var(--light) 0%, transparent); --light-rgba-10: color-mix(in srgb, var(--light) 10%, transparent); --light-rgba-20: color-mix(in srgb, var(--light) 20%, transparent); --light-rgba-30: color-mix(in srgb, var(--light) 30%, transparent); --light-rgba-40: color-mix(in srgb, var(--light) 40%, transparent); --light-rgba-50: color-mix(in srgb, var(--light) 50%, transparent); --light-rgba-60: color-mix(in srgb, var(--light) 60%, transparent); --light-rgba-70: color-mix(in srgb, var(--light) 70%, transparent); --light-rgba-80: color-mix(in srgb, var(--light) 80%, transparent); --light-rgba-90: color-mix(in srgb, var(--light) 90%, transparent); /* Text colour used on top of each skin colour. */ --primary-inverse: var(--wp--preset--color--base); --secondary-inverse: var(--wp--preset--color--contrast); --tertiary-inverse: var(--wp--preset--color--contrast); --quaternary-inverse: var(--wp--preset--color--base); --dark-inverse: var(--wp--preset--color--base); --light-inverse: var(--wp--preset--color--body); /* Greys (Porto default skin). */ --grey: #969696; --grey-100: #f4f4f4; --grey-200: #eaeaea; --grey-300: #e5e5e5; --grey-400: #e0e0e0; --grey-500: #dbdbdb; --grey-600: #cecece; --grey-700: #c1c1c1; --grey-800: #a8a8a8; --grey-900: #8e8e8e; --grey-1000: #757575; } /* * EMR (Europneumaq Mobile Robotics): the accent becomes orange. * * Applied to the whole page (template "Página EMR", including its child pages) * through a body class, or to a single section with "Porto: marca → Destaque EMR". * Custom properties are resolved where they are declared, so the accent and the * Porto "tertiary" shades are re-declared inside the scope. */ .porto-brand-emr { --wp--preset--color--accent: var(--wp--preset--color--accent-emr); --tertiary-inverse: var(--wp--preset--color--base); --tertiary: var(--wp--preset--color--accent-emr); --tertiary-100: color-mix(in srgb, var(--tertiary), #000 12%); --tertiary-200: color-mix(in srgb, var(--tertiary), #000 18%); --tertiary-300: color-mix(in srgb, var(--tertiary), #000 25%); --tertiary--100: color-mix(in srgb, var(--tertiary), #fff 10%); --tertiary--200: color-mix(in srgb, var(--tertiary), #fff 15%); --tertiary--300: color-mix(in srgb, var(--tertiary), #fff 20%); --tertiary-rgba-0: color-mix(in srgb, var(--tertiary) 0%, transparent); --tertiary-rgba-10: color-mix(in srgb, var(--tertiary) 10%, transparent); --tertiary-rgba-20: color-mix(in srgb, var(--tertiary) 20%, transparent); --tertiary-rgba-30: color-mix(in srgb, var(--tertiary) 30%, transparent); --tertiary-rgba-40: color-mix(in srgb, var(--tertiary) 40%, transparent); --tertiary-rgba-50: color-mix(in srgb, var(--tertiary) 50%, transparent); --tertiary-rgba-60: color-mix(in srgb, var(--tertiary) 60%, transparent); --tertiary-rgba-70: color-mix(in srgb, var(--tertiary) 70%, transparent); --tertiary-rgba-80: color-mix(in srgb, var(--tertiary) 80%, transparent); --tertiary-rgba-90: color-mix(in srgb, var(--tertiary) 90%, transparent); } /* Typography: Satoshi everywhere (Porto elements that hard-code Open Sans / Poppins). */ body, .mfp-close-btn-in .mfp-close, .testimonial :is(blockquote, blockquote p), .default-font, .alternative-font-4, .alternative-font-5, #header .header-nav-main nav > ul > li > a { font-family: var(--wp--preset--font-family--satoshi) !important; }