/* ========================================================================== Ezseen — device architecture layer Loaded AFTER ezseen.css. It does not restyle Ezseen; it re-arranges Ezseen. Visual identity (graphite + purple, glass cards, depth, Vazirmatn) is untouched. Tiers, set by core.js on : full desktop / laptop — full 3D hover, tilt, all decorative layers reduced tablet, coarse pointer, mid-power — shallower depth, fewer layers light phones, low-power, save-data, prefers-reduced-motion — static depth Breakpoint ladder (content-driven, not device-name-driven): ≤360 small phone ≤430 large phone ≥600 phablet ≥768 tablet portrait ≥1024 tablet landscape / small laptop ≥1280 desktop ≥1680 large desktop ========================================================================== */ /* ---------------------------------------------------------------- 0. Guards */ /* No element may widen the document. Components that genuinely need width scroll inside themselves (see .admin-table wrapper and .filter-tabs). */ html, body { max-width: 100%; overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } *, *::before, *::after { min-width: 0; } img, video, canvas, svg, iframe { max-width: 100%; } pre, code, td, th { overflow-wrap: anywhere; } /* Long Persian/English strings (emails, URLs, project titles) must wrap, not push. */ .specialist-name, .specialist-bio, .profile-name, .collab-request-value, .chat-message, .dashboard-item-title, .dashboard-item-desc, .admin-item, .user-dropdown-item, .toast-title, .toast-desc { overflow-wrap: anywhere; } /* Real viewport height on mobile browsers with collapsing toolbars. */ :root { --app-vh: 1vh; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } @supports (height: 100dvh) { :root { --app-vh: 1dvh; } } /* ------------------------------------------------------- 1. Page containers */ .navbar-content { max-width: 1400px; } @media (min-width: 1680px) { .section { max-width: 1560px; margin-inline: auto; } .navbar-content { max-width: 1560px; } .specialists-grid { grid-template-columns: repeat(4, minmax(260px, 1fr)); } .hero-title { font-size: clamp(56px, 4vw, 76px); } .hero-subtitle { max-width: 62ch; margin-inline: auto; } .section-subtitle { max-width: 70ch; margin-inline: auto; } } @media (min-width: 1280px) and (max-width: 1679px) { .specialists-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); } } /* ------------------------------------- 2. Tablet — a layout of its own */ /* Tablets are NOT large phones: they keep multi-column content and a compact desktop navigation, but lose fixed desktop sidebars and hover-only affordances. */ @media (min-width: 769px) and (max-width: 1024px) { .navbar-content { height: 62px; padding-inline: 20px; } .nav-links { gap: 2px; } .nav-link { font-size: 13px; padding: 8px 9px; } .section { padding: 56px 28px; } .hero { padding: 110px 28px 64px; } .hero-title { font-size: clamp(36px, 5.2vw, 52px); } .specialists-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: 20px; } .pricing-grid { grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 16px; } .pricing-card { padding: 26px 18px; } /* Dashboard: sidebar narrows instead of squeezing the workspace. */ .dashboard-content { padding: 24px 22px; } .dashboard-tabs { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .dashboard-tabs::-webkit-scrollbar { display: none; } .dashboard-tab { flex-shrink: 0; scroll-snap-align: start; } .dashboard-stats { grid-template-columns: repeat(2, 1fr); } .info-grid { grid-template-columns: repeat(2, 1fr); } /* Messaging keeps the split view, with a narrower list. */ .chat-layout { grid-template-columns: minmax(220px, 30%) 1fr; } /* Admin keeps tables, but they scroll inside their own card. */ .admin-content { padding: 20px; } .admin-nav { overflow-x: auto; scrollbar-width: none; } .admin-nav::-webkit-scrollbar { display: none; } .admin-tab { flex-shrink: 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); } } /* Tablet portrait specifically: single-column profile, two-column cards. */ @media (min-width: 769px) and (max-width: 900px) and (orientation: portrait) { .profile-content { max-width: 720px; margin-inline: auto; } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } } /* Tablet landscape: recover a third column where the content supports it. */ @media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) { .specialists-grid { grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 16px; } .portfolio-grid { grid-template-columns: repeat(3, 1fr); } } /* The intro scroll sequence is a desktop-pointer experience only. */ @media (max-width: 1024px) { .intro-wrapper { display: none !important; } .main-site { opacity: 1 !important; visibility: visible !important; } } /* ------------------------------------------- 3. Phones — structural rewrite */ @media (max-width: 768px) { /* Sticky search under the navbar so Explore stays usable while scrolling. */ #explore .search-container { position: sticky; top: calc(56px + var(--safe-t)); z-index: 40; padding-block: 8px; background: color-mix(in srgb, var(--graphite-950) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-inline: -16px; padding-inline: 16px; } /* Bottom navigation owns the safe area; content clears it. */ .bottom-nav { padding-bottom: calc(6px + var(--safe-b)); } .main-site { padding-bottom: calc(64px + var(--safe-b)); } .back-to-top { bottom: calc(78px + var(--safe-b)); } /* Full-screen flows: chat, dashboard, profile, collaborations, admin. They take the real viewport height and respect notches. */ .chat-page, .dashboard-page, .profile-page, .collab-list-page, .admin-panel { height: calc(var(--app-vh) * 100); max-height: calc(var(--app-vh) * 100); padding-top: var(--safe-t); } /* Messaging becomes list → conversation → back, never two columns. */ .chat-layout { display: block; height: 100%; } .chat-sidebar, .chat-list { width: 100%; } .chat-area { height: 100%; } .chat-back-btn { display: inline-flex !important; } .chat-input-area { position: sticky; bottom: 0; padding-bottom: calc(10px + var(--safe-b)); background: var(--graphite-900); } [data-theme="light"] .chat-input-area { background: #ffffff; } /* When the on-screen keyboard is open, core.js swaps --app-vh, so the composer stays above it instead of being pushed off-screen. */ body.keyboard-open .bottom-nav { display: none !important; } body.keyboard-open .chat-input-area { padding-bottom: 10px; } /* Modals become bottom sheets / near-full-screen flows. */ .modal.active { align-items: flex-end; } .modal-content { width: 100%; max-width: 100%; max-height: calc(var(--app-vh) * 92); border-radius: 22px 22px 0 0; padding-bottom: calc(20px + var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .collab-modal .modal-content, .review-modal .modal-content { max-height: calc(var(--app-vh) * 96); } /* Specialist profile: sticky primary action so the CTA never gets buried under portfolio and reviews. */ .profile-content { padding-bottom: calc(92px + var(--safe-b)); } .profile-content .profile-cta-sticky { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + var(--safe-b)); background: color-mix(in srgb, var(--graphite-900) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--purple-glow); z-index: 30; } [data-theme="light"] .profile-content .profile-cta-sticky { background: rgba(255,255,255,0.94); border-top-color: rgba(124,58,237,0.16); } .profile-cta-sticky .btn { width: 100%; } /* Admin: dense tables become stacked cards. No page-level horizontal scroll. */ .admin-table { display: block; border: 0; } .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .admin-table tbody { display: block; } .admin-table tr { display: block; border: 1px solid var(--graphite-700); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--graphite-850); } [data-theme="light"] .admin-table tr { background: #ffffff; border-color: #e5e5ea; } .admin-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; text-align: start; font-size: 13px; } .admin-table td::before { content: attr(data-label); color: var(--graphite-300); font-weight: 600; flex-shrink: 0; } .admin-table td:empty { display: none; } /* Collaboration + dashboard cards stack cleanly. */ .collab-request-body { grid-template-columns: 1fr; } .collab-request-actions { flex-wrap: wrap; } .collab-request-actions .btn { flex: 1 1 46%; } .dashboard-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 430px) { .collab-request-actions .btn { flex: 1 1 100%; } .dashboard-stats { grid-template-columns: 1fr; } } /* 320px: the floor. Nothing may overflow here. */ @media (max-width: 360px) { .hero-title { font-size: clamp(22px, 7.6vw, 26px); } .section { padding: 36px 12px; } #explore .search-container { margin-inline: -12px; padding-inline: 12px; } .navbar-content { gap: 3px; } .btn { padding-inline: 12px; } .modal-content { padding: 16px 12px calc(16px + var(--safe-b)); } .bottom-nav-item { font-size: 9px; padding-inline: 6px; } } /* ------------------------------------------- 4. Forms on touch devices */ /* 16px is the threshold below which iOS Safari zooms on focus. Zoom itself stays enabled for the user (see the viewport meta) — this only stops the involuntary zoom-on-focus. */ @media (max-width: 1024px) { input, select, textarea, .form-input, .form-select, .form-textarea, .chat-input, .search-input { font-size: 16px; } .form-input, .form-select, .form-textarea { min-height: 46px; } .form-group { margin-bottom: 16px; } label, .form-label { display: block; margin-bottom: 6px; } } /* Focus must always be visible and must never sit under a fixed bar. */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--purple-primary); outline-offset: 2px; border-radius: 6px; } :where(input, select, textarea) { scroll-margin-bottom: 120px; scroll-margin-top: 90px; } /* ------------------------------------- 5. Touch: no hover-only affordances */ /* Hover transforms and reveals apply only to real pointers. */ @media not all and (hover: hover) and (pointer: fine) { .specialist-card:hover, .pricing-card:hover, .step-card:hover, .portfolio-item:hover, .info-card:hover, .stat-card:hover { transform: none !important; } /* Anything revealed on hover is permanently visible for touch. */ .portfolio-overlay, .dashboard-profile-avatar-overlay, .admin-visual-actions { opacity: 1 !important; visibility: visible !important; transform: none !important; } } /* Minimum comfortable target size everywhere, not just in the nav. */ @media (hover: none) and (pointer: coarse) { button, [role="button"], a.btn, .filter-tab, .dashboard-tab, .admin-tab, .collab-filter-tab, .user-dropdown-item, .bottom-nav-item { min-height: 44px; } .icon-btn { min-width: 44px; min-height: 44px; } .toggle-switch { min-width: 48px; min-height: 28px; } } /* ---------------------------------- 6. Progressive 3D / performance tiers */ /* full — unchanged: this is the design as authored. */ /* reduced — tablets and mid-power machines: shallower depth, fewer moving layers. */ html[data-tier="reduced"] .orb { filter: blur(60px); opacity: 0.12; animation-duration: 34s; } html[data-tier="reduced"] .orb-4 { display: none; } html[data-tier="reduced"] .particle:nth-child(n+11) { display: none; } html[data-tier="reduced"] .specialist-card:hover, html[data-tier="reduced"] .pricing-card:hover { transform: translateY(-4px); } html[data-tier="reduced"] .card-3d, html[data-tier="reduced"] [style*="perspective"] { perspective: 1400px; } /* light — phones and low-power devices. The visual language survives: the purple gradient depth, the glass surfaces and the shadows all remain. What goes is the continuous GPU cost: big animated blurs and per-frame particles. */ html[data-tier="light"] .orb { animation: none; filter: blur(44px); opacity: 0.14; width: 300px; height: 300px; } html[data-tier="light"] .orb-3, html[data-tier="light"] .orb-4 { display: none; } html[data-tier="light"] .floating-particles, html[data-tier="light"] .intro-particles { display: none; } html[data-tier="light"] .navbar, html[data-tier="light"] .user-dropdown, html[data-tier="light"] .modal-content { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-tier="light"] .specialist-card, html[data-tier="light"] .pricing-card, html[data-tier="light"] .dashboard-card { /* static depth instead of animated depth — same silhouette, no repaint cost */ transform: none; box-shadow: 0 6px 20px rgba(20, 12, 45, 0.14); } [data-theme="light"] html[data-tier="light"] .specialist-card { box-shadow: 0 6px 20px rgba(88, 56, 180, 0.10); } html[data-tier="light"] .specialist-card:active { transform: scale(0.99); } /* The user's own preference always wins over every tier above. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .orb, .particle, .floating-particles, .intro-particles { display: none !important; } .intro-wrapper { display: none !important; } .main-site { opacity: 1 !important; visibility: visible !important; } } /* ------------------------------------------------------- 7. Misc hardening */ /* Locally-scrollable wide content, so the page itself never scrolls sideways. */ .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* Screen-reader-only utility used by the skip link and table headers. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100000; padding: 10px 16px; border-radius: 0 0 12px 12px; background: var(--purple-deep); color: #fff; font-weight: 600; transition: top 0.2s; } .skip-link:focus { top: 0; } /* Demo-data banner: only visible while no backend is configured. */ .demo-banner { position: relative; z-index: 900; margin: 0; padding: 10px 16px calc(10px); text-align: center; font-size: 13px; font-weight: 600; color: #7c2d12; background: #fef3c7; border-bottom: 1px solid #fbbf24; } html:not([data-backend="unconfigured"]) .demo-banner { display: none; } .demo-chip { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; background: #fbbf24; color: #451a03; vertical-align: middle; } html:not([data-backend="unconfigured"]) .demo-chip { display: none; } /* Print: drop the decorative layers entirely. */ @media print { .orb, .bg-orbs, .floating-particles, .bottom-nav, .navbar, .back-to-top { display: none !important; } body { background: #fff; color: #000; } } /* ===== v5 mobile integrity patch ===== */ @media (max-width: 768px) { html, body { max-width: 100%; overflow-x: clip; } .main-site, main, section, .section, .container, .navbar-content, .hero-content, .specialists-grid, .pricing-grid, .dashboard-content, .profile-content, .chat-page, .collab-list-page, .admin-panel { min-width: 0; max-width: 100%; } h1, h2, h3, h4, p, span, label, button, a, .btn, .form-label, .specialist-name, .specialist-bio, .pricing-name, .pricing-feature, .dashboard-item, .collab-request-card, .chat-message { overflow-wrap: anywhere; word-break: normal; white-space: normal; } .navbar { min-height: 56px; } .navbar-content { padding-inline: 10px; gap: 6px; } .navbar-actions { gap: 4px; min-width: 0; } .navbar-actions .btn { padding-inline: 10px; font-size: 12px; } .hero { padding-inline: 14px; } .hero-title { line-height: 1.3; letter-spacing: -0.02em; } .hero-subtitle { line-height: 1.9; } .specialists-grid, .pricing-grid, .steps-grid, .portfolio-grid, .info-grid { grid-template-columns: 1fr !important; } .specialist-card, .pricing-card, .step-card, .dashboard-card, .info-card { width: 100%; min-width: 0; } .filters, .filter-tabs, .dashboard-tabs, .admin-nav, .collab-filter-tabs { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .modal-content { box-sizing: border-box; } .form-row, .form-grid { grid-template-columns: 1fr !important; } input, select, textarea, .form-input, .form-select, .form-textarea { width: 100%; max-width: 100%; box-sizing: border-box; } .toast-container { left: 10px; right: 10px; width: auto; } .toast { max-width: 100%; min-width: 0; } } @media (max-width: 430px) { .navbar-actions .btn-secondary { display: none; } .section { padding-inline: 12px; } .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .hero-actions .btn { width: 100%; } }