/* ===== PROJECT STYLES - COMMON & PAGE-SPECIFIC ===== */ /* Using page-specific body classes to prevent style conflicts */ /* Add class="page-papo", class="page-afya", etc. to tag */ /* ===== FONTS ===== */ @font-face { font-family: "chercan"; font-weight: 700; font-style: normal; src: url("https://use.typekit.net/af/3dd78c/00000000000000007735a200/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/3dd78c/00000000000000007735a200/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/3dd78c/00000000000000007735a200/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype"); } /* ===== COMMON STYLES (SHARED ACROSS ALL PROJECT PAGES) ===== */ :root { --color-primary: #1c2e1d; --color-text: #3e3e3e; --color-accent: #AB4C98; --color-accent-hover: #C5A3B9; --color-button-bg: #EFD8E7; --color-button-shadow: #dfc5d7; --font-primary: 'Plus Jakarta Sans', sans-serif; --font-display: 'chercan', serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: #ffffff; color: var(--color-text); line-height: 1.6; overflow-x: hidden; } body.menu-open { overflow: hidden; } a { text-decoration: none; color: inherit; transition: color 0.3s ease; } img, video { max-width: 100%; display: block; } /* ===== NAVIGATION ===== */ .main-nav { position: sticky; top: 0; background-color: #ffffff; padding: 25px 4.8rem 15px; z-index: 999; } .nav-container { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 2rem; max-width: 100%; } .nav-logo-wrapper { justify-self: start; } .nav-links { justify-self: center; display: flex; gap: 0; } .nav-cta { justify-self: end; } .nav-logo { width: 54px; height: auto; } .nav-links a { font-size: 15px; font-weight: 500; color: #1b1b1b; margin: 0 8px; transition: color 0.3s ease; } .nav-links a:hover { color: var(--color-accent-hover); } .button-resume { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 450; color: var(--color-primary); background: var(--color-button-bg); width: 156px; height: 44px; border-radius: 999px; filter: drop-shadow(0.3rem 0.3rem 0.6rem var(--color-button-shadow)); transition: background 0.3s ease; } .button-resume:hover { background: #f5e9f1; } .arrow-icon { font-family: 'Material Icons'; font-size: 18px; margin-left: 5px; vertical-align: middle; } .mobile-menu-wrapper { display: none; } .mobile-dropdown { display: none; } /* ===== HERO SECTION ===== */ .hero-section { padding: 2rem 4.8rem; } .hero-video { width: 100%; border-radius: 1rem; margin-bottom: 3rem; } .project-title { font-family: var(--font-display); font-size: 96px; font-weight: 700; color: var(--color-primary); line-height: 1; margin-bottom: 2rem; } .project-subtitle { font-size: 18px; font-weight: 400; color: var(--color-text); line-height: 1.5; margin-bottom: 3rem; } /* Project Info Grid */ .project-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; margin-bottom: 2rem; } .info-column h3 { font-size: 16px; font-weight: 400; color: #666; margin-bottom: 0.8rem; letter-spacing: 0.5px; } .info-column p { font-size: 20px; font-weight: 500; color: var(--color-text); line-height: 1.8; } /* ===== INTRO SECTION ===== */ .intro-section { padding: 2.5rem 4.8rem; } .intro-grid { display: flex; gap: 3rem; margin-bottom: 3rem; align-items: flex-start; } .intro-label { font-family: var(--font-display); font-size: 42px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; color: var(--color-primary); flex: 0 0 25%; } .intro-text { font-size: 18px; line-height: 1.8; color: var(--color-text); flex: 0 0 50%; } .product-highlight { font-size: 24px; font-weight: 500; line-height: 1.4; color: var(--color-primary); } /* Poster image - COMMON DEFAULT */ .poster-image { width: 100%; margin-top: 3rem; margin-bottom: 1rem; border-radius: 1rem; } /* ===== CASE STUDY WRAPPER ===== */ .case-wrapper { display: flex; align-items: flex-start; gap: 3rem; padding: 0 4.8rem; max-width: 100%; margin-top: 4rem; } /* Sidebar */ #sidebar { position: sticky; top: 120px; flex: 0 0 140px; height: fit-content; } #sidebar ul { list-style: none; padding: 0; margin: 0; } #sidebar a { display: block; margin-bottom: .7rem; text-decoration: none; color: #666; font-size: 14px; font-weight: 400; transition: all 0.2s ease; } #sidebar a:hover { color: #000; font-weight: 600; } #sidebar a.active { color: var(--color-accent); font-weight: 600; } /* Mobile Horizontal Navigation */ #mobile-nav { display: none; position: sticky; top: 68px; background: #ffffff; z-index: 998; border-bottom: 1px solid #e0e0e0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; opacity: 0; transform: translateY(-100%); transition: opacity 0.3s ease, transform 0.3s ease; } #mobile-nav.visible { opacity: 1; transform: translateY(0); } #mobile-nav::-webkit-scrollbar { display: none; } #mobile-nav ul { display: flex; list-style: none; padding: 0; margin: 0; white-space: nowrap; } #mobile-nav li { flex-shrink: 0; } #mobile-nav a { display: block; padding: 0.5rem 0.7rem; text-decoration: none; color: #666; font-size: 13px; font-weight: 500; transition: color 0.2s ease; } #mobile-nav a:hover { color: #000; } #mobile-nav a.active { color: var(--color-accent); font-weight: 600; } /* Main Content */ .case-content { flex: 1; max-width: 100%; } .case-content section { margin-bottom: 1rem; scroll-margin-top: 120px; } /* ===== SHARED SECTION STYLES ===== */ .section-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; color: var(--color-primary); margin-bottom: 2rem; } .section-subtitle { font-size: 28px; font-weight: 500; color: var(--color-primary); line-height: 1.4; margin-bottom: 1.5rem; } .section-text { font-size: 18px; line-height: 1.8; color: var(--color-text); margin-bottom: 2rem; } hr { border: none; border-top: 1px solid #e0e0e0; margin: 4rem 0; } hr.centered { border: none; border-top: 2px solid #1CC88B; width: 50%; margin: 4rem auto; } hr.colored { border: none; border-top: 2px solid #1CC88B; margin-bottom: 0.5rem; margin-top: 0.5rem; } /* ===== COLLABORATION SECTION ===== */ .collaboration-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .collaboration-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .collaboration-layout > div:last-child { flex: 0 0 55%; } .collaboration-image { width: 80%; margin-top: 2rem; } /* ===== DESIGN PROCESS (Hover Pills) ===== */ .design-process-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .design-process-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .design-process-layout > div:last-child { flex: 0 0 55%; } .process-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 4rem; margin-top: 1rem; max-width: 95%; } .process-column h4 { font-size: 20px; font-weight: 500; color: var(--color-primary); margin-bottom: 1rem; } .process-column-content { position: relative; } .designprocess { display: inline-block; color: #111; background: #F5F5F7; border: 1px solid #E0E0E0; padding: 0.4rem 1rem; margin: 0 0.5rem 0.5rem 0; border-radius: 1.5rem; font-size: 15px; transition: all 0.25s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); cursor: pointer; } .designprocess:hover { color: #F5F5F7; background: #000; border: 1px solid #000; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .hover-image-preview { position: fixed; width: 60vw; max-width: 800px; height: auto; max-height: 60vh; border-radius: 0 12px 12px 12px; object-fit: contain; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 99999; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); transform: scale(0.9); } /* Mobile process images container */ .mobile-process-images { display: none; margin-top: 1.5rem; margin-bottom: 1rem; } .mobile-process-images img { width: 100%; border-radius: 0.5rem; } /* ===== APPROACH SECTION ===== */ .approach-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .approach-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .approach-layout > div:last-child { flex: 0 0 55%; } .approach-image { width: 90%; margin-top: 2rem; } /* ===== FINAL DESIGNS ===== */ .designs-header { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 1.2rem; } .designs-header .section-title { flex: 0 0 30%; margin-bottom: 0; } .designs-header > p { flex: 0 0 55%; } /* Each design showcase: title+desc row on top, video below */ .design-showcase { margin-bottom: 2rem; } .design-showcase-row { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .design-showcase-row .section-subtitle { flex: 0 0 30%; margin-bottom: 0; } .design-showcase-row > p { flex: 0 0 55%; font-size: 18px; line-height: 1.8; color: var(--color-text); margin-bottom: 1.2rem; } .design-showcase video, .design-showcase img { width: 90%; } /* ===== KEY DECISIONS (Timeline) ===== */ .touchpoints { position: relative; margin-left: 20px; padding-left: 20px; } .touchpoints::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 0; width: 3px; background-color: #13AD5B; border-radius: 3px; } .touchpoint { position: relative; margin: 5rem 0; } .touchpoint:first-child { margin-top: 0; } .touchpoint .dot { position: absolute; left: -27px; top: 10px; width: 16px; height: 16px; background-color: #13AD5B; border-radius: 50%; } /* Decision content - COMMON DEFAULT (used by Papo) */ .decision-content { display: flex; gap: 3rem; align-items: flex-start; margin-left: 15px; } .decision-text { flex: 0 0 38%; } .decision-text h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 0.8rem; line-height: 1.4; } .decision-text p { font-size: 18px; line-height: 1.8; color: var(--color-text); } .decision-image { flex: 1; } .decision-image img { width: 100%; } /* ===== IMPACT (3 images in a row) ===== */ .impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; margin-right: 3rem; } .impact-grid img { width: 100%; border-radius: 0.5rem; } /* ===== REFLECTION ===== */ .reflection-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; margin-bottom: 3rem; } .reflection-card { text-align: left; } .reflection-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 1rem; min-width: 80px; min-height: 80px; margin-bottom: 1.5rem; } .reflection-card h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 1rem; line-height: 1.4; } .reflection-card p { font-size: 18px; line-height: 1.8; color: var(--color-text); } /* Next Steps block */ .next-steps { margin-top: 2rem; } .next-steps h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 0.8rem; } .next-steps p { font-size: 18px; line-height: 1.8; color: var(--color-text); max-width: 60%; } /* ===== UP NEXT ===== */ .up-next { padding: 2rem 4.8rem; margin-top: 3rem; } .up-next-navigation { display: flex; align-items: flex-start; justify-content: space-between; } .project-nav-link { display: grid; grid-template-columns: 48px 1fr; gap: 0.8rem 1rem; text-decoration: none; transition: all 0.3s ease; max-width: 45%; } .project-nav-link:hover { color: var(--color-accent); transform: scale(1.02); } .project-nav-link:hover .project-nav-title { color: var(--color-accent); } .project-nav-link .material-icons { font-size: 48px; transition: transform 0.3s ease; line-height: 1; grid-column: 1; grid-row: 1; } .project-nav-title { font-family: var(--font-display); font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -2px; grid-column: 2; grid-row: 1; margin-bottom: 0; transition: color 0.3s ease; } .project-nav-description { font-size: 16px; font-weight: 400; line-height: 1.5; opacity: 0.8; grid-column: 1 / -1; grid-row: 2; margin-top: 0.5rem; } .project-nav-link.prev .material-icons { transform: rotate(270deg); } .project-nav-link.prev:hover .material-icons { transform: rotate(270deg) scale(1.05); } .project-nav-link.next { grid-template-columns: 1fr 48px; } .project-nav-link.next .material-icons { grid-column: 2; justify-self: end; } .project-nav-link.next .project-nav-title { grid-column: 1; text-align: right; } .project-nav-link.next .project-nav-description { text-align: right; } /* ===== FOOTER ===== */ .main-footer { padding: 4rem 4.8rem; text-align: center; } .footer-name { font-family: var(--font-display); font-size: 96px; font-weight: 700; color: var(--color-primary); line-height: 1.5; letter-spacing: -0.017em; margin-bottom: 0.5rem; } .footer-contact { font-size: 18px; font-weight: 400; color: var(--color-text); line-height: 2; } .footer-contact a { color: var(--color-accent); } .footer-contact a:hover { color: var(--color-accent-hover); } /* ========================================================================== */ /* ===== PAGE-SPECIFIC STYLES ===== */ /* ========================================================================== */ /* ===== PAPO-SPECIFIC STYLES ===== */ .page-papo .touchpoint:nth-child(1) .decision-image img { width: 75% !important; } /* ===== AFYA-SPECIFIC STYLES ===== */ /* Poster image positioning */ .page-afya .poster-image { margin-top: 6rem; margin-bottom: 4rem; } /* Case content section spacing */ .page-afya .case-content section { margin-bottom: 4rem; } /* Approach layout margin */ .page-afya .approach-layout { margin-bottom: 3rem; } /* Approach Cards */ .page-afya .approach-cards-wrapper { max-width: 90%; } .page-afya .approach-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4rem; margin-top: 2rem; } .page-afya .approach-card { text-align: flex-start; } .page-afya .approach-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 1rem; min-width: 80px; min-height: 80px; margin-bottom: 1.5rem; } .page-afya .approach-card h3 { font-size: 20px; font-weight: 500; color: var(--color-primary); margin-bottom: 0.5rem; } .page-afya .approach-card p { font-size: 14px; line-height: 1.6; color: var(--color-text); } /* Final Designs Section */ .page-afya .design-showcase { display: flex; gap: 3rem; align-items: flex-start; margin-bottom: 3rem; } .page-afya .design-showcase > div:first-child { flex: 0 0 30%; } .page-afya .design-showcase .design-description { flex: 0 0 40%; } .page-afya .design-showcase img, .page-afya .design-showcase video { width: 100%; max-width: 350px; height: auto; border-radius: 0rem; } .page-afya .design-description h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 1.5rem; margin-top: 2rem; } .page-afya .design-description p { font-size: 18px; line-height: 1.8; color: var(--color-text); } /* Afya Decision Content - Different from Papo */ .page-afya .decision-content { display: flex; gap: 3rem; align-items: flex-start; margin-left: 20px; } .page-afya .decision-content > div:first-child { flex: 0 0 30%; } .page-afya .decision-content .decision-text { flex: 0 0 40%; } /* Decision 2 & 4: 40% video, 40% text */ .page-afya .touchpoint:nth-child(2) .decision-content > div:first-child, .page-afya .touchpoint:nth-child(4) .decision-content > div:first-child { flex: 0 0 40%; } .page-afya .touchpoint:nth-child(2) .decision-content .decision-text, .page-afya .touchpoint:nth-child(4) .decision-content .decision-text { flex: 0 0 40%; } .page-afya .decision-content img, .page-afya .decision-content video { width: 100%; border-radius: 4.5rem; } .page-afya .decision-text h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 1.5rem; margin-top: 2rem; line-height: 1.4; } .page-afya .decision-text p { font-size: 18px; line-height: 1.8; color: var(--color-text); } /* Result Metrics */ .page-afya .result-intro { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 1.5rem; } .page-afya .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; margin-bottom: 3rem; max-width: 75%; } .page-afya .metric-item { display: flex; flex-direction: column; gap: 1.5rem; } .page-afya .metric-content { display: flex; gap: 2rem; align-items: center; } .page-afya .metric-number { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--color-primary); line-height: 1; flex: 0 0 30%; } .page-afya .metric-description { font-size: 18px; line-height: 1.8; color: var(--color-text); flex: 0 0 50%; } /* ===== SANVELLO-SPECIFIC STYLES ===== */ /* Poster image positioning - same as Afya */ .page-sanvello .poster-image { margin-top: 6rem; margin-bottom: 4rem; } /* Context Section Layout */ .page-sanvello .context-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .page-sanvello .context-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .page-sanvello .context-layout > div:last-child { flex: 0 0 55%; } .page-sanvello .context-image { width: 70%; margin-top: 0rem; } /* Before and After Section */ .page-sanvello .ba-section-intro { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 2rem; } .page-sanvello .ba-section-intro .section-subtitle { flex: 0 0 30%; margin-bottom: 0; } .page-sanvello .ba-section-intro .section-text { flex: 0 0 55%; margin-bottom: 0; } .page-sanvello .ba-comparison { margin-bottom: 5rem; } .page-sanvello .ba-comparison img { width: 70%; margin-top: 1rem; } /* Approach Section - Different from Papo/Afya */ .page-sanvello .approach-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 3rem; } .page-sanvello .approach-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .page-sanvello .approach-layout .approach-question { flex: 0 0 55%; margin-bottom: 0; } .page-sanvello .approach-question { font-size: 28px; font-weight: 500; color: #0C954C; line-height: 1.4; margin-bottom: 3rem; } .page-sanvello .approach-subsection { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 3rem; } .page-sanvello .approach-subsection .section-subtitle { flex: 0 0 30%; margin-bottom: 0; } .page-sanvello .approach-subsection .section-text { flex: 0 0 55%; margin-bottom: 0; } .page-sanvello .approach-image { width: 90%; margin-top: 2rem; margin-bottom: 2rem; } /* Current Problems Grid */ .page-sanvello .problems-intro { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 2rem; margin-top: 3rem; } .page-sanvello .problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 4rem; margin-bottom: 3rem; } .page-sanvello .problem-item { display: flex; flex-direction: column; gap: 1rem; } .page-sanvello .problem-content { display: flex; gap: 1rem; align-items: flex-start; } .page-sanvello .problem-number { font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--color-primary); line-height: 1; flex: 0 0 20%; } .page-sanvello .problem-description { font-size: 18px; line-height: 1.8; color: var(--color-text); flex: 1; } /* Define Section */ .page-sanvello .define-layout { display: flex; gap: 2.5rem; align-items: flex-start; margin-bottom: 3rem; } .page-sanvello .define-layout .section-title { flex: 0 0 30%; margin-bottom: 0; } .page-sanvello .define-layout .section-text { flex: 0 0 55%; margin-bottom: 0; } .page-sanvello .define-image { width: 85%; margin-top: 2rem; } /* Sanvello Decision Content - VERTICAL STACK (Different from Papo/Afya) */ .page-sanvello .decision-content { display: flex; flex-direction: column; gap: 2rem; margin-left: 20px; } .page-sanvello .decision-text { width: 70%; } .page-sanvello .decision-text h3 { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 0.5rem; line-height: 1.4; } .page-sanvello .decision-text p { font-size: 18px; line-height: 1.8; color: var(--color-text); margin-top: 1rem; } .page-sanvello .decision-content video { width: 80%; margin-top: 1rem; } /* Demo Section */ .page-sanvello .demo-video { width: 79%; margin-top: 1rem; } /* Result Metrics - reuse Afya's metrics-grid */ .page-sanvello .result-intro { font-size: 28px; font-weight: 500; color: var(--color-primary); margin-bottom: 1.5rem; } .page-sanvello .metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; margin-bottom: 3rem; max-width: 75%; } .page-sanvello .metric-item { display: flex; flex-direction: column; gap: 1.5rem; } .page-sanvello .metric-content { display: flex; gap: 2rem; align-items: center; } .page-sanvello .metric-number { font-family: var(--font-display); font-size: 64px; font-weight: 700; color: var(--color-primary); line-height: 1; flex: 0 0 30%; } .page-sanvello .metric-description { font-size: 18px; line-height: 1.8; color: var(--color-text); flex: 0 0 50%; } /* ===== DASHR-SPECIFIC STYLES ===== */ /* Design showcase videos/images - 80% width */ .page-dashr .design-showcase video, .page-dashr .design-showcase img { width: 80%; } /* ===== TABLET (768px - 950px) ===== */ @media screen and (min-width: 768px) and (max-width: 950px) { .main-nav { padding: 25px 1.8rem 15px; } .button-resume { font-size: 13px; width: 140px; height: 40px; } .nav-logo { width: 50px; } .nav-links a { font-size: 14px; } .hero-section, .intro-section, .case-wrapper, .up-next, .main-footer { padding-left: 1.8rem; padding-right: 1.8rem; } .project-title { font-size: 64px; margin-bottom: 1.2rem; } .project-info-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 0; } #sidebar { flex: 0 0 120px; } .reflection-cards { grid-template-columns: repeat(3, 1fr); } .footer-contact { font-size: 15px; } .project-subtitle { font-size: 16px; margin-bottom: 2rem; } .info-column p { font-size: 18px; line-height: 1.8; } .info-column h3 { font-size: 15px; margin-bottom: 0.8rem; } .intro-text, .section-text, .decision-text p, .reflection-card p, .design-showcase-row > p, .next-steps p { font-size: 16px; line-height: 1.8; } .intro-text { flex: 0 0 60%; } .intro-label, .section-title { font-size: 36px; line-height: 1.2; } .product-highlight, .section-subtitle, .decision-text h3, .reflection-card h3, .next-steps h3, .process-column h4 { font-size: 20px; } .intro-grid { margin-bottom: 2rem; } .collaboration-image, .approach-image, .design-showcase video, .design-showcase img { width: 100%; } hr { margin: 3.5rem 0; } .collaboration-layout, .approach-layout, .designs-header { margin-bottom: 1.5rem; } /* Tablet: Key decisions stack vertically */ .decision-content { flex-direction: column; gap: 1.5rem; } .decision-text { flex: 1 1 100%; } .decision-image { flex: 1 1 100%; } .decision-image img { width: 80%; } .design-process-layout { margin-bottom: 1.5rem; } .design-process-layout .section-title, .design-process-layout > div:last-child { flex: 1 1 100%; } .designprocess:hover { color: #111; background: #F5F5F7; border: 1px solid #E0E0E0; transform: none; } .designprocess.active { color: #F5F5F7; background: #000; border: 1px solid #000; } .mobile-process-images { display: block; } .designprocess { font-size: 14px; } .project-nav-description { font-size: 15px; } .project-nav-title { font-size: 38px; } .project-nav-link .material-icons { font-size: 36px; width: 36px; height: 36px; line-height: 36px; } .project-nav-link { gap: 0.3rem 0.2rem; } .footer-name { font-size: 64px; } .up-next { margin-top: 1rem; } .next-steps p { max-width: 100%; } .design-showcase-row { gap: 2rem; margin-bottom: 1rem; } .collaboration-layout, .design-process-layout, .approach-layout, .designs-header { gap: 2rem; } .approach-layout .section-title, .collaboration-layout .section-title, .designs-header .section-title, .design-process-layout .section-title { flex: 0 0 30%; } .approach-layout > div:last-child, .collaboration-layout > div:last-child, .designs-header > p, .design-process-layout > div:last-child{ flex: 0 0 60%; } .design-showcase-row .section-subtitle { flex: 0 0 30%; } .design-showcase-row > p { flex: 0 0 60%; } .process-grid { gap: 1.2rem 4rem; margin-top: 0rem; } .designs-header{ margin-bottom: 0rem; } /* ===== PAPO TABLET STYLES ===== */ .page-papo .touchpoint:nth-child(1) .decision-image img { width: 60% !important; } /* ===== AFYA TABLET STYLES ===== */ .page-afya .approach-cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 0; } .page-afya .metrics-grid { max-width: 95%; gap: 2.4rem 3rem; } .page-afya .poster-image{ margin-top: 4rem; margin-bottom: 3rem; } .page-afya .approach-card h3 { font-size: 16px; } .page-afya .approach-card img{ margin-bottom: 1rem; } .page-afya .metric-number{ font-size: 42px; } .page-afya .metric-content { gap: 1.2rem; } .page-afya .design-description p, .page-afya .decision-text p, .page-afya .metric-description { font-size: 16px; line-height: 1.8; } .page-afya .design-description h3, .page-afya .decision-text h3, .page-afya .result-intro{ font-size: 20px; } .page-afya .approach-layout{ margin-bottom: 1.2rem; } .page-afya .decision-content { flex-direction: row !important; gap: 2rem; } /* ===== SANVELLO TABLET STYLES ===== */ .page-sanvello .metrics-grid { max-width: 95%; gap: 2.4rem 3rem; } .page-sanvello .metric-number { font-size: 42px; } .page-sanvello .metric-content { gap: 1.2rem; } .page-sanvello .problem-number { font-size: 32px; flex: 0 0 15%; } .page-sanvello .problem-content { gap: 0.5rem; } .page-sanvello .problems-grid { grid-template-columns: repeat(2, 1fr); } .page-sanvello .ba-comparison { margin-bottom: 4rem; } .page-sanvello .context-image, .page-sanvello .ba-comparison img, .page-sanvello .approach-image, .page-sanvello .define-image, .page-sanvello .demo-video { width: 100%; } .page-sanvello .context-layout { margin-bottom: 0rem; } .page-sanvello .ba-section-intro { margin-bottom: 1rem; } .page-sanvello .approach-question { font-size: 18px; margin-bottom: 2rem; } .page-sanvello .approach-layout, .page-sanvello .approach-subsection { margin-bottom: 2rem; } .page-sanvello .problems-intro { margin-bottom: 1rem; } .page-sanvello .approach-subsection .section-text, .page-sanvello .approach-layout .approach-question, .page-sanvello .define-layout .section-text { flex: 0 0 65%; } .page-sanvello .decision-content { gap: 1rem; } .page-sanvello .decision-text { width: 80%; } .page-sanvello .decision-text p, .page-sanvello .metric-description, .page-sanvello .problem-description { font-size: 16px; line-height: 1.8; } .page-sanvello .decision-text h3, .page-sanvello .result-intro, .page-sanvello .problems-intro { font-size: 20px; } .page-sanvello .poster-image { margin-top: 4rem; margin-bottom: 3rem; } } /* ===== MOBILE (0px - 767px) ===== */ @media screen and (max-width: 767px) { .main-nav { padding: 20px 20px 15px; } .nav-container { display: flex; justify-content: space-between; align-items: center; } .nav-logo { width: 35px; } .desktop-only-links { display: none !important; } .mobile-menu-wrapper { display: flex; justify-content: flex-end; align-items: center; } .mobile-toggle { background: none; border: none; cursor: pointer; font-size: 28px; color: #1b1b1b; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; z-index: 9999; font-family: 'Material Icons'; } .icon-open, .icon-close { font-family: 'Material Icons'; font-size: 28px; } .icon-close { display: none; } .mobile-toggle.active .icon-open { display: none; } .mobile-toggle.active .icon-close { display: block; } .mobile-dropdown { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ffffff; z-index: 9990; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 25vh 20px 20px; overflow-y: auto; } .mobile-dropdown.active { display: flex; } .mobile-links { width: 100%; margin-bottom: 5rem; } .mobile-links a { display: block; font-size: 26px; font-weight: 500; color: #1b1b1b; margin-bottom: 2rem; opacity: 0; transform: translateY(30px); } .mobile-dropdown.active .mobile-links a { animation: slideUp 0.5s ease-out forwards; } .mobile-links a:nth-child(1) { animation-delay: 0.1s; } .mobile-links a:nth-child(2) { animation-delay: 0.2s; } .mobile-links a:nth-child(3) { animation-delay: 0.3s; } .mobile-resume { font-size: 20px; opacity: 0; transform: translateY(30px); } .arrow-icon { font-size: 18px; } .button-resume { width: 200px; height: 56px; } .mobile-dropdown.active .mobile-resume { animation: slideUp 1s ease-out forwards; animation-delay: 0.4s; } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } .hero-section, .intro-section { padding: 2rem 20px; padding-top: 0; } .intro-section { padding-bottom: 0; } .project-title { font-size: 36px; margin-bottom: 0.8rem; } .project-subtitle { font-size: 14px; margin-bottom: 1.5rem; } .project-info-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 0; } .intro-grid { flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; } .intro-label, .intro-text { flex: 1 1 100%; } #sidebar { display: none; } #mobile-nav { display: none; position: sticky; top: 68px; background: #ffffff; z-index: 998; border-bottom: 1px solid #e0e0e0; overflow-x: auto; } #mobile-nav.visible { display: block !important; opacity: 1; transform: translateY(0); } .case-wrapper { padding: 0 20px; display: block; margin-top: 2rem; } .case-content section { scroll-margin-top: 180px; margin-bottom: 0; } .section-title { font-size: 24px; letter-spacing: 0; margin-bottom: 0.5rem !important; } .section-subtitle { font-size: 16px; margin-bottom: 0.5rem !important; } /* Stack all layouts vertically */ .collaboration-layout, .design-process-layout, .approach-layout, .designs-header{ flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; } .design-showcase-row { flex-direction: column; gap: 0rem; margin-bottom: 1.2rem; } .collaboration-layout .section-title, .collaboration-layout > div:last-child, .design-process-layout .section-title, .design-process-layout > div:last-child, .approach-layout .section-title, .approach-layout > div:last-child, .designs-header .section-title, .designs-header > p, .design-showcase-row .section-subtitle, .design-showcase-row > p { flex: 1 1 100%; } .collaboration-image, .approach-image { width: 100%; margin-top: 1.5rem; } .design-showcase video, .design-showcase img { width: 100%; } /* Key Decisions: stack on mobile */ .decision-content { flex-direction: column; gap: 1rem; margin-left: 0; } .decision-text { flex: 1 1 100%; } .decision-image { flex: 1 1 100%; } .decision-image img { width: 100%; } /* Impact grid: stack on mobile */ .impact-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-right: 0rem; } /* Design Process: hide hover, show click */ .designprocess:hover { color: #111; background: #F5F5F7; border: 1px solid #E0E0E0; transform: none; } .designprocess.active { color: #F5F5F7; background: #000; border: 1px solid #000; } .mobile-process-images { display: none; margin: 0; } .mobile-process-images:has(img) { margin-top: 1.5rem; margin-bottom: 1rem; } .hover-image-preview { display: none; } .process-grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; } .designprocess { font-size: 13px; } /* Reflection */ .reflection-cards { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 1.4rem; margin-bottom: 2rem; } .touchpoints{ margin-top: 20px; } .reflection-card img { width: 60px; height: 60px; min-width: 60px; min-height: 60px; margin-bottom: 0.5rem; } .next-steps h3 { font-size: 16px; margin-bottom: 0.5rem; } .next-steps p { max-width: 100%; font-size: 14px; } /* Up Next */ .up-next { padding: 3rem 20px; padding-bottom: 1.5rem; margin-top: 0; } .up-next-navigation { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 1rem; } .project-nav-link { max-width: 48%; display: grid !important; grid-template-columns: 32px 1fr; gap: 0; align-items: start; } .project-nav-link .material-icons { font-size: 24px; width: 24px; height: 24px; line-height: 24px; } .project-nav-title { font-size: 26px; letter-spacing: 0; } .project-nav-description { font-size: 13px; display: block; } .project-nav-link.next { justify-self: flex-end; grid-template-columns: 1fr 28px; } /* Footer */ .main-footer { padding: 4rem 20px; } .footer-name { font-size: 42px; line-height: 1.1; margin-bottom: 1rem; } .footer-contact { font-size: 14px; line-height: 1.6; word-wrap: break-word; } /* Typography scale */ .intro-text, .decision-text p, .reflection-card p, .design-showcase-row > p { font-size: 14px; line-height: 1.8; } .decision-text h3, .reflection-card h3 { font-size: 16px; margin-bottom: 0.5rem; } .info-column p { font-size: 14px; line-height: 1.8; } .info-column h3 { font-size: 14px; margin-bottom: 0.5rem; } .intro-label { font-size: 24px; letter-spacing: 0; } .product-highlight { font-size: 14px; line-height: 1.8; margin-bottom: 0.5rem; } .section-text { font-size: 14px; line-height: 1.8; margin-bottom: 0; } hr { margin: 2rem 0; } hr.centered { margin: 2rem auto; } .process-column h4 { font-size: 16px; margin-bottom: 0.5rem; } .poster-image { margin-top: 2rem; } .touchpoint { margin: 2rem 0; } .hero-video { margin-bottom: 2rem; margin-top: 1.2rem; } /* ===== AFYA MOBILE STYLES ===== */ .page-afya .approach-cards-wrapper { max-width: 100%; } .page-afya .reflection-cards{ margin-bottom: 0rem; } .page-afya .approach-cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 1rem; } .page-afya .design-showcase { flex-direction: column; gap: 1rem; margin-top: 1.2rem; margin-bottom: 1rem; } .page-afya .design-showcase > div:first-child, .page-afya .design-showcase .design-description { flex: 1 1 100%; } .page-afya .case-content section { margin-bottom: 0rem; } .page-afya .decision-content{ margin-left: 0px; gap: 1rem; } .page-afya .design-showcase img, .page-afya .design-showcase video { width: 70%; max-width: 400px; } .page-afya .metrics-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 100%; margin-top: 1rem; margin-bottom: 1rem; } .page-afya .metric-content { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .page-afya .metric-number, .page-afya .metric-description { flex: 1 1 100%; } .page-afya .metric-number { font-size: 32px; } .page-afya .metric-item { gap: 0.3rem; } .page-afya .design-description p, .page-afya .metric-description { font-size: 14px; line-height: 1.8; } .page-afya .result-intro { font-size: 16px; margin-bottom: 0.5rem; } .page-afya .approach-card h3 { font-size: 14px; } .page-afya .approach-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 1rem; min-width: 60px; min-height: 60px; margin-bottom: 0.5rem; } .page-afya .design-description h3{ font-size: 16px; margin-bottom: 0.5rem; margin-top: 0.5rem; } .page-afya .poster-image { margin-top: 2rem; margin-bottom: 0rem; } .page-afya .decision-content img, .page-afya .decision-content video { width: 70% !important; max-width: 400px !important; } .page-afya .touchpoint:nth-child(4) .decision-content video, .page-afya .touchpoint:nth-child(2) .decision-content video{ width: 90% !important; } .page-afya .decision-text h3 { font-size: 16px; margin-bottom: 0.5rem; margin-top: 0.5rem; } .page-afya .decision-text p { font-size: 14px; line-height: 1.8; } /* ===== SANVELLO MOBILE STYLES ===== */ .page-sanvello .context-layout, .page-sanvello .approach-subsection, .page-sanvello .ba-section-intro, .page-sanvello .approach-layout, .page-sanvello .define-layout { flex-direction: column; gap: 0rem; margin-bottom: 1.2rem; } .page-sanvello .ba-comparison { margin-bottom: 2.5rem; } .page-sanvello .context-layout .section-title, .page-sanvello .context-layout > div:last-child, .page-sanvello .approach-subsection .section-subtitle, .page-sanvello .approach-subsection .section-text, .page-sanvello .ba-section-intro .section-subtitle, .page-sanvello .ba-section-intro .section-text { flex: 1 1 100%; } .page-sanvello .decision-content video { width: 100% !important; margin-left: 0; } .page-sanvello .decision-content { margin-left: 0px; gap: 0.5rem; } .page-sanvello .decision-text { width: 100%; } .page-sanvello .metrics-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 100%; margin-top: 1rem; margin-bottom: 2rem; } .page-sanvello .metric-content { flex-direction: column; align-items: flex-start; gap: 0.3rem; } .page-sanvello .metric-number, .page-sanvello .metric-description { flex: 1 1 100%; } .page-sanvello .metric-number { font-size: 32px; } .page-sanvello .metric-item { gap: 0.3rem; } .page-sanvello .problems-grid { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; } .page-sanvello .problem-content { gap: 1rem; } .page-sanvello .problem-number { font-size: 28px; flex: 0 0 10%; } .page-sanvello .context-image, .page-sanvello .approach-image, .page-sanvello .define-image, .page-sanvello .demo-video { width: 100%; margin-top: 1.5rem; } .page-sanvello .ba-comparison img { width: 90%; } .page-sanvello .approach-question { font-size: 15px; margin-bottom: 2rem; line-height: 1.6; } .page-sanvello .problem-item { gap: 0rem; } .page-sanvello .poster-image { margin-top: 2rem; margin-bottom: 0rem; } .page-sanvello .metric-description, .page-sanvello .problem-description { font-size: 14px; line-height: 1.8; } .page-sanvello .decision-text p{ font-size: 14px; line-height: 1.8; margin-top: 0rem; } .page-sanvello .decision-text h3, .page-sanvello .result-intro, .page-sanvello .problems-intro { font-size: 16px; margin-bottom: 0.5rem; } .page-sanvello .decision-text h3 { margin-top: 0.5rem; } .page-sanvello .reflection-cards{ margin-bottom: 0rem; } .page-dashr .reflection-cards{ margin-bottom: 0rem; } }