/* RESET & NORMALIZATION */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
body {
background: #f5efe6;
color: #222126;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.7;
min-height: 100vh;
overflow-x: hidden;
letter-spacing: 0.01em;
}
/* VINTAGE RETRO: COLOR PALETTE */
:root {
--primary: #1E3765;
--secondary: #27A69A;
--accent: #F3F7FA;
--vintage-yellow: #FFCD68;
--vintage-orange: #ED6A3B;
--vintage-beige: #F5EFE6;
--vintage-green: #67B377;
--vintage-brown: #AB8664;
--vintage-shadow: rgba(41, 33, 44, 0.08);
--vintage-dark: #271E13;
}
/* GOOGLE FONTS Fallback - Add links to Montserrat/Roboto via ; fallback defined */
h1, h2, h3, h4, h5, h6, .logo {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
h1 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 24px;
letter-spacing: 0.04em;
text-shadow: 2px 2px 0 var(--vintage-yellow), 0 2px 8px var(--vintage-shadow);
}
h2 {
font-size: 2rem;
color: var(--vintage-orange);
margin-bottom: 20px;
letter-spacing: 0.045em;
text-shadow: 1px 1px 0 var(--vintage-yellow);
}
h3 {
font-size: 1.25rem;
color: var(--vintage-dark);
margin-bottom: 10px;
}
/* Basic typography */
p, ul, ol, li {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
color: #3b2f27;
margin-bottom: 12px;
}
em { font-style: italic; }
strong { font-weight: 700; }
a {
color: var(--primary);
text-decoration: none;
transition: color .2s;
}
a:hover, a:focus {
color: var(--vintage-orange);
outline: none;
}
ul {
margin-left: 20px;
padding-left: 16px;
}
li {
margin-bottom: 7px;
}
/* Retro Section Style Patterns */
section {
margin-bottom: 60px;
padding: 40px 20px;
background: var(--vintage-beige);
border-radius: 24px;
box-shadow: 0 2px 16px var(--vintage-shadow);
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 14px;
box-sizing: border-box;
}
.content-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.text-section {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Feature grid (Home, About, Services, Soluzioni, etc) */
.feature-grid, .service-highlights, .solution-grid, .team, .values-grid, .service-list, .industry-list, .resource-previews {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: flex-start;
}
.feature, .service, .solution, .value, .team-member, .resource {
background: #fff8eb;
border-radius: 12px;
box-shadow: 0 4px 14px var(--vintage-shadow);
padding: 28px 24px;
min-width: 250px;
max-width: 100%;
flex: 1 1 250px;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-bottom: 20px;
border: 2px solid var(--vintage-yellow);
transition: box-shadow 0.2s, border-color 0.2s, transform 0.22s;
}
.feature:hover, .service:hover, .solution:hover, .team-member:hover, .value:hover, .resource:hover {
box-shadow: 0 8px 24px var(--vintage-shadow);
border-color: var(--vintage-orange);
transform: translateY(-2px) scale(1.018);
}
.feature img, .service img, .solution img, .team-member img, .value img, .industry img {
margin-bottom: 10px;
width: 44px;
height: 44px;
object-fit: contain;
filter: sepia(0.5) contrast(1.1);
}
.team {
gap: 24px;
}
.values-grid {
gap: 24px;
}
/* Cards, testimonial, case-study */
.card-container, .card-grid, .testimonials, .case-study-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: flex-start;
}
.card, .testimonial-card, .case-study {
background: #fff8eb;
border-radius: 14px;
box-shadow: 0 2px 14px var(--vintage-shadow);
border: 2px solid var(--vintage-brown);
padding: 26px 24px;
margin-bottom: 20px;
position: relative;
font-size: 1.08em;
min-width: 270px;
flex: 1 1 270px;
}
.testimonial-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
color: #2B2923;
background: #fffcf4;
border-left: 8px solid var(--vintage-yellow);
border-radius: 14px 24px 14px 24px;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.testimonial-card strong {
color: var(--vintage-brown);
font-size: 1em;
margin-top: 6px;
}
.case-study strong {
color: var(--vintage-orange);
}
.case-study em {
color: var(--vintage-brown);
}
.success-metrics {
background: var(--vintage-yellow);
border-radius: 14px;
padding: 24px 18px;
margin-top: 24px;
box-shadow: 0 2px 8px var(--vintage-shadow);
color: var(--vintage-dark);
font-size: 1rem;
}
.success-metrics h3 {
margin-bottom: 12px;
color: var(--primary);
font-size: 1.15rem;
}
/**** CTA BUTTONS ****/
.btn-primary, .btn-secondary {
display: inline-block;
padding: 12px 36px;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1.14rem;
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 24px;
cursor: pointer;
transition: background .18s, color .17s, box-shadow .18s, border .18s;
margin-top: 8px;
margin-bottom: 8px;
letter-spacing: 0.045em;
box-shadow: 0 2px 7px var(--vintage-shadow);
}
.btn-primary {
background: linear-gradient(90deg, var(--vintage-yellow) 70%, var(--vintage-orange) 100%);
color: var(--vintage-dark);
border: 2px solid var(--vintage-orange);
}
.btn-primary:hover, .btn-primary:focus {
background: var(--vintage-orange);
color: white;
border-color: var(--primary);
box-shadow: 0 4px 16px var(--vintage-shadow);
}
.btn-secondary {
background: var(--primary);
color: #fffbe1;
border: 2px solid var(--vintage-yellow);
}
.btn-secondary:hover, .btn-secondary:focus {
background: var(--vintage-yellow);
color: var(--primary);
border-color: var(--vintage-brown);
}
/**** HEADER ****/
header {
background: var(--vintage-yellow);
box-shadow: 0 2px 16px var(--vintage-shadow);
border-bottom: 4px solid var(--vintage-orange);
position: sticky;
top: 0;
z-index: 50;
}
header .container {
display: flex;
align-items: center;
gap: 24px;
justify-content: space-between;
min-height: 80px;
padding-top: 10px;
padding-bottom: 10px;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.3em;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: 0.08em;
}
.logo img {
height: 46px;
width: auto;
}
.main-nav {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.main-nav a {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1rem;
text-transform: uppercase;
color: var(--primary);
padding: 8px 10px;
border-radius: 6px;
transition: background 0.16s, color 0.18s;
}
.main-nav a:hover, .main-nav a:focus {
background: var(--vintage-orange);
color: white;
}
.btn-primary {
margin-left: 18px;
}
/* MOBILE NAV */
.mobile-menu-toggle {
display: none;
background: var(--vintage-orange);
border: none;
padding: 8px 14px;
border-radius: 9px;
font-size: 2.1rem;
color: var(--primary);
cursor: pointer;
transition: background .19s, color .18s, box-shadow .16s;
z-index: 120;
box-shadow: 0 2px 4px var(--vintage-shadow);
}
.mobile-menu-toggle:hover, .mobile-menu-toggle:focus {
background: var(--vintage-brown);
color: #fffbe9;
}
.mobile-menu {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw;
height: 100vh;
background: var(--vintage-yellow);
z-index: 150;
padding-top: 40px;
padding-bottom: 40px;
transform: translateX(100vw);
transition: transform 0.35s cubic-bezier(.6,.15,.4,1.05);
box-shadow: 0 0 0 400vw rgba(25,17,3,0.2);
display: flex;
flex-direction: column;
align-items: stretch;
}
.mobile-menu.open {
transform: translateX(0);
}
.mobile-menu-close {
position: absolute;
top: 22px; right: 28px;
font-size: 2.2rem;
background: var(--vintage-orange);
color: var(--primary);
border: none;
border-radius: 8px;
width: 40px; height: 40px;
z-index: 155;
cursor: pointer;
transition: background .17s, color .15s;
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
background: var(--primary);
color: #fffbe9;
}
.mobile-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 28px;
padding: 48px 34px 0 34px;
height: calc(100vh - 80px);
overflow-y: auto;
}
.mobile-nav a {
color: var(--vintage-dark);
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 1.3rem;
text-transform: uppercase;
padding: 13px 5px;
width: 100%;
display: block;
border-radius: 4px;
transition: background 0.14s, color 0.13s;
}
.mobile-nav a:hover, .mobile-nav a:focus {
background: var(--vintage-orange);
color: #fffbe9;
}
/* Hide elements on desktop/mobile (for nav) */
@media (max-width: 1023px) {
.main-nav {
display: none !important;
}
.mobile-menu-toggle {
display: block;
}
}
@media (min-width: 1024px) {
.mobile-menu {
display: none !important;
}
}
/* HERO STYLES */
.hero {
background: var(--vintage-yellow) url('../assets/vintage-pattern.png') repeat;
padding-top: 56px;
padding-bottom: 56px;
margin-bottom: 60px;
box-shadow: 0 2px 32px var(--vintage-shadow);
border-radius: 0 0 44px 44px;
}
.hero h1 {
color: var(--primary);
font-size: 2.6rem;
margin-bottom: 18px;
text-shadow: 3px 3px 0 var(--accent), 0 2px 6px var(--vintage-shadow);
}
.hero p {
color: var(--vintage-dark);
font-size: 1.18rem;
margin-bottom: 26px;
}
.section {
margin-bottom: 60px;
padding: 40px 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card {
margin-bottom: 20px;
position: relative;
}
.content-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.text-image-section {
display: flex;
align-items: center;
gap: 30px;
flex-wrap: wrap;
}
.testimonial-card {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
}
.feature-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
/**** SPECIAL SECTIONS ****/
.workflow-steps {
display: flex;
flex-wrap: wrap;
gap: 24px;
counter-reset: step;
list-style: none;
padding: 0;
}
.workflow-steps li {
background: #fffbe9;
border-radius: 12px;
border: 2px solid var(--vintage-green);
flex: 1 1 250px;
min-width: 220px;
padding: 28px 20px 20px 42px;
position: relative;
margin-bottom: 20px;
box-shadow: 0 2px 12px var(--vintage-shadow);
display: flex;
flex-direction: column;
align-items: flex-start;
}
.workflow-steps li::before {
content: counter(step) "";
counter-increment: step;
position: absolute;
left: 14px;
top: 19px;
font-size: 1.2rem;
font-family: 'Montserrat', Arial, sans-serif;
color: var(--primary);
background: var(--vintage-yellow);
border-radius: 50%;
padding: 1px 8px;
font-weight: bold;
}
/**** INDUSTRY BOXES ****/
.industry-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: flex-start;
}
.industry {
display: flex;
align-items: center;
gap: 16px;
background: #fffaf3;
border-radius: 12px;
border: 2px solid var(--vintage-brown);
padding: 18px 24px;
min-width: 165px;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1.04rem;
font-weight: 700;
color: var(--vintage-dark);
margin-bottom: 20px;
box-shadow: 0 1px 5px var(--vintage-shadow);
}
.industry img {
width: 28px; height: 28px;
}
/**** FOOTER ****/
footer {
background: var(--primary);
color: #fffbe1;
padding: 50px 0 16px 0;
box-shadow: 0 -2px 24px var(--vintage-shadow);
}
footer .container {
display: flex;
flex-direction: column;
gap: 38px;
}
.footer-logo-info {
display: flex;
align-items: flex-start;
gap: 30px;
}
.footer-logo-info img {
width: 56px;
height: 56px;
margin-bottom: 10px;
}
.footer-logo-info .text-section {
display: flex;
flex-direction: column;
gap: 8px;
color: #fffbe9;
font-size: 1rem;
}
.footer-logo-info .text-section img {
width: 20px;
height: 20px;
margin-right: 8px;
vertical-align: middle;
filter: brightness(0) invert(1);
}
.footer-nav {
display: flex;
gap: 24px;
margin-top: 14px;
}
.footer-nav a {
color: #fffbe9;
font-family: 'Montserrat', Arial, sans-serif;
font-size: 0.98rem;
text-transform: uppercase;
opacity: 0.9;
transition: opacity 0.15s, color 0.16s;
}
.footer-nav a:hover, .footer-nav a:focus {
opacity: 1;
color: var(--vintage-yellow);
}
/**** RESPONSIVE DESIGN ****/
@media (max-width: 1023px) {
.footer-logo-info {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.footer-nav {
flex-wrap: wrap;
justify-content: flex-start;
gap: 12px;
}
}
@media (max-width: 768px) {
body {
font-size: 16px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.55rem;
}
.container {
max-width: 98vw;
padding: 0 6px;
}
.hero {
padding-top: 36px;
padding-bottom: 36px;
border-radius: 0 0 24px 24px;
}
.hero h1 {
font-size: 1.48rem;
margin-bottom: 14px;
}
section {
padding: 28px 5px;
margin-bottom: 40px;
border-radius: 12px;
}
.feature-grid, .service-highlights, .solution-grid, .team, .values-grid, .service-list, .industry-list, .resource-previews, .workflow-steps {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.card-container, .card-grid, .testimonials, .case-study-list {
flex-direction: column;
gap: 16px;
align-items: stretch;
}
.feature, .service, .solution, .team-member, .value, .resource, .card, .testimonial-card, .case-study, .industry {
min-width: 100%;
padding: 20px 10px;
margin-bottom: 20px;
}
.workflow-steps li {
min-width: 100%;
padding: 22px 8px 18px 35px;
}
.footer-nav {
padding-bottom: 12px;
}
.text-image-section {
flex-direction: column;
gap: 18px;
}
}
/* NewsLetter and resource-preview specifics */
.newsletter-info {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
/**** THANK YOU PAGE ****/
.thank-you {
text-align: center;
}
.thank-you .text-section {
align-items: center;
}
/**** MAP EMBED (if present) ****/
.map-embed {
background: var(--vintage-yellow);
color: var(--vintage-dark);
padding: 16px 14px;
border-radius: 10px;
box-shadow: 0 2px 8px var(--vintage-shadow);
margin-top: 18px;
font-size: 0.99rem;
}
/**** COOKIE CONSENT BANNER ****/
.cookie-banner {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 9999;
background: var(--primary);
color: #fffbe1;
width: 100vw;
box-shadow: 0 -4px 20px var(--vintage-shadow);
display: flex;
justify-content: center;
padding: 20px 10px 28px 10px;
animation: cb-slideup 0.6s cubic-bezier(.7,.44,.17,1.17);
}
@keyframes cb-slideup {
0% { transform: translateY(120%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
.cookie-banner .cookie-banner-content {
max-width: 800px;
display: flex;
flex-direction: column;
gap: 16px;
}
.cookie-banner p {
color: #fffbe9;
font-size: 1.01rem;
}
.cookie-banner-buttons {
display: flex;
gap: 18px;
}
.cookie-btn {
background: var(--vintage-yellow);
border: 2px solid var(--vintage-orange);
color: var(--primary);
font-family: 'Montserrat', Arial, sans-serif;
font-size: 1rem;
font-weight: 700;
padding: 10px 18px;
border-radius: 14px;
margin-right: 7px;
cursor: pointer;
transition: background .16s, color .16s;
}
.cookie-btn:hover, .cookie-btn:focus {
background: var(--vintage-orange);
color: #fffbe9;
border-color: var(--primary);
}
.cookie-settings {
background: transparent;
border: 2px solid #fffbe9;
color: #fffbe9;
}
.cookie-settings:hover, .cookie-settings:focus {
background: var(--primary);
color: var(--vintage-yellow);
border-color: var(--vintage-yellow);
}
/**** COOKIE MODAL ****/
.cookie-modal-overlay {
display: none;
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(25,18,3,.56);
z-index: 15000;
align-items: center;
justify-content: center;
animation: fadein-cookie 0.22s;
}
.cookie-modal-overlay.open {
display: flex;
}
@keyframes fadein-cookie {
0% { opacity: 0 }
100%{ opacity: 1 }
}
.cookie-modal {
background: #fffbe9;
border-radius: 20px;
padding: 34px 24px 28px 24px;
max-width: 430px;
width: 98vw;
box-shadow: 0 8px 30px var(--vintage-shadow);
border: 3px solid var(--vintage-yellow);
z-index: 15002;
animation: scalein-cm 0.29s cubic-bezier(.7,.32,.18,1.24);
display: flex;
flex-direction: column;
gap: 14px;
}
@keyframes scalein-cm {
0% { transform: scale(0.82) translateY(60px); opacity: 0 }
100% { transform: scale(1) translateY(0); opacity: 1 }
}
.cookie-modal h3 {
color: var(--primary);
font-family: 'Montserrat', Arial, sans-serif;
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 2px;
}
.cookie-category {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.cookie-toggle {
width: 48px;
height: 25px;
background: var(--vintage-yellow);
border-radius: 13px;
border: 2px solid var(--vintage-orange);
position: relative;
margin-right: 8px;
cursor: pointer;
transition: background .13s;
}
.cookie-toggle input {
display: none;
}
.cookie-toggle .slider {
position: absolute;
left: 2px; top: 2px;
width: 21px; height: 21px;
background: var(--secondary);
border-radius: 50%;
transition: transform 0.19s;
}
.cookie-toggle input:checked + .slider {
transform: translateX(23px);
background: var(--vintage-orange);
}
.cookie-toggle input[disabled] + .slider {
opacity: 0.45;
background: #cac0ab;
cursor: default;
}
.cookie-modal .btn-primary, .cookie-modal .cookie-btn {
width: 100%;
margin-top: 12px;
}
.cookie-modal .close-cookie-modal {
position: absolute;
right: 16px; top: 16px;
background: var(--vintage-yellow);
color: var(--vintage-dark);
border: none;
font-size: 1.5rem;
border-radius: 50%;
width: 33px; height: 33px;
cursor: pointer;
transition: background .11s;
}
.cookie-modal .close-cookie-modal:hover {
background: var(--vintage-orange);
color: white;
}
/**** UTILITIES ****/
.d-none { display: none !important; }
.d-block { display: block !important; }
/**** SHADOWS & VINTAGE EFFECTS ****/
.card, .feature, .service, .solution, .team-member, .value, .testimonial-card, .industry, .case-study, .resource {
box-shadow: 2px 5px 16px var(--vintage-shadow);
}
hr {
border: none;
border-bottom: 2px dashed var(--vintage-brown);
margin: 30px 0;
}
/**** Form/Inputs (for newsletter) ****/
input, select, textarea {
font-family: inherit;
font-size: 1em;
border: 2px solid var(--vintage-brown);
border-radius: 9px;
background: #fffbe1;
padding: 10px 15px;
margin-bottom: 12px;
transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--secondary);
}
/**** Micro-interaction Animations ****/
.btn-primary, .btn-secondary, .cookie-btn {
transition: background .19s, color .15s, box-shadow .19s, border .18s, transform .15s;
}
.btn-primary:active, .btn-secondary:active, .cookie-btn:active {
transform: scale(.98);
}
.card, .feature, .testimonial-card, .case-study, .industry, .team-member, .resource {
transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
/**** PRINT MEDIA ****/
@media print {
header, nav, footer, .hero, .btn-primary, .btn-secondary, .cookie-banner, .cookie-modal-overlay { display: none !important; }
body, section { background: #fff; color: #000; }
}