/* event.css — camada de UI/UX do template único de eventos. Carregada DEPOIS de styles.css (base do site); tudo scoped em .ev-page para refinar o look existente sem o substituir. */ .ev-page { /* A família vinha num `style=` no , o único estilo inline da página. */ font-family: 'Inter', system-ui, -apple-system, sans-serif; --ev-red: #d6001c; --ev-ink: #0e1422; --ev-muted: #5b6573; --ev-line: #e6e9ef; --ev-bg: #f5f6f9; --ev-card: #ffffff; --ev-radius: 18px; --ev-shadow: 0 18px 50px rgba(16, 24, 40, .10); --ev-shadow-sm: 0 4px 16px rgba(16, 24, 40, .06); background: var(--ev-bg); color: var(--ev-ink); scroll-behavior: smooth; } /* Container utilitário para centrar as secções */ .ev-page main { overflow-x: hidden; } .ev-page .ev-wrap { max-width: 1020px; margin: 0 auto; padding: 0 22px; } /* ── Header ──────────────────────────────────────────────────────────────── */ .ev-page #main-header { padding: 18px 22px; } .ev-page #main-header .header-logo img { height: 34px; } /* ── HERO ────────────────────────────────────────────────────────────────── */ .ev-page .event-hero .hero { position: relative; min-height: 78vh; display: grid; place-items: center; overflow: hidden; } .ev-page .event-hero .hero-overlay { position: absolute; inset: 0; } .ev-page .event-hero .hero-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 22, .35) 0%, rgba(8, 12, 22, .62) 55%, rgba(8, 12, 22, .86) 100%); } .ev-page .event-hero .bg-video, .ev-page .event-hero .bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ev-page .event-hero .hero-container { position: relative; z-index: 2; width: 100%; } .ev-page .event-hero .hero-content { max-width: 820px; margin: 0 auto; text-align: center; color: #fff; padding: 0 22px; animation: ev-rise .6s ease both; } .ev-page .event-hero .headline { font-size: clamp(2.1rem, 5.2vw, 3.6rem); font-weight: 800; line-height: 1.06; margin: 0 0 14px; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); } .ev-page .event-hero .hero-paragraph { font-size: clamp(1rem, 2.2vw, 1.25rem); opacity: .94; margin: 0 auto 22px; max-width: 620px; line-height: 1.5; } /* Chips de meta (data, local, vagas) */ .ev-page .ev-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 26px; } .ev-page .ev-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 8px 15px; border-radius: 999px; font-size: .9rem; font-weight: 600; backdrop-filter: blur(6px); } .ev-page .ev-chip .ph-icon { font-size: 1.05rem; } .ev-page .event-hero .bt-filled.light { background: #fff; color: var(--ev-ink); border: none; border-radius: 999px; padding: 14px 30px; font-weight: 700; font-size: 1rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); transition: transform .15s ease, box-shadow .15s ease; } .ev-page .event-hero .bt-filled.light:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, .34); } .ev-page .ev-scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; opacity: .8; z-index: 2; animation: ev-bounce 1.8s infinite; } .ev-page .ev-scroll-cue .ph-icon { font-size: 1.6rem; } /* ── Secções genéricas ───────────────────────────────────────────────────── */ .ev-page main > .intro-title, .ev-page main > section, .ev-page main > .event-row, .ev-page main > .row { max-width: 1020px; margin-left: auto; margin-right: auto; padding-left: 22px; padding-right: 22px; } .ev-page .intro-title { text-align: center; margin: 56px auto 22px; } .ev-page .intro-title h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -.01em; margin: 0 0 10px; } .ev-page .intro-title h2 .ph-icon { vertical-align: -3px; color: var(--ev-red); } .ev-page .intro-description { color: var(--ev-muted); font-size: 1.05rem; line-height: 1.6; max-width: 680px; margin: 0 auto; } .ev-page .model-intro { padding: 10px 0; } /* ── Highlights (cards) ──────────────────────────────────────────────────── */ .ev-page .fuso-highlights-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin: 10px auto 40px; } .ev-page .fuso-highlight-container { width: auto; padding: 0; } .ev-page .fuso-highlight-card { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); overflow: hidden; box-shadow: var(--ev-shadow-sm); height: 100%; transition: transform .18s ease, box-shadow .18s ease; } .ev-page .fuso-highlight-card:hover { transform: translateY(-4px); box-shadow: var(--ev-shadow); } .ev-page .fuso-highlight-card .highlight-content { padding: 22px; } .ev-page .fuso-highlight-card h2 { font-size: 1.3rem; font-weight: 800; margin: 0 0 10px; } .ev-page .fuso-highlight-card .image-container { margin: 0 -22px 16px; } .ev-page .fuso-highlight-card .image-container img { width: 100%; height: 200px; object-fit: cover; display: block; } .ev-page .fuso-highlight-card p { color: var(--ev-muted); line-height: 1.6; margin: 0; font-size: .95rem; } .ev-page .model-label span { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ev-red); background: rgba(214, 0, 28, .08); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; } /* ── Programa (timeline) ─────────────────────────────────────────────────── */ .ev-page .event-row { background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow-sm); padding: 14px 26px; margin-bottom: 40px; } .ev-page .event-highlight-container { padding: 12px 0; } .ev-page .event-highlight { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 700; color: var(--ev-ink); } .ev-page .event-highlight span { position: relative; padding-left: 22px; } .ev-page .event-highlight span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--ev-red); box-shadow: 0 0 0 4px rgba(214, 0, 28, .14); } .ev-page .event-highlight-description { color: var(--ev-muted); margin: 4px 0 0 22px; padding-bottom: 14px; border-bottom: 1px dashed var(--ev-line); line-height: 1.55; } .ev-page .event-highlight-container > p:last-child { border-bottom: none; } /* ── Bloco INFO + QR + localização ───────────────────────────────────────── */ .ev-page .event-info-block { max-width: 760px; margin: 30px auto; background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow-sm); display: flex; align-items: center; gap: 30px; padding: 26px 30px; flex-wrap: wrap; justify-content: center; } .ev-page .event-info-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ev-page .event-info-qr img { width: 150px; height: 150px; border-radius: 14px; border: 1px solid var(--ev-line); background: #fff; padding: 8px; } .ev-page .event-info-qr span { font-size: .82rem; color: var(--ev-muted); } .ev-page .event-info-loc { display: flex; flex-direction: column; gap: 14px; min-width: 220px; } .ev-page .event-info-loc p { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 600; margin: 0; } .ev-page .event-info-loc p .ph-icon { color: var(--ev-red); font-size: 1.3rem; } .ev-page .event-info-loc .bt-filled { border-radius: 12px; padding: 12px 18px; display: inline-flex; align-items: center; gap: 8px; } /* ── Formulário ──────────────────────────────────────────────────────────── */ .ev-page #event_form_section { padding-bottom: 24px; } .ev-page .event-deadline-note { color: var(--ev-muted); } .ev-page #event_form_container.form-container { max-width: 720px; margin: 8px auto 0; background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow); padding: 0; overflow: hidden; } .ev-page .form-title { background: var(--ev-ink); color: #fff; padding: 18px 26px; } .ev-page .form-title span { font-size: 1.1rem; font-weight: 700; } .ev-page .form-wrapper { padding: 26px; } .ev-page .form-row { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; } .ev-page .form-row .form-col { flex: 1 1 200px; padding: 0; } .ev-page .form-col > label, .ev-page .form-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 7px; color: var(--ev-ink); } .ev-page .form-col .required { color: var(--ev-red); } .ev-page .input-container { position: relative; } .ev-page .form-wrapper input[type="text"], .ev-page .form-wrapper input[type="email"], .ev-page .form-wrapper input[type="tel"], .ev-page .form-wrapper select, .ev-page .form-wrapper textarea { width: 100%; border: 1px solid var(--ev-line); border-radius: 12px; padding: 12px 14px; font: inherit; color: var(--ev-ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .ev-page .form-wrapper input:focus, .ev-page .form-wrapper select:focus, .ev-page .form-wrapper textarea:focus { outline: none; border-color: var(--ev-red); box-shadow: 0 0 0 3px rgba(214, 0, 28, .12); } .ev-page .form-wrapper input.is-invalid, .ev-page .form-wrapper select.is-invalid { border-color: #e02424; box-shadow: 0 0 0 3px rgba(224, 36, 36, .12); } .ev-page .ev-err { display: block; color: #c01626; font-size: .8rem; font-weight: 600; margin-top: 5px; } .ev-page .form-wrapper textarea { min-height: 92px; resize: vertical; } /* Checkboxes de consentimento */ .ev-page .form-wrapper input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ev-red); vertical-align: -3px; margin-right: 8px; } .ev-page .form-wrapper label.checkbox, .ev-page .form-wrapper .input-container label { font-weight: 500; font-size: .9rem; color: var(--ev-muted); display: inline; } .ev-page .form-wrapper a { color: var(--ev-red); font-weight: 600; } .ev-page .form-footer { padding: 0 26px 26px; } .ev-page .form-footer .bt-filled { width: 100%; justify-content: center; background: var(--ev-red); color: #fff; border: none; border-radius: 12px; padding: 15px 24px; font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; transition: filter .15s ease, transform .1s ease; } .ev-page .form-footer .bt-filled:hover { filter: brightness(1.05); } .ev-page .form-footer .bt-filled:active { transform: translateY(1px); } .ev-page .form-footer .bt-filled:disabled { opacity: .65; cursor: default; } /* ── Cartões de estado (privado/esgotado/encerrado/confirmação/erro) ─────── */ .ev-page .ev-state { max-width: 560px; margin: 70px auto; background: var(--ev-card); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); box-shadow: var(--ev-shadow); padding: 48px 36px; text-align: center; } .ev-page .ev-state .ev-state-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; font-size: 2.2rem; } .ev-page .ev-state-ok .ev-state-icon { background: #ecfdf3; color: #067647; } .ev-page .ev-state-warn .ev-state-icon { background: #fffaeb; color: #b54708; } .ev-page .ev-state-lock .ev-state-icon { background: #eef2ff; color: #3538cd; } .ev-page .ev-state-err .ev-state-icon { background: #fef3f2; color: #b42318; } .ev-page .ev-state h2 { font-size: 1.5rem; font-weight: 800; margin: 0 0 10px; } .ev-page .ev-state p { color: var(--ev-muted); line-height: 1.6; margin: 0 auto 6px; max-width: 420px; } .ev-page .ev-state .ev-btn-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; text-decoration: none; background: var(--ev-ink); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 600; } /* Rodapé: aspeto único em app/Core/View/partials/minimal_footer.css, sem reescritas por portal. */ /* ── Animações ───────────────────────────────────────────────────────────── */ @keyframes ev-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes ev-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } @media (max-width: 600px) { .ev-page .event-hero .hero { min-height: 70vh; } .ev-page .form-row { gap: 12px; } .ev-page .event-info-block { padding: 22px; gap: 20px; } }