/* /anteprima/ booking-style experiment. Scoped to its own pages. */ /* Fixed teal palette (same across all five brands). Defined on :root so the shared header partial works anywhere anteprima.css is loaded — including the /idee/ embed pages, whose is NOT .anteprima-body. None of these names clash with the V2 embed vars (--navy/--gold/--ink/--cream). */ :root { --brand: #0e5c63; --dp-accent: #0e5c63; --ap-navy: #0b3439; --ap-navy-600: #0e5c63; --ap-gold: #fe4209; --ap-hero-accent: #ffd23f; --ap-cream: #f6f1e8; --ap-cream-200: #ece2d0; --ap-ink: #182629; --ap-ink-soft: #405256; --ap-ink-faint: #808e92; --ap-success: #22865f; } .anteprima-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ap-ink, #182629); background: var(--ap-cream, #f6f1e8); } .anteprima-body * { box-sizing: border-box; } .anteprima-body h1, .anteprima-body h2, .anteprima-body h3 { margin: 0; } /* Header */ .ap-header { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid #e9edf2; } .ap-header-inner { max-width: 1180px; margin: 0 auto; padding: 0 1rem; height: 64px; display: flex; align-items: center; justify-content: space-between; } .ap-logo img { height: 38px; } .ap-logo span { font-weight: 800; color: var(--brand); } .ap-nav { display: flex; align-items: center; gap: 1.25rem; } .ap-nav > a { color: #344; text-decoration: none; font-weight: 600; font-size: 16px; } .ap-nav > a:hover { color: var(--brand); } .ap-login { background: var(--brand); color: #fff !important; padding: .5rem .9rem; border-radius: 8px; } .ap-nav-dd { position: relative; } .ap-nav-dd-btn { background: none; border: none; font-weight: 600; color: #344; cursor: pointer; font-size: 16px; } .ap-nav-dd-menu { position: absolute; top: 130%; right: 0; min-width: 260px; max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid #e9edf2; border-radius: 10px; box-shadow: 0 14px 34px rgba(15,23,42,.16); padding: .4rem; display: none; } .ap-nav-dd:hover .ap-nav-dd-menu { display: block; } .ap-nav-dd-menu a { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem .6rem; border-radius: 7px; color: #344; text-decoration: none; font-size: 16px; } .ap-nav-dd-menu a:hover { background: #f4f6f9; } .ap-nav-dd-menu a em { color: #94a3b8; font-style: normal; } .ap-dd-loading { display: block; padding: .6rem; color: #94a3b8; font-size: 16px; } /* Hero */ .ap-hero { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; background: var(--ap-navy, #0b3439) center/cover no-repeat; color: #fff; padding: 4rem 1rem; } .ap-hero-inner { position: relative; max-width: 1040px; width: 100%; text-align: center; } /* Type scales with the viewport. This was a flat 2.9rem, which rendered at 46px/800 on a 390px phone: three wrapped lines of display type before the search bar, which is the thing people actually came for. The clamp floor keeps it emphatic without letting it own the fold on small screens. One text-shadow, not two — the section already carries a radial + linear scrim (see landing.html), so the second, wider shadow was doing nothing except muddying the letterforms. */ .ap-hero h1 { font-size: clamp(1.9rem, 5.2vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(3,18,22,.5); } .ap-hero h1 span { color: var(--ap-hero-accent, #ffd23f); } /* warm gold reads better on the photo than the CTA orange */ .ap-hero p { font-size: clamp(1rem, 2.4vw, 1.18rem); font-weight: 600; opacity: 1; margin: .7rem auto 1.8rem; max-width: 62ch; text-shadow: 0 1px 5px rgba(3,18,22,.6); } .ap-hero-search { display: flex; gap: .6rem; background: #fff; padding: .65rem; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); align-items: flex-end; } .ap-field { text-align: left; } .ap-field-grow { flex: 1; } .ap-field label { display: block; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0 0 .25rem .2rem; } .ap-field select, .ap-field input { width: 100%; border: 1px solid #e2e8f0; border-radius: 9px; padding: .65rem .75rem; font-size: 16px; color: #1a1a2e; } .ap-hero-stats { margin-top: 1.6rem; display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; } .ap-hero-stats span { font-size: 16px; opacity: 1; text-shadow: 0 1px 3px rgba(3,18,22,.5), 0 2px 12px rgba(3,18,22,.5); } .ap-hero-stats strong { color: var(--ap-hero-accent, #ffd23f); font-weight: 800; margin-right: .25rem; } /* Buttons */ .ap-btn { border: none; cursor: pointer; border-radius: 9px; padding: .6rem 1rem; font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: .45rem; } .ap-btn-hero { background: var(--brand); color: #fff; padding: .7rem 1.4rem; font-size: 1rem; } .ap-btn-block { width: 100%; justify-content: center; } .ap-btn-info { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; width: 100%; justify-content: center; } .ap-btn-ghost { background: var(--ap-gold); color: #fff; border: 1.5px solid var(--ap-gold); font-size: 1rem; } .ap-btn-ghost:hover { filter: brightness(.95); } .ap-link { background: none; border: none; color: var(--brand); cursor: pointer; font-weight: 600; font-size: 16px; } /* Search-bar actions (Reset + Cerca) — bottom-aligned with the fields; reset matches the Cerca button's height. Reset is deliberately quieter than Cerca. It used to carry .ap-btn-ghost — the gold primary-CTA class — so the button that THROWS AWAY what you typed wore a brighter fill than the one that runs the search, at nearly the same width. It no longer shares that class (see _search_bar.html), so these rules stand alone and no brand's !important override reaches them. */ .ap-search-actions { display: flex; gap: .5rem; align-items: flex-end; } /* Padding is short by the border width so Reset and Cerca end up the same height — Cerca has no border, and a 2px taller Reset reads as misaligned. */ .ap-search-reset { padding: calc(.7rem - 1px) calc(1.1rem - 1px); font-size: 1rem; background: transparent; color: #55606e; border: 1px solid #dbe2ea; font-weight: 600; } .ap-search-reset:hover { background: #f4f6f9; color: #1a1a2e; border-color: #c8d2de; } .ap-search-reset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Strips */ /* width:100% — .anteprima-body is a flex column (sticky footer); without it margin:0 auto suppresses flex stretch and the section shrink-wraps to its content (made the ispirazione tiles tiny). Same fix as .ap-forn-wrap. */ .ap-strip-section { width: 100%; max-width: 1280px; margin: 3rem auto; padding: 0 1rem; } .ap-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.2rem; } .ap-section-eyebrow { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: .2rem; } .ap-section-head h2 { font-size: 1.7rem; font-weight: 800; } .ap-seeall { color: var(--brand); font-weight: 700; text-decoration: none; font-size: 16px; white-space: nowrap; } .ap-seeall:hover { text-decoration: underline; } .ap-strip-loading { color: #94a3b8; padding: 2rem 0; } /* Card */ .ap-card { background: #fff; border: 1px solid #e9edf2; border-radius: 14px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; } .ap-card:hover { box-shadow: 0 12px 28px rgba(15,23,42,.14); transform: translateY(-2px); } .ap-card-img { height: 150px; background: #dde3ea center/cover no-repeat; position: relative; } .ap-badge { position: absolute; top: .5rem; padding: .2rem .5rem; border-radius: 6px; font-size: 13px; font-weight: 800; color: #fff; } .ap-badge-lm { left: .5rem; background: #ef4444; } .ap-badge-on { right: .5rem; background: #10b981; } .ap-card-body { padding: .75rem .85rem; } .ap-card-tip { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); } .ap-card-title { font-size: 16px; font-weight: 700; margin: .25rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ap-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; } .ap-card-priceline { display: inline-flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; } .ap-card-price { font-weight: 800; color: #1a1a2e; } /* Non-person clarifier (apartment/room). Amber so a whole-unit total doesn't read as a suspiciously cheap per-person price. */ .ap-card-per { font-size: 14px; font-weight: 700; color: #b45309; } /* Carousel (Offerte Speciali) — exactly 3 cards per view */ .ap-carousel { display: flex; align-items: stretch; gap: .8rem; } .ap-carousel-viewport { flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; } .ap-carousel-viewport::-webkit-scrollbar { display: none; } .ap-carousel-track { display: flex; gap: 1.2rem; padding: .4rem; } .ap-carousel-track .ap-bc { flex: 0 0 calc((100% - 2.4rem) / 3); scroll-snap-align: start; } .ap-carousel-arrow { flex: 0 0 auto; align-self: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; color: #334; cursor: pointer; box-shadow: 0 6px 16px rgba(15,23,42,.12); font-size: 1rem; transition: all .15s; } .ap-carousel-arrow:hover { color: var(--brand); border-color: var(--brand); transform: scale(1.06); } /* Rich carousel card */ .ap-bc { box-sizing: border-box; display: flex; flex-direction: column; background: #fff; border: 1px solid #e9edf2; border-radius: 16px; overflow: hidden; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .ap-bc:hover { box-shadow: 0 16px 36px rgba(15,23,42,.16); transform: translateY(-3px); border-color: #dbe3ec; } .ap-bc-img { position: relative; height: 180px; background: #dde3ea center/cover no-repeat; } /* ===== In-card image carousel (only when an offer has >1 image) ===== */ .ap-cimg-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; background: rgba(15,23,42,.42); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .78rem; opacity: 0; transition: opacity .15s, background .15s; } .ap-cimg-prev { left: 8px; } .ap-cimg-next { right: 8px; } .ap-cimg-arrow:hover { background: rgba(15,23,42,.7); } .ap-card-img:hover .ap-cimg-arrow, .ap-bc-img:hover .ap-cimg-arrow, .ap-row-img:hover .ap-cimg-arrow { opacity: 1; } .ap-cimg-dots { position: absolute; bottom: 8px; left: 0; right: 0; z-index: 4; display: flex; gap: 5px; justify-content: center; pointer-events: none; } .ap-cimg-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.45); transition: background .15s; } .ap-cimg-dot.on { background: #fff; } /* Touch devices have no hover — keep the arrows visible. */ @media (hover: none) { .ap-cimg-arrow { opacity: 1; } } .ap-bc-badge { position: absolute; top: .6rem; padding: .26rem .55rem; border-radius: 7px; font-size: 13px; font-weight: 800; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .ap-bc-badge-lm { left: .6rem; background: #ef4444; } .ap-bc-badge-disc { right: .6rem; top: auto; bottom: .6rem; background: #059669; } .ap-bc-body { padding: 1.2rem 1.15rem 1.35rem; display: flex; flex-direction: column; flex: 1; } .ap-bc-tip { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); } .ap-bc-book { font-size: 16px; font-weight: 700; display: inline-flex; align-self: flex-start; align-items: center; gap: .4rem; padding: .34rem .7rem; border-radius: 999px; margin-bottom: .85rem; line-height: 1.2; } .ap-bc-book i { flex-shrink: 0; } .ap-bc-book.on { color: #047857; background: #ecfdf5; } .ap-bc-book.off { color: #b45309; background: #fffbeb; } /* Fixed 2-line title height so the location line (and everything below it) starts at the same y across cards → no eye jump. */ .ap-bc-title { font-size: 1.05rem; font-weight: 800; line-height: 1.25; margin: .45rem 0 .35rem; color: #1a1a2e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; } .ap-bc-dest { color: #475569; font-size: 16px; margin-bottom: .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.15em; } .ap-bc-dest i { color: var(--brand); margin-right: .2rem; } .ap-bc-desc { color: #64748b; font-size: 16px; line-height: 1.45; margin: 0 0 .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Standardised trip facts — three fixed rows (durata / trattamento / trasporti), always present so every card lines up. Empty slots keep their height (no placeholder text) so the tag/price/Dettagli below never slide up. */ .ap-bc-facts { display: flex; flex-direction: column; gap: .32rem; margin: .1rem 0 .55rem; } .ap-bc-fact { display: flex; align-items: center; gap: .5rem; color: #475569; font-size: 16px; font-weight: 600; line-height: 1.3; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-bc-fact i { color: #94a3b8; width: 1rem; text-align: center; flex-shrink: 0; } .ap-bc-fact-muted { color: #aab4c1; font-weight: 500; } .ap-bc-fact-muted i { color: #cbd3dd; } .ap-bc-fact-empty { min-height: 1.3em; } /* reserved blank slot */ /* Departures — its own line, always reserved (blank when unknown). */ .ap-bc-when { display: flex; align-items: center; gap: .5rem; color: #334155; font-size: 16px; font-weight: 700; line-height: 1.3; min-height: 1.3em; margin: 0 0 .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-bc-when i { color: var(--brand); width: 1rem; text-align: center; flex-shrink: 0; } .ap-bc-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; } .ap-bc-price { display: flex; flex-direction: column; line-height: 1.1; } .ap-bc-orig { color: #94a3b8; text-decoration: line-through; font-size: 15px; } .ap-bc-lbl { color: #1a1a2e; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; } /* Discount tag next to the price amount (green pill, matches the image badge). */ .ap-bc-amt-wrap { display: inline-flex; align-items: center; gap: .45rem; } .ap-bc-pdisc { background: #16a34a; color: #fff; font-weight: 800; font-size: 16px; padding: .18rem .55rem; border-radius: 7px; letter-spacing: .02em; } .ap-bc-amt { font-size: 1.4rem; font-weight: 800; color: #1a1a2e; } /* Non-person clarifier under the amount (apartment/room) — see .ap-card-per. */ .ap-bc-per { font-size: 14px; font-weight: 700; color: #b45309; margin-top: .1rem; } .ap-bc-cta { color: var(--brand); font-weight: 700; font-size: 16px; white-space: nowrap; } @media (max-width: 980px) { .ap-carousel-track .ap-bc { flex: 0 0 calc((100% - 1.2rem) / 2); } } @media (max-width: 640px) { .ap-carousel-track .ap-bc { flex: 0 0 86%; } } /* Skeletons — keep the card/row shape so there's no layout jump */ .ap-bc-skel, .ap-row-skel { cursor: default; } .sk { background: linear-gradient(90deg, #eef1f5 25%, #f6f8fb 50%, #eef1f5 75%); background-size: 200% 100%; animation: apShimmer 1.2s ease-in-out infinite; } @keyframes apShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-line { height: 12px; border-radius: 6px; margin: .65rem 0; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; } .sk-btn { height: 38px; border-radius: 9px; margin-top: .6rem; } .ap-bc-skel .ap-bc-img.sk { background-color: #eef1f5; } .ap-bc-skel .sk-foot { height: 32px; border-radius: 8px; margin-top: 1rem; } /* Results row skeleton */ .ap-row-skel .ap-row-img.sk { background-color: #eef1f5; } .ap-row-skel .ap-row-main { padding: 1.2rem 1.25rem; } .ap-row-skel .ap-row-side { gap: 0; } .ap-accent { color: var(--brand); } /* ===== Perché viaggiare con noi (the core) ===== */ .ap-why { background: linear-gradient(180deg, var(--ap-cream-200), var(--ap-cream)); padding: 4rem 1rem; margin-top: 1rem; } .ap-why-inner { max-width: 1100px; margin: 0 auto; text-align: center; } .ap-why-inner h2 { font-size: 2.3rem; font-weight: 800; line-height: 1.15; margin: .2rem 0 .5rem; } .ap-why-sub { color: #5b6676; font-size: 1.15rem; margin: 0 auto 2.6rem; max-width: 640px; } .ap-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; text-align: left; } .ap-why-card { display: flex; flex-direction: column; gap: .2rem; background: #fff; border: 1px solid #e6ecf3; border-radius: 18px; padding: 1.8rem 1.9rem; box-shadow: 0 8px 24px rgba(15,23,42,.05); } .ap-why-ic { width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .ap-why-card h3 { font-size: 1.45rem; font-weight: 800; color: #1a1a2e; margin: 0 0 .4rem; line-height: 1.2; } .ap-why-card p { color: #5b6676; font-size: 1rem; line-height: 1.55; margin: 0; } /* ===== Come funziona (spacious vertical flow) ===== */ .ap-how { max-width: 900px; margin: 4.5rem auto; padding: 0 1rem; text-align: center; } .ap-how-head { margin-bottom: 2.8rem; } .ap-how h2 { font-size: 2.1rem; font-weight: 800; margin: .2rem 0 0; } .ap-flow { display: flex; flex-direction: column; gap: 1.4rem; text-align: left; } .ap-flow-row { display: flex; align-items: center; gap: 1.8rem; background: #fff; border: 1px solid #e9edf2; border-radius: 18px; padding: 1.8rem 2rem; box-shadow: 0 6px 20px rgba(15,23,42,.05); } .ap-flow-row:nth-child(even) { flex-direction: row-reverse; } .ap-flow-visual { position: relative; flex: 0 0 auto; } .ap-flow-num { width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #000)); color: #fff; font-size: 2.1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 35%, transparent); } .ap-flow-ic { position: absolute; right: -10px; bottom: -10px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid #e9edf2; color: var(--brand); font-size: 1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(15,23,42,.1); } .ap-flow-text { flex: 1; } .ap-flow-text h3 { font-size: 1.55rem; font-weight: 800; color: #1a1a2e; margin: 0 0 .4rem; line-height: 1.2; } .ap-flow-text p { color: #5b6676; font-size: 1.05rem; line-height: 1.55; margin: 0; } /* Closing band */ .ap-how-band { margin-top: 3rem; background: linear-gradient(135deg, var(--ap-navy), var(--ap-navy-600)); color: #fff; border-radius: 20px; padding: 2.4rem 2.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; flex-wrap: wrap; box-shadow: 0 18px 40px rgba(11,52,57,.28); } .ap-how-band h3 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .3rem; } .ap-how-band p { margin: 0; opacity: .9; } .ap-how-band .ap-btn-hero { background: var(--ap-gold); color: #fff; font-size: 1.05rem; padding: .85rem 1.6rem; } .ap-how-band .ap-btn-hero:hover { background: #f7895f; } @media (max-width: 880px) { .ap-why-grid { grid-template-columns: 1fr; } .ap-why-inner h2 { font-size: 1.9rem; } .ap-flow-row, .ap-flow-row:nth-child(even) { flex-direction: row; gap: 1.2rem; padding: 1.3rem 1.4rem; } .ap-flow-num { width: 60px; height: 60px; font-size: 1.7rem; border-radius: 18px; } .ap-flow-text h3 { font-size: 1.3rem; } .ap-how-band { flex-direction: column; text-align: center; } } /* Tipologia widget (reuses .dest-picker look) */ .ap-tip .dp-row { display: flex; align-items: center; } .ap-tip .ap-tip-count { margin-left: auto; color: #94a3b8; font-size: 13px; padding-left: .5rem; } /* Leading category icon (semantic name from the API mapped to FontAwesome). */ .ap-tip .ap-tip-ic { flex: 0 0 auto; width: 1.5rem; text-align: center; margin-right: .55rem; color: var(--brand, #e6007e); } .ap-tip .ap-tip-ic i { font-size: .98em; opacity: .9; } /* Section headers: "I Più Ricercati" / "Altri". */ .ap-tip .ap-tip-sec { padding: .7rem .8rem .35rem; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #94a3b8; } .ap-tip .ap-tip-pop .dp-name { font-weight: 700; } /* "Altri" — flat rows (grouped order, but no macro headers / indentation). */ .ap-tip .ap-tip-alt .dp-name { color: var(--ap-ink-soft, #475569); font-weight: 500; } /* "Diretto" chip — direct-booking tipologie (Volo / Volo+Hotel / Hotel) open the trasporti modal instead of searching. Also used in the header dropdown. */ .ap-tip .ap-tip-direct, .ap-nav-direct { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #0e7a3b; background: #e7f6ee; border: 1px solid #b7e4c9; padding: .1rem .42rem; border-radius: 999px; white-space: nowrap; } .ap-tip .ap-tip-direct { margin-left: auto; } .ap-nav-direct { display: inline-block; margin-left: auto; vertical-align: middle; font-size: 13px; padding: .06rem .38rem; } #apHeroTipMount, #apEditTipMount, .ap-tip { width: 100%; } /* Span the full width of the trigger bar above (never clipped off the left edge). */ .ap-tip .dest-picker-panel { left: 0; right: 0; width: auto; max-width: 90vw; z-index: 1300; } /* 2-level macro → sub rows — always expanded, indentation only (no chevrons). */ .ap-tip .ap-tip-mrow { font-weight: 700; } .ap-tip .ap-tip-child { padding-left: 1.35rem; font-weight: 500; } .ap-tip .ap-tip-child .dp-name { color: var(--ap-ink-soft, #475569); } .ap-tip .ap-tip-child-flat { padding-left: 1.1rem; } /* Children now carry their own leading icon, so the old ↳ arrow is dropped to avoid double cues — indentation + icon convey the hierarchy. */ .ap-tip .ap-tip-empty { padding: .6rem .8rem; color: #94a3b8; font-size: .85rem; } /* Destination cascade: break the (wide, multi-column) panel out of its narrow trigger and span the whole search bar so it never overflows the viewport. */ .ap-hero-search, .ap-results-edit { position: relative; } .ap-hero-search #destPicker, .ap-results-edit #destPicker { position: static; } .ap-hero-search #destPickerPanel, .ap-results-edit #destPickerPanel { left: 0; right: 0; width: auto; top: calc(100% + 8px); } /* "Tutto il mondo" — a selectable root entry standing for the whole-world scope, styled like any cascade row but with an accent globe glyph. */ #destPicker .dp-row-world .dp-ico i { color: var(--dp-accent, #e6007e); } #destPicker .dp-row-world .dp-name { font-weight: 600; } /* Always-open results top bar */ .ap-results-edit { align-items: flex-end; flex-wrap: wrap; padding-top: .85rem; } .ap-edit-field { display: flex; flex-direction: column; gap: .25rem; } .ap-edit-field > label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; } .ap-edit-field-tip { flex: 0 0 240px; } .ap-edit-field-grow { flex: 1; min-width: 220px; } /* 0-count filter — greyed out, not clickable */ .ap-check.is-disabled { opacity: .42; cursor: not-allowed; } .ap-check.is-disabled input { cursor: not-allowed; } /* Loading veil while resolving + opening an offer's page */ #ap-nav-loading { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(246,241,232,.78); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .15s ease; } #ap-nav-loading.on { opacity: 1; pointer-events: all; } .ap-nl-spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid rgba(14,92,99,.18); border-top-color: rgb(14,92,99); animation: apSpin .8s linear infinite; } @keyframes apSpin { to { transform: rotate(360deg); } } .ap-nl-txt { color: var(--ap-ink-soft, #405256); font-weight: 700; font-size: 1rem; } /* Offer modal presented as a right-side sliding PAGE on anteprima (offers that aren't published /idee pages). Same content, page-like feel + back button. */ .anteprima-body #redirectModalLogin .modal-dialog, .anteprima-body #redirectModalLogin .modal-dialog-centered { margin: 0 0 0 auto; max-width: 960px; width: 96vw; min-height: 100%; align-items: stretch; } .anteprima-body #redirectModalLogin .modal-content { min-height: 100vh; border-radius: 0; border: none; } .anteprima-body #redirectModalLogin.modal.fade .modal-dialog { transform: translateX(64px); transition: transform .32s ease; } .anteprima-body #redirectModalLogin.modal.show .modal-dialog { transform: translateX(0); } /* Make the "Ritorna alla ricerca" action read as the primary back button. */ .anteprima-body #redirectModalLogin .offer-modal-back { background: rgb(14,92,99); border-color: rgb(14,92,99); color: #fff; } .anteprima-body #redirectModalLogin .offer-modal-back:hover { background: rgb(21,118,126); color: #fff; } /* Footer */ .ap-footer { background: var(--ap-navy); color: #cbd5e1; margin-top: 3rem; } .ap-footer-inner { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1rem; display: flex; justify-content: space-between; font-size: 16px; } .ap-footer a { color: #ffd23f; text-decoration: none; } /* ===== Results page ===== */ /* Reuse the exact hero search card on a cream band. NOT sticky: the search bar scrolls away together with the header (the page scrolls as one consistent layout) instead of the header leaving while the search stayed pinned. */ .ap-results-topbar { background: var(--ap-cream, #f6f1e8); border-bottom: 1px solid #e7e0d2; padding: .9rem 1rem; } .ap-results-topbar .ap-hero-search { max-width: 1440px; margin: 0 auto; } .ap-results-topbar-inner { max-width: 1440px; margin: 0 auto; padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; } .ap-top-summary { display: flex; gap: .5rem; flex-wrap: wrap; } .ap-top-chip { background: #f1f5f9; border-radius: 999px; padding: .35rem .8rem; font-weight: 600; font-size: 13px; color: #334; } .ap-results-edit { max-width: 1440px; margin: 0 auto; padding: 0 1rem .8rem; display: flex; gap: .6rem; align-items: center; } .ap-results-edit select, .ap-results-edit input { border: 1px solid #e2e8f0; border-radius: 9px; padding: .6rem .7rem; } .ap-results-edit input { flex: 1; } .ap-results-layout { width: 100%; max-width: 1440px; margin: 1.4rem auto; padding: 0 1rem; display: grid; grid-template-columns: 300px 1fr; gap: 1.6rem; align-items: start; } .ap-filters { background: #fff; border: 1px solid #e9edf2; border-radius: 14px; padding: 1rem 1.1rem; } .ap-filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; } .ap-filters-head h3 { font-size: 1.1rem; } .ap-filter-group { border-top: 1px solid #eef2f6; padding: .85rem 0; } .ap-filter-group h4 { font-size: 15px; text-transform: uppercase; letter-spacing: .03em; color: #64748b; margin-bottom: .55rem; } .ap-price-row { display: flex; align-items: center; gap: .4rem; } .ap-price-row input { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: .5rem; } .ap-check { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-size: 16px; cursor: pointer; } .ap-check em { margin-left: auto; color: #94a3b8; font-style: normal; font-size: 15px; } /* Trattamento multi-select — dynamic checkbox list; scrolls if it grows long. */ .ap-treatments { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; } .ap-treatments .ap-check span { text-transform: capitalize; } .ap-op-search { width: 100%; box-sizing: border-box; margin-bottom: .5rem; padding: .4rem .6rem; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 16px; } .ap-operators { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; } .ap-facet-list { max-height: 260px; overflow-y: auto; } .ap-results-main { min-width: 0; } .ap-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; } .ap-results-count { font-weight: 700; color: #334; } .ap-orderby { font-size: 16px; color: var(--ap-ink-soft, #405256); font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; } .ap-orderby select { border: 1px solid #d8dee6; border-radius: 9px; padding: .5rem .7rem; font-size: 16px; font-weight: 600; color: var(--ap-ink, #182629); background: #fff; cursor: pointer; } /* "Ordina per" moved into the left filter sidebar → full-width select. */ .ap-orderby-select { width: 100%; border: 1px solid #d8dee6; border-radius: 9px; padding: .55rem .7rem; font-size: 16px; font-weight: 600; color: var(--ap-ink, #182629); background: #fff; cursor: pointer; } .ap-results-list { display: flex; flex-direction: column; gap: 1rem; } /* List row (booking.com-style) — larger, fuller */ .ap-row { display: grid; grid-template-columns: 340px 1fr 320px; background: #fff; border: 1px solid #e9edf2; border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .ap-row:hover { box-shadow: 0 16px 36px rgba(15, 23, 42, .13); transform: translateY(-2px); border-color: #dbe3ec; } .ap-row-img { position: relative; background: #dde3ea center/cover no-repeat; min-height: 310px; overflow: hidden; } /* Category pills overlaid top-left on the image */ .ap-row-img .ap-tip-pills { position: absolute; top: .7rem; left: .7rem; right: auto; margin: 0; z-index: 2; max-width: calc(100% - 7rem); } .ap-row-img .ap-tip-pill { box-shadow: 0 2px 8px rgba(0,0,0,.22); } /* Last-minute / speciale badges top-right */ .ap-rbadge { position: absolute; right: .7rem; padding: .3rem .6rem; border-radius: 8px; font-size: 13px; font-weight: 800; color: #fff; letter-spacing: .02em; box-shadow: 0 2px 6px rgba(0,0,0,.18); z-index: 2; } /* Promo badges move to the bottom-right so the ID pill owns the top-right. */ .ap-rbadge-lm { bottom: .7rem; background: #ef4444; } .ap-rbadge-sp { bottom: 2.5rem; background: #7c3aed; } /* Tour operator at the bottom of the image, over a scrim */ .ap-row-op { position: absolute; left: .7rem; right: auto; bottom: .7rem; max-width: calc(100% - 1.4rem); padding: .34rem .7rem; background: rgba(15, 23, 42, .72); color: #fff; font-size: 15px; font-weight: 700; border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; z-index: 1; box-shadow: 0 3px 10px rgba(0,0,0,.25); backdrop-filter: blur(2px); } .ap-row-op i { color: #fff; opacity: .85; flex: 0 0 auto; } .ap-row-op span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ap-row-main { padding: 1.7rem 1.9rem; min-width: 0; display: flex; flex-direction: column; gap: .55rem; } /* Title + Mete flow from the top; the dates + durata/trattamento/trasporti chips always pin to the bottom (margin-top:auto) so they line up card-to-card regardless of title/mete length. */ .ap-row-main-top { display: flex; flex-direction: column; gap: .3rem; } .ap-row-main-bottom { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; } .ap-row-tip { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); } .ap-row-title { font-size: 1.52rem; font-weight: 800; line-height: 1.2; color: #1a1a2e; } .ap-row-visiting { color: var(--ap-ink-soft, #475569); font-size: 1.02rem; line-height: 1.4; } .ap-row-visiting strong { color: var(--ap-ink, #1a1a2e); } /* "+ altre N" — the overflow chip; full list on hover (shared [data-desc] bubble). */ .ap-row-mete-more { display: inline-flex; align-items: center; background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; border-radius: 999px; padding: .05rem .5rem; font-size: 15px; font-weight: 700; cursor: help; white-space: nowrap; } /* When line: departure range + the "altre date" opener as a chip, on one row. */ .ap-row-when { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--ap-ink-soft, #475569); font-size: 13px; margin-top: .25rem; } .ap-row-when-range i { color: var(--brand); margin-right: .3rem; } .ap-row-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; } .ap-chip { display: inline-flex; align-items: center; gap: .35rem; background: #f3f6f9; border: 1px solid #e6ecf2; border-radius: 999px; padding: .3rem .7rem; font-size: 13px; font-weight: 600; color: #475569; } .ap-chip i { color: var(--brand); } .ap-chip[data-desc] { cursor: help; } .ap-chip-muted { color: #94a3b8; } .ap-chip-muted i { color: #b6c0cc; } /* Rich-content icons (inclusions / exclusions / notes) — sit in the price column, above "Maggiori informazioni". Hover → styled popover. */ .ap-row-extras { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; width: 100%; margin: .15rem 0 .7rem; } .ap-di { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: 999px; background: #f3f6f9; border: 1px solid #e6ecf2; cursor: help; font-size: 16px; font-weight: 700; color: #334155; transition: background .12s ease, border-color .12s ease, transform .12s ease; } .ap-di:hover { transform: translateY(-1px); background: #eef2f7; border-color: #d7dee7; } .ap-di-inc i { color: var(--ap-success, #22865f); } .ap-di-exc i { color: #c2410c; } .ap-di-note i { color: var(--ap-gold, #f26b43); } /* Styled rich popover (body-appended, fixed). */ .ap-rich-pop { position: fixed; z-index: 4000; width: 300px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid #e6ecf2; border-radius: 12px; box-shadow: 0 18px 44px rgba(15,23,42,.2); padding: .75rem .9rem; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .12s ease, transform .12s ease; } .ap-rich-pop.on { opacity: 1; transform: none; } .ap-rich-pop-h { font-weight: 800; font-size: 16px; color: var(--ap-ink, #1a1a2e); margin-bottom: .55rem; display: flex; align-items: center; gap: .45rem; } .ap-rich-inc .ap-rich-pop-h i { color: var(--ap-success, #22865f); } .ap-rich-exc .ap-rich-pop-h i { color: #c2410c; } .ap-rich-note .ap-rich-pop-h i { color: var(--ap-gold, #f26b43); } .ap-rich-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 280px; overflow: auto; } .ap-rich-list li { display: flex; align-items: flex-start; gap: .5rem; font-size: 16px; line-height: 1.35; color: var(--ap-ink-soft, #475569); } .ap-rich-list li i { margin-top: .15rem; font-size: .8rem; flex: 0 0 auto; } .ap-rich-inc .ap-rich-list li i { color: var(--ap-success, #22865f); } .ap-rich-exc .ap-rich-list li i { color: #c2410c; } .ap-rich-note { font-size: 16px; line-height: 1.45; color: var(--ap-ink-soft, #475569); white-space: pre-wrap; } /* Tipologia pills (primary + secondary) */ .ap-tip-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .3rem; } .ap-tip-pill { display: inline-block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); padding: .22rem .55rem; border-radius: 999px; } .ap-tip-pill-2 { color: var(--ap-gold, #f26b43); background: color-mix(in srgb, var(--ap-gold, #f26b43) 14%, #fff); } /* Title block: the (i) is anchored top-right and out of the text flow so a wrapping title never pushes it onto its own line. */ .ap-row-titlewrap { position: relative; padding-right: 1.7rem; } .ap-row-i { color: var(--brand); cursor: help; font-size: 16px; } .ap-row-titlewrap .ap-row-i { position: absolute; top: .2rem; right: 0; margin: 0; } .ap-row-i:hover { opacity: .8; } .ap-info-bubble { position: fixed; z-index: 4000; max-width: 320px; background: #1a1a2e; color: #fff; padding: .65rem .8rem; border-radius: 9px; font-size: 16px; font-weight: 400; line-height: 1.45; box-shadow: 0 12px 30px rgba(15,23,42,.3); opacity: 0; pointer-events: none; transition: opacity .12s ease; } .ap-info-bubble.on { opacity: 1; } .ap-row-book { display: flex; justify-content: flex-end; margin: .2rem 0 .7rem; } .ap-row-datelink { background: color-mix(in srgb, var(--brand) 9%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 25%, #e6ecf2); padding: .18rem .6rem; border-radius: 999px; cursor: pointer; color: var(--brand); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: .35rem; } .ap-row-datelink:hover { background: color-mix(in srgb, var(--brand) 16%, #fff); } /* Departures ("altre date e tariffe") modal */ #ap-dep-modal { position: fixed; inset: 0; z-index: 5200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(11,52,57,.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .15s ease; } #ap-dep-modal.on { opacity: 1; pointer-events: all; } .ap-dep-card { position: relative; background: #fff; border-radius: 16px; max-width: 720px; width: 100%; max-height: 82vh; overflow: auto; padding: 1.4rem 1.5rem; box-shadow: 0 24px 60px rgba(15,23,42,.3); } .ap-dep-x { position: absolute; top: .7rem; right: .8rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: #94a3b8; cursor: pointer; } .ap-dep-x:hover { color: #334; } .ap-dep-title { font-size: 1.25rem; font-weight: 800; margin: 0 1.5rem .9rem 0; color: var(--ap-ink, #182629); } .ap-dep-table { width: 100%; border-collapse: collapse; font-size: 16px; } .ap-dep-table th { text-align: left; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: #94a3b8; padding: .5rem .6rem; border-bottom: 2px solid #eef2f6; } .ap-dep-table td { padding: .6rem; border-bottom: 1px solid #f1f5f9; color: #334; } .ap-dep-ret { color: #94a3b8; } .ap-dep-orig { color: #94a3b8; text-decoration: line-through; font-size: 15px; } .ap-dep-price { text-align: right; white-space: nowrap; } .ap-dep-av { font-size: 15px; font-weight: 700; color: #94a3b8; } .ap-dep-av.on { color: #059669; } .ap-dep-contact { border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .7rem; border-radius: 8px; color: #fff; background: #0b7285; box-shadow: 0 1px 2px rgba(11,114,133,.25); } .ap-dep-contact:hover { background: #095c6b; } .ap-book { font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem; border-radius: 8px; line-height: 1.25; text-align: right; } .ap-book-on { color: #047857; background: #ecfdf5; } .ap-book-off { color: #b45309; background: #fffbeb; } .ap-row-side { border-left: 1px solid #eef2f6; padding: 1.3rem 1.2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: .15rem; background: #fcfdff; text-align: right; } .ap-row-disc { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; font-weight: 800; font-size: 16px; padding: .18rem .55rem; border-radius: 6px; } .ap-row-orig { color: #94a3b8; text-decoration: line-through; font-size: 16px; } /* "a partire da" on line 1; "€ X a persona" on line 2. Labels are a darker, readable gray; the amount is black/bold. */ .ap-row-price-label { color: #64748b; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .ap-row-priceline { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; } .ap-row-pl-post { font-size: 15px; font-weight: 600; color: #64748b; } .ap-row-price { font-size: 1.5rem; font-weight: 800; color: #1a1a2e; line-height: 1.05; } .ap-row-side .ap-btn { width: 100%; justify-content: center; } /* Pagination */ .ap-pagination { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 1.6rem 0; } .ap-page-btn { width: 40px; height: 40px; border-radius: 9px; border: 1px solid #d8dee6; background: #fff; cursor: pointer; font-size: 1.2rem; } .ap-page-btn:disabled { opacity: .4; cursor: default; } .ap-page-info { font-weight: 700; color: #334; } /* Responsive */ @media (max-width: 880px) { .ap-results-layout { grid-template-columns: 1fr; } .ap-filters { position: static; } .ap-row { grid-template-columns: 1fr; } .ap-row-img { min-height: 190px; } .ap-row-side { border-left: none; border-top: 1px solid #eef2f6; align-items: stretch; } .ap-hero-search { flex-direction: column; align-items: stretch; } .ap-search-actions { align-items: stretch; } .ap-search-actions .ap-btn { flex: 1; justify-content: center; } .ap-how-grid { grid-template-columns: 1fr; } .ap-nav > a:not(.ap-login) { display: none; } } /* Collection cards (layout_type='collection') — operator/theme summaries with no price/dates/transport. A "Collezione" badge marks them; the price column reads "Scopri il prezzo" since there's no per-customer price. */ .ap-bc-badge-coll { left: .6rem; background: #1a1a2e; } .ap-rbadge-coll { bottom: .7rem; background: #1a1a2e; } /* Validity urgency chips (anteprima_common.js AP.urgency): orange = in scadenza, blue = valida dal (not started yet). Kept off the bottom-right rbadge stack. */ .ap-badge-urgent, .ap-bc-badge-urgent, .ap-rbadge-urgent { background: #ea580c; } .ap-badge-soon, .ap-bc-badge-soon, .ap-rbadge-soon { background: #2563eb; } .ap-badge-urgent, .ap-badge-soon { left: .5rem; top: auto; bottom: .5rem; } .ap-bc-badge-urgent, .ap-bc-badge-soon { left: .6rem; top: auto; bottom: .6rem; } .ap-rbadge-urgent, .ap-rbadge-soon { top: .7rem; bottom: auto; } .ap-row-price-discover { font-size: 1.15rem; font-weight: 700; color: var(--brand, #e6007e); line-height: 1.15; } .ap-bc-amt.ap-bc-discover { font-size: 1.05rem; color: var(--brand, #e6007e); } /* Numeric offer id (offer_number) — a colourful pill that overflows the top-right corner of the whole card. This is the reference people quote when asking for help, so it's high-contrast and unmissable. */ .ap-row-wrap { position: relative; } .ap-row-idpill, .ap-bc-idpill { position: absolute; z-index: 6; color: #fff; background: linear-gradient(135deg, var(--brand, #e6007e), #06b6d4); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 5px 14px rgba(0,0,0,.30); } /* Row card: overflow the top-right corner (the wrapper isn't clipped). */ .ap-row-idpill { top: -.9rem; right: -.9rem; font-size: 13px; padding: .34rem .85rem; } /* Carousel card: kept just inside the image — the carousel viewport clips overflow. */ .ap-bc-idpill { top: .55rem; right: .55rem; font-size: 13px; padding: .28rem .72rem; } /* ── Favourite heart on cards/rows (persistent favourites via B4GFav) ── */ .ap-fav-btn { z-index: 6; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); color: #94a3b8; box-shadow: 0 2px 8px rgba(15, 23, 42, .20); font-size: 16px; transition: transform .12s ease, color .12s ease; } .ap-fav-btn:hover { transform: scale(1.1); color: #e11d48; } .ap-fav-btn.is-fav { color: #e11d48; } /* Over the image, bottom-left — clear of the top-right ID pill + top-left badges. */ .ap-fav-card, .ap-fav-bc { position: absolute; bottom: .55rem; left: .55rem; } /* Row: heart sits in a top-right cluster, just LEFT of the ID pill. */ .ap-row-topright { position: absolute; top: -.7rem; right: -.5rem; z-index: 6; display: flex; align-items: center; gap: .45rem; } .ap-row-topright .ap-row-idpill { position: static; top: auto; right: auto; } .ap-fav-row { position: static; width: 34px; height: 34px; background: rgba(255, 255, 255, .96); border: 1px solid #e6ecf2; box-shadow: 0 3px 10px rgba(15, 23, 42, .18); } .ap-fav-row.is-fav { background: #fff1f2; border-color: #fecdd3; } /* ===================== Header — white bar + coloured bottom border ====================== */ /* A clean, solid white bar that sits above the hero (in normal flow on every page — no overlap, so a missing hero image can never make it look grey). Dark ink text; the brand accent (teal → gold → orange) lives in the bottom border. Rules are prefixed with .ap-header to outrank the legacy generic header rules at the top. */ .ap-header { position: relative; z-index: 500; padding: 0; background: #fff; border-bottom: 1px solid var(--hair, #e9edf2); box-shadow: 0 2px 16px rgba(15,23,42,.06); } /* Brand accent thread in the bottom border. */ .ap-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1; background: linear-gradient(90deg, var(--brand), var(--ap-hero-accent, #ffd23f) 55%, var(--ap-gold, #fe4209)); } .ap-header-bar { max-width: 1600px; margin: 0 auto; padding: 0 clamp(.7rem, 1.5vw, 1.6rem); min-height: clamp(76px, 6.6vw, 108px); display: flex; align-items: center; gap: clamp(.5rem, .95vw, 1.2rem); } /* Logo sits directly on the frosted bar (the brand logos are made for light bg). */ .ap-header .ap-logo { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; text-decoration: none; } /* Bounding-box sizing (not a fixed height): tall crop logos AND short wide wordmark logos (e.g. butali's 150×45 "Viaggia con euronics" SVG) both fit without being stretched. Works on the /idee embed page too, which has no .anteprima-body wrapper and doesn't inject the per-brand anteprima_palette_css. */ .ap-header .ap-logo img { height: auto; width: auto; max-height: clamp(44px, 3.6vw, 56px); max-width: 180px; display: block; object-fit: contain; } .ap-header .ap-logo > span { font-size: 1.35rem; font-weight: 800; color: var(--brand); } /* Config-driven HTML wordmark (icon + " & Viaggi"). Calibri per brand spec; Carlito is the metric-compatible free fallback, then system. */ .ap-logo-icon { height: clamp(46px, 4.2vw, 64px); width: auto; display: block; } .ap-logo-text { display: inline-flex; flex-direction: column; justify-content: center; font-family: 'Calibri', 'Carlito', 'Segoe UI', system-ui, sans-serif; line-height: 1.0; letter-spacing: .01em; } /* Line 1 = the swappable word alone; line 2 = "& Viaggi". The ampersand sits on the second line so a long per-azienda keyword ("Commercialisti") doesn't drag it out of the header's width. */ .ap-logo-line1, .ap-logo-line2 { display: inline-flex; align-items: baseline; gap: .28rem; } .ap-logo-word { font-size: 1.5rem; font-weight: 700; } /* red, set inline from brand_word_color */ .ap-logo-amp { font-size: 1.5rem; font-weight: 700; color: #60A830; } /* green ampersand */ .ap-logo-viaggi { font-size: 1.5rem; font-weight: 700; color: #FF0000; } /* red */ @media (max-width: 640px) { .ap-logo-word, .ap-logo-amp, .ap-logo-viaggi { font-size: 1.2rem; } } /* Nav links + right-side utility links + dropdown share ONE hover style: dark ink with an animated brand underline. No colour-fill on hover — the underline IS the feedback. The active page link is brand-coloured. */ .ap-header .ap-nav { display: flex; align-items: center; gap: clamp(.5rem, 1vw, 1.35rem); margin-left: clamp(.1rem, .35vw, .45rem); } .ap-header .ap-nav-link, .ap-header .ap-act-link, .ap-header .ap-nav-dd-btn { position: relative; display: inline-flex; align-items: center; line-height: 1; gap: clamp(.3rem, .46vw, .48rem); background: none; border: none; cursor: pointer; font-family: inherit; color: var(--ap-ink, #1c2b2e); text-decoration: none; font-weight: 600; font-size: calc(clamp(.85rem, .92vw, 1.04rem) * var(--ap-hdr-fs, 1)); white-space: nowrap; padding: .5rem 0; transition: color .15s; } .ap-header .ap-nav-link i, .ap-header .ap-act-link i, .ap-header .ap-nav-dd-btn > i:first-child { color: var(--brand); opacity: .85; font-size: .9em; } .ap-header .ap-nav-link::after, .ap-header .ap-act-link::after, .ap-header .ap-nav-dd-btn::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--brand); border-radius: 2px; transition: right .22s ease; } .ap-header .ap-nav-link:hover::after, .ap-header .ap-act-link:hover::after, .ap-header .ap-nav-dd:hover .ap-nav-dd-btn::after, .ap-header .ap-nav-dd.open .ap-nav-dd-btn::after, .ap-header .ap-nav-link.active::after { right: 0; } .ap-header .ap-nav-link.active { color: var(--brand); } /* Hotel e Trasporti dropdown. */ .ap-header .ap-nav-dd { position: relative; } .ap-dd-caret { font-size: .68em; opacity: .8; transition: transform .15s; } .ap-nav-dd:hover .ap-dd-caret, .ap-nav-dd.open .ap-dd-caret { transform: rotate(180deg); } .ap-header .ap-nav-dd-menu { position: absolute; left: 0; right: auto; top: calc(100% + .6rem); min-width: 252px; background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: .4rem; box-shadow: 0 18px 40px rgba(15,23,42,.22); display: none; z-index: 50; } /* Invisible bridge over the gap between the button and the menu — anchored on the wrapper itself so moving the cursor down to pick an item never leaves the hovered element and snaps the menu shut. Only "live" while open. */ .ap-header .ap-nav-dd::after { content: ""; position: absolute; left: 0; top: 100%; width: 264px; height: .8rem; display: none; background: none; } .ap-header .ap-nav-dd:hover::after, .ap-header .ap-nav-dd.open::after { display: block; } .ap-header .ap-nav-dd:hover .ap-nav-dd-menu, .ap-header .ap-nav-dd.open .ap-nav-dd-menu { display: block; } .ap-header .ap-nav-dd-menu a { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; padding: .55rem .65rem; border-radius: 8px; color: #2a3b3e; text-decoration: none; font-size: 16px; font-weight: 600; } .ap-header .ap-nav-dd-menu a i { color: var(--brand); width: 1.2rem; text-align: center; } .ap-header .ap-nav-dd-menu a:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); color: var(--brand); } /* Right-side actions: orange CTA + utility links + brand "Accedi". */ .ap-header-actions { margin-left: auto; display: flex; align-items: center; gap: clamp(.4rem, .72vw, .95rem); } .ap-header .ap-nav-cta { display: inline-flex; align-items: center; line-height: 1; gap: clamp(.3rem, .45vw, .46rem); background: var(--ap-gold, #fe4209); color: #fff !important; text-decoration: none; font-weight: 800; font-size: calc(clamp(.85rem, .9vw, 1rem) * var(--ap-hdr-fs, 1)); padding: clamp(.46rem, .72vw, .66rem) clamp(.62rem, .95vw, 1.1rem); border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 20px color-mix(in srgb, var(--ap-gold, #fe4209) 38%, transparent); transition: transform .15s, filter .15s; } /* Compact auth cluster: Registrati + Accedi stacked vertically take one column of width instead of two — freeing horizontal room for bigger nav text. */ /* Telefono + FAQ share one column slot — same trick as .ap-auth-stack below. Tighter vertical padding than a standalone action link so the pair still fits the bar; align-items:flex-start keeps each hover underline the width of its own label rather than the wider sibling. */ .ap-act-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; } .ap-act-stack .ap-act-link { padding: .18rem 0; } /* "Scrivici" is now the ONE contact entry (it replaced Scrivici + Preventivo), so it carries a second line saying what it covers. Both lines are CENTRED on each other: the icon lives inside the title line rather than in its own column, otherwise the subtitle hangs off to one side and the whole block reads as misaligned against its neighbours. */ .ap-header .ap-act-scrivici { flex-direction: column; align-items: center; justify-content: center; gap: .12rem; padding: .3rem 0; text-align: center; } .ap-header .ap-act-scrivici .ap-act-scrivici-t { display: inline-flex; align-items: center; gap: clamp(.3rem, .46vw, .48rem); line-height: 1.15; } .ap-header .ap-act-scrivici .ap-act-scrivici-s { font-size: .76em; font-weight: 600; color: var(--ap-ink-soft, #5b6b6e); line-height: 1.2; letter-spacing: .005em; } /* Divider between the phone and FAQ — .ap-act-sep turned on its side. Half the column's width (the column being as wide as the phone number, the wider of the two) so it reads as a light separator rather than a full rule. flex:0 0 1px keeps the 1px height from being squeezed. */ .ap-act-stack .ap-act-sep-h { width: 50%; height: 1px; flex: 0 0 1px; margin: .1rem 0; } .ap-auth-stack { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; } .ap-auth-stack .ap-auth-accedi { justify-content: center; } /* Registrati — outline pill matching the Accedi pill (same shape/size; the stack stretches both to one width). Accedi stays the filled brand button. */ .ap-auth-stack .ap-auth-pill { display: inline-flex; align-items: center; justify-content: center; gap: clamp(.3rem, .45vw, .45rem); line-height: 1; font-weight: 800; white-space: nowrap; text-decoration: none; border-radius: 999px; padding: clamp(.44rem, .66vw, .6rem) clamp(.6rem, .92vw, 1.05rem); font-size: calc(clamp(.82rem, .86vw, .96rem) * var(--ap-hdr-fs, 1)); transition: background .15s, filter .15s; } .ap-auth-stack .ap-auth-reg { color: var(--brand); background: #fff; border: 1.5px solid color-mix(in srgb, var(--brand) 38%, #dbe2e8); } .ap-auth-stack .ap-auth-reg:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); } /* Icon-only ghost button (Esci): square, no label. */ .ap-header .ap-act-iconbtn { padding: clamp(.44rem, .66vw, .6rem); gap: 0; } /* Leading divider between the nav and the actions (Scrivici…). */ .ap-act-sep-lead { margin-right: clamp(.15rem, .35vw, .45rem); } .ap-header .ap-nav-cta:hover { transform: translateY(-1px); filter: brightness(1.05); } .ap-act-sep { width: 1px; height: 30px; background: rgba(8,30,34,.16); } .ap-header .ap-act-ghost { display: inline-flex; align-items: center; justify-content: center; line-height: 1; gap: clamp(.3rem, .45vw, .45rem); color: #fff; background: var(--brand); border: none; font-weight: 800; font-size: calc(clamp(.82rem, .86vw, .96rem) * var(--ap-hdr-fs, 1)); padding: clamp(.44rem, .66vw, .6rem) clamp(.6rem, .92vw, 1.05rem); border-radius: 999px; white-space: nowrap; text-decoration: none; transition: filter .15s; } .ap-header .ap-act-ghost:hover { filter: brightness(1.08); } /* Burger + mobile slide-down menu (hidden on desktop). White bars on dark. */ .ap-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: .4rem; margin-left: auto; } .ap-burger span { width: 26px; height: 3px; background: var(--ap-ink, #1c2b2e); border-radius: 2px; transition: .2s; } .ap-burger.on span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .ap-burger.on span:nth-child(2) { opacity: 0; } .ap-burger.on span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .ap-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid #e9edf2; box-shadow: 0 18px 34px rgba(15,23,42,.16); padding: .6rem; max-height: calc(100vh - 98px); overflow-y: auto; z-index: 510; } .ap-mobile-menu.on { display: block; } .ap-mm-item { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 9px; color: #2a3b3e; text-decoration: none; font-weight: 600; font-size: 16px; } .ap-mm-item i { color: var(--brand); width: 1.2rem; text-align: center; } .ap-mm-item:hover { background: #f4f6f9; } .ap-mm-cta { background: var(--ap-gold, #fe4209); color: #fff; font-weight: 800; } .ap-mm-cta i { color: #fff; } .ap-mm-group-title { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; padding: .7rem .8rem .25rem; } .ap-mm-divider { height: 1px; background: #eef1f5; margin: .4rem .4rem; } /* Collapse to a burger once the fluid nav can no longer shrink to fit. 1340px: the fuller nav + bigger text on BT brands needs it (fits cleanly at 1366+). */ @media (max-width: 1340px) { .ap-header .ap-nav, .ap-header-actions { display: none; } .ap-burger { display: flex; } .ap-header .ap-logo img { max-height: 46px; height: auto; } .ap-header-bar { min-height: 84px; } } /* ===== "Scrivici" chooser modal — one entry, two routes ===== */ .ap-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ap-choose-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; background: #fff; border: 1.5px solid #e7eaf0; border-radius: 16px; padding: 1.4rem 1.3rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; } .ap-choose-card:hover { border-color: var(--brand); box-shadow: 0 14px 30px rgba(15,23,42,.12); transform: translateY(-2px); } .ap-choose-ic { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); } .ap-choose-card:nth-child(2) .ap-choose-ic { color: var(--ap-gold, #fe4209); background: color-mix(in srgb, var(--ap-gold, #fe4209) 14%, #fff); } .ap-choose-card h4 { margin: .2rem 0 0; font-size: 1.08rem; font-weight: 800; color: var(--ap-ink, #182629); } .ap-choose-card p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ap-ink-soft, #46585c); } .ap-choose-card .ap-choose-go { margin-top: .4rem; font-weight: 800; font-size: 16px; color: var(--brand); display: inline-flex; align-items: center; gap: .4rem; } .ap-choose-card:nth-child(2) .ap-choose-go { color: var(--ap-gold, #fe4209); } /* "Diventa Partner" chooser card — sits beside "Richiesta libera", brand-tinted so it reads as a distinct value prop. Override the :nth-child(2) gold accent (that styling was for the removed preventivo card). */ .ap-choose-card.ap-choose-partner { background: color-mix(in srgb, var(--brand) 6%, #fff); border-color: color-mix(in srgb, var(--brand) 26%, #e7eaf0); } .ap-choose-card.ap-choose-partner .ap-choose-ic { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); } .ap-choose-card.ap-choose-partner .ap-choose-go { color: var(--brand); } @media (max-width: 560px) { .ap-choose-grid { grid-template-columns: 1fr; } } /* ============================ Fornitori page ============================ */ /* width:100% is required because .anteprima-body is a flex column (sticky footer); without it the `margin:0 auto` suppresses flex stretch and the wrap shrink-wraps to ~2 cards. */ .ap-forn-wrap { width: 100%; max-width: 1280px; margin: 2rem auto 4rem; padding: 0 1rem; } .ap-forn-head { text-align: center; margin-bottom: 2.6rem; } .ap-forn-eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1rem; } .ap-forn-wrap .ap-forn-head h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.015em; color: var(--ap-ink, #182629); line-height: 1.1; } .ap-forn-head p { color: var(--ap-ink-soft, #405256); margin: .8rem auto 0; max-width: 640px; font-size: 1.05rem; line-height: 1.55; } .ap-forn-section { margin-bottom: 2.8rem; } /* Section title — icon chip + dark heading + count badge over a soft divider (the heading has explicit overrides so no stray rule tints it). */ .ap-forn-section-head { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.4rem; padding-bottom: .85rem; border-bottom: 1px solid color-mix(in srgb, var(--brand) 16%, #e9edf2); } .ap-forn-section-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: 1.05rem; flex-shrink: 0; } .ap-forn-section-ic-off { background: #eef1f5; color: #64748b; } .ap-forn-wrap .ap-forn-section-head h2 { font-size: 1.45rem; font-weight: 800; color: var(--ap-ink, #182629) !important; background: none !important; padding: 0 !important; margin: 0 !important; } .ap-forn-section-head .ap-forn-badge { font-size: 13px; font-weight: 800; padding: .28rem .72rem; border-radius: 999px; color: #fff; } .ap-forn-badge-on { background: var(--ap-success, #22865f); } .ap-forn-badge-off { background: #64748b; } .ap-forn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.1rem; } /* Flip card: front = logo + name; back (hover/focus) = products + count + CTA. */ .ap-forn-card { height: 250px; perspective: 1200px; cursor: pointer; outline: none; } .ap-forn-flip { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.22,.61,.36,1); transform-style: preserve-3d; } .ap-forn-card:hover .ap-forn-flip, .ap-forn-card:focus-within .ap-forn-flip { transform: rotateY(180deg); } .ap-forn-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.3rem 1.2rem; text-align: center; overflow: hidden; } /* Front */ .ap-forn-front { background: #fff; border: 1px solid #e9edf2; box-shadow: 0 6px 18px rgba(15,23,42,.06); gap: .85rem; transition: box-shadow .2s, transform .2s; } .ap-forn-card:hover .ap-forn-front { box-shadow: 0 14px 30px rgba(15,23,42,.12); } .ap-forn-logo { height: 96px; width: 100%; display: flex; align-items: center; justify-content: center; } .ap-forn-logo img { max-width: 78%; max-height: 96px; object-fit: contain; } .ap-forn-logo.ap-forn-noimg::before, .ap-forn-initial { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-size: 2rem; font-weight: 800; } .ap-forn-logo.ap-forn-noimg::before { content: attr(data-i); } .ap-forn-name { font-size: 1.02rem; font-weight: 800; color: var(--ap-ink, #182629); line-height: 1.2; } .ap-forn-online-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--ap-success, #22865f); } /* Back — brand-coloured to match the header/footer, gold CTA. */ .ap-forn-back { transform: rotateY(180deg); color: #fff; gap: .55rem; background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--brand) 60%, #10151c), transparent 60%), linear-gradient(135deg, var(--ap-navy, var(--brand)), #11161d); box-shadow: 0 14px 30px rgba(15,23,42,.2); } .ap-forn-back-name { font-size: 1rem; font-weight: 800; line-height: 1.2; } .ap-forn-prods { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ap-forn-count-b { font-size: 13px; font-weight: 700; color: var(--ap-gold, #fe4209); } .ap-forn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--ap-gold, #fe4209); color: #fff; text-decoration: none; font-weight: 800; font-size: 16px; padding: .55rem 1.05rem; border-radius: 999px; margin-top: .25rem; box-shadow: 0 6px 16px color-mix(in srgb, var(--ap-gold, #fe4209) 40%, transparent); } .ap-forn-btn:hover { filter: brightness(1.06); color: #fff; transform: translateY(-1px); } .ap-forn-empty { color: #94a3b8; padding: 1rem 0; } /* Ispirazione tiles — suggested tipologie (image + name overlay → category search) */ .ap-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .ap-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #dde3ea center/cover no-repeat; display: flex; align-items: flex-end; text-decoration: none; box-shadow: 0 6px 18px rgba(15,23,42,.08); transition: transform .18s ease, box-shadow .18s ease; } .ap-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,16,24,0) 36%, rgba(8,16,24,.74)); } .ap-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,42,.18); } .ap-tile-name { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.2; padding: 1rem 1.1rem; text-shadow: 0 2px 8px rgba(0,0,0,.45); } /* CTA band sits below the value cards in the merged "Perché sceglierci" section. */ .ap-why-inner .ap-how-band { margin-top: 2.6rem; text-align: left; } @media (max-width: 900px) { .ap-tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ap-tiles { grid-template-columns: 1fr 1fr; gap: .7rem; } .ap-tile-name { font-size: 16px; padding: .7rem .8rem; } } /* Sticky footer — on short pages (e.g. 1–2 results) keep the footer pinned to the bottom of the viewport instead of floating mid-screen. */ .anteprima-body { display: flex; flex-direction: column; min-height: 100vh; } .anteprima-body .footer-modern { margin-top: auto; } /* Fallback "no curated package" header above the always-available service cards. */ .ap-fallback-note { background: #fff; border: 1px solid #e9edf2; border-radius: 14px; padding: 1.1rem 1.4rem; margin-bottom: 1.1rem; } .ap-fallback-note h3 { font-size: 1.2rem; font-weight: 800; color: var(--ap-ink, #182629); display: flex; align-items: center; gap: .55rem; } .ap-fallback-note h3 i { color: var(--brand); } .ap-fallback-note p { color: var(--ap-ink-soft, #405256); margin-top: .35rem; font-size: 16px; line-height: 1.5; } /* Free-text destination row ("Cerca 'Arezzo'") + its chip. */ .dp-free .dp-name { color: var(--brand); font-weight: 700; } .dp-free .dp-check i, .dp-free .dp-ico i { color: var(--brand); } .dp-chip-free i { margin-right: .15rem; } /* ---- Esclusive Euronics (Butali only) ----------------------------------- */ /* Framed like the "Crea il tuo Viaggio" CTA pill (.ap-nav-cta / .ap-mm-cta), but coloured with the brand PRIMARY (--brand) instead of the gold --ap-gold so it reads as brand-based and stays distinct from the gold Crea pill. The gold bolt icon keeps the EUROnics accent. Specificity (0,3,0) + !important beats the per-brand navy-text override injected on .ap-nav-cta. */ .ap-header .ap-nav-cta.ap-euronics-link { background: var(--brand); color: #fff !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 38%, transparent); } .ap-header .ap-nav-cta.ap-euronics-link i { color: var(--ap-gold, #f1c400); } .ap-mm-cta.ap-euronics-link { background: var(--brand); color: #fff; } .ap-mm-cta.ap-euronics-link i { color: var(--ap-gold, #f1c400); } /* Esclusive results mode (/cerca/?esclusive=): banner on top of the normal results grid, filters sidebar hidden → single column. */ .ap-esclusive-banner { display: flex; align-items: center; gap: 1rem; background: linear-gradient(135deg, var(--brand), var(--ap-navy, #14315f)); color: #fff; border-radius: 14px; padding: 1rem 1.3rem; margin-bottom: 1.1rem; } .ap-esclusive-banner i { font-size: 1.7rem; color: var(--ap-gold, #f1c400); flex: none; } .ap-esclusive-banner strong { display: block; font-size: 1.15rem; font-weight: 800; line-height: 1.2; } .ap-esclusive-banner span { font-size: 16px; opacity: .92; } /* Supplier-pinned search (?operator_id=). Lighter than the esclusive banner — it's a state indicator, not a promo — and carries the only way out, since the Fornitore filter is hidden in this mode (its upstream facet is disjunctive and would list every other supplier). */ .ap-operator-pin { display: flex; align-items: center; gap: .85rem; background: var(--ap-cream-200, #ece2d0); color: var(--ap-ink, #182629); border-radius: 12px; padding: .8rem 1.05rem; margin-bottom: 1rem; } .ap-operator-pin i { font-size: 1.15rem; color: var(--brand); flex: none; } .ap-operator-pin > div { min-width: 0; } .ap-operator-pin strong { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.25; } .ap-operator-pin span { font-size: 16px; opacity: .78; } .ap-operator-pin a { margin-left: auto; flex: none; font-size: 16px; font-weight: 700; color: var(--brand); text-decoration: underline; white-space: nowrap; } @media (max-width: 640px) { .ap-operator-pin { flex-wrap: wrap; } .ap-operator-pin a { margin-left: 0; width: 100%; } } /* Esclusive mode keeps the normal two-column layout WITH the left filters — it's a search pinned to the exclusive brand's operator, not a curated feed. */