/* September 2026 review. Scoped to the rebuilt page, not the hidden legacy page. The ID also prevents the old dark-theme !important rules from leaking in. */ #nr-page-shell { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } #nr-page { --cta-green: #4c9a6a; --cta-green-hover: #60ad7e; --paper: #fffefb; --paper-soft: #faf8f4; --graphite: #1d1e22; --body-copy: #474b54; --paper-dots: radial-gradient(rgba(148, 154, 164, .46) 1px, transparent 1px); font-family: "Hanken Grotesk", sans-serif; font-size: 18px; line-height: 1.55; padding-bottom: 40px; } /* Respiro lateral em telas de 13". O cap de 1180px deixava so 50px de margem somada num monitor de 1280 — a pagina encostava nas bordas. Abaixo de 1500px o container passa a 80% da tela (o mesmo efeito de um zoom out), e acima disso o cap volta a mandar. Faixa presa em >=992px para nao tocar no mobile. */ @media (min-width: 992px) and (max-width: 1499px) { #nr-page .nr-wrap { width: min(1180px, 80%); } } /* A barra fixa nao entra nesse 80%: ela ja tem o proprio recuo interno, e aplicar a reducao duas vezes espremia o nav ate o rotulo do botao quebrar em tres linhas — o que esticava a barra para mais de 100px de altura. Aqui ela volta ao recuo original e acompanha o container por fora. */ @media (min-width: 992px) and (max-width: 1499px) { #nr-page .nr-topbar { width: min(1240px, calc(80% + 60px)); } #nr-page .nr-topbar > .nr-wrap { width: calc(100% - 52px); } } /* Abaixo de 1200px o nav e o botao disputam a mesma linha, entao os links encolhem. O seletor precisa do .nr-topbar no meio: ha um `#nr-page .nr-menu a { font-size: 15px !important }` mais adiante no arquivo que ganharia por ordem com a mesma especificidade. */ @media (min-width: 992px) and (max-width: 1199px) { #nr-page .nr-topbar .nr-menu { gap: 12px !important; } #nr-page .nr-topbar .nr-menu a { font-size: 12px !important; letter-spacing: 1.1px !important; } } #nr-page .nr-topbar .nr-btn, #nr-page .nr-top-actions a { white-space: nowrap; } /* Full-width parent makes the old 100vw breakout unnecessary (and avoids scrollbar overflow). */ #nr-page .nr-hero, #nr-page #nr-conteudo, #nr-page #nr-investimento { left: auto !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; } /* A rolagem acontece no , nao no — e la que scroll-behavior faz efeito. */ body { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { body { scroll-behavior: auto; } } /* O roadmap do Python tem 3, 2, 3, 4 e 2 icones por grupo — a pagina de JavaScript reservava 3, 4, 3, 2 e 2. So a contagem de colunas muda. */ #nr-page .nr-roadmap-group--2 .nr-roadmap-techs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* Quatro colunas espremiam "Matplotlib" e "Streamlit" em duas linhas; 2x2 cabe. */ #nr-page .nr-roadmap-group--4 .nr-roadmap-techs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* A visible paper texture across the page, not over the card contents. */ #nr-page, #nr-page .nr-hero, #nr-page .nr-metrics, #nr-page .nr-section, #nr-page #nr-conteudo, #nr-page #nr-investimento { background-image: var(--paper-dots) !important; background-size: 24px 24px !important; } /* Readable type: body 18–20px, supporting copy 16px, mono labels 14px. */ #nr-page p { font-size: 18px !important; line-height: 1.6 !important; } #nr-page .nr-hero__lead { font-size: 20px !important; line-height: 1.6 !important; } #nr-page .nr-hero { padding-top: 52px !important; } #nr-page .nr-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important; grid-template-areas: "copy media" "cta cta"; column-gap: clamp(36px, 4vw, 58px) !important; row-gap: 16px !important; } #nr-page .nr-hero__copy { grid-area: copy; min-width: 0; } #nr-page .nr-hero__grid > .nr-hero__media { grid-area: media; width: 100%; min-width: 0; align-self: center; } #nr-page .nr-hero h1 { font-size: clamp(40px, 3.8vw, 56px) !important; line-height: 1.08 !important; } #nr-page .nr-hero__cta { grid-area: cta; grid-column: 1 / -1; display: flex; justify-content: center; min-width: 0; } #nr-page .nr-hero__cta > .nr-btn { width: auto !important; max-width: 100%; } #nr-page .nr-head > p, #nr-page .nr-results-head > p, #nr-page .nr-section-intro > p, #nr-page .nr-market-heading > p { font-size: 20px !important; line-height: 1.55 !important; } #nr-page .nr-kicker, #nr-page .nr-label { font-family: "JetBrains Mono", monospace !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.55 !important; letter-spacing: .045em !important; text-transform: uppercase; } #nr-page .nr-kicker { margin-bottom: 16px; } #nr-page .nr-product-copy > span { font-size: 14px !important; line-height: 1.4 !important; } #nr-page .nr-product-copy > strong { font-size: 21px !important; line-height: 1.25 !important; } #nr-page .nr-hero-labels { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 0; } #nr-page .nr-hero-labels li { gap: 7px; font-size: 12px !important; line-height: 1.5 !important; letter-spacing: .045em; } #nr-page .nr-hero-labels i { font-size: 17px; } #nr-page .nr-metric strong { font-size: clamp(46px, 5vw, 64px) !important; } #nr-page .nr-metric span { font-size: 15px !important; line-height: 1.5 !important; letter-spacing: 0 !important; } #nr-page .nr-inline-stats span { font-size: 16px !important; line-height: 1.5 !important; } #nr-page .nr-inline-stats strong { font-size: 29px !important; line-height: 1.15 !important; } #nr-page .nr-checks li { font-size: 18px !important; line-height: 1.55 !important; } #nr-page .nr-testimonial p { min-height: 188px; } #nr-page .nr-testimonial p strong { font-size: 23px !important; line-height: 1.3 !important; } #nr-page .nr-testimonial p span { font-size: 17px !important; line-height: 1.55 !important; } #nr-page .nr-source, #nr-page .nr-market-context, #nr-page .nr-student-videos__hint { font-size: 16px !important; line-height: 1.6 !important; color: #474b54 !important; } #nr-page .nr-source { margin-top: 26px !important; } #nr-page .nr-bonus-item h3 { font-size: 23px !important; line-height: 1.2 !important; } #nr-page .nr-bonus-value { font-size: 15px !important; line-height: 1.4 !important; } #nr-page .nr-ai-new { font-size: 17px !important; line-height: 1.4 !important; } #nr-page .nr-ai-brand span { font-size: 14px !important; line-height: 1.4 !important; } #nr-page .nr-faq { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } #nr-page .nr-contact { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } #nr-page .nr-faq summary { font-size: 21px !important; line-height: 1.35 !important; padding-right: 35px; } #nr-page .nr-faq details p, #nr-page .nr-faq details li { font-size: 18px !important; line-height: 1.6 !important; } #nr-page .nr-answer-lead { font-size: 20px !important; line-height: 1.45 !important; } #nr-page .nr-answer-path span { font-size: 15px !important; line-height: 1.4 !important; } #nr-page .nr-faq details { padding: 23px 26px; } /* Caveat is for annotations, never for controls or body copy. */ #nr-page .nr-sketch, #nr-page .nr-results-tools .nr-sketch { font-family: "Caveat", "Segoe Script", cursive !important; font-size: 30px !important; font-weight: 600 !important; line-height: 1.12 !important; letter-spacing: 0 !important; color: #cc4b55 !important; } #nr-page .nr-product-update { font-size: 21px !important; } #nr-page .nr-results-tools { justify-content: flex-end; gap: 18px; } #nr-page .nr-results-tools .nr-sketch { margin: 0; text-align: right; } #nr-page .nr-results-tools .nr-carousel-nav { flex-shrink: 0; } /* Facade dos videos principais: a miniatura ocupa o quadro e o player do YouTube so entra no clique. O botao ja vem posicionado pelo .lite-video base. */ #nr-page .nr-video > .lite-video { border: 0; background: #111; cursor: pointer; } #nr-page .nr-video > .lite-video img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Short handwritten invitations point into each player; they never overlap it. */ #nr-page .nr-watch { display: block; width: 100%; min-width: 0; margin: 0; } #nr-page .nr-watch__cue, #nr-page .nr-comparison__cue { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; margin: 0 0 12px; padding-inline: 8px; } #nr-page .nr-watch__cue .nr-sketch, #nr-page .nr-comparison__cue .nr-sketch { margin: 0 !important; max-width: calc(100% - 66px); font-size: 28px !important; line-height: 1.1 !important; color: #cc4b55 !important; -webkit-text-fill-color: #cc4b55 !important; transform: none; text-align: left; } #nr-page .nr-watch__cue svg, #nr-page .nr-comparison__cue svg { flex: 0 0 56px; width: 56px; height: 44px; overflow: visible; color: #e05c65; transform: none; } #nr-page .nr-watch__cue path, #nr-page .nr-comparison__cue path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } #nr-page .nr-watch > .nr-video { width: 100%; margin: 0 !important; } #nr-page .nr-dark-shell .nr-watch__cue .nr-sketch, #nr-page .nr-bonus-feature .nr-watch__cue .nr-sketch { color: #f4b3b7 !important; -webkit-text-fill-color: #f4b3b7 !important; } /* Styleguide success green with white CTA text, as requested. */ #nr-page .nr-btn { min-height: 58px !important; padding: 15px 25px !important; border: 1.5px solid #1d1e22 !important; border-radius: 16px !important; background: var(--cta-green) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: 3px 3px 0 #1d1e22 !important; font: 750 18px/1.25 "Hanken Grotesk", sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; transition: background .2s ease, box-shadow .2s ease, transform .2s ease; } #nr-page .nr-btn i { color: inherit !important; -webkit-text-fill-color: currentColor !important; } #nr-page .nr-btn:hover { background: var(--cta-green-hover) !important; transform: translateY(-2px); box-shadow: 4px 5px 0 #1d1e22 !important; } #nr-page .nr-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1d1e22 !important; } #nr-page a:focus-visible, #nr-page button:focus-visible, #nr-page summary:focus-visible { outline: 3px solid #3f8f86; outline-offset: 5px; } #nr-page .nr-topbar__in { min-height: 70px !important; padding-block: 11px !important; } #nr-page .nr-menu a { font-size: 15px !important; } #nr-page .nr-menu { gap: 23px; } #nr-page .nr-top-actions .nr-btn { min-height: 44px !important; height: auto !important; padding: 11px 18px !important; font-size: 15px !important; border-radius: 999px !important; } #nr-page .nr-menu-toggle { background: #fffefb !important; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; min-width: 44px; min-height: 44px; } #nr-page .nr-menu-toggle i { color: inherit !important; -webkit-text-fill-color: currentColor !important; } #nr-page .nr-mobile-menu a { font-size: 17px !important; line-height: 1.4 !important; color: #1d1e22 !important; } #nr-page .nr-mobile-menu { max-height: calc(100dvh - 106px); overflow-y: auto; overscroll-behavior: contain; } #nr-page .nr-mobile-menu a:last-child { background: var(--cta-green) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } #nr-page .nr-contact .nr-btn { background: #4c9a6a !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 20px !important; font-weight: 750 !important; } #nr-page .nr-contact .nr-btn:hover { background: #387b50 !important; } /* Dark blocks cast a neutral graphite/gray shadow, not a coral one. */ #nr-page .nr-dark-shell, #nr-page .nr-bonus-feature, #nr-page .nr-ai .nr-video, #nr-page .nr-roadmap-group--5 { box-shadow: 6px 6px 0 #949aa4 !important; } /* Who it's for: one drawing and one recognizable situation per card. */ #nr-page .nr-section-intro { max-width: 850px; margin-bottom: 38px; } #nr-page .nr-section-intro h2 { margin: 0 0 24px; font: 750 clamp(34px, 4vw, 52px)/1.08 "Hanken Grotesk", sans-serif; letter-spacing: -.035em; color: #1d1e22 !important; } #nr-page .nr-section-intro > p { max-width: 760px; margin: 0; color: #474b54; } #nr-page .nr-audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } #nr-page .nr-audience-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 24px; min-width: 0; padding: 30px 28px; border: 1.5px solid #1d1e22; border-radius: 26px 31px 25px 29px; background: #fffefb; box-shadow: 4px 4px 0 #c3c8d0; } #nr-page .nr-audience-card:nth-child(2) { background: #f4f1ea; } #nr-page .nr-audience-card:nth-child(3) { background: #e7f3ec; } #nr-page .nr-audience-card:nth-child(4) { background: #fffefb; } #nr-page .nr-audience-card > img { display: block; width: 112px; height: 140px; object-fit: contain; margin: 0; } #nr-page .nr-audience-card { isolation: isolate; } /* Paper-white pixels blend into the card; contrast removes the baked-in pale checkerboard. */ #nr-page .nr-audience-card > img { background: transparent !important; filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; } #nr-page .nr-audience-card__copy { min-width: 0; } #nr-page .nr-audience-card .nr-label { display: block; margin-bottom: 10px; color: #474b54; } #nr-page .nr-audience-card h3 { margin: 0 0 13px; font: 750 28px/1.17 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; color: #1d1e22; } #nr-page .nr-audience-card p { margin: 0; color: #474b54; } /* Compact teacher profiles: supplied photographs, cropped only by CSS. */ #nr-page .nr-teachers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } #nr-page .nr-teacher { display: flex; flex-direction: column; min-width: 0; padding: 32px; border: 1.5px solid #1d1e22; border-radius: 26px 31px 25px 29px; background: #fffefb; box-shadow: 4px 4px 0 #c3c8d0; } #nr-page .nr-teacher__identity { display: flex; align-items: center; gap: 22px; margin-bottom: 24px; } #nr-page .nr-teacher__identity img { flex: 0 0 96px; width: 96px; height: 96px; object-fit: cover; border-radius: 50% !important; border: 2px solid #1d1e22; } #nr-page .nr-teacher__identity .nr-label { display: block; margin-bottom: 8px; font-size: 14px !important; color: #474b54 !important; } #nr-page .nr-teacher h3 { margin: 0; font: 750 29px/1.12 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; color: #1d1e22 !important; } #nr-page .nr-teacher p { margin: 0 0 16px; color: #474b54 !important; } #nr-page .nr-teacher__proof { display: grid; gap: 19px; margin: 0 0 26px; padding: 0; list-style: none; } #nr-page .nr-teacher__proof li { display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.5; color: #474b54; } #nr-page .nr-teacher__proof i { flex: 0 0 22px; font-size: 22px; line-height: 1.3; color: #387b50; } #nr-page .nr-teacher__proof strong { color: #1d1e22; font-weight: 700; } #nr-page .nr-teacher__techs { display: flex; gap: 12px; align-items: flex-start; margin-top: auto; padding-top: 22px; border-top: 1px solid #e0e3e8; font-size: 16px; line-height: 1.55; color: #474b54; } #nr-page .nr-teacher__techs i { font-size: 22px; color: #1d1e22; } /* Portrait videos retain their native story proportions. */ #nr-page .nr-student-videos__grid { max-width: 1080px; margin-inline: auto; gap: 22px; } #nr-page .nr-student-video__player { aspect-ratio: 9 / 16; } #nr-page .nr-student-video__caption { padding: 19px 18px; } #nr-page .nr-student-video__caption h4 { font-size: 20px !important; line-height: 1.25 !important; margin: 0; } #nr-page .nr-student-video .lite-video::after { width: 60px; height: 60px; } #nr-page .nr-student-videos__head p { font-size: 18px !important; } /* Capabilities, not a three-project syllabus. The heading uses the shared wrap. */ #nr-page .nr-showcase { width: 100%; max-width: none; margin-inline: 0; overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 28px 34px 27px 31px; background: #fffefb; background-image: none !important; box-shadow: 6px 6px 0 #1d1e22; } #nr-page .nr-project-explorer { padding: 30px 32px 28px; } #nr-page .nr-project-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; margin-bottom: 24px; border: 1px solid #d8d6d0; border-radius: 18px; background: #f4f1ea; } #nr-page .nr-project-tabs button { min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; font: 700 17px/1.3 "Hanken Grotesk", sans-serif; color: #474b54 !important; -webkit-text-fill-color: #474b54 !important; cursor: pointer; } #nr-page .nr-project-tabs button[aria-selected="true"] { border-color: #1d1e22; background: #fffefb; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; box-shadow: 2px 2px 0 #1d1e22; } #nr-page .nr-project-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px; } #nr-page .nr-project-panel[hidden] { display: none !important; } #nr-page .nr-project-story .nr-label { display: block; margin-bottom: 15px; font-size: 14px !important; color: #474b54 !important; } #nr-page .nr-project-story h3 { margin: 0 0 17px; font: 750 30px/1.15 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; color: #1d1e22 !important; } #nr-page .nr-project-story p { margin: 0; color: #474b54 !important; } #nr-page .nr-project-story .nr-project-possibilities { margin-top: 20px; padding-top: 18px; border-top: 1px solid #d8d6d0; font-size: 17px !important; } #nr-page .nr-project-possibilities strong { color: #1d1e22; } #nr-page .nr-project-preview-note { margin: 19px 0 0; font-size: 16px !important; color: #474b54 !important; } #nr-page .nr-demo-window { align-self: stretch; overflow: hidden; min-width: 0; min-height: 350px; border: 1.5px solid #1d1e22; border-radius: 18px; background: #fffefb; box-shadow: 3px 3px 0 #c3c8d0; } #nr-page .nr-demo-window__bar { display: flex; align-items: center; gap: 18px; min-height: 42px; padding: 10px 16px; border-bottom: 1px solid #d8d6d0; background: #f4f1ea; color: #474b54; font: 500 12px/1.35 "JetBrains Mono", monospace; overflow-wrap: anywhere; } #nr-page .nr-demo-window__bar span:first-child { flex: 0 0 auto; font-size: 9px; letter-spacing: 2px; color: #949aa4; } #nr-page .nr-demo-site { padding: 25px 28px; background: #f5f1e8; } #nr-page .nr-demo-site__brand { display: flex; gap: 9px; align-items: center; font-weight: 750; color: #1d1e22; } #nr-page .nr-demo-site__brand i { color: #cc4b55; font-size: 24px; } #nr-page .nr-demo-site h4 { margin: 22px 0 14px; color: #1d1e22 !important; font: 800 39px/1.06 "Hanken Grotesk", sans-serif; letter-spacing: -.04em; } #nr-page .nr-demo-site p { margin: 0 0 21px; font-size: 17px !important; line-height: 1.5 !important; color: #474b54 !important; } #nr-page .nr-demo-site details { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: none; } #nr-page .nr-demo-site summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 11px 16px; list-style: none; cursor: pointer; border-radius: 10px; background: #26282e; color: #fff !important; font: 700 16px/1.3 "Hanken Grotesk", sans-serif; } #nr-page .nr-demo-site summary::-webkit-details-marker { display: none; } #nr-page .nr-demo-site summary i { color: #fff !important; } #nr-page .nr-demo-site details ul { margin: 16px 0 0; padding-left: 20px; font-size: 16px; color: #33363d; } #nr-page .nr-demo-kanban { padding: 24px 20px; } #nr-page .nr-demo-kanban h4, #nr-page .nr-demo-courses h4 { margin: 0 0 22px; color: #1d1e22 !important; font: 750 23px/1.15 "Hanken Grotesk", sans-serif; letter-spacing: -.02em; } #nr-page .nr-demo-kanban__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #nr-page .nr-demo-kanban__columns > div { min-width: 0; min-height: 164px; padding: 12px 8px; border: 1px solid #e0e3e8; border-radius: 10px; background: #f4f1ea; } #nr-page .nr-demo-kanban__columns > div > strong { display: block; margin-bottom: 14px; color: #474b54; font-size: 13px; line-height: 1.3; } #nr-page .nr-demo-kanban__columns > div:last-child { background: #e7f3ec; } #nr-page .nr-demo-task { padding: 12px 9px; border: 1px solid #c3c8d0; border-radius: 8px; background: #fffefb; color: #1d1e22; box-shadow: 0 2px 0 #e0e3e8; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; } #nr-page .nr-demo-task i { display: block; margin-bottom: 8px; color: #cc4b55; font-size: 19px; } #nr-page .nr-demo-action { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 22px; padding: 11px 16px; border: 0; border-radius: 10px; background: #26282e; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 700 16px/1.3 "Hanken Grotesk", sans-serif; cursor: pointer; } #nr-page .nr-demo-courses { padding: 24px 22px; } #nr-page .nr-demo-courses__title { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } #nr-page .nr-demo-courses__title > i { color: #474b54; font-size: 24px; } #nr-page .nr-demo-course { display: flex; align-items: center; gap: 12px; padding: 17px 0; border-top: 1px solid #e0e3e8; } #nr-page .nr-demo-course > i { display: grid; place-items: center; flex: 0 0 46px; height: 52px; border-radius: 10px; background: #fceef0; color: #cc4b55; font-size: 24px; } #nr-page .nr-demo-course:nth-of-type(3) > i { background: #e7f3ec; color: #387b50; } #nr-page .nr-demo-course > div { min-width: 0; flex: 1; } #nr-page .nr-demo-course strong { display: block; color: #1d1e22; font-size: 17px; line-height: 1.3; } #nr-page .nr-demo-course span { display: block; margin-top: 5px; color: #474b54; font-size: 14px; } #nr-page .nr-demo-favorite { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 1px solid #d8d6d0; border-radius: 50%; background: #fffefb; color: #474b54 !important; cursor: pointer; font-size: 19px; } #nr-page .nr-demo-favorite[aria-pressed="true"] { background: #fceef0; color: #cc4b55 !important; border-color: #cc4b55; } #nr-page .nr-demo-courses__hint { margin: 17px 0 0; color: #474b54 !important; font-size: 16px !important; } /* The real study-plan demonstration is separate from the Labs overview. */ #nr-page .nr-study-plan { overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; border: 1.5px solid #1d1e22; border-radius: 28px 34px 27px 31px; background: #fffefb; box-shadow: 5px 5px 0 #c3c8d0; } #nr-page .nr-study-routine { min-width: 0; padding: 38px; } #nr-page .nr-study-routine h3 { margin: 0 0 30px; font: 750 32px/1.13 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; color: #1d1e22 !important; } #nr-page .nr-study-routine ol { display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; } #nr-page .nr-study-routine li { display: flex; align-items: flex-start; gap: 16px; } #nr-page .nr-study-routine li > span { flex: 0 0 34px; padding-top: 4px; color: #cc4b55; font: 700 16px/1.4 "JetBrains Mono", monospace; } #nr-page .nr-study-routine strong { display: block; color: #1d1e22; font-size: 20px; line-height: 1.3; } #nr-page .nr-study-routine p { margin: 6px 0 0; color: #474b54 !important; } #nr-page .nr-plan-media { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 28px 30px; border-left: 1px solid #d8d6d0; background: #f4f1ea; } #nr-page .nr-plan-media > .nr-watch__cue { width: 100%; max-width: 480px; } #nr-page .nr-plan-media__screen { width: 100%; max-width: 480px; aspect-ratio: 1; overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 18px; background: #26282e; box-shadow: 4px 4px 0 #949aa4; } #nr-page .nr-plan-media__screen img, #nr-page .nr-plan-media__screen video { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; } #nr-page .nr-plan-media .nr-plan-media__play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: auto; max-width: 100%; min-height: 44px; margin-top: 20px; padding: 10px 16px; border: 1px solid #949aa4; border-radius: 12px; background: #fffefb; color: #1d1e22; font: 600 16px/1.4 "Hanken Grotesk", sans-serif; cursor: pointer; } #nr-page .nr-plan-media__play:disabled { cursor: wait; opacity: .65; } #nr-page .nr-plan-media .nr-plan-media__status { margin: 12px 0 0; font-size: 16px !important; line-height: 1.4 !important; text-align: center; color: #474b54 !important; } #nr-page .nr-study-assurances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 26px; } #nr-page .nr-study-assurances article { display: flex; align-items: flex-start; gap: 18px; padding: 26px 28px; border: 1px solid #c3c8d0; border-radius: 22px 27px 21px 25px; background: #fffefb; } #nr-page .nr-study-assurances article > i { flex-shrink: 0; font-size: 30px; line-height: 1.2; color: #1d1e22; } #nr-page .nr-study-assurances h3 { margin: 0 0 10px; font: 750 23px/1.2 "Hanken Grotesk", sans-serif; color: #1d1e22 !important; } #nr-page .nr-study-assurances p { margin: 0; color: #474b54 !important; } #nr-page .nr-labs-overview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 54px; } #nr-page .nr-labs-overview > .nr-watch, #nr-page .nr-labs-overview > .nr-video { width: 100%; max-width: 560px; justify-self: start; } #nr-page .nr-labs-overview__copy { min-width: 0; } #nr-page .nr-labs-overview__copy .nr-label { color: #474b54; } #nr-page .nr-labs-overview h3 { margin: 16px 0 20px; font: 750 34px/1.15 "Hanken Grotesk", sans-serif; color: #1d1e22 !important; letter-spacing: -.025em; } #nr-page .nr-labs-overview p { margin: 0; color: #474b54 !important; } #nr-page .nr-labs-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 42px; } #nr-page .nr-labs-features article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px 20px; align-content: start; padding: 28px; border: 1px solid #c3c8d0; border-radius: 22px 27px 21px 25px; background: #fffefb; } #nr-page .nr-labs-features article > i { grid-row: 1 / 3; padding-top: 2px; font-size: 32px; line-height: 1; color: #1d1e22; } #nr-page .nr-labs-features h3 { margin: 0; font: 750 24px/1.2 "Hanken Grotesk", sans-serif; color: #1d1e22 !important; } #nr-page .nr-labs-features p { grid-column: 2; margin: 0; color: #474b54 !important; } #nr-page .nr-labs-availability { margin: 22px 0 0; color: #474b54 !important; font-size: 16px !important; } /* Two small stickers and two existing notes; no copy or controls underneath them. */ #nr-page .nr-section-intro--sticker { display: grid; grid-template-columns: minmax(0, 850px) 136px; justify-content: space-between; column-gap: 36px; max-width: none; } #nr-page .nr-section-intro--sticker > :not(img) { grid-column: 1; } #nr-page .nr-section-intro--sticker > .nr-sticker { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; width: 126px; height: 126px; object-fit: contain; transform: rotate(7deg); pointer-events: none; } #nr-page #nr-labs .nr-sticker { transform: rotate(-7deg); } #nr-page .nr-study-assurances > article:last-child { background: #eef4df; border-color: #ccd5b8; border-radius: 4px 5px 16px 5px; box-shadow: 3px 5px 0 rgba(29,30,34,.1); transform: rotate(1deg); } #nr-page .nr-roadmap-note { width: min(100% - 24px, 270px); padding: 24px 22px !important; background: #fff5b8; border: 1px solid #e5dca4; border-radius: 4px 5px 16px 5px; box-shadow: 3px 5px 0 rgba(29,30,34,.1); } #nr-page .nr-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* Keep the connected roadmap; move the annotation into its empty lower cell. */ #nr-page .nr-tech-roadmap { margin-top: 48px !important; grid-template-columns: minmax(255px, 1fr) 50px minmax(290px, 1.14fr) 50px minmax(255px, 1fr) !important; } #nr-page .nr-tech-roadmap::before { content: none !important; display: none !important; } #nr-page .nr-roadmap-group--2 .nr-roadmap-techs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #nr-page .nr-roadmap-group--5 { justify-self: center !important; } #nr-page .nr-tech-chip { padding-inline: 5px !important; } #nr-page .nr-tech-chip strong { font-size: 16px !important; line-height: 1.3 !important; overflow-wrap: anywhere; } #nr-page .nr-tech-chip > i { font-size: 44px !important; -webkit-text-fill-color: currentColor !important; } #nr-page .nr-tech-chip > svg { display: block; width: 44px; height: 44px; fill: currentColor; color: #1d1e22; } #nr-page .nr-claude-roadmap { filter: grayscale(1) brightness(.27); } #nr-page .devicon-html5-plain { --tech-brand: #e34f26; } #nr-page .devicon-css3-plain { --tech-brand: #1572b6; } #nr-page .devicon-javascript-plain { --tech-brand: #f7df1e; } #nr-page .devicon-sass-original { --tech-brand: #cc6699; } #nr-page .devicon-bootstrap-plain { --tech-brand: #7952b3; } #nr-page .devicon-react-original { --tech-brand: #149eca; } #nr-page .devicon-nodejs-plain { --tech-brand: #5fa04e; } #nr-page .devicon-postgresql-plain { --tech-brand: #4169e1; } #nr-page .devicon-prisma-original { --tech-brand: #2d3748; } #nr-page .devicon-git-plain { --tech-brand: #f05032; } #nr-page .nr-roadmap-label { font-size: 26px !important; line-height: 1.1 !important; } #nr-page .nr-roadmap-group p { font-size: 17px !important; line-height: 1.5 !important; } #nr-page .nr-roadmap-note { grid-column: 1; grid-row: 3; align-self: center; justify-self: center; padding: 20px 0; transform: rotate(-4deg); } #nr-page .nr-roadmap-note p { margin: 0; font: 600 34px/1.05 "Caveat", "Segoe Script", cursive !important; color: #cc4b55 !important; letter-spacing: -.01em; } #nr-page .nr-roadmap-note svg { display: block; width: 108px; height: 40px; margin: 9px 0 0 auto; overflow: visible; } #nr-page .nr-roadmap-note path { fill: none; stroke: #e05c65; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* Market: levels first; recent reporting is supporting evidence. */ #nr-page .nr-salary-board { overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 28px 33px 26px 31px; background: #fffefb; box-shadow: 5px 5px 0 #c3c8d0; } #nr-page .nr-salary-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #nr-page .nr-salary-tier { padding: 30px; border-right: 1px solid #c3c8d0; color: #1d1e22; } #nr-page .nr-salary-tier:last-child { border-right: 0; } #nr-page .nr-salary-tier__level { display: flex; align-items: center; justify-content: space-between; gap: 20px; } #nr-page .nr-salary-tier h4 { margin: 0; font: 750 29px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; color: #1d1e22; } #nr-page .nr-salary-tier__bars { display: flex; align-items: flex-end; gap: 4px; height: 24px; } #nr-page .nr-salary-tier__bars i { display: block; width: 9px; background: #e0e3e8; border-radius: 2px; } #nr-page .nr-salary-tier__bars i:nth-child(1) { height: 10px; background: #4c9a6a; } #nr-page .nr-salary-tier__bars i:nth-child(2) { height: 17px; } #nr-page .nr-salary-tier__bars i:nth-child(3) { height: 24px; } #nr-page .nr-salary-tier:nth-child(n+2) .nr-salary-tier__bars i:nth-child(2), #nr-page .nr-salary-tier:nth-child(3) .nr-salary-tier__bars i:nth-child(3) { background: #4c9a6a; } #nr-page .nr-salary-tier p { min-height: 57px; margin: 14px 0 25px; color: #474b54; } #nr-page .nr-salary-tier__value { padding-top: 22px; border-top: 1px solid #e0e3e8; } #nr-page .nr-salary-tier__value strong { display: block; white-space: nowrap; font: 600 clamp(27px, 2.45vw, 34px)/1.18 "Hanken Grotesk", sans-serif; color: #1d1e22; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; } #nr-page .nr-salary-tier__value strong span { font-size: .7em; font-weight: 500; letter-spacing: 0; } #nr-page .nr-salary-tier__value > span { display: block; margin-top: 9px; font-size: 16px; color: #474b54; } #nr-page .nr-salary-context { margin-top: 24px; padding: 0 4px; } #nr-page .nr-salary-context > p { margin: 0 0 10px; color: #474b54; font-size: 16px !important; } #nr-page .nr-market-news { margin-top: 42px; } #nr-page .nr-market-news > h3 { margin: 0 0 22px; color: #1d1e22; font: 750 27px/1.2 "Hanken Grotesk", sans-serif; letter-spacing: -.02em; } #nr-page .nr-market-news__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; } #nr-page .nr-news-card { display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 27px 30px; border: 1px solid #c3c8d0; border-radius: 22px 27px 21px 25px; background: #fffefb; } #nr-page .nr-news-card:nth-child(2) { background: #e7f3ec; } #nr-page .nr-news-card .nr-label { color: #474b54; } #nr-page .nr-news-card__fact { display: flex; align-items: center; gap: 20px; } #nr-page .nr-news-card__fact > strong { flex-shrink: 0; font: 600 58px/1 "Hanken Grotesk", sans-serif; color: #1d1e22; letter-spacing: -.055em; font-variant-numeric: lining-nums tabular-nums; } #nr-page .nr-news-card__fact h4 { max-width: 300px; margin: 0; font: 700 23px/1.2 "Hanken Grotesk", sans-serif; color: #1d1e22; letter-spacing: -.015em; } #nr-page .nr-news-card p { margin: 0; color: #474b54; } #nr-page .nr-news-card__source { margin-top: auto; padding-top: 14px; border-top: 1px solid #c3c8d0; font-size: 16px; color: #474b54; } /* One formation, one enrollment choice. */ #nr-page .nr-enrollment { max-width: 1040px; margin-inline: auto; overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 30px 35px 28px 33px; background: #26282e; color: #fffefb; box-shadow: 7px 7px 0 #949aa4; } #nr-page .nr-enrollment__heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; padding: 34px 40px 28px; border-bottom: 1px solid #474b54; } #nr-page .nr-enrollment__stack { display: flex; margin: 0; padding: 0; list-style: none; } #nr-page .nr-enrollment__stack li { display: grid; place-items: center; width: 58px; height: 58px; margin-left: -12px; border: 1.5px solid #4a4e57; border-radius: 50%; background: transparent; animation: nr-stack-float 6s ease-in-out infinite; transition: transform .25s ease, border-color .25s ease; } #nr-page .nr-enrollment__stack li:first-child { margin-left: 0; } #nr-page .nr-enrollment__stack li:nth-child(2) { animation-delay: -1.5s; } #nr-page .nr-enrollment__stack li:nth-child(3) { animation-delay: -3s; } #nr-page .nr-enrollment__stack li:nth-child(4) { animation-delay: -4.5s; } #nr-page .nr-enrollment__stack i { font-size: 27px; color: #e0e3e8; transition: color .25s ease; } #nr-page .nr-enrollment__stack svg { width: 27px; height: 27px; fill: currentColor; color: #e0e3e8; transition: color .25s ease; } @keyframes nr-stack-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } #nr-page .nr-enrollment .nr-kicker { color: #8bd45f !important; } #nr-page .nr-enrollment h2, #nr-page .nr-enrollment h3, #nr-page .nr-enrollment strong { color: #fffefb !important; -webkit-text-fill-color: #fffefb !important; } #nr-page .nr-enrollment__heading h2 { max-width: 860px; margin: 0 0 14px; font-size: clamp(36px, 4vw, 46px); line-height: 1.1; } #nr-page .nr-enrollment__heading p { max-width: 860px; margin: 0; color: #e0e3e8 !important; font-size: 20px !important; } #nr-page .nr-enrollment__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); } #nr-page .nr-enrollment__included { display: flex; flex-direction: column; justify-content: center; padding: 34px 40px; } #nr-page .nr-enrollment__included h3 { margin: 0 0 25px; font: 700 26px/1.25 "Hanken Grotesk", sans-serif; } #nr-page .nr-enrollment .nr-checks { display: grid; gap: 19px; margin: 0; padding: 0; } #nr-page .nr-enrollment .nr-checks li { display: flex; gap: 13px; align-items: flex-start; margin: 0; padding: 0; color: #e0e3e8 !important; } #nr-page .nr-enrollment .nr-checks i { flex-shrink: 0; margin-top: 2px; color: #4c9a6a !important; font-size: 21px; } #nr-page .nr-enrollment__purchase { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 34px 32px; border-left: 1px solid #474b54; background: #1d1e22; text-align: center; } #nr-page .nr-enrollment__access { display: flex; align-items: center; justify-content: center; gap: 9px; color: #8bd45f; font: 600 15px/1.5 "JetBrains Mono", monospace; } #nr-page .nr-enrollment__access i { font-size: 24px; } #nr-page .nr-enrollment__price { margin-top: 21px; } #nr-page .nr-enrollment__price > span { display: block; color: #e0e3e8; font-size: 18px; line-height: 1.5; } #nr-page .nr-enrollment__price > strong { display: block; margin: 8px 0 12px; white-space: nowrap; font: 600 clamp(52px, 5.8vw, 76px)/1 "Hanken Grotesk", sans-serif; letter-spacing: -.055em; font-variant-numeric: lining-nums tabular-nums; } #nr-page .nr-enrollment__cash { margin: 12px 0 23px; color: #e0e3e8 !important; font-size: 20px !important; } #nr-page .nr-enrollment__purchase .nr-btn { width: 100%; min-width: 0; min-height: 62px !important; box-shadow: 3px 3px 0 #6b7079 !important; } #nr-page .nr-enrollment__lifetime { margin: 18px 0 10px; color: #e0e3e8 !important; font-size: 17px !important; line-height: 1.5 !important; } #nr-page .nr-enrollment__secure { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #c3c8d0; font-size: 16px; } #nr-page .nr-guarantee { display: flex; align-items: center; gap: 23px; width: 100%; max-width: 1040px; margin: 28px auto 0; padding: 28px 34px; border: 1px solid #c3c8d0; border-radius: 24px 29px 23px 27px; background: #fffefb !important; color: #1d1e22 !important; box-shadow: none !important; text-align: left; } #nr-page .nr-guarantee > i { flex-shrink: 0; color: #1d1e22; font-size: 42px; } #nr-page .nr-guarantee strong { display: block; font: 750 24px/1.25 "Hanken Grotesk", sans-serif; color: #1d1e22 !important; } #nr-page .nr-guarantee p { margin: 7px 0 0; color: #474b54 !important; } /* Bonus: video ao lado do titulo da secao (sem card escuro) e os seis itens iguais numa nota. As imagens sao line art de 145x115px: so leem pequenas, nunca como capa. */ #nr-page .nr-bonus-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 468px); align-items: center; gap: 26px 44px; margin-bottom: 34px; } #nr-page .nr-bonus-head__copy h2 { margin: 0 0 14px; font: 750 clamp(34px, 4vw, 52px)/1.08 "Hanken Grotesk", sans-serif; letter-spacing: -.035em; color: #1d1e22 !important; } #nr-page .nr-bonus-head__copy > p { max-width: 46ch; margin: 0; color: #474b54; } #nr-page .nr-bonus-head > figure.nr-watch { margin: 0; } #nr-page .nr-bonus-head .nr-watch__cue .nr-sketch { color: #cc4b55 !important; -webkit-text-fill-color: #cc4b55 !important; } #nr-page .nr-bonus-receipt { overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 26px 30px 24px 28px; background: #fffefb; box-shadow: 5px 5px 0 #c3c8d0; } #nr-page .nr-bonus-receipt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 30px; border-bottom: 1.5px solid #1d1e22; background: #f4f1ea; } #nr-page .nr-bonus-receipt__head .nr-label { margin: 0; } #nr-page .nr-bonus-receipt__head > span:last-child { color: #6b7079; font: 500 13px/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; } #nr-page .nr-bonus-list { display: block; padding: 0 30px; } #nr-page .nr-bonus-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 20px; min-height: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid #e8e3da !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left; } #nr-page .nr-bonus-item:last-child { border-bottom: 0 !important; } #nr-page .nr-bonus-item i { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 50px !important; height: 39px !important; margin: 0 !important; border-radius: 10px !important; box-shadow: 2px 2px 0 #1d1e22 !important; } #nr-page .nr-bonus-item h3 { grid-column: 2; grid-row: 1; margin: 0 !important; color: #1d1e22 !important; font-size: 18px !important; line-height: 1.3 !important; } #nr-page .nr-bonus-tag { display: inline-block; margin-left: 8px; padding: 3px 9px 4px; border-radius: 999px; background: #f7a8b0; color: #1d1e22 !important; font: 700 11px/1.3 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; } #nr-page .nr-bonus-item p { grid-column: 2; grid-row: 2; max-width: 62ch; margin: 4px 0 0 !important; color: #6b7079 !important; font-size: 15px !important; line-height: 1.45 !important; } #nr-page .nr-bonus-item .nr-bonus-value { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; white-space: nowrap; text-align: right; color: #33363d !important; font: 500 17px/1.3 "JetBrains Mono", monospace !important; font-variant-numeric: tabular-nums; } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(1) i { background-image: url("../assets/images/bonus/bonus_ingles.jpg"); } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(2) i { background-image: url("../assets/images/bonus/bonus_carreira.jpg"); } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(3) i { background-image: url("../assets/images/bonus/bonus_mentoria.jpg"); } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(4) i { background-image: url("../assets/images/bonus/bonus_resumo.jpg"); } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(5) i { background-image: url("../assets/images/bonus/bonus_ebook.jpg"); } #nr-page .nr-bonus-list .nr-bonus-item:nth-child(6) i { background-image: url("../assets/images/bonus/bonus_cnpj.jpg"); } #nr-page .nr-bonus-sum { margin: 0; } #nr-page .nr-bonus-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; padding: 16px 30px; border-top: 1px solid #e8e3da; } #nr-page .nr-bonus-sum dt { margin: 0; color: #6b7079; font: 500 16px/1.4 "Hanken Grotesk", sans-serif; } #nr-page .nr-bonus-sum dd { margin: 0; color: #33363d; font: 500 20px/1.2 "JetBrains Mono", monospace; font-variant-numeric: tabular-nums; } #nr-page .nr-bonus-sum__final { border-top: 1.5px solid #1d1e22 !important; background: #e7f3ec; } #nr-page .nr-bonus-sum__final dt { color: #1d1e22 !important; font-weight: 700 !important; font-size: 18px !important; } #nr-page .nr-bonus-sum__final dd { color: #2f7a4c !important; font: 700 clamp(30px, 3.4vw, 40px)/1 "Hanken Grotesk", sans-serif !important; letter-spacing: -.03em; } /* Comparativo antes do preco: uma coluna de texto, o resto so icone. As colunas sao formas de estudar por conta, nao escolas nomeadas. */ #nr-page .nr-comparison-section { padding-block: 20px 8px !important; border-bottom: 0 !important; } #nr-page .nr-comparison { max-width: none; margin: 0; overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 26px 30px 24px 28px; background: #fffefb; box-shadow: 5px 5px 0 #c3c8d0; } #nr-page .nr-comparison__table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; } #nr-page .nr-comparison__table th, #nr-page .nr-comparison__table td { border: 0; border-bottom: 1px solid #ded9d0; } #nr-page .nr-comparison__table thead th { padding: 14px 10px; vertical-align: bottom; text-align: center; background: #f4f1ea; font: 500 12px/1.35 "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; color: #474b54; } #nr-page .nr-comparison__table thead th:first-child { width: 44%; background: transparent; } #nr-page .nr-comparison__table tbody th { padding: 0 18px 0 30px; text-align: left; font: 600 17px/1.35 "Hanken Grotesk", sans-serif; color: #1d1e22; } #nr-page .nr-comparison__table tbody td { height: 58px; padding: 0; text-align: center; vertical-align: middle; } #nr-page .nr-comparison__table i { font-size: 25px; line-height: 1; vertical-align: middle; } #nr-page .nr-comparison__table .nr-cmp-yes i { color: #2f7a4c; } #nr-page .nr-comparison__table .nr-cmp-no i { color: #c0c4cb; } #nr-page .nr-comparison__table .nr-cmp-ours { background: #e7f3ec; } #nr-page .nr-comparison__table thead th.nr-cmp-ours { background: #387b50; color: #fff !important; font-weight: 700; } #nr-page .nr-comparison__table .nr-cmp-short { display: none; } #nr-page .nr-comparison__table tbody tr:last-child th, #nr-page .nr-comparison__table tbody tr:last-child td { border-bottom: 0; } #nr-page .nr-comparison__cue { justify-content: center; margin: 26px 0 0 !important; } /* Somos a OneBitCode: equipe em fotos redondas, historia num cartao de janela. */ #nr-page .nr-about { padding-block: 48px 24px !important; border-bottom: 0 !important; } #nr-page .nr-about__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 40px; margin-bottom: 34px; } #nr-page .nr-about h2 { margin: 0 0 16px; font: 750 clamp(34px, 4vw, 52px)/1.08 "Hanken Grotesk", sans-serif; letter-spacing: -.035em; color: #1d1e22 !important; } #nr-page .nr-about__top > div > p { max-width: 52ch; margin: 0; color: #474b54; } #nr-page .nr-about__mark { flex: 0 0 auto; width: 92px; height: 92px; transform: rotate(9deg); } #nr-page .nr-about__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; gap: 30px 40px; } #nr-page .nr-about__side { display: grid; gap: 26px; } #nr-page .nr-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin: 0; padding: 0; list-style: none; } #nr-page .nr-team li { min-width: 0; text-align: center; } #nr-page .nr-team li:nth-child(2) { margin-top: 26px; } #nr-page .nr-team__photo { display: block; width: 100%; max-width: 132px; aspect-ratio: 1; margin: 0 auto 12px; border: 1.5px solid #1d1e22; border-radius: 50%; background: #f4f1ea; object-fit: cover; box-shadow: 4px 4px 0 #c3c8d0; } #nr-page .nr-team strong { display: block; color: #1d1e22 !important; font: 700 17px/1.25 "Hanken Grotesk", sans-serif; letter-spacing: -.01em; } #nr-page .nr-team span { display: block; margin-top: 5px; color: #6b7079 !important; font: 500 11px/1.5 "JetBrains Mono", monospace; letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; } #nr-page .nr-about__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; padding: 20px 18px; border: 1.5px solid #1d1e22; border-radius: 20px 24px 18px 22px; background: #fffefb; box-shadow: 4px 4px 0 #c3c8d0; } #nr-page .nr-about__stats > div { min-width: 0; } #nr-page .nr-about__stats > div + div { padding-left: 10px; border-left: 1px solid #ded9d0; } #nr-page .nr-about__stats strong { display: block; margin-bottom: 6px; color: #1d1e22 !important; font: 750 clamp(19px, 1.8vw, 23px)/1.1 "Hanken Grotesk", sans-serif; letter-spacing: -.025em; } #nr-page .nr-about__stats span { display: block; color: #6b7079 !important; font: 500 11px/1.35 "JetBrains Mono", monospace; letter-spacing: .06em; text-transform: uppercase; } #nr-page .nr-about__story { overflow: hidden; border: 1.5px solid #1d1e22; border-radius: 22px 26px 20px 24px; background: #fffefb; box-shadow: 5px 5px 0 #c3c8d0; } #nr-page .nr-about__story-bar { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1.5px solid #1d1e22; background: #f4f1ea; } #nr-page .nr-about__story-bar > span { width: 11px; height: 11px; border: 1.5px solid #1d1e22; border-radius: 50%; } #nr-page .nr-about__story-bar > em { margin-left: auto; color: #6b7079; font: 500 12px/1.4 "JetBrains Mono", monospace; font-style: normal; letter-spacing: .05em; } #nr-page .nr-about__story-body { padding: 28px 30px 30px; } #nr-page .nr-about__story-body > p { margin: 0 0 16px; color: #474b54; } #nr-page .nr-about__story-body strong { color: #1d1e22; font-weight: 700; } #nr-page .nr-about__more { margin: 4px 0 0; } #nr-page .nr-about__more > summary { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0; border: 0; background: none; color: #1d1e22 !important; font: 700 17px/1.4 "Hanken Grotesk", sans-serif; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } #nr-page .nr-about__more > summary::-webkit-details-marker { display: none; } #nr-page .nr-about__more > summary .nr-more-open, #nr-page .nr-about__more[open] > summary .nr-more-closed { display: none; } #nr-page .nr-about__more[open] > summary .nr-more-open { display: inline; } #nr-page .nr-about__more > summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 15px; text-decoration: none; transition: transform .2s ease; } #nr-page .nr-about__more[open] > summary::after { transform: rotate(180deg); } #nr-page .nr-about__more[open] > summary { margin-bottom: 18px; } #nr-page .nr-about__more > p { margin: 0 0 16px; color: #474b54; } #nr-page .nr-about__more > p:last-child { margin-bottom: 0; } #nr-page .nr-about__hello { margin: 0 0 18px !important; color: #1d1e22 !important; font: 700 clamp(21px, 2.1vw, 26px)/1.25 "Hanken Grotesk", sans-serif !important; letter-spacing: -.02em; } #nr-page .nr-about__hello em { font-style: normal; color: #e05c65; } #nr-page .nr-about__code { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 0 0 18px; padding: 18px 20px; border-radius: 14px; background: #f4f1ea; } #nr-page .nr-about__code-mark { color: #e05c65; font: 700 20px/1.2 "JetBrains Mono", monospace; } #nr-page .nr-about__freedoms { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } #nr-page .nr-about__freedoms li { margin: 0; color: #474b54; font: 400 14px/1.6 "JetBrains Mono", monospace; } #nr-page .nr-about__freedoms strong { color: #1d1e22; font-weight: 700; } #nr-page .nr-about__signoff { margin: 22px 0 0 !important; font: 750 clamp(20px, 2vw, 25px)/1.25 "Hanken Grotesk", sans-serif; letter-spacing: -.02em; } #nr-page .nr-about__signoff strong { display: block; color: #1d1e22 !important; font-weight: inherit; } #nr-page .nr-about__signoff span { display: block; color: #e05c65 !important; } /* Footer: the same paper, ink, spacing and simple outlined icons as the page. */ #nr-page .nr-footer { width: min(1280px, calc(100% - 48px)) !important; margin: 24px auto 0 !important; padding: 44px 0 28px !important; border: 1.5px solid #1d1e22 !important; border-radius: 28px 34px 26px 31px !important; background: #f4f1ea !important; box-shadow: 5px 5px 0 #c3c8d0 !important; color: #474b54 !important; } #nr-page .nr-footer__in { width: min(1180px, calc(100% - 80px)); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px 64px; } #nr-page .nr-footer__brand { grid-column: auto; } #nr-page .nr-footer__brand > a { display: inline-block; } #nr-page .nr-footer__brand img { display: block; width: 180px !important; height: auto; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; filter: none !important; opacity: 1 !important; } #nr-page .nr-footer h3 { margin: 2px 0 21px; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; font: 600 14px/1.5 "JetBrains Mono", monospace !important; letter-spacing: .04em; text-transform: uppercase; } #nr-page .nr-footer p { margin: 20px 0; color: #474b54 !important; -webkit-text-fill-color: #474b54 !important; font-size: 18px !important; } #nr-page .nr-footer p.nr-footer__slogan { margin: 18px 0 22px; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; font: 700 34px/1.06 "Caveat", "Segoe Script", cursive !important; letter-spacing: 0; transform: rotate(-1.4deg); transform-origin: left center; } #nr-page .nr-footer nav { display: flex; flex-direction: column; gap: 14px; } #nr-page .nr-footer a { margin: 0; color: #33363d !important; -webkit-text-fill-color: #33363d !important; font: 500 17px/1.4 "Hanken Grotesk", sans-serif !important; text-decoration: none; overflow-wrap: anywhere; } #nr-page .nr-footer a:hover { color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; text-decoration: underline; text-underline-offset: 5px; } #nr-page .nr-footer__social { display: flex; gap: 12px; } #nr-page .nr-footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #1d1e22 !important; border-radius: 11px 13px 10px 12px; background: #fffefb !important; box-shadow: 2px 2px 0 #1d1e22 !important; } #nr-page .nr-footer__social i { font-size: 19px; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; } #nr-page .nr-footer__bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 26px; margin-top: 12px; border-top: 1px solid #c3c8d0 !important; color: #474b54 !important; -webkit-text-fill-color: #474b54 !important; font-size: 16px !important; line-height: 1.5; } #nr-page .nr-footer__bottom nav { flex-direction: row; gap: 24px; } #nr-page .nr-footer__bottom a { font-size: 16px !important; } /* Enrollment form lives outside #nr-page. Keep it compact and readable. */ html body #preCheckoutModal .obc-modal__card { width: min(100%, 490px); max-width: 490px; max-height: calc(100dvh - 28px); overflow-y: auto; overscroll-behavior: contain; padding: 30px !important; } html body #preCheckoutModal .obc-modal__title { font-size: 31px !important; line-height: 1.1 !important; } html body #preCheckoutModal .obc-modal__subtitle { font-size: 17px !important; color: #474b54 !important; -webkit-text-fill-color: #474b54 !important; margin-bottom: 18px !important; } html body #preCheckoutModal .obc-modal__value { padding: 13px 14px; background: #e7f3ec; border-color: #b8d7c4; font-size: 16px; line-height: 1.4; color: #33363d; } html body #preCheckoutModal .obc-modal__value > i { background: #4c9a6a; color: #1d1e22; } html body #preCheckoutModal #preCheckoutForm { gap: 12px !important; } html body #preCheckoutModal .obc-modal__label { font-size: 16px !important; line-height: 1.35 !important; } html body #preCheckoutModal .obc-modal__input { height: 52px !important; min-height: 52px !important; font-size: 17px !important; color: #1d1e22 !important; -webkit-text-fill-color: #1d1e22 !important; caret-color: #1d1e22; } html body #preCheckoutModal .obc-modal__input::placeholder { font-size: 15px !important; color: #6b7079 !important; -webkit-text-fill-color: #6b7079 !important; opacity: 1 !important; } html body #preCheckoutModal .obc-modal__input:focus { border-color: #3f8f86 !important; box-shadow: 0 0 0 3px #e7f3ec !important; } html body #preCheckoutModal .obc-modal__submit { min-height: 58px !important; padding: 14px 18px !important; background: #4c9a6a !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font: 750 18px/1.3 "Hanken Grotesk", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: 3px 3px 0 #1d1e22 !important; border: 1.5px solid #1d1e22 !important; } html body #preCheckoutModal .obc-modal__submit:hover { background: #60ad7e !important; } html body #preCheckoutModal .obc-modal__submit i { color: #fff !important; -webkit-text-fill-color: #fff !important; } html body #preCheckoutModal .obc-modal__helper { font-size: 15px !important; line-height: 1.4 !important; color: #474b54 !important; -webkit-text-fill-color: #474b54 !important; } @media (max-width: 1100px) { #nr-page .nr-menu { gap: 15px; } #nr-page .nr-top-actions .nr-btn { padding-inline: 14px !important; } #nr-page .nr-audience-grid { gap: 18px; } #nr-page .nr-audience-card { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 25px; } #nr-page .nr-audience-card > img { width: 92px; height: 120px; } #nr-page .nr-audience-card h3 { font-size: 26px; } #nr-page .nr-salary-tier { padding: 26px 22px; } #nr-page .nr-enrollment__included { padding-inline: 32px; } #nr-page .nr-enrollment__purchase { padding-inline: 26px; } } @media (max-width: 1050px) { #nr-page .nr-tech-roadmap { display: flex !important; margin-top: 46px !important; } #nr-page .nr-roadmap-note { margin-top: 28px; padding: 0; text-align: center; } #nr-page .nr-roadmap-note p { font-size: 30px !important; } #nr-page .nr-roadmap-note p br { display: none; } #nr-page .nr-roadmap-note svg { display: none; } } @media (max-width: 991px) { #nr-page .nr-about__grid { grid-template-columns: minmax(0, 1fr); } #nr-page .nr-team { max-width: 520px; } #nr-page .nr-bonus-head { grid-template-columns: minmax(0, 1fr); } #nr-page .nr-bonus-feature { grid-template-columns: minmax(0, 1fr); } #nr-page .nr-hero { padding-top: 44px !important; } #nr-page .nr-hero__grid { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "copy" "cta" "media"; row-gap: 24px !important; } #nr-page .nr-hero h1 { font-size: clamp(38px, 6.2vw, 52px) !important; } #nr-page .nr-hero__grid > .nr-hero__media { margin-top: 10px; } #nr-page .nr-teachers { grid-template-columns: 1fr; } #nr-page .nr-teacher { padding: 30px; } #nr-page .nr-study-plan { grid-template-columns: 1fr; } #nr-page .nr-plan-media { border-left: 0; border-top: 1px solid #d8d6d0; } #nr-page .nr-study-assurances { gap: 18px; } #nr-page .nr-study-assurances article { flex-direction: column; padding: 25px; } #nr-page .nr-project-panel { grid-template-columns: 1fr; gap: 26px; } #nr-page .nr-project-story { grid-row: 1; } #nr-page .nr-demo-window { min-height: 0; } #nr-page .nr-labs-overview { grid-template-columns: 1fr; gap: 32px; } #nr-page .nr-labs-overview > .nr-watch, #nr-page .nr-labs-overview > .nr-video { max-width: 600px; justify-self: center; } #nr-page .nr-labs-features { gap: 18px; } #nr-page .nr-labs-features article { grid-template-columns: 1fr; gap: 14px; padding: 24px; } #nr-page .nr-labs-features article > i { grid-row: auto; } #nr-page .nr-labs-features p { grid-column: 1; } #nr-page .nr-topbar__in { min-height: 66px !important; } #nr-page .nr-audience-grid { grid-template-columns: 1fr; gap: 22px; } #nr-page .nr-audience-card { grid-template-columns: 116px minmax(0, 1fr); gap: 27px; padding: 28px; } #nr-page .nr-audience-card > img { width: 116px; height: 136px; } #nr-page .nr-audience-card h3 { font-size: 29px; } #nr-page .nr-student-videos__grid { max-width: 620px; } #nr-page .nr-salary-tiers { grid-template-columns: 1fr; } #nr-page .nr-salary-tier { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 30px; padding: 26px 30px; border-right: 0; border-bottom: 1px solid #c3c8d0; } #nr-page .nr-salary-tier:last-child { border-bottom: 0; } #nr-page .nr-salary-tier__level { grid-column: 1; grid-row: 1; } #nr-page .nr-salary-tier p { grid-column: 1; grid-row: 2; min-height: 0; margin: 0; } #nr-page .nr-salary-tier__value { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 0; border: 0; text-align: right; } #nr-page .nr-salary-tier__value strong { font-size: 32px; } #nr-page .nr-market-news__grid { gap: 18px; } #nr-page .nr-news-card { padding: 24px; } #nr-page .nr-news-card__fact { display: block; } #nr-page .nr-news-card__fact > strong { display: block; margin: 8px 0 13px; } #nr-page .nr-enrollment__body { grid-template-columns: 1fr; } #nr-page .nr-enrollment__purchase { border-left: 0; border-top: 1px solid #474b54; padding: 36px; } #nr-page .nr-enrollment__purchase .nr-btn { max-width: 420px; align-self: center; } #nr-page .nr-enrollment__price > strong { font-size: 76px; } #nr-page .nr-footer__in { column-gap: 30px; grid-template-columns: 1fr 1fr; } #nr-page .nr-footer__brand { grid-column: 1 / -1; } } @media (max-width: 640px) { #nr-page { padding-bottom: 28px; } #nr-page .nr-section-intro--sticker { grid-template-columns: minmax(0, 1fr) 64px; gap: 0 14px; } #nr-page .nr-section-intro--sticker > .nr-kicker { grid-column: 1; align-self: center; } #nr-page .nr-section-intro--sticker > h2, #nr-page .nr-section-intro--sticker > p { grid-column: 1 / -1; } #nr-page .nr-section-intro--sticker > .nr-sticker { grid-column: 2; grid-row: 1; width: 64px; height: 64px; margin-bottom: 16px; } #nr-page .nr-bonus-receipt__head { padding: 14px 18px; } #nr-page .nr-bonus-list { padding: 0 18px; } #nr-page .nr-bonus-item { gap: 0 14px; padding: 15px 0 !important; } #nr-page .nr-bonus-item i { width: 42px !important; height: 33px !important; } #nr-page .nr-bonus-item--lead i { width: 50px !important; height: 39px !important; } #nr-page .nr-bonus-item--lead h3 { font-size: 19px !important; } #nr-page .nr-bonus-item .nr-bonus-value { grid-row: 1; align-self: baseline; font-size: 15px !important; } #nr-page .nr-bonus-item p { grid-column: 2 / -1; } #nr-page .nr-bonus-sum > div { padding: 14px 18px; } #nr-page .nr-bonus-sum dt { font-size: 15px !important; } #nr-page .nr-comparison-section { padding-block: 12px 4px !important; } #nr-page .nr-comparison__table thead th { padding: 12px 3px; font: 600 10px/1.25 "Hanken Grotesk", sans-serif; letter-spacing: 0; text-transform: none; } #nr-page .nr-comparison__table thead th:first-child { width: 42%; } #nr-page .nr-comparison__table thead th.nr-cmp-ours { width: 20%; } #nr-page .nr-comparison__table .nr-cmp-long { display: none; } #nr-page .nr-comparison__table .nr-cmp-short { display: inline; } #nr-page .nr-comparison__table tbody th { padding: 0 8px 0 18px; font-size: 15px; line-height: 1.3; } #nr-page .nr-comparison__table tbody td { height: 62px; } #nr-page .nr-comparison__table i { font-size: 21px; } #nr-page .nr-comparison__cue { margin-top: 20px !important; } #nr-page .nr-about { padding-top: 32px !important; } #nr-page .nr-about__top { flex-direction: column-reverse; align-items: flex-start; gap: 14px; margin-bottom: 26px; } #nr-page .nr-about__mark { width: 68px; height: 68px; } #nr-page .nr-team { gap: 14px 10px; } #nr-page .nr-team li:nth-child(2) { margin-top: 0; } #nr-page .nr-team strong { font-size: 15px; } #nr-page .nr-team span { font-size: 10px; } #nr-page .nr-about__stats { grid-template-columns: 1fr; padding: 18px; } #nr-page .nr-about__stats > div + div { padding: 14px 0 0; border-left: 0; border-top: 1px solid #ded9d0; } #nr-page .nr-about__story-body { padding: 22px 18px 24px; } #nr-page .nr-about__code { gap: 11px; padding: 16px; } #nr-page .nr-about__freedoms li { font-size: 13px; line-height: 1.65; } #nr-page .nr-bonus-head { margin-bottom: 24px; } #nr-page .nr-footer p.nr-footer__slogan { font-size: 30px !important; } #nr-page .nr-hero { padding-top: 42px !important; } #nr-page .nr-hero h1 { font-size: clamp(36px, 10.4vw, 44px) !important; } #nr-page .nr-hero__cta > .nr-btn { width: 100% !important; max-width: 360px; } #nr-page .nr-watch__cue, #nr-page .nr-comparison__cue { gap: 8px; padding-right: 10px; } #nr-page .nr-watch__cue .nr-sketch, #nr-page .nr-comparison__cue .nr-sketch { font-size: 27px !important; } #nr-page .nr-teacher { padding: 26px 22px; } #nr-page .nr-teacher__identity { gap: 17px; } #nr-page .nr-teacher__identity img { flex-basis: 76px; width: 76px; height: 76px; } #nr-page .nr-teacher h3 { font-size: 27px; } #nr-page .nr-project-explorer { padding: 24px 18px; } #nr-page .nr-project-tabs { gap: 4px; padding: 5px; } #nr-page .nr-project-tabs button { padding: 9px 5px; font-size: 16px; } #nr-page .nr-project-story h3 { font-size: 27px; } #nr-page .nr-demo-window__bar { gap: 10px; padding-inline: 12px; font-size: 11px; } #nr-page .nr-demo-site { padding: 23px 20px; } #nr-page .nr-demo-site h4 { font-size: 37px; } #nr-page .nr-demo-kanban { padding: 23px 14px; } #nr-page .nr-demo-kanban__columns { grid-template-columns: 1fr; gap: 9px; } #nr-page .nr-demo-kanban__columns > div { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px; } #nr-page .nr-demo-kanban__columns > div > strong { flex: 0 0 84px; margin: 0; font-size: 15px; } #nr-page .nr-demo-task { flex: 1; padding: 10px; } #nr-page .nr-demo-task i { display: none; } #nr-page .nr-demo-courses { padding: 23px 16px; } #nr-page .nr-demo-course { gap: 10px; } #nr-page .nr-demo-course > i { flex-basis: 34px; height: 44px; font-size: 21px; } #nr-page .nr-demo-course strong { font-size: 16px; } #nr-page .nr-study-routine { padding: 29px 24px; } #nr-page .nr-study-routine h3 { font-size: 27px; } #nr-page .nr-study-routine li { gap: 9px; } #nr-page .nr-study-routine li > span { flex-basis: 28px; } #nr-page .nr-plan-media { padding: 26px 18px 20px; } #nr-page .nr-plan-media > .nr-watch__cue { padding-right: 6px; } #nr-page .nr-plan-media .nr-plan-media__play { padding-inline: 12px !important; } #nr-page .nr-study-assurances { grid-template-columns: 1fr; gap: 16px; margin-top: 22px; } #nr-page .nr-study-assurances article { flex-direction: row; gap: 15px; padding: 23px; } #nr-page .nr-study-assurances h3 { font-size: 22px; } #nr-page .nr-labs-overview h3 { font-size: 29px; } #nr-page .nr-labs-features { grid-template-columns: 1fr; gap: 16px; margin-top: 30px; } #nr-page .nr-labs-features article { grid-template-columns: 34px minmax(0, 1fr); gap: 12px 15px; padding: 24px 22px; } #nr-page .nr-labs-features article > i { grid-row: 1 / 3; font-size: 29px; } #nr-page .nr-labs-features h3 { font-size: 23px; } #nr-page .nr-labs-features p { grid-column: 2; } #nr-page .nr-hero__lead, #nr-page .nr-head > p, #nr-page .nr-results-head > p, #nr-page .nr-section-intro > p, #nr-page .nr-market-heading > p { font-size: 19px !important; } #nr-page .nr-section-intro { margin-bottom: 30px; } #nr-page .nr-section-intro h2 { font-size: 34px; } #nr-page .nr-hero-labels { display: flex; gap: 10px 14px; margin-bottom: 0; } #nr-page .nr-hero-labels li { font-size: 12px !important; } #nr-page .nr-product-copy > strong { font-size: 19px !important; } #nr-page .nr-product-copy > span { font-size: 13px !important; } #nr-page .nr-product-update { font-size: 19px !important; } #nr-page .nr-metric strong { font-size: 43px !important; } #nr-page .nr-metric span { font-size: 14px !important; padding-inline: 4px; } #nr-page .nr-inline-stats { gap: 24px; } #nr-page .nr-inline-stats strong { font-size: 25px !important; } #nr-page .nr-inline-stats span { font-size: 15px !important; } #nr-page .nr-results-tools { gap: 12px; } #nr-page .nr-results-tools .nr-sketch { min-width: 0; max-width: min(225px, calc(100% - 112px)); font-size: 27px !important; } #nr-page .nr-audience-card { grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px 17px; padding: 24px; } #nr-page .nr-audience-card > img { grid-column: 1; grid-row: 1 / 3; width: 76px; height: 100px; } #nr-page .nr-audience-card__copy { display: contents; } #nr-page .nr-audience-card .nr-label { grid-column: 2; align-self: end; margin: 0; font-size: 13px !important; } #nr-page .nr-audience-card h3 { grid-column: 2; font-size: 26px; margin: 0; } #nr-page .nr-audience-card p { grid-column: 1 / -1; margin-top: 6px; } #nr-page .nr-student-videos__grid { max-width: none; gap: 18px; } #nr-page .nr-student-video { flex-basis: min(79%, 285px); } #nr-page .nr-tech-roadmap { margin-top: 44px !important; } #nr-page .nr-tech-chip strong { font-size: 15px !important; } #nr-page .nr-roadmap-group--1 .nr-roadmap-techs, #nr-page .nr-roadmap-group--3 .nr-roadmap-techs { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #nr-page .nr-tech-chip { display: flex !important; flex-direction: column !important; justify-content: center; gap: 10px; text-align: center !important; } #nr-page .nr-tech-chip > i { font-size: 38px !important; } #nr-page .nr-tech-chip > svg { width: 38px; height: 38px; } #nr-page .nr-roadmap-label { font-size: 25px !important; } #nr-page .nr-ai-brand { gap: 10px !important; } #nr-page .nr-ai-brand span { font-size: 13px !important; } #nr-page .nr-ai-new { font-size: 16px !important; } #nr-page .nr-salary-tier { display: block; padding: 27px 23px; } #nr-page .nr-salary-tier h4 { font-size: 28px; } #nr-page .nr-salary-tier p { margin: 12px 0 20px; } #nr-page .nr-salary-tier__value { padding-top: 19px; border-top: 1px solid #e0e3e8; text-align: left; } #nr-page .nr-salary-tier__value strong { font-size: clamp(28px, 7.8vw, 35px); } #nr-page .nr-market-news { margin-top: 34px; } #nr-page .nr-market-news__grid { grid-template-columns: 1fr; } #nr-page .nr-news-card { padding: 25px; } #nr-page .nr-news-card__fact { display: flex; } #nr-page .nr-news-card__fact > strong { font-size: 54px; } #nr-page .nr-news-card__fact h4 { font-size: 22px; } #nr-page .nr-enrollment__heading { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 29px 25px; } #nr-page .nr-enrollment__stack li { width: 50px; height: 50px; margin-left: -10px; } #nr-page .nr-enrollment__stack i { font-size: 23px; } #nr-page .nr-enrollment__stack svg { width: 23px; height: 23px; } #nr-page .nr-enrollment__heading h2 { font-size: 37px; } #nr-page .nr-enrollment__heading p { font-size: 19px !important; } #nr-page .nr-enrollment__included { grid-row: 2; padding: 27px 25px 30px; } #nr-page .nr-enrollment__purchase { grid-row: 1; padding: 30px 24px; border-top: 0; border-bottom: 1px solid #474b54; } #nr-page .nr-enrollment__price > strong { font-size: clamp(53px, 15vw, 68px); } #nr-page .nr-enrollment__price > span { font-size: 17px; } #nr-page .nr-enrollment__purchase .nr-btn, #nr-page .nr-contact .nr-btn { min-width: 0 !important; max-width: 100%; } #nr-page .nr-enrollment .nr-checks { gap: 19px; } #nr-page .nr-guarantee { padding: 25px; gap: 15px; align-items: flex-start; } #nr-page .nr-guarantee > i { font-size: 30px; } #nr-page .nr-guarantee strong { font-size: 22px; } #nr-page .nr-faq details { padding: 22px; } #nr-page .nr-footer { width: calc(100% - 32px) !important; margin-top: 20px !important; padding: 34px 0 26px !important; border-radius: 24px 28px 22px 26px !important; } #nr-page .nr-footer__in { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 33px; } #nr-page .nr-footer h3 { margin-bottom: 17px; } #nr-page .nr-footer__bottom { margin-top: 0; gap: 17px; } html body #preCheckoutModal .obc-modal__card { padding: 26px 22px !important; } html body #preCheckoutModal .obc-modal__title { font-size: 29px !important; } } @media (max-width: 380px) { #nr-page .nr-teacher__identity { align-items: flex-start; flex-direction: column; gap: 16px; } #nr-page .nr-project-tabs button { font-size: 15px; } #nr-page .nr-labs-features article { grid-template-columns: 1fr; } #nr-page .nr-labs-features article > i { grid-row: auto; } #nr-page .nr-labs-features p { grid-column: 1; } #nr-page .nr-news-card__fact { display: block; } #nr-page .nr-audience-card { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 22px 20px; } #nr-page .nr-audience-card > img { width: 64px; height: 86px; } #nr-page .nr-audience-card h3 { font-size: 24px; } } /* Hover only: no timers, scroll listeners or continuous animation. */ @media (hover: hover) and (pointer: fine) { /* No hover cada ficha assume a cor da propria tecnologia. O azul do PostgreSQL (#336791) seria escuro demais sobre o cartao grafite, entao usa uma versao clareada. */ #nr-page .nr-enrollment__stack li:hover { transform: translateY(-6px) scale(1.06); } /* Python */ #nr-page .nr-enrollment__stack li:nth-child(1):hover { border-color: #f7a8b0; } #nr-page .nr-enrollment__stack li:nth-child(1):hover i, #nr-page .nr-enrollment__stack li:nth-child(1):hover svg { color: #f7a8b0; } /* Flask */ #nr-page .nr-enrollment__stack li:nth-child(2):hover { border-color: #ffffff; } #nr-page .nr-enrollment__stack li:nth-child(2):hover i, #nr-page .nr-enrollment__stack li:nth-child(2):hover svg { color: #ffffff; } /* Django */ #nr-page .nr-enrollment__stack li:nth-child(3):hover { border-color: #44b78b; } #nr-page .nr-enrollment__stack li:nth-child(3):hover i, #nr-page .nr-enrollment__stack li:nth-child(3):hover svg { color: #44b78b; } /* Pandas */ #nr-page .nr-enrollment__stack li:nth-child(4):hover { border-color: #e70488; } #nr-page .nr-enrollment__stack li:nth-child(4):hover i, #nr-page .nr-enrollment__stack li:nth-child(4):hover svg { color: #e70488; } #nr-page .nr-tech-chip { transition: transform 160ms ease, box-shadow 160ms ease; } #nr-page .nr-tech-chip > i, #nr-page .nr-tech-chip > svg { transition: color 160ms ease; } #nr-page .nr-claude-roadmap { transition: filter 160ms ease; } #nr-page .nr-tech-chip:hover { transform: translateY(-3px); box-shadow: 0 5px 12px -7px rgba(29,30,34,.35); } #nr-page .nr-tech-chip:hover > i, #nr-page .nr-tech-chip:hover > svg { color: var(--tech-brand, #1d1e22) !important; } #nr-page .nr-tech-chip:hover .nr-claude-roadmap { filter: none; } #nr-page .nr-audience-card, #nr-page .nr-teacher { transition: transform 180ms ease, box-shadow 180ms ease; } #nr-page .nr-audience-card:hover, #nr-page .nr-teacher:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 #c3c8d0; } #nr-page .nr-project-tabs button:not([aria-selected="true"]):hover { background: #fffefb; } #nr-page .nr-demo-action:hover, #nr-page .nr-demo-site summary:hover { background: #474b54; } } @media (prefers-reduced-motion: reduce) { #nr-page .nr-enrollment__stack li { animation: none; } #nr-page .nr-tech-chip, #nr-page .nr-tech-chip > i, #nr-page .nr-claude-roadmap, #nr-page .nr-audience-card, #nr-page .nr-teacher { transition: none !important; } #nr-page .nr-tech-chip:hover, #nr-page .nr-audience-card:hover, #nr-page .nr-teacher:hover { transform: none !important; } #nr-page .nr-btn { transition: none; } #nr-page .nr-btn:hover { transform: none; } } /* ========================================================================== O que voce vai conseguir criar (#nr-projetos) Tres cartoes com a COISA pronta — um e-mail que chegou, uma tela de login, um painel — porque quem le ainda nao sabe programar. As telas sao HTML e CSS, sem imagem e sem JavaScript. ========================================================================== */ #nr-page .py-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; } #nr-page .py-build { display: flex; flex-direction: column; padding: 20px 20px 22px; border: 1.5px solid var(--ink, #1d1e22); border-radius: 22px 28px 20px 26px; background: #fffefb; box-shadow: 5px 6px 0 rgba(29, 30, 34, .09); } /* area (etiqueta) -> promessa -> tres exemplos -> ferramentas */ #nr-page .py-build__area { display: block; margin: 18px 0 6px; font: 500 11.5px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #cc4b55; } #nr-page .py-build h3 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; } #nr-page .py-build__list { margin: 13px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } #nr-page .py-build__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; align-items: start; font-size: 15px; line-height: 1.45; color: #4a4f57; } #nr-page .py-build__list i { margin-top: 3px; color: #e8535f; font-size: 14px; } #nr-page .py-build__tools { display: flex; align-items: center; gap: 8px; margin-top: auto !important; padding-top: 16px; font: 500 12px/1.4 "Roboto Mono", ui-monospace, monospace !important; color: #a83a45 !important; } #nr-page .py-build__tools i { font-size: 14px; } /* ---- a telinha de cada cartao */ #nr-page .py-mock { border: 1px solid #e3ded4; border-radius: 14px; background: #f7f5f0; overflow: hidden; } #nr-page .py-mock__bar { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid #e3ded4; background: #efece5; font: 500 11.5px/1 "Roboto Mono", ui-monospace, monospace; color: #6b7079; } #nr-page .py-mock__body { display: grid; gap: 10px; padding: 14px 13px; min-height: 118px; } #nr-page .py-mock__body--form { align-content: center; justify-items: stretch; gap: 8px; } #nr-page .py-mock__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; background: #fffefb; box-shadow: 0 1px 0 rgba(29, 30, 34, .06); } #nr-page .py-mock__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e8535f; color: #fffefb; font: 600 13px/1 "Poppins", sans-serif; } #nr-page .py-mock__row strong { display: block; font-size: 13.5px; line-height: 1.3; } #nr-page .py-mock__row small { font-size: 11.5px; color: #8a8f98; } #nr-page .py-mock__flag { padding: 3px 8px; border-radius: 999px; background: rgba(124, 198, 240, .28); color: #a83a45; font: 600 10.5px/1 "Poppins", sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .05em; } #nr-page .py-mock__file { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px dashed #c9d9e6; border-radius: 11px; font: 400 12.5px/1 "Roboto Mono", ui-monospace, monospace; color: #a83a45; } #nr-page .py-mock__body--form strong { font-size: 14px; } #nr-page .py-mock__field { padding: 9px 11px; border: 1px solid #ddd8ce; border-radius: 9px; background: #fffefb; font-size: 12.5px; color: #9aa0a8; } #nr-page .py-mock__btn { padding: 9px 11px; border-radius: 9px; background: #e8535f; color: #fffefb; font: 600 12.5px/1.2 "Poppins", sans-serif; text-align: center; } #nr-page .py-mock__body--chat { align-content: center; gap: 8px; } #nr-page .py-mock__chat { max-width: 84%; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #fffefb; border: 1px solid #e3ded4; font-size: 12.5px; line-height: 1.4; color: #4a4f57; } #nr-page .py-mock__chat--bot { justify-self: end; border-radius: 14px 14px 4px 14px; border-color: transparent; background: #e8535f; color: #fffefb; } #nr-page .py-mock__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #nr-page .py-mock__kpis strong { display: block; font-size: 17px; line-height: 1.1; color: #1d1e22; } #nr-page .py-mock__kpis small { font-size: 11px; color: #8a8f98; } #nr-page .py-mock__chart { display: flex; align-items: flex-end; gap: 6px; height: 56px; } #nr-page .py-mock__chart i { flex: 1 1 0; height: var(--h, 50%); border-radius: 4px 4px 2px 2px; background: #e8535f; } #nr-page .py-mock__chart i:last-child { background: #f7a8b0; } #nr-page .py-builds__foot { margin: 22px 0 0; padding: 15px 20px; border-radius: 18px 22px 16px 20px; background: rgba(124, 198, 240, .16); font-size: 15.5px; line-height: 1.55; color: #a83a45; } #nr-page .py-builds__foot strong { color: #1d1e22; } @media (max-width: 991px) { #nr-page .py-builds { grid-template-columns: minmax(0, 1fr); gap: 18px; } #nr-page .py-build h3 { font-size: 19px; } } /* ========================================================================== Acao de 10 anos da OneBitCode — 07/09/2026 a 21/09/2026 Tudo aqui e temporario. Para encerrar: apagar este bloco, a faixa no HTML e voltar o botao do card para a oferta padrao. ========================================================================== */ :root { --bday-h: 46px; } .obc-bday { position: fixed; top: 0; left: 0; right: 13px; z-index: 1001; height: var(--bday-h); background: #cc4b55; color: #fffefb; box-shadow: 0 2px 0 rgba(29, 30, 34, .16); border-radius: 0 0 10px 0; } .obc-bday__in { display: flex; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 0 18px; } .obc-bday__cake { display: flex; width: 22px; height: 24px; } .obc-bday__cake svg { width: 100%; height: 100%; } .obc-bday p { margin: 0; font-size: 15px; line-height: 1.3; } .obc-bday p strong { font-weight: 700; } .obc-bday__cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1.5px solid rgba(255, 254, 251, .85); border-radius: 999px; color: #fffefb !important; font: 600 13.5px/1 "Poppins", sans-serif; text-decoration: none; transition: background 160ms ease; } .obc-bday__cta:hover { background: rgba(255, 254, 251, .16); } .obc-bday__until { font: 500 12px/1 "Roboto Mono", ui-monospace, monospace; letter-spacing: .05em; opacity: .82; } /* a barra fixa e o hero descem a altura da faixa */ /* 12px era o vao que a barra tinha da borda da tela; com um bloco solido logo acima ela parece colada, entao o respiro aumenta. */ #nr-page .nr-topbar:not(.is-hidden) { top: calc(var(--bday-h) + 22px) !important; } /* O hero desce o mesmo tanto que a barra flutuante desceu (a faixa mais o respiro), para o bloco FORMACAO/ nao passar por baixo dela. Precisa do #nr-page: ha um `.nr-page .nr-hero{margin-top:78px!important}` num