/**
* Theme Name: Coluna
* Author: BYTE TO IT
* Template: blocksy
* Text Domain: coluna
* Description: Coluna is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
*/
:root {
/* Fluid Typography Variables (Min: 320px, Max: 1842px) */
/* Formula: clamp(min_size, preferred_value, max_size) */
--font-size-h1: clamp(1.875rem, 1.339rem + 2.68vw, 3.75rem);
--font-size-h2: clamp(1.5rem, 1.214rem + 1.43vw, 2.5rem);
--font-size-h3: clamp(1.125rem, 0.875rem + 1.25vw, 2rem);
--font-size-h4: clamp(1rem, 0.929rem + 0.36vw, 1.25rem);
--font-size-h1-lead: clamp(2.75rem, 2.16rem + 2.92vw, 4.5rem);
--font-size-h1-sub: clamp(2rem, 1.46rem + 2.71vw, 3.625rem);
--font-size-h2-lead: clamp(1.35rem, 0.88rem + 2.33vw, 2.75rem);
--font-size-p: clamp(1rem, 0.947rem + 0.26vw, 1.25rem);
--font-size-caption: clamp(0.875rem, 0.849rem + 0.13vw, 1rem);
/* Line heights — tighter for large display, looser for body */
--line-height-h1: 1.15;
--line-height-h2: 1.2;
--line-height-h3: 1.25;
--line-height-h4: 1.35;
--line-height-h1-lead: 1.05;
--line-height-h2-lead: 1.3;
--line-height-p: 1.6;
--line-height-caption: 1.5;
--site-max: min(
var(--theme-container-width, 1200px),
var(--theme-normal-container-max-width, 1200px)
);
}
html[lang^="pt-PT"] .en-content { display: none !important; }
html[lang^="en-US"] .pt-content { display: none !important; }
h1 {
font-size: var(--font-size-h1) !important;
line-height: var(--line-height-h1) !important;
font-weight: 400;
}
h2 {
font-size: var(--font-size-h2) !important;
line-height: var(--line-height-h2) !important;
}
h3 {
font-size: var(--font-size-h3) !important;
line-height: var(--line-height-h3) !important;
}
h4 {
font-size: var(--font-size-h4) !important;
line-height: var(--line-height-h4) !important;
}
.h2-lead { font-size: var(--font-size-h2-lead) !important; line-height: var(--line-height-h2-lead) !important; }
.h1-lead { font-size: var(--font-size-h1-lead) !important; line-height: var(--line-height-h1-lead) !important; }
.h1-sub { font-size: var(--font-size-h1-sub) !important; line-height: var(--line-height-h2-lead) !important; }
p { font-size: var(--font-size-p) !important; line-height: var(--line-height-p) !important; }
.caption { font-size: var(--font-size-caption) !important; line-height: var(--line-height-caption) !important; }
ul.wp-block-list, ol {
margin: 16px 0;
}
ul.wp-block-list li, ol li {
padding: 8px 0;
}
.h-projeto-slide .h-projeto-content h3 {
font-size: var(--font-size-h4) !important;
line-height: var(--line-height-h4) !important;
opacity: .6;
margin-bottom: 8px;
}
.h-projeto-slide.swiper-slide-active .h-projeto-content h3 {
font-size: var(--font-size-h3) !important;
line-height: var(--line-height-h3) !important;
opacity: 1;
}
.h-projeto-slide.swiper-slide-active .h-projeto-extra p {
color: var(--theme-palette-color-3);
opacity: .7;
margin: 0 0 12px 0;
white-space: normal; /* Ensures description wraps */
}
.h-projeto-link {
display: flex;
align-items: center;
gap: 8px;
}
/* Show/hide language-marked blocks purely by the */
html[lang^="pt"] .en-content { display: none !important; }
html[lang^="en"] .pt-content { display: none !important; }
body {
font-size: var(--font-size-p) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bg-grey {
background-color: var(--theme-palette-color-5);
}
.bg-white {
background-color: #fff;
}
.bg-blue-gradient {
background: linear-gradient(#093C86 13%, #3870CE 100%);
}
.txt-white {
color: #fff;
}
.d-block {
display: block;
}
.d-flex {
display: flex;
}
.align-items-start {
align-items: start;
}
.align-items-end {
align-items: end;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-center {
justify-content: center;
}
.flex-direction-column {
flex-direction: column;
}
.full-h {
height: 100dvh;
}
.w-100 {
width: 100%;
}
@media screen and (min-width: 689px) {
.w-lg-50 {
width: 50%;
}
}
.bleed-left {
padding-left: max(0px, calc((100dvw - var(--site-max)) / 2)) !important;
}
.bleed-right {
padding-right: max(0px, calc((100dvw - var(--site-max)) / 2)) !important;
}
@media screen and (max-width: 999px) {
.bleed-left {
padding-left: 20px !important;
}
.bleed-right {
padding-right: 20px !important;
}
}
.lg-full-width {
width: 100vw;
}
@media screen and (max-width: 999px) {
.md-full-width .gspb_row__content {
width: 100vw !important;
}
}
.custom-bullet-list li::before {
color: var(--theme-palette-color-3) !important;
}
.only-desktop {
display: block;
}
.only-mobile {
display: none;
}
@media screen and (max-width: 1000px) {
.only-desktop {
display: none;
}
.only-mobile {
display: block;
}
}
/**
* Hero headers
*/
.hero-header {
height: 100dvh !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
row-gap: 40px !important;
}
.hero-header .hero-header-col1 {
display: flex !important;
flex-direction: column !important;
justify-content: end !important;
height: 40dvh !important;
min-height: fit-content !important;
padding-top: 165px !important;
gap: 8px;
}
.hero-header .hero-header-col2 {
height: 60dvh !important;
overflow: hidden;
}
@media screen and (max-width: 1000px) {
.hero-header .hero-header-col1 {
padding-top: 80px !important;
}
}
/**
* buttons
*/
.btn-icon {
display: flex;
align-items: center;
overflow: hidden;
}
.btn-icon:hover svg {
animation: slideIcon 1.5s infinite;
}
.gspb-buttonbox-icon {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.gspb-buttonbox:hover .gspb-buttonbox-icon img {
/* Increased the total duration to 1.5s */
/* This gives 0.5s of movement + 1.0s of pause */
animation: slideIcon 1.5s infinite;
}
@keyframes slideIcon {
0% {
transform: translateX(0);
opacity: 1;
}
/* 16% of 1.5s is about 0.25s (Slides out) */
16% {
transform: translateX(150%);
opacity: 0;
}
/* Snaps to the other side invisibly */
17% {
transform: translateX(-150%);
opacity: 0;
}
/* 33% of 1.5s is about 0.5s (Slides back into the center) */
33% {
transform: translateX(0);
opacity: 1;
}
/* 33% to 100% is the buffer. The icon stays perfectly still. */
100% {
transform: translateX(0);
opacity: 1;
}
}
/**
* forms
*/
.wpcf7 label:not(.wpcf7-form-control-wrap) {
font-size: 14px !important;
font-weight: 300 !important;
}
select,
textarea,
input:is([type=url],
[type=tel],
[type=text],
[type=time],
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=number],
[type=search],
[type=password]),
.ct-pseudo-input,
fieldset .wc-stripe-elements-field,
.ff-inherit-theme-style .ff-el-form-control:not([size]):not([multiple]) {
background-color: #F3F4F6 !important;
border: 1px solid #CBD0D6 !important;
border-radius: 4px !important;
}
select,input:is([type=url],[type=tel],[type=text],[type=time],[type=date],[type=datetime],[type=datetime-local],[type=email],[type=number],[type=search],[type=password]) {
height: 40px !important;
}
.wpcf7 p {
margin-bottom: 8px !important;
}
.wpcf7-submit {
background-color: var(--theme-palette-color-3) !important;
color: var(--theme-palette-color-7) !important;
transition: 200ms all ease;
border-radius: 4px;
font-weight: 400 !important;
margin-top: 12px !important;
padding: 4px 26px !important;
}
.file-field span {
font-size: 14px;
font-weight: 300;
}
.wpcf7-submit:hover {
background-color: var(--theme-palette-color-1) !important;
}
/**
* Header transparency at top of page
*/
#header [data-row*="top"],
#header [data-row*="middle"] {
transition: background-color 0.4s ease;
}
#header [data-row*="top"].is-at-top,
#header [data-row*="middle"].is-at-top {
background-color: transparent !important;
}
#header [data-row*="middle"] {
transition: all .25s ease-in-out;
}
body:has(#offcanvas.active) #header [data-row*="middle"].is-at-top {
background-color: var(--theme-palette-color-5) !important;
}
#header [data-transparent]:has([class*="animated-submenu"]:hover) [data-row].is-at-top,
#header [data-transparent]:has([class*="animated-submenu"].ct-active) [data-row].is-at-top {
background-color: #ffffff !important;
}
/**
* Navigation
*/
.mobile-menu>ul {
border-top: 0 !important;
}
#offcanvas {
top: 70px;
height: calc(100dvh - 70px);
}
#offcanvas nav[class*=menu] .ct-menu-link {
padding: 6px 0;
}
#offcanvas .ct-toggle-close {
display: none;
}
#offcanvas .ct-header-socials .ct-social-box .ct-icon-container {
display: none;
}
#offcanvas .ct-social-box .ct-label {
margin-inline-start: 0;
}
#offcanvas .ct-panel-content {
align-items: stretch;
}
#offcanvas .ct-panel-content-inner {
justify-content: space-between;
}
#offcanvas .supermenu-featured-image,
#offcanvas .supermenu-thumb,
#offcanvas .supermenu-parent-title {
display: none;
}
#offcanvas .mobile-menu[data-submenu-dots=yes] [class*=children]>ul {
padding: 12px 0 30px 0;
}
#offcanvas .supermenu-title {
line-height: 1.7;
}
#offcanvas .sub-menu li {
padding: 8px 0;
border: 0;
}
@media (max-width: 689.98px) {
.ct-panel-actions {
padding-top: 0 !important;
}
}
.mobile-menu li.nav-small {
border-bottom: 0 !important;
}
.mobile-menu li.nav-small a {
padding: 0 !important;
line-height: 2.2em;
}
.mobile-menu li.nav-small.nav-small-first {
margin-top: 32px;
}
.nav-small a {
font-size: 16px !important;
}
#header #menu-item-891-pt {
padding-left: 12px;
}
#header .ct-header-text .entry-content {
display: flex;
align-items: center;
}
.menu li.menu-item, .menu li.page_item {
height: 100%;
}
.menu li.menu-item.lang-item {
height: 24px;
}
.header-menu-2 ul {
align-items: center;
}
#header-menu-2 #menu-item-891-pt a,
#header-menu-2 #menu-item-891-en a,
#header-menu-2 #menu-item-1939-pt a,
#header-menu-2 #menu-item-1939-en a {
text-transform: uppercase;
padding: 0 !important;
width: auto;
margin: 0 4px;
}
#header-menu-2 .current-lang a {
border-bottom: 1px solid var(--theme-palette-color-3);
}
#menu-item-891-pt::before,
#menu-item-1939-pt::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#header-menu-2 #menu-item-891-en::before,
#header-menu-2 #menu-item-1939-en::before {
content: " - ";
display: inline-block;
pointer-events: none;
line-height: 1;
}
[data-column=end] [data-items=primary] [data-menu*=type-1]:last-child>ul>li:last-child>a {
padding-inline-end: 14px !important;
}
/* 1. Release the parent container */
.ct-header [data-id="menu"] > ul > li.menu-item-has-children {
position: static !important;
}
/* ----------------------------------------------------
10. HOVER INTENT UX (Delay Open & Close)
---------------------------------------------------- */
/* When the mouse LEAVES: Wait 200ms before hiding the menu.
This provides a "grace period" so the menu doesn't vanish if the mouse slips. */
.ct-header [data-id="menu"] [class*="animated-submenu"] > .sub-menu {
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s !important;
}
/* When the mouse ENTERS: Wait 250ms before showing the menu.
This prevents accidental flashes when sweeping the mouse across the screen. */
.ct-header [data-id="menu"] [class*="animated-submenu"]:hover > .sub-menu,
.ct-header [data-id="menu"] [class*="animated-submenu"].ct-active > .sub-menu {
transition: opacity 0.3s ease 0.25s, transform 0.3s ease 0.25s, visibility 0s linear 0.25s !important;
}
/* 1. Force the dropdown to span the entire screen, perfectly centered */
.ct-header [data-id="menu"] [class*="animated-submenu"] > .sub-menu {
position: absolute !important;
left: 50% !important;
right: auto !important;
width: 100vw !important;
max-width: 100vw !important;
transform: translateX(-50%) translate3d(0, 10px, 0) !important;
background-color: #fff;
/* INVERTED DYNAMIC ALIGNMENT MATH:
1. Start padding at 50vw to push all text items into the right half of the screen.
2. Add right padding to align the text with the right edge of your theme container.
*/
padding-left: 50vw !important;
padding-right: calc((100dvw - var(--theme-container-width)) / 2) !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
box-sizing: border-box !important;
min-height: fit-content !important;
display: block !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: none;
}
/* 2. Maintain centering when Blocksy triggers the active/hover state */
.ct-header [data-id="menu"] [class*="animated-submenu"].ct-active > .sub-menu {
transform: translateX(-50%) translate3d(0, 0, 0) !important;
}
/* 3. Constrain list items strictly to the right half */
.ct-header [data-id="menu"] .sub-menu > li:not(.supermenu-featured-image) {
width: 100% !important;
max-width: 100% !important; /* Removed the 45% limit since the container's 50vw padding handles the split naturally */
display: block !important;
margin: 0 !important;
padding: 0 0 0 40px !important; /* Adds a 40px gap so text doesn't touch the left image */
}
/* 4. Style the dynamically injected Title */
li.supermenu-parent-title {
margin-bottom: 20px !important;
padding-left: 40px !important; /* Matched to the items above for perfect alignment */
border: none !important;
}
li.supermenu-parent-title h2 {
font-weight: 400 !important;
margin-bottom: 12px !important;
}
/* 5. Link Styling */
.ct-header [data-id="menu"] .sub-menu > li > a.supermenu-link {
display: flex !important;
align-items: center;
gap: 12px;
padding: 12px !important;
border-bottom: 1px solid rgba(0,0,0,0.04);
background: transparent !important;
text-decoration: none !important;
border-radius: 8px;
transition: background 0.2s ease;
}
.ct-header [data-id="menu"] .sub-menu > li > a.supermenu-link:hover {
background: rgba(0,0,0,0.04) !important;
}
/* 6. Thumbnail Image formatting */
.supermenu-thumb {
flex-shrink: 0 !important;
width: 120px;
height: 120px;
border-radius: 6px;
overflow: hidden;
}
.supermenu-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* 7. Typography */
.supermenu-text-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.supermenu-title {
font-weight: 400;
font-size: 18px;
color: var(--theme-palette-color-3) !important;
}
.supermenu-excerpt {
font-size: 16px;
color: var(--theme-palette-color-3) !important;
line-height: 24px;
font-weight: 300;
}
/* 8. The Dynamic Image Container Wrapper */
li.supermenu-featured-image {
position: absolute !important;
top: 0 !important;
left: 0 !important; /* CHANGED from right: 0 */
width: 50vw !important;
max-width: 50vw !important;
height: 100% !important;
z-index: 1;
border: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #e2e4e7;
}
/* 9. The Individual Image Layers inside the wrapper */
.supermenu-bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
visibility: hidden;
/* The Animation: Scales from 105% down to 100% while fading in */
transform: scale(1.05);
transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
z-index: 1;
}
/* When a link is hovered, this class is applied via JS */
.supermenu-bg-layer.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
z-index: 2;
}
.menu-item-has-children .ct-menu-link .ct-toggle-dropdown-desktop {
transition: 200ms all ease;
}
.menu-item-has-children:hover .ct-toggle-dropdown-desktop {
transform: rotate(180deg);
}
.menu-item-has-children:hover .ct-toggle-dropdown-desktop path {
fill: var(--theme-palette-color-1);
}
nav[class*=menu] li[class*=current-menu-]>.ct-menu-link .ct-toggle-dropdown-desktop path,
nav[class*=menu] li[class*=current-menu-]>.ct-sub-menu-parent .ct-toggle-dropdown-desktop {
fill: var(--theme-palette-color-1);
}
@media screen and (max-height: 786px) {
.supermenu-thumb {
width: 62px;
height: 62px;
}
.ct-header [data-id="menu"] .sub-menu > li > a.supermenu-link {
gap: 8px;
}
.ct-header [data-id="menu"] .sub-menu > li:not(.supermenu-featured-image) {
padding: 0 0 0 24px !important
}
.ct-header [data-id="menu"] [class*="animated-submenu"] > .sub-menu{
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.ct-header [data-id="menu"] .sub-menu > li > a.supermenu-link {
padding: 8px !important;
}
}
/**
* filters
*/
.filter-label { font-size: 14px; font-weight: 400; color: var(--theme-palette-color-3); }
/* Right Side: Meta Group */
.meta-group { display: flex; align-items: center; gap: 25px; font-size: 13px; }
.project-counter { color: var(--theme-palette-color-3); }
.project-counter span { font-weight: 400; color: var(--theme-palette-color-3); }
.sort-wrapper { display: flex; align-items: center; gap: 10px; }
.sort-wrapper label { color: var(--theme-palette-color-3); white-space: nowrap; margin-bottom: 0; }
.sort-wrapper select {
border: 1px solid #CBD0D6;
min-width: 204px;
padding: 0 12px !important;
border-radius: 4px;
font-weight: 400 !important;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_286_853)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.47112 9.69066C8.34611 9.81564 8.17657 9.88585 7.99979 9.88585C7.82301 9.88585 7.65348 9.81564 7.52846 9.69066L5.64246 7.80466C5.54921 7.71138 5.48573 7.59254 5.46004 7.46318C5.43435 7.33382 5.4476 7.19974 5.49813 7.07791C5.54866 6.95609 5.63419 6.85198 5.7439 6.77878C5.85361 6.70557 5.98257 6.66655 6.11446 6.66666H9.88512C10.017 6.66655 10.146 6.70557 10.2557 6.77878C10.3654 6.85198 10.4509 6.95609 10.5014 7.07791C10.552 7.19974 10.5652 7.33382 10.5395 7.46318C10.5139 7.59254 10.4504 7.71138 10.3571 7.80466L8.47112 9.69066Z' fill='%23252833'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_286_853'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
font-size: 13px;
color: var(--theme-palette-color-3);
font-weight: 600;
cursor: pointer;
padding: 0;
outline: none;
}
/**
* Accordion
*/
/* --- Structure & Borders --- */
.accordion-item {
cursor: pointer;
overflow: hidden; /* Prevents anything from bleeding out */
}
.accordion-item.is-open .accordion-content {
padding-bottom: 12px;
}
/* Smoothly rotate the SVG icon (+ turns into x) */
.accordion-item .gspb_iconBox__wrapper img {
transition: transform 0.3s ease;
margin-top: 3px; /* Tiny adjustment to center with first line of text */
}
.accordion-item.is-open .gspb_iconBox__wrapper img {
transform: rotate(45deg);
}
/* --- The Magic CSS Grid Animation --- */
.accordion-content {
display: grid;
grid-template-rows: 0fr; /* Collapsed state */
transition: grid-template-rows 0.4s ease-out;
}
/* The direct child inside the grid MUST have overflow hidden for this trick to work */
.accordion-inner {
overflow: hidden;
}
.accordion-item.is-open .accordion-content {
grid-template-rows: 1fr; /* Expanded state */
}
/**
* Footer
*/
[data-footer*="type-1"] .ct-footer [data-row*="middle"] ul li:first-of-type {
padding: 0 0 6px 0 !important;
}
[data-footer*="type-1"] .ct-footer [data-row*="middle"] ul li {
padding: 6px 0 !important;
}
[data-footer*="type-1"] .ct-footer [data-row*="middle"] ul li a {
font-size: 16px !important;
line-height: 24px !important;
}
[data-footer*="type-1"] .ct-footer [data-row*="middle"] h4.gspb_heading {
color: #989FAB !important;
}
@media (max-width: 1000px) {
#gspb_container-id-gsbp-469cbb7.gspb_container {
row-gap: 32px !important;
}
.footer-widget-box1 {
flex-direction: column-reverse !important;
}
}
[data-footer*="type-1"] .ct-footer [data-row*="bottom"] ul {
display: flex;
gap: 24px;
}
/**
* Modal System (coluna-modal)
*/
.coluna-modal {
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 99999;
display: flex;
align-items: end;
justify-content: center;
visibility: hidden;
transition: visibility 0s 0.55s;
}
.coluna-modal.is-open {
visibility: visible;
transition: visibility 0s 0s;
}
.coluna-modal-overlay {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.6);
cursor: pointer;
opacity: 0;
transition: opacity 0.45s ease;
}
.coluna-modal.is-open .coluna-modal-overlay {
opacity: 1;
}
.coluna-modal-content {
position: relative;
width: 100%;
height: 65dvh;
background: #f4f5f7;
display: flex;
box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.18);
overflow: hidden;
transform: translateY(100%);
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.coluna-modal.is-open .coluna-modal-content {
transform: translateY(0);
}
.coluna-modal-close {
position: absolute;
top: 30px; right: 30px;
background: transparent;
border: none;
color: var(--theme-palette-color-3);
cursor: pointer;
z-index: 10;
transition: transform 0.2s;
}
.coluna-modal-close:hover {
transform: scale(1.1);
}
/* Left panel */
.coluna-modal-left {
width: 40%;
flex-shrink: 0;
}
.coluna-modal-left img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Portrait variant — white bg, contain fit for headshots */
.coluna-modal-left--portrait {
background: #fff;
}
.coluna-modal-left--portrait img {
object-fit: contain;
object-position: top center;
}
/* Right panel */
.coluna-modal-right {
flex: 1;
min-width: 0;
padding: 60px;
display: flex;
flex-direction: column;
overflow-y: auto;
background-color: var(--theme-palette-color-5);
}
/* Header */
.coluna-modal-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 30px;
margin-bottom: 40px;
flex-shrink: 0;
}
.coluna-modal-header h3 {
color: var(--theme-palette-color-3);
margin: 0 0 5px 0;
}
.coluna-modal-header p {
font-size: 15px !important;
color: var(--theme-palette-color-6);
margin: 0;
}
/* Body */
.coluna-modal-body {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* Data rows */
.modal-data-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
margin-bottom: 40px;
}
.modal-data-row.align-top { align-items: start; }
.modal-data-row.align-bottom { align-items: start; padding-bottom:40px; margin-bottom: 0; margin-top: auto; }
.modal-label {
color: var(--theme-palette-color-3);
}
.modal-label a {
color: inherit;
text-decoration: underline;
}
.modal-text p { margin: 0 0 15px 0; }
.modal-text p:last-child { margin-bottom: 0; }
.modal-projects-list a {
font-size: 14px;
color: var(--theme-palette-color-6);
text-decoration: underline;
transition: color 0.2s;
}
.modal-projects-list a:hover {
color: var(--theme-palette-color-3);
}
@media (max-width: 992px) {
.coluna-modal-content {
flex-direction: column;
overflow-y: auto;
height: 100dvh;
}
.coluna-modal-left { width: 100%; height: 300px; flex-shrink: 0; }
.coluna-modal-right { flex: none; width: 100%; padding: 32px 20px; overflow-y: visible; }
.modal-data-row { grid-template-columns: 1fr; gap: 10px; }
.modal-data-row.align-bottom { margin-top: 40px; }
.coluna-modal-close {
background-color: var(--theme-palette-color-5);
border-radius: 999px;
padding: 8px;
height: 50px;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
}
}
/* politics pages */
@media (min-width: 999px) {
/* 1. Force the parent row and content wrapper to allow sticky behavior */
.sticky-parent,
.sticky-parent .gspb_row__content {
overflow: visible !important;
clip-path: none !important;
align-items: flex-start !important; /* Stops columns from stretching to equal height */
}
/* 2. Force the sticky column to behave */
.sticky-col {
position: -webkit-sticky !important;
position: sticky !important;
top: 96px !important;
/* This tells the column to only be as tall as its text, not the whole row */
align-self: flex-start !important;
height: max-content !important;
z-index: 2 !important; /* Prevents it from hiding behind other text */
}
.sticky-col > .wp-block-greenshift-blocks-container {
height: calc(100dvh - 96px);
transition: height 0.4s ease;
}
}
/* remove sticky header in certain pages */
@media (min-width: 999px) {
body.no-sticky-header .ct-header [data-sticky] {
position: static !important;
transform: none !important;
}
body.no-sticky-header .ct-header .ct-sticky-container {
height: auto !important;
}
}
.tittle-box {
padding-top: 96px !important;
transition: padding-top 0.4s ease;
}
body.page-scrolled .tittle-box {
padding-top: 0 !important;
transition: padding-top 0.4s ease;
}
@media (max-width: 1000px) {
.tittle-box {
padding-top: 40px !important;
}
}
/* |share button */
.coluna-share-btn {
flex-direction: row-reverse;
padding: 4px 16px !important;
border-radius: 4px;
transition: 200ms all ease;
}
.coluna-share-btn:hover {
background-color: var(--theme-palette-color-3) !important;
color: var(--theme-palette-color-5) !important;
}
.coluna-share-btn:hover svg path {
fill: var(--theme-palette-color-5) !important;
}
/**
* Sassy Social Share — "More providers" overlay
* Redesigned to match Coluna theme design system
*/
/* Dark backdrop overlay */
#heateor_sss_popup_bg {
background: rgba(0, 0, 0, 0.55) !important;
}
/* Modal container */
#heateor_sss_sharing_more_providers {
background: #f4f5f7 !important;
border-radius: 12px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
width: 580px !important;
max-width: calc(100vw - 32px) !important;
height: auto !important;
max-height: 88vh !important;
overflow: hidden !important;
/* Replace the old margin-hack centering with transform */
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
}
/* Use the page font instead of plugin's Arial fallback */
#heateor_sss_sharing_more_providers,
#heateor_sss_sharing_more_providers * {
font-family: inherit !important;
}
/* Hide legacy blue title bar */
#heateor_sss_sharing_more_providers .title {
display: none !important;
}
/* Close button — circular × replacing the default image */
#heateor_sss_sharing_popup_close.close-button.separated {
position: absolute !important;
top: 14px !important;
right: 14px !important;
left: auto !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(0, 0, 0, 0.07) !important;
border: none !important;
border-radius: 50% !important;
cursor: pointer !important;
transition: background 0.2s ease !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
z-index: 10 !important;
}
#heateor_sss_sharing_popup_close.close-button.separated:hover {
background: rgba(0, 0, 0, 0.13) !important;
}
#heateor_sss_sharing_popup_close img {
display: none !important;
}
#heateor_sss_sharing_popup_close::after {
content: '×';
font-size: 22px;
line-height: 1;
color: var(--theme-palette-color-3);
font-family: inherit;
}
/* Content wrapper — top padding clears the close button */
#heateor_sss_sharing_more_content {
background: transparent !important;
border-radius: 0 !important;
width: 100% !important;
color: var(--theme-palette-color-3) !important;
padding: 56px 24px 24px 24px !important;
box-sizing: border-box !important;
}
/* Search / filter row */
#heateor_sss_sharing_more_providers .filter {
position: relative !important;
padding: 0 0 16px 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Reposition search icon to vertically centre within 40px input */
#heateor_sss_sharing_more_providers .filter svg {
position: absolute !important;
left: 12px !important;
top: 11px !important;
pointer-events: none !important;
}
/* Search input matching theme form styles */
#heateor_sss_sharing_more_providers .filter input.search {
display: block !important;
float: none !important;
width: 100% !important;
height: 40px !important;
background-color: #fff !important;
border: 1px solid #CBD0D6 !important;
border-radius: 4px !important;
padding: 0 12px 0 38px !important;
margin: 0 !important;
font-size: 14px !important;
font-weight: 300 !important;
color: var(--theme-palette-color-3) !important;
line-height: 40px !important;
box-sizing: border-box !important;
max-width: 100% !important;
outline: none !important;
}
#heateor_sss_sharing_more_providers .filter input.search:focus {
border-color: var(--theme-palette-color-3) !important;
}
/* Scrollable services container */
#heateor_sss_sharing_more_providers .all-services {
height: auto !important;
max-height: 55vh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
clear: none !important;
}
/* Grid layout replacing the float-based columns */
#heateor_sss_sharing_more_content .all-services ul.mini {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: visible !important;
width: 100% !important;
}
#heateor_sss_sharing_more_content .all-services ul.mini li {
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
background: transparent !important;
}
/* Service row link — flexbox replacing the float layout */
#heateor_sss_sharing_more_providers .all-services ul li a {
display: flex !important;
align-items: center !important;
gap: 9px !important;
padding: 7px 10px !important;
border-radius: 6px !important;
color: var(--theme-palette-color-3) !important;
font-size: 13px !important;
font-weight: 400 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: background 0.15s ease !important;
background: transparent !important;
border: none !important;
line-height: 1 !important;
height: auto !important;
}
#heateor_sss_sharing_more_providers .all-services ul li a:hover {
background: rgba(0, 0, 0, 0.05) !important;
}
/* Icon spans — override the plugin's inline 18×18 px and float */
#heateor_sss_sharing_more_providers .all-services span.heateor_sss_svg {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
border-radius: 6px !important;
float: none !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* SVG inside the icon should fill the rounded container */
#heateor_sss_sharing_more_providers .all-services span.heateor_sss_svg svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
/* Label spans — override the plugin's inline float and margin */
#heateor_sss_sharing_more_providers .all-services [class*="heateor_sss_more_label_"] {
display: block !important;
float: none !important;
margin-left: 0 !important;
line-height: 1.3 !important;
font-size: 13px !important;
color: var(--theme-palette-color-3) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Tablet: 2 columns */
@media screen and (max-width: 690px) {
#heateor_sss_sharing_more_providers {
width: calc(100vw - 32px) !important;
left: 50% !important;
margin: 0 !important;
}
#heateor_sss_sharing_more_content .all-services ul.mini {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Mobile: 1 column */
@media screen and (max-width: 400px) {
#heateor_sss_sharing_more_content .all-services ul.mini {
grid-template-columns: 1fr !important;
}
}
/* Form upload buttons */
/* Put the two file fields on one row */
.form-row-files {
display: flex;
flex-wrap: wrap;
gap: 28px;
align-items: center;
padding: 24px 0;
}
.form-row-files .file-field p {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
/* The label text ("Carregar C.V.", "Portfólio") */
.form-row-files .file-field > p > span:first-child {
white-space: nowrap;
}
/* Turn the input's wrapper into the visible button */
.form-row-files .wpcf7-form-control-wrap {
position: relative;
display: inline-block;
cursor: pointer;
}
.form-row-files .wpcf7-form-control-wrap::before {
content: attr(data-upload-label);
display: inline-block;
background: var(--theme-palette-color-3); /* dark navy */
color: #fff;
font: inherit;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 12px 22px;
border-radius: 6px;
white-space: nowrap;
transition: background .2s ease;
}
.form-row-files .wpcf7-form-control-wrap:hover::before {
background: var(--theme-palette-color-1);
}
/* The real file input: invisible, sits on top, catches the click */
.form-row-files input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
cursor: pointer;
}
.form-row-files p {
margin-bottom: 0;
}
/**
* Dynamic header
*/
/* Hero behind header is DARK -> white header content (only while at top) */
body.header-on-dark:not(.page-scrolled) #header a,
body.header-on-dark:not(.page-scrolled) #header .ct-menu-link { color: #fff !important; }
/* Dropdown-arrow SVGs you inject (they're hardcoded #252833) */
body.header-on-dark:not(.page-scrolled) #header .ct-toggle-dropdown-desktop svg path,
body.header-on-dark:not(.page-scrolled) #header .ct-toggle-dropdown-mobile svg path { fill: #fff !important; }
/* Logo (works for an ![]()
logo, raster or SVG) */
body.header-on-dark:not(.page-scrolled) .site-logo-container img { filter: brightness(0) invert(1); }
/* If your logo is inline