/* ========================================================================== Teste de Nivelamento de Inglês — estilos isolados (prefixo .pt-) Paleta e tipografia alinhadas ao tema hello-child (Inter, navy/blue/orange/green). ========================================================================== */ /* Variables */ :root { --pt-navy: #1a2878; --pt-navy-dark: #141e60; --pt-blue: #3d5af1; --pt-blue-hv: #2d47d4; --pt-blue-bg: #dde8f5; --pt-orange: #f5a623; --pt-orange-dark: #d48c18; --pt-green: #22a861; --pt-white: #ffffff; --pt-gray-bg: #f7f9fc; --pt-gray-text: #4a5568; --pt-gray-muted: #718096; --pt-radius: 0.75rem; --pt-radius-lg: 1.25rem; --pt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --pt-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1); --pt-shadow-lg: 0 12px 40px rgba(26, 40, 120, 0.16); --pt-transition: 220ms ease; } /* Reset */ .pt-app, .pt-app * { box-sizing: border-box; } .pt-app { font-family: "Inter", system-ui, -apple-system, sans-serif; color: var(--pt-gray-text); } /* Layout */ .pt-app { display: flex; justify-content: center; padding: 2.5rem 1rem; min-height: 60vh; background: linear-gradient(180deg, var(--pt-blue-bg) 0%, var(--pt-gray-bg) 45%); } /* #placement-app is the mount point injected by script.js. It must have a definite width, otherwise its width shrinks to fit whatever content is currently rendered inside (e.g. the result screen, which has less intrinsic width than a question card), making .pt-card jump width between screens even though max-width is fixed. */ #placement-app { display: flex; justify-content: center; width: 100%; } /* Minimal page shell (header/footer around .pt-app on the WordPress template). Flex column at 100vh + .pt-app flex:1 keeps the footer pinned to the bottom of the viewport even when a question screen is short. */ body.pt-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: "Inter", system-ui, -apple-system, sans-serif; background: var(--pt-gray-bg); } /* The WP admin bar adds its own top padding on (32px, 46px below 782px). Without subtracting it here, min-height:100vh on the body stacks on top of that padding and overflows the viewport by that amount, producing a permanent scrollbar for logged-in users even when the content itself fits. */ body.pt-page.admin-bar { min-height: calc(100vh - 32px); } @media (max-width: 782px) { body.pt-page.admin-bar { min-height: calc(100vh - 46px); } } body.pt-page .pt-app { flex: 1 0 auto; } .pt-minimal-header, .pt-minimal-header *, .pt-minimal-footer, .pt-minimal-footer * { box-sizing: border-box; } .pt-minimal-header { background: var(--pt-white); border-bottom: 1px solid var(--pt-blue-bg); } .pt-minimal-header__inner { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pt-minimal-header__logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--pt-navy); font-weight: 700; font-size: 1.05rem; } .pt-minimal-header__logo img { height: 32px; width: auto; display: block; } .pt-minimal-header__back { display: flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--pt-gray-muted); font-size: 0.9rem; font-weight: 600; transition: color var(--pt-transition); } .pt-minimal-header__back:hover { color: var(--pt-blue); } .pt-minimal-footer { background: var(--pt-white); border-top: 1px solid var(--pt-blue-bg); } .pt-minimal-footer__inner { max-width: 1100px; margin: 0 auto; padding: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .pt-minimal-footer__inner p { margin: 0; color: var(--pt-gray-muted); font-size: 0.85rem; } .pt-minimal-footer__cta { text-decoration: none; color: var(--pt-white); background: var(--pt-blue); padding: 0.6rem 1.1rem; border-radius: var(--pt-radius); font-size: 0.85rem; font-weight: 700; transition: background var(--pt-transition); } .pt-minimal-footer__cta:hover { background: var(--pt-blue-hv); } @media (max-width: 480px) { .pt-minimal-header__inner { padding: 0.85rem 1rem; } .pt-minimal-header__logo span { display: none; } .pt-minimal-footer__inner { flex-direction: column; align-items: flex-start; } } .pt-card { width: 100%; max-width: 640px; background: var(--pt-white); border-radius: var(--pt-radius-lg); box-shadow: var(--pt-shadow-lg); padding: 2.5rem; animation: pt-fade-in 420ms ease both; } .pt-card.pt-quiz { display: flex; flex-direction: column; } @media (max-width: 640px) { .pt-app { padding: 1.25rem 0.75rem; } .pt-card { padding: 1.5rem; border-radius: var(--pt-radius); } } /* Badge */ .pt-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pt-blue); background: var(--pt-blue-bg); padding: 0.35rem 0.75rem; border-radius: 999px; margin-bottom: 1.25rem; } .pt-badge--result { color: var(--pt-navy); background: var(--pt-blue-bg); } /* Intro */ .pt-intro__title { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.25; color: var(--pt-navy); margin: 0 0 0.75rem; } .pt-intro__lead { color: var(--pt-gray-muted); line-height: 1.6; margin: 0 0 1.5rem; } .pt-levels { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; } .pt-levels__item span { display: block; min-width: 2.75rem; text-align: center; padding: 0.4rem 0.6rem; border-radius: var(--pt-radius); background: var(--pt-gray-bg); color: var(--pt-navy); font-weight: 700; font-size: 0.85rem; } .pt-intro__meta { display: flex; gap: 1.75rem; margin-bottom: 2rem; } .pt-intro__meta-item { display: flex; flex-direction: column; } .pt-intro__meta-item strong { font-size: 1.4rem; color: var(--pt-navy); } .pt-intro__meta-item span { font-size: 0.8rem; color: var(--pt-gray-muted); } .pt-intro__cta { width: 100%; } /* Progress */ .pt-progress { margin-bottom: 1.5rem; } .pt-progress__bar { height: 8px; border-radius: 999px; background: var(--pt-gray-bg); overflow: hidden; } .pt-progress__fill { height: 100%; background: linear-gradient(90deg, var(--pt-blue), var(--pt-navy)); border-radius: 999px; transition: width 420ms ease; } .pt-progress__meta { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.8rem; color: var(--pt-gray-muted); font-weight: 600; } /* Question */ .pt-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem 0.65rem; border-radius: 999px; margin-bottom: 1rem; color: var(--pt-white); background: var(--pt-blue); } .pt-tag--vocabulary { background: var(--pt-orange); } .pt-tag--reading { background: var(--pt-green); } .pt-passage { background: var(--pt-gray-bg); border-left: 4px solid var(--pt-blue); border-radius: 0 var(--pt-radius) var(--pt-radius) 0; padding: 1rem 1.25rem; margin-bottom: 1.25rem; font-size: 0.95rem; line-height: 1.6; } .pt-passage p { margin: 0; } .pt-question { border: 0; padding: 0; margin: 0 0 1.5rem; } .pt-question__text { display: flex; align-items: center; padding: 0; font-size: 1.15rem; font-weight: 600; color: var(--pt-navy-dark); line-height: 1.5; min-height: 3em; margin-bottom: 1.1rem; } .pt-options { display: grid; gap: 0.65rem; } .pt-option { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.85rem 1rem; border: 2px solid var(--pt-gray-bg); background: var(--pt-gray-bg); border-radius: var(--pt-radius); cursor: pointer; transition: border-color var(--pt-transition), background var(--pt-transition), transform var(--pt-transition); } .pt-option:hover { border-color: var(--pt-blue); } .pt-option.is-selected { border-color: var(--pt-blue); background: var(--pt-blue-bg); transform: translateY(-1px); } .pt-option input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; } .pt-option input[type="radio"]:focus-visible ~ .pt-option__marker { outline: 2px solid var(--pt-blue); outline-offset: 2px; } .pt-option__marker { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--pt-white); color: var(--pt-navy); font-weight: 700; font-size: 0.85rem; } .pt-option.is-selected .pt-option__marker { background: var(--pt-blue); color: var(--pt-white); } .pt-option__text { color: var(--pt-gray-text); font-weight: 500; } /* Buttons */ .pt-btn { font-family: inherit; font-size: 0.95rem; font-weight: 700; border: none; border-radius: var(--pt-radius); padding: 0.85rem 1.5rem; cursor: pointer; transition: background var(--pt-transition), transform var(--pt-transition), opacity var(--pt-transition); } .pt-btn--primary { background: var(--pt-orange); color: var(--pt-white); } .pt-btn--primary:hover:not(:disabled) { background: var(--pt-orange-dark); } .pt-btn--primary:disabled { opacity: 0.45; cursor: not-allowed; } .pt-btn--ghost { background: transparent; color: var(--pt-navy); border: 2px solid var(--pt-blue-bg); } .pt-btn--ghost:hover:not(:disabled) { border-color: var(--pt-blue); } .pt-btn--ghost:disabled { opacity: 0.35; cursor: not-allowed; } .pt-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.5rem; } .pt-nav .pt-btn { flex: 1; } /* Transition / loading */ .pt-transition { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 260px; gap: 1.25rem; } .pt-transition__spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--pt-blue-bg); border-top-color: var(--pt-blue); animation: pt-spin 800ms linear infinite; } .pt-transition__text { color: var(--pt-navy); font-weight: 600; margin: 0; } /* Result */ .pt-result { text-align: center; } .pt-result__level { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem; } .pt-result__cefr { font-size: 3.5rem; font-weight: 800; color: var(--pt-navy); line-height: 1; animation: pt-pop-in 500ms ease both; } .pt-result__label { font-size: 1.1rem; color: var(--pt-gray-muted); font-weight: 600; margin-top: 0.4rem; } .pt-result__score { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 2rem; } .pt-score-ring { --size: 140px; width: var(--size); height: var(--size); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--pt-green) calc(var(--pct) * 1%), var(--pt-gray-bg) 0); animation: pt-ring-in 900ms ease both; } .pt-score-ring span { width: calc(var(--size) - 22px); height: calc(var(--size) - 22px); border-radius: 50%; background: var(--pt-white); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 800; color: var(--pt-navy); } .pt-result__score p { margin: 0; color: var(--pt-gray-muted); font-size: 0.9rem; } .pt-breakdown { display: grid; gap: 1rem; margin-bottom: 2rem; text-align: left; } .pt-breakdown__head { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; color: var(--pt-navy-dark); margin-bottom: 0.35rem; } .pt-breakdown__bar { height: 8px; border-radius: 999px; background: var(--pt-gray-bg); overflow: hidden; } .pt-breakdown__fill { height: 100%; background: var(--pt-blue); border-radius: 999px; transition: width 700ms ease; } /* Animations */ @keyframes pt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pt-spin { to { transform: rotate(360deg); } } @keyframes pt-pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes pt-ring-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pt-card, .pt-result__cefr, .pt-score-ring, .pt-transition__spinner { animation: none; } } /* Responsive */ @media (max-width: 480px) { .pt-nav { flex-direction: column-reverse; } .pt-intro__meta { gap: 1.1rem; } }