/* Depends on tokens.css and .container from base.css (see css.php's $nvFiles bundle order: fonts, tokens, base, layout, home) -- reordering that array would break this without warning. Homepage sections only; later tasks append their own rules here (categories, offers, destinations, why-us). */ /* ── HERO ── */ /* Ported from NiamaVreme.html:259-283, with one deliberate deviation: the prototype's .hero-photo is a CSS background div, discovered only after this stylesheet parses -- the worst case for LCP. Here it styles a real instead (see _hero.php), positioned/sized the same way. */ .hero{background:var(--blue-dk);position:relative;min-height:380px;display:flex;align-items:center} .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero-bg{position:absolute;inset:0;background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(0,106,204,.35) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 5% 80%, rgba(240,90,0,.12) 0%, transparent 50%), linear-gradient(100deg,rgba(0,32,64,.88) 30%,rgba(0,61,122,.55) 100%)} .hero .container{position:relative;z-index:2;padding-block:40px} .hero-content{max-width:100%} .hero h1{font-family:var(--fs);font-size:clamp(1.5rem,2.5vw,2.1rem);color:var(--white);line-height:1.18;margin-bottom:14px;text-wrap:balance} .hero h1 em{font-style:italic;color:var(--orange)} .hero-stats{display:flex;gap:32px;flex-wrap:wrap} .h-stat-val{font-family:var(--fs);font-size:1.7rem;color:var(--white);line-height:1;font-weight:700} .h-stat-lbl{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:3px;text-transform:uppercase;letter-spacing:.05em} /* ── HERO SEARCH ── */ .hero-search-card{position:relative;z-index:3;max-width:100%;margin-top:26px} .hsc-label{display:block;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px} .hsc-row{display:flex;align-items:center;gap:0;background:var(--white);border:none;border-radius:100px;padding:5px 5px 5px 22px;box-shadow:0 10px 34px rgba(0,20,45,.32);transition:box-shadow var(--t)} .hsc-row:focus-within{box-shadow:0 14px 42px rgba(0,20,45,.42)} .hsc-ico{display:flex;align-items:center;justify-content:center;color:var(--g400);flex-shrink:0;margin-right:12px} .hsc-row input{flex:1;min-width:0;border:none;background:none;font-family:var(--f);font-size:1.05rem;color:var(--text);padding:13px 0} .hsc-row input:focus{outline:none} .hsc-row input::placeholder{color:var(--g400)} .hsc-btn{flex-shrink:0;padding:14px 34px;border-radius:100px;background:var(--orange);color:var(--white);font-size:.95rem;font-weight:700;transition:background var(--t)} .hsc-btn:hover{background:var(--orange-dk)} .hsc-tags{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px} .hsc-tags-lbl{font-size:.78rem;color:rgba(255,255,255,.5);font-weight:600} .hsc-tag{display:inline-block;padding:0 0 2px;border:none;border-bottom:1px solid rgba(255,255,255,.3);background:none;font-size:.84rem;font-weight:600;color:rgba(255,255,255,.9);transition:color var(--t),border-color var(--t)} .hsc-tag:hover{color:var(--white);border-bottom-color:var(--orange)} /* ── RESPONSIVE ── */ /* Ported from NiamaVreme.html's @media(max-width:768px) block starting at line 794 -- hero-related rules only. */ @media(max-width:768px){ .hero .container{padding-block:32px} .hero-content{max-width:100%} .hsc-row{flex-wrap:wrap;border-radius:var(--r16);padding:12px} .hsc-ico{margin-right:8px} .hsc-row input{flex:1 1 auto;padding:8px 0;font-size:1rem} .hsc-btn{flex:1 1 100%;margin-top:10px;justify-content:center;border-radius:var(--r12)} } /* ── CATEGORIES STRIP ── */ /* Ported from NiamaVreme.html:1254-1319 (dest-strip) and its CSS at NiamaVreme.html:311-329. One deviation: the prototype's .dest-card is a
; here it's a real to the filter's landing page (site_url($slug), suffixed .html by config's url_suffix -- see _categories.php), so it works without JS and is a normal link. .dest-card-img also gets a flat background colour as a fallback for when the filter's image file doesn't exist on disk yet (see _categories.php's file_exists() guard) -- same graceful-degradation approach as .hero. */ .section{padding:52px 0} .section-alt{background:var(--off)} .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px} .sec-title{font-family:var(--fs);font-size:1.55rem;font-weight:700;color:var(--text)} /* gap and snapping match the reviews rail (.rv-row in reviews.css) so the two scrolling rows on this page read as one component seen twice. `mandatory` overrides the `x proximity` that [data-hscroll] sets in base.css -- equal specificity, and home.css is emitted after base.css in every bundle. */ .dest-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-snap-type:x mandatory} .dest-strip::-webkit-scrollbar{display:none} /* Below 768px .container is padding-bound at 20px, so the strip stopped 20px short of the screen: the peeking card was clipped INSIDE the page margin while the reviews rail (full-bleed) ran its cards off the edge. The negative margin cancels the container's padding and the equal padding puts the content back, so the first card does not move -- only the scroll port grows to the full width. scroll-padding-inline is what makes the inset survive scrolling: scroll-snap-align aligns to the SCROLL PORT, not the padding box, so without it the first card snaps flush to 0 on the way back. Same trap documented at .rv-row. */ @media(max-width:768px){ .dest-strip{ --rail-inset:20px; gap:18px; margin-inline:calc(var(--rail-inset) * -1); padding-inline:var(--rail-inset); scroll-padding-inline:var(--rail-inset); } } /* No edge fade on a desktop strip. hscroll.js still tracks .can-l/.can-r (the row is genuinely scrollable when there are enough categories), but the mask is a phone affordance: a mouse user gets no benefit from a faded last card and reads it as a rendering fault. The 18px gap above is why this became visible -- seven 160px cards plus 12px gaps measure 1192 inside a 1200px container and do not overflow at all, while 18px gaps measure 1228 and did. Keeping 12px on desktop restores the no-overflow fit; this rule is the guard for when an eighth category is added and it overflows regardless. Needs .dest-strip.can-* (0,2,0) to outrank [data-hscroll].can-* in base.css; the .can-l.can-r pair ties on specificity and is settled by source order. */ @media(min-width:769px){ .dest-strip.can-l,.dest-strip.can-r,.dest-strip.can-l.can-r{ -webkit-mask-image:none;mask-image:none; } } .dest-card{flex-shrink:0;width:160px;border-radius:var(--r12);overflow:hidden;cursor:pointer;position:relative;display:block;text-decoration:none;color:inherit;transition:transform var(--t),box-shadow var(--t)} .dest-card:hover{transform:translateY(-3px);box-shadow:var(--sh2)} /* The label and the count share the bottom of the card as a FLEX ROW, not as two independent absolutes. Absolutely positioned (left:10px / right:10px) they knew nothing about each other, so a long title simply ran underneath the badge -- "Олимпийска ривиера" put its last three letters behind the count. Only .dest-card-img's img and overlay are absolute now, so they stay out of flow and these two are its only flex children: the label takes the space it needs and wraps, margin-left:auto pins the badge right, and flex-shrink:0 stops a three-digit count being squeezed. The 10px padding reproduces the old offsets exactly. */ .dest-card-img{height:110px;position:relative;overflow:hidden;display:flex;align-items:flex-end;gap:8px;padding:10px;background:var(--blue-lt)} .dest-card-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .dest-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,30,60,.55) 0%,transparent 55%)} /* position:relative only to keep both above the absolute overlay. */ .dest-label{position:relative;z-index:1;min-width:0;color:var(--white);font-size:.82rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.4)} .dest-count{position:relative;z-index:1;margin-left:auto;flex-shrink:0;background:var(--orange);color:var(--white);font-size:.76rem;font-weight:700;padding:3px 9px;border-radius:100px} /* ── TRAVEL TYPES — light editorial cards ── */ /* Ported from NiamaVreme.html:1636-1674 (type-grid) and its CSS at NiamaVreme.html:454-472, with .type-ico (the sun/family/heart SVG badge) dropped -- admins cannot author SVG and per-icon uploads reintroduce a request per card, so the badge was cut by design decision. Its removal also drops the negative-top-margin trick that gave the card body breathing room under the photo (.type-ico had margin:-26px 0 14px), so .type-body gets padding-top restored directly instead. Same real- deviation as .dest-card above. */ .sec-eyebrow{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--orange);margin-bottom:9px} .sec-lead{font-size:.95rem;color:var(--muted);line-height:1.65;max-width:520px;margin:10px auto 0} .type-band{background:linear-gradient(180deg,#eef4fa 0%,#f7fafd 100%);border-block:1px solid var(--g200)} .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .type-card{position:relative;border-radius:var(--r16);overflow:hidden;cursor:pointer;background:var(--white);border:1px solid var(--g200);box-shadow:var(--sh1);display:flex;flex-direction:column;min-height:0;text-decoration:none;color:inherit;transition:transform var(--t),box-shadow var(--t),border-color var(--t)} .type-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--blue)} .type-card:hover .type-img img{transform:scale(1.05)} .type-img{position:relative;height:172px;overflow:hidden;flex-shrink:0;background:var(--blue-lt)} .type-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.6,.2,1)} .type-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,16,36,.3) 0%,transparent 55%)} .type-body{position:relative;z-index:2;padding:22px;display:flex;flex-direction:column;flex:1} .type-card h4{font-family:var(--fs);font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:7px;line-height:1.25} .type-card p{font-size:.85rem;color:var(--muted);line-height:1.65;margin-bottom:16px;flex:1} .type-link{display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:700;color:var(--blue);transition:gap var(--t);align-self:flex-start} .type-card:hover .type-link{gap:11px} /* ── RESPONSIVE ── */ /* Categories/travel-type rules ported from NiamaVreme.html's @media(max-width:1024px) block starting at line 774 -- dest-strip needs no override, it already scrolls horizontally at any width. */ @media(max-width:1024px){ .type-grid{grid-template-columns:1fr} .type-card{min-height:0} } /* ── HOT OFFERS — featured pair + grid ── */ /* Ported from NiamaVreme.html:1322-1573 (markup) and its CSS at NiamaVreme.html:305-428 (offer-card + featured-card families), plus the relevant subset of the NiamaVreme.html:773-823 @media(max-width:768px) block. Deviations from the prototype: - The whole card is a real to the offer detail page, same real- deviation as .dest-card/.type-card above, instead of a
. Because of that .btn-view is a here, not a