/**
* CRI Style Plugin v1.0
* Stile ufficiale Croce Rossa Italiana — Comitato di Varese
*
* Utilizzo:
*
*
*
* Tutte le classi hanno prefisso "cri-" per evitare conflitti.
* Le custom properties :root possono essere sovrascritte per personalizzare.
*/
/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Slab:wght@400;700&display=swap');
/* =============================================
1. Design Tokens (Custom Properties)
============================================= */
:root {
/* Palette */
--cri-red: #CC0000;
--cri-red-dark: #A30000;
--cri-red-light: #E63939;
--cri-dark: #363537;
--cri-gray: #777777;
--cri-gray-light: #E5E5E5;
--cri-white: #FEFEFE;
--cri-black: #1A1A1A;
--cri-green: #2D8A4E;
--cri-green-dark: #236B3E;
--cri-orange: #F57C00;
--cri-yellow: #E6A817;
/* Typography */
--cri-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
--cri-font-slab: 'Roboto Slab', Georgia, serif;
/* Shadows */
--cri-shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
--cri-shadow-md: 0 4px 12px rgba(0,0,0,0.10);
--cri-shadow-lg: 0 8px 24px rgba(0,0,0,0.14);
/* Borders */
--cri-radius: 6px;
--cri-radius-lg: 12px;
}
/* =============================================
2. Reset & Base
============================================= */
.cri-scope *, .cri-scope *::before, .cri-scope *::after {
box-sizing: border-box;
}
.cri-scope {
font-family: var(--cri-font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--cri-black);
margin: 0;
}
/* Se applicato a , imposta sfondo e margine globali */
body.cri-scope {
background: linear-gradient(180deg, var(--cri-white) 0%, #F5F5F5 100%);
}
.cri-scope a { color: var(--cri-red); text-decoration: none; }
.cri-scope a:hover { color: var(--cri-red-dark); text-decoration: underline; }
.cri-scope h1, .cri-scope h2, .cri-scope h3,
.cri-scope h4, .cri-scope h5, .cri-scope h6 {
font-family: var(--cri-font-slab);
font-weight: 700;
color: var(--cri-dark);
}
/* Container generico (max 1200px) */
.cri-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
/* =============================================
3. Topbar
============================================= */
.cri-topbar {
background: var(--cri-dark);
color: #fff;
font-size: 13px;
padding: 6px 0;
text-align: center;
}
.cri-topbar a { color: #ddd; }
.cri-topbar a:hover { color: #fff; text-decoration: none; }
/* =============================================
4. Navbar
============================================= */
.cri-navbar {
background: #fff;
border-bottom: 3px solid var(--cri-red);
padding: 12px 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--cri-shadow-sm);
}
.cri-navbar .cri-container {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Brand (logo + testo) */
.cri-navbar-brand {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.cri-navbar-brand:hover { text-decoration: none; }
.cri-navbar-brand img { height: 48px; }
.cri-navbar-brand span {
font-family: var(--cri-font-slab);
font-size: 20px;
font-weight: 700;
color: var(--cri-red);
line-height: 1.2;
}
.cri-navbar-brand small {
display: block;
font-family: var(--cri-font-sans);
font-size: 12px;
font-weight: 400;
color: var(--cri-gray);
}
/* Nav links */
.cri-nav-links {
display: flex;
gap: 8px;
align-items: center;
}
.cri-nav-links a {
color: var(--cri-dark);
font-size: 14px;
font-weight: 500;
padding: 6px 14px;
border-radius: var(--cri-radius);
transition: background 0.2s;
text-decoration: none;
}
.cri-nav-links a:hover {
background: var(--cri-gray-light);
text-decoration: none;
}
.cri-nav-links a.cri-active {
background: var(--cri-red);
color: #fff;
}
/* Hamburger toggle (hidden on desktop) */
.cri-nav-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
color: var(--cri-dark);
cursor: pointer;
padding: 4px 8px;
}
/* =============================================
5. Buttons
============================================= */
.cri-btn {
display: inline-block;
border: none;
padding: 12px 28px;
border-radius: var(--cri-radius);
font-family: var(--cri-font-sans);
font-weight: 600;
font-size: 15px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
line-height: 1.4;
}
.cri-btn:hover { text-decoration: none; transform: translateY(-1px); }
/* Varianti */
.cri-btn-primary {
background: var(--cri-red);
color: #fff;
box-shadow: 0 2px 4px rgba(204,0,0,0.20);
}
.cri-btn-primary:hover {
background: var(--cri-red-dark);
color: #fff;
box-shadow: 0 4px 8px rgba(204,0,0,0.30);
}
.cri-btn-outline {
background: transparent;
color: var(--cri-red);
border: 2px solid var(--cri-red);
padding: 10px 26px;
}
.cri-btn-outline:hover {
background: var(--cri-red);
color: #fff;
}
.cri-btn-dark {
background: var(--cri-dark);
color: #fff;
}
.cri-btn-dark:hover {
background: #222;
color: #fff;
}
.cri-btn-gray {
background: var(--cri-gray);
color: #fff;
font-weight: 500;
}
.cri-btn-gray:hover {
background: #555;
color: #fff;
}
.cri-btn-success {
background: var(--cri-green);
color: #fff;
}
.cri-btn-success:hover {
background: var(--cri-green-dark);
color: #fff;
}
.cri-btn-block {
display: block;
width: 100%;
}
.cri-btn-sm {
padding: 8px 16px;
font-size: 13px;
}
.cri-btn-lg {
padding: 16px 36px;
font-size: 17px;
}
/* =============================================
6. Section Title
============================================= */
.cri-section-title {
background: var(--cri-red);
color: #fff;
font-family: var(--cri-font-slab);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 14px 24px;
margin: 2rem 0 1rem;
border-radius: var(--cri-radius);
position: relative;
}
.cri-section-title::after {
content: '';
position: absolute;
bottom: -6px;
left: 24px;
width: 40px;
height: 3px;
background: var(--cri-red-light);
border-radius: 2px;
}
/* =============================================
7. Cards
============================================= */
.cri-card {
background: #fff;
border-radius: var(--cri-radius-lg);
box-shadow: var(--cri-shadow-md);
padding: 24px;
margin-bottom: 1rem;
transition: box-shadow 0.2s, transform 0.2s;
border: 1px solid rgba(0,0,0,0.06);
}
.cri-card:hover {
box-shadow: var(--cri-shadow-lg);
transform: translateY(-2px);
}
.cri-card-title {
font-family: var(--cri-font-slab);
font-size: 16px;
color: var(--cri-dark);
margin: 0 0 12px;
}
/* Card senza hover lift */
.cri-card-flat { transition: none; }
.cri-card-flat:hover { box-shadow: var(--cri-shadow-md); transform: none; }
/* =============================================
8. Alerts
============================================= */
.cri-alert {
border-left: 4px solid var(--cri-red);
border-radius: var(--cri-radius);
padding: 20px 24px;
margin: 1rem 0;
font-size: 16px;
}
.cri-alert-warning {
background: #FFF3CD;
}
.cri-alert-danger {
background: #FDE8E8;
}
.cri-alert-success {
background: #D4EDDA;
border-left-color: var(--cri-green);
}
.cri-alert-info {
background: #D1ECF1;
border-left-color: #0C7CD5;
}
.cri-alert strong { color: var(--cri-red); }
.cri-alert-success strong { color: var(--cri-green); }
/* =============================================
9. Tables
============================================= */
.cri-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.cri-table thead th {
background: var(--cri-dark);
color: #fff;
font-weight: 600;
border: none;
padding: 10px 14px;
text-align: left;
}
.cri-table tbody td,
.cri-table tbody th {
vertical-align: middle;
padding: 10px 14px;
border-bottom: 1px solid var(--cri-gray-light);
}
.cri-table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(204, 0, 0, 0.03);
}
.cri-table-hover > tbody > tr:hover > * {
background-color: rgba(204, 0, 0, 0.06);
}
/* =============================================
10. Forms
============================================= */
.cri-input,
.cri-select,
.cri-textarea {
display: block;
width: 100%;
border-radius: var(--cri-radius);
border: 1px solid #ccc;
padding: 10px 14px;
font-family: var(--cri-font-sans);
font-size: 15px;
transition: border-color 0.2s, box-shadow 0.2s;
background: #fff;
color: var(--cri-black);
}
.cri-input:focus,
.cri-select:focus,
.cri-textarea:focus {
border-color: var(--cri-red);
box-shadow: 0 0 0 3px rgba(204,0,0,0.12);
outline: none;
}
.cri-textarea { resize: vertical; min-height: 120px; }
.cri-label {
display: block;
font-weight: 500;
font-size: 14px;
color: var(--cri-dark);
margin-bottom: 4px;
}
.cri-form-group {
margin-bottom: 16px;
}
/* =============================================
11. Login Page
============================================= */
.cri-login-bg {
background: linear-gradient(160deg, #F5F5F5 0%, #E5E5E5 50%, #D6D6D6 100%);
min-height: 100vh;
}
.cri-login-container {
max-width: 440px;
margin: 0 auto;
padding: 60px 20px;
}
.cri-login-card {
background: #fff;
border-radius: var(--cri-radius-lg);
box-shadow: var(--cri-shadow-lg);
padding: 40px;
text-align: center;
}
.cri-login-card img {
height: 80px;
margin-bottom: 16px;
}
.cri-login-card h2 {
font-family: var(--cri-font-slab);
color: var(--cri-red);
margin-bottom: 24px;
font-size: 22px;
}
/* =============================================
12. Footer
============================================= */
.cri-footer {
background: var(--cri-red);
color: #fff;
padding: 24px 0;
margin-top: 3rem;
text-align: center;
font-size: 14px;
}
.cri-footer a { color: #fff; text-decoration: underline; }
.cri-footer a:hover { color: #fff; opacity: 0.85; }
/* =============================================
13. Quick Links Bar
============================================= */
.cri-quicklinks {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 1.5rem 0;
}
.cri-quicklinks > * {
flex: 1;
min-width: 140px;
}
/* =============================================
14. Status Badges
============================================= */
.cri-badge {
display: inline-block;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.cri-badge-green { background: var(--cri-green); color: #fff; }
.cri-badge-red { background: var(--cri-red); color: #fff; }
.cri-badge-orange { background: var(--cri-orange); color: #fff; }
.cri-badge-yellow { background: var(--cri-yellow); color: #fff; }
.cri-badge-gray { background: var(--cri-gray); color: #fff; }
/* =============================================
15. Dark Widget (e.g. route calculator)
============================================= */
.cri-widget-dark {
background: linear-gradient(135deg, var(--cri-dark) 0%, #4A4A4A 100%);
border-radius: var(--cri-radius-lg);
padding: 24px;
color: #fff;
}
.cri-widget-dark .cri-input,
.cri-widget-dark .cri-select,
.cri-widget-dark .cri-textarea {
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
color: #fff;
}
.cri-widget-dark .cri-input::placeholder,
.cri-widget-dark .cri-select::placeholder,
.cri-widget-dark .cri-textarea::placeholder { color: rgba(255,255,255,0.6); }
.cri-widget-dark .cri-input:focus,
.cri-widget-dark .cri-select:focus,
.cri-widget-dark .cri-textarea:focus {
background: rgba(255,255,255,0.25);
border-color: var(--cri-red-light);
}
/* =============================================
16. Grid Helpers
============================================= */
.cri-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cri-col { flex: 1; min-width: 0; }
.cri-col-6 { flex: 0 0 calc(50% - 8px); }
.cri-col-4 { flex: 0 0 calc(33.333% - 11px); }
.cri-col-3 { flex: 0 0 calc(25% - 12px); }
/* =============================================
17. Utility Classes
============================================= */
.cri-text-red { color: var(--cri-red); }
.cri-text-dark { color: var(--cri-dark); }
.cri-text-gray { color: var(--cri-gray); }
.cri-text-center { text-align: center; }
.cri-text-right { text-align: right; }
.cri-bg-red { background: var(--cri-red); color: #fff; }
.cri-bg-dark { background: var(--cri-dark); color: #fff; }
.cri-mt-0 { margin-top: 0; }
.cri-mt-1 { margin-top: 0.5rem; }
.cri-mt-2 { margin-top: 1rem; }
.cri-mt-3 { margin-top: 1.5rem; }
.cri-mt-4 { margin-top: 2rem; }
.cri-mb-0 { margin-bottom: 0; }
.cri-mb-1 { margin-bottom: 0.5rem; }
.cri-mb-2 { margin-bottom: 1rem; }
.cri-mb-3 { margin-bottom: 1.5rem; }
.cri-hidden { display: none !important; }
/* =============================================
18. Responsive
============================================= */
@media (max-width: 768px) {
.cri-navbar .cri-container { flex-direction: column; gap: 8px; }
.cri-nav-links { flex-wrap: wrap; justify-content: center; }
.cri-nav-links.cri-collapsed { display: none; }
.cri-nav-links.cri-open { display: flex; flex-direction: column; width: 100%; }
.cri-nav-toggle { display: block; }
.cri-quicklinks { flex-direction: column; }
.cri-section-title { font-size: 15px; padding: 12px 18px; }
.cri-login-card { padding: 24px; }
.cri-row { flex-direction: column; }
.cri-col-6, .cri-col-4, .cri-col-3 { flex: 0 0 100%; }
}
/* =============================================
19. Print
============================================= */
@media print {
.cri-navbar, .cri-topbar, .cri-footer, .cri-nav-toggle { display: none; }
.cri-card { box-shadow: none; border: 1px solid #ddd; }
body.cri-scope { background: #fff; }
}