/* ════════════════════════════════════════════════════════════════ Shared styles for the "How to Become a Product Manager" hub and the 5 stage pages. Inline CSS in each would make maintenance painful across 6 pages, so we link this stylesheet. Design tokens match the rest of the Product Academy site. ════════════════════════════════════════════════════════════════ */ /* ─── DESIGN TOKENS ──────────────────────────────────────────────── */ :root { --yellow: #FFE028; --yellow-dark: #E5C800; --pink: #F42A72; --pink-dark: #D41E5E; --navy: #0239A8; --navy-dark: #012680; --teal: #1CE6D2; --light-pink: #FEDFEA; --light-yellow: #FFF6C9; --light-navy: #E8EFFD; --ink: #111111; --body: #3D3D3D; --muted: #737373; --border: #E5E5E5; --surface: #F7F7F5; --white: #FFFFFF; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; --shadow-xs: 0 1px 3px rgba(0,0,0,0.05); --shadow-sm: 0 2px 10px rgba(0,0,0,0.07); --shadow-md: 0 8px 28px rgba(0,0,0,0.09); --shadow-lg: 0 24px 56px rgba(0,0,0,0.10); } /* ─── RESET ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ─── TYPOGRAPHY ─────────────────────────────────────────────────── */ h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; line-height: 1.15; color: var(--ink); letter-spacing: -0.02em; } h2 { font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; line-height: 1.2; color: var(--ink); letter-spacing: -0.015em; } h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink); } h4 { font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); } p { font-size: 17px; line-height: 1.7; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 760px; } /* ─── BUTTONS ────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 15px; border-radius: var(--r-full); cursor: pointer; transition: all 0.18s ease; border: 2px solid transparent; text-decoration: none; padding: 12px 24px; } .btn--sm { padding: 9px 18px; font-size: 14px; } .btn--lg { padding: 16px 32px; font-size: 17px; } .btn--primary { background: var(--pink); color: var(--white); } .btn--primary:hover { background: var(--pink-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--navy { background: var(--navy); color: var(--white); } .btn--navy:hover { background: var(--navy-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--outline:hover { background: var(--ink); color: var(--white); } .btn--ghost { background: transparent; color: var(--body); border-color: var(--border); } .btn--ghost:hover { background: var(--surface); color: var(--ink); } /* ─── NAV ────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; gap: 24px; } .nav__logo img { height: 36px; } .nav__links { display: flex; list-style: none; gap: 28px; align-items: center; } .nav__links a { font-size: 15px; font-weight: 600; color: var(--body); transition: color 0.18s ease; } .nav__links a:hover { color: var(--ink); } .nav__links a.is-active { color: var(--pink); } @media (max-width: 800px) { .nav__links { display: none; } } /* ─── PAGE HEADER (hub + stage) ──────────────────────────────────── */ .page-header { background: linear-gradient(135deg, var(--light-navy) 0%, var(--light-pink) 100%); padding: 40px 0 48px; border-bottom: 1px solid var(--border); } .page-header--hub { padding: 56px 0 64px; } .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 20px; flex-wrap: wrap; } .breadcrumb a { color: var(--muted); transition: color 0.18s ease; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { opacity: 0.5; } .breadcrumb .current { color: var(--ink); } .eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: var(--yellow); color: var(--ink); padding: 5px 12px; border-radius: var(--r-full); margin-bottom: 14px; } .eyebrow--navy { background: var(--navy); color: var(--white); } .eyebrow--pink { background: var(--pink); color: var(--white); } .eyebrow--teal { background: var(--teal); color: var(--ink); } .page-header h1 { margin-bottom: 16px; max-width: 820px; } .page-header .lead { font-size: 19px; line-height: 1.55; color: var(--body); max-width: 720px; margin-bottom: 20px; } .page-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; color: var(--body); font-weight: 600; } .page-meta span { display: inline-flex; align-items: center; gap: 6px; } .page-meta svg { width: 16px; height: 16px; opacity: 0.7; } /* ─── ROADMAP (stage stepper) ──────────────────────────────────── Horizontal 5-stage stepper that appears under the header on every page. Shows the journey through The Break-In Blueprint and highlights the current stage. On hub, no step is current. */ .roadmap { background: var(--white); border-bottom: 1px solid var(--border); padding: 22px 0; } .roadmap__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; } .roadmap__title { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; flex-shrink: 0; } .roadmap__steps { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; flex: 1; justify-content: space-between; gap: 0; min-width: 0; } .roadmap__step { display: flex; align-items: center; flex: 1; min-width: 0; } .roadmap__step:not(:last-child)::after { content: ""; flex: 1; height: 2px; background: var(--border); margin: 0 8px; margin-bottom: 18px; } .roadmap__link, .roadmap__current { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--muted); transition: color 0.18s ease; flex-shrink: 0; } .roadmap__link:hover { color: var(--ink); } .roadmap__link:hover .roadmap__num { border-color: var(--ink); color: var(--ink); } .roadmap__num { width: 34px; height: 34px; border-radius: 50%; background: var(--white); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--muted); transition: all 0.18s ease; } .roadmap__label { font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: 0.01em; } .roadmap__step--current .roadmap__num { background: var(--pink); border-color: var(--pink); color: var(--white); box-shadow: 0 0 0 4px rgba(244, 42, 114, 0.15); } .roadmap__step--current .roadmap__label { color: var(--ink); } /* Bookend steps (intro + summary) — visually distinct from the core 5 stages. Dashed border + italic label signal "this is part of the course but not part of the 5-stage methodology." */ .roadmap__step--bookend .roadmap__num { border-style: dashed; background: var(--white); color: var(--muted); font-size: 14px; } .roadmap__step--bookend .roadmap__link:hover .roadmap__num, .roadmap__step--bookend.roadmap__step--current .roadmap__num { border-style: dashed; } .roadmap__step--bookend .roadmap__label { color: var(--muted); font-weight: 600; font-style: italic; } .roadmap__step--bookend .roadmap__link:hover .roadmap__label { color: var(--ink); } @media (max-width: 800px) { .roadmap__inner { flex-direction: column; align-items: stretch; gap: 16px; } .roadmap__title { text-align: center; } .roadmap__steps { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-bottom: 6px; } .roadmap__step { flex: 0 0 auto; min-width: 110px; } .roadmap__step:not(:last-child)::after { width: 24px; flex: 0 0 24px; margin: 0 4px 18px; } .roadmap__label { font-size: 11px; } } /* ─── ARTICLE LAYOUT (stage pages) ───────────────────────────────── */ .article { padding: 40px 0 72px; background: var(--white); } .article__inner { max-width: 760px; margin: 0 auto; } .article h2 { margin-top: 48px; margin-bottom: 14px; } .article h2:first-of-type { margin-top: 32px; } .article h3 { margin-top: 32px; margin-bottom: 10px; } .article p { margin-bottom: 18px; } .article ul, .article ol { margin: 0 0 18px 24px; } .article li { font-size: 17px; line-height: 1.7; margin-bottom: 8px; } .article strong { color: var(--ink); } .direct-answer { background: var(--light-yellow); border-left: 4px solid var(--yellow-dark); padding: 20px 24px; border-radius: var(--r-md); margin: 8px 0 32px; } .direct-answer p { font-size: 18px; line-height: 1.6; margin-bottom: 0; color: var(--ink); font-weight: 500; } /* ─── VIDEO EMBED ────────────────────────────────────────────────── */ .video-embed { position: relative; padding-top: 56.25%; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; margin: 0 0 32px; box-shadow: var(--shadow-lg); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ─── LESSON FRAME (wraps the video so it reads as a course module) ── */ .lesson-frame { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px 24px 24px; margin: 0 0 36px; box-shadow: var(--shadow-sm); } .lesson-frame__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .lesson-frame__badge { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; background: var(--pink); color: var(--white); padding: 5px 11px; border-radius: var(--r-full); } .lesson-frame__duration { font-size: 13px; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .lesson-frame__duration svg { width: 14px; height: 14px; opacity: 0.7; } .lesson-frame__title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 18px; line-height: 1.25; letter-spacing: -0.01em; } .lesson-frame .video-embed { margin: 0; box-shadow: var(--shadow-md); } .lesson-frame__footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); flex-wrap: wrap; } .lesson-frame__footer-label { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .lesson-frame__next { font-size: 16px; font-weight: 700; color: var(--pink); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: all 0.18s ease; } .lesson-frame__next:hover { color: var(--pink-dark); transform: translateX(3px); } .lesson-frame__next-meta { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; } .lesson-frame__next-wrap { text-align: right; } @media (max-width: 600px) { .lesson-frame { padding: 18px 18px 20px; } .lesson-frame__title { font-size: 19px; } .lesson-frame__footer { flex-direction: column; align-items: stretch; gap: 10px; } .lesson-frame__next-wrap { text-align: left; } } /* ─── OBJECTIVES BOX ─────────────────────────────────────────────── */ .objectives { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; margin: 0 0 36px; } .objectives__title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 14px; } .objectives ul { list-style: none; margin: 0; } .objectives li { padding-left: 28px; position: relative; margin-bottom: 12px; font-size: 16px; line-height: 1.55; color: var(--ink); } .objectives li:last-child { margin-bottom: 0; } .objectives li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; background: var(--pink); border-radius: 50%; background-image: url("data:image/svg+xml;utf8,"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; } /* ─── COMPARISON TABLE ──────────────────────────────────────────── */ .compare-table { width: 100%; border-collapse: collapse; margin: 12px 0 32px; font-size: 15px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); } .compare-table th, .compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .compare-table th { background: var(--light-navy); font-weight: 700; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; } .compare-table tr:last-child td { border-bottom: 0; } .compare-table tr:nth-child(even) td { background: var(--surface); } /* ─── HUB-ONLY: STAGES JOURNEY (compact vertical roadmap) ──────── */ .stages-journey { list-style: none; margin: 12px 0 0; padding: 0; position: relative; } .stages-journey__step { display: grid; grid-template-columns: 40px 1fr; gap: 18px; position: relative; padding: 8px 0; align-items: center; } /* Vertical connector line behind the numbered nodes */ .stages-journey__step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 48px; bottom: -8px; width: 2px; background: var(--border); z-index: 0; } .stages-journey__node { width: 40px; height: 40px; border-radius: 50%; background: var(--white); border: 2px solid var(--pink); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--ink); position: relative; z-index: 1; flex-shrink: 0; transition: all 0.2s ease; } .stages-journey__step:nth-child(2) .stages-journey__node { border-color: var(--yellow-dark); } .stages-journey__step:nth-child(3) .stages-journey__node { border-color: var(--navy); } .stages-journey__step:nth-child(4) .stages-journey__node { border-color: var(--teal); } .stages-journey__step:nth-child(5) .stages-journey__node { border-color: var(--pink-dark); } .stages-journey__row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; text-decoration: none; color: inherit; padding: 6px 0; transition: transform 0.18s ease; } .stages-journey__row:hover { transform: translateX(3px); } .stages-journey__step:hover .stages-journey__node { transform: scale(1.08); background: var(--surface); } .stages-journey__title { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.2; flex-shrink: 0; } .stages-journey__q { font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.4; flex: 1; min-width: 220px; } .stages-journey__row:hover .stages-journey__q { color: var(--pink); } .stages-journey__arrow { font-size: 16px; font-weight: 700; color: var(--pink); margin-left: auto; } @media (max-width: 600px) { .stages-journey__step { grid-template-columns: 36px 1fr; gap: 14px; } .stages-journey__step:not(:last-child)::before { left: 17px; top: 44px; } .stages-journey__node { width: 36px; height: 36px; font-size: 14px; } .stages-journey__title { font-size: 16px; } .stages-journey__q { font-size: 14px; min-width: 0; width: 100%; } } /* ─── HUB-ONLY: BLUEPRINT TRACKER CTA ───────────────────────────── */ .tracker-cta { padding: 20px 0 32px; background: var(--white); } .tracker-cta__inner { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: var(--white); border-radius: var(--r-lg); padding: 24px 28px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } @media (max-width: 700px) { .tracker-cta__inner { grid-template-columns: 1fr; padding: 22px 22px; } } .tracker-cta__inner h2 { color: var(--white); margin-bottom: 4px; font-size: 22px; } .tracker-cta__inner p { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.5; } /* ─── PREV / NEXT NAV ────────────────────────────────────────────── */ .prevnext { border-top: 1px solid var(--border); background: var(--surface); padding: 40px 0; } .prevnext__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; margin: 0 auto; } @media (max-width: 600px) { .prevnext__grid { grid-template-columns: 1fr; } } .prevnext__link { display: block; padding: 20px 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); transition: all 0.2s ease; } .prevnext__link:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .prevnext__direction { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .prevnext__title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; } .prevnext__link--next { text-align: right; } .prevnext__link--prev { text-align: left; } .prevnext__link--placeholder { background: transparent; border: 1px dashed var(--border); pointer-events: none; opacity: 0.55; } /* ─── WHAT TO DO NEXT (CTA section) ─────────────────────────────── */ .next-step { background: var(--light-yellow); border-radius: var(--r-lg); padding: 32px 28px; margin: 32px 0 8px; } .next-step h3 { font-size: 22px; margin-bottom: 12px; } .next-step p { font-size: 16px; margin-bottom: 18px; } .next-step .btn { margin-right: 10px; margin-top: 4px; } /* ─── FOOTER (matches main site) ─────────────────────────────────── */ .footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 56px 0 28px; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 40px; margin-bottom: 36px; } @media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; } } .footer__logo img { height: 36px; } .footer__col-title { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--white); margin-bottom: 14px; } .footer__nav { list-style: none; } .footer__nav li { margin-bottom: 8px; } .footer__nav a { font-size: 14px; color: rgba(255,255,255,0.7); transition: color 0.18s ease; } .footer__nav a:hover { color: var(--white); } .footer__social-row { display: flex; gap: 10px; } .footer__social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease; } .footer__social-btn:hover { background: rgba(255,255,255,0.18); } .footer__social-btn svg { width: 16px; height: 16px; fill: var(--white); } .footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; font-size: 13px; color: rgba(255,255,255,0.5); } /* ─── UTILITY ────────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }