Global CSS - ATUALIZADO - Estilo para dar os primeiros passos ao criar um site
Atributos e valores de estilo padrão com reset e alguns elementos específicos usados em nossos sites
<style> /* GLOBAL CSS */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
body { font-family: 'Open Sans', sans-serif; font-size: 16px; margin: 0px; } h1, h2, h3, h4, h5, h6, input, input.formInput::placeholder, input.formTextArea::placeholder, input.formLink::placeholder, a.formLink, textarea, label { font-family: 'Open Sans', sans-serif; }
a { outline: none; transition: 0.3s ease; text-decoration:none; } ul { list-style: none; padding: 0px; }
/* FONT ALIGN */ .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } .imgFluid { max-width: 100%; height: auto; } /* FONT WEIGHTS */
.fLight { font-weight: 200; } .fLight300 { font-weight: 300; } .fRegular { font-weight: 400; } .fBold { font-weight: 700; } .fBlack { font-weight: 900; }
/* FONT SIZES */ .f45 { font-size: 45px; } .f30 { font-size: 30px; }
.f20 { font-size: 20px; }
.f16 { font-size: 16px; } /* DEFAULT COLORS */
.cLight { color: white; } .cCark { color: #000 }
.cGrey { color: #ccc; }
.cPrimary { color: #0198db; }
.cSecondary { color: #163d4f; } /* FORM GLOBAL CSS */ label { display: block; font-size: 14px; color: #4A596B; font-weight: bold; margin-bottom: 5px; } .formControl { width: 98%; background-color: #f9f9f9; border: none; border-radius: 5px; padding: 10px 5px; margin-bottom: 10px; outline: none; box-shadow: 5px 5px 20px #f6f6f6 inset; } .formControl:focus { box-shadow: 0 0 3px 2px #c9daf9bf; } textarea { height: 80px; } /* BUTTONS */ .btn-default { width: auto; background-color: #0198db; border-radius: 5px; font-weight: 500; padding: 10px 15px; display: inline-block; align-items: center; border: none; font-size: 14px; transition: 0.2s ease; color: #fff; cursor: pointer; } .btn-default:hover { background-color: #00638E; } /* BREADCRUMBS */ .sectionBreadcrumbs { background-color: #f9f9f9; padding-block: 15px; } .sectionBreadcrumbs .container { display: flex; justify-content: space-between; } .sectionBreadcrumbs .container h1.pageIdentify { font-size: 20px; } .sectionBreadcrumbs .container ol#breadcrumb { display: flex; gap: 10px; list-style: none; padding: 0px; } .sectionBreadcrumbs .container ol#breadcrumb li { display: flex; gap: 10px; } .sectionBreadcrumbs .container ol#breadcrumb li a { color: #000; } .sectionBreadcrumbs .container ol#breadcrumb li a:hover { color: #0098db; } .sectioNBreadcrumbs .container #pageName { text-transform: capitalize; } @media (max-width: 772px) { .sectionBreadcrumbs .container { display: flex; justify-content: space-between; flex-direction: column; flex-wrap: wrap; align-items: center; } }
</style>