/* ============================================================ DESIGN SYSTEM - Currículo Fácil Light theme default. Dark theme ready (uncomment to enable). ============================================================ */ @font-face { font-family: 'Inter fallback'; src: local('Arial'); size-adjust: 96%; ascent-override: 92%; descent-override: 17%; line-gap-override: 8%; } :root { /* --- Brand --- */ --color-primary: #1e3a8a; --color-primary-hover: #1e40af; --color-primary-light: #eff6ff; --color-primary-text: #1d4ed8; --color-secondary: #6b7280; --color-secondary-hover: #4b5563; --color-accent: #0ea5e9; --color-accent-hover: #0284c7; /* --- Feedback --- */ --color-success: #16a34a; --color-success-hover: #15803d; --color-success-light: #f0fdf4; --color-success-text: #15803d; --color-danger: #dc2626; --color-danger-hover: #b91c1c; --color-danger-light: #fef2f2; --color-danger-text: #b91c1c; --color-warning: #d97706; --color-warning-hover: #b45309; --color-warning-light: #fffbeb; --color-warning-text: #b45309; --color-info: #2563eb; --color-info-light: #eff6ff; --color-info-text: #1d4ed8; /* --- WhatsApp brand --- */ --color-whatsapp: #25D366; --color-whatsapp-hover: #1EBE5D; /* --- Neutrals --- */ --color-bg: #f3f4f6; --color-surface: #ffffff; --color-surface-alt: #f9fafb; --color-border: #e5e7eb; --color-border-strong: #d1d5db; /* --- Text --- */ --color-text: #111827; --color-text-secondary: #4b5563; --color-text-muted: #5c626e; --color-text-placeholder: #9ca3af; --color-text-inverse: #ffffff; /* --- Focus --- */ --color-focus-ring: rgba(14, 165, 233, 0.30); --border-focus: var(--color-accent); /* --- Radius --- Deliberately tight: this app's product is a formal A4 document built out of hairline rules, so the interface around it stays close to the same register instead of reading softer than what it prints. --radius-xs (4px) and --radius-xl (16px) were dropped - both had zero uses, and 4px is what --radius-sm is now. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full:9999px; /* --- Shadow --- */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); /* --- Spacing --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* --- Typography --- */ --font-family: 'Inter', 'Inter fallback', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 28px; --cv-preview-font-size: 10pt; --cl-preview-font-size: 10.5pt; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed:1.75; /* --- Transition --- */ --transition-fast: 0.10s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================================ LARGE TEXT - accessibility toggle, class="text-large" on ============================================================ */ :root.text-large { --font-size-xs: 16px; --font-size-sm: 18px; --font-size-md: 20px; --font-size-lg: 22px; --font-size-xl: 25px; --font-size-2xl: 31px; --font-size-3xl: 39px; --cv-preview-font-size: 11pt; --cl-preview-font-size: 11.5pt; } /* ============================================================ DARK THEME - uncomment + add class="theme-dark" to ============================================================ */ /* .theme-dark { --color-primary: #3b82f6; --color-primary-hover: #60a5fa; --color-primary-light: rgba(59,130,246,0.12); --color-primary-text: #93c5fd; --color-accent: #38bdf8; --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #0f172a; --color-border: #334155; --color-border-strong: #475569; --color-text: #f1f5f9; --color-text-secondary: #cbd5e1; --color-text-muted: #94a3b8; --color-text-placeholder:#64748b; --shadow-sm: 0 1px 4px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); } */ /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-normal); color: var(--color-text); background: var(--color-bg); line-height: var(--line-height-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .text-accent { color: var(--color-accent); } /* ============================================================ TOAST - component styles (JS handles positioning/colors) ============================================================ */ .toast-inner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .toast-icon { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; } .toast-body { flex: 1; } .toast-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: #fff; margin-bottom: 2px; } .toast-message { font-size: var(--font-size-sm); line-height: var(--line-height-normal); } .toast-close { background: none; border: none; color: #9ca3af; cursor: pointer; padding: 0; display: flex; align-items: center; flex-shrink: 0; transition: color var(--transition-normal); } .toast-close:hover { color: #fff; } .toast-progress { height: 3px; background: rgba(255,255,255,0.08); } .toast-progress-bar { height: 100%; width: 100%; transform-origin: left; animation: toast-shrink linear forwards; } @keyframes toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ============================================================ LAYOUT ============================================================ */ .app { max-width: 1100px; margin: 0 auto; padding: var(--space-6) var(--space-4); } .layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } /* ============================================================ ICONS - inline SVG sprite, see index.html ============================================================ */ .icon { width: 24px; height: 24px; fill: currentColor; flex-shrink: 0; pointer-events: none; transition: transform var(--transition-fast); } *:hover > .icon, button:hover .icon, a:hover .icon { transform: scale(1.1); } /* ============================================================ SKILL CHIPS ============================================================ */ .skill-input-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); } .skill-input-row input { flex: 1; } .skill-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 32px; } .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-primary { background: var(--color-primary-light); color: var(--color-primary-text); border: 1px solid var(--color-info-light); } .chip-remove { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 0; color: inherit; opacity: 0.6; flex-shrink: 0; transition: opacity var(--transition-fast); } .chip-remove:hover { opacity: 1; } .chip-remove .icon { width: 14px; height: 14px; } /* ============================================================ LANGUAGE ROWS ============================================================ */ .language-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); } .language-row select { width: 100%; } .lang-name-wrap { position: relative; } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; } .badge-a1, .badge-a2 { background: var(--color-warning-light); color: var(--color-warning-text); } .badge-b1, .badge-b2 { background: var(--color-info-light); color: var(--color-info-text); } .badge-c1, .badge-c2, .badge-native { background: var(--color-success-light); color: var(--color-success-text); } .badge-toggle { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; } .badge-toggle--active { padding: 8px; background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); } /* ============================================================ HEADER ============================================================ */ .app-logo { height: 48px; width: 224px; aspect-ratio: 280 / 60; } .app-subtitle { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-top: var(--space-1); } .app-header { position: relative; text-align: center; margin-bottom: var(--space-6); } .app-header-content { display: flex; justify-content: space-between; align-items: center; } .header-controls { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: var(--space-2); } .font-size-btn { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 8px; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; } .font-size-btn:hover, .font-size-btn[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-primary); } .font-size-btn[aria-pressed="true"] { background: var(--color-primary-light); } /* ============================================================ STEPS NAV ============================================================ */ .steps-caption { display: none; } .steps-nav { display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); overflow-x: auto; padding: var(--space-1) 0; } .step-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; gap: var(--space-1); min-width: 52px; } .step-number { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-border); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); display: flex; align-items: center; justify-content: center; } .step-label { font-size: var(--font-size-xs); color: var(--color-text-muted); white-space: nowrap; } .step-item.active .step-number { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .step-item.active .step-label { color: var(--color-primary); font-weight: var(--font-weight-semibold); } span[disabled] { cursor: not-allowed; opacity: 0.4; pointer-events: none !important; } .step-line { flex: 1; height: 2px; background: var(--color-border); min-width: 16px; max-width: 40px; margin-bottom: 20px; } /* ============================================================ PROGRESS ============================================================ */ .progress-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .progress-track { flex: 1; height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; } .progress-fill { height: 100%; width: 100%; background: var(--color-accent); border-radius: var(--radius-full); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-slow); } .progress-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); min-width: 32px; text-align: right; } .data-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); } .data-actions .btn-add-small { margin-top: 0; } /* ============================================================ FORM PANEL ============================================================ */ .form-panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .step-section { display: none; } .step-section.active { display: block; animation: fadeUp 0.2s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .section-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin-bottom: var(--space-6); } .form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 20px; border: none; border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); cursor: pointer; transition: background var(--transition-normal); white-space: nowrap; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } /* Solid, fully opaque - same treatment as primary, just its own color, not a faded/bordered variant. Fading a clickable (non-disabled) button reads as broken to users, since fading is normally reserved for :disabled. */ .btn-secondary { background: var(--color-secondary); color: var(--color-text-inverse); } .btn-secondary:hover:not(:disabled) { background: var(--color-secondary-hover); } .btn-success { background: var(--color-success); color: var(--color-text-inverse); } .btn-success:hover:not(:disabled) { background: var(--color-success-hover); } .btn-sm { padding: 8px 14px; font-size: var(--font-size-sm); } /* Filled brand green, like every other .btn variant - not an outlined button. The icon comes from the inline sprite rather than assets/icons/whatsapp.svg, because that file has fill="#25D366" baked in and would vanish against this background; the sprite symbol inherits currentColor and turns white here. */ .btn-whatsapp { background: var(--color-whatsapp); color: var(--color-text-inverse); } .btn-whatsapp:hover:not(:disabled) { background: var(--color-whatsapp-hover); } .btn-whatsapp .icon { width: 18px; height: 18px; } /* ============================================================ FIELDS ============================================================ */ .field { margin-bottom: var(--space-4); position: relative; } .field > label { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-1); } .field input, .field textarea, .field select, .language-row select, .language-row input[type="text"], .skill-input-row input { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--font-size-lg); /* 16px min - prevents iOS Safari auto-zoom on focus */ color: var(--color-text); background: var(--color-surface); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .input-clear-wrap { display: block; width: 100%; position: relative; } .input-clear-wrap input { padding-right: 34px; } .input-clear-wrap textarea { padding-right: 34px; } .input-clear-btn { position: absolute; right: 6px; top: 8px; display: flex; align-items: center; padding: 5px; background: var(--color-surface); border: none; border-radius: var(--radius-full); color: var(--color-text-muted); cursor: pointer; } /* Inputs are short enough that a fixed top offset would look off-center - these are the same height across the app, so a shared value is fine. */ .input-clear-wrap input ~ .input-clear-btn { top: 50%; transform: translateY(-50%); } .input-clear-btn:hover { background: var(--color-danger-light); color: var(--color-danger); } .input-clear-btn .icon { width: 14px; height: 14px; } .field select, .language-row select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235c626e'%3E%3Cpath d='M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 20px; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--color-focus-ring); } .field input.is-valid { border-color: var(--color-success); } .field input.is-invalid { border-color: var(--color-danger); } /* Positioning context for the dropdown when the input isn't a direct child of .field (dynamic experience/education items wrap theirs). */ .autocomplete-wrap { position: relative; } .autocomplete-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin-top: 4px; max-height: 260px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); list-style: none; padding: 4px; } .autocomplete-option { padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--font-size-md); color: var(--color-text); cursor: pointer; } .autocomplete-option:hover, .autocomplete-option--active { background: var(--color-primary-light); color: var(--color-primary-text); } .field-hint { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-xs); margin-top: var(--space-1); color: var(--color-danger); } .field-hint.error { color: var(--color-danger-text); } .field-tip { position: relative; padding-left: 20px; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-1); } .profession-suggestion { background: var(--color-primary-light); border: 1px solid var(--color-info-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .profession-suggestion-title { display: flex; align-items: center; gap: var(--space-1); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-primary-text); margin-bottom: var(--space-2); } .profession-suggestion-title .icon { width: 16px; height: 16px; color: var(--color-info); flex-shrink: 0; } .profession-suggestion-preview { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); } .profession-suggestion-actions { display: flex; align-items: center; gap: var(--space-2); } .field-tip .icon { position: absolute; left: 0; top: 1px; width: 14px; height: 14px; color: var(--color-info); } .field-hint .icon { width: 14px; height: 14px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } /* Hidden visually but still focusable/announced by screen readers - `display:none` or `hidden` would drop it from the accessibility tree, and the file input still has to be reachable by keyboard. */ /* The class is doubled to raise specificity to (0,2,0), which beats `.field input` (0,1,1). Without that, the hidden file inputs inside a .field - the photo picker, the JSON import - kept `width: 100%` from that rule while still being absolutely positioned, so they hung ~59px past the right edge of a 375px viewport and gave the whole page a horizontal scrollbar. `.a.a` matches exactly the same elements as `.a`. */ .visually-hidden.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .photo-field { display: flex; align-items: center; gap: var(--space-4); } .photo-thumb { flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-alt); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; } .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } .photo-empty .icon { width: 34px; height: 34px; color: var(--color-text-placeholder); } .photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* Deliberately lighter than a real .btn: the photo is optional, so these shouldn't compete visually with the actual form actions. */ .photo-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; } .photo-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .photo-btn--danger:hover { border-color: var(--color-danger); color: var(--color-danger-text); } .photo-btn .icon { width: 15px; height: 15px; } .photo-hint { flex-basis: 100%; font-size: var(--font-size-xs); color: var(--color-text-muted); } .field-collapsible { margin-bottom: var(--space-4); } .field-collapsible summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); cursor: pointer; list-style: none; } .field-collapsible summary::-webkit-details-marker { display: none; } .field-collapsible summary:hover { border-color: var(--color-primary); color: var(--color-primary); } .field-collapsible-chevron { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--transition-normal); } .field-collapsible[open] .field-collapsible-chevron { transform: rotate(180deg); } .field-collapsible-content { padding: var(--space-4) 2px 0; } .date-select { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); } /* ============================================================ PHONE ENTRY ============================================================ */ .phone-entry { display: flex; align-items: center; gap: var(--space-2); } .phone-entry input[type="tel"] { flex: 1; } .checkbox-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap; user-select: none; } .checkbox-label input[type="checkbox"] { appearance: none !important; -webkit-appearance: none !important; width: 20px; height: 20px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; flex-shrink: 0; position: relative; } .checkbox-label input[type="checkbox"]:checked { background: var(--color-accent); border-color: var(--color-accent); } .checkbox-label input[type="checkbox"]:checked::before { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: 2px solid white; border-top: none; border-left: none; transform: rotate(45deg); } .whatsapp-icon { width: 22px; height: 22px; opacity: 0.5; transition: opacity var(--transition-normal); } .checkbox-label input[type="checkbox"] { display: none; } .whatsapp-icon { width: 28px; height: 28px; opacity: 0.35; cursor: pointer; transition: opacity var(--transition-normal); filter: grayscale(1); } .checkbox-label:has(input:checked) .whatsapp-icon { opacity: 1; filter: grayscale(0); } .phone-extra { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--color-border); position: relative; } .phone-extra-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .phone-extra input[type="tel"] { flex: 1; } .phone-extra-remove { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; padding: 2px; flex-shrink: 0; } .phone-extra-remove:hover { border-color: var(--color-danger); color: var(--color-danger); } .phone-extra-remove .icon { width: 16px; height: 16px; } /* Same solid + opacity pattern as .btn-secondary, not its own border/shadow treatment - one button language across the app. */ .btn-add-small { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-secondary); border: none; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-inverse); cursor: pointer; } .btn-add-small:hover { background: var(--color-secondary-hover); } .btn-add-small .icon { width: 16px; height: 16px; } /* ============================================================ DYNAMIC ITEMS (experience, education) ============================================================ */ .dynamic-item { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); } .dynamic-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .dynamic-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } .dynamic-item-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .btn-remove { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; padding: 2px; } .btn-remove:hover { border-color: var(--color-danger); color: var(--color-danger); } .btn-remove .icon { width: 16px; height: 16px; } /* ============================================================ PREVIEW PANEL ============================================================ */ .preview-panel { background: var(--color-surface-alt); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .preview-header { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .preview-header-actions { display: flex; gap: var(--space-2); } .template-switcher { padding: var(--space-3) var(--space-6); background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .template-switcher-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } .template-switcher-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } /* Keeps the three template buttons together as one unit: without this the row wraps between them, dropping the last button to its own line while empty space is left beside the label. */ .template-switcher-row .template-btn { flex: 1 1 auto; text-align: center; } .template-btn { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; } .template-btn:hover { border-color: var(--color-primary); color: var(--color-primary); } .template-btn.template-btn--active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); } .color-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); } .color-hue { display: block; flex: 1; --picked-color: var(--color-primary); } .color-reset { display: flex; flex-shrink: 0; padding: 5px; background: none; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; } .color-reset:hover { border-color: var(--color-primary); color: var(--color-primary); } .color-reset .icon { width: 16px; height: 16px; } .color-hue input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); cursor: pointer; /* Neutral gray occupies the first stop (the default accent), then the full hue wheel - so "no color" and every color live on one control. The stops are the actual output of paletteFromSlider() at every 30 degrees, not hand-picked: a brighter track would promise colors the picker cannot produce, since each hue is darkened until it clears the contrast target. Regenerate these if that target changes. */ background: linear-gradient(to right, #374151 0%, #374151 7%, #ba2c2c 8%, #915922, #6b6b19, #47741b, #1c781c, #1b7447, #1b7474, #296bae, #2c2cba, #732cba, #ae29ae, #ba2c73, #ba2c2e); } /* Large thumb: this is the one control here that gets dragged, so it needs a comfortable touch target on a phone. */ .color-hue input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--picked-color); border: 3px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border-strong); } .color-hue input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--picked-color); border: 3px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border-strong); } .color-hue--active input[type="range"] { border-color: var(--color-text); } .preview-label { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .cv-preview-wrapper { position: relative; background: #e5e7eb; overflow: hidden; width: 100%; } .cv-preview { position: absolute; top: 0; left: 0; background: white; width: 794px; min-height: 1123px; /* Page margins as variables so @media print can zero them in one place (there the real margin comes from @page) without every theme having to fight a blanket `padding: 0 !important` override. */ --cv-pad-y: 57px; --cv-pad-x: 66px; --cv-band-space: 74px; padding: var(--cv-pad-y) var(--cv-pad-x); font-size: var(--cv-preview-font-size); line-height: 1.5; color: var(--color-text); border: 1px solid var(--color-border); --cv-accent: var(--color-primary); --cv-accent-dark: var(--color-primary); --cv-accent-light: var(--color-primary-light); } .cl-preview { background: white; min-height: 400px; padding: 52px 60px; font-size: var(--cl-preview-font-size); line-height: 1.6; color: var(--color-text); border: 1px solid var(--color-border); /* Inherits whatever accent the résumé is set to, so the two documents print as a matching pair. */ --cv-accent: var(--color-primary); } /* Letterhead, not a résumé header: the name is small and quiet at the top of the page, the way it sits on headed notepaper. Blowing it up like the résumé's own name makes the page read as a second CV rather than a letter, and pushes the actual message down. */ .cl-header { margin-bottom: 34px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); } .cl-header .cv-name { font-size: 12pt; font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; } .cl-header .cv-job-title { font-size: 9pt; color: var(--color-text-secondary); font-weight: var(--font-weight-normal); margin-bottom: 6px; } .cl-header .cv-contact { font-size: 8.5pt; } .cl-meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 24px; font-size: 9.5pt; } .cl-recipient { font-weight: var(--font-weight-semibold); } .cl-date { color: var(--color-text-secondary); } .cl-body { white-space: pre-wrap; text-align: justify; } .cl-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .cl-extras { border: none; margin-bottom: var(--space-5); } .cl-extras-legend { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-1); padding: 0; } .cl-extras-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .cl-extra-btn { padding: 6px 12px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align: left; cursor: pointer; } .cl-extra-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } /* Still a live button, not a finished state: clicking it again takes the sentence back out of the letter. Hence no `cursor: default` and no disabled styling - both would say "there is nothing left to do here". */ .cl-extra-btn--added { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success-text); font-weight: var(--font-weight-medium); } .cl-extra-btn--added:hover { border-color: var(--color-danger); color: var(--color-danger-text); } .preview-empty { text-align: center; color: var(--color-text-placeholder); padding: 60px var(--space-6); font-size: var(--font-size-md); } /* ============================================================ CV CONTENT - shared base for all three themes Design language (from the reference résumés this was modelled on): no shadows anywhere inside the page, hairline rules instead of boxes, uppercase letter-spaced section titles, and the accent color used only at small deliberate points (a rule, a dot, the name) rather than as large filled areas - which also keeps it cheap and legible when printed in black & white at a print shop. ============================================================ */ .cv-header { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); } /* Only applied when a photo exists - without one the header keeps its plain block layout and the text simply fills the full width. */ .cv-header--with-photo { display: flex; align-items: center; justify-content: space-between; gap: 22px; } .cv-header--with-photo .cv-header-text { min-width: 0; } .cv-header--with-photo .cv-photo { flex-shrink: 0; width: 88px; height: 88px; object-fit: cover; /* Not tokenised: the page has its own scale, and the UI's radii have no business changing how a printed document looks. Just enough to take the hard corner off a photo. */ border-radius: 4px; } .cv-name { font-size: 21pt; font-weight: var(--font-weight-bold); color: var(--color-text); margin: 0 0 3px; line-height: 1.15; } .cv-job-title { font-size: 10.5pt; color: var(--cv-accent); font-weight: var(--font-weight-semibold); margin: 0 0 10px; } .cv-registry { font-size: 9pt; font-weight: var(--font-weight-normal); color: var(--color-text-secondary); } .cv-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 9pt; color: var(--color-text-secondary); } .cv-section { margin-bottom: 20px; } .cv-section-title { font-size: 9pt; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text); border-bottom: 1px solid var(--color-border); padding-bottom: 4px; margin: 0 0 11px; } .cv-section--columns { display: grid; grid-template-columns: 2fr 1fr; gap: 0 32px; } .cv-profile { font-size: 9.5pt; color: var(--color-text); margin: 0; line-height: 1.55; } .cv-item { margin-bottom: 13px; } .cv-item:last-child { margin-bottom: 0; } .cv-item-title { display: block; } .cv-item-title { font-size: 10pt; font-weight: var(--font-weight-semibold); color: var(--color-text); } /* Date sits on its own line under the company rather than pushed to the far right edge - across a wide entry it ended up marooned away from the job title, reading as a stray floating label instead of part of the same entry. */ .cv-item-date { display: block; font-size: 8.5pt; color: var(--color-text-secondary); margin-top: 1px; } .cv-item-subtitle { display: block; font-size: 9pt; color: var(--color-text-secondary); margin-top: 1px; } .cv-item-desc { font-size: 9pt; color: var(--color-text); margin: 5px 0 0; line-height: 1.5; } .cv-skills { display: flex; flex-wrap: wrap; gap: 5px; } .cv-skill { border: 1px solid var(--color-border-strong); border-radius: 3px; padding: 2px 8px; font-size: 8.5pt; } .cv-languages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .cv-documents { display: flex; flex-wrap: wrap; gap: 5px 24px; margin: 0; } .cv-documents div { display: flex; gap: 4px; font-size: 9pt; } .cv-documents dt { color: var(--color-text-secondary); } .cv-documents dt::after { content: ':'; } .cv-documents dd { margin: 0; color: var(--color-text); } .cv-languages li { display: flex; justify-content: space-between; font-size: 9pt; } .cv-lang-level { color: var(--color-text-secondary); font-size: 8.5pt; } /* ============================================================ CV THEME - CLASSIC (refinements over the shared base) Traditional single column. The only accent is the rule under the name - everything else stays black on white, which is what makes it read as the conservative option. ============================================================ */ .cv-preview.theme-classic .cv-header { border-bottom-width: 2px; border-bottom-color: var(--cv-accent); } .cv-preview.theme-classic .cv-name { letter-spacing: 0.01em; } /* ============================================================ CV THEME - MODERN Genuinely different structure, not a recolor: a full-bleed accent band across the top of the page, oversized uppercase name, and a timeline rail down the experience/education entries with a dot per item. Same .cv-* markup as the other themes, so print pagination behaves identically. ============================================================ */ .cv-preview.theme-modern { /* Room for the top band, which is drawn as a ::before rather than a real element so the markup stays shared across themes. */ padding-top: var(--cv-band-space); position: relative; } .cv-preview.theme-modern::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: var(--cv-accent); } .cv-preview.theme-modern .cv-header { border-bottom: none; padding-bottom: 0; margin-bottom: 26px; } .cv-preview.theme-modern .cv-name { font-size: 25pt; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; } .cv-preview.theme-modern .cv-job-title { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); margin-bottom: 14px; } /* Short accent rule under the name - one of the "small deliberate points" the accent color is allowed to appear at. Bound to .cv-header-text only: the template always emits that wrapper, so also targeting .cv-header drew the rule twice. */ .cv-preview.theme-modern .cv-header-text::after { content: ''; display: block; width: 54px; height: 3px; background: var(--cv-accent); margin-top: 10px; } .cv-preview.theme-modern .cv-header--with-photo .cv-photo { border-radius: var(--radius-full); } /* Keeps the hairline rule under each heading (the shared base style) - without it the headings float unanchored while the header carries the only rule on the page. */ .cv-preview.theme-modern .cv-section-title { letter-spacing: 0.16em; margin-bottom: 14px; } /* Timeline rail: the vertical line belongs to the section, the dots to each item, so entries can be added or removed without the rail breaking up. */ .cv-preview.theme-modern .cv-section--experience, .cv-preview.theme-modern .cv-section--education { position: relative; padding-left: 20px; } .cv-preview.theme-modern .cv-section--experience::before, .cv-preview.theme-modern .cv-section--education::before { content: ''; position: absolute; left: 4px; top: 26px; bottom: 4px; width: 1px; background: var(--color-border-strong); } .cv-preview.theme-modern .cv-section--experience .cv-section-title, .cv-preview.theme-modern .cv-section--education .cv-section-title { margin-left: -20px; } .cv-preview.theme-modern .cv-item { position: relative; } .cv-preview.theme-modern .cv-section--experience .cv-item::before, .cv-preview.theme-modern .cv-section--education .cv-item::before { content: ''; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--cv-accent); } .cv-preview.theme-modern .cv-skill { border-color: var(--cv-accent); border-radius: var(--radius-full); padding: 2px 10px; } /* ============================================================ CV THEME - SIDEBAR ("Executivo") Two-column layout: contact/documents/skills/languages in a narrow sidebar, name/profile/experience/education in the main column - one of the most common professional résumé formats. Separated by a hairline rule rather than a filled panel, so it costs nothing extra to print and stays readable in black & white. preview.template.js groups the sections into two wrapper divs (.cv-sidebar-group / .cv-main-group) only for this theme - each is a real flex child that stacks its own content independently. An earlier version tried to route the plain .cv-* siblings straight into CSS Grid columns via grid-column, but Grid's auto-placement cursor advances globally across every item regardless of column, so whichever column had fewer sections than the other was left with visible gaps. ============================================================ */ .cv-preview.theme-sidebar { display: flex; align-items: stretch; /* Horizontal page margin stays on the page itself; the two columns only own the space between them. Vertical padding moves into the columns so the divider rule runs the full height. */ padding: 0 var(--cv-pad-x); } .cv-preview.theme-sidebar .cv-sidebar-group { flex: 0 0 196px; padding: 52px 24px 40px 0; border-right: 1px solid var(--color-border); } .cv-preview.theme-sidebar .cv-main-group { flex: 1; min-width: 0; padding: 52px 0 40px 26px; } .cv-preview.theme-sidebar .cv-photo { display: block; width: 104px; height: 104px; object-fit: cover; border-radius: var(--radius-full); margin: 0 auto 22px; } .cv-preview.theme-sidebar .cv-header { border-bottom: none; padding-bottom: 0; margin-bottom: 24px; } .cv-preview.theme-sidebar .cv-name { font-size: 23pt; } .cv-preview.theme-sidebar .cv-job-title { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); margin-bottom: 0; } /* Accent rule under the name, matching the modern theme's treatment. */ .cv-preview.theme-sidebar .cv-main-group .cv-header::after { content: ''; display: block; width: 54px; height: 3px; background: var(--cv-accent); margin-top: 12px; } .cv-preview.theme-sidebar .cv-contact { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 8.5pt; } .cv-preview.theme-sidebar .cv-section--columns { /* Skills+languages normally sit side by side (2fr 1fr) in the classic layout - far too narrow a column here for that split. */ grid-template-columns: 1fr; row-gap: 18px; } .cv-preview.theme-sidebar .cv-documents { flex-direction: column; gap: 6px; } .cv-preview.theme-sidebar .cv-section-title { font-size: 8.5pt; letter-spacing: 0.14em; border-bottom: none; padding-bottom: 0; color: var(--cv-accent); } /* A short accent tick above each sidebar heading instead of a full underline - keeps the narrow column from looking striped. */ .cv-preview.theme-sidebar .cv-sidebar-group .cv-section-title::before { content: ''; display: block; width: 22px; height: 2px; background: var(--cv-accent); margin-bottom: 6px; } .cv-preview.theme-sidebar .cv-skill { border-color: var(--color-border-strong); } /* ============================================================ COVER LETTER ============================================================ */ .cover-letter-toggle { margin-top: var(--space-6); width: 100%; justify-content: center; } .cover-letter-panel { display: none; margin-top: var(--space-6); } .cover-letter-panel--open { display: block; } /* ============================================================ FOOTER ============================================================ */ .app-footer { text-align: center; margin-top: var(--space-8); padding-top: var(--space-4); } .app-footer p { font-size: var(--font-size-xs); color: var(--color-text-muted); max-width: 480px; margin: 0 auto; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } .language-row { grid-template-columns: 1fr auto; } .language-row select:last-of-type { grid-column: 1; } .preview-header { padding: var(--space-3) var(--space-4); } .preview-header-actions { width: 100%; flex-direction: column; } .preview-header-actions .btn { width: 100%; justify-content: center; } .skill-input-row { flex-direction: column; } .skill-input-row input { width: 100%; } .skill-add-btn { width: 100%; justify-content: center; } /* Circles + text labels dropped entirely for a segmented progress bar instead (Typeform/Google Forms-style) - a row of 5 bars, filled up to the current step. Simple, no per-item alignment math, no text-fit problems. "Passo X de 5 · Nome" lives in the separate #steps-caption line above it (set in navigation.service.js), not squeezed into the bar itself. */ .app { padding: var(--space-4) var(--space-3); } .form-panel { padding: var(--space-4); } .steps-caption { display: block; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); } .steps-nav { gap: 4px; margin-bottom: var(--space-5); } .step-number, .step-line, .step-label { display: none; } .step-item { min-width: 0; flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); cursor: default; } .step-item.active ~ .step-item { background: var(--color-border); } } @media (min-width: 1024px) { .layout { grid-template-columns: 1fr 1fr; } } @media (max-width: 1023px) { .view-toggle { display: flex; background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-1); gap: var(--space-1); margin-bottom: var(--space-4); border: 1px solid var(--color-border); } .view-btn { flex: 1; padding: 8px; border: none; border-radius: var(--radius-sm); background: none; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); cursor: pointer; } .view-btn--active { background: var(--color-primary); color: var(--color-text-inverse); } .layout--show-preview .form-panel { display: none; } .layout--show-preview .preview-panel { display: block; } .layout--show-form .preview-panel { display: none; } } @media (min-width: 1024px) { .view-toggle { display: none; } } /* ============================================================ PRINT ============================================================ */ @media print { @page { size: A4 portrait; margin: 15mm; } .no-print, .preview-header, #toast { display: none !important; } html, body { background: white !important; } .app { padding: 0; max-width: 100%; } .layout { display: block !important; } .form-panel { display: none !important; } .preview-panel { background: white !important; box-shadow: none !important; border-radius: 0 !important; } /* `!important` here is deliberate and limited to the properties that scaleCvPreview() writes as inline styles (height/transform/top/left) - inline styles can't be overridden any other way. Everything else is plain cascade: these rules come later in the file than the on-screen ones, at equal specificity. */ .cv-preview-wrapper { height: auto !important; padding: 0; background: white; } .cv-preview { top: 0 !important; left: 0 !important; transform: none !important; position: relative; width: 100%; min-height: unset; border: none; /* Page margin comes from @page in print, so the on-screen page padding is zeroed at the source - each theme's own padding rules keep working off these without needing overrides. */ --cv-pad-y: 0px; --cv-pad-x: 0px; --cv-band-space: 34px; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .layout--show-form .preview-panel { display: block !important; } .layout--show-form .form-panel { display: none !important; } .layout--show-preview .form-panel { display: none !important; } /* Cover letter prints as its own isolated document - the .form-panel, .preview-panel and .layout rules above already apply to it generically since it reuses the same classes as the resume. */ body[data-print-target="letter"] .app > *:not(#cover-letter-panel) { display: none !important; } body[data-print-target="letter"] #cover-letter-panel { display: block !important; } body[data-print-target="letter"] .cl-preview { box-shadow: none !important; } }