:root { --color-bg-primary: #f9fafb; --color-bg-secondary: #ffffff; --color-text-primary: #2c3e50; --color-text-secondary: #7f8c8d; --color-border: #dfe6e9; --color-accent: #3498db; --color-accent-hover: #2980b9; --color-accent-light: #ecf6fc; } /* Block container */ .cc-blocco-due { display: flex; gap: 24px; background-color: var(--color-bg-primary); padding: 24px; border-radius: 12px; max-width: 900px; margin: 40px auto; box-shadow: 0 8px 20px rgba(52, 152, 219, 0.1); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Each card inside the block */ .cc-blocco-due__card { flex: 1; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(44, 62, 80, 0.07); display: flex; flex-direction: column; transition: box-shadow 0.3s ease, transform 0.3s ease; cursor: default; } /* Hover effect for cards */ .cc-blocco-due__card:hover { box-shadow: 0 12px 30px rgba(52, 152, 219, 0.25); transform: translateY(-6px); } /* Card image */ .cc-blocco-due__image { width: 100%; height: 220px; object-fit: cover; display: block; background-color: var(--color-accent-light); } /* Card body */ .cc-blocco-due__content { padding: 24px; display: flex; flex-direction: column; flex-grow: 1; } /* Card title */ .cc-blocco-due__title { font-size: 1.5rem; font-weight: 700; color: var(--color-text-primary); margin-bottom: 12px; } /* Card text */ .cc-blocco-due__text { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; } /* Button */ .cc-blocco-due__button { display: inline-block; align-self: flex-start; background-color: var(--color-accent); color: #ffffff; text-decoration: none; font-size: 0.95rem; font-weight: 600; padding: 12px 20px; border-radius: 10px; transition: background-color 0.3s ease, transform 0.3s ease; } .cc-blocco-due__button:hover { background-color: var(--color-accent-hover); transform: translateY(-2px); } @media (max-width: 600px) { .cc-blocco-due { flex-direction: column; } .cc-blocco-due__image { height: 200px; } } /* Responsive: stack cards vertically on small screens
Ambiente di lavoro moderno

Card Uno

Questo è un esempio di contenuto per la prima card. Il design è chiaro, moderno e leggibile, con colori tenui e un effetto hover elegante.

Scopri di più
Spazio ufficio luminoso

Card Due

La seconda card segue lo stesso stile, mantenendo coerenza visiva e un layout bilanciato per una presentazione armoniosa.

Leggi tutto
@charset "utf-8"; /* CSS Document */