/* * The Ski Lodge — theme styles on top of the Webflow design (tsl.css). * Includes the custom code that lived in Webflow's embeds plus the * WordPress-specific pieces (accessibility, admin bar, CMS fallbacks). */ /* -------------------------------------------------------------------------- * Base / fallbacks * ----------------------------------------------------------------------- */ /* Stage Grotesk Regular / Medium draw the middle dot "·" on the baseline (same * glyph as the full stop). This face only takes U+00B7 from the Light cut, * which has a centred dot; every other character keeps its own weight. */ @font-face { font-family: Stagegrotesk; src: url('../fonts/StageGrotesk-Light.otf') format('opentype'); font-weight: 400; font-display: swap; unicode-range: U+00B7; } @font-face { font-family: Stagegrotesk; src: url('../fonts/StageGrotesk-Light.otf') format('opentype'); font-weight: 500; font-display: swap; unicode-range: U+00B7; } /* Without JS the rem scale still follows the Webflow breakpoints. */ html { font-size: 16px; } @media (max-width: 1920px) { html { font-size: calc(100vw / 120); } } @media (max-width: 991px) { html { font-size: calc(100vw * 16 / 991); } } @media (max-width: 766px) { html { font-size: calc(100vw * 16 / 767); } } @media (max-width: 478px) { html { font-size: calc(100vw * 16 / 479); } } body { background-color: #f5f3ec; } .tsl-main { display: block; } .tsl-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .tsl-skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; padding: .75rem 1.25rem; background: #2d1916; color: #f5f3ec; font-family: Stagegrotesk, Arial, sans-serif; font-size: 1rem; text-decoration: none; border-radius: .31rem; } .tsl-skip-link:focus { top: 1rem; } /* Zero specificity: the design classes on the same element always win. */ :where(.tsl-btn-reset) { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: normal; cursor: pointer; text-align: inherit; } :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; } /* Headings introduced for SEO keep the design spacing (class rules still win). */ h1:where(.tsl-hero-heading, .tsl-intro-heading), h2:where(.rooms-lockup, .footer-news-title) { margin-top: 0; margin-bottom: 0; font-weight: inherit; } h2:where(.rooms-lockup) { font-size: inherit; line-height: inherit; } /* SVG lockups / logos carry width & height attributes (no layout shift) but * the design sizes them with one CSS dimension: keep their aspect ratio. */ :where(img[src$=".svg"]) { width: auto; height: auto; } p:where(.intro-tagline) { margin-bottom: 0; } .tsl-hero-heading { position: relative; z-index: 1; line-height: 0; font-size: inherit; } .tsl-hero-text { display: inline-block; line-height: 1.1; color: #f5f3ec; text-transform: uppercase; text-align: center; font-family: Revoirnuvo, Tahoma, sans-serif; font-size: 3.4rem; font-weight: 400; } .tone-default .tsl-hero-text, .tone-negro .tsl-hero-text { color: #2d1916; } .tsl-intro-heading { line-height: 0; } .tsl-lockup-text { position: relative; z-index: 1; font-family: Revoirnuvo, Tahoma, sans-serif; font-size: 2.6rem; font-weight: 400; line-height: 1.1; text-transform: uppercase; color: #2d161b; } .tsl-lockup-text.cream { color: #f5f3ec; } /* -------------------------------------------------------------------------- * Fixed header (from the Webflow site code) * ----------------------------------------------------------------------- */ .site-nav.is-scrolled { background-color: #f5f3ec; padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 1px 0 rgba(69, 30, 29, .12); } .site-nav.is-scrolled .logo-cont { margin-top: 1.35rem; } .site-nav.is-scrolled .site-nav-book { color: #451e1d; border-color: #451e1d; } .site-nav.is-scrolled .site-nav-book:hover { background-color: #451e1d; color: #f5f3ec; } .site-nav.is-scrolled .intro-nav-lang-text-small, .site-nav.is-scrolled .lng-inside-small, .site-nav.is-scrolled .site-nav-link, .site-nav.is-scrolled .site-nav-divider { color: #2d1916; } .site-nav.is-scrolled .site-nav-logo-img, .site-nav.is-scrolled .intro-nav-menu-icon-small, .site-nav.is-scrolled .flecha-nav { filter: none; } .site-nav.is-scrolled .flecha-nav { border-color: #2d1916; } .site-nav.is-scrolled .menu-lng { background-color: #f5f3ec; padding: .62rem .9rem .7rem; margin-left: -.9rem; } .intro-nav-lang { cursor: pointer; } @media (max-width: 479px) { .site-nav.is-scrolled { padding-top: .9rem; padding-bottom: .9rem; } .site-nav.is-scrolled .logo-cont { margin-top: 1.64rem; } } html.menu-open { overflow: hidden; } /* The logo sits in an absolutely positioned full-width row: let clicks pass * through the empty sides to Book Now / language / menu. */ .logo-cont { pointer-events: none; } .logo-cont a { pointer-events: auto; } /* Winter | Summer switch (optional, Site settings › Season). */ .site-nav-seasons.is-visible { display: flex; align-items: center; margin-right: 2.2rem; } @media (max-width: 767px) { .site-nav-seasons.is-visible { display: none; } } /* Language toggle is a