/* * trisport_custom.css — reguli CSS globale storefront Trisport * * ISTORIC MODIFICARI: * 2026-07-05: Creat. CSS-ul a fost MUTAT aici din * templates/addons/my_changes/hooks/index/scripts.post.tpl deoarece hook-ul * index:scripts NU se randa fiabil pe aceasta instalatie (compiled exista in * var/cache/templates dar output-ul paginilor nu-l includea — registry * thooks stale). Inclus din blocks/static_templates/header-block.tpl langa * meili_search.css, mecanism dovedit functional. Reguli: .tp-blue/.tp-grid-blue * + media queries, .pa-rb-*, .pa-qa-av/.pa-qa-tier, .tl-pp-pill. * 2026-07-05: A11y (WCAG 2.4.11 focus-not-obscured) — scroll-padding-top pe * egal cu inaltimea headerului sticky, ca ancorele/focusul cu tastatura sa nu ramana * ascunse sub header. Nu schimba nimic vizual (afecteaza doar pozitia de scroll). */ /* === A11y: WCAG 2.4.11 — compenseaza headerul sticky la scroll spre ancore/focus === */ html { scroll-padding-top: 110px; } @media (max-width: 767px) { html { scroll-padding-top: 80px; } } /* === Pret Echipa Trisport (text alb pe fundal albastru) === */ .tp-blue, .tp-blue .ty-price, .tp-blue .ty-price-num, .tp-blue .tp-old, .tp-blue s { color:#ffffff !important; } .tp-grid-blue, .tp-grid-blue .ty-price, .tp-grid-blue .ty-price-num { color:#ffffff !important; } /* Grid: badge mai compact pe telefoane inguste (2 produse pe rand) */ @media (max-width: 400px) { .tp-grid-blue { padding:3px 7px !important; gap:3px 5px !important; } .tp-grid-blue img { height:13px !important; } .tp-grid-blue .ty-price, .tp-grid-blue .ty-price-num { font-size:13px !important; } } /* === Badge social-proof la review-uri si Q&A (avatar + nivel fidelitate) === */ .pa-rb { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .pa-rb-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid #e5e7eb; } .pa-rb-tier { color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; display: inline-block; } .pa-qa-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 4px; border: 1px solid #e5e7eb; } .pa-qa-tier { color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; white-space: nowrap; display: inline-block; vertical-align: middle; } /* === Pastila "Primesti ~N puncte" pe pagina de produs (Faza 0 fidelizare) === */ .tl-pp-pill { display: inline-flex; align-items: center; margin-top: 10px; background: #fff8f0; border: 1px solid #fde8cd; color: #92400e; border-radius: 999px; padding: 6px 14px; font-size: 13px; line-height: 1.3; } .tl-pp-pill strong { color: #b45309; } @media (max-width: 767px) { .tl-pp-pill { font-size: 12px; padding: 5px 12px; } } /* Filtru PRODUCATOR ca grila de logo-uri (3/rand, border verde la selectat). 2026-07-07. */ .brand-logo-filter, .brand-logo-filter > li { list-style: none; padding: 0; margin: 0; } .brand-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; } .brand-logo-tile { display: flex; align-items: center; justify-content: center; height: 46px; padding: 8px 10px; margin: 0; box-sizing: border-box; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer; text-decoration: none; transition: border-color .12s, box-shadow .12s; } .brand-logo-tile:hover { border-color: #cbd5e1; text-decoration: none; } .brand-logo-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .brand-logo-tile .brand-logo-txt { font-size: 12px; font-weight: 600; color: #374151; text-align: center; line-height: 1.15; } .brand-logo-tile.selected { border-color: #27ae60; box-shadow: 0 0 0 2px rgba(39,174,96,.18); } .brand-logo-tile.disabled { opacity: .4; cursor: default; pointer-events: none; } .brand-logo-tile input.cm-product-filters-checkbox { display: none; } /* Filtru MARIME "smart" — butoane canonice; marimea din cont evidentiata (albastru, prima). 2026-07-07. */ .size-smart-filter, .size-smart-filter > li { list-style: none; padding: 0; margin: 0; } .size-btn-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; } .size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 38px; padding: 0 10px; margin: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; font-weight: 600; color: #374151; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s, color .12s; } .size-btn:hover { border-color: #cbd5e1; } .size-btn .size-cb { display: none; } .size-btn.selected { border-color: #27ae60; background: #27ae60; color: #fff; } .size-btn.size-account { order: -1; border-color: #0077C8; color: #0077C8; position: relative; } .size-btn.size-account::after { content: '★'; font-size: 9px; position: absolute; top: 2px; right: 4px; line-height: 1; } .size-btn.size-account.selected { background: #0077C8; border-color: #0077C8; color: #fff; } /* Butoane GEN canonice (reuseste .size-btn) — putin mai late pt text. 2026-07-07. */ .size-btn.size-btn-wide { padding: 0 14px; } /* Marime indisponibila in selectia curenta — greyed, neclickabila. 2026-07-08. */ .size-btn.size-disabled { opacity: .35; pointer-events: none; text-decoration: line-through; } /* Bara de progres la navigare (ts_pageloader.js) — feedback intre pagini, mai ales in app. 2026-07-11. */ #ts-pageloader { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #0a84ff; z-index: 2147483000; box-shadow: 0 0 8px rgba(10,132,255,.55); transition: width 8s cubic-bezier(.08,.65,.15,1); pointer-events: none; } #ts-pageloader.go { width: 92%; } /* Acord termeni in checkout — tinta de atingere 44px pe mobil (feedback Sorin 2026-07-11). */ label.cm-check-agreement { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; margin: 0; } label.cm-check-agreement input[name="accept_terms"] { width: 24px; height: 24px; min-width: 24px; margin: 0; cursor: pointer; } label.cm-check-agreement .form-check { display: flex; align-items: center; min-height: 44px; padding: 0; margin: 0; } /* Bara sticky de finalizare in APP (cos) — Apple glass (translucent + blur), flotanta deasupra barei de taburi. 2026-07-11; ajustata la feedback Sorin: mai sus cativa px, un pic transparenta, stil liquid-glass ca in app. */ #ts-app-cart-cta { position: fixed; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); z-index: 9990; display: flex; align-items: center; gap: 12px; background: rgba(22,24,28,.62); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 9px 9px 22px; box-shadow: 0 12px 32px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10); } #ts-app-cart-cta .ts-acc-total { display: flex; flex-direction: column; line-height: 1.15; color: #fff; } #ts-app-cart-cta .ts-acc-total span { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .4px; } #ts-app-cart-cta .ts-acc-total strong { font-size: 17px; font-weight: 700; } #ts-app-cart-cta .ts-acc-btn { margin-left: auto; background: rgba(10,132,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); color: #fff; border-radius: 999px; padding: 12px 24px; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); } /* 2026-07-11: feedback la apasare = portocaliul Trisport (mai vizibil pe telefon) */ #ts-app-cart-cta .ts-acc-btn { transition: background .15s ease, transform .1s ease; } #ts-app-cart-cta .ts-acc-btn:active { background: rgba(250,70,22,.92); border-color: rgba(255,255,255,.3); transform: scale(.97); } body.ts-app-cta-on { padding-bottom: 190px; } /* ============================================================ HEADER SIMPLU IN APLICATIA MOBILA (html.ts-app) — stil eMAG: doar bara de cautare, sticky, pe fundal albastru Trisport. Restul (moneda/limba, hamburger, wishlist, cont, logo, cos, nav categorii) e ascuns — exista in bara de jos a app-ului. 2026-07-11 (cerinta Sorin; UA TrisportApp = iOS + Android). ============================================================ */ html.ts-app #super-top-header, html.ts-app .trm-mobile-bar, html.ts-app #top-header, html.ts-app .pageheader, html.ts-app section.main-menu, html.ts-app #header .logo-mobile-header, html.ts-app #header .stickymobil > .col-4.d-md-none, html.ts-app #header .stickymobil > .order-3, html.ts-app #header .search-header { display: none !important; } /* 2026-07-11 v3 (feedback Sorin): bara LIPITA SUS permanent. v4: position FIXED — sticky era anulat de overflow pe un ancestor (capcana cunoscuta). Compensarea de inaltime se aplica doar pe paginile care au header-ul (body:has). */ html.ts-app #header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; background: #0077C8; padding: 10px 14px 12px; margin: 0; } html.ts-app body:has(#header .mobile-search-overlay) { padding-top: 66px; } html.ts-app #header .stickymobil { margin: 0; position: static !important; } html.ts-app .mobile-search-overlay { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; padding: 0 !important; width: 100%; height: auto !important; } html.ts-app .mobile-search-inner { padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; max-width: none !important; } html.ts-app #mobileSearchInput { background: #fff !important; border: 0 !important; border-radius: 999px !important; height: 44px !important; padding: 0 16px 0 46px !important; font-size: 15px !important; width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.12); } html.ts-app .mobile-search-submit { position: absolute !important; left: 4px !important; right: auto !important; top: 0 !important; transform: none !important; background: transparent !important; border-radius: 0 !important; height: 44px !important; width: 42px !important; display: flex; align-items: center; justify-content: center; color: #6b7280 !important; font-size: 16px; z-index: 2; } html.ts-app .mobile-search-close { display: none !important; } /* 2026-07-11 v5 (feedback Sorin): bara de cautare DOAR la navigarea prin site — in cos/checkout si in tot ce tine de cont (client, loyalty, login PIN) pagina incepe direct, fara banda albastra. Body-ul are clasa dispatch--. */ html.ts-app body[class*="dispatch-checkout-"] #header, html.ts-app body[class*="dispatch-quickcheckout-"] #header, html.ts-app body[class*="dispatch-client-"] #header, html.ts-app body[class*="dispatch-loyalty-"] #header, html.ts-app body[class*="dispatch-pack_account-"] #header, html.ts-app body[class*="dispatch-pack_auth-"] #header { display: none !important; } html.ts-app body[class*="dispatch-checkout-"], html.ts-app body[class*="dispatch-quickcheckout-"], html.ts-app body[class*="dispatch-client-"], html.ts-app body[class*="dispatch-loyalty-"], html.ts-app body[class*="dispatch-pack_account-"], html.ts-app body[class*="dispatch-pack_auth-"] { padding-top: 0 !important; } /* 2026-07-17: in APP, pe paginile de cont/checkout (header deja ascuns) scoatem si breadcrumb-ul ("Pagina Start" nu are sens cu tab bar) + spatiul mort de sus — pagina incepe direct cu continutul, sub status bar (safe-area). */ html.ts-app body[class*="dispatch-checkout-"] [id^="breadcrumbs_"], html.ts-app body[class*="dispatch-quickcheckout-"] [id^="breadcrumbs_"], html.ts-app body[class*="dispatch-client-"] [id^="breadcrumbs_"], html.ts-app body[class*="dispatch-loyalty-"] [id^="breadcrumbs_"], html.ts-app body[class*="dispatch-pack_account-"] [id^="breadcrumbs_"], html.ts-app body[class*="dispatch-pack_auth-"] [id^="breadcrumbs_"] { display: none !important; } html.ts-app body[class*="dispatch-client-"] .container-fluid:first-of-type, html.ts-app body[class*="dispatch-client-"] main, html.ts-app body[class*="dispatch-loyalty-"] main { padding-top: 0 !important; margin-top: 0 !important; } html.ts-app body[class*="dispatch-client-"] { padding-top: env(safe-area-inset-top, 0px) !important; } html.ts-app body[class*="dispatch-loyalty-"] { padding-top: env(safe-area-inset-top, 0px) !important; } /* 2026-07-17 (2): spatiul alb ramas sus in app pe cont/cos = WRAPPERUL
(containere cu padding + border-bottom-mob) ramanea vizibil — regula veche ascundea doar #header dinauntru. Ascundem tot. */ html.ts-app body[class*="dispatch-checkout-"] main.page-container > header.header, html.ts-app body[class*="dispatch-quickcheckout-"] main.page-container > header.header, html.ts-app body[class*="dispatch-client-"] main.page-container > header.header, html.ts-app body[class*="dispatch-loyalty-"] main.page-container > header.header, html.ts-app body[class*="dispatch-pack_account-"] main.page-container > header.header, html.ts-app body[class*="dispatch-pack_auth-"] main.page-container > header.header { display: none !important; } html.ts-app body[class*="dispatch-checkout-"] main.page-container, html.ts-app body[class*="dispatch-client-"] main.page-container, html.ts-app body[class*="dispatch-loyalty-"] main.page-container { padding-top: 0 !important; margin-top: 0 !important; } /* 2026-07-17 (3): ultimul strat de spatiu sus in app (masurat cu sonda headless: ~60px NE-safe-area) = padding/margin pe .main-content-grid / .mainbox-container / .page-header (gol, dar cu margini). Zero pe toate, doar in app, pe cont/cos. */ html.ts-app body[class*="dispatch-checkout-"] .main-content-grid, html.ts-app body[class*="dispatch-quickcheckout-"] .main-content-grid, html.ts-app body[class*="dispatch-client-"] .main-content-grid, html.ts-app body[class*="dispatch-loyalty-"] .main-content-grid, html.ts-app body[class*="dispatch-pack_account-"] .main-content-grid, html.ts-app body[class*="dispatch-pack_auth-"] .main-content-grid { padding-top: 0 !important; margin-top: 0 !important; } html.ts-app body[class*="dispatch-checkout-"] .mainbox-container, html.ts-app body[class*="dispatch-client-"] .mainbox-container, html.ts-app body[class*="dispatch-loyalty-"] .mainbox-container, html.ts-app body[class*="dispatch-pack_account-"] .mainbox-container, html.ts-app body[class*="dispatch-pack_auth-"] .mainbox-container { padding-top: 0 !important; margin-top: 0 !important; } html.ts-app body[class*="dispatch-checkout-"] .page-header, html.ts-app body[class*="dispatch-client-"] .page-header, html.ts-app body[class*="dispatch-loyalty-"] .page-header, html.ts-app body[class*="dispatch-pack_account-"] .page-header, html.ts-app body[class*="dispatch-pack_auth-"] .page-header { display: none !important; } /* 2026-07-17 (4): "degetul" de spatiu ramas = section.content { margin-top:62px } (masurat computat cu sonda iframe). Zero in app pe cont/cos/puncte. */ html.ts-app body[class*="dispatch-checkout-"] section.content, html.ts-app body[class*="dispatch-quickcheckout-"] section.content, html.ts-app body[class*="dispatch-client-"] section.content, html.ts-app body[class*="dispatch-loyalty-"] section.content, html.ts-app body[class*="dispatch-pack_account-"] section.content, html.ts-app body[class*="dispatch-pack_auth-"] section.content { margin-top: 0 !important; }