/* ========================================================================== Willow & Wood — Cabin Retreats A warm editorial design system: paper, timber, linen and forest. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --forest: #344B3A; --woodland: #24362A; --cream: #F7F2E8; --oat: #E8DDCB; --wood: #A77B55; --terracotta: #B66F52; --sage: #A7B39A; --charcoal: #3D3932; --muted: #777367; --white: #FFFFFF; --forest-90: #3E5845; --oat-deep: #DCCDB4; --sage-pale: #D6DBCB; --line: rgba(61, 57, 50, .16); --line-strong: rgba(61, 57, 50, .28); --line-light: rgba(247, 242, 232, .22); --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --fs-display: clamp(2.9rem, 2rem + 4.6vw, 6.4rem); --fs-h2: clamp(2.2rem, 1.6rem + 2.6vw, 3.9rem); --fs-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.22rem); --gutter: clamp(1rem, 4vw, 3rem); --section: clamp(4.5rem, 3rem + 7vw, 9rem); --radius: 4px; --radius-lg: 14px; --arch: 999px 999px 10px 10px; --blob: 58% 42% 46% 54% / 44% 52% 48% 56%; --shadow-soft: 0 1px 2px rgba(36, 54, 42, .05), 0 12px 30px -12px rgba(36, 54, 42, .22); --shadow-lift: 0 2px 4px rgba(36, 54, 42, .06), 0 30px 60px -24px rgba(36, 54, 42, .38); --ease: cubic-bezier(.22, .61, .36, 1); --ease-slow: cubic-bezier(.16, .84, .3, 1); --header-h: 84px; --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .22 0 0 0 0 .19 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --linen: repeating-linear-gradient(0deg, rgba(61,57,50,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(61,57,50,.02) 0 1px, transparent 1px 4px); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; font-family: var(--sans); font-size: 1rem; line-height: 1.7; color: var(--charcoal); background-color: var(--cream); background-image: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.is-locked { overflow: hidden; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover { color: var(--forest); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.05; margin: 0 0 .5em; letter-spacing: -.01em; color: var(--woodland); } p { margin: 0 0 1.2em; } em { font-style: italic; } :focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--sage); color: var(--woodland); } [hidden] { display: none !important; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ww-skip { position: fixed; left: 1rem; top: -4rem; z-index: 1000; padding: .8rem 1.2rem; background: var(--woodland); color: var(--cream); border-radius: var(--radius); text-decoration: none; transition: top .3s var(--ease); } .ww-skip:focus { top: 1rem; color: var(--cream); } .ww-hp { position: absolute; left: -9999px; } .ww-container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); position: relative; } .ww-section { padding: var(--section) 0; position: relative; } .ww-section--tight { padding: clamp(2.5rem, 4vw, 4rem) 0; } .ww-main:focus { outline: none; } .ww-center { text-align: center; } .ww-center .ww-label { justify-content: center; } .ww-bg-oat { background-color: var(--oat); background-image: var(--linen), var(--paper); } .ww-bg-sage { background-color: var(--sage-pale); background-image: var(--paper); } .ww-bg-forest { background-color: var(--woodland); background-image: var(--paper); color: var(--cream); } .ww-bg-forest h2, .ww-bg-forest h3 { color: var(--cream); } .ww-bg-forest .ww-label { color: var(--sage); } /* ---------- Typography ---------- */ .ww-display { font-size: var(--fs-display); line-height: .98; font-weight: 400; letter-spacing: -.02em; margin-bottom: .35em; } .ww-h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.02; } .ww-h3 { font-size: var(--fs-h3); font-weight: 500; } .ww-display em, .ww-h2 em, .ww-h3 em { font-weight: 400; color: var(--wood); } .ww-bg-forest .ww-h2 em, .ww-bg-forest .ww-h3 em { color: var(--sage); } .ww-lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--charcoal); max-width: 38em; } .ww-label { display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.1rem; font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--wood); } .ww-label__icon { width: 1.2em; height: 1.2em; } .ww-label--light { color: rgba(247, 242, 232, .92); } .ww-signature { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: var(--wood); margin-top: 1.5rem; } .ww-signature::before { content: ""; display: inline-block; width: 2.4rem; height: 1px; background: currentColor; vertical-align: middle; margin-right: .8rem; opacity: .6; } /* ---------- Icons & botanicals ---------- */ .ww-icon { width: 1.25em; height: 1.25em; flex: none; } .ww-botanical { position: absolute; pointer-events: none; color: var(--wood); opacity: .38; } .sway { transform-origin: 50% 100%; animation: ww-sway 9s ease-in-out infinite alternate; } @keyframes ww-sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } } /* ---------- Buttons & links ---------- */ .ww-btn { --btn-bg: var(--forest); --btn-fg: var(--cream); --btn-bd: var(--forest); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 3.25rem; padding: .85rem 1.6rem; font-family: var(--sans); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--btn-fg); background: var(--btn-bg); border: 1px solid var(--btn-bd); border-radius: 2px; text-decoration: none; overflow: hidden; isolation: isolate; transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } .ww-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--woodland); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); } .ww-btn:hover { color: var(--btn-fg); box-shadow: 0 10px 24px -14px rgba(36, 54, 42, .7); } .ww-btn:hover::before { transform: scaleY(1); } .ww-btn .ww-icon { transition: transform .5s var(--ease); } .ww-btn:hover .ww-icon:last-child { transform: translateX(4px); } .ww-btn--sm { min-height: 2.6rem; padding: .55rem 1.1rem; font-size: .74rem; } .ww-btn--block { width: 100%; } .ww-btn--ghost { --btn-bg: transparent; --btn-fg: var(--forest); --btn-bd: var(--line-strong); } .ww-btn--ghost::before { background: var(--forest); } .ww-btn--ghost:hover { color: var(--cream); border-color: var(--forest); } .ww-btn--cream { --btn-bg: var(--cream); --btn-fg: var(--woodland); --btn-bd: var(--cream); } .ww-btn--cream::before { background: var(--oat); } .ww-btn--cream:hover { color: var(--woodland); } .ww-btn--glass { --btn-bg: rgba(247, 242, 232, .12); --btn-fg: var(--cream); --btn-bd: rgba(247, 242, 232, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ww-btn--glass::before { background: rgba(247, 242, 232, .2); } .ww-btn--outline-light { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: var(--line-light); } .ww-btn--outline-light::before { background: rgba(247, 242, 232, .1); } .ww-btn__play { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: -.4rem 0 -.4rem -.8rem; border-radius: 50%; border: 1px solid rgba(247, 242, 232, .55); } .ww-btn__play .ww-icon { width: .9rem; height: .9rem; } .ww-btn:hover .ww-btn__play .ww-icon { transform: none; } .ww-link { display: inline-flex; align-items: center; gap: .55em; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); text-decoration: none; padding-bottom: .3em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease), color .3s; } .ww-link:hover { background-size: 35% 1px; color: var(--terracotta); } .ww-link .ww-icon { transition: transform .5s var(--ease); } .ww-link:hover .ww-icon { transform: translateX(5px); } .ww-link--small { font-size: .72rem; } .ww-link-btn { background: none; border: 0; padding: .4rem 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); text-decoration: underline; text-underline-offset: .3em; } .ww-icon-btn { display: inline-grid; place-items: center; position: relative; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; background: transparent; border: 1px solid transparent; color: inherit; transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); } .ww-icon-btn:hover { background: rgba(61, 57, 50, .07); border-color: var(--line); } .ww-icon-btn--light { color: var(--cream); } .ww-icon-btn--light:hover { background: rgba(247, 242, 232, .12); border-color: var(--line-light); } .ww-badge { position: absolute; top: .2rem; right: .15rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; display: grid; place-items: center; border-radius: 1rem; background: var(--terracotta); color: var(--white); font-size: .64rem; font-weight: 700; line-height: 1; animation: ww-pop .5s var(--ease); } @keyframes ww-pop { from { transform: scale(.4); opacity: 0; } } /* ---------- Reveal motion ---------- */ .js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow); transition-delay: calc(var(--i, 0) * 90ms); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal--d1 { transition-delay: .12s; } .js .reveal--d2 { transition-delay: .24s; } .js .reveal--d3 { transition-delay: .36s; } .js .reveal--d4 { transition-delay: .6s; } .js .reveal--clip { opacity: 1; transform: none; clip-path: inset(18% 8% 18% 8% round 40px); transition: clip-path 1.6s var(--ease-slow); } .js .reveal--clip img { transform: scale(1.14); transition: transform 2.2s var(--ease-slow); } .js .reveal--clip.is-visible { clip-path: inset(0 0 0 0 round 0); } .js .reveal--clip.is-visible img { transform: scale(1); } .js .ww-mask-arch.reveal--clip.is-visible { clip-path: inset(0 0 0 0 round 0); } /* Organic masks */ .ww-mask-arch { border-radius: var(--arch); overflow: hidden; } .ww-mask-blob { border-radius: var(--blob); overflow: hidden; } [data-parallax] { will-change: transform; } /* Scrapbook bits */ .ww-polaroid { margin: 0; padding: .7rem .7rem 0; background: var(--white); box-shadow: var(--shadow-lift); border-radius: 2px; } .ww-polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .ww-polaroid figcaption { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--charcoal); padding: .55rem .2rem .7rem; text-align: center; } .ww-tape { position: absolute; width: 92px; height: 26px; background: rgba(232, 221, 203, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); z-index: 3; -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0); mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent 0); } /* ========================================================================== Header ========================================================================== */ .ww-header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--cream); transition: background-color .6s var(--ease), color .6s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); } .ww-header::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(24, 34, 27, .48), rgba(24, 34, 27, 0)); transition: opacity .6s var(--ease); } .ww-header.is-scrolled { background: rgba(247, 242, 232, .94); color: var(--charcoal); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .ww-header.is-scrolled::before { opacity: 0; } .ww-header.is-hidden { transform: translateY(-100%); } .admin-bar .ww-header { top: 32px; } @media (max-width: 782px) { .admin-bar .ww-header { top: 46px; } .admin-bar .ww-header.is-scrolled { top: 0; } } .ww-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; height: var(--header-h); max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); transition: height .5s var(--ease); } .ww-header.is-scrolled .ww-header__inner { height: 70px; } .ww-logo { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; } .ww-logo:hover { color: inherit; } .ww-logo__mark { width: 46px; height: 46px; transition: transform 1.2s var(--ease); } .ww-logo:hover .ww-logo__mark { transform: rotate(-8deg); } .ww-logo__img { width: auto; max-height: 52px; } .ww-logo__text { display: flex; flex-direction: column; line-height: 1; } .ww-logo__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .ww-logo__name em { font-weight: 400; color: var(--wood); text-transform: none; } .ww-header:not(.is-scrolled) .ww-logo--header .ww-logo__name em { color: #E3C7A8; } .ww-logo__sub { margin-top: .35rem; font-size: .58rem; font-weight: 700; letter-spacing: .38em; text-transform: uppercase; opacity: .8; } .ww-nav { position: relative; justify-self: center; } .ww-nav__list { display: flex; gap: clamp(.6rem, 1.6vw, 2rem); list-style: none; margin: 0; padding: 0; } .ww-nav__list a { display: block; padding: .6rem .15rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: inherit; opacity: .9; transition: opacity .3s, color .3s; } .ww-nav__list a:hover { opacity: 1; color: inherit; } .ww-nav__list .current-menu-item > a, .ww-nav__list a[aria-current="page"] { opacity: 1; } .ww-nav__indicator { position: absolute; bottom: .1rem; left: 0; height: 9px; width: 30px; pointer-events: none; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 9'%3E%3Cpath d='M1 6c10-4 18 2 29-1s19-3 29 0' fill='none' stroke='%23B66F52' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: 0; transition: transform .6s var(--ease), width .6s var(--ease), opacity .4s; } .ww-nav__indicator.is-on { opacity: 1; } .ww-header__actions { display: flex; align-items: center; gap: .4rem; justify-self: end; } .ww-header__cta { margin-left: .5rem; } .ww-header:not(.is-scrolled) .ww-header__cta { --btn-bg: rgba(52, 75, 58, .85); --btn-bd: rgba(247, 242, 232, .25); } .ww-header:not(.is-scrolled) .ww-icon-btn:hover { background: rgba(247, 242, 232, .12); border-color: var(--line-light); } .ww-header__menu { display: none; } .ww-lang { position: relative; font-size: .74rem; font-weight: 700; letter-spacing: .1em; } .ww-lang--static { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .6rem; opacity: .85; } .ww-lang--static .ww-icon { width: 1.05rem; height: 1.05rem; } .ww-lang__toggle { display: inline-flex; align-items: center; gap: .35rem; height: 2.6rem; padding: 0 .6rem; background: none; border: 0; border-radius: 2rem; letter-spacing: .1em; } .ww-lang__toggle .ww-icon { width: 1.05rem; height: 1.05rem; } .ww-lang__chev { width: .8rem !important; transition: transform .3s; } .ww-lang__toggle[aria-expanded="true"] .ww-lang__chev { transform: rotate(180deg); } .ww-lang__menu { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 10rem; margin: 0; padding: .4rem; list-style: none; background: var(--cream); color: var(--charcoal); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); animation: ww-fade-down .35s var(--ease); } .ww-lang__menu a { display: block; padding: .5rem .7rem; text-decoration: none; font-weight: 500; letter-spacing: 0; border-radius: 2px; } .ww-lang__menu a:hover, .ww-lang__menu a[aria-current] { background: var(--oat); } @keyframes ww-fade-down { from { opacity: 0; transform: translateY(-6px); } } /* ---------- Mobile menu overlay ---------- */ .ww-menu { position: fixed; inset: 0; z-index: 200; color: var(--cream); background: var(--woodland); clip-path: circle(0% at calc(100% - 2.5rem) 2.5rem); transition: clip-path .9s var(--ease-slow); } .ww-menu.is-open { clip-path: circle(150% at calc(100% - 2.5rem) 2.5rem); } .ww-menu__bg { position: absolute; inset: 0; } .ww-menu__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .32; transform: scale(1.08); transition: transform 2.4s var(--ease-slow); } .ww-menu.is-open .ww-menu__bg img { transform: scale(1); } .ww-menu__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 54, 42, .55), rgba(36, 54, 42, .92)); } .ww-menu__inner { position: relative; height: 100%; display: flex; flex-direction: column; padding: 1rem var(--gutter) 2rem; overflow-y: auto; } .ww-menu__top { display: flex; justify-content: space-between; align-items: center; min-height: 64px; } .ww-menu__heading { font-family: var(--serif); font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1; margin: 2.2rem 0 1.6rem; max-width: 11em; } .ww-menu__heading em { color: var(--sage); } .ww-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); } .ww-menu__list li { border-bottom: 1px solid var(--line-light); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .ww-menu.is-open .ww-menu__list li { opacity: 1; transform: none; } .ww-menu.is-open .ww-menu__list li:nth-child(1) { transition-delay: .25s; } .ww-menu.is-open .ww-menu__list li:nth-child(2) { transition-delay: .3s; } .ww-menu.is-open .ww-menu__list li:nth-child(3) { transition-delay: .35s; } .ww-menu.is-open .ww-menu__list li:nth-child(4) { transition-delay: .4s; } .ww-menu.is-open .ww-menu__list li:nth-child(5) { transition-delay: .45s; } .ww-menu.is-open .ww-menu__list li:nth-child(6) { transition-delay: .5s; } .ww-menu__list a { display: flex; justify-content: space-between; align-items: center; padding: .95rem 0; font-family: var(--serif); font-size: 1.7rem; text-decoration: none; color: var(--cream); } .ww-menu__list a::after { content: "→"; font-family: var(--sans); font-size: 1rem; opacity: .5; transition: transform .4s var(--ease); } .ww-menu__list a:hover::after { transform: translateX(5px); } .ww-menu__list .current-menu-item > a, .ww-menu__list a[aria-current] { color: #E3C7A8; font-style: italic; } .ww-menu__foot { margin-top: auto; padding-top: 2rem; } .ww-menu__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; font-size: .85rem; } .ww-menu__meta a { color: var(--cream); } /* ========================================================================== Home hero ========================================================================== */ .ww-hero { position: relative; min-height: max(640px, 94svh); display: flex; align-items: flex-end; color: var(--cream); overflow: hidden; background: var(--woodland); } .ww-hero__slides { position: absolute; inset: -6% 0 0; } .ww-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.4s var(--ease); } .ww-hero__slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02) sepia(.08); transform: scale(1.12); transition: transform 14s linear; } .ww-hero__slide.is-active { opacity: 1; } .ww-hero__slide.is-active img { transform: scale(1.02); } .ww-hero__shade { position: absolute; inset: 0; background: radial-gradient(130% 100% at 10% 90%, rgba(20, 30, 23, .82) 0%, rgba(20, 30, 23, .45) 48%, rgba(20, 30, 23, .08) 78%), linear-gradient(0deg, rgba(20, 30, 23, .55) 0%, rgba(20, 30, 23, 0) 45%); } .ww-hero__grain { position: absolute; inset: 0; background-image: var(--paper); opacity: .5; mix-blend-mode: overlay; pointer-events: none; } .ww-hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(9rem, 14vw, 12rem); } .ww-hero__copy { max-width: 46rem; } .ww-hero__title { color: var(--cream); text-shadow: 0 2px 30px rgba(0, 0, 0, .28); } .ww-hero .ww-label, .ww-page-hero .ww-label { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); } .ww-hero__title em { color: #E9CFAF; } .ww-hero__text { font-size: var(--fs-lead); line-height: 1.7; max-width: 34em; color: rgba(247, 242, 232, .9); } .ww-hero__ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; } .ww-hero__note { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 18vh); font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.3rem); color: #F1DCC2; transform: rotate(-6deg); } .ww-hero__arrow { position: relative; width: 90px; height: 50px; color: #F1DCC2; opacity: .85; margin: .2rem 0 0 2.4rem; transform: rotate(48deg); } .ww-hero__scenes { display: flex; align-items: flex-end; gap: 1.6rem; } .ww-hero__scene { display: grid; gap: .35rem; text-align: left; background: none; border: 0; padding: .4rem 0; color: rgba(247, 242, 232, .62); transition: color .4s; width: 8.5rem; } .ww-hero__scene:hover, .ww-hero__scene.is-active { color: var(--cream); } .ww-hero__scene-no { font-size: .66rem; font-weight: 700; letter-spacing: .2em; } .ww-hero__scene-name { font-family: var(--serif); font-size: 1.06rem; line-height: 1.15; font-style: italic; } .ww-hero__scene-bar { position: relative; height: 1px; background: rgba(247, 242, 232, .3); overflow: hidden; } .ww-hero__scene-bar i { position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: left; } .ww-hero__scene.is-active .ww-hero__scene-bar i { animation: ww-progress var(--hero-delay, 7s) linear forwards; } .ww-hero.is-paused .ww-hero__scene.is-active .ww-hero__scene-bar i { animation-play-state: paused; } @keyframes ww-progress { to { transform: scaleX(1); } } .ww-hero__pause { display: inline-flex; gap: 3px; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--line-light); background: transparent; } .ww-hero__pause span { width: 2px; height: 10px; background: var(--cream); transition: all .3s; } .ww-hero.is-paused .ww-hero__pause span:first-child { width: 0; height: 0; background: none; border-left: 9px solid var(--cream); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } .ww-hero.is-paused .ww-hero__pause span:last-child { display: none; } /* ---------- Floating booking panel ---------- */ .ww-panel-wrap { position: relative; z-index: 5; margin-top: clamp(-7.5rem, -9vw, -6rem); } .ww-panel { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: center; padding: 1.5rem 1.6rem 1.2rem; background: var(--cream); background-image: var(--paper); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-lift); } .ww-panel::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 2px; pointer-events: none; } .ww-panel__intro { position: relative; align-self: stretch; display: flex; align-items: center; padding-right: 1.4rem; border-right: 1px solid var(--line); min-width: 9.5rem; } .ww-panel__kicker { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1.1; color: var(--woodland); max-width: 7em; } .ww-panel__sprig { right: .4rem; bottom: -.4rem; width: 26px; height: 46px; opacity: .55; } .ww-compact-search { display: none; width: 100%; align-items: center; gap: .9rem; padding: .9rem 1.1rem; text-align: left; background: var(--cream); border: 1px solid var(--line); border-radius: 60px; box-shadow: var(--shadow-lift); color: var(--charcoal); } .ww-compact-search > .ww-icon:first-child { width: 2.6rem; height: 2.6rem; padding: .65rem; border-radius: 50%; background: var(--forest); color: var(--cream); } .ww-compact-search span { flex: 1; display: grid; line-height: 1.3; } .ww-compact-search strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--woodland); } .ww-compact-search small { color: var(--muted); font-size: .8rem; } /* ========================================================================== Booking form ========================================================================== */ .ww-booking { position: relative; } .ww-booking__row { display: grid; grid-template-columns: repeat(2, minmax(9rem, 1fr)) minmax(10rem, 1.15fr) minmax(9rem, 1fr) auto; align-items: stretch; } .ww-booking__field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .35rem 1.1rem; border-right: 1px solid var(--line); min-width: 0; } .ww-booking__field label, .ww-booking__fake-label, .ww-booking__legend { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wood); } .ww-booking__field label .ww-icon, .ww-booking__fake-label .ww-icon, .ww-booking__legend .ww-icon { width: 1rem; height: 1rem; } .ww-booking__field input[type="date"], .ww-booking__field select, .ww-guests__toggle { width: 100%; min-height: 2.4rem; padding: .2rem 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font-family: var(--serif); font-size: 1.28rem; font-weight: 500; color: var(--woodland); border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color .3s; } .ww-booking__field input[type="date"]:hover, .ww-booking__field select:hover, .ww-guests__toggle:hover { border-bottom-color: var(--line-strong); } .ww-booking__field input[type="date"]:focus-visible, .ww-booking__field select:focus-visible, .ww-guests__toggle:focus-visible { outline: none; border-bottom-color: var(--terracotta); } .ww-booking__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; filter: sepia(1) hue-rotate(40deg); } .ww-booking__field select { background: no-repeat right center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A77B55' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); padding-right: 1.4rem; cursor: pointer; } .ww-guests__toggle { display: flex; align-items: center; justify-content: space-between; gap: .4rem; text-align: left; cursor: pointer; } .ww-guests__toggle .ww-icon { width: .95rem; color: var(--wood); transition: transform .3s; } .ww-guests__toggle[aria-expanded="true"] .ww-icon { transform: rotate(180deg); } .ww-guests__toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ww-booking__field.has-error input, .ww-booking__field.has-error .ww-guests__toggle { border-bottom-color: var(--terracotta); } .ww-booking__field.has-error label { color: var(--terracotta); } .ww-guests__pop { position: absolute; top: calc(100% + .9rem); left: 0; z-index: 20; width: min(21rem, 86vw); padding: 1rem 1.2rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); animation: ww-fade-down .35s var(--ease); } .ww-guests__done { margin-top: .4rem; } .is-inline .ww-guests__pop { position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: none; animation: none; } .ww-counter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .ww-counter:last-of-type { border-bottom: 0; } .ww-counter__text { display: grid; line-height: 1.3; } .ww-counter__text label { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--woodland); } .ww-counter__text span { font-size: .78rem; color: var(--muted); } .ww-counter__controls { display: flex; align-items: center; gap: .3rem; } .ww-counter__controls input { width: 2.4rem; text-align: center; border: 0; background: none; font-weight: 700; -moz-appearance: textfield; } .ww-counter__controls input::-webkit-outer-spin-button, .ww-counter__controls input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ww-counter__btn { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--forest); transition: all .3s var(--ease); } .ww-counter__btn .ww-icon { width: .9rem; height: .9rem; } .ww-counter__btn:hover:not(:disabled) { background: var(--forest); border-color: var(--forest); color: var(--cream); } .ww-counter__btn:disabled { opacity: .3; cursor: not-allowed; } .ww-booking__submit { margin-left: 1rem; white-space: nowrap; } .ww-promo { margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--line); font-size: .82rem; } .ww-promo summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--muted); list-style: none; } .ww-promo summary::-webkit-details-marker { display: none; } .ww-promo summary .ww-icon { width: 1rem; height: 1rem; color: var(--wood); } .ww-promo summary:hover { color: var(--forest); } .ww-promo input { display: block; margin-top: .6rem; width: min(18rem, 100%); padding: .6rem .8rem; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--white); text-transform: uppercase; letter-spacing: .08em; } .ww-booking__errors:not(:empty) { display: flex; gap: .6rem; margin-top: .9rem; padding: .75rem 1rem; font-size: .88rem; line-height: 1.5; color: #7E3F28; background: rgba(182, 111, 82, .1); border-left: 2px solid var(--terracotta); border-radius: 2px; animation: ww-fade-down .4s var(--ease); } .ww-booking__errors ul { margin: 0; padding-left: 1rem; } .ww-booking__estimate:not(:empty) { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 .2rem; padding: .8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .9rem; } .ww-booking__estimate strong { font-family: var(--serif); font-size: 1.3rem; color: var(--woodland); } .ww-booking__estimate small { display: block; color: var(--muted); font-size: .76rem; } .ww-booking__note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--muted); } .ww-booking__contact { display: grid; gap: .8rem; margin-top: 1rem; } .ww-field label { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wood); } .ww-field input, .ww-field textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(255, 255, 255, .7); transition: border-color .3s, background .3s; } .ww-field input:focus, .ww-field textarea:focus { outline: none; border-color: var(--forest); background: var(--white); } .ww-field.has-error input { border-color: var(--terracotta); } /* Bar variant (cabins page) */ .ww-searchbar-wrap { position: relative; z-index: 5; margin-top: -3.2rem; } .ww-searchbar { padding: 1.1rem 1.3rem; background: var(--cream); background-image: var(--paper); border: 1px solid var(--line); border-radius: 3px; box-shadow: var(--shadow-lift); } /* Drawer + cabin variants: stacked */ .ww-booking--drawer .ww-booking__row, .ww-booking--cabin .ww-booking__row { grid-template-columns: 1fr 1fr; gap: 0; } .ww-booking--drawer .ww-booking__field, .ww-booking--cabin .ww-booking__field { padding: .8rem .9rem; border: 1px solid var(--line); margin: 0 -1px -1px 0; background: rgba(255, 255, 255, .45); } .ww-booking--drawer .ww-booking__field--guests, .ww-booking--cabin .ww-booking__field--guests, .ww-booking--drawer .ww-booking__field--region { grid-column: 1 / -1; } .ww-booking--drawer .ww-booking__submit { grid-column: 1 / -1; margin: 1.2rem 0 0; } .ww-booking--cabin .ww-booking__submit { margin: 1rem 0 0; } .ww-booking__legend { margin-bottom: .2rem; } /* ========================================================================== Section heads ========================================================================== */ .ww-section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .ww-section-head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; flex-wrap: wrap; } .ww-section-head--split > div { max-width: 38rem; } .ww-section-head--split .ww-h2 { margin: 0; } .ww-section-head__aside { max-width: 26rem; color: var(--muted); margin: 0; } /* ========================================================================== Little comforts strip ========================================================================== */ .ww-comforts { padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); position: relative; } .ww-comforts__head { margin-bottom: 2.4rem; } .ww-comforts__head .ww-h2 { margin: 0; max-width: 14em; font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); } .ww-comforts__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1320px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--oat-deep) transparent; } .ww-comforts__strip:focus-visible { outline-offset: -2px; } .ww-comfort { position: relative; display: grid; gap: .3rem; align-content: start; padding: 2rem 1.3rem 1.8rem; scroll-snap-align: start; border-right: 1px solid var(--line); transition: background-color .5s var(--ease); } .ww-comfort:last-child { border-right: 0; } .ww-comfort:hover { background: rgba(232, 221, 203, .55); } .ww-comfort__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .8rem; border-radius: var(--blob); background: var(--oat); color: var(--forest); transition: border-radius 1.2s var(--ease), background .5s; } .ww-comfort__icon .ww-icon { width: 1.7rem; height: 1.7rem; } .ww-comfort:hover .ww-comfort__icon { border-radius: 42% 58% 54% 46% / 56% 44% 56% 44%; background: var(--sage-pale); } .ww-comfort strong { font-family: var(--serif); font-size: 1.22rem; font-weight: 500; line-height: 1.2; color: var(--woodland); } .ww-comfort__where { font-size: .74rem; color: var(--muted); letter-spacing: .02em; } .ww-comfort__link { position: absolute; inset: 0; } /* ========================================================================== Story ========================================================================== */ .ww-story { overflow: hidden; } .ww-story__fern { right: -1rem; top: 3rem; width: 120px; height: 220px; } .ww-story__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; } .ww-story__media { position: relative; padding: 0 0 4rem 0; } .ww-story__main { margin: 0; aspect-ratio: 4 / 5; max-width: 34rem; box-shadow: var(--shadow-lift); } .ww-story__main > div { height: 115%; margin-top: -7%; } .ww-story__main img { width: 100%; height: 100%; object-fit: cover; } .ww-story__detail { position: absolute; right: 0; bottom: 0; width: 44%; rotate: 4deg; } .ww-story__badge { position: absolute; left: -1.2rem; top: 2rem; width: 120px; height: 120px; display: grid; place-items: center; color: var(--woodland); } .ww-story__badge svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; animation: ww-spin 40s linear infinite; } .ww-story__badge text { font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; fill: var(--woodland); font-family: var(--sans); font-weight: 700; } .ww-story__badge::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--cream); box-shadow: var(--shadow-soft); z-index: -1; } .ww-story__badge > .ww-icon { width: 1.8rem; height: 1.8rem; color: var(--forest); } @keyframes ww-spin { to { transform: rotate(360deg); } } .ww-story__values { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .ww-story__values li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .ww-story__values .ww-icon { width: 1.6rem; height: 1.6rem; color: var(--terracotta); margin-top: .2rem; } .ww-story__values strong { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--woodland); } .ww-story__values span { font-size: .92rem; color: var(--muted); } /* ========================================================================== Cabin entries ========================================================================== */ .ww-cabins { display: grid; gap: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem); } .ww-cabins--featured { grid-template-columns: repeat(12, 1fr); align-items: start; } .ww-cabins--featured .ww-cabin:nth-child(4n+1) { grid-column: 1 / span 7; } .ww-cabins--featured .ww-cabin:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 9rem; } .ww-cabins--featured .ww-cabin:nth-child(4n+3) { grid-column: 2 / span 5; margin-top: -3rem; } .ww-cabins--featured .ww-cabin:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: 4rem; } .ww-cabins--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } .ww-cabins--grid .ww-cabin:nth-child(3n+2) { margin-top: 3rem; } .ww-cabins--three { grid-template-columns: repeat(3, 1fr); } .ww-cabin { position: relative; } .ww-cabin__media { position: relative; } .ww-cabin__img { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--oat); box-shadow: var(--shadow-soft); transition: border-radius 1.2s var(--ease), box-shadow .6s var(--ease); } .ww-cabins--featured .ww-cabin:nth-child(4n+1) .ww-cabin__img { aspect-ratio: 5 / 4; } .ww-cabin__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease-slow), filter .8s; } .ww-cabin:hover .ww-cabin__img img { transform: scale(1.05); } .ww-cabin:hover .ww-cabin__img { box-shadow: var(--shadow-lift); } .ww-cabin--arch .ww-cabin__img { border-radius: var(--arch); } .ww-cabin--blob .ww-cabin__img { border-radius: 46% 54% 12px 12px / 30% 34% 12px 12px; } .ww-cabin--soft .ww-cabin__img { border-radius: 10px 120px 10px 10px; } .ww-cabin--blob-2 .ww-cabin__img { border-radius: 12px 12px 40% 60% / 12px 12px 22% 26%; } .ww-cabin:hover.ww-cabin--arch .ww-cabin__img { border-radius: 300px 300px 10px 10px; } .ww-cabin__stamp { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .8rem; border-radius: 30px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: rgba(247, 242, 232, .92); color: var(--woodland); backdrop-filter: blur(4px); } .ww-fav { position: absolute; top: 1rem; right: 1rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 0; background: rgba(247, 242, 232, .92); color: var(--charcoal); box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .3); transition: transform .4s var(--ease), color .3s; } .ww-fav:hover { transform: scale(1.08); color: var(--terracotta); } .ww-fav .ww-icon { width: 1.2rem; height: 1.2rem; transition: fill .3s; } .ww-fav[aria-pressed="true"] { color: var(--terracotta); } .ww-fav[aria-pressed="true"] .ww-icon { fill: currentColor; animation: ww-heart .55s var(--ease); } @keyframes ww-heart { 40% { transform: scale(1.35); } } .ww-cabin-hero__actions .ww-fav { position: static; } .ww-cabin__body { padding: 1.4rem .3rem 0; } .ww-cabin__no { margin: 0 0 .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wood); } .ww-cabin__title { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 500; margin-bottom: .3em; } .ww-cabin__title a { text-decoration: none; background: linear-gradient(var(--terracotta), var(--terracotta)) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); } .ww-cabin__title a:hover { color: var(--woodland); background-size: 100% 1px; } .ww-cabin__tagline { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.45; color: var(--charcoal); max-width: 30em; } .ww-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .84rem; color: var(--muted); } .ww-facts li { display: inline-flex; align-items: center; gap: .4rem; } .ww-facts .ww-icon { width: 1.05rem; height: 1.05rem; color: var(--wood); } .ww-cabin__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; margin-bottom: 1rem; border-top: 1px solid var(--line); } .ww-amenity-icons { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; } .ww-amenity-icons li { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); color: var(--forest); } .ww-amenity-icons .ww-icon { width: 1rem; height: 1rem; } .ww-cabin__price { margin: 0; text-align: right; font-size: .8rem; color: var(--muted); line-height: 1.3; } .ww-cabin__price strong { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--woodland); margin: 0 .15rem; } .ww-cabin__price small { display: block; margin-top: .2rem; font-size: .72rem; } /* ========================================================================== Experiences scrapbook (home) ========================================================================== */ .ww-scrap { overflow: hidden; } .ww-scrap__branch { left: -2rem; top: 2rem; width: 300px; height: 100px; color: var(--sage); opacity: .3; } .ww-scrap__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; } .ww-scrap__list { list-style: none; margin: 2rem 0 2.5rem; padding: 0; display: grid; gap: 1.5rem; } .ww-scrap__list li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; } .ww-scrap__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-light); color: #E3C7A8; } .ww-scrap__icon .ww-icon { width: 1.4rem; height: 1.4rem; } .ww-scrap__list h3 { font-size: 1.45rem; margin: .2rem 0 .25rem; } .ww-scrap__list p { margin: 0; font-size: .93rem; color: rgba(247, 242, 232, .75); } .ww-scrap__collage { position: relative; min-height: 38rem; } .ww-scrap__photo { position: absolute; width: 52%; } .ww-scrap__photo--1 { left: 4%; top: 0; rotate: -5deg; z-index: 2; } .ww-scrap__photo--2 { right: 0; top: 14%; rotate: 4deg; z-index: 1; } .ww-scrap__photo--3 { left: 22%; bottom: 0; rotate: -1.5deg; z-index: 3; width: 48%; } .ww-scrap__photo { transition: opacity 1.1s var(--ease-slow), transform 1.1s var(--ease-slow), rotate .8s var(--ease), scale .8s var(--ease); } .ww-scrap__photo:hover { rotate: 0deg; scale: 1.03; z-index: 5; } .ww-tape--1 { left: 20%; top: -10px; transform: rotate(-8deg); } .ww-tape--2 { right: 18%; top: 12%; transform: rotate(10deg); } /* ========================================================================== Seasons ========================================================================== */ .ww-seasons__tabs { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; margin: -1rem 0 2.5rem; } .ww-seasons__tab, .ww-chip-btn { padding: .6rem 1.2rem; border-radius: 40px; border: 1px solid var(--line-strong); background: transparent; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; transition: all .45s var(--ease); } .ww-seasons__tab:hover, .ww-chip-btn:hover { border-color: var(--forest); color: var(--forest); } .ww-seasons__tab[aria-selected="true"], .ww-chip-btn.is-active { background: var(--forest); border-color: var(--forest); color: var(--cream); } .ww-seasons__stage { position: relative; display: grid; } .ww-seasons__panel { grid-area: 1 / 1; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; } .ww-seasons__panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; } .ww-seasons__panel { opacity: 1; transition: opacity 1.2s var(--ease), visibility 1.2s; } .ww-seasons__img { grid-column: 1 / span 9; grid-row: 1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px 160px 6px 6px; box-shadow: var(--shadow-lift); } .ww-seasons__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s var(--ease-slow); } .ww-seasons__panel:not([hidden]) .ww-seasons__img img { transform: scale(1); } .ww-seasons__card { grid-column: 8 / span 5; grid-row: 1; position: relative; z-index: 2; padding: clamp(1.8rem, 3vw, 2.8rem); background: var(--cream); background-image: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lift); transform: translateY(14px); transition: transform 1.2s var(--ease-slow); } .ww-seasons__panel:not([hidden]) .ww-seasons__card { transform: none; } .ww-seasons__card p:last-child { margin: 0; color: var(--muted); } .ww-seasons__name { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--terracotta); margin-bottom: .4rem; } /* ========================================================================== Place teaser ========================================================================== */ .ww-place__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: center; } .ww-place__distances { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; list-style: none; margin: 1.6rem 0 2rem; padding: 0; } .ww-place__distances li { display: inline-flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600; color: var(--woodland); } .ww-place__distances .ww-icon { color: var(--terracotta); } .ww-place__map { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: var(--blob); box-shadow: var(--shadow-lift); } .ww-place__map > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) sepia(.15); } .ww-place__ridge { left: 0; right: 0; bottom: 1rem; width: 100%; height: 60px; color: var(--cream); opacity: .7; } .ww-place__pin { position: absolute; left: 48%; top: 44%; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem .5rem .55rem; border-radius: 40px; background: var(--cream); box-shadow: var(--shadow-soft); color: var(--terracotta); animation: ww-bob 4s ease-in-out infinite; } .ww-place__pin em { font-family: var(--serif); font-size: 1rem; color: var(--woodland); } @keyframes ww-bob { 50% { transform: translateY(-6px); } } /* ========================================================================== Journal cards ========================================================================== */ .ww-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } .ww-posts .ww-post:nth-child(3n+2) { margin-top: 2.5rem; } .ww-post__img { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 3px; background: var(--oat); } .ww-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-slow); } .ww-post:hover .ww-post__img img { transform: scale(1.05); } .ww-post__body { padding-top: 1.1rem; } .ww-post__meta { display: flex; gap: .8rem; margin: 0 0 .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wood); } .ww-post__meta span::after { content: "·"; margin-left: .8rem; color: var(--line-strong); } .ww-post__title { font-size: 1.65rem; font-weight: 500; line-height: 1.15; } .ww-post__title a { text-decoration: none; } .ww-post__title a:hover { color: var(--forest); text-decoration: underline; text-decoration-color: var(--terracotta); } .ww-post__excerpt { color: var(--muted); font-size: .94rem; margin: 0; } .ww-posts--journal .ww-post:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; margin-bottom: 1.5rem; } .ww-posts--journal .ww-post:first-child .ww-post__img { aspect-ratio: 16 / 10; border-radius: 4px 120px 4px 4px; } .ww-posts--journal .ww-post:first-child .ww-post__title { font-size: var(--fs-h3); } .ww-posts--journal .ww-post:nth-child(3n+2) { margin-top: 0; } .ww-posts--journal .ww-post:nth-child(3n) { margin-top: 2.5rem; } /* ========================================================================== Drawers & modal ========================================================================== */ .ww-drawer { position: fixed; inset: 0; z-index: 300; display: flex; justify-content: flex-end; } .ww-drawer__overlay { position: absolute; inset: 0; background: rgba(28, 37, 31, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .6s var(--ease); } .ww-drawer__panel { position: relative; width: min(34rem, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem clamp(1.2rem, 4vw, 2.4rem) 2.4rem; background: var(--cream); background-image: var(--paper); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .35); transform: translateX(104%); transition: transform .8s var(--ease-slow); } .ww-drawer.is-open .ww-drawer__overlay { opacity: 1; } .ww-drawer.is-open .ww-drawer__panel { transform: none; } .ww-drawer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.6rem; } .ww-drawer__title { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 400; margin: 0; } .ww-drawer__title em { color: var(--wood); } .ww-drawer__branch { position: relative; width: 70%; height: 70px; margin: 3rem auto 0; opacity: .3; } .ww-favlist { list-style: none; margin: 0 0 1.5rem; padding: 0; } .ww-favlist li { display: grid; grid-template-columns: 5rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line); animation: ww-fade-down .4s var(--ease); } .ww-favlist img { width: 5rem; height: 4rem; object-fit: cover; border-radius: 3px; } .ww-favlist a { font-family: var(--serif); font-size: 1.3rem; text-decoration: none; color: var(--woodland); } .ww-favlist .ww-link-btn { font-size: .68rem; color: var(--muted); } .ww-favlist__empty { display: block !important; padding: 2rem 0 !important; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); border: 0 !important; } .ww-modal { justify-content: center; align-items: center; padding: clamp(.5rem, 3vw, 2rem); } .ww-modal__panel { position: relative; width: min(68rem, 100%); max-height: calc(100svh - 2rem); overflow: auto; background: var(--cream); background-image: var(--paper); border-radius: 4px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .7s var(--ease), transform .8s var(--ease-slow); } .ww-drawer.is-open .ww-modal__panel { opacity: 1; transform: none; } .ww-modal__panel--video { background: #000; width: min(72rem, 100%); } .ww-modal__close { position: absolute; top: .8rem; right: .8rem; z-index: 3; background: var(--cream); } .ww-modal__video { aspect-ratio: 16 / 9; } .ww-modal__video iframe, .ww-modal__video video { width: 100%; height: 100%; border: 0; } .ww-modal__fallback { display: grid; place-items: center; height: 100%; } .ww-modal__story { display: grid; grid-template-columns: 1fr 1.05fr; } .ww-modal__collage { position: relative; min-height: 30rem; } .ww-modal__img-a { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ww-modal__img-b { position: absolute; right: -2rem; bottom: 2rem; width: 46%; aspect-ratio: 4 / 5; object-fit: cover; border: 8px solid var(--white); box-shadow: var(--shadow-lift); transform: rotate(3deg); z-index: 2; } .ww-modal__copy { padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(3rem, 5vw, 4.5rem); } .ww-modal__copy .ww-h2 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); } .ww-timeline { list-style: none; margin: 1.5rem 0 2rem; padding: 0; border-left: 1px solid var(--line-strong); } .ww-timeline li { position: relative; display: grid; grid-template-columns: 3.4rem 1fr; gap: .8rem; padding: 0 0 1rem 1.2rem; } .ww-timeline li::before { content: ""; position: absolute; left: -5px; top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); border: 1px solid var(--terracotta); } .ww-timeline span { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--terracotta); line-height: 1.4; } .ww-timeline p { margin: 0; font-size: .93rem; } /* Lightbox */ .ww-lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 4rem 4.5rem; background: rgba(20, 28, 22, .94); opacity: 0; transition: opacity .5s var(--ease); } .ww-lightbox.is-open { opacity: 1; } .ww-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: .8rem; justify-items: center; } .ww-lightbox__figure img { max-height: calc(100svh - 10rem); width: auto; object-fit: contain; box-shadow: 0 30px 80px -20px #000; transition: opacity .45s var(--ease), transform .6s var(--ease); } .ww-lightbox__figure img.is-changing { opacity: 0; transform: scale(.985); } .ww-lightbox__figure figcaption { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--oat); } .ww-lightbox__close { position: absolute; top: 1rem; right: 1rem; } .ww-lightbox__prev, .ww-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); } .ww-lightbox__prev { left: 1rem; } .ww-lightbox__next { right: 1rem; } /* Toast */ .ww-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 500; display: flex; align-items: flex-start; gap: .8rem; width: min(34rem, calc(100% - 2rem)); padding: 1rem 1.1rem; border-radius: 4px; background: var(--woodland); color: var(--cream); box-shadow: var(--shadow-lift); font-size: .92rem; line-height: 1.5; transform: translate(-50%, 140%); transition: transform .8s var(--ease-slow); } .ww-toast.is-visible { transform: translate(-50%, 0); } .ww-toast[data-type="error"] { background: #6D3A27; } .ww-toast p { margin: 0; flex: 1; } .ww-toast > .ww-icon { margin-top: .1rem; color: var(--sage); } .ww-toast__close { background: none; border: 0; padding: 0; color: inherit; opacity: .7; } /* ========================================================================== Footer ========================================================================== */ .ww-footer { position: relative; overflow: hidden; color: var(--cream); background: var(--woodland); } .ww-footer__bg { position: absolute; inset: -10% 0 0; } .ww-footer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: grayscale(.3) sepia(.3); } .ww-footer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(36, 54, 42, .55) 0%, var(--woodland) 55%); } .ww-footer__fern { z-index: 1; left: 2%; bottom: 3rem; width: 110px; height: 200px; color: var(--sage); opacity: .25; } .ww-footer__inner { position: relative; z-index: 2; padding-top: clamp(5rem, 10vw, 9rem); } .ww-footer__closing { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; padding-bottom: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--line-light); } .ww-footer__statement { margin: 0; max-width: 14em; font-family: var(--serif); font-size: clamp(2.6rem, 1.8rem + 4vw, 5.6rem); line-height: 1; font-weight: 400; } .ww-footer__statement em { color: #E3C7A8; } .ww-footer__grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr 1fr 1.4fr; gap: 2.5rem; padding: 3.5rem 0; } .ww-footer__brand p { margin: 1.3rem 0; font-size: .92rem; color: rgba(247, 242, 232, .72); max-width: 24em; } .ww-footer__title { margin: 0 0 1.1rem; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); } .ww-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .ww-footer__links a { text-decoration: none; color: rgba(247, 242, 232, .84); font-size: .93rem; transition: color .3s, padding .4s var(--ease); } .ww-footer__links a:hover { color: var(--cream); padding-left: .3rem; } .ww-footer__small { margin-top: 1.1rem; font-size: .8rem; color: rgba(247, 242, 232, .6); } .ww-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; font-size: .9rem; color: rgba(247, 242, 232, .84); } .ww-footer__contact li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; } .ww-footer__contact .ww-icon { color: var(--sage); width: 1.1rem; margin-top: .25rem; } .ww-footer__contact a { color: inherit; text-decoration: none; word-break: break-word; } .ww-footer__contact a:hover { color: var(--cream); text-decoration: underline; } .ww-footer__news p { font-size: .9rem; color: rgba(247, 242, 232, .72); } .ww-news__row { display: flex; border-bottom: 1px solid rgba(247, 242, 232, .45); transition: border-color .3s; } .ww-news__row:focus-within { border-color: var(--cream); } .ww-news input { flex: 1; min-width: 0; padding: .8rem 0; border: 0; background: transparent; color: var(--cream); } .ww-news input::placeholder { color: rgba(247, 242, 232, .5); } .ww-news input:focus { outline: none; } .ww-news__btn { display: grid; place-items: center; width: 2.6rem; padding: 0; border: 0; background: none; color: var(--cream); transition: transform .4s var(--ease); } .ww-news__btn:hover { transform: translateX(4px); } .ww-news__error { min-height: 1.2em; margin: .5rem 0 0; font-size: .8rem; color: #F0B8A0; } .ww-social { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; } .ww-social a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--line-light); color: var(--cream); transition: all .4s var(--ease); } .ww-social a:hover { background: var(--cream); color: var(--woodland); transform: translateY(-3px); } .ww-social .ww-icon { width: 1.1rem; height: 1.1rem; } .ww-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.6rem 0 2rem; border-top: 1px solid var(--line-light); font-size: .8rem; color: rgba(247, 242, 232, .6); } .ww-footer__bottom p { margin: 0; } .ww-footer__legal { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; list-style: none; margin: 0; padding: 0; } .ww-footer__legal a { color: rgba(247, 242, 232, .72); text-decoration: none; } .ww-footer__legal a:hover { color: var(--cream); text-decoration: underline; } .ww-totop { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .4rem 0; color: var(--cream); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .ww-totop .ww-icon { width: 2.4rem; height: 2.4rem; padding: .6rem; border: 1px solid var(--line-light); border-radius: 50%; transition: transform .6s var(--ease), background .4s; } .ww-totop:hover .ww-icon { transform: translateY(-5px); background: rgba(247, 242, 232, .1); } .ww-footer .ww-logo__name em { color: #E3C7A8; } /* ========================================================================== Inner page hero ========================================================================== */ .ww-page-hero, .ww-cabin-hero { position: relative; min-height: max(520px, 70svh); display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); background: var(--woodland); } .ww-page-hero--compact { min-height: max(440px, 56svh); } .ww-page-hero__media, .ww-cabin-hero__media { position: absolute; inset: -8% 0 0; } .ww-page-hero__media img, .ww-cabin-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) sepia(.08); animation: ww-settle 3.2s var(--ease-slow) both; } @keyframes ww-settle { from { transform: scale(1.12); opacity: .4; } } .ww-page-hero__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 30, 23, .82) 0%, rgba(20, 30, 23, .25) 55%, rgba(20, 30, 23, .35) 100%); } .ww-page-hero__inner, .ww-cabin-hero__inner { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 3rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); max-width: 1320px; } .ww-page-hero .ww-display, .ww-cabin-hero .ww-display { color: var(--cream); max-width: 15em; font-size: clamp(2.6rem, 1.8rem + 4vw, 5.4rem); } .ww-page-hero .ww-display em, .ww-cabin-hero .ww-display em { color: #E9CFAF; } .ww-page-hero__text { font-size: var(--fs-lead); max-width: 36em; color: rgba(247, 242, 232, .88); } .ww-page-hero__ridge { left: 0; right: 0; bottom: -2px; width: 100%; height: 80px; color: var(--cream); opacity: .22; z-index: 2; } .ww-back { position: absolute; top: calc(var(--header-h) + 1rem); left: var(--gutter); display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); text-decoration: none; opacity: .85; } .ww-back:hover { color: var(--cream); opacity: 1; } .ww-cabin-hero__actions { display: flex; gap: .8rem; align-items: center; margin-top: 1.5rem; } .ww-hero-search { margin-top: 1.5rem; max-width: 30rem; } /* ========================================================================== Cabins archive ========================================================================== */ .ww-filters { margin-bottom: 2rem; } .ww-filters fieldset { margin: 0; padding: 0; border: 0; } .ww-filters legend { margin-bottom: .8rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wood); } .ww-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .ww-chip { position: relative; cursor: pointer; } .ww-chip input { position: absolute; opacity: 0; pointer-events: none; } .ww-chip span { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border: 1px solid var(--line-strong); border-radius: 40px; font-size: .84rem; transition: all .4s var(--ease); } .ww-chip .ww-icon { width: 1.05rem; height: 1.05rem; color: var(--wood); transition: color .3s; } .ww-chip:hover span { border-color: var(--forest); } .ww-chip input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--cream); } .ww-chip input:checked + span .ww-icon { color: var(--sage); } .ww-chip input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 2px; } .ww-results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; margin-bottom: 2.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .ww-results-head p { margin: 0; } .ww-results-head strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--woodland); } .ww-inline-note { display: flex; gap: .6rem; align-items: flex-start; margin: -1.5rem 0 2.5rem; font-size: .88rem; color: var(--muted); } .ww-inline-note .ww-icon { color: var(--wood); margin-top: .15rem; } .ww-empty { position: relative; max-width: 34rem; margin: 2rem auto; text-align: center; padding: 3rem 1rem; } .ww-empty__sprig { position: relative; width: 40px; height: 70px; margin: 0 auto 1rem; opacity: .6; } .ww-empty .ww-search-form { margin-top: 1.5rem; } .nav-links { display: flex; justify-content: center; gap: .4rem; margin-top: 4rem; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 2.8rem; height: 2.8rem; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 50%; text-decoration: none; font-weight: 600; transition: all .3s; } .nav-links .page-numbers.current, .nav-links .page-numbers:hover { background: var(--forest); border-color: var(--forest); color: var(--cream); } /* ========================================================================== Single cabin ========================================================================== */ .ww-cabin-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; } .ww-cabin-page__facts { padding-bottom: 1.4rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); } .ww-cabin-page__facts .ww-facts { font-size: 1rem; gap: .6rem 2rem; margin: 0; color: var(--charcoal); } .ww-cabin-page__facts .ww-icon { width: 1.4rem; height: 1.4rem; } .ww-cabin-page__aside { position: sticky; top: calc(var(--header-h) + 1rem); } .ww-book-card { position: relative; padding: 1.8rem 1.6rem; background: var(--cream); background-image: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lift); } .ww-book-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line); pointer-events: none; } .ww-book-card__price { margin: 0 0 1.2rem; font-size: .85rem; color: var(--muted); } .ww-book-card__price strong { font-family: var(--serif); font-size: 2.2rem; font-weight: 500; color: var(--woodland); } .ww-prose { font-size: 1.06rem; line-height: 1.85; max-width: 44rem; } .ww-prose--center { margin: 0 auto; text-align: center; } .ww-prose--wide { max-width: none; } .ww-prose h2 { font-size: 2.2rem; margin-top: 1.6em; } .ww-prose h3 { font-size: 1.7rem; margin-top: 1.4em; } .ww-prose img { border-radius: 3px; } .ww-prose blockquote { margin: 2rem 0; padding: .5rem 0 .5rem 1.6rem; border-left: 2px solid var(--terracotta); font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--woodland); } .ww-prose a { color: var(--forest); text-decoration-color: var(--terracotta); } .ww-dropcap > p:first-of-type::first-letter { float: left; font-family: var(--serif); font-size: 4.6em; line-height: .82; padding: .08em .12em 0 0; color: var(--wood); } .ww-paper { padding: clamp(1.5rem, 4vw, 3.5rem); margin: 0 auto; background: rgba(255, 255, 255, .4); border: 1px solid var(--line); } .ww-owner-note { padding: .8rem 1rem; background: rgba(167, 123, 85, .12); border-left: 2px solid var(--wood); font-size: .88rem; } .ww-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 9rem; gap: .7rem; margin: 3rem 0; } .ww-mosaic__item { position: relative; padding: 0; border: 0; overflow: hidden; background: var(--oat); border-radius: 3px; cursor: zoom-in; } .ww-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-slow); } .ww-mosaic__item:hover img { transform: scale(1.06); } .ww-mosaic__item--1 { grid-column: span 4; grid-row: span 3; border-radius: 3px 100px 3px 3px; } .ww-mosaic__item--2 { grid-column: span 2; grid-row: span 2; } .ww-mosaic__item--3 { grid-column: span 2; grid-row: span 1; } .ww-mosaic__item--4 { grid-column: span 3; grid-row: span 2; } .ww-mosaic__item--5 { grid-column: span 3; grid-row: span 2; border-radius: 3px 3px 80px 3px; } .ww-cabin-amenities, .ww-cabin-know { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); } .ww-amen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem 1.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .ww-amen-grid li { display: flex; align-items: center; gap: .9rem; } .ww-amen-grid .ww-icon { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: var(--blob); background: var(--oat); color: var(--forest); } .ww-cabin-know dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2rem; margin: 1.2rem 0; } .ww-cabin-know dt { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wood); } .ww-cabin-know dd { margin: .2rem 0 0; font-family: var(--serif); font-size: 1.25rem; color: var(--woodland); } .ww-mobile-book { display: none; } /* ========================================================================== Experiences page ========================================================================== */ .ww-exp__filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: clamp(3rem, 6vw, 5rem); } .ww-exp__list { display: grid; gap: clamp(4rem, 8vw, 7rem); } .ww-exp__item { display: grid; grid-template-columns: repeat(12, 1fr); align-items: center; gap: 2rem; transition: opacity .6s var(--ease); } .ww-exp__item.is-hidden { display: none; } .ww-exp__media { margin: 0; aspect-ratio: 5 / 4; box-shadow: var(--shadow-lift); } .ww-exp__media > div { height: 112%; margin-top: -6%; } .ww-exp__media img { width: 100%; height: 100%; object-fit: cover; } .ww-exp__item--left .ww-exp__media { grid-column: 1 / span 6; } .ww-exp__item--left .ww-exp__copy { grid-column: 8 / span 5; } .ww-exp__item--right .ww-exp__media { grid-column: 7 / span 6; order: 2; } .ww-exp__item--right .ww-exp__copy { grid-column: 1 / span 5; order: 1; } .ww-exp__copy { position: relative; } .ww-exp__no { position: absolute; top: -3.4rem; left: -.3rem; font-family: var(--serif); font-size: 6rem; line-height: 1; color: var(--oat-deep); z-index: -1; } .ww-exp__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-radius: 50%; background: var(--forest); color: var(--cream); } .ww-exp__meta { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); } .ww-exp__none { text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--muted); } .ww-cta-band { overflow: hidden; } .ww-cta-band__fern { right: 6%; bottom: 0; width: 110px; height: 200px; color: var(--sage); opacity: .3; } .ww-cta-band .ww-h2 { max-width: 16em; margin: 0 auto .8em; } .ww-cta-band__actions { display: flex; justify-content: center; gap: .9rem; flex-wrap: wrap; } /* ========================================================================== Gallery ========================================================================== */ .ww-gallery__filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 3rem; } .ww-gallery__grid { columns: 3 18rem; column-gap: 1.2rem; } .ww-gallery__item { break-inside: avoid; margin: 0 0 1.2rem; position: relative; } .ww-gallery__item.is-hidden { display: none; } .ww-gallery__item button { display: block; width: 100%; padding: 0; border: 0; background: var(--oat); overflow: hidden; border-radius: 3px; cursor: zoom-in; } .ww-gallery__item:nth-child(4n+1) button { border-radius: 3px 80px 3px 3px; } .ww-gallery__item:nth-child(5n+3) button { border-radius: var(--arch); } .ww-gallery__item img { width: 100%; transition: transform 1.4s var(--ease-slow), filter .6s; } .ww-gallery__item:nth-child(3n) img { aspect-ratio: 4 / 5; object-fit: cover; } .ww-gallery__item:nth-child(3n+1) img { aspect-ratio: 4 / 3; object-fit: cover; } .ww-gallery__item:nth-child(3n+2) img { aspect-ratio: 1; object-fit: cover; } .ww-gallery__item button:hover img { transform: scale(1.05); } .ww-gallery__item figcaption { padding: .5rem .2rem 0; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted); } .ww-gallery__item.is-entering { animation: ww-fade-up .7s var(--ease) both; } @keyframes ww-fade-up { from { opacity: 0; transform: translateY(16px); } } /* ========================================================================== Location ========================================================================== */ .ww-location__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .ww-location__map { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 4px 140px 4px 4px; box-shadow: var(--shadow-lift); background: var(--oat); } .ww-location__map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.25) saturate(.8); } .ww-location__dir { position: absolute; left: 1rem; bottom: 1rem; } .ww-travel { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1.2rem; } .ww-travel li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); } .ww-travel .ww-icon { width: 1.6rem; height: 1.6rem; color: var(--terracotta); } .ww-travel strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--woodland); } .ww-travel p { margin: .2rem 0 0; font-size: .93rem; color: var(--muted); } .ww-address { font-style: normal; font-family: var(--serif); font-size: 1.3rem; line-height: 1.4; color: var(--woodland); } .ww-nearby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .ww-nearby__item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.8rem 1.5rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .5s var(--ease); } .ww-nearby__item:hover { background: rgba(247, 242, 232, .6); } .ww-nearby__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--blob); background: var(--cream); color: var(--forest); } .ww-nearby h3 { font-size: 1.4rem; margin: 0 0 .15rem; } .ww-nearby__dist { margin: 0 0 .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta); } .ww-nearby p:last-child { margin: 0; font-size: .92rem; color: var(--muted); } /* ========================================================================== Journal single, search, comments ========================================================================== */ .ww-cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; } .ww-article__grid { display: grid; grid-template-columns: minmax(0, 44rem) 1fr; gap: 4rem; justify-content: center; } .ww-article__grid:has(.ww-article__aside) { grid-template-columns: minmax(0, 44rem) 18rem; } .ww-article__grid > .ww-prose { margin: 0 auto; } .ww-article__aside .widget { margin-bottom: 2rem; } .widget-title { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wood); } .ww-tags { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .4rem; } .ww-tags a { padding: .3rem .8rem; border: 1px solid var(--line-strong); border-radius: 30px; font-size: .78rem; text-decoration: none; } .ww-post-nav { display: flex; justify-content: space-between; gap: 2rem; margin: 4rem auto 0; max-width: 60rem; padding-top: 2rem; border-top: 1px solid var(--line); } .ww-post-nav a { display: grid; gap: .2rem; text-decoration: none; } .ww-post-nav span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wood); } .ww-post-nav strong { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; } .ww-post-nav__next { text-align: right; margin-left: auto; } .ww-search-form { display: flex; border-bottom: 1px solid var(--line-strong); } .ww-page-hero .ww-search-form { border-color: rgba(247, 242, 232, .55); } .ww-search-form input { flex: 1; min-width: 0; padding: .8rem 0; border: 0; background: transparent; font-family: var(--serif); font-size: 1.3rem; } .ww-search-form input:focus { outline: none; } .ww-search-form button { background: none; border: 0; padding: 0 .4rem; color: inherit; } .ww-comments { max-width: 44rem; margin: 4rem auto 0; } .ww-comment-list { list-style: none; padding: 0; } .ww-comment-list .comment-body { padding: 1.4rem 0; border-bottom: 1px solid var(--line); } .comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea { width: 100%; padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: 2px; background: rgba(255, 255, 255, .6); } /* WordPress core alignment helpers */ .alignwide { max-width: 64rem; } .alignfull { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); } .wp-block-image figcaption, .wp-caption-text { font-family: var(--serif); font-style: italic; color: var(--muted); text-align: center; } .aligncenter { margin-left: auto; margin-right: auto; } .alignleft { float: left; margin: .4rem 1.6rem 1rem 0; } .alignright { float: right; margin: .4rem 0 1rem 1.6rem; } .wp-block-button__link { background: var(--forest); color: var(--cream); border-radius: 2px; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .sticky, .bypostauthor, .gallery-caption { outline: 0; } /* ========================================================================== Page transitions (where supported) ========================================================================== */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: ww-vt-out .45s var(--ease) both; } ::view-transition-new(root) { animation: ww-vt-in .7s var(--ease) both; } @keyframes ww-vt-out { to { opacity: 0; } } @keyframes ww-vt-in { from { opacity: 0; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1240px) { .ww-booking--panel .ww-booking__row, .ww-booking--bar .ww-booking__row { grid-template-columns: repeat(2, 1fr) 1.2fr 1fr; row-gap: 1rem; } .ww-booking--panel .ww-booking__submit, .ww-booking--bar .ww-booking__submit { grid-column: 1 / -1; margin: 0; } .ww-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .ww-footer__brand { grid-column: 1 / -1; } .ww-footer__news { grid-column: span 3; max-width: 30rem; } } @media (max-width: 1100px) { .ww-nav, .ww-header__actions .ww-lang { display: none; } .ww-header__menu { display: inline-grid; } .ww-header__inner { grid-template-columns: auto 1fr; } .ww-header__cta { display: none; } .ww-hero__note { display: none; } .ww-cabin-page__grid { grid-template-columns: 1fr; } .ww-cabin-page__aside { position: static; max-width: 36rem; } .ww-mobile-book { position: fixed; inset: auto 0 0; z-index: 90; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem var(--gutter); background: var(--cream); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .3); text-decoration: none; color: var(--charcoal); transform: translateY(110%); transition: transform .6s var(--ease); } .ww-mobile-book.is-visible { transform: none; } .ww-mobile-book strong { font-family: var(--serif); font-size: 1.5rem; color: var(--woodland); } .ww-mobile-book .ww-btn::before { display: none; } } @media (max-width: 900px) { :root { --header-h: 70px; } .ww-panel, .ww-searchbar { display: none; } .ww-compact-search { display: flex; } .ww-panel-wrap { margin-top: -2.2rem; } .ww-searchbar-wrap { margin-top: -1.8rem; } .ww-hero__inner { grid-template-columns: 1fr; padding-bottom: 5rem; } .ww-hero__scenes { gap: 1rem; } .ww-hero__scene { width: auto; flex: 1; } .ww-hero__scene-name { display: none; } .ww-story__grid, .ww-scrap__grid, .ww-place__grid, .ww-location__grid { grid-template-columns: 1fr; } .ww-story__media { max-width: 34rem; } .ww-scrap__collage { min-height: 28rem; } .ww-cabins--featured { grid-template-columns: 1fr 1fr; } .ww-cabins--featured .ww-cabin:nth-child(n) { grid-column: auto; margin-top: 0; } .ww-cabins--featured .ww-cabin:nth-child(even) { margin-top: 4rem; } .ww-cabins--featured .ww-cabin:nth-child(4n+1) .ww-cabin__img { aspect-ratio: 4 / 5; } .ww-cabins--three { grid-template-columns: 1fr 1fr; } .ww-posts { grid-template-columns: 1fr 1fr; } .ww-posts--journal .ww-post:first-child { grid-template-columns: 1fr; gap: 0; } .ww-seasons__panel { grid-template-columns: 1fr; } .ww-seasons__img, .ww-seasons__card { grid-column: 1; } .ww-seasons__card { grid-row: 2; margin: -3rem 1rem 0; } .ww-exp__item { grid-template-columns: 1fr; } .ww-exp__item .ww-exp__media, .ww-exp__item .ww-exp__copy { grid-column: 1 !important; order: 0 !important; } .ww-exp__no { top: -2.6rem; font-size: 4.6rem; } .ww-nearby { grid-template-columns: 1fr 1fr; } .ww-modal__story { grid-template-columns: 1fr; } .ww-modal__collage { min-height: 15rem; } .ww-modal__img-b { display: none; } .ww-modal__copy { padding: 2rem 1.5rem; } .ww-article__grid, .ww-article__grid:has(.ww-article__aside) { grid-template-columns: 1fr; } } @media (max-width: 640px) { .ww-logo__mark { width: 40px; height: 40px; } .ww-logo__name { font-size: 1.22rem; } .ww-logo__sub { font-size: .52rem; letter-spacing: .3em; } .ww-hero { min-height: 100svh; } .ww-hero__ctas .ww-btn { flex: 1 1 100%; } .ww-cabins--featured, .ww-cabins--three, .ww-cabins--grid { grid-template-columns: 1fr; } .ww-cabins--featured .ww-cabin:nth-child(even), .ww-cabins--grid .ww-cabin:nth-child(3n+2) { margin-top: 0; } .ww-posts, .ww-nearby { grid-template-columns: 1fr; } .ww-posts .ww-post:nth-child(n) { margin-top: 0; } .ww-comforts__strip { grid-auto-columns: 62%; } .ww-scrap__collage { min-height: 22rem; } .ww-story__badge { width: 96px; height: 96px; left: -.4rem; } .ww-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 8rem; } .ww-mosaic__item--1 { grid-column: span 2; grid-row: span 2; } .ww-mosaic__item--2, .ww-mosaic__item--3 { grid-column: span 1; grid-row: span 1; } .ww-mosaic__item--4, .ww-mosaic__item--5 { grid-column: span 1; grid-row: span 1; } .ww-cabin-know dl { grid-template-columns: 1fr; } .ww-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .ww-footer__news { grid-column: 1 / -1; } .ww-footer__bottom { flex-direction: column; align-items: flex-start; } .ww-drawer--book .ww-drawer__panel, .ww-drawer--favs .ww-drawer__panel { width: 100%; height: auto; max-height: 94svh; margin-top: auto; border-radius: 18px 18px 0 0; transform: translateY(104%); } .ww-drawer--book, .ww-drawer--favs { align-items: flex-end; } .ww-drawer.is-open .ww-drawer__panel { transform: none; } .ww-lightbox { padding: 3.5rem .5rem; } .ww-lightbox__prev, .ww-lightbox__next { top: auto; bottom: .8rem; transform: none; } .ww-gallery__grid { columns: 2 9rem; column-gap: .7rem; } .ww-gallery__item { margin-bottom: .7rem; } } /* ========================================================================== Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js .reveal, .js .reveal--clip { opacity: 1; transform: none; clip-path: none; } .js .reveal--clip img, .ww-hero__slide img { transform: none !important; } .sway, .ww-story__badge svg:first-child, .ww-place__pin { animation: none !important; } [data-parallax] { transform: none !important; } @view-transition { navigation: none; } } @media print { .ww-header, .ww-footer, .ww-drawer, .ww-menu, .ww-booking, .ww-mobile-book, .ww-toast { display: none !important; } .ww-page-hero, .ww-cabin-hero, .ww-hero { min-height: 0; color: var(--charcoal); background: none; } }