124-webapp/static/css/style.css
2025-09-17 16:35:11 +02:00

171 lines
No EOL
2.5 KiB
CSS

/* === Fonts === */
@font-face {
font-family: "SISTEMAS";
src: url("/static/fonts/SISTEMAS FONT BT.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "BauPro";
src: url("/static/fonts/BauPro.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* === Typography === */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "SISTEMAS", sans-serif;
color: #001F4D;
/* navy blue */
}
body,
p,
input,
button,
label,
a {
font-family: "BauPro", sans-serif;
}
/* === Layout === */
body {
background-color: #F9F9F9;
color: #333333;
margin: 0;
padding: 0;
}
header {
display: flex;
align-items: center;
gap: 1em;
padding: 1em;
background-color: #001f3f;
/* navy */
color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.logo {
height: 60px;
cursor: pointer;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
nav a:hover {
text-decoration: underline;
}
/* === Links & Buttons === */
a.link-card {
display: block;
padding: 1.2em 1em;
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
text-decoration: none;
border-radius: 10px;
text-align: center;
transition: all 0.2s ease-in-out;
}
a.link-card:hover {
background-color: #FFD600;
/* yellow hover */
color: #001F4D;
/* navy text on hover */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
button {
padding: 0.7em;
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
border: none;
border-radius: 6px;
font-size: 1em;
cursor: pointer;
}
button:hover {
background-color: #FFD600;
/* yellow hover */
color: #001F4D;
/* navy text */
}
/* === Result Page Table Styles === */
table {
border-collapse: collapse;
width: 100%;
margin-top: 1em;
}
th,
td {
border: 1px solid #ccc;
padding: 0.5em;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.color {
background-color: #ffdede;
}
.black {
background-color: #e0e0ff;
}
.totals {
font-weight: bold;
}
.container {
max-width: 900px;
margin: auto;
}
h1,
h2 {
text-align: center;
}
.alert {
padding: 1em;
border-radius: 6px;
margin-bottom: 1em;
text-align: center;
font-weight: bold;
}
.alert.success {
background-color: #4CAF50;
/* green */
color: white;
}
.alert.error {
background-color: #E6007E;
/* magenta */
color: #FFD600;
/* yellow text */
}