:root{ --stone:#EDE6D6; --stone-deep:#E1D7C0; --charcoal:#2B2520; --rust:#B1552F; --rust-deep:#8C3F22; --saffron:#D7993C; --maroon:#6B2A2A; --prayer-blue:#3A6B82; --line:rgba(43,37,32,0.16); --paper:#F6F1E6; } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:hidden;} /* overflow-x:hidden lives on only, not too — declaring it on both used to make the browser treat as its own separate scroll container nested inside the viewport's, which silently breaks position:sticky for anything inside it (the trek page's sticky sub-nav and sticky sidebar included). One declaration is enough to stop horizontal overflow; it doesn't need to be on both. */ body{ background:var(--stone); color:var(--charcoal); font-family:'Work Sans', sans-serif; font-weight:400; line-height:1.6; } h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; } .mono{ font-family:'JetBrains Mono', monospace; letter-spacing:0.04em; text-transform:uppercase; font-size:0.72rem; } /* Generic utility — the "rust-colored eyebrow label" pattern repeats across nearly every page template as an inline style; centralizing it here. */ .mono-rust{ color:var(--rust-deep); } .text-rust{ color:var(--rust-deep); } .text-muted{ color:#7a7166; } .text-body{ color:#4a423a; } .text-error{ color:#e07a5f; } .is-hidden{ display:none; } a{color:inherit; text-decoration:none;} img,.ph{display:block; width:100%; height:100%; object-fit:cover;} /* placeholder photo blocks */ .ph{ position:relative; background:linear-gradient(160deg,var(--stone-deep),var(--rust) 130%); display:flex; align-items:flex-end; justify-content:flex-start; color:rgba(246,241,230,0.85); overflow:hidden; } .ph::before{ content:''; position:absolute; inset:0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 40%), repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px); } .ph span{ position:relative; z-index:1; font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; padding:10px 14px; opacity:0.8; } .ph.blue{background:linear-gradient(160deg,#5C7E8C,var(--prayer-blue) 130%);} .ph.maroon{background:linear-gradient(160deg,#9A5C50,var(--maroon) 130%);} .ph.saffron{background:linear-gradient(160deg,#E3B563,var(--saffron) 130%);} /* nav */ header.site-header{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:22px max(5vw, calc((100% - 1240px)/2)); background:rgba(20,17,14,0.55); transition:background 0.3s, padding 0.3s, opacity 0.3s; } /* Hidden specifically while the About page's own hero photo is on screen — that hero has its own floating nav (including a Home link, since this is the only nav on the page while it's hidden) built directly into it, see .about-hero-nav in page-about.php. Toggled by IntersectionObserver in js/main.js watching .about-hero; reappears the moment the hero scrolls out of view, so navigation is never actually unavailable, just swapped for the hero's own nav while looking at it. */ header.site-header.is-hero-hidden{ opacity:0; pointer-events:none; } header.site-header.scrolled{ background:rgb(20,17,14); padding:14px max(5vw, calc((100% - 1240px)/2)); border-bottom:1px solid rgba(255,255,255,0.08); } .brand{font-family:'Sora',sans-serif; font-size:1.4rem; font-weight:700; color:#fff; letter-spacing:0.02em;} .brand small{display:block; font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.65; font-weight:400; color:#fff; margin-top:2px;} .site-header-right{ display:flex; align-items:center; gap:34px; } nav ul{display:flex; gap:34px; list-style:none;} nav a{ font-size:0.88rem; font-weight:500; position:relative; padding-bottom:4px; color:#fff; } nav a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--saffron); transition:width 0.25s; } nav a:hover::after{width:100%;} .nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;} .nav-toggle span{width:24px; height:2px; background:#fff;} .site-search-toggle{ background:none; border:none; cursor:pointer; color:#fff; padding:6px; display:flex; align-items:center; } .site-search-toggle svg{ width:20px; height:20px; } .site-account-link{ background:none; border:none; cursor:pointer; color:#fff; padding:6px; display:flex; align-items:center; text-decoration:none; } .site-account-link svg{ width:20px; height:20px; } .site-search-panel{ position:fixed; top:0; left:0; right:0; z-index:60; background:rgb(20,17,14); max-height:0; overflow:hidden; transition:max-height 0.3s ease; } .site-search-panel.is-open{ max-height:140px; overflow:visible; } .site-search-panel-inner{ max-width:1240px; margin:0 auto; padding:28px max(5vw, calc((100% - 1240px)/2)); display:flex; align-items:center; gap:16px; } .site-search-form{ flex:1; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:10px; min-width:0; } .site-search-input-wrap{ position:relative; flex:1 1 auto; min-width:0; } .site-search-input{ width:100%; background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.3); color:#fff; font-family:'Fraunces',serif; font-size:1.4rem; padding:8px 0; } .site-search-input::placeholder{ color:rgba(255,255,255,0.4); } .site-search-input:focus{ outline:none; border-bottom-color:var(--saffron); } .site-search-submit{ background:none; border:none; cursor:pointer; color:#fff; flex:none; flex-shrink:0; display:flex; align-items:center; padding:6px; } .site-search-submit svg{ width:22px; height:22px; } .site-search-close{ background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.6); font-size:1.8rem; line-height:1; flex:none; flex-shrink:0; padding:0 6px; } .site-search-close:hover{ color:#fff; } /* Live search suggestions dropdown — floats below the input, works whether the input sits on the dark header panel or the light results page, since it's a self-contained white card either way. */ .site-search-suggestions{ position:absolute; top:100%; left:0; right:0; margin-top:10px; background:#fff; border-radius:6px; box-shadow:0 16px 40px rgba(0,0,0,0.25); overflow:hidden; z-index:70; max-height:70vh; overflow-y:auto; } .site-search-suggestion{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); transition:background 0.15s; } .site-search-suggestion:last-of-type{ border-bottom:none; } .site-search-suggestion:hover, .site-search-suggestion.is-active{ background:var(--stone); } .site-search-suggestion-thumb{ width:42px; height:42px; border-radius:4px; overflow:hidden; flex:none; background:var(--stone-deep); } .site-search-suggestion-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .site-search-suggestion-thumb-empty{ background:linear-gradient(160deg,var(--stone-deep),var(--rust) 130%); } .site-search-suggestion-body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .site-search-suggestion-type{ font-family:'JetBrains Mono',monospace; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--rust-deep); } .site-search-suggestion-title{ font-size:0.9rem; color:var(--charcoal); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .site-search-suggestion-title mark{ background:rgba(215,153,60,0.35); color:inherit; border-radius:2px; } .site-search-suggestions-empty{ padding:16px; font-size:0.85rem; color:#7a7166; margin:0; } .site-search-suggestions-dym{ display:block; padding:0 16px 16px; font-size:0.85rem; color:var(--charcoal); transition:background 0.15s; } .site-search-suggestions-dym strong{ color:var(--rust-deep); } .site-search-suggestions-dym:hover, .site-search-suggestions-dym.is-active{ background:var(--stone); } .site-search-suggestions-more{ display:block; text-align:center; padding:12px 16px; font-family:'JetBrains Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--rust-deep); border-top:1px solid var(--line); transition:background 0.15s; } .site-search-suggestions-more:hover, .site-search-suggestions-more.is-active{ background:var(--stone); } .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; position:absolute !important; word-wrap:normal !important; margin:-1px; padding:0; } /* HERO */ .hero{ min-height:100vh; display:flex; align-items:center; padding:0 max(5vw, calc((100% - 1240px)/2)); position:relative; background: linear-gradient(100deg, rgba(15,13,11,0.78) 0%, rgba(15,13,11,0.45) 42%, rgba(15,13,11,0.15) 65%), linear-gradient(0deg, rgba(15,13,11,0.55) 0%, rgba(15,13,11,0) 45%), var(--hero-image, url('hero-mountains.jpg')); background-size:cover; background-position:center 55%; color:#fff; } @media (max-width:880px){ .hero{ background-position:60% 70%; background-size:cover; background-repeat:no-repeat; } } .hero-grid{ max-width:680px; } .eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--saffron); } .eyebrow .rule{width:34px; height:1px; background:var(--saffron);} .hero h1{ font-family:'Sora',sans-serif; font-size:clamp(2.4rem, 5.4vw, 4.2rem); line-height:1.08; font-weight:800; color:#fff; letter-spacing:-0.01em; } .hero h1 em{ font-style:normal; font-weight:800; color:var(--saffron); } .hero p.lede{ margin-top:22px; max-width:520px; font-size:1.05rem; color:rgba(255,255,255,0.85); } .hero-actions{margin-top:34px; display:flex; gap:18px; flex-wrap:wrap; align-items:center;} .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:999px; font-size:0.85rem; font-weight:600; letter-spacing:0.02em; border:1px solid transparent; transition:all 0.25s; } .btn.solid{background:var(--saffron); color:#241c10;} .btn.solid:hover{background:#e8b25f;} .btn.ghost{border:1px solid rgba(255,255,255,0.55); color:#fff;} .btn.ghost:hover{background:rgba(255,255,255,0.12); border-color:#fff;} .btn:disabled{ cursor:default; opacity:0.92; } /* Submit-button loading spinner — three pulsing dots inserted by JS (inc/wp-captcha.php) in front of the button's label the instant a form is submitted, on every theme form (enquiry, review, feedback, contact, wedding contact, newsletter). Uses currentColor so it reads correctly against any button style, not just .btn.solid. */ .btn-spinner-dots{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; margin-right:8px; } .btn-spinner-dots span{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:0.35; animation:rujanBtnDotPulse 1s ease-in-out infinite; } .btn-spinner-dots span:nth-child(2){ animation-delay:0.15s; } .btn-spinner-dots span:nth-child(3){ animation-delay:0.3s; } @keyframes rujanBtnDotPulse{ 0%,80%,100%{ opacity:0.3; transform:scale(0.85); } 40%{ opacity:1; transform:scale(1.05); } } /* Site-wide slow-page loader — full-page overlay, only shown by JS (js/main.js) once a navigation has been running past a short delay, so fast page loads never see it. Same mountain ridge-line motif used on the trek enquiry "thank you" screens. Markup lives in header.php, right after wp_body_open(), so it's present on every page. */ .rujan-page-loader{ position:fixed; inset:0; z-index:10000; background:rgba(246,241,230,0.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.25s ease; } .rujan-page-loader.is-visible{ opacity:1; visibility:visible; pointer-events:auto; } .rujan-page-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; } .rujan-page-loader-ridge{ width:200px; height:70px; } .rujan-page-loader-ridge polyline{ fill:none; stroke:var(--rust); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420; animation:rujanPageLoaderDraw 1.8s ease-in-out infinite; } .rujan-page-loader-label{ font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--rust-deep); opacity:0.8; } @keyframes rujanPageLoaderDraw{ 0%{ stroke-dashoffset:420; } 55%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:-420; } } /* elevation divider — signature element */ .elevation{ width:100%; height:70px; overflow:hidden; position:relative; } .elevation svg{width:100%; height:100%; display:block;} .elevation .label{ position:absolute; top:8px; left:5vw; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.5; } .elevation .label.right{left:auto; right:5vw;} /* pencil-sketch mountain divider — used between Guide Fees and Photography */ .sketch-divider{ width:100%; height:80px; overflow:hidden; position:relative; background:var(--stone); } .sketch-divider .label{ position:absolute; top:8px; left:5vw; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; opacity:0.5; z-index:1; } .sketch-divider .label.right{left:auto; right:5vw;} .sketch-divider svg{width:100%; height:100%; display:block;} .sketch-line{ stroke:var(--charcoal); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:0.55; } .sketch-line-soft{ stroke:var(--rust-deep); stroke-width:1; opacity:0.28; } section{padding:110px 5vw;} .section-head, .about-grid, .gallery, .trek-list, .tour-list, .service-grid, .testimonials, .contact-grid, .guide-fees-grid{ max-width:1240px; margin-left:auto; margin-right:auto; } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:56px; flex-wrap:wrap; } .section-head h2{font-size:clamp(2rem,3.6vw,2.8rem);} .section-head .mono{color:var(--rust-deep); margin-bottom:10px; display:block;} .section-head p{max-width:380px; color:#4a423a; font-size:0.95rem;} /* About */ .about{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);} .about-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:70px; align-items:stretch;} .about-photo{ height:100%; background:var(--paper); } .about-photo img{width:100%; height:100%; object-fit:cover; display:block;} /* About page hero — full-bleed dark photo, floating nav row, big editorial headline. Only used on the standalone /about page (page-about.php), so this never appears on the homepage's own separate hero. */ .about-hero{ position:relative; min-height:78vh; padding:150px 5vw 60px; display:flex; flex-direction:column; justify-content:space-between; background-image:linear-gradient(to bottom, rgba(13,19,24,0.35) 0%, rgba(13,19,24,0.35) 55%, rgba(13,19,24,0.92) 100%), var(--about-hero-image); background-size:cover; background-position:center; color:#fff; } .about-hero-nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .about-hero-coords{ color:rgba(255,255,255,0.65); font-size:0.68rem; } /* The clickable nav links only (not the coordinates beside them, which stay right where they've always been, in normal flow at the top of the hero) are pulled up to sit in the exact same row the real header.site-header's own