/* ========================================================================== IGLU Alpine Lodge — Minimal Scandinavian / Quiet Confidence Palette #F4F6F8 ice · #0E1B2A night-mountain · #2E6F95 glacier · #C25A2E ember (accent) · #A8481F ember-deep (CTA) · #9CB2C2 mist Fonts Clash Display (display) · Satoshi (body) — Inter forbidden. ========================================================================== */ /* --- vendored fonts --- */ @font-face{font-family:"Clash Display";src:url("../fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Clash Display";src:url("../fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Clash Display";src:url("../fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* --- tokens --- */ :root{ --ice:#F4F6F8; --ink:#0E1B2A; --glacier:#2E6F95; --ember:#C25A2E; --ember-deep:#A8481F; --mist:#9CB2C2; --paper:#FBFCFD; --line:rgba(156,178,194,.45); --line-soft:rgba(156,178,194,.25); --ink-70:rgba(14,27,42,.72); --ink-55:rgba(14,27,42,.66); --shadow:0 24px 60px -32px rgba(14,27,42,.35); --font-display:"Clash Display",Georgia,"Times New Roman",serif; --font-body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif; --wrap:1200px; --gutter:clamp(20px,5vw,64px); --rail-w:56px; /* altitude-zone driven tint (updated by JS), subtle high-key wash */ --zone-wash:#F4F6F8; --zone-line:rgba(156,178,194,.45); --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;font-family:var(--font-body);color:var(--ink); background:var(--zone-wash);transition:background .9s var(--ease); font-size:clamp(16px,1.05vw,18px);line-height:1.65;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.04; letter-spacing:-.015em;margin:0;color:var(--ink)} p{margin:0} a{color:inherit;text-decoration:none} img,svg,video{max-width:100%;display:block} :focus-visible{outline:2.5px solid var(--glacier);outline-offset:3px;border-radius:2px} ::selection{background:rgba(46,111,149,.18)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .eyebrow{font-family:var(--font-body);font-weight:600;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--glacier); display:inline-flex;align-items:center;gap:.6em} .eyebrow::before{content:"";width:26px;height:1px;background:var(--glacier);opacity:.6} .skip-link{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--ice); padding:10px 16px;border-radius:6px;z-index:1000;transition:top .2s} .skip-link:focus{top:12px} /* --- reveal (only hidden once JS opts in via .is-animated on ; with JS off or IntersectionObserver missing, all content stays visible) --- */ .is-animated .reveal{opacity:0;transform:translateY(24px); transition:opacity .85s var(--ease),transform .85s var(--ease)} .is-animated .reveal.is-in{opacity:1;transform:none} /* ==== header ==== */ .site-head{position:fixed;inset:0 0 auto 0;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:18px var(--gutter); background:linear-gradient(to bottom,rgba(244,246,248,.9),rgba(244,246,248,0)); backdrop-filter:saturate(1.1) blur(2px);transition:background .4s,box-shadow .4s,padding .4s} .site-head.is-stuck{background:rgba(251,252,253,.86); box-shadow:0 1px 0 var(--line-soft);padding-top:12px;padding-bottom:12px} .brand{display:flex;align-items:baseline;gap:.55rem;font-family:var(--font-display); font-weight:700;font-size:1.12rem;letter-spacing:.02em;padding:8px 0;min-height:44px} .brand .peak{display:inline-block;width:14px;height:14px;margin-right:.15rem; background:conic-gradient(from 200deg,var(--glacier),var(--mist),var(--ice)); clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateY(1px)} .brand small{font-family:var(--font-body);font-weight:500;font-size:.62rem; letter-spacing:.28em;text-transform:uppercase;color:var(--ink-55)} .nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)} .nav a.navlink{font-size:.9rem;font-weight:500;color:var(--ink-70);position:relative;padding:4px 0} .nav a.navlink::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px; background:var(--ember);transition:width .35s var(--ease)} .nav a.navlink:hover{color:var(--ink)} .nav a.navlink:hover::after{width:100%} .lang{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden} .lang button{font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.04em; padding:9px 15px;background:none;border:0;color:var(--ink-55);cursor:pointer;min-height:40px} .lang button[aria-pressed="true"]{background:var(--ink);color:var(--ice)} .btn{font:inherit;font-weight:600;font-size:1rem;cursor:pointer;border:0; display:inline-flex;align-items:center;justify-content:center;gap:.5em; padding:14px 26px;border-radius:100px;min-height:48px; transition:transform .25s var(--ease),box-shadow .25s,background .25s} .btn-primary{background:var(--ember-deep);color:#fff;box-shadow:0 12px 30px -14px rgba(168,72,31,.75)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(168,72,31,.8)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--glacier);color:var(--glacier)} .nav .btn{padding:10px 20px;min-height:42px;font-size:.9rem} @media (max-width:820px){.nav .navlink{display:none}} /* ==== altitude rail (signature) ==== */ .rail{position:fixed;top:0;right:0;height:100vh;width:var(--rail-w);z-index:40; display:flex;flex-direction:column;align-items:center;justify-content:center; pointer-events:none;border-left:1px solid var(--line-soft)} .rail__track{position:relative;flex:1;width:2px;margin:120px 0 96px; background:linear-gradient(to bottom,var(--line),var(--line-soft))} /* snow line rides up the track as you climb */ .rail__snow{position:absolute;left:-7px;right:-7px;bottom:0;height:0%; background:linear-gradient(to top,rgba(244,246,248,.0),rgba(255,255,255,.9)); border-top:1.5px solid var(--mist);transition:height .15s linear} .rail__peak,.rail__valley{position:absolute;left:50%;transform:translateX(-50%); font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--ink-55);white-space:nowrap} .rail__peak{top:-16px}.rail__valley{bottom:-16px} .rail__marker{position:absolute;left:50%;transform:translate(-50%,50%);bottom:0; width:10px;height:10px;border-radius:50%;background:var(--glacier); box-shadow:0 0 0 4px rgba(46,111,149,.16);transition:bottom .15s linear,background .6s} .rail__read{position:fixed;right:calc(var(--rail-w) + 14px);top:50%; transform:translateY(-50%);text-align:right;z-index:41;pointer-events:none} .rail__alt{font-family:var(--font-display);font-weight:700; font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1; font-variant-numeric:tabular-nums;color:var(--ink)} .rail__alt sup{font-size:.5em;font-weight:600;color:var(--ink-55);margin-left:.15em} .rail__zone{font-size:.66rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--glacier);margin-top:.35rem;transition:color .6s} @media (max-width:900px){ .rail{width:34px}.rail__read{display:none} .rail__peak,.rail__valley{font-size:.5rem} } @media (max-width:560px){.rail{display:none}} /* ==== hero ==== */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end; padding-bottom:clamp(48px,9vh,110px);overflow:hidden;isolation:isolate} .hero__media{position:absolute;inset:0;z-index:-2} .hero__media video,.hero__poster{width:100%;height:100%;object-fit:cover} .hero__media::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(244,246,248,.96) 2%,rgba(244,246,248,.5) 34%,rgba(14,27,42,.14) 100%)} .snow-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none} .hero__inner{max-width:820px} .hero__eyebrow{margin-bottom:1.4rem} .hero h1{font-size:clamp(2.6rem,7vw,5.6rem);font-weight:600;letter-spacing:-.03em} .hero h1 em{font-style:normal;color:var(--glacier)} .hero__lede{margin-top:1.4rem;max-width:44ch;font-size:clamp(1.05rem,1.5vw,1.28rem); color:var(--ink-70);line-height:1.55} .hero__cta{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center} /* social proof — data is [PLACEHOLDER], see HTML comment + rapor inventory */ .proof{display:flex;align-items:center;gap:.7rem;margin-top:2rem;flex-wrap:wrap} .proof__stars{color:var(--ember);letter-spacing:.12em;font-size:1rem} .proof__txt{font-size:.86rem;color:var(--ink-55)} .proof__txt b{color:var(--ink);font-weight:600} .proof__mark{font-size:.6rem;letter-spacing:.14em;color:var(--ink-55); border:1px solid var(--line);border-radius:4px;padding:2px 6px} /* ==== generic section ==== */ section{position:relative} .band{padding:clamp(72px,11vh,132px) 0} .band__head{max-width:56ch;margin-bottom:clamp(36px,6vh,64px)} .band__head h2{font-size:clamp(1.9rem,4.2vw,3.1rem);margin-top:1rem} .band__head p{margin-top:1.1rem;color:var(--ink-70);font-size:1.08rem} /* experience zones */ .zones{display:grid;gap:clamp(18px,2.4vw,28px);grid-template-columns:repeat(3,1fr)} .zone{position:relative;padding:30px 28px 34px;border:1px solid var(--line); border-radius:18px;background:var(--paper);overflow:hidden;transition:transform .5s var(--ease),border-color .5s} .zone:hover{transform:translateY(-4px);border-color:var(--glacier)} .zone__ix{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--ink-55)} .zone__band{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase; color:var(--glacier);margin:.4rem 0 1.2rem} .zone h3{font-size:1.5rem;margin-bottom:.7rem} .zone p{color:var(--ink-70);font-size:.98rem} .zone__art{position:absolute;inset:auto -20% -30% auto;width:180px;height:180px; border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(46,111,149,.16),transparent 70%);opacity:.9} @media (max-width:820px){.zones{grid-template-columns:1fr}} /* rooms */ .rooms{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(3,1fr)} .room{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper); transition:transform .5s var(--ease),box-shadow .5s} .room:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .room__img{aspect-ratio:3/4;position:relative;overflow:hidden} .room__img svg{position:absolute;inset:0;width:100%;height:100%} .room__body{padding:20px 22px 24px} .room__body h3{font-size:1.3rem} .room__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:.7rem; color:var(--ink-55);font-size:.86rem} .room__price{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.05rem} .room__price .cur{color:var(--ink-55);font-size:.7em;font-weight:500} @media (max-width:820px){.rooms{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* season & access split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start} .season-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .season-list li{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding:18px 0;border-bottom:1px solid var(--line)} .season-list dt{font-weight:600} .season-list b{font-family:var(--font-display);font-weight:600} .season-list span{color:var(--ink-55);font-size:.9rem;flex-basis:100%} .access{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--paper)} .access h3{font-size:1.35rem;margin-bottom:1rem} .access ol{margin:0;padding-left:1.1rem;color:var(--ink-70)} .access li{margin-bottom:.7rem} @media (max-width:820px){.split{grid-template-columns:1fr}} /* testimonials [PLACEHOLDER] */ .quotes{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:repeat(3,1fr)} .quote{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--paper)} .quote p{font-size:1.02rem;line-height:1.55} .quote footer{margin-top:1.2rem;display:flex;align-items:center;gap:.7rem; font-size:.85rem;color:var(--ink-55)} .quote .av{width:34px;height:34px;border-radius:50%;flex:none; background:conic-gradient(from 120deg,var(--mist),var(--glacier))} @media (max-width:820px){.quotes{grid-template-columns:1fr}} /* faq */ .faq{max-width:820px} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative; font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.28rem)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%); font-family:var(--font-body);font-weight:500;font-size:1.5rem;color:var(--glacier);transition:transform .3s} .faq details[open] summary::after{content:"–"} .faq .ans{padding:0 40px 24px 0;color:var(--ink-70);max-width:66ch} /* reservation */ .reserve{background:var(--ink);color:var(--ice);border-radius:24px;overflow:hidden; display:grid;grid-template-columns:1fr 1fr} .reserve__intro{padding:clamp(34px,5vw,60px)} .reserve__intro .eyebrow{color:var(--mist)} .reserve__intro .eyebrow::before{background:var(--mist)} .reserve__intro h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem);margin-top:1rem} .reserve__intro p{color:rgba(244,246,248,.72);margin-top:1rem;max-width:40ch} .trust{margin-top:2rem;display:flex;flex-direction:column;gap:.7rem} .trust li{display:flex;gap:.7rem;align-items:center;list-style:none;font-size:.92rem; color:rgba(244,246,248,.86)} .trust .tick{color:var(--ember);font-weight:700} .reserve__form{background:var(--paper);color:var(--ink);padding:clamp(30px,4vw,48px)} .field{margin-bottom:18px} .field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.02em;margin-bottom:7px} .field .req{color:var(--ember-deep)} .field input,.field select{width:100%;font:inherit;font-size:1rem;padding:13px 15px; border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);min-height:48px; transition:border-color .2s,box-shadow .2s} .field input:focus,.field select:focus{border-color:var(--glacier); box-shadow:0 0 0 3px rgba(46,111,149,.14);outline:none} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .reserve__form .btn{width:100%;margin-top:6px} .form-note{font-size:.78rem;color:var(--ink-55);margin-top:12px} .form-status{margin-top:14px;font-size:.9rem;font-weight:500;min-height:1.2em} .form-status.ok{color:var(--glacier)} .form-status.err{color:var(--ember-deep)} @media (max-width:820px){.reserve{grid-template-columns:1fr}} /* footer */ .site-foot{padding:60px 0 48px;border-top:1px solid var(--line);margin-top:clamp(60px,10vh,120px)} .foot-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start} .foot-brand{max-width:32ch} .foot-brand p{color:var(--ink-55);font-size:.9rem;margin-top:.8rem} .foot-cols{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap} .foot-cols h4{font-family:var(--font-body);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-55);margin-bottom:.9rem;font-weight:600} .foot-cols a{display:block;font-size:.92rem;color:var(--ink-70); padding:8px 0;list-style:none} .foot-cols li{display:block;font-size:.92rem;color:var(--ink-70); margin-bottom:.55rem;list-style:none} .foot-cols a:hover{color:var(--glacier)} .foot-base{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.8rem;color:var(--ink-55)} .foot-base a{color:var(--glacier)} /* sticky mobile CTA bar */ .mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:12px; background:rgba(251,252,253,.94);backdrop-filter:blur(6px); border-top:1px solid var(--line);align-items:center;justify-content:space-between} .mobile-bar .m-alt{font-size:.78rem;color:var(--ink-55);line-height:1.2} .mobile-bar .m-alt b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink)} .mobile-bar .btn{padding:12px 22px} @media (max-width:560px){.mobile-bar{display:flex} body{padding-bottom:76px} .reserve{border-radius:18px} } .mobile-bar.is-hidden{transform:translateY(120%);transition:transform .3s} /* rehber page */ .doc{max-width:760px;margin:0 auto;padding:calc(96px + 4vh) var(--gutter) 60px} .doc .eyebrow{margin-bottom:1rem} .doc h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.2rem} .doc h2{font-size:clamp(1.4rem,3vw,2rem);margin:2.6rem 0 1rem} .doc p{color:var(--ink-70);margin-bottom:1.1rem} .doc ul{color:var(--ink-70);padding-left:1.2rem;margin-bottom:1.2rem} .doc li{margin-bottom:.5rem} .doc .lead{font-size:1.2rem;color:var(--ink)} .doc a{color:var(--glacier);border-bottom:1px solid var(--line)} .doc .backhome{display:inline-flex;gap:.5rem;margin-top:2.5rem;padding:9px 0;font-weight:600;color:var(--glacier)} .spec{border:1px solid var(--line);border-radius:16px;padding:24px 26px;background:var(--paper);margin:1.4rem 0} .spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem} .spec dt{font-weight:600;color:var(--ink)} .spec dd{margin:0;color:var(--ink-70)} /* reduced motion: freeze all */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .rail__snow,.rail__marker{transition:none} }