/* contact.css, Stepien Digital */ /* Base vars for this page */ :root { --sd-bg: #041522; --sd-bg-2: #061a2a; --sd-txt: rgba(242,248,255,.92); --sd-txt-soft: rgba(242,248,255,.72); --sd-card: rgba(255,255,255,.06); --sd-card-border: rgba(255,255,255,.12); --sd-radius: 24px; --sd-radius-sm: 18px; --sd-accent: rgba(0,180,255,.65); } /* Prevent giant default margins and broken sizing */ .sd-contact-page, .sd-contact-page * { box-sizing: border-box; } .sd-contact-page { min-height: 100vh; background: radial-gradient(1200px 500px at 20% 0%, rgba(0,180,255,.10), transparent 60%), radial-gradient(900px 500px at 85% 15%, rgba(120,80,255,.10), transparent 60%), linear-gradient(180deg, var(--sd-bg) 0%, var(--sd-bg-2) 100%); color: var(--sd-txt); } .sd-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .sd-section { padding: 44px 0; } .sd-section-compact { padding-top: 24px; } .sd-section-head { max-width: 720px; margin-bottom: 18px; } .sd-h2 { margin: 0 0 10px 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; } .sd-p { margin: 0; color: var(--sd-txt-soft); line-height: 1.65; font-size: 15px; } .sd-inline-link { color: rgba(242,248,255,.92); text-decoration: underline; text-underline-offset: 3px; } .sd-inline-link:hover { opacity: .9; } /* Reveal: por padrão, NUNCA esconder conteúdo. Só esconder quando JS estiver ativo (.js no ). */ .sd-reveal { opacity: 1; transform: none; transition: none; } /* Quando JS está ativo, aí sim anima */ .js .sd-reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; } .js .sd-reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js .sd-reveal, .js .sd-reveal.is-visible { opacity: 1; transform: none; transition: none; } } } } /* Hero */ .sd-hero { position: relative; padding: 96px 0 52px; overflow: hidden; } .sd-hero-bg { position: absolute; inset: 0; background: radial-gradient(800px 420px at 15% 10%, rgba(0,180,255,.18), transparent 60%), radial-gradient(700px 420px at 85% 0%, rgba(120,80,255,.16), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.10)); pointer-events: none; } .sd-hero-glow { position: absolute; inset: -120px -120px auto -120px; height: 280px; background: radial-gradient(circle at 30% 50%, rgba(0,180,255,.22), transparent 55%); filter: blur(10px); pointer-events: none; } .sd-hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; } .sd-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); font-size: 13px; color: rgba(242,248,255,.86); } .sd-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,180,255,.8); box-shadow: 0 0 0 4px rgba(0,180,255,.15); } .sd-hero-title { margin: 14px 0 10px 0; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.03; letter-spacing: -0.03em; } .sd-hero-accent { display: block; margin-top: 10px; font-size: clamp(18px, 2.1vw, 28px); line-height: 1.2; font-weight: 900; color: rgba(242,248,255,.92); opacity: .95; } .sd-hero-subtitle { margin: 0; max-width: 60ch; color: rgba(242,248,255,.74); line-height: 1.65; font-size: 15px; } /* Proof cards */ .sd-contact-proof { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sd-proof-card { padding: 14px; border-radius: var(--sd-radius-sm); background: var(--sd-card); border: 1px solid var(--sd-card-border); box-shadow: 0 16px 46px rgba(0,0,0,.18); } .sd-proof-title { font-weight: 900; font-size: 14px; margin-bottom: 4px; color: rgba(242,248,255,.94); } .sd-proof-text { margin: 0; color: rgba(242,248,255,.72); font-size: 13px; line-height: 1.5; } /* Cards */ .sd-card { border-radius: var(--sd-radius); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 22px 70px rgba(0,0,0,.30); overflow: hidden; } .sd-hero-card-top { display: flex; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.15); } .sd-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(242,248,255,.18); border: 1px solid rgba(242,248,255,.18); } .sd-hero-card-body { padding: 18px 18px 20px 18px; } .sd-hero-card-title { font-weight: 900; font-size: 14px; color: rgba(242,248,255,.92); } .sd-hero-card-sub { margin-top: 3px; font-size: 13px; color: rgba(242,248,255,.62); } /* Steps */ .sd-contact-steps { display: grid; gap: 14px; margin: 18px 0; } .sd-step { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .sd-step-number { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(0,180,255,.15); border: 1px solid rgba(0,180,255,.25); font-weight: 900; font-size: 14px; } .sd-step-title { font-weight: 900; margin-bottom: 4px; color: rgba(242,248,255,.92); } .sd-step-text { color: rgba(242,248,255,.70); font-size: 13px; line-height: 1.5; } .sd-hero-note { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: rgba(242,248,255,.78); font-size: 13px; line-height: 1.55; } /* Buttons */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 12px 16px; font-weight: 800; font-size: 14px; border: 1px solid rgba(255,255,255,.14); text-decoration: none; cursor: pointer; user-select: none; } .sd-btn-full { width: 100%; } .sd-btn-primary { background: rgba(0,180,255,.92); color: #041522; border-color: rgba(0,180,255,.30); } .sd-btn-primary:hover { opacity: .95; } .sd-btn-ghost { background: rgba(255,255,255,.06); color: rgba(242,248,255,.92); } .sd-btn-ghost:hover { background: rgba(255,255,255,.08); } /* Form */ .sd-contact-form { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sd-radius); padding: 24px; box-shadow: 0 16px 46px rgba(0,0,0,.22); } .sd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .sd-form-group { display: grid; gap: 8px; } .sd-form-full { grid-column: 1 / -1; } .sd-label { font-weight: 900; font-size: 14px; color: rgba(242,248,255,.92); display: flex; align-items: center; gap: 6px; } .sd-required { color: #ff6b6b; } .sd-input, .sd-select, .sd-textarea { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: rgba(242,248,255,.92); font-family: inherit; font-size: 15px; transition: border-color .18s ease, box-shadow .18s ease; } .sd-input:focus, .sd-select:focus, .sd-textarea:focus { outline: none; border-color: rgba(0,180,255,.55); box-shadow: 0 0 0 3px rgba(0,180,255,.12); } .sd-input::placeholder, .sd-textarea::placeholder { color: rgba(242,248,255,.45); } .sd-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f2f8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; } .sd-textarea { resize: vertical; min-height: 120px; } .sd-hint { font-size: 12px; color: rgba(242,248,255,.6); line-height: 1.4; } .sd-privacy-note { font-size: 13px; color: rgba(242,248,255,.7); line-height: 1.6; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); } .sd-form-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } /* Submit spinner */ .sd-btn-submit { position: relative; min-width: 170px; } .sd-btn-text { transition: opacity .18s ease; } .sd-btn-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid transparent; border-top-color: #041522; border-radius: 50%; animation: sd-spin .6s linear infinite; opacity: 0; } @keyframes sd-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .sd-btn-submit.loading .sd-btn-text { opacity: 0; } .sd-btn-submit.loading .sd-btn-spinner { opacity: 1; } /* Contact methods */ .sd-contact-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .sd-contact-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--sd-radius); padding: 20px; display: grid; gap: 12px; } .sd-contact-icon { font-size: 26px; } .sd-contact-title { margin: 0; font-size: 18px; font-weight: 900; } .sd-contact-text { margin: 0; color: rgba(242,248,255,.78); line-height: 1.6; font-size: 14px; } .sd-contact-note { font-size: 12px; color: rgba(242,248,255,.6); margin-top: -4px; } .sd-callout { margin-top: 18px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); color: rgba(242,248,255,.80); line-height: 1.6; } /* Validation helpers */ .sd-input-error { border-color: rgba(255, 107, 107, 0.6) !important; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1) !important; } .sd-error-message { font-size: 12px; color: #ff6b6b; margin-top: 4px; display: flex; align-items: center; gap: 6px; } .sd-error-message::before { content: "⚠"; } .sd-char-counter { font-size: 12px; color: rgba(242,248,255,.6); text-align: right; margin-top: 4px; } /* Responsive */ @media (max-width: 1024px) { .sd-hero-grid { grid-template-columns: 1fr; } .sd-contact-proof { grid-template-columns: 1fr; } .sd-form-grid { grid-template-columns: 1fr; } .sd-contact-methods { grid-template-columns: 1fr; } } @media (max-width: 768px) { .sd-hero { padding-top: 84px; } .sd-form-actions { flex-direction: column; } .sd-btn-submit { width: 100%; } } /* Custom select, consistent in all browsers */ .sd-selectx { position: relative; } .sd-selectx-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: rgba(242,248,255,.92); font-family: inherit; font-size: 15px; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } .sd-selectx-btn:hover { background: rgba(255,255,255,.10); } .sd-selectx-btn:focus { outline: none; border-color: rgba(0,180,255,.50); box-shadow: 0 0 0 3px rgba(0,180,255,.12); } .sd-selectx[aria-invalid="true"] .sd-selectx-btn { border-color: rgba(255, 107, 107, 0.6); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.10); } .sd-selectx-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sd-selectx-caret { width: 18px; height: 18px; display: inline-block; flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23f2f8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 18px; opacity: .9; transition: transform .18s ease; } .sd-selectx.is-open .sd-selectx-caret { transform: rotate(180deg); } .sd-selectx-panel { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(7, 24, 38, .98); box-shadow: 0 18px 60px rgba(0,0,0,.35); overflow: hidden; } .sd-selectx-list { list-style: none; margin: 0; padding: 8px; max-height: 280px; overflow: auto; } .sd-selectx-option { padding: 12px 12px; border-radius: 12px; color: rgba(242,248,255,.92); cursor: pointer; user-select: none; line-height: 1.2; transition: background-color .14s ease, transform .14s ease; } .sd-selectx-option:hover { background: rgba(255,255,255,.08); } .sd-selectx-option[aria-selected="true"] { background: rgba(0,180,255,.14); border: 1px solid rgba(0,180,255,.25); } .sd-selectx-option.is-active { background: rgba(255,255,255,.10); } .sd-selectx-required { margin-top: 6px; } /* Scrollbar polish, optional */ .sd-selectx-list::-webkit-scrollbar { width: 10px; } .sd-selectx-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; } .sd-selectx-list::-webkit-scrollbar-track { background: rgba(255,255,255,.04); } /* Notifications */ .sd-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); box-shadow: 0 16px 46px rgba(0,0,0,.22); margin: 0 0 16px 0; } .sd-notice-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-weight: 900; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); margin-top: 1px; } .sd-notice-text { flex: 1 1 auto; color: rgba(242,248,255,.92); line-height: 1.55; font-size: 14px; } .sd-notice-close { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(242,248,255,.92); cursor: pointer; font-size: 18px; line-height: 1; } .sd-notice-close:hover { background: rgba(255,255,255,.10); } .sd-notice-success { border-color: rgba(46, 204, 113, 0.35); background: rgba(46, 204, 113, 0.10); } .sd-notice-error { border-color: rgba(255, 107, 107, 0.45); background: rgba(255, 107, 107, 0.10); }