/* ============================================================= Planner de Casamento — Design System (Romântico Moderno) Arquivo base: tokens, tipografia, botões, formulários, utilitários ============================================================= */ :root { /* Paleta */ --blush-50: #FDF8F6; --blush-100: #F9EFEA; --blush-200: #F2DED6; --blush-300: #E8C7BA; --rose-400: #D3A192; --rose-500: #C08A7D; --rose-600: #A66E62; --rose-700: #85554C; --champagne-100: #F7EFE2; --champagne-200: #EFE1CB; --gold-500: #B99770; --gold-600: #9C7C58; --sage-100: #EDF1EC; --sage-500: #8AA08A; --ink-900: #241F1C; --ink-800: #332C28; --ink-700: #4A403B; --muted-600: #7C6F68; --muted-500: #9A8D86; --line: #EAE0DA; --line-strong: #DCCFC7; --white: #FFFFFF; --paper: #FFFDFC; --ok-500: #6E9A78; --ok-100: #E6F0E8; --warn-500: #C99A4E; --warn-100: #F8EEDC; --danger-500: #C36B62; --danger-100: #F8E6E4; --info-500: #6E8AA6; --info-100: #E6EDF3; /* Tipografia */ --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Espaço e forma */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(51, 44, 40, .06); --shadow-sm: 0 2px 10px rgba(51, 44, 40, .06); --shadow-md: 0 10px 30px rgba(51, 44, 40, .09); --shadow-lg: 0 24px 60px rgba(51, 44, 40, .14); --container: 1180px; --header-h: 74px; --transition: 220ms cubic-bezier(.4, 0, .2, 1); } /* ---------- Temas alternativos (aplicados em ) ---------- */ [data-tema="oliva"] { --blush-50:#F7F8F4; --blush-100:#EDF1E9; --blush-200:#DCE4D5; --blush-300:#C3CFB8; --rose-400:#98A981; --rose-500:#7D8B62; --rose-600:#657149; --rose-700:#4B5436; --champagne-100:#F6EDE4; --champagne-200:#EBD9C7; --gold-500:#C4714B; --gold-600:#A65A38; --line:#E4E8DE; --line-strong:#D2D9C9; } [data-tema="onix"] { --blush-50:#F7F5F2; --blush-100:#EFEBE4; --blush-200:#E2DBCE; --blush-300:#CFC4AF; --rose-400:#B9A27A; --rose-500:#8C7853; --rose-600:#6B5B3E; --rose-700:#4A3F2B; --champagne-100:#F6F1E7; --champagne-200:#E9DEC6; --gold-500:#C9A227; --gold-600:#A98617; --ink-900:#141210; --line:#E7E2D9; --line-strong:#D6CFC2; } [data-tema="serenity"] { --blush-50:#F5F8FB; --blush-100:#E8EFF6; --blush-200:#D5E2ED; --blush-300:#B4C9DC; --rose-400:#8FA9C4; --rose-500:#6F8FB0; --rose-600:#577491; --rose-700:#3E5670; --champagne-100:#EFF4F8; --champagne-200:#DCE7F0; --gold-500:#A9976B; --gold-600:#8C7C53; --line:#E1E8EF; --line-strong:#CDD8E3; } [data-tema="terracota"] { --blush-50:#FBF6F2; --blush-100:#F6EADF; --blush-200:#EBD9C7; --blush-300:#DDBCA0; --rose-400:#CE805F; --rose-500:#B45F3F; --rose-600:#954A2E; --rose-700:#6E3520; --champagne-100:#F8F0E4; --champagne-200:#EEDFC8; --gold-500:#B08C55; --gold-600:#8F7040; --line:#EFE2D6; --line-strong:#E0CBB8; } [data-tema="lavanda"] { --blush-50:#F9F7FC; --blush-100:#F0ECF7; --blush-200:#E2DBEF; --blush-300:#CBC0E1; --rose-400:#A395C6; --rose-500:#8E7BB0; --rose-600:#73628F; --rose-700:#544869; --champagne-100:#F5F1F8; --champagne-200:#E7E0F2; --gold-500:#B49A6E; --gold-600:#957D55; --line:#E9E3F0; --line-strong:#D8CFE4; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-800); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink-900); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 500; } h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; } h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); } h4 { font-size: 1.12rem; font-family: var(--font-body); font-weight: 600; letter-spacing: .01em; } p { margin: 0 0 1em; } .container { width: min(100% - 40px, var(--container)); margin-inline: auto; } .container-narrow { width: min(100% - 40px, 820px); margin-inline: auto; } /* ---------- Elementos decorativos ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-600); margin-bottom: 18px; } .eyebrow::before, .eyebrow.both::after { content: ''; width: 28px; height: 1px; background: var(--rose-400); display: inline-block; } .ornament { display: block; margin: 0 auto 26px; width: 120px; opacity: .75; } .script { font-family: var(--font-display); font-style: italic; color: var(--rose-600); } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: var(--radius-pill); font-size: .93rem; font-weight: 500; letter-spacing: .03em; border: 1px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; text-align: center; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { background: var(--rose-500); color: #fff; box-shadow: 0 6px 18px rgba(192, 138, 125, .32); } .btn-primary:hover:not(:disabled) { background: var(--rose-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192, 138, 125, .4); } .btn-dark { background: var(--ink-900); color: #fff; } .btn-dark:hover:not(:disabled) { background: var(--ink-700); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink-800); border-color: var(--line-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--rose-400); color: var(--rose-600); background: var(--blush-50); } .btn-soft { background: var(--blush-100); color: var(--rose-700); } .btn-soft:hover:not(:disabled) { background: var(--blush-200); } .btn-gold { background: var(--gold-500); color: #fff; } .btn-gold:hover:not(:disabled) { background: var(--gold-600); } .btn-danger { background: var(--danger-100); color: var(--danger-500); } .btn-danger:hover:not(:disabled) { background: var(--danger-500); color: #fff; } .btn-sm { padding: 8px 16px; font-size: .82rem; } .btn-xs { padding: 5px 11px; font-size: .74rem; } .btn-lg { padding: 16px 34px; font-size: 1rem; } .btn-block { width: 100%; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--muted-600); } .btn-icon:hover { background: var(--blush-100); color: var(--rose-600); border-color: var(--blush-300); } /* ---------- Formulários ---------- */ .field { margin-bottom: 16px; } .field label, .label { display: block; font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-600); margin-bottom: 7px; } .input, .select, .textarea, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=url], input[type=tel], select, textarea { width: 100%; padding: 12px 15px; font-family: inherit; font-size: .95rem; color: var(--ink-800); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); transition: var(--transition); outline: none; } textarea { min-height: 110px; resize: vertical; line-height: 1.6; } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237C6F68' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .input:focus, .select:focus, .textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--rose-400); box-shadow: 0 0 0 3px rgba(211, 161, 146, .18); } .input-hint { font-size: .78rem; color: var(--muted-500); margin-top: 6px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 620px) { .form-row, .form-row-3 { grid-template-columns: 1fr; } } .checkbox-line { display: flex; align-items: flex-start; gap: 10px; font-size: .88rem; color: var(--muted-600); } .checkbox-line input { width: auto; margin-top: 3px; accent-color: var(--rose-500); } /* ---------- Badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 500; letter-spacing: .04em; background: var(--blush-100); color: var(--rose-700); } .badge-ok { background: var(--ok-100); color: var(--ok-500); } .badge-warn { background: var(--warn-100); color: var(--warn-500); } .badge-danger { background: var(--danger-100); color: var(--danger-500); } .badge-info { background: var(--info-100); color: var(--info-500); } .badge-neutral { background: #F1EDEB; color: var(--muted-600); } .badge-gold { background: var(--champagne-200); color: var(--gold-600); } /* ---------- Cards ---------- */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs); } .card-pad { padding: 22px; } /* ---------- Utilitários ---------- */ .stack > * + * { margin-top: 14px; } .row { display: flex; align-items: center; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .text-center { text-align: center; } .text-right { text-align: right; } .muted { color: var(--muted-600); } .small { font-size: .85rem; } .tiny { font-size: .76rem; } .strong { font-weight: 600; } .hidden { display: none !important; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .lead { font-size: 1.12rem; color: var(--muted-600); line-height: 1.75; } /* ---------- Barra de progresso ---------- */ .progress { height: 8px; background: var(--blush-100); border-radius: var(--radius-pill); overflow: hidden; } .progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--rose-400), var(--gold-500)); border-radius: inherit; transition: width .6s cubic-bezier(.4,0,.2,1); } .progress-lg { height: 12px; } /* ---------- Toast ---------- */ #toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { background: var(--ink-900); color: #fff; padding: 13px 18px; border-radius: var(--radius); font-size: .88rem; box-shadow: var(--shadow-lg); animation: toastIn .3s ease; max-width: 340px; display: flex; align-items: center; gap: 10px; } .toast.ok { background: #3F6B4A; } .toast.err { background: #9E4C43; } @keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(36, 31, 28, .55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 900; animation: fadeIn .2s ease; } .modal { background: var(--white); border-radius: var(--radius-lg); width: min(100%, 560px); max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn .28s cubic-bezier(.2,.8,.3,1); } .modal-lg { width: min(100%, 860px); } .modal-header { padding: 22px 26px 6px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .modal-header h3 { margin: 0; } .modal-body { padding: 12px 26px 22px; } .modal-footer { padding: 0 26px 24px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.98) } to { opacity: 1; transform: none } } /* ---------- Animação de entrada ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--blush-50); } ::-webkit-scrollbar-thumb { background: var(--blush-300); border-radius: 10px; border: 2px solid var(--blush-50); } ::-webkit-scrollbar-thumb:hover { background: var(--rose-400); } /* ---------- Impressão ---------- */ @media print { .no-print, .app-sidebar, .app-topbar, #toasts { display: none !important; } body { background: #fff; } .app-main { padding: 0 !important; } .card { break-inside: avoid; box-shadow: none; } }