|
|
| Linha 1: |
Linha 1: |
| /* Identidade visual Caninos Inc. para o Vector legado.
| |
| * Baseada nos tokens públicos de canisinc.com.br. */
| |
| @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
| |
|
| |
|
| :root {
| |
| --caninos-green-950: #072316;
| |
| --caninos-green-900: #0d3321;
| |
| --caninos-green-800: #16452d;
| |
| --caninos-green-700: #1f6a40;
| |
| --caninos-green-600: #2e8752;
| |
| --caninos-lime: #d7ec63;
| |
| --caninos-cream: #f7faf4;
| |
| --caninos-white: #fff;
| |
| --caninos-ink: #0f1d16;
| |
| --caninos-text: #435247;
| |
| --caninos-line: #dfe9dd;
| |
| --caninos-shadow: 0 20px 50px rgba(7, 35, 22, 0.12);
| |
| }
| |
|
| |
| html,
| |
| body {
| |
| background: var(--caninos-cream);
| |
| }
| |
|
| |
| body,
| |
| button,
| |
| input,
| |
| select,
| |
| textarea {
| |
| color: var(--caninos-text);
| |
| font-family: "Manrope", Arial, Helvetica, sans-serif;
| |
| }
| |
|
| |
| body {
| |
| background:
| |
| radial-gradient(circle at 85% 8%, rgba(46, 135, 82, 0.11), transparent 25rem),
| |
| linear-gradient(180deg, #f4faf0 0, var(--caninos-cream) 24rem);
| |
| }
| |
|
| |
| a,
| |
| .mw-parser-output a.extiw,
| |
| .mw-parser-output a.external {
| |
| color: var(--caninos-green-700);
| |
| }
| |
|
| |
| a:hover,
| |
| a:focus {
| |
| color: var(--caninos-green-900);
| |
| }
| |
|
| |
| /* Faixa superior e navegação */
| |
| #mw-page-base {
| |
| height: 8.6rem;
| |
| background: linear-gradient(135deg, var(--caninos-green-950), var(--caninos-green-800));
| |
| box-shadow: 0 12px 32px rgba(7, 35, 22, 0.18);
| |
| }
| |
|
| |
| #mw-head-base {
| |
| height: 8.6rem;
| |
| margin-left: 12.5rem;
| |
| }
| |
|
| |
| #mw-panel {
| |
| top: 0;
| |
| width: 12.5rem;
| |
| padding-top: 0;
| |
| background: var(--caninos-green-900);
| |
| box-shadow: 12px 0 34px rgba(7, 35, 22, 0.1);
| |
| }
| |
|
| |
| #p-logo,
| |
| #p-logo a {
| |
| width: 12.5rem;
| |
| height: 8.6rem;
| |
| }
| |
|
| |
| #p-logo a {
| |
| box-sizing: border-box;
| |
| background-image: url('/images/canino-dnausp-white.png') !important;
| |
| background-position: center;
| |
| background-size: 10.5rem auto;
| |
| }
| |
|
| |
| #mw-panel .portal {
| |
| margin: 0 1rem;
| |
| padding: 0.75rem 0 0.9rem;
| |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1);
| |
| }
| |
|
| |
| #mw-panel .portal .p-lang-btn,
| |
| #mw-panel .portal h3 {
| |
| padding: 0 0.25rem 0.45rem;
| |
| color: var(--caninos-lime);
| |
| font-size: 0.72rem;
| |
| font-weight: 800;
| |
| letter-spacing: 0.08em;
| |
| text-transform: uppercase;
| |
| }
| |
|
| |
| #mw-panel .portal .body {
| |
| margin: 0;
| |
| }
| |
|
| |
| #mw-panel .portal .body li {
| |
| padding: 0.24rem 0;
| |
| font-size: 0.82rem;
| |
| line-height: 1.35;
| |
| }
| |
|
| |
| #mw-panel .portal .body li a,
| |
| #mw-panel .portal .body li a:visited {
| |
| color: rgba(255, 255, 255, 0.82);
| |
| }
| |
|
| |
| #mw-panel .portal .body li a:hover {
| |
| color: var(--caninos-white);
| |
| text-decoration: none;
| |
| }
| |
|
| |
| #mw-head {
| |
| top: 0;
| |
| height: 8.6rem;
| |
| color: var(--caninos-white);
| |
| }
| |
|
| |
| #p-personal {
| |
| top: 0.7rem;
| |
| right: 1.5rem;
| |
| }
| |
|
| |
| #p-personal ul {
| |
| padding: 0.45rem 0.8rem;
| |
| border: 1px solid rgba(255, 255, 255, 0.14);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, 0.08);
| |
| }
| |
|
| |
| #p-personal li a,
| |
| #p-personal li a:visited,
| |
| #p-personal li {
| |
| color: rgba(255, 255, 255, 0.86);
| |
| }
| |
|
| |
| #left-navigation,
| |
| #right-navigation {
| |
| margin-top: 5.2rem;
| |
| }
| |
|
| |
| #left-navigation {
| |
| margin-left: 13.5rem;
| |
| }
| |
|
| |
| .vector-menu-tabs,
| |
| .vector-menu-tabs a,
| |
| .vector-menu-tabs .selected,
| |
| .vector-menu-tabs span {
| |
| background-image: none;
| |
| }
| |
|
| |
| .vector-menu-tabs li {
| |
| margin-right: 0.25rem;
| |
| background: transparent;
| |
| }
| |
|
| |
| .vector-menu-tabs li a {
| |
| height: 2.6rem;
| |
| padding: 0 0.8rem;
| |
| color: rgba(255, 255, 255, 0.8);
| |
| font-weight: 700;
| |
| line-height: 2.6rem;
| |
| }
| |
|
| |
| .vector-menu-tabs li.selected,
| |
| .vector-menu-tabs li:hover {
| |
| border-radius: 8px 8px 0 0;
| |
| background: var(--caninos-cream);
| |
| }
| |
|
| |
| .vector-menu-tabs li.selected a,
| |
| .vector-menu-tabs li:hover a {
| |
| color: var(--caninos-green-900);
| |
| }
| |
|
| |
| #p-search {
| |
| margin-right: 1.5rem;
| |
| }
| |
|
| |
| #simpleSearch {
| |
| min-width: 17rem;
| |
| height: 2.55rem;
| |
| border: 1px solid rgba(255, 255, 255, 0.24);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, 0.96);
| |
| box-shadow: 0 12px 28px rgba(7, 35, 22, 0.14);
| |
| }
| |
|
| |
| #simpleSearch input {
| |
| padding-left: 1rem;
| |
| }
| |
|
| |
| /* Conteúdo */
| |
| .mw-body {
| |
| box-sizing: border-box;
| |
| margin: 2rem 2rem 2rem 14.5rem;
| |
| padding: clamp(1.5rem, 3vw, 3rem);
| |
| border: 1px solid var(--caninos-line);
| |
| border-radius: 24px;
| |
| background: rgba(255, 255, 255, 0.96);
| |
| box-shadow: var(--caninos-shadow);
| |
| }
| |
|
| |
| .mw-body-content {
| |
| max-width: 86rem;
| |
| color: var(--caninos-text);
| |
| font-size: 0.98rem;
| |
| line-height: 1.72;
| |
| }
| |
|
| |
| .mw-body h1,
| |
| .mw-body-content h1,
| |
| .mw-body-content h2,
| |
| .mw-body-content h3,
| |
| .mw-body-content h4 {
| |
| color: var(--caninos-ink);
| |
| font-family: "Manrope", Arial, Helvetica, sans-serif;
| |
| font-weight: 800;
| |
| }
| |
|
| |
| .mw-body h1,
| |
| .mw-body-content h1 {
| |
| font-size: clamp(2rem, 4vw, 3.25rem);
| |
| letter-spacing: -0.035em;
| |
| }
| |
|
| |
| .mw-body-content h2 {
| |
| margin-top: 2rem;
| |
| padding-bottom: 0.55rem;
| |
| border-bottom: 2px solid var(--caninos-line);
| |
| font-size: 1.55rem;
| |
| }
| |
|
| |
| .mw-body-content h2::after {
| |
| display: block;
| |
| width: 4rem;
| |
| height: 3px;
| |
| margin: 0.55rem 0 -0.65rem;
| |
| border-radius: 999px;
| |
| background: var(--caninos-green-600);
| |
| content: "";
| |
| }
| |
|
| |
| .mw-body-content h3 {
| |
| font-size: 1.2rem;
| |
| }
| |
|
| |
| .mw-body-content code,
| |
| .mw-body-content pre,
| |
| .mw-code {
| |
| border-color: var(--caninos-line);
| |
| border-radius: 10px;
| |
| background: #f1f7ee;
| |
| }
| |
|
| |
| .mw-body-content pre,
| |
| .mw-code {
| |
| padding: 1rem 1.2rem;
| |
| }
| |
|
| |
| .wikitable {
| |
| overflow: hidden;
| |
| border: 1px solid var(--caninos-line);
| |
| border-radius: 12px;
| |
| background: var(--caninos-white);
| |
| box-shadow: 0 10px 26px rgba(7, 35, 22, 0.06);
| |
| }
| |
|
| |
| .wikitable > tr > th,
| |
| .wikitable > * > tr > th {
| |
| border-color: var(--caninos-green-800);
| |
| color: var(--caninos-white);
| |
| background: var(--caninos-green-800);
| |
| }
| |
|
| |
| .wikitable > tr > td,
| |
| .wikitable > * > tr > td {
| |
| border-color: var(--caninos-line);
| |
| background: var(--caninos-white);
| |
| }
| |
|
| |
| .toc,
| |
| .mw-warning,
| |
| .catlinks {
| |
| border: 1px solid var(--caninos-line);
| |
| border-radius: 14px;
| |
| background: #f3f8ef;
| |
| }
| |
|
| |
| .toc {
| |
| padding: 0.8rem 1.1rem;
| |
| }
| |
|
| |
| .mw-ui-button,
| |
| .oo-ui-buttonElement-button {
| |
| border-radius: 8px !important;
| |
| font-weight: 800 !important;
| |
| }
| |
|
| |
| .mw-ui-button.mw-ui-progressive,
| |
| .oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button {
| |
| border-color: var(--caninos-green-700) !important;
| |
| background: var(--caninos-green-700) !important;
| |
| }
| |
|
| |
| input,
| |
| textarea,
| |
| select {
| |
| border-color: var(--caninos-line) !important;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| input:focus,
| |
| textarea:focus,
| |
| select:focus {
| |
| border-color: var(--caninos-green-600) !important;
| |
| box-shadow: 0 0 0 3px rgba(46, 135, 82, 0.14);
| |
| }
| |
|
| |
| #footer {
| |
| box-sizing: border-box;
| |
| margin: 1rem 2rem 2rem 14.5rem;
| |
| padding: 1.5rem 2rem;
| |
| border-radius: 18px;
| |
| color: rgba(255, 255, 255, 0.76);
| |
| background: var(--caninos-green-950);
| |
| }
| |
|
| |
| #footer a {
| |
| color: var(--caninos-lime);
| |
| }
| |
|
| |
| @media screen and (max-width: 850px) {
| |
| #mw-page-base {
| |
| height: 7.5rem;
| |
| }
| |
|
| |
| #mw-head-base,
| |
| #mw-head,
| |
| #mw-panel {
| |
| margin-left: 0;
| |
| }
| |
|
| |
| #mw-panel {
| |
| position: relative;
| |
| display: block;
| |
| width: 100%;
| |
| height: 6.5rem;
| |
| background: var(--caninos-green-900);
| |
| }
| |
|
| |
| #p-logo,
| |
| #p-logo a {
| |
| width: 12rem;
| |
| height: 6.5rem;
| |
| }
| |
|
| |
| #p-logo {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0.5rem;
| |
| display: block !important;
| |
| z-index: 4;
| |
| }
| |
|
| |
| #p-logo a {
| |
| display: block !important;
| |
| background-size: 10.5rem auto;
| |
| }
| |
|
| |
| #mw-panel .portal {
| |
| display: none;
| |
| }
| |
|
| |
| #p-personal {
| |
| right: 0.75rem;
| |
| }
| |
|
| |
| #left-navigation {
| |
| margin-left: 0.6rem;
| |
| }
| |
|
| |
| #right-navigation {
| |
| margin-right: 0.6rem;
| |
| }
| |
|
| |
| #right-navigation .vector-menu-tabs li:not(.selected) a {
| |
| color: var(--caninos-green-900);
| |
| }
| |
|
| |
| #p-search {
| |
| display: none;
| |
| }
| |
|
| |
| .mw-body,
| |
| #footer {
| |
| margin-right: 0.75rem;
| |
| margin-left: 0.75rem;
| |
| }
| |
|
| |
| .mw-body {
| |
| margin-top: 1rem;
| |
| padding: 1.25rem;
| |
| border-radius: 16px;
| |
| }
| |
| }
| |
|
| |
| @media print {
| |
| .mw-body {
| |
| margin: 0;
| |
| border: 0;
| |
| box-shadow: none;
| |
| }
| |
| }
| |