:root{--night:#0E1512;--night-2:#141D18;--moss:#1E2C23;--line:#2A3A31;--gold:#C9A96E;--cream:#EDE9E0;--muted:#B8B3A6;--dim:#A3ADA0; /* era #8C9489: 5,92:1. Prea stins pentru .sm la 0,82rem cu font subțire. */ --serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",system-ui,sans-serif;--max:1180px;--gutter:clamp(20px,4vw,48px)} *{box-sizing:border-box}html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);font-weight:300;font-size:1.05rem;line-height:1.75} img{max-width:100%;display:block}a{color:var(--cream);text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px} h1,h2,h3{font-family:var(--serif);font-weight:300;line-height:1.05;margin:0 0 .5em;letter-spacing:-.005em} h1{font-size:clamp(2.6rem,6.5vw,4.4rem)}h2{font-size:clamp(2rem,3.8vw,2.8rem)}h3{font-size:1.5rem} p{margin:0 0 1em}.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} .lab{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 1.4em} .hero .lab{font-weight:600;font-size:.78rem;text-shadow:0 0 10px rgba(201,169,110,.45),0 2px 8px rgba(0,0,0,.8)} .sm{font-size:.82rem;letter-spacing:.06em;color:var(--dim)} .muted{color:var(--muted)} section.center .narrow .muted{color:#fff;font-weight:400;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.7)}.center{text-align:center} .rule{width:36px;height:1px;background:var(--gold);margin:22px auto} .btn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--gold);color:var(--gold);padding:14px 30px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;background:transparent;cursor:pointer;font-family:var(--sans);transition:background .25s,color .25s} .btn:hover{background:var(--gold);color:var(--night)} .btn.fill{background:var(--gold);color:var(--night)}.btn.fill:hover{background:var(--cream)} /* header */ .nav{display:grid;grid-template-columns:1fr auto 1fr;width:100%;align-items:center;padding:22px var(--gutter);max-width:var(--max);margin:0 auto;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;position:relative;z-index:3} .nav ul{list-style:none;display:flex;gap:30px;margin:0;padding:0}.nav ul:last-of-type{justify-content:flex-end}.nav a{color:#fff;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.6)}.nav a:hover,.nav a[aria-current]{color:var(--gold)} .nav .book{color:var(--gold)}.logo{display:flex;align-items:flex-end;justify-content:center;gap:14px;padding:4px 0} .logo img{height:92px;width:auto;filter:drop-shadow(0 0 2px rgba(237,233,224,.9)) drop-shadow(0 0 18px rgba(201,169,110,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.7));animation:logoglow 5s ease-in-out infinite} @keyframes logoglow{0%,100%{filter:drop-shadow(0 0 2px rgba(237,233,224,.9)) drop-shadow(0 0 14px rgba(201,169,110,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.7))}50%{filter:drop-shadow(0 0 2px rgba(237,233,224,1)) drop-shadow(0 0 26px rgba(201,169,110,.75)) drop-shadow(0 8px 18px rgba(0,0,0,.75))}} .logo-la{font-family:var(--serif);font-style:italic;font-weight:700;font-size:2.2rem;color:var(--gold);line-height:1;padding-bottom:6px;text-shadow:0 0 12px rgba(201,169,110,.5),0 4px 10px rgba(0,0,0,.7)} @media (max-width:760px){.logo img{height:56px}.logo-la{font-size:1.4rem}} @media (max-width:760px){.nav ul{gap:16px;font-size:.66rem}.nav ul li:first-child{display:none}} /* hero */ .hero{position:relative;min-height:min(92vh,760px);display:flex;flex-direction:column;overflow:hidden} .hero .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9} .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,21,18,.5) 0%,rgba(14,21,18,.3) 50%,rgba(14,21,18,.95) 100%)} .hero .forest{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;pointer-events:none} .hero .copy{position:relative;text-align:center;padding:clamp(48px,9vh,110px) var(--gutter) 200px;max-width:760px;margin:0 auto;animation:rise 1.2s ease both} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .hero h1 em{font-style:italic} .hero .lede{color:#fff;max-width:52ch;margin:0 auto;font-size:1.08rem;font-weight:400;line-height:1.8;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8)} .bookbar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(14,21,18,.84);border:1px solid var(--gold);padding:18px 28px;max-width:calc(var(--max) - 2*var(--gutter));margin:0 auto} .bookbar .f{display:flex;gap:44px}.bookbar .f p{margin:0}.bookbar .f b{font-family:var(--serif);font-weight:300;font-size:1.2rem;display:block} @media (max-width:760px){.bookbar{flex-direction:column;align-items:stretch}.bookbar .f{justify-content:space-between;gap:12px}.hero .copy{padding-bottom:260px}} /* sections */ section{padding:clamp(64px,9vw,112px) 0} .narrow{max-width:640px;margin:0 auto} .gallery .col{display:grid;grid-template-rows:1fr 1fr;gap:20px} @media (max-width:760px){.gallery{grid-template-columns:1fr} .gallery .col img{height:200px}} .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0;list-style:none;padding-top:0;padding-bottom:0} .stats li{border-left:1px solid var(--gold);padding:10px 26px;transition:transform .5s ease,border-color .5s ease} .stats li:hover{transform:translateY(-6px);border-color:var(--cream)} .stats b{font-family:var(--serif);font-weight:700;font-size:3.6rem;display:block;line-height:1;margin-bottom:12px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 22px rgba(201,169,110,.45)} .stats .sm{color:#fff;font-weight:600;font-size:1.05rem;letter-spacing:.04em;line-height:1.55;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6)} .stats li{opacity:0;transform:translateY(18px)}.stats li.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease} .stats li.in:hover{transform:translateY(-6px)} @media (prefers-reduced-motion:reduce){.stats li{opacity:1;transform:none}} @media (max-width:900px){.stats{grid-template-columns:repeat(3,1fr);gap:28px 0;text-align:center}.stats li{border-left:0;padding:0 12px}.stats li:nth-child(n+4){grid-column:span 1}} @media (max-width:560px){.stats{grid-template-columns:1fr 1fr;gap:26px 12px;text-align:center}.stats li{border:0;padding:0}.stats li:last-child:nth-child(odd){grid-column:1 / -1}} .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} @media (max-width:820px){.split{grid-template-columns:1fr;gap:36px}} .split img{width:100%;height:340px;object-fit:cover;border:1px solid var(--line)} .roads{display:grid;gap:18px}.roads > div{display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:baseline} .roads b{font-family:var(--serif);font-weight:700;font-size:1.8rem;color:var(--gold);font-variant-numeric:tabular-nums;min-width:90px;display:inline-block}.roads h3{font-size:1.15rem;margin:0}.roads p{margin:2px 0 0} .framed{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.35;max-width:36ch;margin:0 auto 14px} .offer{border:1px solid var(--gold);padding:40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center} .offer .price{text-align:right}.offer .price b{font-family:var(--serif);font-weight:300;font-size:2.4rem;display:block;line-height:1;margin:6px 0 16px} @media (max-width:760px){.offer{grid-template-columns:1fr}.offer .price{text-align:left}} /* posts */ .posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px 28px;list-style:none;padding:0;margin:0} .posts img{aspect-ratio:3/2;object-fit:cover;border:1px solid var(--line);margin-bottom:16px}.posts h3{font-size:1.4rem}.posts h3 a:hover{color:var(--gold)} .post{max-width:680px;margin:0 auto}.post h2{font-size:1.8rem;margin-top:2.2em}.post figure{margin:2.4em 0}.post figure img{width:100%;height:auto;border:1px solid var(--line)}.post figcaption{font-size:.82rem;color:var(--dim);margin-top:10px} .callout{border-left:1px solid var(--gold);padding:18px 26px;margin:2.4em 0;color:var(--muted)}.callout .btn{margin-top:14px} /* booking */ .book{display:grid;grid-template-columns:1.2fr .8fr;gap:60px}@media (max-width:820px){.book{grid-template-columns:1fr}} .embed{border:1px solid var(--line);min-height:420px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--dim)} .rates{list-style:none;padding:0;margin:0}.rates li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)} .rates li span:last-child{font-family:var(--serif);font-size:1.2rem} form label{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin:20px 0 8px} input,select,textarea{width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--cream);font:inherit;font-size:1rem} input:focus,select:focus,textarea:focus{border-bottom-color:var(--gold)}select option{color:#000} .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px} /* footer */ footer{padding:64px 0 40px;font-size:.85rem;color:var(--dim);border-top:1px solid var(--line)} footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}footer ul{list-style:none;padding:0;margin:0}footer li{margin:8px 0}footer a{color:var(--muted)}footer a:hover{color:var(--cream)} @media (max-width:760px){footer .cols{grid-template-columns:1fr}} /* calendar */ #calendar{min-height:0;display:block;place-items:stretch;text-align:left;padding:0;color:var(--cream)} .cal-head,.cal-grid,.cal-legend{width:100%;box-sizing:border-box} .cal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:1.3rem} .cal-head button{background:none;border:1px solid var(--line);color:var(--gold);width:36px;height:36px;font-size:1.2rem;cursor:pointer} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:14px} .cal-w{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center;padding:6px 0} .cal-d{aspect-ratio:1;background:transparent;border:1px solid var(--line);color:var(--cream);font-family:var(--serif);font-size:1.05rem;cursor:pointer;padding:0} .cal-d:hover:not([disabled]){border-color:var(--gold)} .cal-d.past{opacity:.25;cursor:default} .cal-d.confirmat,.cal-d.extern{background:var(--moss);color:var(--dim);text-decoration:line-through;cursor:not-allowed} .cal-d.in_asteptare{background:repeating-linear-gradient(135deg,var(--night-2) 0 4px,var(--moss) 4px 8px);color:var(--dim)} .cal-d.range{background:rgba(201,169,110,.15);border-color:rgba(201,169,110,.4)} .cal-d.sel{background:var(--gold);color:var(--night);border-color:var(--gold)} .cal-legend{display:flex;gap:18px;padding:0 18px 16px;margin:0;font-size:.8rem;color:var(--dim)} .cal-legend i{display:inline-block;width:12px;height:12px;border:1px solid var(--line);vertical-align:-2px;margin-right:6px} .cal-legend .l-confirmat{background:var(--moss)}.cal-legend .l-in_asteptare{background:repeating-linear-gradient(135deg,var(--night-2) 0 3px,var(--moss) 3px 6px)} #form-status{min-height:1.4em;color:var(--gold)} /* pădure: adâncime și mișcare */ .hero .forest{overflow:visible} .forest .fl{will-change:transform} .forest #f1 use{transform-box:fill-box;transform-origin:50% 100%;animation:sway 9s ease-in-out infinite alternate} .forest #f1 use:nth-child(2n){animation-duration:11s;animation-delay:-3s} .forest #f1 use:nth-child(3n){animation-duration:13s;animation-delay:-6s} @keyframes sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}} .forest .mist{animation:drift 26s ease-in-out infinite alternate}.forest .m2{animation-duration:34s;animation-direction:alternate-reverse} @keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(30px)}} .forest .win{animation:flicker 4s ease-in-out infinite}.forest .w2{animation-delay:-1.7s} @keyframes flicker{0%,100%{opacity:.85}50%{opacity:1}} /* date în bara de rezervare */ .dwrap{position:relative;display:block} .dwrap .dshow{width:9ch;padding:0;border:0;font-family:var(--serif);font-size:1.2rem;color:var(--cream);background:transparent;cursor:pointer} .dwrap .dshow::placeholder{color:var(--dim)} .dwrap .dreal{position:absolute;left:0;top:100%;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0} /* galerie: casa înaltă la stânga, cele două dormitoare egale, late, unul sub altul */ .gallery3{display:grid;grid-template-columns:2fr 3fr;grid-template-rows:250px 250px;gap:18px} .gallery3 figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line)} .gallery3 figure:nth-child(1){grid-column:1;grid-row:1 / 3} .gallery3 figure:nth-child(2){grid-column:2;grid-row:1} .gallery3 figure:nth-child(3){grid-column:2;grid-row:2} .gallery3 img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease} .gallery3 figure:hover img{transform:scale(1.04)} .gallery3 figure:nth-child(1) img{object-position:50% 35%} .gallery3 figure:nth-child(2) img{object-position:50% 60%} .gallery3 figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(14,21,18,.85));text-shadow:0 1px 4px rgba(0,0,0,.8)} @media (max-width:900px){.gallery3{grid-template-rows:190px 190px}} @media (max-width:560px){.gallery3{grid-template-rows:150px 150px;gap:10px}.gallery3 figcaption{font-size:.85rem;padding:20px 10px 8px}} /* umbră pe tot textul */ h1,h2,h3,p,li,blockquote,.lab,.sm,.muted,figcaption,label,.btn,footer{text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6)} .lab,.hero .lab{text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 12px rgba(201,169,110,.45)} .stats b{text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 16px rgba(201,169,110,.35)} input,select,textarea,button{text-shadow:none} .btn.fill{text-shadow:none} .exp-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:48px} .exp-nav a{border:1px solid var(--line);padding:10px 18px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase} .exp-nav a:hover,.exp-nav a[aria-current]{border-color:var(--gold);color:var(--gold)} .exp-list{list-style:none;padding:0;margin:0;max-width:820px;margin:0 auto} .exp-list li{display:grid;grid-template-columns:150px 1fr;gap:28px;padding:30px 0;border-bottom:1px solid var(--line)} .exp-list h3{font-size:1.5rem;margin:0 0 6px}.exp-list h3 a:hover{color:var(--gold)} @media (max-width:560px){.exp-list li{grid-template-columns:1fr;gap:8px}} /* widget experiențe — v2 */ .exp .narrow{max-width:720px} .exp-arh{position:relative;display:inline-flex;justify-content:center;gap:4px;margin:44px auto 18px;padding:6px;border:1px solid var(--line);border-radius:999px;background:rgba(237,233,224,.03)} .exp-arh-wrap{text-align:center} .exp-desc{min-height:1.6em;margin:0 auto 44px;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--muted);transition:opacity .3s} .exp-desc.fade{opacity:0} .exp-arh button{position:relative;z-index:1;background:transparent;border:0;color:var(--muted);padding:12px 22px;border-radius:999px;cursor:pointer;text-align:center;transition:color .35s;font-family:var(--sans);text-shadow:none} .exp-arh button span{display:block;font-family:var(--serif);font-size:1.2rem;line-height:1.1;white-space:nowrap} .exp-arh button small{display:none} .exp-arh button:hover{color:var(--cream)} .exp-arh button[aria-selected="true"]{color:var(--night)} .exp-arh button[aria-selected="true"] small{opacity:.85} .exp-arh .exp-pill{position:absolute;top:6px;left:0;height:calc(100% - 12px);width:0;border-radius:999px;background:var(--gold);box-shadow:0 0 24px rgba(201,169,110,.35);transition:left .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1)} .exp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .exp-cat{position:relative;background:rgba(237,233,224,.03);border:1px solid var(--line);border-radius:14px;padding:22px 20px 20px;opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease,border-color .3s} .exp-grid.in .exp-cat{opacity:1;transform:none} .exp-grid.in .exp-cat:nth-child(1){transition-delay:0s}.exp-grid.in .exp-cat:nth-child(2){transition-delay:.08s}.exp-grid.in .exp-cat:nth-child(3){transition-delay:.16s}.exp-grid.in .exp-cat:nth-child(4){transition-delay:.24s}.exp-grid.in .exp-cat:nth-child(5){transition-delay:.32s} .exp-cat:hover{border-color:rgba(201,169,110,.6)} .exp-cat::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;background:var(--gold);opacity:.8} .exp-cat h3{font-size:1.45rem;margin:0 0 4px;text-align:center}.exp-cat h3 a:hover{color:var(--gold)} .exp-sub{font-size:.8rem;color:var(--muted);margin:0 0 16px;line-height:1.5;text-align:center;min-height:2.4em} .exp-cat ul{list-style:none;padding:0;margin:0} .exp-cat li{padding:12px 0;border-top:1px solid var(--line);opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease} .exp-grid.in .exp-cat li{opacity:1;transform:none} .exp-grid.in .exp-cat li:nth-child(1){transition-delay:.25s}.exp-grid.in .exp-cat li:nth-child(2){transition-delay:.38s}.exp-grid.in .exp-cat li:nth-child(3){transition-delay:.51s} .exp-cat li a{display:block} .exp-cat li b{font-weight:600;font-size:.98rem;display:block;line-height:1.3}.exp-cat li a:hover b{color:var(--gold)} .exp-km{display:inline-block;font-size:.72rem;color:var(--gold);letter-spacing:.06em;margin-top:3px;font-variant-numeric:tabular-nums} .exp-cat li p{font-size:.85rem;color:var(--muted);margin:5px 0 0;line-height:1.5} .exp-more{display:block;text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)} .exp-more:hover{color:var(--cream)} @media (max-width:1100px){.exp-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:760px){.exp-arh{display:flex;flex-wrap:wrap;border-radius:18px}.exp-arh button{padding:10px 14px;flex:1 1 40%}.exp-arh button span{font-size:1rem}.exp-arh .exp-pill{border-radius:14px}.exp-grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.exp-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.exp-cat,.exp-cat li{opacity:1;transform:none;transition:none}.exp-arh .exp-pill{transition:none}} /* buton Drum */ .drum{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;padding:10px 20px 10px 12px;border:1px solid var(--gold);border-radius:999px;color:var(--gold);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.8);position:relative;isolation:isolate;overflow:hidden;transition:color .35s,transform .3s,box-shadow .35s} .drum::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-101%);transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:-1} .drum:hover{color:var(--night);text-shadow:none;transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,110,.25)} .drum:hover::before{transform:translateX(0)} .drum-ic{display:inline-flex;flex:0 0 auto;width:26px;height:26px;line-height:0;border-radius:50%;border:1px solid currentColor;align-items:center;justify-content:center;transition:transform .4s} .drum-ic svg{display:block} .drum:hover .drum-ic{transform:rotate(-12deg) scale(1.08)} .drum small{font-size:.68rem;font-weight:400;letter-spacing:.06em;text-transform:none;opacity:.85;margin-left:4px;line-height:1} .drum-sm{padding:7px 14px 7px 9px;font-size:.62rem;letter-spacing:.1em;margin-top:8px;gap:7px}.drum-sm .drum-ic{width:20px;height:20px} .exp-list li{align-items:start} .exp-time i,.exp-km i{font-style:normal;font-variant-numeric:tabular-nums} .intro{font-size:1.15rem;line-height:1.8} .drum-ext{margin-left:8px;border-color:var(--muted);color:var(--cream)}.drum-ext::before{background:var(--cream)}.drum-ext:hover{box-shadow:none;color:var(--night)} /* cifre lizibile (1 nu mai arată ca I) */ .stats b,.roads b,.exp-time b,.exp-km,.offer .price b,.bookbar .f b,.cal-head,.cal-d,.rates li span:last-child,h1,h2,h3{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1} /* motto */ .motto{position:relative;z-index:2;display:flex;justify-content:center;align-items:baseline;gap:.35em;margin:-4px auto 0;padding-bottom:14px;width:max-content;max-width:100%;font-family:var(--serif);font-style:italic;font-weight:700;font-size:1.7rem;letter-spacing:.04em;color:var(--gold);text-shadow:0 2px 4px rgba(0,0,0,.95),0 6px 18px rgba(0,0,0,.7),0 0 26px rgba(201,169,110,.45)} .motto span{display:inline-block;opacity:0;transform:translateY(14px) rotate(-1.5deg);animation:mottoIn .9s cubic-bezier(.2,.8,.2,1) forwards} .motto span:nth-child(1){animation-delay:.35s}.motto span:nth-child(2){animation-delay:.55s}.motto span:nth-child(3){animation-delay:.75s} @keyframes mottoIn{to{opacity:1;transform:none}} .motto-line{position:absolute;left:50%;bottom:0;height:1px;width:0;background:var(--gold);box-shadow:0 0 12px rgba(201,169,110,.8);transform:translateX(-50%);animation:mottoLine 1s 1.05s cubic-bezier(.2,.8,.2,1) forwards} @keyframes mottoLine{to{width:70%}} .motto:hover span{text-shadow:0 2px 4px rgba(0,0,0,.95),0 0 34px rgba(201,169,110,.75)} @media (max-width:760px){.motto{font-size:1.2rem}} .exp-cat li a.drum{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;padding:8px 12px 8px 8px;margin:10px 0 0;white-space:nowrap;letter-spacing:.08em;font-size:.6rem} .exp-cat li a.drum-ext{margin-top:6px} .exp-cat li a.drum .drum-ic{margin:0} .stats .sm{font-size:1.1rem;letter-spacing:.06em} /* hero pagini experiențe */ .exp-hero{position:relative;overflow:hidden;min-height:min(70vh,620px);display:flex;flex-direction:column;background:var(--night)} .exp-hero .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transform:scale(1.06)} .exp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,21,18,.55) 0%,rgba(14,21,18,.35) 45%,rgba(14,21,18,.97) 100%);z-index:1} .exp-hero .nav{position:relative;z-index:2} .exp-hero .wrap{position:relative;z-index:2;padding-top:clamp(28px,5vh,60px);padding-bottom:clamp(40px,7vh,80px);animation:rise 1.1s ease both} .exp-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 30px rgba(0,0,0,.6)} .exp-hero .intro{color:#fff;font-weight:400;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8)} .exp-hero + section{padding-top:clamp(40px,6vw,72px)} /* timp și distanță: poză rotundă + două chip-uri */ .exp-time{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .exp-photo{display:block;width:120px;height:120px;border-radius:50%;overflow:hidden;border:1px solid var(--gold);box-shadow:0 0 0 6px rgba(201,169,110,.08),0 10px 30px rgba(0,0,0,.6);margin-bottom:6px} .exp-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease} .exp-list li:hover .exp-photo img{transform:scale(1.08)} .exp-initials{display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:3rem;color:var(--gold);background:radial-gradient(circle at 50% 35%,rgba(201,169,110,.18),rgba(14,21,18,.9))} .chip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.8rem;letter-spacing:.06em;color:var(--muted);white-space:nowrap} .chip b{font-family:var(--serif);font-weight:700;font-size:1.5rem;line-height:1;color:var(--gold);font-variant-numeric:lining-nums tabular-nums} .chip b.burn{animation:burn 1.3s ease-out} @keyframes burn{0%{color:#fff;text-shadow:0 0 6px #fff,0 0 18px #E8B45C,0 0 34px #D85A30}60%{color:#E8B45C;text-shadow:0 0 8px #E8B45C,0 0 22px rgba(216,90,48,.7)}100%{color:var(--gold);text-shadow:0 2px 6px rgba(0,0,0,.9)}} @media (max-width:560px){.exp-list li{grid-template-columns:1fr;gap:14px}.exp-time{flex-direction:row;flex-wrap:wrap;justify-content:center}.exp-photo{width:84px;height:84px;margin:0}} .exp-hero .lab,.exp-list~*.lab,section .narrow .lab{font-weight:700;font-size:.85rem;letter-spacing:.28em;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.8),0 0 14px rgba(201,169,110,.45)} .exp-list p strong,.exp-cat li p strong{color:var(--cream);font-weight:600} /* reveal la scroll */ .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)} .rv.in{opacity:1;transform:none} .stats li.rv{transition-delay:0s} @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}} /* oferta — modern, dinamic */ .offer{position:relative;overflow:hidden;background:rgba(237,233,224,.025);border:1px solid var(--gold);border-radius:18px;padding:44px;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s} .offer:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.45),0 0 40px rgba(201,169,110,.15)} .offer-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 70%,rgba(201,169,110,.35) 85%,transparent 100%);animation:spin 9s linear infinite;pointer-events:none;opacity:.7} .offer::after{content:"";position:absolute;inset:1px;border-radius:17px;background:var(--night);z-index:0} .offer>div{position:relative;z-index:1} @keyframes spin{to{transform:rotate(360deg)}} .offer .lab{font-weight:700;letter-spacing:.28em;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 14px rgba(201,169,110,.45)} .offer h2{font-size:clamp(1.9rem,3.4vw,2.6rem)} .offer .price b{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1;font-size:2.8rem;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 22px rgba(201,169,110,.35)} .offer .price b [data-n]{color:var(--gold)} .offer .price .sm{font-variant-numeric:lining-nums} .offer-btn{background:var(--gold);color:var(--night);border-color:var(--gold);font-weight:700;text-shadow:none;box-shadow:0 0 0 0 rgba(201,169,110,.5);animation:pulse 3s ease-in-out infinite} .offer-btn:hover{background:var(--cream);transform:translateY(-2px)} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,169,110,.45)}50%{box-shadow:0 0 0 14px rgba(201,169,110,0)}} @media (prefers-reduced-motion:reduce){.offer-glow,.offer-btn{animation:none}} /* pagina Casa */ .gallery3{grid-template-columns:1.3fr .8fr 1fr;grid-template-rows:none;grid-auto-rows:420px} .gallery3 figure:nth-child(1),.gallery3 figure:nth-child(2),.gallery3 figure:nth-child(3){grid-column:auto;grid-row:auto} .ph{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--night-2)} .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s ease,filter .6s} .ph:hover img{transform:scale(1.05);filter:brightness(1.08)} .ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 20px 16px;background:linear-gradient(180deg,transparent,rgba(14,21,18,.9));font-family:var(--serif);font-style:italic;color:var(--cream)} .ph figcaption b{display:block;font-style:normal;font-weight:600;font-family:var(--sans);font-size:.95rem;letter-spacing:.04em} .ph figcaption span{display:block;font-family:var(--sans);font-style:normal;font-size:.82rem;color:var(--muted)} .split .ph{height:360px}.split .ph img{height:100%} .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rooms .ph{height:300px} .rooms.four{grid-template-columns:repeat(4,1fr)}.rooms.four .ph{height:260px} @media (max-width:900px){.rooms,.rooms.four{grid-template-columns:1fr 1fr}.gallery3{grid-template-columns:1fr 1fr;grid-auto-rows:260px}} @media (max-width:560px){.rooms,.rooms.four,.gallery3{grid-template-columns:1fr;grid-auto-rows:240px}.rooms .ph,.rooms.four .ph{height:240px}} .home-gal{grid-template-columns:2fr 3fr;grid-template-rows:250px 250px} .home-gal figure:nth-child(1){grid-column:1;grid-row:1 / 3}.home-gal figure:nth-child(2){grid-column:2;grid-row:1}.home-gal figure:nth-child(3){grid-column:2;grid-row:2} @media (max-width:900px){.home-gal{grid-template-rows:190px 190px}}@media (max-width:560px){.home-gal{grid-template-columns:2fr 3fr;grid-template-rows:150px 150px}} /* oferta v2 */ .offer{background:linear-gradient(135deg,rgba(237,233,224,.05),rgba(237,233,224,.015))} .offer::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 60%,var(--gold) 80%,#fff 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:borderspin 6s linear infinite;z-index:2;pointer-events:none} @property --a{syntax:"";inherits:false;initial-value:0deg} @keyframes borderspin{to{--a:360deg}} .offer-glow{display:none} .offer .shine{position:absolute;top:0;bottom:0;width:40%;left:-50%;background:linear-gradient(100deg,transparent,rgba(237,233,224,.06),transparent);transform:skewX(-15deg);animation:shine 7s ease-in-out infinite;z-index:1;pointer-events:none} @keyframes shine{0%,60%{left:-50%}100%{left:130%}} .offer .price{text-align:right} .offer .price b{display:block;font-size:3.1rem;letter-spacing:-.01em} .offer .price b [data-n]{color:var(--gold);text-shadow:0 0 22px rgba(201,169,110,.55),0 2px 6px rgba(0,0,0,.9)} .offer-btn{padding:16px 34px;font-size:.78rem;letter-spacing:.22em} @media (max-width:760px){.offer{padding:30px 24px}.offer .price{text-align:left}} /* harta */ .map-card{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--night-2)} .map-card iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.4) brightness(.9)} .map-card .map-cta{filter:none} .map-card .map-cta{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2} /* WhatsApp în meniu */ .nav a.wa{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(201,169,110,.55);border-radius:999px;padding:7px 14px 7px 11px;color:var(--cream);position:relative;transition:background .3s,border-color .3s,transform .3s} .nav a.wa:hover{background:rgba(201,169,110,.12);border-color:var(--gold);color:var(--gold);transform:translateY(-1px)} .nav a.wa svg{color:#6fcf8a;filter:drop-shadow(0 0 6px rgba(111,207,138,.6))} @keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(111,207,138,.6)}70%{box-shadow:0 0 0 9px rgba(111,207,138,0)}100%{box-shadow:0 0 0 0 rgba(111,207,138,0)}} @media (max-width:760px){.nav a.wa span{display:none}.nav a.wa{padding:8px}} /* buton flotant WhatsApp pe mobil */ .wa-float{display:flex;position:fixed;right:20px;bottom:20px;z-index:50;width:58px;height:58px;border-radius:50%;background:#1f8f4a;color:#fff;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 0 rgba(111,207,138,.5);animation:wapulse 2.4s ease-out infinite;transition:transform .3s} .wa-float:hover{transform:scale(1.08)} .wa-float::after{content:"WhatsApp";position:absolute;right:68px;top:50%;transform:translateY(-50%);background:var(--night);color:var(--cream);border:1px solid var(--line);padding:6px 12px;border-radius:999px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s} .wa-float:hover::after{opacity:1} @media (max-width:760px){.wa-float{right:16px;bottom:16px;width:54px;height:54px}.wa-float::after{display:none}} /* meniu pe tabletă/mobil: logo centrat sus, linkurile pe un rând, distribuite egal */ @media (max-width:900px){ .nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 0;padding:14px 12px 10px} .nav .logo{order:-1;flex:0 0 100%;justify-content:center;padding:0 0 6px} .nav ul{display:contents} .nav ul li{list-style:none;flex:1 1 0;text-align:center;font-size:.68rem;letter-spacing:.14em;padding:0 2px;white-space:nowrap} .nav ul li:first-child{display:block} .nav ul li a{display:inline-block} .nav a.wa{padding:7px} .nav a.wa span{display:none} .motto{margin-top:0;font-size:1.15rem} } @media (max-width:480px){.nav ul{font-size:.62rem;letter-spacing:.1em}.logo img{height:48px}.logo-la{font-size:1.2rem}} /* meniu desktop: aceeași structură — logo centrat sus, linkuri distribuite egal dedesubt */ .nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 0;padding:18px var(--gutter) 8px;max-width:900px} .nav .logo{order:-1;flex:0 0 100%;justify-content:center;padding:0 0 10px} .nav ul{display:contents} .nav ul li{list-style:none;flex:1 1 0;text-align:center;white-space:nowrap} .nav ul li a{display:inline-block} .nav a.wa span{display:inline} @media (max-width:900px){.nav a.wa span{display:none}} /* meniu mai mare */ .nav{font-size:.92rem;letter-spacing:.22em;max-width:1000px;gap:10px 0} .nav a.wa{padding:9px 18px 9px 13px;gap:9px}.nav a.wa svg{width:19px;height:19px} @media (max-width:900px){.nav ul li{font-size:.78rem}} @media (max-width:480px){.nav ul li{font-size:.68rem}} @media (max-width:900px){.nav ul li{font-size:.86rem;letter-spacing:.16em}.logo img{height:64px}.logo-la{font-size:1.5rem}.nav a.wa{padding:8px 10px}} @media (max-width:480px){.nav ul li{font-size:.74rem;letter-spacing:.1em}.logo img{height:56px}.nav ul li{padding:0}} /* arhetipuri pe mobil: o linie, centrat */ .exp-arh button .short{display:none} @media (max-width:760px){ .exp-arh{display:flex;flex-wrap:nowrap;justify-content:center;width:100%;border-radius:999px;padding:4px;gap:2px} .exp-arh button{flex:1 1 0;padding:9px 4px;min-width:0} .exp-arh button span{font-size:.9rem;white-space:nowrap} .exp-arh button .full{display:none}.exp-arh button .short{display:block} .exp-arh .exp-pill{border-radius:999px} } @media (max-width:400px){.exp-arh button span{font-size:.8rem}} #in-show,#out-show{cursor:pointer;font-family:var(--serif);font-size:1.15rem} .exp-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem)} /* FAQ */ .faq details{border-top:1px solid var(--line);padding:18px 0}.faq details:last-of-type{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;font-family:var(--serif);font-size:1.35rem;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:1.6rem;line-height:1;transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{color:var(--muted);margin:12px 0 0;max-width:62ch} .faq details a{color:var(--gold)} /* pagina de plată */ .pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;text-align:center} .pay-card{border:1px solid var(--gold);border-radius:16px;padding:28px 22px;background:rgba(237,233,224,.03)} .pay-card h2{font-size:1.7rem;margin-bottom:14px}.pay-card img,.qrbox{display:block;width:220px;height:220px;margin:0 auto 14px;background:#fff;border-radius:12px;padding:8px} .qrbox svg{width:100%;height:100%;display:block} @media (max-width:760px){.pay-grid{grid-template-columns:1fr}} /* calendar: culori clare */ .cal-d{background:rgba(120,190,120,.12);border-color:rgba(120,190,120,.45);color:#CDEBCF} .cal-d:hover:not([disabled]):not(.confirmat):not(.extern):not(.in_asteptare){border-color:#7BD389;background:rgba(120,190,120,.22)} .cal-d.past{background:transparent;border-color:var(--line);color:var(--dim);opacity:.35} .cal-d.in_asteptare{background:rgba(70,130,200,.28);border-color:#5A9BE0;color:#BFD9FA;text-decoration:none;cursor:not-allowed} .cal-d.confirmat,.cal-d.extern{background:rgba(200,60,60,.28);border-color:#E05A5A;color:#F6C2C2;text-decoration:line-through;cursor:not-allowed} .cal-d.range{background:rgba(201,169,110,.28);border-color:var(--gold);color:var(--cream)} .cal-d.sel{background:var(--gold);color:var(--night);border-color:var(--gold)} .cal-legend i{width:14px;height:14px;border-radius:3px} .cal-legend .l-free{background:rgba(120,190,120,.35);border-color:#7BD389} .cal-legend .l-in_asteptare{background:rgba(70,130,200,.5);border-color:#5A9BE0} .cal-legend .l-confirmat{background:rgba(200,60,60,.5);border-color:#E05A5A} /* hero-uri interioare: fără spațiu gol sub text */ .exp-hero{min-height:0} .exp-hero .wrap{padding-top:clamp(18px,3vh,36px);padding-bottom:clamp(28px,4vh,44px)} .exp-hero + section{padding-top:clamp(28px,4vw,48px)} .exp-hero .intro{margin-bottom:.4em} /* footer nou */ footer .cols4{grid-template-columns:1.3fr 1fr 1fr 1.4fr;gap:36px;align-items:start} footer .fcol.center{text-align:center} footer .lab{font-size:.68rem} .insta{display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--cream);padding:14px 22px;border:1px solid var(--line);border-radius:14px;transition:border-color .3s,transform .3s} .insta:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .insta span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase} .review textarea{width:100%;background:rgba(237,233,224,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--cream);font:inherit;font-size:.95rem;margin:8px 0 10px;resize:vertical} .stars{display:flex;justify-content:center;gap:4px} .star{background:none;border:0;font-size:1.7rem;line-height:1;color:var(--line);cursor:pointer;transition:color .2s,transform .2s;text-shadow:none} .star:hover,.star.on{color:var(--gold);transform:scale(1.12)} .review .btn{padding:11px 22px;font-size:.7rem} .review-note{margin:8px 0 0} .ratings{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;text-align:left} .ratings li{display:grid;grid-template-columns:90px auto 1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.82rem} .ratings .plat{color:var(--cream);font-weight:600;letter-spacing:.04em} .ratings .score{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--gold);font-variant-numeric:lining-nums} .ratings .strs{position:relative;display:inline-block;color:var(--line);letter-spacing:2px;font-size:.95rem;line-height:1;white-space:nowrap} .ratings .strs i{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold);font-style:normal;white-space:nowrap} .ratings .cnt{color:var(--dim);white-space:nowrap} footer .legal{margin:36px 0 0;text-align:center;font-size:.74rem;color:var(--dim);letter-spacing:.04em} @media (max-width:1000px){footer .cols4{grid-template-columns:1fr 1fr}} @media (max-width:560px){footer .cols4{grid-template-columns:1fr}.ratings li{grid-template-columns:80px auto 1fr;grid-auto-rows:auto}.ratings .cnt,.ratings li a{grid-column:2 / -1}} .ratings .score small{font-size:.7rem;color:var(--dim);font-weight:400;margin-left:2px} .ratings .plat{display:inline-flex;align-items:center;gap:8px} .ratings .plat img{width:24px;height:24px;flex:0 0 auto;object-fit:contain;background:transparent} .ratings li{grid-template-columns:130px auto 1fr auto auto} @media (max-width:560px){.ratings li{grid-template-columns:130px auto 1fr}} /* oferte */ .top3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .top3-card{position:relative;display:block;border:1px solid var(--line);border-radius:16px;padding:26px 22px 22px;background:rgba(237,233,224,.03);transition:transform .4s,border-color .3s} .top3-card:hover{transform:translateY(-4px);border-color:var(--gold)} .top3-card .num{position:absolute;top:-14px;left:22px;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--night);font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.1rem} .top3-card img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--gold);display:block;margin:6px auto 14px} .top3-card h3{font-size:1.35rem;text-align:center;margin:0 0 4px}.top3-card .sm{text-align:center;color:var(--gold)}.top3-card .muted{font-size:.9rem;line-height:1.55;margin:10px 0 0} .plan{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:0} .plan > li{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--line)} .plan > li:last-child{border-bottom:1px solid var(--line)} .plan b{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--gold)}.plan p{margin:0} .oferte-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .oferta-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(237,233,224,.03);transition:transform .4s,border-color .3s} .oferta-card:hover{transform:translateY(-4px);border-color:var(--gold)} .oferta-card img{width:100%;height:180px;object-fit:cover;display:block}.oferta-card div{padding:18px 20px 22px}.oferta-card h3{font-size:1.3rem;margin:6px 0 8px} @media (max-width:900px){.top3,.oferte-grid{grid-template-columns:1fr}.plan > li{grid-template-columns:1fr;gap:6px}} .plan .ic{display:block;margin-top:8px;color:var(--gold);font-size:.92rem;letter-spacing:.02em} /* harta de dragoste – timeline */ .lovemap{position:relative;margin:36px 0 0;padding-left:0} .lovemap::before{content:"";position:absolute;left:190px;top:0;bottom:0;width:1px;background:linear-gradient(var(--gold),rgba(201,169,110,.15))} .lovemap > li{display:grid;grid-template-columns:170px 1fr;gap:44px;padding:26px 0;border:0;position:relative} .lovemap .dot{position:absolute;left:183px;top:30px;width:15px;height:15px;border-radius:50%;background:var(--night);border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(201,169,110,.12),0 0 18px rgba(201,169,110,.5)} .lovemap li.in .dot{animation:pulse 3s ease-in-out infinite} .lovemap .when b{display:block;font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--gold)} .lovemap .when .sm{display:block;margin-top:4px} .lovemap .what{position:relative;padding-left:0} .lovemap .when{display:flex;flex-direction:column;align-items:flex-start;gap:6px} .lovemap .pin{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--gold);box-shadow:0 0 0 6px rgba(201,169,110,.08),0 10px 30px rgba(0,0,0,.5);margin:8px 0 6px} .lovemap .when .drum-sm{margin-top:0} .lovemap .what p{margin:0 0 12px} .hl{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px} .hl li{display:inline-block;border:1px solid rgba(201,169,110,.5);border-radius:999px;padding:6px 12px;font-size:.82rem;color:var(--cream);background:rgba(201,169,110,.06);transition:transform .3s,background .3s,border-color .3s;opacity:0;transform:translateY(8px)} .in .hl li{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease,background .3s,border-color .3s} .in .hl li:nth-child(1){transition-delay:.15s}.in .hl li:nth-child(2){transition-delay:.3s}.in .hl li:nth-child(3){transition-delay:.45s}.in .hl li:nth-child(4){transition-delay:.6s} .hl li:hover{background:rgba(201,169,110,.2);border-color:var(--gold);transform:translateY(-2px)} .lovemap .drum-sm{display:inline-flex;margin-top:2px} @media (max-width:760px){.lovemap::before{left:8px}.lovemap > li{grid-template-columns:1fr;gap:10px;padding-left:28px}.lovemap .dot{left:1px}.lovemap .pin{width:96px;height:96px}} .hl li{display:inline-flex;align-items:center;gap:7px} .hl .ico,.lab-ico .ico{color:var(--gold);flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(201,169,110,.5))} .lab-ico{display:inline-flex;align-items:center;gap:8px;justify-content:center} /* inima care bate + sclipici */ .heart-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .heart-wrap .ico{width:36px;height:36px;color:#E8102E;fill:#E8102E;stroke:#FF5C6C;filter:drop-shadow(0 0 8px rgba(232,16,46,.9)) drop-shadow(0 0 18px rgba(255,60,80,.6));animation:heartbeat 1.6s ease-in-out infinite;transform-origin:center} @keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.22)}28%{transform:scale(1)}42%{transform:scale(1.14)}70%{transform:scale(1)}} .heart-wrap .sp{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 8px #FFE7A3;opacity:0;animation:sparkle 2.4s ease-in-out infinite} .heart-wrap .sp:nth-child(2){top:2px;left:6px;animation-delay:.2s}.heart-wrap .sp:nth-child(3){top:0;right:8px;animation-delay:.9s;width:4px;height:4px}.heart-wrap .sp:nth-child(4){bottom:4px;left:2px;animation-delay:1.4s;width:3px;height:3px}.heart-wrap .sp:nth-child(5){bottom:6px;right:2px;animation-delay:.6s}.heart-wrap .sp:nth-child(6){top:18px;right:-4px;animation-delay:1.9s;width:4px;height:4px} @keyframes sparkle{0%,100%{opacity:0;transform:scale(.4) translateY(0)}30%{opacity:1;transform:scale(1.2) translateY(-3px)}60%{opacity:.6;transform:scale(.8) translateY(-6px)}} .lab-ico.romantic{font-size:.85rem} @media (prefers-reduced-motion:reduce){.heart-wrap .ico,.heart-wrap .sp{animation:none}} .lovemap .when .drum-sm{margin-top:6px;text-transform:none;letter-spacing:.04em;font-size:.8rem;padding:7px 14px 7px 9px} /* bradul care respiră, cu lumini */ .tree-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .tree-wrap .ico{width:36px;height:36px;color:#3DBE5B;fill:#2E9E48;stroke:#7FE29A;filter:drop-shadow(0 0 8px rgba(61,190,91,.9)) drop-shadow(0 0 18px rgba(120,255,150,.55));animation:treebreath 2.8s ease-in-out infinite;transform-origin:50% 100%} @keyframes treebreath{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-2deg)}60%{transform:scale(1.04) rotate(2deg)}} .tree-wrap .sp{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 8px #FFE7A3;opacity:0;animation:sparkle 2.6s ease-in-out infinite} .tree-wrap .sp:nth-child(2){top:4px;left:8px;animation-delay:.1s}.tree-wrap .sp:nth-child(3){top:12px;right:6px;animation-delay:.8s;width:4px;height:4px;background:#FF8A5B;box-shadow:0 0 8px #FF8A5B}.tree-wrap .sp:nth-child(4){bottom:8px;left:4px;animation-delay:1.5s;width:3px;height:3px}.tree-wrap .sp:nth-child(5){top:-2px;left:50%;animation-delay:.5s;background:#FF8A5B;box-shadow:0 0 8px #FF8A5B}.tree-wrap .sp:nth-child(6){bottom:12px;right:0;animation-delay:2s;width:4px;height:4px} @media (prefers-reduced-motion:reduce){.tree-wrap .ico,.tree-wrap .sp{animation:none}} .fam-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .fam-wrap .ico{width:36px;height:36px;color:#FFB84D;stroke:#FFD48A;filter:drop-shadow(0 0 8px rgba(255,184,77,.9)) drop-shadow(0 0 18px rgba(255,200,120,.5));animation:fambounce 2.2s ease-in-out infinite;transform-origin:50% 100%} @keyframes fambounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-3px) scale(1.06)}60%{transform:translateY(0) scale(.98)}} .fam-wrap .sp{position:absolute;width:5px;height:5px;border-radius:50%;background:#FFE7A3;box-shadow:0 0 8px #FFE7A3;opacity:0;animation:sparkle 2.4s ease-in-out infinite} .fam-wrap .sp:nth-child(2){top:2px;left:6px;animation-delay:.2s}.fam-wrap .sp:nth-child(3){top:0;right:8px;animation-delay:.9s;width:4px;height:4px}.fam-wrap .sp:nth-child(4){bottom:6px;left:2px;animation-delay:1.4s;width:3px;height:3px}.fam-wrap .sp:nth-child(5){bottom:8px;right:2px;animation-delay:.6s} @media (prefers-reduced-motion:reduce){.fam-wrap .ico,.fam-wrap .sp{animation:none}} .boot-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .boot-wrap .ico{width:36px;height:36px;color:#C9A96E;stroke:#E8D3A6;filter:drop-shadow(0 0 8px rgba(201,169,110,.9)) drop-shadow(0 0 18px rgba(201,169,110,.45));animation:step 1.4s ease-in-out infinite;transform-origin:20% 90%} @keyframes step{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-10deg) translateY(-3px)}60%{transform:rotate(4deg) translateY(0)}} .boot-wrap .sp{position:absolute;width:4px;height:4px;border-radius:50%;background:#C9A96E;box-shadow:0 0 6px #C9A96E;opacity:0;animation:sparkle 2.4s ease-in-out infinite} .boot-wrap .sp:nth-child(2){bottom:2px;left:2px;animation-delay:.3s}.boot-wrap .sp:nth-child(3){bottom:0;left:12px;animation-delay:.9s}.boot-wrap .sp:nth-child(4){bottom:4px;right:6px;animation-delay:1.5s} @media (prefers-reduced-motion:reduce){.boot-wrap .ico,.boot-wrap .sp{animation:none}} .snow-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .snow-wrap .ico{width:36px;height:36px;color:#BFE6FF;stroke:#E6F6FF;filter:drop-shadow(0 0 8px rgba(160,220,255,.95)) drop-shadow(0 0 18px rgba(120,200,255,.55));animation:snowspin 9s linear infinite} @keyframes snowspin{to{transform:rotate(360deg)}} .snow-wrap .sp{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 6px #BFE6FF;opacity:0;animation:snowfall 3s linear infinite} .snow-wrap .sp:nth-child(2){left:6px;animation-delay:0s}.snow-wrap .sp:nth-child(3){left:20px;animation-delay:1s;width:3px;height:3px}.snow-wrap .sp:nth-child(4){left:34px;animation-delay:2s} @keyframes snowfall{0%{top:-4px;opacity:0}20%{opacity:1}100%{top:44px;opacity:0}} @media (prefers-reduced-motion:reduce){.snow-wrap .ico,.snow-wrap .sp{animation:none}} .zen-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .zen-wrap .ico{width:34px;height:34px;color:#B8E3D0;stroke:#DFF6EC;filter:drop-shadow(0 0 8px rgba(184,227,208,.9)) drop-shadow(0 0 18px rgba(184,227,208,.45));animation:breathe 5s ease-in-out infinite;transform-origin:50% 60%} @keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}} .zen-wrap .ring{position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(184,227,208,.6);animation:ringout 5s ease-out infinite} @keyframes ringout{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.6);opacity:0}} @media (prefers-reduced-motion:reduce){.zen-wrap .ico,.zen-wrap .ring{animation:none}} .lovemap .when .zsub{display:block;font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--muted);margin:-2px 0 2px} .bolt-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .bolt-wrap .ico{width:36px;height:36px;color:#FFD23F;fill:#FFD23F;stroke:#FFF0A8;filter:drop-shadow(0 0 8px rgba(255,210,63,.95)) drop-shadow(0 0 18px rgba(255,140,0,.6));animation:zap 1.8s ease-in-out infinite;transform-origin:50% 50%} @keyframes zap{0%,100%{transform:scale(1);opacity:1}10%{transform:scale(1.18) rotate(-6deg);opacity:1}20%{transform:scale(1);opacity:.7}30%{transform:scale(1.1);opacity:1}} .bolt-wrap .sp{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFF0A8;box-shadow:0 0 8px #FFD23F;opacity:0;animation:sparkle 1.8s ease-in-out infinite} .bolt-wrap .sp:nth-child(2){top:4px;right:6px;animation-delay:.1s}.bolt-wrap .sp:nth-child(3){bottom:6px;left:4px;animation-delay:.6s}.bolt-wrap .sp:nth-child(4){top:16px;left:0;animation-delay:1.1s} @media (prefers-reduced-motion:reduce){.bolt-wrap .ico,.bolt-wrap .sp{animation:none}} /* oferta potrivită în widget */ .exp-offer{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 26px;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease} .exp-offer.in{opacity:1;transform:none} .exp-offer:has(> :only-child){grid-template-columns:1fr} .offer-pick{display:grid;grid-template-columns:200px 1fr;gap:0;border:1px solid var(--gold);border-radius:16px;overflow:hidden;background:rgba(201,169,110,.06);transition:transform .4s,box-shadow .4s} .offer-pick:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 30px rgba(201,169,110,.15)} .offer-pick img{width:100%;height:100%;min-height:170px;object-fit:cover} .offer-pick div{padding:18px 22px} .offer-pick .lab{margin-bottom:8px;font-size:.66rem} .offer-pick h3{font-size:1.35rem;margin:0 0 8px;line-height:1.15} .offer-pick p{font-size:.9rem;color:var(--muted);margin:0 0 10px;line-height:1.5} .offer-pick .more{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} @media (max-width:900px){.exp-offer{grid-template-columns:1fr}} @media (max-width:560px){.offer-pick{grid-template-columns:1fr}.offer-pick img{height:160px;min-height:0}} /* ocazii pe homepage */ .ocazii-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .ocazie{position:relative;display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .4s} .ocazie img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease,filter .6s} .ocazie::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,21,18,.1) 30%,rgba(14,21,18,.92) 100%)} .ocazie-body{position:absolute;left:0;right:0;bottom:0;padding:20px 18px;z-index:1;transform:translateY(34px);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .ocazie h3{font-size:1.25rem;line-height:1.15;margin:6px 0 8px} .ocazie .sm{opacity:0;transition:opacity .4s .1s} .ocazie .more{display:inline-block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .4s .15s} .ocazie:hover{transform:translateY(-6px);border-color:var(--gold)} .ocazie:hover img{transform:scale(1.06);filter:brightness(1.05)} .ocazie:hover .ocazie-body{transform:none}.ocazie:hover .sm,.ocazie:hover .more{opacity:1} .ocazii-grid .ocazie:nth-child(n+5){aspect-ratio:4/3} @media (max-width:1000px){.ocazii-grid{grid-template-columns:repeat(2,1fr)}.ocazii-grid .ocazie:nth-child(n+5){aspect-ratio:3/4}} @media (max-width:560px){.ocazii-grid{grid-template-columns:1fr 1fr;gap:10px}.ocazie h3{font-size:1rem}.ocazie-body{transform:none;padding:12px}.ocazie .sm,.ocazie .more{opacity:1}} .cross-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:6px;vertical-align:middle} .cross-wrap .ico{width:34px;height:34px;color:#EAD7A6;stroke:#F6ECD2;stroke-width:1.6;filter:drop-shadow(0 0 8px rgba(234,215,166,.9)) drop-shadow(0 0 20px rgba(201,169,110,.5));animation:halo 4s ease-in-out infinite} @keyframes halo{0%,100%{filter:drop-shadow(0 0 6px rgba(234,215,166,.7)) drop-shadow(0 0 14px rgba(201,169,110,.35))}50%{filter:drop-shadow(0 0 12px rgba(234,215,166,1)) drop-shadow(0 0 28px rgba(201,169,110,.7))}} .cross-wrap .ring{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(234,215,166,.55);animation:ringout 4s ease-out infinite} @media (prefers-reduced-motion:reduce){.cross-wrap .ico,.cross-wrap .ring{animation:none}} .indemn{text-align:center;font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--cream);max-width:40ch;margin:6px auto 0;line-height:1.4;transition:opacity .3s;text-shadow:0 2px 8px rgba(0,0,0,.8)} .indemn.fade{opacity:0} .exp-cats{padding-top:0} .exp-cats .exp-grid{opacity:1;transform:none} .exp-cats .exp-cat,.exp-cats .exp-cat li{opacity:1;transform:none} /* trasee */ .exp-hero-short .wrap{padding-bottom:28px} .exp-hero .lab a{color:inherit} .tr-badge .ico{color:var(--gold)} .marcaj{display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))} .g-usor{color:#7BD389}.g-mediu{color:#E2B15C}.g-dificil{color:#E05A5A} .tr-badge.g-usor{border-color:#7BD389}.tr-badge.g-mediu{border-color:#E2B15C}.tr-badge.g-dificil{border-color:#E05A5A} .tr-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start} .tr-main .intro{font-size:1.15rem;line-height:1.7} .tr-tips{list-style:none;padding:0;margin:0;display:grid;gap:10px}.tr-tips li{padding-left:22px;position:relative;color:var(--muted)}.tr-tips li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:1px;background:var(--gold)} .tr-times{list-style:none;padding:0;margin:0;display:grid;gap:8px}.tr-times li{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding:10px 0}.tr-times b{font-family:var(--serif);font-size:1.4rem;color:var(--gold);font-variant-numeric:lining-nums}.tr-times span{color:var(--muted);font-size:.92rem} .tr-side{display:grid;gap:16px} .tr-card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:rgba(237,233,224,.02)}.tr-card b{color:var(--cream)} .tr-ind{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:12px 0 4px}.tr-ind .k{color:var(--cream);font-weight:600;font-size:.9rem}.tr-ind .v{font-size:.78rem;letter-spacing:.04em;border-radius:999px;padding:4px 10px;border:1px solid} .tr-ind .v.ok{color:#7BD389;border-color:#7BD389}.tr-ind .v.mid{color:#E2B15C;border-color:#E2B15C}.tr-ind .v.no{color:#E05A5A;border-color:#E05A5A} .tr-pack{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:6px;color:var(--muted);font-size:.9rem}.tr-pack li::before{content:"· ";color:var(--gold)} .tr-list{display:grid;gap:10px} .tr-item{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:border-color .3s,transform .3s,background .3s} .tr-item:hover{border-color:var(--gold);transform:translateX(4px);background:rgba(201,169,110,.05)} .tr-item b{display:block;color:var(--cream);font-family:var(--serif);font-size:1.2rem;line-height:1.2}.tr-item .sm{display:block;margin-top:4px} .tr-marks{display:flex;gap:6px}.tr-go{color:var(--gold);font-size:1.3rem} .tr-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 28px} .tr-filters button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 16px;font:inherit;font-size:.8rem;letter-spacing:.08em;cursor:pointer;transition:all .3s} .tr-filters button[aria-pressed=true],.tr-filters button:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.08)} .masive{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .masiv-card{position:relative;display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(237,233,224,.03);padding:0;min-height:220px} .masiv-card.featured{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;border-color:var(--gold)} .masiv-card .pic{position:relative;display:block;overflow:hidden;padding:0!important} .masiv-card .pic img{display:block;width:100%;height:170px;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.82) sepia(.22);transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .6s} .masiv-card .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(201,169,110,.10),rgba(15,17,14,.05) 40%,rgba(15,17,14,.75));mix-blend-mode:multiply;pointer-events:none} .masiv-card:hover .pic img{transform:scale(1.05);filter:saturate(.85) contrast(1.06) brightness(.9) sepia(.15)} .masiv-card.featured .pic{height:100%}.masiv-card.featured .pic img{height:100%;min-height:260px} .masiv-card.featured .pic::after{background:linear-gradient(90deg,rgba(15,17,14,.05),rgba(15,17,14,.35)),linear-gradient(180deg,rgba(201,169,110,.10),rgba(15,17,14,.25))} .masiv-card div{padding:22px 24px}.masiv-card h2{font-size:1.6rem;margin:6px 0 8px}.masiv-card .more{display:inline-block;margin-top:10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .masiv-card.soon{opacity:.85}.masiv-card.soon .sm:last-child{display:inline-block;margin-top:10px;font-style:italic;color:var(--dim)} .masiv-card.featured:hover{transform:translateY(-4px);transition:transform .4s} .ghid-links{display:grid;gap:10px;text-align:left}.ghid-links a{display:block;border:1px solid var(--line);border-radius:12px;padding:16px 20px;transition:border-color .3s}.ghid-links a:hover{border-color:var(--gold)}.ghid-links b{display:block;color:var(--cream);font-family:var(--serif);font-size:1.25rem} .ghid{margin-top:28px}.ghid h2{font-size:1.6rem;margin:32px 0 10px}.ghid p,.ghid li{color:var(--muted);line-height:1.7}.ghid ul,.ghid ol{padding-left:22px}.ghid li{margin:8px 0}.ghid b{color:var(--cream)} @media (max-width:900px){.tr-grid{grid-template-columns:1fr}.masive{grid-template-columns:1fr}.masiv-card.featured{grid-column:span 1;grid-template-columns:1fr}.tr-times li{grid-template-columns:1fr}} .marcaj{transition:transform .4s}.tr-item:hover .marcaj{transform:rotate(-6deg) scale(1.1)} /* profil de altitudine */ .profil{border:1px solid var(--line);border-radius:14px;padding:18px 22px 10px;background:rgba(237,233,224,.02);margin:26px 0 0} .profil svg{width:100%;height:120px;display:block;overflow:visible} .profil .line{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s cubic-bezier(.2,.8,.2,1)} .profil .fill{fill:url(#pg);opacity:0;transition:opacity 1.6s .6s} .in .profil .line,.profil.in .line{stroke-dashoffset:0}.in .profil .fill,.profil.in .fill{opacity:1} .profil .lbl{font-family:var(--serif);font-size:13px;fill:var(--muted)}.profil .lblb{fill:var(--gold);font-weight:600;font-size:15px} .profil .pt{fill:var(--gold);r:0;transition:r .4s 2s}.in .profil .pt,.profil.in .pt{r:4} .profil-meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--dim);margin-top:6px;letter-spacing:.04em} /* inel de dificultate */ .gauge{display:flex;align-items:center;gap:16px;margin:0 0 14px} .gauge svg{width:72px;height:72px;transform:rotate(-90deg)}.gauge circle{fill:none;stroke-width:6} .gauge .bg{stroke:var(--line)}.gauge .fg{stroke-dasharray:201;stroke-dashoffset:201;transition:stroke-dashoffset 1.6s .3s cubic-bezier(.2,.8,.2,1);stroke-linecap:round} .in .gauge .fg,.gauge.in .fg{stroke-dashoffset:var(--off)} .gauge b{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.1}.gauge span{font-size:.82rem;color:var(--muted)} /* indicatori */ .tr-ind .v{opacity:0;transform:translateX(10px);transition:opacity .5s,transform .5s} .in .tr-ind .v{opacity:1;transform:none} .tr-ind:nth-of-type(2) .v{transition-delay:.15s}.tr-ind:nth-of-type(3) .v{transition-delay:.3s}.tr-ind:nth-of-type(4) .v{transition-delay:.45s} /* lista: apariție în cascadă + filtrare lină */ .tr-list .tr-item{transition:border-color .3s,transform .3s,background .3s,opacity .35s} .tr-list .tr-item.hide{opacity:0;transform:scale(.98);pointer-events:none;position:absolute;visibility:hidden} .tr-badge.tip-circuit{border-color:#9FE1CB;color:#9FE1CB}.tr-badge.tip-dus-intors{border-color:#B5D4F4;color:#B5D4F4}.tr-badge.tip-traversare{border-color:#E8D3A6;color:#E8D3A6} .tr-cur{list-style:none;padding:0;margin:0;display:grid;gap:14px} .tr-cur li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:rgba(201,169,110,.04);transition:border-color .3s,transform .3s} .tr-cur li:hover{border-color:var(--gold);transform:translateX(4px)} .tr-cur .num{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--night);font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center} .tr-cur p{margin:0;color:var(--cream);line-height:1.6;font-size:.98rem} .tr-sos{border-color:rgba(224,90,90,.5)} .sos{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;border:1px solid rgba(224,90,90,.6);border-radius:12px;padding:10px 12px;margin:8px 0;color:var(--cream);transition:background .3s,transform .3s} .sos:hover{background:rgba(224,90,90,.12);transform:translateY(-2px)} .sos-ic{width:44px;height:44px;border-radius:50%;background:#E05A5A;color:#fff;display:flex;align-items:center;justify-content:center;animation:pulse 3s ease-in-out infinite} .sos b{display:block;font-size:1rem}.sos small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px} .sos-112 .sos-ic{background:#B84A2C} /* stats strip pe pagina de traseu */ .tr-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:22px auto 0;max-width:900px} .st{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:120px;padding:12px 16px;border:1px solid rgba(201,169,110,.35);border-radius:14px;background:rgba(14,21,18,.55);backdrop-filter:blur(4px);opacity:0;transform:translateY(12px);animation:rise .7s cubic-bezier(.2,.8,.2,1) forwards;transition:border-color .3s,transform .3s} .st:nth-child(1){animation-delay:.15s}.st:nth-child(2){animation-delay:.25s}.st:nth-child(3){animation-delay:.35s}.st:nth-child(4){animation-delay:.45s}.st:nth-child(5){animation-delay:.55s}.st:nth-child(6){animation-delay:.65s} .st:hover{border-color:var(--gold);transform:translateY(-3px)} .st-l{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .st-v{display:flex;align-items:center;gap:8px;color:var(--cream)}.st-v .ico{color:var(--gold)}.st-v em{font-style:normal;font-family:var(--serif);font-size:1.15rem;font-variant-numeric:lining-nums}.st-v b{font-weight:600;color:var(--gold)} .st.g-usor .st-v em,.st.g-usor .ico{color:#7BD389}.st.g-mediu .st-v em,.st.g-mediu .ico{color:#E2B15C}.st.g-dificil .st-v em,.st.g-dificil .ico{color:#E05A5A} .st.tip-circuit .st-v em,.st.tip-circuit .ico{color:#9FE1CB}.st.tip-dus-intors .st-v em,.st.tip-dus-intors .ico{color:#B5D4F4}.st.tip-traversare .st-v em,.st.tip-traversare .ico{color:#E8D3A6} @media (max-width:560px){.st{min-width:calc(50% - 5px);padding:10px}} .ff{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:10px} .ff>div{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:rgba(237,233,224,.02)} .ff .lab{display:flex;align-items:center;gap:8px;margin-bottom:10px}.ff .lab .ico{color:var(--gold)} .ff ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.ff li{color:var(--muted);font-size:.92rem;line-height:1.5;padding-left:16px;position:relative}.ff li::before{content:"";position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--gold)} @media (max-width:640px){.ff{grid-template-columns:1fr}} .acts{list-style:none;padding:0;margin:0;display:grid;gap:10px} .acts li{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--cream);font-size:.95rem;line-height:1.5;transition:border-color .3s,transform .3s} .acts li:hover{border-color:var(--gold);transform:translateX(4px)} .acts .ico{flex:0 0 auto;margin-top:3px;color:var(--gold)} /* prin ce treci – traseu grafic */ .route{margin:26px 0 8px;border:1px solid var(--line);border-radius:14px;padding:18px 20px 8px;background:rgba(237,233,224,.02);overflow:hidden} .in .route-line::before,.route.in .route-line::before{transform:scaleX(1)} .in .route-line li,.route.in .route-line li{opacity:1;transform:none} .route-line .dot{position:absolute;top:2px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--night);border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(201,169,110,.12),0 0 14px rgba(201,169,110,.5)} .route-line li:first-child .dot,.route-line li:last-child .dot{background:var(--gold)} @media (max-width:760px){.route-line{grid-template-columns:1fr;gap:0} .in .route-line::before,.route.in .route-line::before{transform:scaleY(1)} .route-line .dot{left:1px;top:10px;transform:none}} /* hartă traseu */ .hmap-wrap{margin-top:8px} .hmap{width:100%;height:auto;display:block;overflow:visible} .hmap .contur{fill:none;stroke:rgba(201,169,110,.10);stroke-width:1} .hmap .drum-h{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 5;transition:stroke-dashoffset 2.6s cubic-bezier(.2,.8,.2,1)} .hmap .drum-h.shadow{stroke:rgba(201,169,110,.18);stroke-width:9;stroke-dasharray:none;filter:blur(3px)} .route.go .hmap .drum-h{stroke-dashoffset:0 !important} .hmap .pin{opacity:0;transition:opacity .5s;transition-delay:calc(.4s + var(--i) * .3s)} .route.go .hmap .pin{opacity:1} .hmap .halo{fill:rgba(201,169,110,.15)}.hmap .core{fill:var(--night);stroke:var(--gold);stroke-width:2} .hmap .pin-end .core{fill:var(--gold)} .hmap .nm{font-family:var(--serif);font-size:12.5px;font-weight:600;fill:var(--cream);paint-order:stroke;stroke:#0E1512;stroke-width:5px;stroke-linejoin:round} .hmap .sub{font-size:9.5px;fill:var(--muted);letter-spacing:.02em;paint-order:stroke;stroke:#0E1512;stroke-width:4px;stroke-linejoin:round} .route.go .hmap .pin .halo{animation:pinpulse 3s ease-in-out infinite;animation-delay:calc(var(--i) * .4s)} @keyframes pinpulse{0%,100%{r:9}50%{r:13}} .sr{position:absolute;left:-9999px} .in .reg{opacity:1;transform:none}.in .reg:nth-child(2){transition-delay:.15s}.in .reg:nth-child(3){transition-delay:.3s}.in .reg:nth-child(4){transition-delay:.45s} .reg-ic .ico{color:var(--cream)} .reg.ok{border-color:rgba(123,211,137,.4)}.reg.ok .reg-dot{background:#7BD389;box-shadow:0 0 10px #7BD389}.reg.ok .ico{color:#7BD389} .reg.mid{border-color:rgba(226,177,92,.4)}.reg.mid .reg-dot{background:#E2B15C;box-shadow:0 0 10px #E2B15C}.reg.mid .ico{color:#E2B15C} .reg.no{border-color:rgba(224,90,90,.4)}.reg.no .reg-dot{background:#E05A5A;box-shadow:0 0 10px #E05A5A}.reg.no .ico{color:#E05A5A} .reg.no .reg-ic::after{content:"";position:absolute;width:2px;height:34px;background:#E05A5A;transform:rotate(45deg);border-radius:2px;box-shadow:0 0 6px rgba(224,90,90,.6)} /* stats strip: valori bold, mai prezente */ .st{min-width:132px;padding:14px 18px;border-color:rgba(201,169,110,.5);background:linear-gradient(180deg,rgba(201,169,110,.10),rgba(14,21,18,.6));box-shadow:0 8px 24px rgba(0,0,0,.35)} .st-l{font-weight:700;color:var(--gold);letter-spacing:.24em;text-shadow:0 1px 4px rgba(0,0,0,.8)} .st-v em{font-weight:700;font-size:1.3rem;letter-spacing:.01em;text-shadow:0 2px 6px rgba(0,0,0,.8)} .st-v .ico{width:22px;height:22px;filter:drop-shadow(0 0 6px rgba(201,169,110,.5))} .st .marcaj{width:30px;height:30px} .st:hover{background:linear-gradient(180deg,rgba(201,169,110,.18),rgba(14,21,18,.6))} .tr-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center;border:1px solid var(--gold);border-radius:18px;padding:32px 36px;background:rgba(201,169,110,.05)} .tr-cta h2{font-size:1.8rem;margin:6px 0 10px}.tr-cta-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}.tr-cta-links .sm{color:var(--gold)} .ghid-next{margin-top:36px;border-top:1px solid var(--line);padding-top:20px;display:grid;gap:8px}.ghid-next a{color:var(--gold)} @media (max-width:900px){.tr-cta{grid-template-columns:1fr}.tr-cta-links{justify-content:flex-start}} /* meniu mobil */ .menu-toggle{display:none;position:fixed;top:14px;right:14px;z-index:120;width:48px;height:48px;border-radius:50%;border:1px solid rgba(201,169,110,.6);background:rgba(14,21,18,.75);backdrop-filter:blur(8px);cursor:pointer;padding:0} .menu-toggle span{position:absolute;left:14px;width:20px;height:2px;background:var(--cream);border-radius:2px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,top .35s} .menu-toggle span:nth-child(1){top:17px}.menu-toggle span:nth-child(2){top:23px}.menu-toggle span:nth-child(3){top:29px} .menu-toggle[aria-expanded=true] span:nth-child(1){top:23px;transform:rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:nth-child(3){top:23px;transform:rotate(-45deg)} .mobile-menu{display:none} @media (max-width:900px){ .menu-toggle{display:block} .nav ul{display:none} .nav{justify-content:center;padding:14px 12px 4px} .mobile-menu{display:block;position:fixed;inset:0;z-index:110;background:rgba(14,21,18,.96);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s} .mm-open .mobile-menu{opacity:1;visibility:visible} .mm-open body{overflow:hidden} .mm-inner{display:flex;flex-direction:column;gap:6px;padding:96px 28px 40px;max-width:420px;margin:0 auto} .mm-link{font-family:var(--serif);font-size:2rem;color:var(--cream);padding:8px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;transition-delay:calc(.08s + var(--i) * .06s)} .mm-open .mm-link,.mm-open .mm-cta,.mm-open .mm-contact{opacity:1;transform:none} .mm-link:active{color:var(--gold)} .mm-cta{margin-top:22px;display:block;text-align:center;background:var(--gold);color:var(--night);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;padding:16px 20px;border-radius:999px;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;transition-delay:.5s} .mm-contact{display:flex;justify-content:center;gap:18px;margin-top:22px;font-size:.85rem;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s;transition-delay:.58s} .mm-contact a{color:var(--gold)} .motto{margin-top:4px} } .masiv-card{transition:transform .4s,border-color .3s}.masiv-card:hover{transform:translateY(-4px);border-color:var(--gold)} /* trasee — hero armonizat cu cardurile */ .tr-hero .photo{filter:saturate(.72) contrast(1.05) brightness(.7) sepia(.2)} /* i18n · selector de limbă + notă */ .lang-sw{position:absolute;right:var(--gutter);top:26px;display:flex;gap:10px;font-size:.66rem;letter-spacing:.16em} .lang-sw a{display:inline-flex;align-items:center;gap:5px;color:var(--cream);opacity:.55;text-decoration:none;padding:2px 0;border-bottom:1px solid transparent;transition:opacity .25s} .lang-sw .flag,.mm-lang .flag{border-radius:50%;box-shadow:0 0 0 1px rgba(237,233,224,.25);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .3s;flex:none} .lang-sw a:hover .flag,.mm-lang a:hover .flag{transform:scale(1.2)} .lang-sw a[aria-current] .flag,.mm-lang a[aria-current] .flag{box-shadow:0 0 0 2px var(--gold);transform:scale(1.1)} .lang-sw a:hover{opacity:.9}.lang-sw a[aria-current]{opacity:1;color:var(--gold);border-bottom-color:var(--gold)} .mm-lang{display:flex;gap:18px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-top:14px}.mm-lang .mm-cod{display:none} .mm-lang a{display:inline-flex;align-items:center;gap:7px;color:var(--cream);opacity:.6;text-decoration:none}.mm-lang .flag{width:20px;height:20px} @media (max-width:900px){.mm-lang{flex-wrap:wrap;gap:12px 18px}}/* Sub 560px numele întregi („Français”, „Español”) nu încap pe un rând și ultima limbă ieșea din meniu. Trecem pe steag + cod de două litere, toate cele cinci pe un singur rând, distribuite egal. */@media (max-width:560px){.mm-lang{flex-wrap:nowrap;justify-content:space-between;gap:0;width:100%;max-width:320px}.mm-lang a{flex-direction:column;gap:6px;font-size:.7rem;letter-spacing:.1em;min-width:44px;justify-content:center}.mm-lang .mm-nume{display:none}.mm-lang .mm-cod{display:inline}.mm-lang .flag{width:26px;height:26px}}.mm-lang a[aria-current]{opacity:1;color:var(--gold)} @media (max-width:900px){.lang-sw{display:none}} .i18n-note{position:fixed;left:16px;bottom:16px;z-index:90;max-width:min(420px,calc(100% - 32px));display:flex;gap:14px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:rgba(14,21,18,.92);backdrop-filter:blur(8px);color:var(--cream);font-size:.82rem;line-height:1.4} .i18n-note button{background:none;border:0;color:var(--gold);font-size:1.2rem;cursor:pointer;line-height:1;padding:0} .clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Se poate? Cort, foc, bureți, refugiu */ .tr-reguli{position:relative;overflow:hidden} .tr-reguli::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:70%;background:radial-gradient(ellipse at 30% 0%,rgba(201,169,110,.10),transparent 60%);pointer-events:none} .tr-reguli .lab{font-weight:700} .rg-list{list-style:none;margin:8px 0 10px;padding:0;border-top:1px solid var(--line)} .rg-item{border-bottom:1px solid var(--line);opacity:0;transform:translateY(10px)} .in .rg-item,.rg-item.in{animation:rgIn .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*.1s)} @keyframes rgIn{to{opacity:1;transform:none}} .rg-head{display:grid;grid-template-columns:34px 1fr auto 16px;align-items:center;gap:12px;width:100%;padding:12px 4px;background:none;border:0;color:var(--cream);font:inherit;font-weight:700;text-align:left;cursor:pointer;position:relative;isolation:isolate} .rg-head::after{content:"";position:absolute;inset:4px -6px;border-radius:10px;background:rgba(237,233,224,.04);opacity:0;transition:opacity .3s;z-index:-1} .rg-head:hover::after,.rg-item.open .rg-head::after{opacity:1} .rg-ico{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:rgba(237,233,224,.03);transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s} .rg-ico svg{width:20px;height:20px;overflow:visible} .rg-ok .rg-ico{color:#7BD389}.rg-mid .rg-ico{color:#E2B15C}.rg-no .rg-ico{color:#E05A5A} .rg-head:hover .rg-ico,.rg-item.open .rg-ico{transform:translateY(-2px) scale(1.06);border-color:currentColor;box-shadow:0 6px 18px -8px currentColor} .rg-name{font-size:.94rem;font-weight:700;letter-spacing:.01em} .rg-st{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:4px 11px 4px 9px;white-space:nowrap;background:linear-gradient(90deg,currentColor 0 0)0 0/0 100% no-repeat;transition:background-size .35s} .rg-st i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:rgPulse 2.4s ease-out infinite;animation-delay:calc(var(--i)*.3s)} @keyframes rgPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} .rg-ok .rg-st{color:#7BD389;border-color:rgba(123,211,137,.55)} .rg-mid .rg-st{color:#E2B15C;border-color:rgba(226,177,92,.55)} .rg-no .rg-st{color:#E05A5A;border-color:rgba(224,90,90,.55)} .rg-chev{color:var(--gold);opacity:.7;transform:rotate(90deg);transition:transform .35s;font-weight:700} .rg-item.open .rg-chev{transform:rotate(-90deg)} .rg-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)} .rg-body>p{overflow:hidden;margin:0;padding:0 4px 0 46px;color:var(--cream);opacity:.82;font-weight:600;line-height:1.55} .rg-item.open .rg-body{grid-template-rows:1fr} .rg-item.open .rg-body>p{padding-bottom:14px} .rg-src{margin-top:8px;color:var(--muted);font-size:.72rem;line-height:1.45;font-weight:600} /* animații pe pictograme */ .rg-p1,.rg-p2,.rg-p3,.rg-roof,.rg-wall,.rg-door,.rg-cap,.rg-stem{stroke-dasharray:60;stroke-dashoffset:60} .in .rg-item .rg-p1,.in .rg-item .rg-roof,.in .rg-item .rg-cap{animation:rgDraw 1s ease-out forwards;animation-delay:calc(var(--i)*.1s + .2s)} .in .rg-item .rg-p2,.in .rg-item .rg-wall,.in .rg-item .rg-stem{animation:rgDraw 1s ease-out forwards;animation-delay:calc(var(--i)*.1s + .5s)} .in .rg-item .rg-p3,.in .rg-item .rg-door{animation:rgDraw .8s ease-out forwards;animation-delay:calc(var(--i)*.1s + .8s)} @keyframes rgDraw{to{stroke-dashoffset:0}} .rg-flame{transform-origin:12px 21px;animation:rgFlame 1.6s ease-in-out infinite} .rg-flame2{transform-origin:12px 21px;animation:rgFlame 1.1s ease-in-out infinite reverse;opacity:.75} @keyframes rgFlame{0%,100%{transform:scaleY(1) skewX(0)}30%{transform:scaleY(1.06) skewX(-3deg)}60%{transform:scaleY(.95) skewX(3deg)}} .rg-smoke{transform-origin:15.5px 7px;animation:rgSmoke 2.8s ease-in-out infinite} @keyframes rgSmoke{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-1.5px)}} .rg-dot{fill:currentColor;stroke:none;transform-origin:center;animation:rgDot 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*.2s)} @keyframes rgDot{0%,100%{opacity:.35}50%{opacity:1}} .rg-item.open .rg-cap,.rg-head:hover .rg-cap{animation:rgBounce .6s cubic-bezier(.3,1.6,.5,1)} @keyframes rgBounce{0%{transform:translateY(0)}40%{transform:translateY(-2px)}100%{transform:translateY(0)}} .rg-head:hover .rg-p1,.rg-item.open .rg-p1{animation:rgTent .7s cubic-bezier(.3,1.6,.5,1)} @keyframes rgTent{0%{transform:scaleY(1)}40%{transform:scaleY(1.08)}100%{transform:scaleY(1)}} .rg-p1{transform-origin:12px 20px} @media (prefers-reduced-motion:reduce){.rg-item,.in .rg-item{animation:none;opacity:1;transform:none}.rg-st i,.rg-flame,.rg-flame2,.rg-smoke,.rg-dot{animation:none}.rg-p1,.rg-p2,.rg-p3,.rg-roof,.rg-wall,.rg-door,.rg-cap,.rg-stem{stroke-dashoffset:0}} /* ---------- Harta masivelor (pagina /trasee/) ---------- */ .harta-masive{padding:72px 0 8px} .hm-sub{max-width:560px;margin:10px auto 0;opacity:.72} .hm-wrap{position:relative;margin:34px auto 0;max-width:1000px} .hm-svg{width:100%;height:auto;display:block;overflow:visible} .hm-granita{filter:drop-shadow(0 0 10px rgba(198,164,92,.35))} .hm-scanline{animation:hm-scan 9s linear infinite;opacity:.5;pointer-events:none} @keyframes hm-scan{0%{transform:translateY(-120px)}100%{transform:translateY(1000px)}} .hm-casa circle{fill:var(--cream)} .hm-casa .hm-acoperis,.hm-casa .hm-cos{fill:var(--cream)} .hm-casa .hm-usa{fill:var(--ink,#0E1512)} .hm-casa text{paint-order:stroke;stroke:rgba(10,15,13,.92);stroke-width:5px;stroke-linejoin:round} .hm-casa .hm-puls{fill:var(--cream);opacity:.22;animation:hm-puls 2.6s ease-out infinite} .hm-casa text{fill:var(--cream);font-size:26px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;opacity:.85} @keyframes hm-puls{0%{r:8;opacity:.34}70%{r:30;opacity:0}100%{r:30;opacity:0}} .hm-pin{cursor:pointer} .hm-pin:focus-visible{outline:none} @media (max-width:760px){ .harta-masive{padding:52px 0 4px} .hm-casa text{font-size:24px} } /* Fără animație pentru cine a cerut mai puțină mișcare. */ @media (prefers-reduced-motion:reduce){ .hm-scanline,.hm-pin .hm-unda,.hm-pin .hm-cruce,.hm-casa .hm-puls{animation:none} } /* Harta arată toată țara: numele nu încap lângă marcatoare, apar la hover, iar lista de dedesubt e navigația propriu-zisă. */ @media (max-width:520px){} /* Etichetele masivelor: permanente, cu contur de fundal ca să rămână lizibile peste relief, și o liniuță până la marcator. */ .hm-fir{stroke:var(--gold);stroke-opacity:.45;stroke-width:1.6;stroke-dasharray:4 5} /* Numele e la fel de apăsabil ca marcatorul: o zonă transparentă în spate îi dă suprafață de click și de hover, inclusiv pe ecrane tactile. */ .hm-eticheta{pointer-events:auto;cursor:pointer} .hm-zona{fill:transparent;transition:fill .25s,stroke .25s;stroke:transparent;stroke-width:1.4} .hm-pin:hover .hm-zona,.hm-pin:focus-visible .hm-zona{fill:rgba(10,15,13,.72);stroke:rgba(198,164,92,.5)} .hm-nume{fill:var(--cream);font-size:30px;letter-spacing:.03em; paint-order:stroke;stroke:rgba(10,15,13,.92);stroke-width:6px;stroke-linejoin:round} .hm-nr{fill:var(--gold);font-size:19px;letter-spacing:.16em;text-transform:uppercase;opacity:.9; paint-order:stroke;stroke:rgba(10,15,13,.92);stroke-width:5px;stroke-linejoin:round} .hm-pin:hover .hm-nume,.hm-pin:focus-visible .hm-nume{fill:var(--gold)} .hm-pin:hover .hm-nr,.hm-pin:focus-visible .hm-nr{opacity:1} .hm-pin:hover .hm-fir,.hm-pin:focus-visible .hm-fir{stroke-opacity:.9} @media (max-width:760px){.hm-nume{font-size:42px;stroke-width:9px}.hm-nr{font-size:28px;stroke-width:8px}.hm-casa text{font-size:36px}} /* Marcator de precizie. Miezul plin e chiar coordonata; scutul întunecat îl desprinde de relief, inelele îi dau contur, iar cele două unde decalate dau mișcare continuă fără ca punctul să „sară”. */ .hm-pin .hm-scut{fill:rgba(10,15,13,.55)} .hm-pin .hm-miez{fill:var(--gold);transition:r .3s} .hm-pin .hm-inel{fill:none;stroke:var(--gold);stroke-width:2.6;transition:stroke-width .3s,r .3s; filter:drop-shadow(0 0 5px rgba(198,164,92,.55))} .hm-pin .hm-inel-int{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.45; stroke-dasharray:3 6;transform-origin:center;animation:hm-rotire-inv 14s linear infinite} .hm-pin .hm-unda{fill:none;stroke:var(--gold);stroke-width:2;transform-origin:center; animation:hm-unda 3s cubic-bezier(.2,.65,.3,1) infinite;animation-delay:var(--d)} .hm-pin .hm-u2{animation-delay:calc(var(--d) + 1.5s)} .hm-pin .hm-cruce path{stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-opacity:.7; transition:stroke-opacity .3s} .hm-pin .hm-cruce{transform-origin:center;animation:hm-rotire 22s linear infinite} @keyframes hm-unda{0%{r:20;opacity:.85;stroke-width:2.4}75%{r:58;opacity:0;stroke-width:.6}100%{r:58;opacity:0}} @keyframes hm-rotire{to{transform:rotate(360deg)}} @keyframes hm-rotire-inv{to{transform:rotate(-360deg)}} .hm-pin:hover .hm-miez,.hm-pin:focus-visible .hm-miez{r:8.5} .hm-pin:hover .hm-inel,.hm-pin:focus-visible .hm-inel{stroke-width:3.6;r:25} .hm-pin:hover .hm-scut,.hm-pin:focus-visible .hm-scut{fill:rgba(198,164,92,.22)} .hm-pin:hover .hm-cruce path,.hm-pin:focus-visible .hm-cruce path{stroke-opacity:1} @media (prefers-reduced-motion:reduce){.hm-pin .hm-unda,.hm-pin .hm-cruce,.hm-pin .hm-inel-int{animation:none}} /* ---------- Lumina zilei (pagina /trasee/) ---------- */ .soare{padding:64px 0 8px} .so-card{max-width:760px;margin:30px auto 0;padding:26px 24px 18px; border:1px solid rgba(237,233,224,.13);border-radius:22px; background:linear-gradient(180deg,rgba(198,164,92,.07),rgba(198,164,92,0))} /* Fără overflow vizibil: haloul soarelui ieșea din casetă și, în grila de planificare, cădea peste coloana cu vremea. */ .so-arc{width:100%;height:auto;display:block} .so-orizont{stroke:rgba(237,233,224,.22);stroke-width:1.2;stroke-dasharray:2 7} .so-traseu{fill:none;stroke:rgba(237,233,224,.16);stroke-width:2} .so-parcurs{fill:none;stroke:url(#so-grad);stroke-width:3;stroke-linecap:round; transition:stroke-dashoffset 1.2s ease} /* Orele de la capetele arcului: erau 13px la 0,5 opacitate, adică aproape invizibile lângă cifrele mari de dedesubt. */ .so-cap{fill:var(--cream);opacity:.9;font-size:19px;font-weight:600;letter-spacing:.08em; paint-order:stroke;stroke:rgba(10,15,13,.85);stroke-width:4px;stroke-linejoin:round} .so-astru{transition:transform 1.2s ease} /* Soarele de pe arc: miez alb-cald, disc în degrade, coroană difuză și două seturi de raze care se rotesc în sensuri opuse. Sub orizont se stinge. */ .so-miez{fill:#FFF6E2} .so-disc{fill:url(#so-disc-g)} .so-halo{fill:var(--gold);opacity:.28;animation:so-puls 3.6s ease-in-out infinite} .so-aura{fill:var(--gold);opacity:.1;animation:so-aura 5.5s ease-in-out infinite} .so-raze path{stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;opacity:.9; transform-origin:center;animation:so-rotire 26s linear infinite} .so-raze-lungi path{stroke:#F0CE84;stroke-width:1.6;stroke-linecap:round;opacity:.6; transform-origin:center;animation:so-rotire 40s linear infinite reverse,so-licar 3.2s ease-in-out infinite} @keyframes so-puls{0%,100%{opacity:.22;r:17}50%{opacity:.45;r:23}} @keyframes so-aura{0%,100%{opacity:.07;r:27}50%{opacity:.18;r:36}} @keyframes so-rotire{to{transform:rotate(360deg)}} @keyframes so-licar{0%,100%{opacity:.35}50%{opacity:.85}} .so-astru.so-sub-orizont{opacity:.3} .so-astru.so-sub-orizont .so-raze,.so-astru.so-sub-orizont .so-raze-lungi, .so-astru.so-sub-orizont .so-aura{display:none} /* Două coloane fixe, nu auto-fit: pe coloana îngustă a paginii de traseu auto-fit cădea la o singură coloană și caseta devenea un turn de patru blocuri, mult mai înaltă decât cea cu vremea. */ .so-date{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px; grid-template-columns:1fr 1fr;text-align:left} .so-date li{position:relative;padding:10px 11px 10px 40px;border-radius:13px;background:rgba(237,233,224,.04)} .so-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:23px;height:23px} .so-ic svg{width:100%;height:100%;display:block;overflow:visible} .so-et{display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);opacity:.95;margin-bottom:2px} .so-ora{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.35rem;font-weight:300;line-height:1.15; letter-spacing:.02em;font-variant-numeric:tabular-nums} .so-dif{display:block;font-size:.72rem;color:var(--muted);margin-top:2px} .so-nota{max-width:600px;margin:16px auto 0;opacity:.66} /* Ultima oră de lumină: semnalul contează mai mult decât eleganța. */ .so-card.so-apropiat .so-ramas{background:rgba(198,164,92,.16);box-shadow:inset 0 0 0 1px rgba(198,164,92,.45)} .so-card.so-apropiat .so-ramas .so-ora{color:var(--gold)} @media (prefers-reduced-motion:reduce){ .so-halo, .so-parcurs,.so-astru{transition:none} } /* Varianta compactă, în coloana de conținut a paginii de traseu. */ .soare-compact{padding:0;margin:22px 0 6px} .soare-compact .so-card{max-width:none;margin:10px 0 0;padding:18px 18px 14px;border-radius:18px;overflow:hidden} .soare-compact .so-arc{max-width:460px;margin:0 auto} .soare-compact .so-date{grid-template-columns:1fr 1fr;gap:8px} .soare-compact .so-ora{font-size:1.3rem} .soare-compact .so-nota{text-align:left;margin:12px 0 0;padding-top:11px;border-top:1px solid rgba(237,233,224,.1);max-width:none;color:var(--muted);font-size:.8rem;line-height:1.55} /* ---------- Banda de planificare: lumină + vreme ---------- */ .planificare{padding:28px 0 4px} .pl-grid{display:grid;gap:20px;grid-template-columns:2fr 1fr;align-items:stretch;min-width:0} /* Coloanele devin containere flex, ca ambele casete să crească până la înălțimea celei mai înalte. Fără asta, cea cu mai puțin conținut rămâne scurtă și banda arată strâmb. */ .pl-grid>*{min-width:0;display:flex;flex-direction:column} .pl-grid .so-card,.pl-grid .vr-card{flex:1;display:flex;flex-direction:column} @media (max-width:860px){.pl-grid{grid-template-columns:1fr}} .vreme{margin:0} .vr-card{margin-top:10px;padding:18px;border-radius:18px; border:1px solid rgba(237,233,224,.13); background:linear-gradient(180deg,rgba(198,164,92,.07),rgba(198,164,92,0))} .vr-azi{display:flex;align-items:center;gap:12px} .vr-ic svg{width:52px;height:52px;display:block} .vr-temp{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.85rem;font-weight:300;line-height:1; font-variant-numeric:tabular-nums} .vr-min{color:var(--muted);font-size:.84rem;margin-left:7px} .vr-stare{display:block;font-size:.84rem;color:var(--muted);margin-top:3px} .vr-detalii{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(237,233,224,.1)} .vr-detalii li{display:flex;justify-content:space-between;padding:2px 0;font-size:.82rem} .vr-detalii span{color:var(--muted)} .vr-detalii b{font-weight:400;font-variant-numeric:tabular-nums} .vr-zile{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid rgba(237,233,224,.1)} .vr-zile li{display:flex;align-items:center;gap:9px;padding:4px 0;font-size:.84rem} .vr-zi{width:38px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.7rem} .vr-zile b{font-weight:400;margin-left:auto;font-variant-numeric:tabular-nums} .vr-mic{width:11px;height:11px;border-radius:50%;flex:none;background:var(--gold);opacity:.85} .vr-mic.vr-noros,.vr-mic.vr-ceata{opacity:.4} .vr-mic.vr-ploaie,.vr-mic.vr-ploaie-tare,.vr-mic.vr-burnita,.vr-mic.vr-lapovita{background:#7FA8C9} .vr-mic.vr-ninsoare{background:#DCE8F0} .vr-mic.vr-furtuna{background:#C97F7F} .vr-nota{margin:12px 0 0;padding-top:11px;border-top:1px solid rgba(237,233,224,.1);color:var(--muted);font-size:.8rem;line-height:1.55} /* Pictograma de vreme: o singură ilustrație, din care fiecare stare aprinde ce are nevoie. Animațiile sunt purtătoare de informație, nu decor — ploaia cade, norii se târăsc, ceața alunecă, vântul suflă în rafale. */ .vr-ic svg{width:46px;height:46px;display:block;overflow:visible} .vr-ic .vr-soare{fill:var(--gold)} .vr-ic .vr-raze path{stroke:var(--gold);stroke-width:2.1;stroke-linecap:round; transform-origin:16px 15px;animation:vr-rotire 24s linear infinite} .vr-ic .vr-soare-g{transform-origin:16px 15px;animation:vr-respira 5s ease-in-out infinite} .vr-ic .vr-nor{fill:rgba(237,233,224,.88)} .vr-ic .vr-nor-2{fill:rgba(237,233,224,.4)} .vr-ic .vr-picaturi path{stroke:#7FA8C9;stroke-width:2.4;stroke-linecap:round} .vr-ic .vr-fulgi circle{fill:#DCE8F0} .vr-ic .vr-ceata-l path{stroke:rgba(237,233,224,.6);stroke-width:2.2;stroke-linecap:round} .vr-ic .vr-fulger{fill:var(--gold)} .vr-ic .vr-vant-l path{stroke:rgba(237,233,224,.75);stroke-width:2;stroke-linecap:round;fill:none} /* implicit, totul ascuns; fiecare stare aprinde piesele ei */ .vr-ic .vr-soare-g,.vr-ic .vr-nor,.vr-ic .vr-nor-2,.vr-ic .vr-picaturi, .vr-ic .vr-fulgi,.vr-ic .vr-ceata-l,.vr-ic .vr-fulger,.vr-ic .vr-vant-l{display:none} .vr-senin .vr-soare-g{display:block} .vr-partial-noros .vr-soare-g,.vr-partial-noros .vr-nor{display:block} .vr-noros .vr-nor,.vr-noros .vr-nor-2{display:block} .vr-ceata .vr-nor,.vr-ceata .vr-ceata-l{display:block} .vr-burnita .vr-nor,.vr-burnita .vr-picaturi{display:block} .vr-ploaie .vr-nor,.vr-ploaie .vr-picaturi{display:block} .vr-ploaie-tare .vr-nor,.vr-ploaie-tare .vr-nor-2,.vr-ploaie-tare .vr-picaturi{display:block} .vr-lapovita .vr-nor,.vr-lapovita .vr-picaturi,.vr-lapovita .vr-fulgi{display:block} .vr-ninsoare .vr-nor,.vr-ninsoare .vr-fulgi{display:block} .vr-furtuna .vr-nor,.vr-furtuna .vr-nor-2,.vr-furtuna .vr-picaturi,.vr-furtuna .vr-fulger{display:block} .vr-vant .vr-vant-l{display:block} /* senin: razele se rotesc, discul respiră */ @keyframes vr-rotire{to{transform:rotate(360deg)}} @keyframes vr-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} /* nori: se târăsc, fiecare cu ritmul lui, ca să nu pară un bloc */ .vr-ic .vr-nor{animation:vr-pluteste 7s ease-in-out infinite} .vr-ic .vr-nor-2{animation:vr-pluteste 9s ease-in-out infinite reverse} @keyframes vr-pluteste{0%,100%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}} /* ploaie: picăturile cad decalat; la ploaie puternică, mai des și mai lung */ .vr-ic .vr-picaturi path{animation:vr-cade 1.5s linear infinite} .vr-ic .vr-picaturi path:nth-child(2){animation-delay:.5s} .vr-ic .vr-picaturi path:nth-child(3){animation-delay:1s} .vr-ploaie-tare .vr-picaturi path{animation-duration:.85s;stroke-width:2.8} .vr-burnita .vr-picaturi path{animation-duration:2.4s;stroke-width:1.6;opacity:.75} @keyframes vr-cade{0%{opacity:0;transform:translateY(-4px)}25%{opacity:1}100%{opacity:0;transform:translateY(6px)}} /* ninsoare: fulgii cad mai lent și se leagănă */ .vr-ic .vr-fulgi circle{animation:vr-ninge 3.6s ease-in-out infinite} .vr-ic .vr-fulgi circle:nth-child(2){animation-delay:1.2s} .vr-ic .vr-fulgi circle:nth-child(3){animation-delay:2.4s} @keyframes vr-ninge{0%{opacity:0;transform:translate(0,-4px)} 25%{opacity:1}60%{transform:translate(2px,2px)}100%{opacity:0;transform:translate(-1px,6px)}} /* ceață: fâșiile alunecă lateral, decalat */ .vr-ic .vr-ceata-l path{animation:vr-ceata 4.5s ease-in-out infinite} .vr-ic .vr-ceata-l path:nth-child(2){animation-delay:.9s} .vr-ic .vr-ceata-l path:nth-child(3){animation-delay:1.8s} @keyframes vr-ceata{0%,100%{opacity:.25;transform:translateX(-3px)}50%{opacity:.9;transform:translateX(3px)}} /* furtună: fulgerul lovește scurt, nu clipește continuu */ .vr-ic .vr-fulger{animation:vr-fulgera 3.2s steps(1) infinite} @keyframes vr-fulgera{0%,6%{opacity:1}7%,12%{opacity:.15}13%,18%{opacity:1}19%,100%{opacity:0}} /* vânt: rafale care traversează, cu coada mai rapidă */ .vr-ic .vr-vant-l path{animation:vr-sufla 2.8s ease-in-out infinite} .vr-ic .vr-vant-l path:nth-child(2){animation-delay:.5s;animation-duration:2.2s} .vr-ic .vr-vant-l path:nth-child(3){animation-delay:1s;animation-duration:3.4s} @keyframes vr-sufla{0%{opacity:0;transform:translateX(-7px)} 30%{opacity:.95}70%{opacity:.95}100%{opacity:0;transform:translateX(8px)}} @media (prefers-reduced-motion:reduce){ .vr-ic *{animation:none !important} } /* Etichetele cu majuscule, în ambele casete, sunt îngroșate: la 0,6–0,7 rem și cu spațiere mare, greutatea 300 a fontului le face aproape transparente. */ .pl-grid .lab{font-weight:600;opacity:.95} /* ---------- Banda de planificare: finisaje ---------- */ /* Aceleași finisaje pe ambele casete, ca să pară o singură componentă. */ .pl-grid .so-card,.pl-grid .vr-card{position:relative;overflow:hidden; transition:border-color .35s,transform .35s,box-shadow .35s} .pl-grid .so-card::before,.pl-grid .vr-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(198,164,92,.75),transparent); transform:translateX(-100%);animation:pl-lumina 7s ease-in-out infinite} .pl-grid .vr-card::before{animation-delay:3.5s} @keyframes pl-lumina{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}} .pl-grid .so-card:hover,.pl-grid .vr-card:hover{border-color:rgba(198,164,92,.4); transform:translateY(-2px);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)} /* Intrare scurtă la încărcare, decalată, ca banda să se așeze, nu să apară brusc. */ .pl-grid>*{animation:pl-intra .7s cubic-bezier(.2,.8,.2,1) both} .pl-grid>*:nth-child(2){animation-delay:.12s} @keyframes pl-intra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Conținutul se distribuie pe toată înălțimea: blocurile de jos se lipesc de bază. */ /* Coloanele trebuie să pornească de la aceeași linie, altfel „flex:1” aliniază baza dar nu și vârful. Varianta compactă avea margine de sus, caseta de vreme nu — de aici decalajul. */ .pl-grid .soare-compact,.pl-grid .vreme{margin:0;padding:0} .pl-grid .soare-compact>.lab,.pl-grid .vreme>.lab{margin:0 0 10px} /* Aceleași margini interioare și aceeași rotunjire pe ambele. */ .pl-grid .so-card,.pl-grid .vr-card{margin-top:0;padding:18px;border-radius:18px} /* Blocul de cifre crește ca să umple spațiul rămas, iar nota rămâne la bază: așa ambele casete au același subsol, indiferent cât conținut au deasupra. */ .pl-grid .so-date{margin-top:auto} /* Caseta de vreme nu mai e întinsă cu goluri: are cinci zile și patru detalii, deci umple înălțimea cu informație. Doar nota se lipește de bază. */ .pl-grid .vr-nota,.pl-grid .so-nota{margin-top:auto} .pl-grid .vr-zile li{padding:3px 0} .pl-grid .so-nota,.pl-grid .vr-nota{margin-top:12px} .so-date li,.vr-detalii li,.vr-zile li{transition:background .3s} .so-date li:hover{background:rgba(198,164,92,.09)} /* Cifrele care se schimbă primesc un accent scurt când se actualizează. */ .so-ora,.vr-temp{transition:color .4s} @media (prefers-reduced-motion:reduce){ .pl-grid .so-card::before,.pl-grid .vr-card::before,.pl-grid>*{animation:none} .pl-grid .so-card::before,.pl-grid .vr-card::before{display:none} } /* ---------- Iconițele rândurilor de lumină ---------- */ .so-ic .si-soare circle{fill:var(--gold)} .so-ic .si-raze path{stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:.7} .so-ic .si-linie{stroke:rgba(237,233,224,.4);stroke-width:2;stroke-linecap:round} .so-ic .si-sageata{stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none} /* răsare: soarele urcă de sub linie și razele cresc odată cu el */ .so-r-rasare .si-soare{animation:si-urca 3.4s cubic-bezier(.3,.7,.3,1) infinite} .so-r-rasare .si-raze path{animation:si-creste 3.4s cubic-bezier(.3,.7,.3,1) infinite} .so-r-rasare .si-sageata{animation:si-sus 3.4s ease-in-out infinite} @keyframes si-urca{0%{transform:translateY(9px);opacity:.25}45%,75%{transform:translateY(0);opacity:1}100%{transform:translateY(9px);opacity:.25}} @keyframes si-creste{0%,20%{opacity:0}55%,75%{opacity:.75}100%{opacity:0}} @keyframes si-sus{0%,100%{opacity:.35;transform:translateY(2px)}50%{opacity:1;transform:translateY(-1px)}} /* apune: coboară sub linie, razele se sting */ .so-r-apune .si-soare{animation:si-coboara 3.4s cubic-bezier(.3,.7,.3,1) infinite} .so-r-apune .si-raze path{animation:si-stinge 3.4s cubic-bezier(.3,.7,.3,1) infinite} .so-r-apune .si-sageata{animation:si-jos 3.4s ease-in-out infinite} @keyframes si-coboara{0%{transform:translateY(0);opacity:1}55%,80%{transform:translateY(9px);opacity:.25}100%{transform:translateY(0);opacity:1}} @keyframes si-stinge{0%,15%{opacity:.75}55%,100%{opacity:0}} @keyframes si-jos{0%,100%{opacity:.35;transform:translateY(-1px)}50%{opacity:1;transform:translateY(2px)}} /* lumină: soare care strălucește — raze rotitoare, aură care respiră */ .so-ic .si-disc{fill:var(--gold)} .so-ic .si-aura{fill:var(--gold);opacity:.14;animation:si-respira 3.6s ease-in-out infinite} .so-ic .si-raze-l path{stroke:var(--gold);stroke-width:2;stroke-linecap:round; transform-origin:16px 16px;animation:si-roteste 18s linear infinite,si-licar 2.8s ease-in-out infinite} @keyframes si-respira{0%,100%{opacity:.1;r:10}50%{opacity:.26;r:13}} @keyframes si-roteste{to{transform:rotate(360deg)}} @keyframes si-licar{0%,100%{opacity:.5}50%{opacity:1}} /* până la apus: cadran care se golește */ .so-ic .si-cadran{fill:none;stroke:rgba(237,233,224,.28);stroke-width:2} .so-ic .si-umplut{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round; stroke-dasharray:69;animation:si-scurge 4s linear infinite} .so-ic .si-ace path{stroke:var(--gold);stroke-width:2;stroke-linecap:round} .so-ic .si-ac-m{transform-origin:16px 16px;animation:si-roteste 4s linear infinite} .so-ic .si-ac-h{transform-origin:16px 16px;animation:si-roteste 48s linear infinite} .so-ic .si-ax{fill:var(--gold)} @keyframes si-scurge{from{stroke-dashoffset:0}to{stroke-dashoffset:69}} @media (prefers-reduced-motion:reduce){.so-ic *{animation:none !important}} @media (max-width:420px){.so-date,.soare-compact .so-date{grid-template-columns:1fr}} /* Bara de probabilitate a precipitațiilor, în rândul fiecărei zile. */ .vr-bara{flex:1;height:3px;border-radius:2px;background:rgba(237,233,224,.1);overflow:hidden;min-width:26px} .vr-bara i{display:block;height:100%;width:var(--p);border-radius:2px;background:#7FA8C9;opacity:.8; animation:vr-umple 1.1s cubic-bezier(.2,.8,.2,1) both} @keyframes vr-umple{from{width:0}to{width:var(--p)}} @media (prefers-reduced-motion:reduce){.vr-bara i{animation:none}} @media (max-width:640px){} /* ---------- Pagina 404 ---------- */ .e404{padding:90px 0 40px} .e404 h1{margin:.15em 0 .4em} .e404 .intro{max-width:620px;margin:0 auto 14px} .e404 .muted{max-width:620px;margin:0 auto} .e404-cai{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:28px} @media (max-width:560px){.e404{padding:64px 0 28px}.e404-cai .btn{width:100%;text-align:center}} /* Tabel de date (fișa masivului). Lipsea: tabelul din Munții Rodnei se randa cu stilul implicit al browserului, complet în afara paletei. */ .tbl{width:100%;border-collapse:collapse;margin:18px 0 6px;font-size:.92rem} .tbl caption{caption-side:bottom;text-align:left;color:var(--muted);font-size:.8rem;padding-top:10px} .tbl th,.tbl td{padding:11px 12px;text-align:left;vertical-align:top; border-bottom:1px solid rgba(237,233,224,.1)} .tbl th{width:34%;font-weight:400;color:var(--gold);opacity:.9;white-space:nowrap} .tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0} .tbl tr:hover td,.tbl tr:hover th{background:rgba(237,233,224,.03)} @media (max-width:620px){ .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block} .tbl th{width:auto;padding:12px 0 2px;border-bottom:0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase} .tbl td{padding:0 0 12px;border-bottom:1px solid rgba(237,233,224,.1)} } /* ---------- Trasee moto ---------- */ .mt-cifre{list-style:none;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:24px 0 10px;padding:0} .mt-cifre li{padding:12px 14px;border-radius:14px;background:rgba(237,233,224,.04)} .mt-cifre span{display:block;font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);opacity:.95;margin-bottom:3px} .mt-cifre b{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.4rem;font-weight:300} .mt-lista{list-style:none;margin:14px 0 8px;padding:0} .mt-lista li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid rgba(237,233,224,.08);line-height:1.6} .mt-lista li::before{content:"";position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%; background:var(--gold);opacity:.7} .mt-lista li:last-child{border-bottom:0} .mt-lista b{font-weight:400;color:var(--cream)} .mt-atentie li::before{background:#C97F7F;opacity:.85} /* Golul de alimentare e informația care poate strica o zi: iese în evidență. */ .mt-alerta{margin:16px 0 12px;padding:15px 17px;border-radius:14px; background:rgba(201,127,127,.1);border:1px solid rgba(201,127,127,.35)} .mt-alerta b{display:block;margin-bottom:5px} .mt-alerta span{color:var(--cream);font-size:.94rem;opacity:.92} .mt-carduri{display:grid;gap:14px;margin:28px 0 8px} .mt-card{display:block;padding:18px 20px;border-radius:18px;text-decoration:none;color:var(--cream); border:1px solid rgba(237,233,224,.13);transition:border-color .3s,transform .3s,background .3s} .mt-card:hover{border-color:var(--gold);background:rgba(198,164,92,.06);transform:translateY(-2px)} .mt-km{float:right;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.9rem;font-weight:300; color:var(--gold);line-height:1} .mt-km span{font-size:.82rem;opacity:.85} .mt-card b{display:block;font-weight:400;font-size:1.12rem;margin-bottom:5px} .mt-card .sm{display:block;color:var(--muted);line-height:1.6} .mt-meta{display:block;margin-top:9px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase; color:var(--gold)} @media (max-width:560px){.mt-km{float:none;display:block;margin-bottom:6px}} /* Fără opacity peste .sm: culoarea --dim e deja stinsă, iar cele două se înmulțesc — 5,92:1 devenea 3,64:1, sub pragul pentru text mic. */ .mt-surse li{font-size:.88rem;color:var(--muted)} .mt-surse li::before{background:rgba(237,233,224,.35)} /* ---------- Starea drumului și riscurile ---------- */ .dr-lista,.dr-riscuri{list-style:none;margin:16px 0 10px;padding:0;display:grid;gap:11px} .dr-lista li,.dr-riscuri li{padding:14px 16px;border-radius:15px; background:rgba(237,233,224,.04);border-left:3px solid rgba(237,233,224,.2)} .dr-cap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .dr-cap b{font-weight:400;flex:1;min-width:0} .dr-lista .sm,.dr-riscuri .sm{margin:7px 0 0;color:var(--muted);line-height:1.65} .dr-eticheta,.dr-cand{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; padding:3px 9px;border-radius:99px;white-space:nowrap} .dr-eticheta{background:rgba(237,233,224,.1)} .dr-cand{background:rgba(198,164,92,.14);color:var(--gold)} /* Bara: trei segmente, umplute după nivel. */ .dr-bara{display:block;height:4px;border-radius:2px;margin-top:10px;background:rgba(237,233,224,.1);overflow:hidden} .dr-bara i{display:block;height:100%;border-radius:2px; width:calc(var(--n) / 3 * 100%);animation:dr-umple 1s cubic-bezier(.2,.8,.2,1) both} @keyframes dr-umple{from{width:0}to{width:calc(var(--n) / 3 * 100%)}} .dr-ok{border-left-color:#8FB98F} .dr-ok .dr-bara i{background:#8FB98F} .dr-ok .dr-eticheta{background:rgba(143,185,143,.16);color:#A8CBA8} .dr-mediu{border-left-color:var(--gold)} .dr-mediu .dr-bara i{background:var(--gold)} .dr-mediu .dr-eticheta{background:rgba(198,164,92,.16);color:var(--gold)} .dr-rau{border-left-color:#C97F7F} .dr-rau .dr-bara i{background:#C97F7F} .dr-rau .dr-eticheta{background:rgba(201,127,127,.18);color:#D79A9A} .dr-riscuri li{border-left-color:rgba(201,127,127,.5)} @media (prefers-reduced-motion:reduce){.dr-bara i{animation:none}} /* ---------- Profilul de curbe ---------- */ .cv-profil{margin:18px 0 10px;padding:20px;border-radius:18px; border:1px solid rgba(237,233,224,.13); background:linear-gradient(180deg,rgba(201,169,110,.08),rgba(201,169,110,0))} .cv-cap{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px} .cv-cap b{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.1rem;font-weight:300;line-height:1;color:var(--gold)} .cv-cap b span{font-family:Jost,system-ui,sans-serif;font-size:.95rem;color:var(--cream)} .cv-rata{margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:5px 11px;border-radius:99px;background:rgba(201,169,110,.16);color:var(--gold)} /* Fiecare bară = două kilometri. Înălțimea = câte viraje are porțiunea. */ .cv-grafic{position:relative;padding-bottom:4px} .cv-bare{display:flex;align-items:flex-end;gap:3px;height:120px; border-bottom:1px solid rgba(237,233,224,.18)} .cv-b{position:relative;flex:1;min-width:3px;border-radius:3px 3px 0 0;height:var(--h); transform-origin:bottom;animation:cv-creste .75s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d); transition:filter .2s} .cv-lin{background:rgba(237,233,224,.28)} .cv-mediu{background:#C9A96E;opacity:.62} .cv-tare{background:linear-gradient(180deg,#F0D9A8,#C9A96E); box-shadow:0 0 12px rgba(201,169,110,.6)} .cv-b:hover{filter:brightness(1.5)} @keyframes cv-creste{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* Eticheta care apare la atingere: spune ce kilometri și câte viraje. */ .cv-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px); background:rgba(10,15,13,.96);border:1px solid rgba(201,169,110,.5);border-radius:10px; padding:7px 11px;font-size:.76rem;line-height:1.35;white-space:nowrap;text-align:center; color:var(--cream);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3} .cv-tip b{display:block;color:var(--gold);font-weight:400;font-size:.88rem} .cv-b:hover .cv-tip,.cv-b:focus-visible .cv-tip{opacity:1;transform:translateX(-50%) translateY(0)} .cv-axa{display:flex;justify-content:space-between;margin-top:9px;font-size:.74rem; color:var(--muted);line-height:1.4} .cv-axa span:nth-child(2){text-align:center} .cv-axa span:last-child{text-align:right} .cv-axa em{font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .cv-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0; font-size:.82rem;color:var(--muted)} .cv-legenda li{display:flex;align-items:center;gap:7px} .cv-p{width:13px;height:13px;border-radius:3px;flex:none} .cv-varf{margin:16px 0 0;padding:13px 15px;border-radius:13px; background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.3)} .cv-varf b{display:block;color:var(--gold);font-weight:400;margin-bottom:3px} .cv-varf span{color:var(--cream);font-size:.92rem} @media (max-width:620px){ .cv-bare{height:96px;gap:2px} .cv-cap b{font-size:1.7rem} .cv-rata{margin-left:0} } @media (prefers-reduced-motion:reduce){.cv-b{animation:none!important}} /* ---------- Benzinării cu coordonate ---------- */ .bz-lista{list-style:none;margin:16px 0 10px;padding:0;display:grid;gap:11px} .bz-lista>li{padding:14px 16px;border-radius:15px;background:rgba(237,233,224,.04); border-left:3px solid rgba(198,164,92,.45)} .bz-pompe{list-style:none;margin:10px 0 0;padding:0} .bz-pompe li{display:flex;align-items:center;gap:10px;padding:5px 0; border-top:1px solid rgba(237,233,224,.07);font-size:.9rem} .bz-pompe li:first-child{border-top:0} .bz-n{flex:1;min-width:0} .bz-n em{font-style:normal;font-size:.62rem;font-weight:600;letter-spacing:.14em; padding:2px 7px;border-radius:99px;background:rgba(143,185,143,.18);color:#A8CBA8;margin-left:6px} .bz-gps{font-variant-numeric:tabular-nums;font-size:.84rem;color:var(--gold);text-decoration:none; white-space:nowrap;border-bottom:1px dotted rgba(201,169,110,.5)} .bz-gps:hover{opacity:1;border-bottom-style:solid} @media (max-width:520px){.bz-pompe li{flex-wrap:wrap;gap:4px}.bz-gps{width:100%}} /* Buton de navigare către pompă, în locul coordonatelor brute. */ .bz-nav{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px; border:1px solid rgba(201,169,110,.45);color:var(--gold);text-decoration:none; font-size:.78rem;font-weight:600;letter-spacing:.06em;white-space:nowrap; transition:background .25s,border-color .25s,transform .25s} .bz-nav svg{width:13px;height:13px;fill:currentColor;flex:none} .bz-nav:hover,.bz-nav:focus-visible{background:rgba(201,169,110,.16);border-color:var(--gold);transform:translateY(-1px)} @media (max-width:520px){.bz-nav{width:auto}} .bz-nota{border-left-color:rgba(237,233,224,.25)} /* ---------- Opriri de foto și de cafea ---------- */ .fo-lista,.ca-lista{list-style:none;margin:16px 0 10px;padding:0;display:grid;gap:11px} .fo-lista li,.ca-lista li{position:relative;display:flex;gap:14px;align-items:flex-start; padding:15px 16px;border-radius:15px;overflow:hidden; background:rgba(237,233,224,.04);border:1px solid rgba(237,233,224,.09); animation:op-intra .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d); transition:border-color .3s,background .3s,transform .3s} .fo-lista li:hover,.ca-lista li:hover{border-color:rgba(201,169,110,.45); background:rgba(201,169,110,.06);transform:translateY(-2px)} .fo-lista b,.ca-lista b{display:block;font-weight:400;color:var(--cream);margin-bottom:4px} .fo-lista .sm,.ca-lista .sm{margin:0;color:var(--muted);line-height:1.6} @keyframes op-intra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .fo-ic,.ca-ic{width:34px;height:34px;flex:none;margin-top:2px} .fo-ic svg,.ca-ic svg{width:100%;height:100%;display:block;overflow:visible} /* Aparatul foto: diafragma se închide și se deschide, becul clipește. */ .fo-corp,.fo-sus{fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linejoin:round} .fo-inel{fill:none;stroke:var(--gold);stroke-width:1.9;transform-origin:16px 17.5px; animation:fo-diafragma 4s ease-in-out infinite} .fo-lentila{fill:var(--gold);transform-origin:16px 17.5px;animation:fo-lentila 4s ease-in-out infinite} .fo-bec{fill:var(--gold);animation:fo-blitz 4s steps(1) infinite} @keyframes fo-diafragma{0%,70%,100%{transform:scale(1)}80%{transform:scale(.86)}} @keyframes fo-lentila{0%,70%,100%{transform:scale(1);opacity:1}78%{transform:scale(.55);opacity:.7}} @keyframes fo-blitz{0%,74%{opacity:.35}75%,79%{opacity:1}80%,100%{opacity:.35}} .fo-lista li:hover .fo-inel{animation-duration:1.4s} .fo-lista li:hover .fo-lentila{animation-duration:1.4s} /* Colțul de cadru, care se desenează la hover — ca un vizor. */ .fo-colt{position:absolute;top:8px;right:8px;width:16px;height:16px; border-top:2px solid var(--gold);border-right:2px solid var(--gold);border-radius:0 5px 0 0; opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .3s} .fo-lista li:hover .fo-colt{opacity:.8;transform:none} /* Cana: aburul urcă și se destramă. */ .ca-cana,.ca-toarta{fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round} .ca-farfurie{stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;opacity:.75} .ca-abur path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round; transform-origin:center bottom} .ca-abur path:nth-child(1){animation:ca-abur 3s ease-in-out infinite} .ca-abur path:nth-child(2){animation:ca-abur 3s ease-in-out infinite;animation-delay:1.1s} @keyframes ca-abur{0%{opacity:0;transform:translateY(3px) scaleY(.7)} 35%{opacity:.9}70%{opacity:.5;transform:translateY(-2px) scaleY(1.05)} 100%{opacity:0;transform:translateY(-5px) scaleY(1.15)}} .ca-lista li:hover .ca-abur path{animation-duration:1.6s} @media (max-width:520px){.fo-ic,.ca-ic{width:28px;height:28px}} @media (prefers-reduced-motion:reduce){ .fo-lista li,.ca-lista li,.fo-inel,.fo-lentila,.fo-bec,.ca-abur path{animation:none!important} } /* ---------- Cifrele buclei ---------- */ .ci-lista{list-style:none;margin:24px 0 12px;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fit,minmax(168px,1fr))} .ci-lista li{position:relative;padding:16px 16px 15px;border-radius:16px;overflow:hidden; background:linear-gradient(160deg,rgba(201,169,110,.1),rgba(201,169,110,.02)); border:1px solid rgba(237,233,224,.1); animation:ci-intra .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d); transition:border-color .3s,transform .3s} .ci-lista li:hover{border-color:rgba(201,169,110,.5);transform:translateY(-3px)} @keyframes ci-intra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .ci-ic{position:absolute;top:13px;right:13px;width:30px;height:30px;opacity:.55;transition:opacity .3s} .ci-lista li:hover .ci-ic{opacity:1} .ci-ic svg{width:100%;height:100%;display:block} .ci-ic path,.ci-ic circle,.ci-ic rect{fill:none;stroke:var(--gold);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .ci-ic .ci-ax,.ci-ic .ci-zile circle{fill:var(--gold);stroke:none} .ci-et{display:block;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--gold);margin-bottom:6px;padding-right:34px} .ci-v{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:1.65rem;font-weight:300; line-height:1.15;color:var(--cream);font-variant-numeric:tabular-nums;padding-right:34px} /* Drumul care șerpuiește: marcajul de pe axă „curge”. */ .ci-marcaj path{stroke-dasharray:3 5;animation:ci-curge 2.4s linear infinite} @keyframes ci-curge{to{stroke-dashoffset:-16}} /* Ceasul: acul mare se rotește lent. */ .ci-min{transform-origin:16px 16px;animation:ci-roteste 8s linear infinite} @keyframes ci-roteste{to{transform:rotate(360deg)}} /* Turometrul: acul oscilează. */ .ci-indicator{transform-origin:16px 22px;animation:ci-oscileaza 3.4s ease-in-out infinite} @keyframes ci-oscileaza{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(16deg)}} /* Calendarul: zilele se aprind pe rând. */ .ci-zile circle{animation:ci-aprinde 3s ease-in-out infinite} .ci-zile circle:nth-child(2){animation-delay:.25s} .ci-zile circle:nth-child(3){animation-delay:.5s} .ci-zile circle:nth-child(4){animation-delay:.75s} .ci-zile circle:nth-child(5){animation-delay:1s} @keyframes ci-aprinde{0%,100%{opacity:.35}45%{opacity:1}} @media (max-width:520px){ .ci-lista{grid-template-columns:1fr 1fr;gap:9px} .ci-lista li{padding:13px} .ci-v{font-size:1.35rem;padding-right:26px} .ci-ic{width:24px;height:24px;top:11px;right:10px} .ci-et{padding-right:26px;font-size:.62rem} } @media (prefers-reduced-motion:reduce){.ci-lista li,.ci-marcaj path,.ci-min,.ci-indicator,.ci-zile circle{animation:none!important}} /* ===== Modificări și adăugiri ulterioare, re-aplicate peste foaia întreagă. Curățarea de „clase moarte” ștersese 232 de selectoare, între care tot blocul paginii principale. Refacem foaia din arhivă și punem la loc doar ce am adăugat sau schimbat intenționat. ===== */ /* Logoul original, cu litere închise: pe fundal întunecat are nevoie de conturul luminos ca să se desprindă. Folosim varianta mare (361×401), nu cea de 99 px, ca să fie clar pe ecrane retina. */ .logo img{height:92px;width:auto; filter:drop-shadow(0 0 2px rgba(237,233,224,.9)) drop-shadow(0 0 18px rgba(201,169,110,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.7)); animation:logoglow 5s ease-in-out infinite} @keyframes logoglow{ 0%,100%{filter:drop-shadow(0 0 2px rgba(237,233,224,.9)) drop-shadow(0 0 14px rgba(201,169,110,.45)) drop-shadow(0 6px 14px rgba(0,0,0,.7))} 50%{filter:drop-shadow(0 0 2px rgba(237,233,224,1)) drop-shadow(0 0 26px rgba(201,169,110,.75)) drop-shadow(0 6px 14px rgba(0,0,0,.7))}} /* Avertisment pentru traseul care nu se poate face cu motocicletă de șosea. E cea mai importantă informație de pe pagină: dacă vine cineva cu anvelope de asfalt, nu are ce căuta acolo. Deci ocupă loc și se mișcă. */ .or-mare{position:relative;margin:22px 0 10px;padding:22px 24px;border-radius:18px;overflow:hidden; background:linear-gradient(140deg,rgba(201,127,127,.2),rgba(201,127,127,.07)); border:2px solid rgba(201,127,127,.55); animation:or-intra .7s cubic-bezier(.2,.8,.2,1) both} @keyframes or-intra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .or-mare::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(135deg,rgba(201,127,127,.11) 0 12px,transparent 12px 26px); animation:or-dungi 5s linear infinite} @keyframes or-dungi{to{background-position:52px 0}} .or-sus{position:relative;display:flex;align-items:center;gap:13px;margin-bottom:12px} .or-ic{width:42px;height:42px;flex:none} .or-ic svg{width:100%;height:100%;display:block} .or-tri{fill:none;stroke:#E88A8A;stroke-width:2.2;stroke-linejoin:round; transform-origin:center;animation:or-bate 2.2s ease-in-out infinite} .or-semn{stroke:#E88A8A;stroke-width:2.6;stroke-linecap:round} .or-punct{fill:#E88A8A} @keyframes or-bate{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.09);opacity:.72}} .or-titlu{position:relative;font-family:"Cormorant Garamond",Georgia,serif;font-weight:400; font-size:clamp(1.45rem,3.6vw,2rem);line-height:1.15;color:#F0A5A5;letter-spacing:.01em; animation:or-aprinde 2.6s ease-in-out infinite} @keyframes or-aprinde{0%,100%{text-shadow:0 0 0 rgba(232,138,138,0)}50%{text-shadow:0 0 18px rgba(232,138,138,.55)}} .or-text{position:relative;margin:0 0 8px;color:var(--cream);line-height:1.65} .or-text:last-child{margin-bottom:0} .or-text b{color:#F0A5A5;font-weight:400} .or-mare a{color:var(--gold)} .mt-or{display:inline-block;font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; padding:3px 8px;border-radius:99px;background:rgba(201,127,127,.24);color:#E88A8A;vertical-align:middle;margin-left:6px} @media (prefers-reduced-motion:reduce){.or-mare,.or-mare::before,.or-tri,.or-titlu{animation:none}} /* ---------- Gustul Bucovinei ---------- */ .gu-card{position:relative;margin:22px 0 10px;padding:20px 22px;border-radius:18px;overflow:hidden; border:1px solid rgba(201,169,110,.45); background:linear-gradient(140deg,rgba(201,169,110,.16),rgba(201,169,110,.03))} .gu-fundal{position:absolute;inset:-40% -10% auto auto;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,rgba(201,169,110,.22),transparent 70%); animation:gu-respira 6s ease-in-out infinite;pointer-events:none} @keyframes gu-respira{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}} .gu-lab{position:relative;margin:0 0 14px;font-size:.68rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gold)} .gu-corp{position:relative;display:flex;gap:16px;align-items:flex-start} .gu-ic{width:46px;height:46px;flex:none} .gu-ic svg{width:100%;height:100%;display:block;overflow:visible} .gu-farfurie,.gu-capac{fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round} .gu-masa{stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;opacity:.6} .gu-buton{fill:var(--gold)} .gu-capac{transform-origin:16px 15.5px;animation:gu-ridica 4.5s ease-in-out infinite} @keyframes gu-ridica{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3.5px)}} .gu-abur path{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;transform-origin:center bottom} .gu-abur path:nth-child(1){animation:gu-abur 3.2s ease-in-out infinite} .gu-abur path:nth-child(2){animation:gu-abur 3.2s ease-in-out infinite;animation-delay:1.3s} @keyframes gu-abur{0%{opacity:0;transform:translateY(3px) scaleY(.7)}35%{opacity:.95}100%{opacity:0;transform:translateY(-5px) scaleY(1.2)}} .gu-card b{display:block;font-weight:400;font-size:1.2rem;color:var(--cream);margin-bottom:3px} .gu-unde{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:8px} .gu-card .sm{margin:0;color:var(--muted);line-height:1.65} .gu-bifa{display:inline-block;margin-top:10px;font-size:.66rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;padding:4px 10px;border-radius:99px; background:rgba(143,185,143,.18);color:#A8CBA8} .gu-nav{position:relative;margin-top:16px} @media (prefers-reduced-motion:reduce){.gu-fundal,.gu-capac,.gu-abur path{animation:none}} /* ---------- În caz de pană ---------- */ .ur-card{margin:16px 0 10px;padding:18px 20px;border-radius:16px; background:rgba(237,233,224,.04);border:1px solid rgba(237,233,224,.12)} .ur-card>.sm{margin:0 0 14px;color:var(--cream);line-height:1.65} .ur-card>.sm b{color:#E88A8A;font-weight:400} .ur-lista{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ur-lista li{padding:12px 14px;border-radius:12px;background:rgba(237,233,224,.03); border-left:3px solid rgba(201,169,110,.5)} .ur-lista b{display:block;font-weight:400;color:var(--gold);margin-bottom:3px} .ur-lista span{color:var(--muted);font-size:.9rem;line-height:1.6} /* ---------- Traseul întreg pe hartă ---------- */ .hr-card{position:relative;display:flex;align-items:center;gap:16px;margin:22px 0 10px; padding:18px 20px;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--cream); border:1px solid rgba(201,169,110,.45); background:linear-gradient(140deg,rgba(201,169,110,.14),rgba(201,169,110,.03)); transition:border-color .3s,transform .3s,box-shadow .3s} .hr-card:hover,.hr-card:focus-visible{border-color:var(--gold);transform:translateY(-2px); box-shadow:0 12px 34px -20px rgba(0,0,0,.8)} /* Traseul desenat: linia se trasează, iar un punct o parcurge la nesfârșit. */ .hr-desen{width:120px;flex:none} .hr-desen svg{width:100%;height:52px;display:block;overflow:visible} .hr-umbra{fill:none;stroke:rgba(237,233,224,.14);stroke-width:3;stroke-linecap:round} .hr-linie{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round; stroke-dasharray:300;stroke-dashoffset:300;animation:hr-traseaza 2.6s cubic-bezier(.3,.7,.3,1) infinite} @keyframes hr-traseaza{0%{stroke-dashoffset:300}55%,100%{stroke-dashoffset:0}} .hr-start,.hr-cap{fill:var(--gold)} .hr-cap{animation:hr-apare 2.6s ease-out infinite} @keyframes hr-apare{0%,50%{opacity:0;r:2}62%{opacity:1;r:6}100%{opacity:1;r:4.5}} .hr-moto{fill:#FFF3D6;offset-path:path("M8,50 C40,50 44,14 76,14 S116,50 148,50 S184,14 212,14"); offset-distance:0%;animation:hr-merge 2.6s cubic-bezier(.3,.7,.3,1) infinite} @keyframes hr-merge{0%{offset-distance:0%;opacity:0}8%{opacity:1}55%,100%{offset-distance:100%;opacity:0}} .hr-text{flex:1;min-width:0} .hr-text b{display:block;font-weight:400;font-size:1.1rem;margin-bottom:4px} .hr-text .sm{color:var(--muted);line-height:1.6} .hr-sageata{width:26px;height:26px;flex:none;color:var(--gold);transition:transform .3s} .hr-sageata svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .hr-card:hover .hr-sageata{transform:translateX(4px)} @media (max-width:620px){ .hr-card{flex-wrap:wrap;gap:12px} .hr-desen{width:100%;order:-1} .hr-desen svg{height:44px} } @media (prefers-reduced-motion:reduce){.hr-linie,.hr-cap,.hr-moto{animation:none}.hr-linie{stroke-dashoffset:0}} /* Ateliere de pe traseu. */ .at-lista{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px} .at-lista li{padding:13px 15px;border-radius:14px;background:rgba(237,233,224,.04); border-left:3px solid rgba(201,169,110,.5)} .at-cap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px} .at-cap b{font-weight:400;flex:1;min-width:0;color:var(--cream)} .at-jos{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .at-tel{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px; border:1px solid rgba(143,185,143,.5);color:#A8CBA8;text-decoration:none; font-size:.82rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums; transition:background .25s,transform .25s} .at-tel svg{width:13px;height:13px;fill:currentColor;flex:none} .at-tel:hover{background:rgba(143,185,143,.14);transform:translateY(-1px)} .at-nota{margin:0 0 16px;color:var(--muted)} /* ---------- Logo lizibil peste fotografii ---------- */ /* Antetul stă peste hero, iar logoul e crem. Pe o fotografie cu cer luminos dispărea aproape complet. Două măsuri: un voal întunecat doar în banda de sus a imaginii și o umbră proprie pe logo, care ține și fără voal. */ .exp-hero{position:relative} .exp-hero::before{content:"";position:absolute;inset:0 0 auto 0;height:190px;z-index:1; pointer-events:none;background:linear-gradient(180deg,rgba(10,15,13,.72),rgba(10,15,13,.34) 45%,transparent)} .exp-hero>.photo{z-index:0} .exp-hero>header,.exp-hero>nav,.exp-hero .wrap{position:relative;z-index:2} /* Pe hero, logoul închis stă peste fotografie: are nevoie de conturul deschis, nu de umbre întunecate, altfel dispare în zonele închise ale imaginii. */ .exp-hero .logo img{filter:drop-shadow(0 0 2px rgba(237,233,224,.95)) drop-shadow(0 0 16px rgba(201,169,110,.6)) drop-shadow(0 6px 14px rgba(10,15,13,.85))} .logo-la{text-shadow:0 2px 10px rgba(10,15,13,.85),0 0 3px rgba(10,15,13,.7)} .logo{transition:transform .35s} .logo:hover{transform:translateY(-1px)} .logo:hover img{filter:drop-shadow(0 3px 14px rgba(201,169,110,.45)) drop-shadow(0 2px 10px rgba(10,15,13,.85))} /* ---------- Hubul moto ---------- */ .mo-poveste{display:grid;gap:26px;grid-template-columns:538px 1fr;align-items:start;margin:34px 0 6px} .mo-foto{margin:0} .mo-foto img{width:100%;height:auto;display:block;border-radius:16px; border:1px solid rgba(237,233,224,.12)} .mo-foto figcaption{margin-top:9px;color:var(--muted);line-height:1.55} .mo-text h2{margin:0 0 12px} .mo-text p{margin:0 0 12px} @media (max-width:920px){.mo-poveste{grid-template-columns:1fr}} /* Selectorul de stil */ .mo-sel{display:grid;gap:12px;grid-template-columns:repeat(3,1fr);margin:0 0 20px} .mo-op{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px; padding:18px 14px;border-radius:16px;cursor:pointer;color:var(--cream); background:rgba(237,233,224,.04);border:1px solid rgba(237,233,224,.12); font-family:inherit;font-size:1rem;transition:border-color .3s,background .3s,transform .3s} .mo-op:hover{border-color:rgba(201,169,110,.5);transform:translateY(-2px)} .mo-op[aria-selected="true"]{border-color:var(--gold);background:rgba(201,169,110,.12)} .mo-op b{font-weight:400;font-size:1.06rem} .mo-op .sm{color:var(--muted);line-height:1.5} .mo-op-ic{width:38px;height:38px} .mo-op-ic svg{width:100%;height:100%;display:block} .mo-cap,.mo-inima{fill:var(--gold);stroke:none;opacity:0} .mo-op[aria-selected="true"] .mo-inima{opacity:1;animation:mo-bate 1.9s ease-in-out infinite} @keyframes mo-bate{0%,100%{transform:scale(1)}45%{transform:scale(1.18)}} .mo-op[aria-selected="true"] .mo-op-ic{animation:mo-sus .45s cubic-bezier(.2,.8,.2,1)} @keyframes mo-sus{from{transform:translateY(5px) scale(.9)}to{transform:none}} @media (max-width:640px){.mo-sel{grid-template-columns:1fr}.mo-op{flex-direction:row;text-align:left;gap:14px} .mo-op-ic{width:30px;height:30px;flex:none}} .mo-rasp{max-width:640px;margin:0 auto;text-align:center;color:var(--cream);line-height:1.7; animation:mo-apare .5s ease both} @keyframes mo-apare{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* Motivul de pe primele trei carduri, după alegere */ .mo-motiv{display:inline-block;margin-top:10px;font-size:.68rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;padding:4px 10px;border-radius:99px; background:rgba(201,169,110,.18);color:var(--gold)} .mt-card.mo-top{border-color:var(--gold);background:rgba(201,169,110,.08)} /* Eticheta era scrisă în CSS, deci nu o putea traduce nici filtrul nostru, nici traducătorul din browser. Acum e text în pagină; aici rămâne doar forma. */ .mo-eticheta{display:none;position:absolute;top:0;right:0; font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; padding:5px 12px;border-radius:0 18px 0 12px;background:var(--gold);color:#121A15} .mt-card{position:relative} .mt-card.mo-top .mo-eticheta{display:block} /* Turometrul din hero: turează în continuu, ca un motor ținut la ralanti și accelerat scurt. Acul urcă în zona roșie, cade înapoi, mai dă un blip. */ .mo-tur{display:flex;flex-direction:column;align-items:center;gap:12px;margin:24px auto 0;max-width:300px} .mo-tur svg{width:100%;height:auto;display:block;overflow:visible} .mo-tur-arc{fill:none;stroke:rgba(237,233,224,.28);stroke-width:3;stroke-linecap:round} .mo-tur-rosu{fill:none;stroke:#C97F7F;stroke-width:3;stroke-linecap:round; animation:mo-rosu 3.2s ease-in-out infinite} @keyframes mo-rosu{0%,54%,100%{opacity:.5}62%,72%{opacity:1;filter:drop-shadow(0 0 8px rgba(201,127,127,.9))}} .mo-tur-grad path{stroke:rgba(237,233,224,.45);stroke-width:2;stroke-linecap:round} /* Acul: ralanti, accelerație până aproape de roșu, revenire, un blip scurt. */ .mo-tur-ac{stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;transform-origin:110px 108px; filter:drop-shadow(0 0 6px rgba(201,169,110,.65)); animation:mo-tureaza 3.2s cubic-bezier(.3,.8,.35,1) infinite} @keyframes mo-tureaza{ 0% {transform:rotate(4deg)} /* ralanti */ 8% {transform:rotate(10deg)} 30% {transform:rotate(96deg)} /* accelerație, până în roșu */ 42% {transform:rotate(44deg)} 54% {transform:rotate(52deg)} 66% {transform:rotate(108deg)} /* al doilea blip, mai sus */ 78% {transform:rotate(38deg)} 88% {transform:rotate(10deg)} 100% {transform:rotate(4deg)} } /* Axul pulsează în ritmul turației. */ .mo-tur-ax{fill:var(--gold);transform-origin:110px 108px;animation:mo-ax 3.2s ease-in-out infinite} @keyframes mo-ax{0%,100%{transform:scale(1)}30%,66%{transform:scale(1.25)}} .mo-tur-txt{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .mo-tur-txt b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .mo-tur-ac,.mo-tur-ax,.mo-tur-rosu{animation:none} .mo-tur-ac{transform:rotate(52deg)} } @media (max-width:560px){.mo-tur{max-width:230px}} /* ---------- Meniul, după adăugarea „Moto” ---------- */ /* Elementele erau `flex:1 1 0` cu `white-space:nowrap` și fără spațiu între ele: la șapte intrări, în germană („Aufenthalte”, „Wanderungen”), cuvintele se atingeau. Le dăm spațiu propriu și le lăsăm să se strângă. */ /* Spațiu egal între intrări: „gap” pe containerul flex, nu padding pe fiecare element. Cu `ul{display:contents} `, li-urile sunt copii direcți ai navului, deci column-gap se aplică exact între ele. */ .nav ul li{flex:0 1 auto;padding:0} /* Varianta poloneză are o filă în plus, deci spațiul se strânge mai devreme. */ .nav{column-gap:clamp(10px,1.9vw,30px);row-gap:10px;justify-content:center} .nav .logo{flex:0 0 100%} @media (min-width:901px){ .nav ul li{font-size:clamp(.72rem,1.05vw,.92rem);letter-spacing:clamp(.1em,.22vw,.22em)} } @media (max-width:900px){ .nav ul li{padding:0 clamp(5px,1.4vw,12px);font-size:clamp(.68rem,2vw,.86rem);letter-spacing:.12em} } @media (max-width:560px){ .nav ul li{padding:0 6px;font-size:.7rem;letter-spacing:.08em} } /* ---------- Caseta de rezervare directă ---------- */ /* Nu avea nicio regulă: cele două prețuri curgeau pe același rând, iar butonul se lipea de ele. De aici suprapunerea din captură. */ /* Caseta stătea lipită de secțiunea de deasupra și era mai lată decât textul. Îi dăm aer deasupra și o aliniem la aceeași lățime ca restul conținutului. */ .wrap-cta{max-width:960px;padding-top:clamp(34px,5vw,56px);padding-bottom:clamp(40px,6vw,64px)} .offer{position:relative;display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,40px); align-items:center;padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);border-radius:22px;overflow:hidden; border:1px solid rgba(201,169,110,.4); background:linear-gradient(140deg,rgba(201,169,110,.13),rgba(201,169,110,.02))} .offer-text{min-width:0} .offer-text .lab{margin:0 0 8px} .offer-text h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.15} .offer-text .muted{margin:0;max-width:52ch;line-height:1.65} /* Halou care respiră și o sclipire care traversează o dată la câteva secunde. */ .offer-glow{position:absolute;inset:auto -12% -60% auto;width:320px;height:320px;border-radius:50%; background:radial-gradient(circle,rgba(201,169,110,.2),transparent 70%);pointer-events:none; animation:of-respira 7s ease-in-out infinite} @keyframes of-respira{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.15);opacity:1}} .shine{position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%); transform:translateX(-100%);animation:of-sclipire 8s ease-in-out infinite} @keyframes of-sclipire{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}} .price{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0} .price-vechi{font-size:.84rem;color:var(--muted);text-decoration:line-through; text-decoration-color:rgba(201,127,127,.8)} .price-nou{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2rem,4vw,2.8rem); font-weight:300;line-height:1;color:var(--cream);font-variant-numeric:tabular-nums} .price-nou .sm{font-family:var(--sans);font-size:.82rem;color:var(--muted)} .offer-btn{margin-top:10px;white-space:nowrap} .offer-btn span{display:inline-block;transition:transform .3s} .offer-btn:hover span{transform:translateX(4px)} @media (max-width:820px){ .offer{grid-template-columns:1fr;gap:20px} .price{align-items:flex-start;border-top:1px solid rgba(201,169,110,.25);padding-top:18px} .offer-btn{width:100%;text-align:center} } @media (prefers-reduced-motion:reduce){.offer-glow,.shine{animation:none}} /* ---------- Meniul pe mobil ---------- */ @media (max-width:900px){ /* Șapte intrări plus limbile nu încap la 2 rem. Le facem mai mici și le dăm spațiu egal, iar rândul de limbi primește aer dedesubt: era lipit de marginea ecranului pe telefoanele mici. */ .mm-inner{gap:2px;padding:84px 24px 56px;max-width:400px} .mm-link{font-size:1.5rem;padding:11px 0} .mm-cta{margin-top:20px;padding:14px 18px;font-size:.9rem} .mm-contact{margin-top:18px} .mm-lang{margin-top:20px;padding-bottom:28px} } @media (max-width:420px){ .mm-inner{padding:74px 20px 52px} .mm-link{font-size:1.3rem;padding:9px 0} .mm-cta{font-size:.84rem;padding:13px 14px} } @media (max-height:680px){ .mm-inner{padding-top:64px;gap:0} .mm-link{font-size:1.25rem;padding:8px 0} } /* ---------- Turometrul de curbe ---------- */ /* Densitatea virajelor arătată ca un ac de turație: se vede dintr-o privire dacă drumul e de rulat sau de întors ghidonul. */ .cv-turometru{display:flex;align-items:center;gap:16px;margin:0 0 18px} .cv-turometru svg{width:132px;height:78px;flex:none;overflow:visible} .tu-arc{fill:none;stroke:rgba(237,233,224,.16);stroke-width:7;stroke-linecap:round} .tu-umplut{fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round; stroke-dasharray:170;stroke-dashoffset:170; animation:tu-umple 1.4s cubic-bezier(.2,.8,.2,1) .2s forwards} @keyframes tu-umple{to{stroke-dashoffset:calc(170 - 170 * var(--p) / 100)}} .tu-gradatii path{stroke:rgba(237,233,224,.35);stroke-width:1.6;stroke-linecap:round} .tu-ac path{stroke:#F0D9A8;stroke-width:3;stroke-linecap:round; filter:drop-shadow(0 0 6px rgba(201,169,110,.7))} .tu-ac{transform-origin:66px 70px;transform:rotate(-78deg); animation:tu-porneste 1.6s cubic-bezier(.3,1.4,.4,1) .2s forwards} @keyframes tu-porneste{ 0%{transform:rotate(-78deg)} 55%{transform:rotate(calc(var(--u) + 10deg))} 100%{transform:rotate(var(--u))} } .tu-ax{fill:var(--gold)} .tu-val{font-family:"Cormorant Garamond",Georgia,serif;font-size:2.1rem;font-weight:300; line-height:1;color:var(--gold);display:flex;flex-direction:column;gap:4px} .tu-val em{font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} @media (max-width:520px){.cv-turometru{gap:12px}.cv-turometru svg{width:104px;height:62px}.tu-val{font-size:1.7rem}} @media (prefers-reduced-motion:reduce){.tu-umplut,.tu-ac{animation:none}.tu-ac{transform:rotate(var(--u))} .tu-umplut{stroke-dashoffset:calc(170 - 170 * var(--p) / 100)}} /* Capul secțiunii de curbe: turometru la stânga, totalul la dreapta. */ .cv-sus{display:flex;align-items:center;gap:clamp(16px,3vw,32px);flex-wrap:wrap;margin-bottom:18px} .cv-sus .cv-turometru{margin:0} .cv-sus .cv-cap{margin:0;flex:1;min-width:190px} @media (max-width:560px){.cv-sus{gap:14px}.cv-sus .cv-cap{min-width:0}} /* ---------- Fotografia din hero ---------- */ /* Avea doar `max-width:100%`, deci pe ecrane late creștea proporțional și ocupa jumătate de pagină. O ținem în format peisaj și îi punem o limită de înălțime, ca titlul să rămână în prima privire. */ .exp-hero .photo{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 45%; max-height:min(56vh,520px)} .exp-hero-short .photo{max-height:min(40vh,380px)} @media (max-width:700px){ .exp-hero .photo{aspect-ratio:3/2;max-height:46vh} .exp-hero-short .photo{aspect-ratio:3/2;max-height:34vh} } /* ---------- Povestea de pe hub ---------- */ /* Textul stătea într-o coloană de vreo 25 de caractere, lângă o fotografie de 538 px: zece cuvinte pe rând, imposibil de citit. Fotografia trece pe toată lățimea, iar textul curge sub ea, în două coloane pe ecrane late. */ .mo-poveste{display:block;margin:34px 0 6px} .mo-foto-lat{margin:0 0 22px;width:100%} .mo-foto-lat img{width:100%;height:auto;border-radius:16px; aspect-ratio:16/9;object-fit:cover} .mo-foto-lat figcaption{margin-top:10px;color:var(--muted);line-height:1.55} .mo-text h2{margin:0 0 14px} .mo-text p{margin:0 0 14px;line-height:1.75} .mo-text p:last-child{margin-bottom:0} @media (min-width:900px){ .mo-text{column-count:2;column-gap:38px} .mo-text h2{column-span:all} } /* ---------- Primele trei bucle ---------- */ .mo-titlu-top,.mo-titlu-rest{margin:0 0 14px} .mo-titlu-rest{margin-top:38px} .mo-carduri-top{margin-bottom:6px} .mo-ales{border-color:rgba(201,169,110,.55);background:rgba(201,169,110,.07)} .mo-ales .mt-km{color:#F0D9A8} .mo-top{box-shadow:0 0 0 1px rgba(201,169,110,.35),0 14px 36px -22px rgba(0,0,0,.8)} .mo-motiv{display:block;margin-top:9px;font-size:.76rem;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--gold)} /* ---------- Iconițele de stil: siluete pline de motocicletă ---------- */ .mo-corp{fill:var(--gold);stroke:none} .mo-roata,.mo-spita,.mo-furca{fill:none;stroke:var(--gold);stroke-linecap:round} .mo-spita{opacity:.55;transform-box:fill-box;transform-origin:center; animation:mo-rot 1.9s linear infinite} @keyframes mo-rot{to{transform:rotate(360deg)}} .mo-b{animation:mo-ruleaza 2.6s ease-in-out infinite;animation-delay:var(--d,0ms)} @keyframes mo-ruleaza{0%,100%{transform:translateX(-.6px)}50%{transform:translateX(.6px)}} .mo-inima{fill:var(--gold);stroke:none;transform-box:fill-box;transform-origin:center; animation:mo-bate 2.2s ease-in-out infinite} @keyframes mo-bate{0%,100%{transform:scale(1)}18%{transform:scale(1.18)}32%{transform:scale(1)}50%{transform:scale(1.1)}} .mo-op:hover .mo-spita,.mo-op[aria-selected="true"] .mo-spita{animation-duration:.6s;opacity:.9} @media (prefers-reduced-motion:reduce){.mo-spita,.mo-b,.mo-inima{animation:none}} /* Lista de linkuri din subsol: fără buline. Era un