/* ======================================== Design Tokens ======================================== */ :root { --bg: #fffcf6; --text-primary: #2d2926; --primary-orange: #d85e37; --border-primary: #e0dcd3; --white: #ffffff; --black: #000000; --font-heading: 'Lora', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --section-px: 200px; --section-py: 100px; --max-width: 1728px; /* Type scale */ --type-h1-size: 48px; --type-h1-lh: 1.2; --type-h1-fw: 500; --type-h2-size: 48px; --type-h2-lh: 1.2; --type-h2-fw: 500; --type-h3-size: 20px; --type-h3-lh: 36px; --type-h3-fw: 500; --type-body-size: 16px; --type-body-lh: 27px; --type-body-fw: 400; --type-hero-lh: 32px; } /* ======================================== Script modifier classes Apply to or any section container to switch all content typography. ======================================== */ /* Urdu — shift Nastaliq text up to compensate for heavy descenders pulling visual weight down */ .script-nastaliq .lang-selector span { line-height: 1; margin-top: -8px; } /* Urdu — Nastaliq (RTL, optically smaller → size ×1.20, lh 2.1–2.35) */ .script-nastaliq { direction: rtl; word-spacing: 0.2em; --font-heading: 'Noto Nastaliq Urdu', serif; --font-body: 'Noto Nastaliq Urdu', serif; --type-h1-size: 58px; --type-h1-lh: 2.35; --type-h1-fw: 500; --type-h2-size: 58px; --type-h2-lh: 2.35; --type-h2-fw: 500; --type-h3-size: 24px; --type-h3-lh: 2.2; --type-h3-fw: 500; --type-body-size: 22px; --type-body-lh: 2.1; --type-body-fw: 500; --type-hero-lh: 2.1; } .script-nastaliq strong, .script-nastaliq b { font-weight: inherit; font-size: calc(1em + 4px); } /* Hindi — Devanagari (top bar → size ×1.09, lh 1.5–1.62) */ .script-devanagari { --font-heading: 'Noto Sans Devanagari', sans-serif; --font-body: 'Noto Sans Devanagari', sans-serif; --type-h1-size: 52px; --type-h1-lh: 1.62; --type-h1-fw: 600; --type-h2-size: 52px; --type-h2-lh: 1.62; --type-h2-fw: 600; --type-h3-size: 22px; --type-h3-lh: 1.55; --type-h3-fw: 600; --type-body-size: 17px; --type-body-lh: 1.5; --type-body-fw: 300; --type-hero-lh: 1.5; } /* Punjabi — Gurmukhi (same adjustments as Devanagari) */ .script-gurmukhi { --font-heading: 'Noto Sans Gurmukhi', sans-serif; --font-body: 'Noto Sans Gurmukhi', sans-serif; --type-h1-size: 52px; --type-h1-lh: 1.62; --type-h1-fw: 600; --type-h2-size: 52px; --type-h2-lh: 1.62; --type-h2-fw: 600; --type-h3-size: 22px; --type-h3-lh: 1.55; --type-h3-fw: 600; --type-body-size: 17px; --type-body-lh: 1.5; --type-body-fw: 300; --type-hero-lh: 1.5; } /* ======================================== Reset & Base ======================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--text-primary); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: disc; padding-left: 27px; } ul li { margin-bottom: 8px; } /* ======================================== Utilities ======================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 14px 35px; border-radius: 10px; font-family: var(--font-body); font-weight: 500; font-size: var(--type-body-size); letter-spacing: 0.3px; cursor: pointer; border: none; text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease; } .btn:hover { opacity: 0.9; } .btn-primary { background: var(--primary-orange); color: var(--white); max-width: 300px; } .btn-wide { width: 324px; max-width: 100%; } /* ======================================== Header ======================================== */ .header { padding: 64px 64px; position: sticky; top: 0; z-index: 100; background: var(--bg); } .header-inner { display: flex; align-items: center; gap: 8px; max-width: var(--max-width); margin: 0 auto; } .logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .logo-icon { width: auto; height: 72px; object-fit: contain; } .nav-links { display: flex; flex: 1; gap: 56px; align-items: center; justify-content: flex-end; padding-right: 40px; font-family: var(--font-body); font-size: 16px; color: var(--text-primary); } .nav-links a:hover { color: #D85E37; } .header-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } .header-actions .btn { height: 40px; padding: 0 20px; font-size: 14px; } .header-actions .lang-selector { height: 40px; padding: 0 10px; font-size: 14px; } .lang-selector { display: flex; align-items: center; gap: 8px; height: 56px; padding: 14px 12px; background: var(--white); border: 1px solid var(--border-primary); border-radius: 10px; cursor: pointer; font-family: var(--font-body); font-size: 16px; color: var(--text-primary); letter-spacing: 0.3px; } .globe-icon, .chevron-icon { flex-shrink: 0; } /* On desktop, header-bar is invisible as a box — logo and toggle participate directly in the header-inner flex row */ .header-bar { display: contents; } .mobile-menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .mobile-menu-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } /* ======================================== Hero ======================================== */ .hero { display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 24px var(--section-px) 100px; } .hero-content { display: flex; flex-direction: column; align-items: center; gap: 24px; max-width: 1328px; } .hero-title-group { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .hero-image-wrap { width: 400px; height: 400px; overflow: hidden; } .hero-image { width: 100%; height: 100%; object-fit: contain; } h1 { font-family: var(--font-heading); font-weight: var(--type-h1-fw); font-size: var(--type-h1-size); text-align: center; color: var(--text-primary); line-height: var(--type-h1-lh); } .hero-subtitle { font-size: var(--type-body-size); line-height: var(--type-hero-lh); text-align: center; letter-spacing: 0.3px; color: var(--black); max-width: 1328px; } .badges { display: flex; align-items: center; gap: 17px; justify-content: center; } .badges .store-badge, .badges .btn { flex: 1; min-width: 0; } .store-badge { display: block; height: 56px; transition: opacity 0.2s ease; } .store-badge:hover { opacity: 0.8; } .store-badge img { width: 100%; height: 56px; object-fit: contain; } /* ======================================== Multilingual Strip ======================================== */ .strip { background: #2D2926; overflow-x: hidden; overflow-y: visible; display: flex; align-items: center; height: 64px; direction: ltr; } .strip-track { display: flex; align-items: center; width: max-content; animation: strip-scroll 25s linear infinite; } .strip-track p { font-family: 'Lora', serif; font-style: italic; font-size: 24px; color: var(--white); white-space: nowrap; margin: 0; } /* Multi-script sizing — 24px tier (scaled to 80%) */ .row-24 { display: flex; align-items: center; gap: 19px; } .en-24 { font-family: 'Lora', serif; font-size: 19px; font-weight: 400; line-height: 1.2; } .hi-24, .pa-24, .bn-24, .ta-24 { font-family: 'Noto Sans Devanagari', 'Noto Sans Gurmukhi', 'Noto Sans Bengali', 'Noto Sans Tamil', sans-serif; font-size: 21px; font-weight: 300; line-height: 1.4; } .ur-24 { font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; font-weight: 500; line-height: 2.4; } .ar-24 { font-family: 'Noto Sans Arabic', sans-serif; font-size: 21px; font-weight: 300; line-height: 1.4; } /* Popout hover on strip words */ .strip-track p span { display: inline-block; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; position: relative; z-index: 1; } .strip-track p span:hover { transform: scale(1.35) translateY(-2px); z-index: 10; } /* Multi-script sizing — 20px tier (scaled to 80%) */ .row-20 { display: flex; align-items: center; gap: 14px; } .en-20 { font-family: 'Lora', serif; font-size: 16px; font-weight: 400; line-height: 1.2; } .hi-20, .pa-20 { font-family: 'Noto Sans Devanagari', 'Noto Sans Gurmukhi', sans-serif; font-size: 18px; font-weight: 300; line-height: 1.4; } .ur-20 { font-family: 'Noto Nastaliq Urdu', serif; font-size: 14px; font-weight: 500; line-height: 2.2; } /* Multi-script sizing — 24px tier bold */ .en-24-bold { font-family: 'Lora', serif; font-size: 19px; font-weight: 700; line-height: 1.2; } .hi-24-bold, .pa-24-bold, .bn-24-bold, .ta-24-bold { font-family: 'Noto Sans Devanagari', 'Noto Sans Gurmukhi', 'Noto Sans Bengali', 'Noto Sans Tamil', sans-serif; font-size: 21px; font-weight: 600; line-height: 1.4; } .ur-24-bold { font-family: 'Noto Nastaliq Urdu', serif; font-size: 18px; font-weight: 700; line-height: 2.4; } .ar-24-bold { font-family: 'Noto Sans Arabic', sans-serif; font-size: 18px; font-weight: 700; line-height: 2.4; } /* Multi-script sizing — 20px tier bold */ .en-20-bold { font-family: 'Lora', serif; font-size: 16px; font-weight: 700; line-height: 1.2; } .hi-20-bold, .pa-20-bold { font-family: 'Noto Sans Devanagari', 'Noto Sans Gurmukhi', sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; } .ur-20-bold { font-family: 'Noto Nastaliq Urdu', serif; font-size: 14px; font-weight: 700; line-height: 2.2; } @keyframes strip-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @keyframes strip-scroll-rtl { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ======================================== Shared Section Styles ======================================== */ .section-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--section-py) var(--section-px); } .section-header { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; } .section-icon { object-fit: contain; } .section-icon-clock { width: 300px; height: 300px; } .section-icon-compass { width: 300px; height: 300px; } .section-icon-clinical { width: 300px; height: 300px; } .section-icon-faq { width: 300px; height: 300px; } h2 { font-family: var(--font-heading); font-weight: var(--type-h2-fw); font-size: var(--type-h2-size); color: var(--black); line-height: var(--type-h2-lh); } .section-subtitle { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); max-width: 964px; margin-top: 8px; } /* ======================================== SLP Section (After Hero) ======================================== */ .slp { background: var(--white); border-bottom: 1px solid var(--border-primary); } .slp-inner { max-width: var(--max-width); margin: 0 auto; padding: var(--section-py) var(--section-px); display: flex; gap: 100px; align-items: center; } .slp-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .slp-text-group { display: flex; flex-direction: column; gap: 32px; } .slp-text-group h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); } .slp-body { display: flex; flex-direction: column; gap: 24px; } .slp-subtitle { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); letter-spacing: 0.3px; } .slp-features { list-style: none; padding: 8px; display: flex; flex-direction: column; gap: 32px; } .slp-feature { display: flex; align-items: center; gap: 13px; margin: 0; } .slp-feature-icon { width: 32px; height: 32px; flex-shrink: 0; display: block; } .slp-feature span { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); letter-spacing: 0.3px; } .slp-pilot { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); letter-spacing: 0.3px; } .slp-pilot strong { font-weight: 500; } .slp-image-wrap { flex-shrink: 0; width: 400px; display: flex; align-items: center; justify-content: center; } .slp-app-screenshot { width: 100%; transform: rotate(3.15deg); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); border-radius: 12px; transition: transform 0.4s ease; } .slp-image-wrap.in-view .slp-app-screenshot { transform: rotate(3.15deg) translateY(-6px); } .slp-image-wrap.in-view:hover .slp-app-screenshot { transform: rotate(3.15deg); } /* ======================================== Recovery Section (Section 2) ======================================== */ .recovery { border-bottom: 1px solid var(--border-primary); } .recovery .section-inner { display: flex; flex-direction: column; align-items: center; gap: 64px; } .recovery-cards { display: flex; gap: 48px; width: 100%; } .recovery-card { flex: 1; background: var(--white); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 0; } .recovery-card h3 { margin-top: 0; margin-bottom: 16px; } .recovery-card-image { width: 124px; height: 124px; overflow: hidden; background: var(--white); display: flex; align-items: center; justify-content: center; } .recovery-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; } .recovery-card h3 { font-family: var(--font-heading); font-weight: var(--type-h3-fw); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--black); } .recovery-card p { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); } .recovery-card em { font-style: italic; } /* ======================================== Science Section (Section 3) ======================================== */ .science { background: var(--bg); border-bottom: 1px solid var(--border-primary); } .science .section-inner { display: flex; flex-direction: column; gap: 120px; padding-top: 64px; } .feature-rows { display: flex; flex-direction: column; gap: 200px; } .feature-row { display: flex; align-items: center; gap: 100px; } .feature-row-reverse { flex-direction: row-reverse; } .feature-text { flex: 1; display: flex; flex-direction: column; gap: 14px; } .feature-text h3 { font-family: var(--font-heading); font-weight: var(--type-h3-fw); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--black); } .feature-text p { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); } .feature-visual { width: 549px; height: 417px; border-radius: 16px; position: relative; flex-shrink: 0; overflow: visible; } /* Floating animation (commented out) @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(var(--float-rotate, 0deg)); } 50% { transform: translateY(-4px) rotate(var(--float-rotate, 0deg)); } } @keyframes float-medium { 0%, 100% { transform: translateY(0) rotate(var(--float-rotate, 0deg)); } 50% { transform: translateY(-3px) rotate(var(--float-rotate, 0deg)); } } @keyframes float-fast { 0%, 100% { transform: translateY(0) rotate(var(--float-rotate, 0deg)); } 50% { transform: translateY(-2px) rotate(var(--float-rotate, 0deg)); } } */ /* Purple card - Proven Therapy */ .feature-visual-purple { background: #8a8cde; } .feature-img-left { position: absolute; width: 285px; height: 370px; border-radius: 16px; left: -22px; bottom: -108px; transform: rotate(10.45deg); box-shadow: 0 4px 4px rgba(0,0,0,0.04); transition: transform 0.4s ease; object-fit: cover; } .feature-img-right { position: absolute; width: 273px; height: 370px; border-radius: 16px; top: -32px; right: -36px; transform: rotate(-5.41deg); box-shadow: 0 4px 4px rgba(0,0,0,0.04); transition: transform 0.4s ease; object-fit: cover; } .feature-img-accent { position: absolute; width: 98px; height: 128px; right: 32px; bottom: -61px; transform: scaleX(-1); transition: transform 0.4s ease; } /* Elevated state when scrolled into view */ .feature-visual-purple.in-view .feature-img-left { transform: rotate(10.45deg) translateY(-6px); } .feature-visual-purple.in-view .feature-img-right { transform: rotate(-5.41deg) translateY(-6px); } .feature-visual-purple.in-view .feature-img-accent { transform: scaleX(-1) translateY(-4px); } /* Hover resets to base position */ .feature-visual-purple.in-view:hover .feature-img-left { transform: rotate(10.45deg); } .feature-visual-purple.in-view:hover .feature-img-right { transform: rotate(-5.41deg); } .feature-visual-purple.in-view:hover .feature-img-accent { transform: scaleX(-1); } /* Orange card - Adaptive Learning */ .feature-visual-orange { background: #eeb47e; } .feature-img-center { position: absolute; width: 412px; border-radius: 16px; left: 50%; transform: translateX(-50%); bottom: -40px; box-shadow: 0 4px 4px rgba(0,0,0,0.04); transition: transform 0.4s ease; } .feature-img-decor-left { position: absolute; width: 162px; height: 72px; left: 0; top: 56px; transition: transform 0.4s ease; } /* Elevated state when scrolled into view */ .feature-visual-orange.in-view .feature-img-center { transform: translateX(-50%) translateY(-6px); } .feature-visual-orange.in-view .feature-img-decor-left { transform: translateY(-4px); } /* Hover resets to base position */ .feature-visual-orange.in-view:hover .feature-img-center { transform: translateX(-50%); } .feature-visual-orange.in-view:hover .feature-img-decor-left { transform: none; } /* Green card - Relevant Vocabulary */ .feature-visual-green { background: linear-gradient(135deg, #c8dbbe 0%, #d4dfc8 100%); overflow: visible; } .vocab-img { position: absolute; border-radius: 16px; object-fit: cover; box-shadow: 0 4px 4px rgba(0,0,0,0.04); } .vocab-img { transition: transform 0.4s ease; } .vocab-img-1 { width: 244px; height: 244px; left: -45px; top: -55px; } .vocab-img-2 { width: 242px; height: 242px; left: 246px; top: -137px; } .vocab-img-3 { width: 258px; height: 258px; left: 260px; bottom: -73px; } .vocab-img-4 { width: 91px; height: 99px; left: 32px; bottom: -36px; border-radius: 0; box-shadow: none; } /* Elevated state when scrolled into view */ .feature-visual-green.in-view .vocab-img-1 { transform: translateY(-6px); } .feature-visual-green.in-view .vocab-img-2 { transform: translateY(-4px); } .feature-visual-green.in-view .vocab-img-3 { transform: translateY(-5px); } .feature-visual-green.in-view .vocab-img-4 { transform: translateY(-4px); } /* Hover resets to base position */ .feature-visual-green.in-view:hover .vocab-img-1, .feature-visual-green.in-view:hover .vocab-img-2, .feature-visual-green.in-view:hover .vocab-img-3, .feature-visual-green.in-view:hover .vocab-img-4 { transform: none; } /* Static composite images — hidden on desktop, shown on mobile */ .feature-static { display: none; } .feature-cta { display: flex; justify-content: center; } /* ======================================== Evidence Section (Section 4) ======================================== */ .evidence { border-bottom: 1px solid var(--border-primary); } .evidence .section-inner { display: flex; flex-direction: column; align-items: center; gap: 64px; } .studies { display: flex; flex-direction: column; gap: 56px; max-width: 1062px; width: 100%; } .studies-row { display: flex; gap: 48px; } .study-card { flex: 1; background: var(--white); border: 1px solid var(--border-primary); border-radius: 16px; padding: 24px; transition: background-color 0.2s ease; } .study-card:hover { background-color: #f5f5f5; } .study-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } .study-card-header h3 { flex: 1; font-family: var(--font-heading); font-weight: var(--type-h3-fw); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--black); } .paperclip-icon { flex-shrink: 0; } .study-card p { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); } .slp-cta { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 32px; } .slp-image { width: 150px; height: 150px; object-fit: contain; } .slp-cta p { font-size: var(--type-body-size); line-height: var(--type-body-lh); text-align: center; color: var(--text-primary); max-width: 962px; } .slp-cta a { text-decoration: underline; } .slp-cta a:hover { color: #D85E37; } /* ======================================== Story Section (Section 5) ======================================== */ .story .section-inner { padding-top: 200px; padding-bottom: 100px; position: relative; } .story { border-bottom: 1px solid var(--border-primary); } .story-inner { display: flex; flex-direction: column; align-items: center; } .story-decoration { position: absolute; width: 300px; height: 300px; top: -160px; left: 50%; transform: translateX(-50%); z-index: 3; } .story-card { background: #ffe188; border-radius: 16px; padding: 100px 48px 48px; text-align: center; max-width: 1062px; width: 100%; position: relative; z-index: 2; } .story-card h2 { margin-bottom: 24px; } .story-card p { font-size: var(--type-body-size); line-height: var(--type-body-lh); letter-spacing: 0.3px; color: var(--black); } .story-card p a { color: var(--primary-orange); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s; } .story-card p a:hover { opacity: 0.75; } /* ======================================== FAQ Section (Section 6) ======================================== */ .faq { background: var(--white); } .faq .section-inner { display: flex; flex-direction: column; align-items: center; gap: 64px; } .faq-list { max-width: 800px; width: 100%; display: flex; flex-direction: column; gap: 40px; } .faq-divider { height: 1px; background: var(--border-primary); width: 100%; } .faq-divider:first-child { background: var(--bg); } .faq-item { display: flex; flex-direction: column; } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-heading); font-weight: var(--type-h3-fw); font-size: var(--type-h3-size); line-height: var(--type-h3-lh); color: var(--black); cursor: pointer; user-select: none; } .faq-chevron { flex-shrink: 0; transition: transform 0.3s ease; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease, margin-top 0.35s ease; margin-top: 0; } .faq-item.open .faq-answer { grid-template-rows: 1fr; margin-top: 22px; } .faq-answer-inner { overflow: hidden; } .faq-answer p, .faq-answer div { font-size: var(--type-body-size); line-height: var(--type-body-lh); color: var(--black); } .faq-item a { text-decoration: underline; } /* ======================================== Footer ======================================== */ .footer { background: var(--black); padding: 64px var(--section-px); } .footer-inner { display: flex; flex-direction: column; gap: 32px; max-width: var(--max-width); margin: 0 auto; } .footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-logo { display: flex; align-items: center; gap: 10px; } .footer-logo-icon { width: 79px; height: 62px; object-fit: contain; } .footer-text { display: flex; flex-direction: column; gap: 4px; } .footer-brand { font-family: var(--font-heading); font-weight: 500; font-size: 24px; color: var(--white); } .footer-tagline { font-family: var(--font-body); font-size: 16px; color: var(--white); } .footer-badges { display: flex; gap: 16px; align-items: center; } .footer-badges .store-badge { height: 56px; width: 168px; } .footer-badges .store-badge img { width: 100%; height: 100%; object-fit: contain; } .footer-divider { height: 1px; background: #424242; } .footer-copy { font-family: var(--font-body); font-size: 16px; color: var(--white); } /* ======================================== Responsive — Tablet (< 1400px) ======================================== */ @media (max-width: 1400px) { :root { --section-px: 100px; } .header { padding: 40px var(--section-px); } .nav-links { font-size: 16px; gap: 32px; } .feature-visual { width: 420px; height: 340px; } .feature-row { gap: 60px; } .feature-rows { gap: 120px; } .feature-img-left { width: 220px; height: 285px; bottom: -80px; left: -10px; } .feature-img-right { width: 210px; height: 285px; right: -20px; top: -20px; } .feature-img-center { width: 320px; } .vocab-img-1 { width: 180px; height: 180px; } .vocab-img-2 { width: 180px; height: 180px; top: -100px; } .vocab-img-3 { width: 190px; height: 190px; bottom: -50px; } } /* ======================================== Responsive — Tablet (< 1400px) — SLP ======================================== */ @media (max-width: 1400px) { .slp-inner { gap: 64px; } .slp-image-wrap { width: 380px; } } /* ======================================== Responsive — Small Tablet (< 1024px) ======================================== */ @media (max-width: 1024px) { :root { --section-px: 40px; --section-py: 80px; --type-h1-size: 36px; --type-h2-size: 36px; --type-hero-lh: 28px; } .script-nastaliq { --type-h1-size: 43px; --type-h2-size: 43px; } .script-devanagari { --type-h1-size: 39px; --type-h2-size: 39px; } .script-gurmukhi { --type-h1-size: 39px; --type-h2-size: 39px; } .header { padding: 8px var(--section-px); border-bottom: 1px solid var(--border-primary); } .header-inner { flex-wrap: wrap; } .mobile-menu-toggle { display: flex; margin-left: auto; } .nav-links, .header-actions { display: none; } /* ── Mobile menu overlay ─────────────────────────────── */ .header.menu-open { position: fixed; inset: 0; background: var(--white); z-index: 9999; overflow-y: auto; padding: 0; border-bottom: none; } /* header-inner becomes a flex column — top bar + nav content */ .header.menu-open .header-inner { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 0 20px; max-width: none; margin: 0; } /* Top bar row: logo + close button */ .header.menu-open .header-bar { display: flex; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-primary); flex-shrink: 0; } .header.menu-open .header-bar .logo { flex: 1; } .header.menu-open .mobile-menu-toggle { margin-left: 0; } /* Animate hamburger → X */ .header.menu-open .mobile-menu-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .header.menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; } .header.menu-open .mobile-menu-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Lang selector comes first (order: 1), nav links second (order: 2) */ .header.menu-open .header-actions { display: flex; flex-direction: column; order: 1; gap: 0; padding: 24px 0 0; } .header.menu-open .header-actions .lang-selector { height: auto; padding: 0 0 24px; background: none; border: none; border-radius: 0; border-bottom: 1px solid var(--border-primary); justify-content: flex-start; font-size: 16px; width: 100%; } .header.menu-open .header-actions .lang-selector .chevron-icon { margin-left: auto; } .header.menu-open .nav-links { display: flex; order: 2; padding: 0; flex-direction: column; gap: 0; } .header.menu-open .nav-links a { display: flex; align-items: center; width: 100%; padding: 24px 0; border-bottom: 1px solid var(--border-primary); } .header.menu-open .nav-links a:first-child { padding-top: 0; font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1; } /* CTA button: fixed to viewport bottom, full width */ .header.menu-open .header-actions .btn { position: fixed; bottom: 20px; left: 20px; right: 20px; width: auto; max-width: none; height: 56px; margin: 0; } .slp-inner { flex-direction: column; gap: 48px; } .slp-content { align-items: center; } .slp-image-wrap { order: -1; width: 100%; max-width: 280px; margin: 0 auto; } .slp-text-group h2 { font-size: 32px; } .recovery-cards { flex-direction: column; gap: 24px; max-width: 808px; margin: 0 auto; } .studies-row { max-width: 808px; margin: 0 auto; } .story-card { max-width: 808px; } .science .section-inner { gap: 40px !important; } .feature-row, .feature-row-reverse { flex-direction: column; gap: 8px; } .feature-visual { order: -1; width: 100%; max-width: 549px; height: auto; aspect-ratio: auto; margin: 0 auto; overflow: hidden; border-radius: 16px; } .feature-rows { gap: 80px; } /* Hide composed layout, show static images */ .feature-composed { display: none; } .feature-static { display: block; width: 100%; height: auto; border-radius: 16px; } /* Disable scroll-triggered elevation on mobile */ .feature-visual-purple.in-view .feature-img-left, .feature-visual-purple.in-view .feature-img-right, .feature-visual-purple.in-view .feature-img-accent, .feature-visual-orange.in-view .feature-img-center, .feature-visual-orange.in-view .feature-img-decor-left, .feature-visual-green.in-view .vocab-img-1, .feature-visual-green.in-view .vocab-img-2, .feature-visual-green.in-view .vocab-img-3, .feature-visual-green.in-view .vocab-img-4 { transform: none !important; } /* Disable strip hover on mobile */ .strip-track p span:hover { transform: none; } .feature-visual-purple, .feature-visual-orange, .feature-visual-green { background: none; } .studies { gap: 24px; } .studies-row { flex-direction: column; gap: 24px; } .story .section-inner { padding-top: 120px; } .story-decoration { width: 280px; height: 280px; top: -150px; } } /* ======================================== Responsive — Mobile (< 768px) ======================================== */ @media (max-width: 768px) { :root { --section-px: 20px; --section-py: 40px; --type-h1-size: 40px; --type-h2-size: 32px; --type-h3-lh: 30px; --type-body-lh: 24px; --type-hero-lh: 24px; } .script-nastaliq { --type-h1-size: 48px; --type-h2-size: 38px; } .script-devanagari { --type-h1-size: 44px; --type-h2-size: 35px; } .script-gurmukhi { --type-h1-size: 44px; --type-h2-size: 35px; } .slp-features { gap: 20px; } .slp-feature-icon { width: 24px; height: 24px; } /* Hero */ .hero { padding: 0 var(--section-px) 64px; gap: 40px; } .hero-content { gap: 20px; } .hero-image-wrap { width: 320px; height: 320px; } .hero-title-group { gap: 20px; } .badges { display: flex; flex-wrap: wrap; flex-direction: row; row-gap: 16px; column-gap: 12px; width: 100%; } .badges { flex-direction: column; align-items: center; gap: 16px; } .badges .store-badge, .badges .btn { flex: none; width: 100%; max-width: 300px; } .badges .store-badge img { height: 56px; } .strip { height: 56px; } .strip-track p { font-size: 16px; } .en-24 { font-size: 16px; } .hi-24, .pa-24, .bn-24, .ta-24, .ar-24 { font-size: 18px; } .ur-24 { font-size: 14px; line-height: 2.2; } /* Recovery cards */ .recovery-card { padding: 24px; gap: 0; } .recovery .section-inner { gap: 40px; } .section-header { gap: 0; } /* Science section */ .science .section-inner { padding-top: 24px; gap: 96px; } .feature-rows { gap: 80px; } .feature-row, .feature-row-reverse { flex-direction: column; gap: 24px; } .feature-text { gap: 20px; } .feature-visual { width: 100%; height: auto; order: -1; overflow: hidden; border-radius: 16px; } /* Evidence section */ .evidence .section-inner { gap: 24px; } .studies { gap: 32px; } .studies-row { gap: 32px; } .study-card { padding: 24px; } /* Story section */ .story .section-inner { padding-top: 150px; padding-bottom: 48px; } .story-decoration { width: 280px; height: 280px; top: -150px; z-index: 3; } .story-card { display: flex; flex-direction: column; padding: 128px 24px 24px; gap: 20px; } .story-card h2 { margin-bottom: 0; } /* FAQ section */ .faq .section-inner { padding-top: 40px; padding-bottom: 40px; gap: 32px; } .faq-list { gap: 32px; } .faq-divider:first-child { display: none; } /* Section icons — mobile sizes per Figma */ .section-icon-clock { width: 280px; height: 280px; } .section-icon-compass { width: 280px; height: 280px; } .section-icon-clinical { width: 280px; height: 280px; } .section-icon-faq { width: 280px; height: 280px; } /* Footer */ .footer { padding: 48px var(--section-px); } .footer-top { flex-direction: column; align-items: flex-start; gap: 40px; } .footer-logo { flex-direction: column; align-items: flex-start; } .footer-badges .store-badge { width: 168px; height: 56px; } .btn-wide { width: 100%; max-width: 300px; } } /* ======================================== Language Selector Dropdown ======================================== */ .lang-selector-wrap { position: relative; } .lang-dropdown { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 152px; background: var(--white); border: 1px solid var(--border-primary); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); list-style: none; padding: 6px; margin: 0; z-index: 300; display: none; animation: dropdownFade 0.15s ease; } @keyframes dropdownFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .lang-selector-wrap.open .lang-dropdown { display: block; } .lang-option { display: block; padding: 9px 14px; border-radius: 7px; cursor: pointer; font-size: 14px; font-family: var(--font-body); color: var(--text-primary); transition: background 0.12s; white-space: nowrap; } .lang-option:hover, .lang-option:focus { background: var(--bg); outline: none; } .lang-option-active { font-weight: 600; color: var(--primary-orange); } /* Per-script font in the dropdown */ .lang-option-ur { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; line-height: 1.8; } .lang-option-hi { font-family: 'Noto Sans Devanagari', sans-serif; font-size: 15px; } .lang-option-pa { font-family: 'Noto Sans Gurmukhi', sans-serif; font-size: 15px; } /* ======================================== RTL overrides (Urdu) ======================================== */ [dir="rtl"] .header-inner { flex-direction: row-reverse; } [dir="rtl"] .header-actions { flex-direction: row-reverse; } [dir="rtl"] .nav-links { flex-direction: row-reverse; } [dir="rtl"] .mobile-menu-toggle { margin-inline-start: 0; margin-inline-end: auto; } [dir="rtl"] .faq-question { flex-direction: row; } [dir="rtl"] ul { padding-left: 0; padding-right: 27px; } [dir="rtl"] .footer-top { flex-direction: row-reverse; } [dir="rtl"] .footer-logo { flex-direction: row-reverse; } [dir="rtl"] .section-header { text-align: right; } [dir="rtl"] .recovery-card { text-align: right; } [dir="rtl"] .feature-text { text-align: right; } [dir="rtl"] .slp-cta { text-align: right; } [dir="rtl"] .story-card { text-align: right; } /* ======================================== Urdu language — increased button sizes ======================================== */ [lang="ur"] .btn { height: 60px; } [lang="ur"] .header-actions .btn { height: 48px; } [lang="ur"] .header-actions .lang-selector { height: 48px; } [lang="ur"] .nav-links { font-size: 20px; } /* ======================================== Devanagari (Hindi) body font ======================================== */ body.script-devanagari { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; } body.script-devanagari h1, body.script-devanagari h2, body.script-devanagari h3 { font-family: 'Noto Sans Devanagari', Georgia, serif; font-weight: 600; } /* ======================================== Gurmukhi (Punjabi) body font ======================================== */ body.script-gurmukhi { font-family: 'Noto Sans Gurmukhi', 'Inter', sans-serif; } body.script-gurmukhi h1, body.script-gurmukhi h2, body.script-gurmukhi h3 { font-family: 'Noto Sans Gurmukhi', Georgia, serif; font-weight: 600; } /* ======================================== Reference superscript links & popover ======================================== */ .study-card[data-refs] { cursor: pointer; } .term-tooltip { text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--primary-orange); text-underline-offset: 3px; cursor: pointer; } .asterisk-link { color: var(--primary-orange); text-decoration: none; font-weight: 600; } .asterisk-link:hover { text-decoration: underline; } #term-popover { position: absolute; z-index: 9999; max-width: 240px; background: var(--bg); border: 1px solid var(--border-primary); border-radius: 8px; padding: 10px 14px; box-shadow: 0 4px 20px rgba(45, 41, 38, 0.12); font-family: var(--font-heading); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-primary); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; } #term-popover.visible { pointer-events: auto; opacity: 1; transform: translateY(0); } .supporting-research { display: flex; align-items: center; width: fit-content; gap: 4px; cursor: pointer; color: var(--primary-orange); margin-top: 8px; padding: 2px 10px 2px 8px; border: 1px solid var(--primary-orange); border-radius: 999px; opacity: 0.8; transition: opacity 0.15s, background 0.15s; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.5; } .supporting-research svg { flex-shrink: 0; } .research-label { white-space: nowrap; } .supporting-research:hover { opacity: 1; background: rgba(216, 94, 55, 0.08); } #ref-popover { position: absolute; z-index: 9999; width: 300px; max-height: 320px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border-primary); border-radius: 8px; padding: 20px; box-shadow: 0 4px 20px rgba(45, 41, 38, 0.12); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; } #ref-popover.visible { pointer-events: auto; opacity: 1; transform: translateY(0); } .ref-popover-close { position: static; background: none; border: none; font-size: 18px; line-height: 1; color: var(--text-primary); cursor: pointer; padding: 0; opacity: 0.45; } .ref-popover-close:hover { opacity: 0.9; } .ref-popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .ref-popover-title { font-family: var(--font-heading); font-weight: 500; font-size: 15px; color: var(--text-primary); margin: 0; } .ref-popover-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .ref-popover-list li { margin-bottom: 0; padding: 8px 0 16px; } .ref-popover-list .ref-popover-section-header { font-family: var(--font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary, #6b6560); padding-top: 24px; padding-bottom: 8px; margin-top: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .ref-popover-list .ref-popover-section-header:first-child { padding-top: 0; border-top: none; } .ref-popover-section-header + li { margin-top: 0; } .ref-popover-link { font-family: var(--font-heading); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-primary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; padding-right: 16px; transition: text-decoration-color 0.15s; } .ref-popover-link:hover { text-decoration-color: var(--text-primary); } .ref-popover-text { font-family: var(--font-heading); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--text-primary); } /* Bottom sheet overlay — hidden by default */ #sheet-overlay { display: none; } /* ======================================== Mobile bottom sheet for tooltips/popovers ======================================== */ @media (max-width: 768px) { #sheet-overlay { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(45, 41, 38, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #sheet-overlay.visible { opacity: 1; pointer-events: auto; } #ref-popover { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; max-height: 60vh; overflow-y: auto; border-radius: 16px 16px 0 0; padding: 20px 24px 32px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease; opacity: 1; pointer-events: none; box-shadow: 0 -4px 24px rgba(45, 41, 38, 0.15); } #ref-popover.visible { transform: translateY(0); pointer-events: auto; opacity: 1; } .ref-popover-title { font-size: 17px; } .ref-popover-list { gap: 0; } .ref-popover-list li { padding: 8px 0; } .ref-popover-list .ref-popover-section-header { padding-top: 24px; } .ref-popover-link, .ref-popover-text { font-size: 15px; padding: 8px 0; display: block; } } /* ======================================== Partner with us modal ======================================== */ .partner-modal-overlay { position: fixed; inset: 0; background: rgba(45, 41, 38, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .partner-modal-overlay[hidden] { display: none; } .partner-modal { background: var(--bg); border-radius: 20px; padding: 48px; width: 100%; max-width: 520px; position: relative; box-shadow: 0 24px 64px rgba(45, 41, 38, 0.18); animation: partner-modal-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes partner-modal-in { from { opacity: 0; transform: scale(0.93) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } .partner-modal h2 { font-size: 26px; margin: 0 0 8px; } .partner-modal .slp-subtitle { margin: 0 0 28px; } .partner-modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #9e9590; cursor: pointer; padding: 6px; border-radius: 8px; display: flex; transition: color 0.15s, background 0.15s; } .partner-modal-close:hover { color: var(--text-primary); background: #f0ede7; } .partner-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .partner-field label { font-size: 13px; font-weight: 600; color: var(--text-secondary, #6b6560); letter-spacing: 0.02em; text-transform: uppercase; } .partner-field input, .partner-field textarea { font-family: var(--font-body); font-size: var(--type-body-size); background: var(--white); border: 1.5px solid var(--border-primary); border-radius: 10px; padding: 11px 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; resize: vertical; } .partner-field input::placeholder, .partner-field textarea::placeholder { color: #b5afa9; } .partner-field input:focus, .partner-field textarea:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 3px rgba(216, 94, 55, 0.12); } .partner-submit { width: 100%; max-width: 100%; margin-top: 8px; } .partner-success { text-align: center; padding: 32px 0 8px; font-size: var(--type-body-size); color: var(--text-primary); } .partner-error { font-size: 14px; color: #c0392b; margin-bottom: 12px; } .partner-field-error { font-size: 13px; color: #c0392b; } @media (max-width: 600px) { .partner-modal { padding: 32px 24px; border-radius: 16px; } .partner-modal h2 { font-size: 22px; } } /* ── Toast notification ─────────────────────────────────────────────────── */ .toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: #2d2926; color: #fff; padding: 14px 24px; border-radius: 12px; font-family: var(--font-body); font-size: 15px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 9999; white-space: nowrap; } .toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .toast-icon { width: 20px; height: 20px; background: #27ae60; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 600px) { .toast { bottom: 20px; left: 16px; right: 16px; transform: translateY(20px); white-space: normal; width: calc(100% - 32px); } .toast.toast-visible { transform: translateY(0); } }