/* ============================================ Ventura Residencial Design System Colors & Typography CSS Variables ============================================ */ /* Jost — carregada via Google Fonts no do index.html. Os @font-face locais apontavam para ../fonts/*.ttf, pasta que nao existe no deploy: a fonte nunca carregava e o site caia no sans-serif do sistema. A Mulish era importada mas nao usada em nenhuma regra — removida. */ :root { /* -------- COLOR SYSTEM -------- */ /* Core Colors */ --color-graphite: #343938; --color-sand: #E2D4CC; --color-copper: #AE7F51; --color-copper-deep: #8C6A4A; --color-petrol: #2F3C44; /* Neutral Palette */ --color-ivory: #FAF6F2; --color-sand-light: #F1E9E3; --color-sand-300: #CDBBAE; --color-graphite-700: #454B49; --color-graphite-500: #5A615F; /* Variants */ --color-copper-light: #C49873; --color-petrol-light: #39545B; /* Semantic Colors */ --color-background: var(--color-ivory); --color-surface: var(--color-sand-light); --color-text-primary: var(--color-graphite-700); --color-text-secondary: var(--color-graphite-500); --color-text-light: #ffffff; --color-accent: var(--color-copper); --color-accent-hover: var(--color-copper-deep); --color-divider: rgba(52, 57, 56, 0.14); --color-divider-light: rgba(255, 255, 255, 0.16); /* -------- TYPOGRAPHY SYSTEM -------- */ /* Font Families */ --font-display: 'Futura', 'Century Gothic', 'Jost', sans-serif; --font-body: 'Futura', 'Century Gothic', 'Jost', sans-serif; /* Font Weights */ --font-weight-thin: 200; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 600; /* Display Heading (H1) */ --font-size-h1: 48px; --font-weight-h1: var(--font-weight-regular); --line-height-h1: 1.05; --letter-spacing-h1: 0.01em; /* Heading 2 */ --font-size-h2: 36px; --font-weight-h2: var(--font-weight-light); --line-height-h2: 1.1; --letter-spacing-h2: 0.01em; /* Heading 3 */ --font-size-h3: 26px; --font-weight-h3: var(--font-weight-light); --line-height-h3: 1.2; --letter-spacing-h3: 0em; /* Body Text */ --font-size-body: 17px; --font-weight-body: var(--font-weight-light); --line-height-body: 1.7; --letter-spacing-body: 0em; /* Label / Small Caps */ --font-size-label: 14px; --font-weight-label: var(--font-weight-bold); --letter-spacing-label: 0.28em; --text-transform-label: uppercase; /* Caption */ --font-size-caption: 13px; --font-weight-caption: var(--font-weight-regular); --line-height-caption: 1.4; /* -------- SPACING & SIZING -------- */ /* Border Radius */ --radius-button: 6px; --radius-card: 14px; --radius-pill: 30px; /* Borders */ --border-width: 1px; --border-color-light: var(--color-divider); --border-color-dark: var(--color-divider-light); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12); /* Transitions */ --transition-duration: 0.25s; --transition-timing: ease-in-out; } /* ============================================ SEMANTIC TYPOGRAPHY STYLES Use these classes or compose with CSS vars ============================================ */ .heading-display-h1 { font-family: var(--font-display); font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); color: var(--color-text-primary); } .heading-h2 { font-family: var(--font-display); font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); color: var(--color-text-primary); } .heading-h3 { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); color: var(--color-text-primary); } .text-body { font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-text-primary); } .text-body-secondary { font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-text-secondary); } .text-label { font-family: var(--font-body); font-size: var(--font-size-label); font-weight: var(--font-weight-label); letter-spacing: var(--letter-spacing-label); text-transform: var(--text-transform-label); color: var(--color-accent); } .text-caption { font-family: var(--font-body); font-size: var(--font-size-caption); font-weight: var(--font-weight-caption); color: var(--color-text-secondary); } /* ============================================ UTILITY CLASSES ============================================ */ .text-copper { color: var(--color-copper); } .text-graphite { color: var(--color-graphite); } .bg-ivory { background-color: var(--color-ivory); } .bg-sand-light { background-color: var(--color-sand-light); } .bg-graphite { background-color: var(--color-graphite); } .bg-copper { background-color: var(--color-copper); } .border-line { border: 1px solid var(--color-divider); } .rounded-button { border-radius: var(--radius-button); } .rounded-card { border-radius: var(--radius-card); } .rounded-pill { border-radius: var(--radius-pill); } /* ============================================ BASE STYLES ============================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body); line-height: var(--line-height-body); color: var(--color-text-primary); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-family: var(--font-display); font-size: var(--font-size-h1); font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); letter-spacing: var(--letter-spacing-h1); } h2 { font-family: var(--font-display); font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2); } h3 { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); } p { margin-bottom: 1em; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-duration) var(--transition-timing); } a:hover { color: var(--color-accent-hover); } /* ============================================ COMPONENT STYLES ============================================ */ button { font-family: var(--font-body); font-weight: var(--font-weight-bold); font-size: var(--font-size-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; padding: 15px 34px; border-radius: var(--radius-button); border: 1px solid; cursor: pointer; transition: background-color var(--transition-duration) var(--transition-timing), border-color var(--transition-duration) var(--transition-timing), color var(--transition-duration) var(--transition-timing); } button.btn-primary { background-color: var(--color-copper); border-color: var(--color-copper); color: #ffffff; } button.btn-primary:hover { background-color: var(--color-copper-deep); border-color: var(--color-copper-deep); } button.btn-ghost { background-color: transparent; border-color: var(--color-graphite); color: var(--color-graphite); } button.btn-ghost:hover { background-color: var(--color-graphite); color: #ffffff; } /* Cards */ .card { background-color: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-card); padding: 32px; } /* Forms */ input[type="text"], input[type="email"], input[type="tel"], textarea, select { font-family: var(--font-body); font-size: var(--font-size-body); padding: 12px 16px; border: 1px solid var(--color-divider); border-radius: var(--radius-button); background-color: var(--color-ivory); color: var(--color-text-primary); transition: border-color var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing); } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(174, 127, 81, 0.1); } /* ============================================ RESPONSIVE & ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (max-width: 768px) { h1 { font-size: clamp(36px, 8vw, 48px); } h2 { font-size: clamp(28px, 6vw, 36px); } h3 { font-size: clamp(20px, 4vw, 26px); } }