/* ════════════════════════════════════════════════════════════════════ EMPREGARE CANDIDATO (Nectar) — Header + Footer p/ o blog WordPress -------------------------------------------------------------------- ⚠️ NÃO é o style.css do tema. Salve como nectar-identidade.css na raiz do child theme do nectar e enfileire pelo functions.php. Autocontido: NÃO depende do Bootstrap do site do candidato — todo o layout é reescrito aqui em CSS puro. Tudo escopado em .emp-* para não vazar no conteúdo dos posts do blog. Identidade extraída de: _Layout.cshtml (footer), Headers/_Candidato.cshtml (header), scss/global.scss + modulos/_colors.scss (cores/sombra/tokens). ════════════════════════════════════════════════════════════════════ */ /* ── TOKENS DA MARCA (fiéis a _colors.scss / global.scss) ──────────── */ :root { --emp-primary: #1B1B63; /* primária (índigo) — botões, títulos */ --emp-primary-dark: #10103C; /* principal escura — hover */ --emp-secondary: #3E3EDF; /* azul-violeta — destaques/links */ --emp-info: #C3C3EF; /* lavanda clara */ --emp-info-hover: #E1E1F7; /* mix(info, branco) — hover de itens */ --emp-principal-media:#4985FD; /* azul médio */ --emp-highlight: #FF8A00; /* laranja — destaque/badge */ --emp-text: #292929; /* neutra escura — texto */ --emp-text-muted: #666666; /* neutra média */ --emp-text-light: #A3A3A3; /* neutra clara */ --emp-white: #FFFFFF; --emp-gray-100: #F9FAFB; --emp-gray-200: #F5F5F5; /* cinza clara */ --emp-gray-300: #E0E0E0; /* cinza média — bordas */ --emp-gray-blue: #F2F5FB; --emp-font: 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; --emp-radius: 0.75rem; /* --bs-border-radius do site */ --emp-radius-sm: 0.5rem; --emp-radius-pill: 9999px; --emp-shadow-1: 0 4px 8px rgba(0, 0, 0, .14); /* .sombra-1 */ --emp-shadow-menu: 0 12px 32px rgba(16, 16, 60, .14), 0 0 0 1px rgba(16, 16, 60, .05); --emp-header-h: 60px; --emp-z-header: 1020; --emp-z-backdrop:1040; --emp-z-drawer: 1045; --emp-z-menu: 1030; } /* ── RESET MÍNIMO escopado (NÃO global — não mexe no conteúdo do post) ── */ .emp-header *, .emp-header *::before, .emp-header *::after, .emp-offcanvas *, .emp-offcanvas *::before, .emp-offcanvas *::after, .emp-offcanvas-backdrop, .emp-footer *, .emp-footer *::before, .emp-footer *::after { box-sizing: border-box; margin: 0; padding: 0; } .emp-header, .emp-offcanvas, .emp-footer { font-family: var(--emp-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; color: var(--emp-text); } .emp-header a, .emp-offcanvas a, .emp-footer a { color: inherit; text-decoration: none; } .emp-header ul, .emp-offcanvas ul, .emp-footer ul { list-style: none; } .emp-header img, .emp-offcanvas img, .emp-footer img { display: block; max-width: 100%; height: auto; } .emp-header button, .emp-offcanvas button { /* ⚠️ font-family (NÃO 'font: inherit'): evita herdar o tamanho do do tema do blog. O tamanho vem das regras de cada componente. */ font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; } body.emp-no-scroll { overflow: hidden; } /* Skip link */ .emp-skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1100; padding: .6rem 1.25rem; background: var(--emp-primary); color: #fff; font-family: var(--emp-font); font-weight: 600; border-radius: var(--emp-radius); transition: top .25s; } .emp-skip-link:focus { top: 1rem; } .emp-header a:focus-visible, .emp-header button:focus-visible, .emp-offcanvas a:focus-visible, .emp-offcanvas button:focus-visible, .emp-footer a:focus-visible, .emp-footer button:focus-visible { outline: 2px solid var(--emp-secondary); outline-offset: 2px; border-radius: var(--emp-radius-sm); } /* ── BOTÕES ────────────────────────────────────────────────────────── */ .emp-header .emp-btn, .emp-offcanvas .emp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: .6rem 1.1rem; border-radius: var(--emp-radius); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color .18s, color .18s, border-color .18s; } .emp-header .emp-btn-primary, .emp-offcanvas .emp-btn-primary { background: var(--emp-primary); color: #fff; border-color: var(--emp-primary); } .emp-header .emp-btn-primary:hover, .emp-offcanvas .emp-btn-primary:hover { background: var(--emp-primary-dark); border-color: var(--emp-primary-dark); color: #fff; } .emp-header .emp-btn-outline, .emp-offcanvas .emp-btn-outline { background: transparent; color: var(--emp-primary); border-color: var(--emp-primary); } .emp-header .emp-btn-outline:hover, .emp-offcanvas .emp-btn-outline:hover { background: var(--emp-primary); color: #fff; } .emp-offcanvas .emp-btn-block { width: 100%; } /* ════════════════════════════════════════════════════════════════════ === HEADER === (barra branca fixa no topo, sombra suave) Breakpoints fiéis ao site: nav ≥992 · idioma ≥1200 · "Acelere" ≥1400. ════════════════════════════════════════════════════════════════════ */ .emp-header { position: sticky; top: 0; z-index: var(--emp-z-header); width: 100%; background: var(--emp-white); box-shadow: var(--emp-shadow-1); } .emp-header__inner { max-width: 1320px; margin-inline: auto; min-height: var(--emp-header-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem clamp(.9rem, 2vw, 1.5rem); } .emp-logo { display: inline-flex; align-items: center; flex-shrink: 0; } .emp-logo img { height: 40px; width: auto; } .emp-logo:hover { opacity: .9; } @media (max-width: 360px) { .emp-logo img { height: 32px; } } .emp-header__right { display: flex; align-items: center; gap: .5rem; } /* Links de navegação (desktop) */ .emp-nav-links { display: none; align-items: center; gap: .15rem; } @media (min-width: 992px) { .emp-nav-links { display: flex; } } .emp-nav__link { display: inline-block; padding: .45rem .7rem; font-size: 14px; font-weight: 400; color: var(--emp-text); border-radius: var(--emp-radius-sm); white-space: nowrap; transition: color .15s; } .emp-nav__link:hover, .emp-nav__link:focus-visible { color: var(--emp-primary); text-decoration: underline; } .emp-nav__link--xxl { display: none; } @media (min-width: 1400px) { .emp-nav__link--xxl { display: inline-block; } } /* Ações (botões + idioma + hambúrguer) */ .emp-header__actions { display: flex; align-items: center; gap: .5rem; } .emp-header .emp-btn-cadastrar { display: none; } @media (min-width: 992px) { .emp-header .emp-btn-cadastrar { display: inline-flex; } } /* Dropdown de idioma (desktop ≥1200) */ .emp-lang { position: relative; display: none; } @media (min-width: 1200px) { .emp-lang { display: block; } } .emp-lang__toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: 14px; font-weight: 600; color: var(--emp-primary); padding: .55rem .9rem; border: 1px solid var(--emp-primary); border-radius: var(--emp-radius); background: transparent; transition: background-color .18s, color .18s; } .emp-lang__toggle:hover { background: var(--emp-primary); color: #fff; } .emp-lang__toggle .emp-chev { font-size: .8em; transition: transform .2s; } .emp-lang.is-open .emp-lang__toggle .emp-chev { transform: rotate(180deg); } .emp-lang__menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 160px; background: #fff; border: 1px solid var(--emp-gray-300); border-radius: var(--emp-radius); box-shadow: var(--emp-shadow-menu); padding: .35rem; display: none; z-index: var(--emp-z-menu); } .emp-lang.is-open .emp-lang__menu { display: block; } .emp-lang__item { display: block; padding: .5rem .75rem; border-radius: var(--emp-radius-sm); color: var(--emp-text); font-size: 14px; } .emp-lang__item:hover { background: var(--emp-info-hover); color: var(--emp-primary); } /* Hambúrguer (mobile <992) */ .emp-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--emp-radius-sm); color: var(--emp-primary); font-size: 1.7rem; line-height: 1; } .emp-burger:hover { background: var(--emp-gray-200); } @media (min-width: 992px) { .emp-burger { display: none; } } /* ════════════════════════════════════════════════════════════════════ === OFFCANVAS (menu lateral mobile, desliza da direita) === ════════════════════════════════════════════════════════════════════ */ .emp-offcanvas-backdrop { position: fixed; inset: 0; background: rgba(16, 16, 60, .5); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: var(--emp-z-backdrop); } .emp-offcanvas-backdrop.is-open { opacity: 1; visibility: visible; } @media (min-width: 992px) { .emp-offcanvas-backdrop { display: none; } } .emp-offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: min(100%, 420px); display: flex; flex-direction: column; background: var(--emp-white); box-shadow: -8px 0 32px rgba(0, 0, 0, .18); transform: translateX(100%); transition: transform .3s ease; z-index: var(--emp-z-drawer); overflow: hidden; } .emp-offcanvas.is-open { transform: translateX(0); } @media (min-width: 992px) { .emp-offcanvas { display: none; } } .emp-offcanvas__header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--emp-gray-200); flex-shrink: 0; } .emp-offcanvas__title { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; font-weight: 700; } .emp-offcanvas__close { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--emp-radius-sm); color: var(--emp-text-muted); font-size: 1.2rem; } .emp-offcanvas__close:hover { background: var(--emp-gray-200); color: var(--emp-primary); } .emp-offcanvas__avatar { width: 32px; height: 32px; border-radius: 50%; } .emp-offcanvas__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; } /* idioma dentro do offcanvas (full width) */ .emp-offcanvas .emp-lang { display: block; position: relative; margin-bottom: 1.25rem; } .emp-offcanvas .emp-lang__toggle { width: 100%; justify-content: space-between; } .emp-offcanvas .emp-lang__menu { position: static; width: 100%; box-shadow: none; margin-top: .35rem; } .emp-offcanvas__link { display: block; padding: .65rem .9rem; margin-bottom: .5rem; border-radius: var(--emp-radius-sm); color: var(--emp-text); font-size: 14px; transition: background-color .2s; } .emp-offcanvas__link:hover { background: var(--emp-info-hover); color: var(--emp-primary); } .emp-offcanvas .emp-btn-primary { margin-bottom: .9rem; } /* ════════════════════════════════════════════════════════════════════ === FOOTER === (branco, logo + colunas + signpost + barra legal) ════════════════════════════════════════════════════════════════════ */ .emp-footer { background: var(--emp-white); color: var(--emp-text); border-top: 1px solid var(--emp-gray-200); padding-top: 3rem; } .emp-footer__container { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1rem, 3vw, 1.5rem); } .emp-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; } @media (max-width: 991.98px) { .emp-footer__top { grid-template-columns: 1fr 1fr; } .emp-footer__brand { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .emp-footer__top { grid-template-columns: 1fr; } } .emp-footer__brand-logo img { height: 43px; width: auto; margin-bottom: 1.25rem; } .emp-footer__brand-text { font-size: 14px; color: var(--emp-text); max-width: 34ch; } .emp-footer__col-title { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--emp-text); margin-bottom: 1rem; } .emp-footer__links { display: grid; gap: .35rem; } .emp-footer__links a { font-size: 14px; color: var(--emp-text); width: fit-content; transition: color .15s; } .emp-footer__links a:hover, .emp-footer__links a:focus-visible { color: var(--emp-primary); text-decoration: underline; } /* Faixa "porta única" para empresas */ .emp-footer__signpost { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-top: 1.5rem; padding: .7rem 1.05rem; border: 1px solid rgba(27, 27, 99, .25); border-radius: 12px; background: rgba(27, 27, 99, .05); font-size: .85rem; } .emp-footer__signpost-prompt { color: var(--emp-text); } .emp-footer__signpost-prompt i { color: var(--emp-primary); margin-right: .15rem; } .emp-footer__signpost-link { font-weight: 600; color: var(--emp-primary); white-space: nowrap; } .emp-footer__signpost-link:hover { text-decoration: underline; } .emp-footer__signpost-link i { font-size: .9em; margin-left: .1rem; } .emp-footer__divider { border: 0; border-top: 1px solid var(--emp-gray-200); margin: 2.5rem 0 0; } /* Barra legal */ .emp-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0; } .emp-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; } .emp-footer__legal a, .emp-footer__legal button { font-size: 13px; color: var(--emp-text); background: none; border: 0; cursor: pointer; font-family: inherit; } .emp-footer__legal a:hover, .emp-footer__legal button:hover { color: var(--emp-primary); text-decoration: underline; } .emp-footer__social { display: flex; gap: 1rem; } .emp-footer__social a { font-size: 25px; color: var(--emp-primary); line-height: 1; transition: color .15s, transform .15s; } .emp-footer__social a:hover { color: var(--emp-secondary); transform: translateY(-2px); } .emp-footer__copy { font-size: 13px; color: var(--emp-text-muted); } @media (max-width: 575.98px) { .emp-footer__bottom { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .emp-footer__social a:hover { transform: none; } }