/* ========================================================= Cocobolo — Android-style app shell (phones & tablets only) Desktop / large laptop (≥1025px) is completely untouched. ========================================================= */ @media (max-width: 1024px) { :root { --app-bar-h: 56px; --app-nav-h: 64px; --app-teal: #159a95; --app-teal-deep: #0f6e6b; --app-ink: #1a1a1a; --app-surface: #f5f7f7; --app-card: #ffffff; --app-muted: #5a6e6b; --app-line: rgba(0,0,0, 0.1); --app-elev: 0 1px 2px rgba(0,0,0, 0.06), 0 4px 16px rgba(0,0,0, 0.08); --app-safe-b: env(safe-area-inset-bottom, 0px); --app-safe-t: env(safe-area-inset-top, 0px); --header-h: calc(var(--app-bar-h) + var(--app-safe-t)); } html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; overscroll-behavior-y: none; } /* html.is-app is set in so layout reserves space before JS paints */ html.is-app body, body.is-app { background: var(--app-surface); padding-bottom: calc(var(--app-nav-h) + var(--app-safe-b) + 8px); font-family: var(--font-body, "Inter", system-ui, sans-serif); overscroll-behavior: none; overscroll-behavior-y: none; /* Keep fixed chrome relative to the viewport, not a transformed ancestor */ transform: none !important; filter: none !important; perspective: none !important; } html.is-app body.app-sheet-open, body.is-app.app-sheet-open { overflow: hidden; } /* ——— Hide desktop website chrome ——— */ html.is-app .site-header, html.is-app .nav-actions, html.is-app .menu-btn, html.is-app .hero-scroll, html.is-app .backtop, html.is-app .site-footer, html.is-app .floating-wa, body.is-app .site-header, body.is-app .nav-actions, body.is-app .menu-btn, body.is-app .hero-scroll, body.is-app .backtop, body.is-app .site-footer, body.is-app .floating-wa { display: none !important; } html.is-app [data-header] { display: block; height: 0; overflow: hidden; margin: 0; padding: 0; } /* ——— Material top app bar (always solid in app mode) ——— */ .app-topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100vw !important; z-index: 2147483000; height: calc(var(--app-bar-h) + var(--app-safe-t)); padding-top: var(--app-safe-t); display: flex; align-items: center; gap: 10px; padding-left: 12px; padding-right: 8px; background: var(--app-teal); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0, 0.22); transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .app-topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: #fff; text-decoration: none; } .app-topbar__brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.9); background: var(--app-teal-deep); flex-shrink: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); } .app-topbar__titles { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .app-topbar__titles strong { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; } .app-topbar__titles small { font-size: 11px; font-weight: 500; opacity: 0.85; letter-spacing: 0.06em; text-transform: uppercase; } .app-topbar__actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .app-icon-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; text-decoration: none; } .app-icon-btn:active, .app-icon-btn:hover { background: rgba(255, 255, 255, 0.14); } .app-icon-btn svg { width: 22px; height: 22px; display: block; } /* ——— Bottom navigation (pinned to viewport on all phones/tablets) ——— */ .app-bottomnav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100vw !important; margin: 0 !important; z-index: 2147483000; height: calc(var(--app-nav-h) + var(--app-safe-b)); padding-bottom: var(--app-safe-b); display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-top: 1px solid var(--app-line); box-shadow: 0 -6px 24px rgba(0,0,0, 0.1); /* Own compositor layer — stops rubber-band drift with page scroll */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; } .app-bottomnav__item { appearance: none; border: 0; background: transparent; color: var(--app-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; font-size: 11px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; padding: 6px 2px 4px; min-height: var(--app-nav-h); transition: color 0.2s ease; -webkit-user-select: none; user-select: none; } .app-bottomnav__item svg { width: 24px; height: 24px; display: block; } .app-bottomnav__item.active { color: var(--app-teal); } .app-bottomnav__item.active .app-nav-ico { background: rgba(21, 154, 149, 0.12); } .app-nav-ico { width: 56px; height: 28px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; } .app-bottomnav__item:active .app-nav-ico { background: rgba(21, 154, 149, 0.1); } /* ——— More sheet (Material bottom sheet) ——— */ .app-sheet-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 20, 18, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, visibility 0.28s; } .app-sheet-backdrop.open { opacity: 1; visibility: visible; pointer-events: auto; } .app-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1301; max-height: min(78vh, 640px); background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.22); transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; padding-bottom: calc(12px + var(--app-safe-b)); visibility: hidden; pointer-events: none; } .app-sheet.open { transform: none; visibility: visible; pointer-events: auto; } .app-sheet__handle { width: 36px; height: 4px; border-radius: 999px; background: rgba(0,0,0, 0.22); margin: 10px auto 6px; flex-shrink: 0; } .app-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 12px; } .app-sheet__head h2 { margin: 0; font-size: 1.25rem; font-weight: 500; color: var(--app-ink); font-family: var(--font-display, "Inter", system-ui, sans-serif); letter-spacing: -0.01em; } .app-sheet__close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--app-surface); color: var(--app-ink); font-size: 22px; line-height: 1; cursor: pointer; } .app-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 8px; } .app-sheet__section { margin-bottom: 14px; } .app-sheet__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--app-muted); padding: 10px 10px 6px; } .app-sheet__list { display: grid; gap: 4px; } .app-sheet__link { display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 14px; text-decoration: none; color: var(--app-ink); min-height: 52px; transition: background 0.15s ease; } .app-sheet__link:active { background: rgba(255,255,255, 0.08); } .app-sheet__link img, .app-sheet__ico { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--app-teal); } .app-sheet__ico svg { width: 22px; height: 22px; display: block; } .app-sheet__link span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .app-sheet__link strong { font-size: 15px; font-weight: 600; } .app-sheet__link small { font-size: 12px; color: var(--app-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sheet__link .chev { margin-left: auto; color: rgba(0,0,0, 0.35); font-size: 18px; } .app-sheet__brands { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 12px; margin: 0; width: 100%; box-sizing: border-box; align-items: stretch; } .app-sheet__section:has(.app-sheet__brands) { margin: 0 0 8px; width: auto; } .app-sheet__section:has(.app-sheet__brands) .app-sheet__label { padding: 8px 12px; } .app-sheet__brand { width: 100%; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; position: relative; display: block; padding: 0; border-radius: 12px; background: #fff; border: 1px solid var(--app-line); overflow: hidden; text-decoration: none; transition: transform 0.2s ease; box-sizing: border-box; } .app-sheet__brand:active { transform: scale(0.96); } .app-sheet__brand img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; border-radius: 0; display: block; box-sizing: border-box; background: transparent; padding: 0; } .app-sheet__brand:has(img[src*="nejat-logo"]), .app-sheet__brand:has(img[alt="Nejat"]), .app-sheet__brand--gold { background: linear-gradient(145deg, #e8d5a8 0%, #d4bc94 48%, #c4a574 100%) !important; border: 1px solid var(--app-line) !important; } .app-sheet__brand--gold img, .app-sheet__brand:has(img[src*="nejat-logo-clear"]) img { object-fit: contain; padding: 12%; } .app-sheet__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0 16px; } .app-sheet__action { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 68px; padding: 12px 14px; border-radius: 16px; text-decoration: none; overflow: hidden; box-sizing: border-box; transition: transform 0.15s ease, box-shadow 0.2s ease; } .app-sheet__action:active { transform: scale(0.98); } .app-sheet__action-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .app-sheet__action-ico svg { width: 20px; height: 20px; display: block; } .app-sheet__action-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .app-sheet__action-txt strong { font-size: 14px; font-weight: 650; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sheet__action-txt small { font-size: 11px; font-weight: 500; line-height: 1.25; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-sheet__action.call { background: linear-gradient(145deg, #ffffff 0%, var(--app-teal) 48%, var(--app-teal-deep) 100%); color: #fff; box-shadow: 0 8px 20px rgba(255,255,255, 0.22); } .app-sheet__action.call .app-sheet__action-ico { background: rgba(255, 255, 255, 0.16); color: #fff; } .app-sheet__action.wa { background: #fff; color: var(--app-ink); border: 1px solid var(--app-line); box-shadow: 0 4px 14px rgba(0,0,0, 0.05); } .app-sheet__action.wa .app-sheet__action-ico { background: #ffffff; color: var(--app-teal-deep); } .app-sheet__action.wa .app-sheet__action-txt small { color: var(--app-muted); opacity: 1; } /* ——— Content adaptations for app feel ——— */ body.is-app .hero { height: auto; min-height: 0; max-height: none; margin-top: 0; border-radius: 0; overflow: hidden; } /* Active slide flows with content so hero isn't forced to full viewport */ body.is-app .hero-slide { position: absolute; inset: 0; height: auto; min-height: 0; } body.is-app .hero-slide.active { position: relative; inset: auto; height: auto; min-height: 0; } body.is-app .hero-inner { align-items: flex-start; justify-content: flex-start; min-height: 0; height: auto; padding: calc(var(--header-h) + 20px) 0 32px; } body.is-app .hero h1 { font-size: clamp(2rem, 7.5vw, 2.75rem); max-width: 14ch; line-height: 1.08; } body.is-app .hero .brand-mark { font-size: 1.25rem; } body.is-app .hero p { font-size: 0.98rem; max-width: 34ch; } body.is-app .hero .cta-row { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 10px; margin-top: 20px; } body.is-app .hero .cta-row .btn { flex: 1 1 0; width: auto; min-width: 0; border-radius: 14px; min-height: 46px; padding: 10px 10px; font-size: 0.88rem; line-height: 1.2; text-align: center; white-space: normal; } body.is-app .hero-dots { bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); } body.is-app .inner-hero, body.is-app .detail-hero { margin: 0; width: 100%; max-width: none; border-radius: 0; overflow: hidden; box-sizing: border-box; min-height: min(480px, 58svh); padding: calc(var(--app-safe-t) + 72px) 0 48px; display: flex; align-items: flex-end; } body.is-app .inner-hero .container, body.is-app .detail-hero .container { width: min(100% - 32px, 1240px); margin-inline: auto; padding: 0; } body.is-app .premium-orbs { display: none; } body.is-app .platform-card:hover, body.is-app .sector-tile:hover, body.is-app .purpose-card:hover, body.is-app .photo-card:hover { transform: none; } body.is-app .premium-tilt { transform: none !important; } body.is-app .section, body.is-app .page-section { padding: 40px 0; } body.is-app .vision-quote { padding: 32px 24px; } body.is-app .vision-quote:before { font-size: 4.5rem; top: 8px; left: 16px; } body.is-app .container { width: min(100% - 28px, 720px); } body.is-app .btn { border-radius: 14px; min-height: 48px; } body.is-app .platform-card, body.is-app .purpose-card, body.is-app .milestone, body.is-app .sector-tile, body.is-app .feature-card, body.is-app .job-card, body.is-app .service-list article, body.is-app .nejat-tile, body.is-app .photo-card, body.is-app .form-card, body.is-app .contact-panel, body.is-app .contact-form { border-radius: 18px; box-shadow: var(--app-elev); } body.is-app .platforms-board { grid-template-columns: 1fr; gap: 12px; } body.is-app .platform-card { min-height: 0; padding: 20px 18px; } body.is-app .stats { gap: 10px; } body.is-app .stat { background: var(--app-card); border-radius: 16px; padding: 16px 12px; box-shadow: var(--app-elev); text-align: center; } body.is-app .vision-quote { background: var(--app-card); border-radius: 20px; padding: 28px 22px; box-shadow: var(--app-elev); } body.is-app .partner-v36, body.is-app .container.partner-v36 { padding-left: 0; padding-right: 0; } body.is-app .partner-v36 .cta, body.is-app .container.partner-v36 > .cta, body.is-app .cta { border-radius: 18px !important; padding: 28px 22px !important; width: min(100% - 32px, 1240px); max-width: 100%; margin-inline: auto; box-sizing: border-box; } /* Lift chat FAB above bottom nav */ body.is-app #coco-root { right: 14px; bottom: calc(var(--app-nav-h) + var(--app-safe-b) + 14px) !important; } body.is-app .coco-panel { bottom: 76px; max-height: calc(100dvh - var(--app-bar-h) - var(--app-nav-h) - 100px); } } /* Phones: tighter density */ @media (max-width: 640px) { body.is-app .hero-inner { padding-bottom: 28px; } body.is-app .hero h1 { font-size: 2.05rem; } body.is-app .split { gap: 22px; } body.is-app .section.soft .container, body.is-app .platforms-head { text-align: left; } } /* Tablets: two-column where useful, still app chrome */ @media (min-width: 641px) and (max-width: 1024px) { body.is-app .container { width: min(100% - 40px, 860px); } body.is-app .platforms-board { grid-template-columns: repeat(2, 1fr); gap: 14px; } body.is-app .hero-inner { align-items: flex-start; padding-top: calc(var(--header-h) + 28px); } body.is-app .app-sheet { left: 50%; right: auto; width: min(480px, 100%); transform: translate(-50%, 110%); border-radius: 28px 28px 0 0; } body.is-app .app-sheet.open { transform: translate(-50%, 0); } } /* Desktop: never show app chrome */ @media (min-width: 1025px) { .app-topbar, .app-bottomnav, .app-sheet, .app-sheet-backdrop { display: none !important; } }