/* ========================================================= Knyazi Stezhky — main stylesheet Design tokens are declared in style.css (:root) ========================================================= */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.55} h1,h2,h3,h4{font-family:'Montserrat',sans-serif;margin:0;line-height:1.08;letter-spacing:-0.01em} button{font-family:inherit;cursor:pointer;border:none;background:none} input,select{font-family:inherit} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .leaflet-container{font-family:'Manrope',sans-serif;border-radius:18px} .leaflet-tooltip{font-weight:700;border:none;box-shadow:0 4px 14px rgba(0,0,0,.18);border-radius:8px;padding:5px 9px} @keyframes pulse{0%{transform:scale(.5);opacity:.85}70%{transform:scale(2.6);opacity:0}100%{opacity:0}} @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes overlayIn{from{opacity:0}to{opacity:1}} a:hover,button:hover{opacity:.85} /* ---------- layout helpers ---------- */ .ks-section{max-width:1160px;margin:0 auto;padding:64px 20px 0} .ks-section--flush-top{padding-top:22px} .ks-section--pad-top{padding-top:64px;scroll-margin-top:80px} .ks-section--narrow{max-width:760px} .ks-eyebrow{font-family:'JetBrains Mono';font-size: 0.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green);font-weight:500;margin-bottom:10px} .ks-eyebrow--center{text-align:center} .ks-h2{font-size:clamp(26px,4vw,38px);font-weight:800;margin-bottom:26px} .ks-h2--tight{margin-bottom:8px} .ks-h2--white{color:#fff;margin-bottom:24px} .ks-h2--center{text-align:center;margin-bottom:24px} .ks-section-sub{font-size: 0.9375rem;color:var(--muted);max-width:620px;margin:0 0 20px} .ks-dot{width:9px;height:9px;border-radius:50%;background:var(--cat-color,#999);display:inline-block;flex:none} .hide-sm{} @media(max-width:600px){.hide-sm{display:none!important}} /* ---------- buttons ---------- */ .ks-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size: 0.9375rem;padding:13px 22px;border-radius:11px;white-space:nowrap} .ks-btn--sm{padding:8px 12px;font-size: 0.78125rem;border-radius:9px} .ks-btn--grow{flex:1;min-width:200px} .ks-btn--accent{background:var(--accent);color:#fff} .ks-btn--green{background:var(--green);color:#fff} .ks-btn--glass{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;backdrop-filter:blur(4px)} .ks-btn--outline{background:var(--paper);border:1px solid var(--line);color:var(--ink)} /* ---------- header ---------- */ .ks-header{position:sticky;top:0;z-index:900;background:rgba(241,238,230,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .ks-header__row{max-width:1160px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:18px} .ks-brand{display:flex;align-items:center;gap:11px;flex:none} .ks-brand__mark{width:40px;height:40px;border-radius:11px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Montserrat';font-weight:800;font-size:17px;letter-spacing:-1px} .ks-brand__mark--sm{width:38px;height:38px;font-size:16px;border-radius:10px} .ks-brand__text{display:flex;flex-direction:column;line-height:1.05} .ks-brand__name{font-family:'Montserrat';font-weight:800;font-size: 1rem;color:var(--ink)} .ks-brand__sub{font-family:'JetBrains Mono';font-size: 0.65625rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .ks-nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-weight:600;font-size:14.5px} .ks-nav a{color:var(--ink)} .ks-header__actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none} .ks-lang{display:flex;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px} .ks-lang__btn{border-radius:6px;padding:5px 9px;font-weight:700;font-size:12px;color:var(--muted)} .ks-lang__btn.active{background:var(--ink);color:#fff} .ks-cta{background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:9px;white-space:nowrap} .ks-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:9px;background:var(--paper);align-items:center;justify-content:center;color:var(--ink)} .ks-mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper);padding:10px 20px 16px;flex-direction:column;gap:2px} .ks-mobile-menu.open{display:flex} .ks-mobile-menu a{padding:11px 8px;font-weight:600;border-bottom:1px solid var(--line)} .ks-mobile-menu a:last-child{border-bottom:none} @media(max-width:920px){ .ks-nav{display:none} .ks-burger{display:inline-flex} } /* ---------- hero ---------- */ .ks-hero{position:relative;border-radius:24px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end;background:var(--stripe);background-size:cover;background-position:center} .ks-hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,36,29,.12) 0%,rgba(17,36,29,.40) 55%,rgba(17,36,29,.82) 100%)} .ks-hero__cover-label{position:absolute;top:16px;right:16px;font-family:'JetBrains Mono';font-size: 0.6875rem;color:rgba(255,255,255,.72);background:rgba(17,36,29,.35);padding:5px 10px;border-radius:7px} .ks-hero__content{position:relative;padding:38px 34px;max-width:720px;color:#fff} .ks-hero__eyebrow{font-family:'JetBrains Mono';font-size: 0.75rem;letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:.92;margin-bottom:16px;display:flex;align-items:center;gap:9px} .ks-hero__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(224,123,62,.35);display:inline-block} .ks-hero__title{font-size:clamp(34px,6vw,58px);font-weight:800;margin-bottom:16px;text-wrap:balance} .ks-hero__sub{font-size:clamp(15px,2vw,18.5px);max-width:560px;color:rgba(255,255,255,.92);margin:0 0 26px;line-height:1.55} .ks-hero__cta-row{display:flex;flex-wrap:wrap;gap:12px} /* ---------- stats ---------- */ .ks-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .ks-stat{background:var(--paper);border-radius:16px;padding:20px} .ks-stat__value{font-family:'Montserrat';font-weight:800;font-size: 1.875rem;color:var(--green)} .ks-stat__label{font-size: 0.8125rem;color:var(--muted)} /* ---------- prep (Practical information) ---------- */ .ks-prep-intro{max-width:640px;margin:6px 0 22px;color:var(--muted);font-size: 1rem;line-height:1.6} .ks-prep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .ks-prep-card{background:var(--paper);border-radius:18px;padding:26px} .ks-prep-card__index{color:var(--accent);font-family:'JetBrains Mono';font-weight:700;font-size: 0.8125rem;margin-bottom:10px} /* The icon replaced a running 01/02/03 index: these cards are a set of independent notes, and numbering them implied an order to work through. */ .ks-prep-card__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--bg-alt);border:1px solid var(--card-border);color:var(--accent);margin-bottom:14px} .ks-prep-card__title{font-family:'Montserrat';font-weight:700;font-size: 1.0625rem;margin-bottom:8px} .ks-prep-card__text{font-size: 0.875rem;color:var(--muted);margin:0;line-height:1.6;white-space:pre-line} /* ---------- map ---------- */ .ks-map-wrap{position:relative;border-radius:18px;border:1px solid var(--line);overflow:hidden;box-shadow:0 10px 30px rgba(23,36,29,.08)} .ks-map{height:clamp(380px,58vh,560px);width:100%;background:#dfe7df;z-index:1} .ks-map__controls{position:absolute;top:14px;right:14px;z-index:500;display:flex;flex-direction:column;gap:8px;align-items:flex-end} .ks-map__ctrl-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:700;font-size: 0.84375rem;padding:9px 13px;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.12);white-space:nowrap} .ks-map__legend{position:absolute;left:14px;bottom:14px;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:11px 13px;max-width:230px;box-shadow:0 3px 12px rgba(0,0,0,.12)} .ks-map__legend-title{font-size: 0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px} .ks-map__legend-list{display:flex;flex-direction:column;gap:6px} .ks-map__legend-item{display:flex;align-items:center;gap:8px;font-size: 0.78125rem;font-weight:600;cursor:pointer;background:none;border:none;padding:0;color:var(--ink);opacity:1;transition:opacity .15s} .ks-map__legend-item.is-inactive{opacity:.35} .ks-map__ctrl-btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff} .ks-map__ctrl-btn[hidden]{display:none} /* Service legend: bottom right, opposite the route legend so the two never fight for the same corner on a narrow map. */ .ks-map__services-legend{position:absolute;right:14px;bottom:14px;z-index:500;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:11px 13px;max-width:230px;max-height:46%;overflow:auto;box-shadow:0 3px 12px rgba(0,0,0,.12)} .ks-map__services-legend[hidden]{display:none} .ks-map__legend-count{margin-left:auto;padding-left:8px;font-size: 0.6875rem;font-weight:700;color:var(--ink-faint)} @media(max-width:700px){ .ks-map__services-legend{max-width:150px;padding:9px 10px} .ks-map__legend{max-width:150px} } .ks-map__hint{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size: 0.78125rem;color:var(--muted);max-width:640px} .ks-map__hint svg{flex:none;margin-top:2px;color:var(--green)} .ks-map__geo-error{display:none;margin-top:10px;background:#FBECE6;border:1px solid #F0CBB9;color:#9A4523;font-size: 0.8125rem;font-weight:600;padding:11px 14px;border-radius:10px} /* ---------- POI controls / chips / grid ---------- */ .ks-poi-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:16px} .ks-search{position:relative;flex:1;min-width:230px} .ks-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)} .ks-search input{width:100%;padding:12px 14px 12px 40px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font-size: 0.90625rem;outline:none} .ks-sort{padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--paper);font-size: 0.875rem;font-weight:600;color:var(--ink);outline:none;cursor:pointer} .ks-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .ks-chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);font-weight:600;font-size: 0.8125rem;padding:7px 14px;border-radius:99px;display:inline-flex;align-items:center;gap:7px} .ks-chip.active{background:var(--green)!important;color:#fff!important;border-color:var(--green)!important} .ks-poi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px} .ks-no-results{display:none;text-align:center;padding:56px 20px;color:var(--muted);font-weight:600} .ks-poi-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column} .ks-poi-card__media{position:relative;height:152px;background:var(--stripe);display:flex;align-items:flex-end;justify-content:space-between;padding:11px} .ks-poi-card__badge{background:rgba(17,36,29,.78);color:#fff;font-weight:700;font-size: 0.71875rem;padding:5px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px} .ks-poi-card__gallery-label{font-family:'JetBrains Mono';font-size: 0.65625rem;color:rgba(255,255,255,.75);background:rgba(17,36,29,.45);padding:3px 7px;border-radius:6px} .ks-poi-card__order{position:absolute;top:11px;left:11px;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--green);font-family:'Montserrat';font-weight:800;font-size: 0.875rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15)} .ks-poi-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1} .ks-poi-card__name{font-size: 1.09375rem;font-weight:700;margin-bottom:6px;line-height:1.2} .ks-poi-card__short{font-size: 0.84375rem;color:var(--muted);margin:0 0 14px;line-height:1.55;flex:1} .ks-poi-card__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size: 0.78125rem;color:var(--muted);font-weight:600} .ks-poi-card__meta-item{display:inline-flex;align-items:center;gap:5px} .ks-poi-card__meta-item--dist{color:var(--green);font-weight:700} .ks-poi-card__map-btn{margin-top:14px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--green-l);color:var(--green-d);font-weight:700;font-size: 0.8125rem;padding:8px 13px;border-radius:9px} /* ---------- safety ---------- */ .ks-safety{background:var(--green-d);border-radius:24px;padding:clamp(28px,4vw,48px);color:#fff} .ks-safety__eyebrow{font-family:'JetBrains Mono';font-size: 0.75rem;letter-spacing:.08em;text-transform:uppercase;color:#9FD3B6;margin-bottom:10px} .ks-safety-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .ks-safety-item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px;font-size: 0.875rem;line-height:1.55} .ks-safety-item svg{flex:none;margin-top:1px;color:#9FD3B6} /* ---------- faq ---------- */ .ks-faq-list{display:flex;flex-direction:column;gap:10px} .ks-faq-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:6px 8px} .ks-faq-item__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 12px;font-weight:700;font-size: 0.9375rem;text-align:left} .ks-faq-item__q{color:inherit} .ks-faq-item__q:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px} .ks-faq-item__toggle{flex:none;width:26px;height:26px;border-radius:50%;background:var(--green-l);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-weight:800;font-size: 1rem;transition:background .15s,color .15s} .ks-faq-item.is-open .ks-faq-item__toggle{background:var(--accent);color:#fff} .ks-faq-item__q:hover .ks-faq-item__toggle{background:var(--accent);color:#fff} .ks-faq-item__a{padding:0 12px 16px} .ks-faq-item__a p{margin:0;font-size: 0.875rem;color:var(--muted);line-height:1.6} /* ---------- footer ---------- */ .ks-footer{margin-top:72px;background:var(--ink);color:rgba(255,255,255,.78)} .ks-footer__grid{max-width:1160px;margin:0 auto;padding:48px 20px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px} .ks-footer__brand{display:flex;align-items:center;gap:11px;margin-bottom:14px} .ks-footer__brandname{font-family:'Montserrat';font-weight:800;font-size: 1rem;color:#fff} .ks-footer__about{font-size: 0.84375rem;line-height:1.6;margin:0;max-width:300px} .ks-footer__heading{font-weight:700;color:#fff;font-size: 0.875rem;margin-bottom:12px} .ks-footer__text{font-size: 0.84375rem;line-height:2} .ks-footer__partners{display:flex;flex-direction:column;gap:9px} .ks-footer__partner-bar{height:30px;border-radius:7px;background:var(--stripe);opacity:.5} .ks-footer__partner-bar--sm{width:80%} .ks-footer__bottom{border-top:1px solid rgba(255,255,255,.12)} .ks-footer__bottom-row{max-width:1160px;margin:0 auto;padding:16px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-size: 0.78125rem} .ks-footer__privacy{color:rgba(255,255,255,.78);font-weight:600} .ks-footer__attribution{font-family:'JetBrains Mono';font-size: 0.71875rem;color:rgba(255,255,255,.55)} /* ---------- modal ---------- */ .ks-modal-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(17,36,29,.55);backdrop-filter:blur(3px);align-items:flex-end;justify-content:center;animation:overlayIn .2s ease} .ks-modal-overlay.open{display:flex} .ks-modal-panel{background:var(--bg);width:100%;max-width:680px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;animation:fadeUp .26s ease;position:relative} .ks-modal__media{position:relative;height:210px;background:var(--stripe);background-size:cover;background-position:center} .ks-modal__media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,36,29,0) 40%,rgba(17,36,29,.55) 100%)} .ks-modal__badge{position:absolute;bottom:13px;left:16px;background:rgba(17,36,29,.78);color:#fff;font-weight:700;font-size: 0.75rem;padding:6px 12px;border-radius:99px;display:inline-flex;align-items:center;gap:7px} .ks-modal__gallery-label{position:absolute;bottom:13px;right:16px;font-family:'JetBrains Mono';font-size: 0.6875rem;color:rgba(255,255,255,.78)} .ks-modal__close{position:absolute;top:13px;right:13px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center} .ks-modal__nav{position:absolute;top:13px;left:13px;display:flex;gap:7px} .ks-modal__nav-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center} .ks-modal__body{padding:24px 24px 28px} .ks-modal__eyebrow{font-family:'JetBrains Mono';font-size: 0.75rem;color:var(--accent);margin-bottom:8px} .ks-modal__title{font-size: 1.625rem;font-weight:800;margin-bottom:12px} .ks-modal__desc{font-size: 0.9375rem;color:var(--ink);opacity:.85;line-height:1.65;margin:0 0 20px} .ks-modal__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px} .ks-chip-card{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:10px 14px} .ks-chip-card--dist{background:var(--green-l);border-color:var(--green-l)} .ks-chip-card__label{font-size: 0.6875rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px} .ks-chip-card__value{font-weight:700;font-size: 0.90625rem;display:inline-flex;align-items:center;gap:6px} .ks-modal__coords,.ks-waypoint__coords{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:12px} .ks-waypoint__coords-value,.ks-modal__coords-value{font-family:'JetBrains Mono';font-size: 0.875rem;font-weight:500} .ks-modal__tips-label,.ks-waypoint__tips-label{font-size: 0.6875rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px} .ks-modal__tips,.ks-waypoint__tips{display:flex;flex-direction:column;gap:9px;margin-bottom:24px} .ks-modal__tip,.ks-waypoint__tip{display:flex;gap:11px;align-items:flex-start;font-size: 0.875rem;color:var(--ink);opacity:.85;line-height:1.55} .ks-modal__tip svg,.ks-waypoint__tip svg{flex:none;margin-top:1px;color:var(--accent)} .ks-modal__actions{display:flex;flex-wrap:wrap;gap:10px} /* ---------- single waypoint page ---------- */ .ks-waypoint{max-width:900px;margin:0 auto} .ks-waypoint__media{position:relative;height:clamp(240px,40vh,380px);background:var(--stripe);background-size:cover;background-position:center} .ks-waypoint__media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,36,29,.05) 30%,rgba(17,36,29,.6) 100%)} .ks-waypoint__back{position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);font-weight:700;font-size: 0.8125rem;padding:9px 14px;border-radius:9px} .ks-waypoint__badge{position:absolute;bottom:16px;left:16px;background:rgba(17,36,29,.78);color:#fff;font-weight:700;font-size: 0.75rem;padding:6px 12px;border-radius:99px;display:inline-flex;align-items:center;gap:7px} .ks-waypoint__gallery-label{position:absolute;bottom:16px;right:16px;font-family:'JetBrains Mono';font-size: 0.6875rem;color:rgba(255,255,255,.78)} .ks-waypoint__nav{position:absolute;top:16px;right:16px;display:flex;gap:7px} .ks-waypoint__nav-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center} .ks-waypoint__body{padding:28px 20px 60px} .ks-waypoint__eyebrow{font-family:'JetBrains Mono';font-size: 0.75rem;color:var(--accent);margin-bottom:8px} .ks-waypoint__title{font-size:clamp(28px,4vw,38px);font-weight:800;margin-bottom:14px} .ks-waypoint__desc{font-size: 1rem;color:var(--ink);opacity:.85;line-height:1.7;margin:0 0 22px;max-width:640px} .ks-waypoint__chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px} .ks-waypoint__actions{display:flex;flex-wrap:wrap;gap:10px} /* ---------- cookie banner ---------- */ .ks-cookie{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:950;max-width:520px;margin:0 auto;background:var(--ink);color:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.3);align-items:center;gap:14px;flex-wrap:wrap} .ks-cookie.open{display:flex} .ks-cookie p{font-size:13.5px;margin:0;flex:1;min-width:220px;line-height:1.5;color:rgba(255,255,255,.85)} .ks-cookie__actions{display:flex;gap:8px} .ks-cookie__btn{font-weight:700;font-size:13px;padding:9px 14px;border-radius:9px;color:#fff} .ks-cookie__btn--ghost{background:rgba(255,255,255,.14)} .ks-cookie__btn--accent{background:var(--accent);padding:9px 16px} /* ---------- generic fallback list (index.php) ---------- */ .ks-generic-list{display:flex;flex-direction:column;gap:18px;padding:40px 0} .ks-generic-item h2{font-size: 1.25rem;margin-bottom:6px} .ks-generic-item__excerpt{color:var(--muted);font-size: 0.875rem} /* ========================================================= v2 ADDITIONS — princely heraldic identity (index__6_.html merge) Typography, dark mode, nav chrome, hero, route-includes, about narrative, single-waypoint "loc" layout, and updated footer. ========================================================= */ html { scroll-behavior: smooth; } body { font-family: 'Avdira', 'Inter', sans-serif; font-size: 1rem; transition: background .35s, color .35s; } h1, h2, h3, h4 { font-family: var(--font-title); letter-spacing: .004em; } .ks-h2, .section-title, .ri-title, .loc-title { text-wrap: balance; } /* ---------- NAV (v2) ---------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 40px; height: 68px; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; } .nav-logo--custom { display: flex; align-items: center; } .nav-logo--custom a { display: flex; align-items: center; } .nav-logo--custom img.custom-logo { max-height: 44px; width: auto; display: block; } .nav-logo-img { max-height: 44px; width: auto; height: auto; display: block; } .nav-logo-text { font-family: var(--font-title); font-weight: 700; font-size: 16px; color: var(--ink); } .nav-links { display: flex; gap: 28px; list-style: none; margin: 0 0 0 auto; padding: 0; } .nav-links a { text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); transition: color .2s; } .nav-links a:hover { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 14px; } .lang-switcher { display: flex; gap: 2px; align-items: center; } /* Also matches — with Polylang active the switcher is real links to the per-language URLs, not cookie buttons. */ .lang-btn { display: inline-block; text-decoration: none; line-height: 1.4; font-size: 10px; font-weight: 600; letter-spacing: .08em; padding: 4px 7px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; border-radius: 3px; transition: background .2s, color .2s, border-color .2s; } .lang-btn:hover { color: var(--accent); border-color: var(--accent); } .lang-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .font-size-ctrl { display: flex; gap: 2px; align-items: center; } .font-btn { font-size: 11px; font-weight: 700; padding: 4px 7px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; border-radius: 3px; line-height: 1; transition: background .2s, color .2s, border-color .2s; } .font-btn:hover { color: var(--accent); border-color: var(--accent); } /* Which of the three sizes is currently on — matches .lang-btn.active. */ .font-btn.is-active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .tts-btn { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; border-radius: 3px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; } .tts-btn:hover { color: var(--accent); border-color: var(--accent); } .tts-btn.speaking { background: var(--red); color: #fff; border-color: var(--red); } .tts-btn.speaking svg { animation: tts-pulse 1s ease-in-out infinite; } @keyframes tts-pulse { 0%,100%{opacity:1} 50%{opacity:.5} } .tts-label { display: none; } @media(min-width:1100px){ .tts-label { display: inline; } } .theme-toggle { width: 44px; height: 24px; background: var(--line); border-radius: 12px; border: 1px solid var(--line); cursor: pointer; position: relative; transition: background .3s; flex-shrink: 0; } .theme-toggle::after { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); top: 2px; left: 2px; transition: transform .3s, background .3s; } [data-theme="dark"] .theme-toggle::after { transform: translateX(20px); } .theme-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); } /* On desktop the panel is transparent scaffolding — it just holds the links and the tools in the same row they always occupied. */ .nav-panel { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; justify-content: flex-end; } .nav-burger { display: none; } @media(max-width:900px){ nav { padding: 0 20px; } /* The burger replaces the row; the panel drops out of the flow beneath the fixed nav bar. Everything inside it is the same DOM as on desktop, so no ids are duplicated and ui.js keeps working untouched. */ .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 34px; padding: 0 8px; margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; } .nav-burger__bar { display: block; height: 1.5px; width: 100%; background: var(--ink-muted); border-radius: 2px; transition: transform .25s, opacity .2s; } .nav-burger[aria-expanded="true"] { border-color: var(--accent); } .nav-burger[aria-expanded="true"] .nav-burger__bar { background: var(--accent); } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] .nav-burger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } .nav-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 20px 18px; background: var(--nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); max-height: calc(100dvh - 68px); overflow-y: auto; } .nav-panel.is-open { display: flex; } .nav-links { flex-direction: column; gap: 0; margin: 0; } .nav-links a { display: block; padding: 15px 2px; font-size: 13px; border-bottom: 1px solid var(--line); } .nav-right { flex-wrap: wrap; gap: 14px; padding-top: 16px; } /* Full-size tap targets, now that there is room for them. */ .lang-switcher { gap: 6px; } .lang-btn { font-size: 12px; padding: 8px 14px; } .font-size-ctrl { gap: 6px; } .font-btn { font-size: 13px; padding: 8px 14px; } .tts-btn { padding: 7px 12px; } .tts-label { display: inline; } } /* ---------- BUTTONS (v2 aliases) ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; font-weight: 600; font-size: 0.875rem; letter-spacing: .02em; border: 1px solid transparent; text-decoration: none; transition: opacity .2s, transform .1s; } .btn:active { transform: translateY(1px) scale(.99); } .btn-primary { background: var(--red); color: #fbf4d4; } .btn-primary:hover { background: var(--red-d); opacity: 1; } .btn-outline { background: transparent; border-color: var(--line); color: var(--ink); } /* ---------- HERO (v2) ---------- */ .hero { min-height: 100vh; min-height: 100dvh; padding-top: 68px; position: relative; display: flex; align-items: flex-end; overflow: hidden; } .hero-bg { position: absolute; inset: 0; filter: saturate(.9) brightness(.58) contrast(1.04); } [data-theme="dark"] .hero-bg { filter: saturate(.7) brightness(.4) contrast(1.04); } .hero-overlay { position: absolute; inset: 0; background: radial-gradient(135% 120% at 0% 100%, rgba(20,16,9,.95) 0%, rgba(20,16,9,.72) 32%, rgba(20,16,9,.26) 60%, rgba(20,16,9,.04) 85%), linear-gradient(to top, rgba(20,16,9,.55), rgba(20,16,9,0) 58%); } /* ---------- the hero film (inc/hero-video.php) ---------- Wallpaper first: it sits over the poster and under the gradients, dimmed exactly as the still image is, so the headline stays readable and nothing about the page moves when it starts. */ .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity .9s ease; filter: saturate(.9) brightness(.58) contrast(1.04); pointer-events: none; } .hero.is-video-playing .hero-video { opacity: 1; } [data-theme="dark"] .hero-video { filter: saturate(.7) brightness(.4) contrast(1.04); } /* The film view: text, gradients and shadows out of the way, nothing over the picture, letterboxed on black so no part of the frame is cropped. */ .hero.is-cinema { background: #000; } .hero.is-cinema .hero-bg, .hero.is-cinema .hero-overlay { opacity: 0; } .hero.is-cinema .hero-content { opacity: 0; pointer-events: none; transform: translateY(8px); } .hero.is-cinema .hero-video { opacity: 1; object-fit: contain; filter: none; pointer-events: auto; z-index: 2; } .hero-bg, .hero-overlay { transition: opacity .45s ease; } .hero-content { transition: opacity .35s ease, transform .35s ease; } /* The download is worth naming before it is asked for: much of this route has no signal. */ .hero-watch__size { font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em; opacity: .72; font-variant-numeric: tabular-nums; } .hero-watch__size::before { content: "· "; } /* Shown only in the film view, where someone is watching rather than reading. */ .hero-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 9px 16px; border-radius: 999px; background: rgba(10,8,4,.6); backdrop-filter: blur(6px); color: #fbf4d4; font-size: 0.8125rem; letter-spacing: .02em; } .hero-loading[hidden] { display: none; } .hero-exit { position: absolute; top: 84px; left: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; border: 1px solid rgba(251,244,212,.45); background: rgba(10,8,4,.55); backdrop-filter: blur(6px); color: #fbf4d4; font-size: 0.8125rem; font-weight: 600; cursor: pointer; } .hero-exit:hover { border-color: var(--gold); color: var(--gold); } .hero-exit:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .hero-exit[hidden] { display: none; } /* While the film plays there is nothing to scroll to, and the sticky header would sit on top of the picture. */ html.ks-hero-cinema, html.ks-hero-cinema body { overflow: hidden; } html.ks-hero-cinema .ks-header { opacity: 0; pointer-events: none; transition: opacity .3s ease; } @media (max-width: 600px) { .hero-exit { top: 76px; left: 14px; padding: 8px 12px; } } @media (prefers-reduced-motion: reduce) { .hero-video, .hero-bg, .hero-overlay, .hero-content { transition: none; } } .hero-content { position: relative; z-index: 1; max-width: 760px; padding: 48px 60px 72px; } .hero-eyebrow { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 10px rgba(0,0,0,.6); margin-bottom: 4px; } .hero-eyebrow::after { content: ""; display: block; width: 54px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-top: 12px; } .hero-title { color: #fbf4d4; font-weight: 400; font-size: clamp(46px,6.6vw,90px); line-height: 1.02; letter-spacing: .012em; text-shadow: 0 3px 28px rgba(0,0,0,.55); margin: 18px 0 20px; } .hero-title span { color: #df4a3d; } .hero-desc { color: rgba(245,236,196,.94); text-shadow: 0 1px 16px rgba(0,0,0,.6); font-size: 1.125rem; max-width: 560px; margin: 0 0 28px; line-height: 1.6; } .hero-stats { display: flex; gap: 36px; margin-bottom: 28px; flex-wrap: wrap; } .hero-stat-num { font-family: var(--font-title); font-size: 2.5rem; font-weight: 700; color: var(--gold); text-shadow: 0 2px 16px rgba(0,0,0,.6); line-height: 1; } .hero-stat-label { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,236,196,.82); margin-top: 6px; } .hero .btn-outline { color: #fbf4d4; border-color: rgba(251,244,212,.5); } .hero .btn-outline:hover { color: var(--gold); border-color: var(--gold); background: rgba(251,244,212,.07); } @media(max-width:768px){ .hero-content { padding: 60px 24px 40px; } .hero-title { font-size: clamp(36px,10vw,60px); line-height: 1.05; } .hero-desc { font-size: 1rem; } .hero-stats { gap: 20px; } .hero-stat-num { font-size: 2rem; } } /* ---------- ROUTE INCLUDES ---------- */ .route-includes { padding: 46px 60px; background: var(--bg-alt); border-bottom: 1px solid var(--line); } .section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .ri-title { font-size: clamp(26px,3vw,40px); font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 6px; } .ri-title em { color: var(--red); font-style: normal; } .ri-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 26px; max-width: 1280px; margin-left: auto; margin-right: auto; } .ri-card { background: var(--bg-card); border: 1px solid var(--card-border); padding: 22px 20px; box-shadow: var(--shadow); } .ri-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: block; margin-bottom: 14px; } .ri-card h4 { font-size: 1.125rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .ri-card p { font-size: 0.8125rem; color: var(--ink-muted); line-height: 1.5; margin: 0; } @media(max-width:900px){ .route-includes { padding-left: 24px; padding-right: 24px; } .ri-grid { grid-template-columns: 1fr 1fr; } } @media(max-width:560px){ .ri-grid { grid-template-columns: 1fr; } } /* ---------- ABOUT NARRATIVE ---------- */ .about { padding: 64px 60px; position: relative; } .about-narrative { max-width: 820px; margin: 0 auto; } .section-title { font-size: clamp(28px,3.4vw,42px); font-weight: 700; color: var(--ink); margin-bottom: 24px; } .section-title em { color: var(--red); font-style: normal; } .about-text p { font-size: 1.3125rem; color: var(--ink-muted); line-height: 1.72; margin: 0; text-wrap: pretty; } .about-text p + p { margin-top: 20px; } .about-text p:first-of-type::first-letter { font-family: var(--font-title); font-size: 4rem; font-weight: 700; color: var(--red); float: left; line-height: .8; padding: 6px 12px 0 0; } .about-text .about-more { margin-top: 28px; } .about-more a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .about-more a:hover { color: var(--accent-d); } @media(max-width:900px){ .about { padding: 48px 24px; } .about-text p { font-size: 1.125rem; } } /* ---------- MAP PINS (v2, numbered circles) ---------- */ .map-pin-wrap { background: none; border: none; } .map-pin { width: 28px; height: 28px; border-radius: 50%; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 0.8125rem; line-height: 1; } /* ---------- audio guide (inc/audio.php) ---------- */ /* Sticky bar: above the cookie notice (950) so it stays reachable, below the POI modal (1000) and the photo lightbox (1200). */ .ks-audio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; background: var(--ink); color: #F3EEDC; box-shadow: 0 -6px 24px rgba(0,0,0,.28); padding-bottom: env(safe-area-inset-bottom); } .ks-audio[hidden] { display: none; } .ks-audio__inner { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; padding: 10px 16px; } .ks-audio__play { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; } .ks-audio__play:hover { background: var(--accent-d); } .ks-audio__body { flex: 1 1 auto; min-width: 0; } .ks-audio__title { font-family: var(--font-title); font-weight: 700; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-audio__bar { display: flex; align-items: center; gap: 10px; margin-top: 3px; } .ks-audio__seek { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); height: 4px; cursor: pointer; } .ks-audio__time { flex: none; font-size: 0.6875rem; letter-spacing: .04em; color: rgba(243,238,220,.65); font-variant-numeric: tabular-nums; } .ks-audio__controls { flex: none; display: flex; align-items: center; gap: 4px; } .ks-audio__ctrl { position: relative; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px; color: #F3EEDC; font-size: 0.75rem; font-weight: 700; } .ks-audio__ctrl:hover { background: rgba(255,255,255,.12); } .ks-audio__ctrl span { position: absolute; bottom: 2px; right: 3px; font-size: 0.5rem; font-weight: 700; } .ks-audio__rate { font-variant-numeric: tabular-nums; } .ks-audio.has-error .ks-audio__title::after { content: ' ⚠'; } body.has-audio-bar { padding-bottom: 74px; } @media(max-width:600px){ .ks-audio__inner { gap: 9px; padding: 8px 10px; } .ks-audio__ctrl:not(.ks-audio__close) { min-width: 30px; height: 30px; padding: 0 5px; } .ks-audio__title { font-size: 0.875rem; } } /* Waypoint page button */ .loc-audio { max-width: 820px; margin: 0 auto; padding: 26px 40px 0; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; } /* One track: its button with size + download beside it. A waypoint can carry two (narration and legend); template-parts/audio-button.php. */ .ks-audio-unit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ks-history__audio { margin: 0 0 28px; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; } .loc-audio__meta { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--ink-faint); } .loc-audio__flag { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; } .loc-audio__meta a { color: var(--accent); } @media(max-width:900px){ .loc-audio { padding: 22px 24px 0; } } /* Header button */ .audio-nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg-card); color: var(--ink); font-size: 0.75rem; font-weight: 700; text-decoration: none; } .audio-nav-btn:hover { border-color: var(--accent); color: var(--accent); } .audio-nav-btn.is-playing { background: var(--accent); border-color: var(--accent); color: #fff; } .audio-nav-btn__flag { font-size: 0.5625rem; letter-spacing: .06em; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 5px; padding: 1px 4px; color: var(--ink-faint); } .audio-nav-btn.is-playing .audio-nav-btn__flag { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; } /* The audio guide page */ .ks-audio-page__intro { color: var(--ink-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 18px; } .ks-audio-page__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 6px; } .ks-audio-page__size { font-size: 0.8125rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .ks-audio-page__hint { font-size: 0.8125rem; color: var(--ink-muted); margin: 0 0 20px; max-width: 560px; } .ks-audio-page__empty { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--ink-muted); font-size: 0.9375rem; } .ks-audio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ks-audio-list__item { display: flex; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; } .ks-audio-list__play { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--line); color: var(--accent); display: flex; align-items: center; justify-content: center; } .ks-audio-list__play:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .ks-audio-list__play.is-playing { background: var(--accent); border-color: var(--accent); color: #fff; } .ks-audio-list__body { flex: 1 1 auto; min-width: 0; } .ks-audio-list__title { font-family: var(--font-title); font-weight: 700; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; } .ks-audio-list__num { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; color: var(--accent); } .ks-audio-list__sub { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 0.75rem; color: var(--ink-faint); flex-wrap: wrap; } .ks-audio-list__sub a { color: var(--accent); } .ks-audio-list__flag { background: var(--bg-alt); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; } /* A legend hangs under its point: indented, and labelled rather than numbered. */ .ks-audio-list__item--legend { margin-left: 28px; background: var(--bg-alt); } .ks-audio-list__tag { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; font-weight: 400; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; } @media(max-width:560px){ .ks-audio-list__item--legend { margin-left: 16px; } } .ks-audio-list__dl { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: var(--ink-faint); } .ks-audio-list__dl:hover { background: var(--bg-alt); color: var(--accent); } .ks-audio-page__back { margin-top: 26px; font-size: 0.875rem; } .ks-audio-page__back a { color: var(--accent); text-decoration: none; } /* ---------- service points (inc/services.php) ---------- Deliberately quieter than the numbered route pins: smaller, white-filled, the category colour carried by the outline and the glyph rather than a solid fill, so the route still reads first when both are shown. */ .map-svc-wrap { background: none; border: none; } .map-svc { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--svc-color, #7A8B99); color: var(--svc-color, #7A8B99); box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform .12s; } .map-svc-wrap:hover .map-svc { transform: scale(1.15); } .map-svc-popup .leaflet-popup-content-wrapper { border-radius: 14px; padding: 0; overflow: hidden; } .map-svc-popup .leaflet-popup-content { margin: 0; width: auto !important; } .map-svc-pop { padding: 0 0 12px; font-family: inherit; } .map-svc-pop__img { height: 96px; background-size: cover; background-position: center; } .map-svc-pop__cat { display: flex; align-items: center; gap: 6px; padding: 11px 14px 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--svc-color, #7A8B99); } .map-svc-pop__cat .ks-dot { background: var(--svc-color, #7A8B99); width: 7px; height: 7px; } .map-svc-pop__title { padding: 3px 14px 0; font-family: var(--font-title); font-weight: 700; font-size: 1rem; color: var(--ink); } .map-svc-pop__note { margin: 6px 0 0; padding: 0 14px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-muted); } .map-svc-pop__row { display: flex; gap: 6px; padding: 5px 14px 0; font-size: 0.8125rem; color: var(--ink-muted); } .map-svc-pop__row span { color: var(--ink-faint); } .map-svc-pop__coords { padding: 8px 14px 0; font-size: 0.6875rem; letter-spacing: .04em; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .map-svc-pop__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; } .map-svc-pop__actions a { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; } .map-svc-pop__actions a:hover { background: var(--bg-alt); } .leaflet-container { background: var(--bg-alt); } /* ---------- SINGLE WAYPOINT ("loc") LAYOUT ---------- */ #loc-page { padding-top: 68px; } .loc-hero { position: relative; min-height: 46vh; display: flex; align-items: flex-end; } .loc-hero-img { position: absolute; inset: 0; background: var(--stripe); } .loc-hero-img.no-img { background: linear-gradient(135deg,#2a3015 0%,#4a5020 60%,#1a200a 100%); } .loc-hero-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,16,9,.15) 30%, rgba(20,16,9,.7) 100%); } .loc-back-link { position: absolute; top: 20px; left: 24px; z-index: 2; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 700; font-size: 0.8125rem; padding: 9px 14px; border-radius: 3px; text-decoration: none; } .loc-hero-content { position: relative; z-index: 1; padding: 32px 60px 40px; color: #fbf4d4; } .loc-num { font-size: clamp(56px,8vw,110px); font-weight: 700; color: rgba(255,255,255,.16); line-height: 1; font-family: var(--font-title); } .loc-title { font-size: clamp(30px,4vw,52px); font-weight: 700; color: #fbf4d4; line-height: 1.1; max-width: 760px; text-shadow: 0 3px 20px rgba(0,0,0,.5); } .loc-meta { font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-top: 10px; } .loc-pano { min-height: 300px; height: 400px; position: relative; overflow: hidden; background: #1a1e0d; } .loc-pano-bg { position: absolute; inset: 0; background: linear-gradient(135deg,#1a1e0d 0%,#2d3318 60%,#0f1208 100%); } [data-theme="light"] .loc-pano-bg { background: linear-gradient(135deg,#2a3015 0%,#4a5020 60%,#1a200a 100%); } .pano-viewer { position: absolute; inset: 0; z-index: 2; } .pnlm-container { background: #1a1e0d !important; } .pano-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .pano-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 40px; } .pano-ring { width: 72px; height: 72px; border: 1.5px solid rgba(251,244,212,.22); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(251,244,212,.5); } .pano-label { font-family: var(--font-title); font-size: 1.375rem; color: rgba(251,244,212,.55); } .pano-sub { font-size: 0.625rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,244,212,.25); } .pano-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; font-size: 0.6875rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.62)); padding: 22px 16px 9px; text-align: center; pointer-events: none; } /* Pano2VR virtual tour — taller than the flat Pannellum panorama because the export carries its own skin (thumbnail rail, compass, controls). */ .loc-pano--tour { height: 620px; min-height: 420px; } .pano-viewer--tour { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; display: block; } .pano-launch { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; transition: background .25s ease; } /* Must out-specify .pano-launch's display:flex, or the UA stylesheet's [hidden]{display:none} loses and the launch overlay keeps covering — and blocking clicks on — the player it just started. */ .pano-launch[hidden] { display: none; } .pano-launch:hover, .pano-launch:focus-visible { background: rgba(251,244,212,.05); } .pano-launch:hover .pano-ring { border-color: rgba(251,244,212,.5); color: rgba(251,244,212,.85); transform: scale(1.06); } .pano-launch .pano-ring { transition: border-color .25s ease, color .25s ease, transform .25s ease; } .pano-launch:hover .pano-label { color: rgba(251,244,212,.85); } .pano-launch .pano-label { transition: color .25s ease; } /* The node's own view, shown until the player takes over. It is a 440x230 skin thumbnail blown up to panel size, so lean into it: scale past the edges, soften, and lay a scrim over it to keep the label legible. */ .pano-poster { position: absolute; inset: 0; z-index: 1; background: center/cover no-repeat; transform: scale(1.06); filter: blur(2px) saturate(.92); transition: opacity .5s ease; } .pano-poster::after { content: ""; position: absolute; inset: 0; background: rgba(26,30,13,.52); } .loc-pano--tour.is-loaded .pano-poster { opacity: 0; } /* Above the iframe (z-index 2) so it stays readable while the player boots — but translucent, so the poster keeps showing through rather than a flat box. */ .pano-loading { position: absolute; inset: 0; z-index: 4; display: none; align-items: center; justify-content: center; font-size: 0.625rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,244,212,.75); background: rgba(26,30,13,.45); pointer-events: none; } .loc-pano--tour.is-loading .pano-loading { display: flex; } .loc-pano-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 14px 20px 0; } .pano-views { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .pano-view { font: inherit; font-size: 0.6875rem; letter-spacing: .04em; color: var(--ink-muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease; } .pano-view:hover { color: var(--ink); border-color: var(--ink-muted); } .pano-view.is-active { color: var(--bg); background: var(--ink); border-color: var(--ink); } @media(max-width:768px){ .loc-pano--tour { height: 78vh; min-height: 380px; } } /* How to get to Ostroh — see template-parts/how-to-get.php. Icons are inline SVG using currentColor, so they inherit the link colour and follow dark mode without a second rule. */ .ks-howto { max-width: 960px; margin: 0 auto; padding: 60px 40px 48px; scroll-margin-top: 80px; } .ks-howto__intro { color: var(--ink-muted); margin: 0 0 32px; max-width: 640px; } .ks-howto__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 20px; margin-bottom: 40px; } .ks-howto__card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px; } .ks-howto__city { display: flex; align-items: center; gap: 9px; font-family: var(--font-title); font-size: 1.125rem; font-weight: 700; margin-bottom: 12px; color: var(--ink); } .ks-howto__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .ks-howto__links a, .ks-howto__plain { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--accent); text-decoration: none; transition: color .2s, opacity .2s; } .ks-howto__links a:hover { color: var(--ink); opacity: 1; } .ks-howto__plain { color: var(--ink-muted); } .ks-howto__icon { flex: none; } .ks-howto__city .ks-howto__icon { color: var(--ink-faint); } .ks-howto__start { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 10px; } .ks-howto__start h3 { display: flex; align-items: flex-start; gap: 9px; font-family: var(--font-title); font-size: 1.25rem; margin: 0 0 4px; color: var(--ink); } .ks-howto__start h3 .ks-howto__icon { margin-top: 3px; color: var(--red); } .ks-howto__start p { color: var(--ink-muted); font-size: 0.875rem; margin: 0; } .ks-howto__maplink { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; color: var(--red); font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; } @media(max-width:768px){ .ks-howto { padding: 40px 20px 32px; } .ks-howto__grid { gap: 14px; margin-bottom: 28px; } } /* Credits / partners band — see template-parts/credits.php */ .ks-credits { padding: 48px 40px 56px; text-align: center; background: var(--bg-alt); border-top: 1px solid var(--line); } .ks-credits__title { font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 28px; } .ks-credits__logos { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 36px 48px; margin-bottom: 28px; } .ks-credits__partner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 140px; } .ks-credits__logo { max-height: 62px; max-width: 130px; width: auto; height: auto; display: block; object-fit: contain; } .ks-credits__name { font-size: 0.6875rem; color: var(--ink-muted); text-align: center; line-height: 1.4; } .ks-credits__tags { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 0.8125rem; margin: 0; letter-spacing: .02em; } .ks-credits__tag { color: var(--accent); font-weight: 600; } @media(max-width:768px){ .ks-credits { padding: 34px 20px 40px; } .ks-credits__logos { gap: 26px 30px; } } .loc-history { max-width: 820px; margin: 0 auto; padding: 52px 40px; } .loc-history-ey { font-size: 0.625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; } .loc-history h3 { font-size: 1.625rem; font-weight: 700; color: var(--red); margin-bottom: 22px; } .loc-history-body p { font-size: 1.125rem; line-height: 1.72; color: var(--ink-muted); margin: 0; } .loc-history-body p + p { margin-top: 16px; } @media(max-width:900px){ .loc-history { padding: 36px 24px; } .loc-history-body p { font-size: 1rem; } } .loc-photos-section { background: var(--bg-alt); padding: 48px 60px; border-top: 1px solid var(--line); } .loc-photos-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; } .loc-photo-card { aspect-ratio: 4/3; overflow: hidden; position: relative; background: var(--bg-card); } .loc-photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .loc-photo-card:hover img { transform: scale(1.04); } .loc-photo-card .era-tag { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 0.5625rem; letter-spacing: .08em; text-transform: uppercase; background: var(--red); color: #fff; padding: 3px 8px; } .loc-photo-card.ph { border: 1px dashed var(--line); background: linear-gradient(135deg,var(--bg-alt),var(--bg-card)); } .loc-photo-card .ph-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 14px; font-family: var(--font-title); color: var(--ink-faint); font-size: 0.875rem; } @media(max-width:768px){ .loc-photos-section { padding: 32px 20px; } .loc-photos-grid { grid-template-columns: repeat(2,1fr); } } @media(max-width:480px){ .loc-photos-grid { grid-template-columns: 1fr; } } /* Gallery cards with an image are