diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..e071d40 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,54 @@ +/* === Design tokens (valori campionati da Figma) === */ +:root { + --c-accent: #b8a98c; + --c-accent-dark: #9c8b70; + --c-dark: #3a2929; + --c-dark-2: #4a3a30; + --c-heading: #2b2b2b; + --c-text: #4b4b4b; + --c-text-light: #8a8a8a; + --c-bg: #ffffff; + --c-bg-alt: #f5f3f0; + --font-heading: 'Montserrat', sans-serif; + --font-body: 'Open Sans', sans-serif; + --header-h: 70px; +} + +/* === Reset === */ +*, *::before, *::after { box-sizing: border-box; } +body { margin: 0; font-family: var(--font-body); color: var(--c-text); font-size: 16px; line-height: 1.7; background: var(--c-bg); } +img { max-width: 100%; height: auto; display: block; } +h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--c-heading); font-weight: 500; letter-spacing: .04em; line-height: 1.2; margin: 0 0 .5em; } +h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); } +h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } +h3 { font-size: 1.3rem; } +a { color: inherit; } +p { margin: 0 0 1em; } + +/* === Utility === */ +.container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; } +.section { padding-block: 90px; } +.section--alt { background: var(--c-bg-alt); } +.section--dark { background: var(--c-dark); color: #cfc6bd; } +.section--dark h2, .section--dark h3 { color: #fff; } +.eyebrow { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; color: var(--c-accent-dark); } +.section-heading { text-align: center; max-width: 640px; margin: 0 auto 56px; } +.section-heading h2 { text-transform: uppercase; letter-spacing: .12em; } + +.btn { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-heading); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border: 0; cursor: pointer; padding: 16px 26px; background: var(--c-accent); color: #fff; transition: background .2s; } +.btn:hover { background: var(--c-accent-dark); } +.btn::after { content: '→'; font-size: .9rem; } +.btn--dark { background: var(--c-dark); } +.btn--dark:hover { background: var(--c-dark-2); } +.btn--light { background: #fff; color: var(--c-heading); } + +/* === Form === */ +.field { width: 100%; border: 1px solid #ddd; background: #fff; padding: 14px 16px; font-family: var(--font-body); font-size: .95rem; color: var(--c-text); margin-bottom: 14px; } +.field:focus { outline: 2px solid var(--c-accent); outline-offset: -1px; } +textarea.field { min-height: 120px; resize: vertical; } +.form-msg { font-size: .9rem; margin-top: 8px; } +.form-msg--ok { color: #3c7a3c; } +.form-msg--err { color: #b03030; } + +/* honeypot */ +.hp { position: absolute; left: -9999px; opacity: 0; }