/* ============================================================ CHAAVLE — Design Enhancement Layer v2 Loaded after Tailwind. Overrides and refines base styles. ============================================================ */ /* ============================================================ [hidden] — ერთხელ და ყველასთვის ------------------------------------------------------------ ბრაუზერის `[hidden] { display: none }` მისი *საკუთარი* სტილია, ანუ ავტორის ნებისმიერი წესი მას აჯობებს თანაბარი სპეციფიკურობითაც კი. შედეგად ყოველი კლასი, რომელიც `display`-ს აყენებს (`display: flex`, `inline-flex`, `grid`), ჩუმად აუქმებს `hidden` ატრიბუტს: JS წერს `el.hidden = true`, ელემენტი კი ეკრანზე რჩება. ეს ხაფანგი ამ ფაილში უკვე სამჯერ იყო ცალკე გასწორებული (`#chaavle-dialog[hidden]`, `.chaavle-dialog-list[hidden]`, `.chaavle-emoji-panel[hidden]`, `.chaavle-dialog-btn[hidden]`) და მეოთხედ `.results-meta`-ზე გამეორდა: მრიცხველის რიგს `hidden` ეწერა, `display: flex` კი მას აჩვენებდა — სუფთა კატალოგზე „გასუფთავების" ღილაკი ისედაც ჩანდა. ერთი წესი მთელ კლასს ხურავს. `!important` აქ საჭიროა სწორედ იმიტომ, რომ ის ავტორის სხვა წესებს უნდა აჯობოს — `hidden` ატრიბუტს სხვა განზრახვა არ აქვს, ის ყოველთვის „არ აჩვენო"-ს ნიშნავს. ⚠ ეს არ ეხება Tailwind-ის `.hidden` *კლასს* — ის ცალკე რამაა. ქვემოთ დარჩენილი ცალკეული `[hidden]` წესები ახლა ზედმეტია, მაგრამ განზრახ რჩება: ისინი ზიანს არ აყენებენ და მათი წაშლა იმ კომპონენტების ხელახლა შემოწმებას მოითხოვდა. ============================================================ */ [hidden] { display: none !important; } /* ============================================================ VIEWPORT LOCK — HARD STOP ON HORIZONTAL OVERFLOW ------------------------------------------------------------ ეს ბლოკი ფაილში პირველია განზრახ: `!important` მას ისედაც ანიჭებს უმაღლეს პრიორიტეტს, მაგრამ ადრეული პოზიცია აქ იმასაც ნიშნავს, რომ ეს არის პირველი წესი, რასაც ბრაუზერი კითხულობს — არცერთ შემდეგ განზრახვას (ან შემთხვევით მოხვედრილ ფართო ელემენტს) არ შეუძლია მთელი გვერდის ჰორიზონტალურად სქროლვადობა. რატომ იყო საჭირო: `overflow-x: hidden` აქამდე მხოლოდ ცალკეულ გვერდებზე (index.html-ის `body`-ზე) ან მხოლოდ `html.is-native-app` სკოუფში იდგა — ანუ არასდროს იყო გარანტირებული ბაზისური დაცვა. თუ ჰედერში, bottom sheet-ში თუ სხვაგან ერთი ელემენტიც კი ვიზუალურად გასცდება viewport-ს, ბრაუზერი მთელ დოკუმენტს ჰორიზონტალურად სქროლვადს გახდის — ეს არის ის ეფექტი, როცა თითის შეხებაზე მთელი გვერდი "იძვრება" და header-ი კიდეზე იჭრება. `overflow-x: hidden` ამ შესაძლებლობას საძირკვლიდან კვეთს: შიდა ელემენტმა შეიძლება კვლავ სცადოს გაფართოება, მაგრამ ეს ვეღარასდროს გახდის დოკუმენტს სქროლვადს — უბრალოდ ვიზუალურად შეიჭრება (რაც თავისთავად კვლავ ხარვეზია), მაგრამ არ გამოიწვევს გვერდის მთლიან "გადაცურებას". ⚠ REGRESSION FIX (მომდევნო ვერსია): პირველ ვარიანტში ეს წესი `html, body { overflow-x: hidden }` იყო — ანუ `overflow-x` პირდაპირ ``-საც ედებოდა. ეს კლავდა ვერტიკალურ სქროლსაც, არა მხოლოდ ჰორიზონტალურს, და ეს არ იყო შემთხვევითობა, არამედ დოკუმენტირებული Chromium/WebView ქცევა: ბრაუზერი (და მასზე დაფუძნებული Android System WebView, რომელშიც Capacitor-ის აპი ეშვება) ირჩევს ერთ ელემენტს, რომელიც რეალურად პასუხობს გვერდის სქროლს ("root scroller"). სტანდარტული, ათწლეულების განმავლობაში მოქმედი წესია: `` თავად რჩება `overflow: visible` (ანუ ხელუხლებლად), ხოლო ``-ზე დასმული overflow მნიშვნელობა ავტომატურად "ინაცვლებს" ზემოთ, viewport-ზე (CSS Overflow Module-ის "overflow propagation" მექანიზმი). როცა `overflow-x` საკუთარ თავზე, პირდაპირ ``-ს მივეცი, ეს პროპაგაცია გავტეხე — root-ი აღარასოდეს ჩანდა "სუფთა/ნაგულისხმევ" მდგომარეობაში, WebView-მ ვეღარ დაადგინა ცალსახად, ვინ არის რეალური scroll container, და შედეგად საერთოდ არცერთმა ღერძმა ვეღარ იმუშავა. ფიქსი: `overflow-x` მხოლოდ `body`-ზე რჩება (სადაც სპეციფიკაციითვე მოსალოდნელია და გამართულად მუშაობს), ``-ს overflow საერთოდ აღარ ეხება — მისი სიგანის/viewport-ის კონტროლი მთლიანად `body`-ს overflow-ის პროპაგაციაზეა დამოკიდებული, როგორც ბრაუზერისთვის ბუნებრივია. `overflow-y: auto` აქ განზრახ ცხადადაა ჩაწერილი და არ არის დატოვებული ბრაუზერის ნაგულისხმევ გამოთვლაზე (`visible` → `auto` ავტომატური კონვერტაცია overflow-x-თან წყვილში) — ორაზროვნება საერთოდ არ რჩება. */ ⚠ `100vw` განზრახ აღარ გამოიყენება (იყო წინა ვერსიაში): `100vw` არის viewport-ის სრული სიგანე ვერტიკალური სქროლბარის ჩათვლით, ხოლო `html`-ის რეალური სიგანე სქროლბარის გარეშეა. ანუ `max-width: 100vw` სქროლბარიან ეკრანზე ელემენტს viewport-ზე რამდენიმე პიქსელით უფრო განიერს ხდის — თავად ხდება ჰორიზონტალური overflow-ის წყარო. cutout-იან (notch) ეკრანებზე `viewport-fit=cover`- თან ერთად იგივე პრობლემაა. `100%` მშობლის რეალურ სიგანეს ეყრდნობა და ამ ხაფანგს საერთოდ არ ქმნის. */ html { width: 100%; max-width: 100%; } body { overflow-x: hidden !important; overflow-y: auto !important; width: 100% !important; max-width: 100% !important; position: relative; } /* Preflight (Tailwind-ის ბაზისური რესეტი) ამასაც აკეთებს, მაგრამ ეს ვერსია პირველი იტვირთება და არცერთ პირობაზე არ არის დამოკიდებული — მუშაობს მაშინაც კი, თუ `dist/tailwind.css` რაიმე მიზეზით ვერ ჩაიტვირთა (ქსელის შეცდომა, ძველი ქეში build-ის წინ). box-sizing-ის გარეშე padding/border ემატება დეკლარირებულ სიგანეს ზემოთ — ეს ზუსტად ის მექანიზმია, რომლითაც ერთი პიქსელით ზედმეტი padding მთელ სვეტს viewport-ს გარეთ გამოსწევს. */ *, *::before, *::after { box-sizing: border-box; } /* --- Main wrapper containment ------------------------------ `overflow-x: hidden` on html/body stops the DOCUMENT from becoming scrollable, but a fixed header row (flex, `justify-between`, no wrap) can still refuse to shrink below its content's width — by default a flex item's minimum width is `auto` (its own content size), not 0. That silently defeats `flex-shrink` on every sibling and is the single most common cause of "header icons pushed off the left edge" on a narrow phone. `min-width: 0` overrides that default so these rows can actually compress instead of forcing width. `max-width: 100%` is the same clamp as the html/body rule, scoped down to the wrappers that actually define page width. */ header, nav, main, .nav-glass, #main-header { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* NOT included above: `#account-cluster` is a content-sized pill (it shares the header row with the vendor CTA), not a full-width wrapper — forcing `width: 100%` on it would stretch the pill across the whole row and break its layout. It only needs the shrink-fix, not the width lock. */ header .flex, nav .flex, #main-header .flex, #account-cluster { min-width: 0; max-width: 100%; box-sizing: border-box; } /* --- დეკორატიული glow ლაქები -------------------------------- `
` 500px სიგანისაა — 360px-იან ტელეფონზე ეკრანს 140px-ით სცდება. `position: fixed` ჩვეულებრივ დოკუმენტის სქროლის არეს არ ზრდის, ამიტომ ვებზე ეს უვნებელი იყო; მაგრამ როგორც კი რომელიმე წინაპარს transform გაუჩნდება, fixed ელემენტი ჩვეულებრივ absolute-ად იქცევა და overflow-ში სრულად ითვლება. ეს ზუსტად ის სცენარი იყო, რომელიც page-transition-ის transform-მა შექმნა. ახლა ის ბაგი აღმოფხვრილია, მაგრამ ლაქებს მაინც ვზღუდავთ: ისინი წმინდა დეკორაციაა (`pointer-events: none`, `filter: blur(110px)`), ანუ ეკრანზე მოჭრა მათ ვიზუალურად არაფერს აკლებს, სამაგიეროდ ერთი პოტენციური overflow-წყარო სამუდამოდ იხურება. */ .glow { max-width: 100%; max-height: 100%; } /* --- Skeleton loaders (universal — web AND app) ------------- */ /* Shared by any page that wants a shimmering placeholder instead of a blank/text loading state — currently index.html's product grid. Not gated behind html.is-native-app: a loading skeleton is strictly better than plain text everywhere, not an app-only nicety. */ .skeleton-block { position: relative; overflow: hidden; background: rgba(51, 65, 85, 0.4); } .skeleton-block::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: skeletonShimmer 1.6s ease-in-out infinite; } @keyframes skeletonShimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .skeleton-block::after { animation: none; } } /* --- Root canvas ------------------------------------------- */ /* WHITE-FLASH FIX: ფონი ყველა გვერდზე მხოლოდ `body`-ზე იყო აყენებული, `html`-ზე — არსად. მაგრამ დოკუმენტის ჩანაცვლებისას (და სქროლის საზღვრებს გარეთ) ბრაუზერი სწორედ `html`-ის ფონს ხატავს, რაც ნაგულისხმევად თეთრია. სწორედ ეს იყო გვერდებს შორის გადასვლის თეთრი აფეთქება. `background-color` მემკვიდრეობით არ გადადის, ამიტომ ორივეზე ცალკე უნდა იდგეს. */ html { background-color: #0B1121; } /* --- Typography ------------------------------------------- */ body { line-height: 1.65; letter-spacing: -0.01em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { letter-spacing: -0.028em; line-height: 1.15; } p { text-wrap: pretty; } /* --- Glass Effects — Premium Frosted ---------------------- */ .glass-card, .glass-form, .glass-panel, .prod-card, .val-card, .ticket-card, .res-card, .section-card { backdrop-filter: blur(28px) saturate(165%) !important; -webkit-backdrop-filter: blur(28px) saturate(165%) !important; } .glass-card, .glass-form, .prod-card, .val-card, .res-card { background: rgba(10, 16, 34, 0.58) !important; border: 1px solid rgba(255, 255, 255, 0.055) !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } .glass-panel { background: rgba(10, 16, 34, 0.72) !important; border: 1px solid rgba(255, 255, 255, 0.055) !important; } .ticket-card { background: rgba(10, 16, 34, 0.62) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; } .nav-glass { background: rgba(7, 11, 24, 0.92) !important; backdrop-filter: blur(32px) saturate(180%) !important; -webkit-backdrop-filter: blur(32px) saturate(180%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; } /* --- Button CTA — Tactile, color-locked ------------------- */ .btn-cta { background: linear-gradient(148deg, #FCD34D 0%, #FBBF24 42%, #D97706 100%) !important; color: #0a0a0a !important; font-weight: 900 !important; position: relative; overflow: hidden; isolation: isolate; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease !important; text-shadow: none !important; } .btn-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, transparent 55%); pointer-events: none; z-index: 1; border-radius: inherit; } .btn-cta:hover { transform: translateY(-3px) !important; box-shadow: 0 20px 40px -8px rgba(251, 191, 36, 0.45), 0 6px 16px -4px rgba(251, 191, 36, 0.22) !important; color: #0a0a0a !important; } .btn-cta:active { transform: translateY(0px) scale(0.98) !important; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2) !important; } .btn-cta:disabled, .btn-sold { background: #1E293B !important; color: #475569 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed !important; pointer-events: none !important; } .btn-cta:disabled::before { display: none; } /* --- Button Ghost ----------------------------------------- */ .btn-ghost { color: #FBBF24 !important; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } .btn-ghost:hover { background: rgba(251, 191, 36, 0.14) !important; border-color: rgba(251, 191, 36, 0.5) !important; color: #FBBF24 !important; transform: translateY(-1px) !important; box-shadow: 0 0 24px rgba(251, 191, 36, 0.1) !important; } .btn-ghost:active { transform: scale(0.98) !important; } /* --- Product / Value Cards — Lift + Glow ------------------ */ /* HOVER SMOOTHING v4: matches index.html's inline .prod-card/.val-card rule exactly (same 1s cubic-bezier) — this file loads after that inline