/* ========================================================================== Berkenye 2621 — design system Editorial "botanical field-journal": warm cream paper, forest green, rowan-berry accent, Fraunces display + Mulish body. ========================================================================== */ /* ---------- tokens ---------- */ :root { --forest: #2C3327; --forest-2: #3B4A33; --moss: #74835E; --moss-deep: #55633F; --sage: #A7B49A; --sage-soft: #DCE3D2; --sage-mist: #E9EDE1; --berry: #C8553D; --berry-deep: #B0432C; --honey: #C39A6B; --honey-soft: #E7D6BC; --petrol: #5E7E8C; --cream: #F7F2E8; --cream-2: #FCF8F0; --paper-line: rgba(44, 51, 39, .14); --ink-70: rgba(44, 51, 39, .72); --ink-55: rgba(44, 51, 39, .56); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-hand: "Caveat", "Segoe Script", cursive; --shadow-sm: 0 2px 10px rgba(44, 51, 39, .07); --shadow-md: 0 14px 40px -18px rgba(44, 51, 39, .35); --shadow-lg: 0 40px 80px -34px rgba(44, 51, 39, .5); --radius: 18px; --radius-lg: 28px; --maxw: 1180px; --gutter: clamp(1.2rem, 4vw, 3rem); --header-h: 76px; /* warm, cozy tone for photography — compression flattened the originals */ --warm: saturate(1.14) sepia(0.12) hue-rotate(-6deg) brightness(1.02) contrast(1.02); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; /* Clip the off-canvas mobile nav at the viewport WITHOUT breaking position:fixed. overflow-x:hidden on makes iOS Safari treat the root as a scroll container, which detaches the fixed header (it scrolls away). overflow-x:clip clips without creating a scroll container, so the sticky header stays put. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { font-family: var(--font-body); color: var(--forest); background: var(--cream); line-height: 1.65; font-size: clamp(1rem, .55vw + .9rem, 1.075rem); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.nav-open { overflow: hidden; } img { display: block; max-width: 100%; height: auto; } /* warm tone on photographic images — applies in the gallery grid and the lightbox too */ .hero-bg img, .welcome-media img, .shot img, .area-bg img, .lb-figure img { filter: var(--warm); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--berry); color: var(--cream); } /* paper grain overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.08; letter-spacing: -.012em; font-variation-settings: "opsz" 40, "SOFT" 30; color: var(--forest); } .display { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.02; letter-spacing: -.02em; } h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.005em; } em, .ital { font-style: italic; } strong { font-weight: 700; } /* ---------- layout ---------- */ .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; } .section { position: relative; padding-block: clamp(4.5rem, 9vw, 8.5rem); z-index: 2; } .section--tight { padding-block: clamp(3.2rem, 6vw, 5rem); } /* section heading kit */ .kicker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: .22em; font-size: .74rem; font-weight: 800; color: var(--berry); } .kicker::before { content: ""; width: 26px; height: 14px; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M20 7c-2-4-7-5-11-3 2 4 7 5 11 3zM20 6c2-4 7-4 10-2-2 4-7 4-10 2z' fill='%23A7B49A'/%3E%3Ccircle cx='14' cy='15' r='4.4' fill='%23C8553D'/%3E%3Ccircle cx='24' cy='15.5' r='4.4' fill='%23C8553D'/%3E%3Ccircle cx='19' cy='19' r='4.4' fill='%23B0432C'/%3E%3C/svg%3E"); } .section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.4rem); position: relative; } .section-head .lead { margin-top: 1rem; font-size: 1.12rem; color: var(--ink-70); max-width: 52ch; } .section-index { position: absolute; top: -.4em; right: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400; color: transparent; -webkit-text-stroke: 1.2px var(--sage); opacity: .55; line-height: 1; pointer-events: none; z-index: -1; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .9rem 1.6rem; border-radius: 100px; font-weight: 700; font-size: .96rem; letter-spacing: .01em; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background-color .3s, color .3s; will-change: transform; } .btn svg { width: 1.05em; height: 1.05em; } .btn--berry { background: var(--berry); color: var(--cream); box-shadow: 0 10px 24px -12px var(--berry); } .btn--berry:hover { background: var(--berry-deep); transform: translateY(-3px); box-shadow: 0 16px 30px -12px var(--berry); } .btn--forest { background: var(--forest); color: var(--cream); } .btn--forest:hover { background: #20271d; transform: translateY(-3px); } .btn--ghost { border: 1.5px solid currentColor; color: var(--forest); } .btn--ghost:hover { background: var(--forest); color: var(--cream); transform: translateY(-3px); } .btn--lg { padding: 1.05rem 2rem; font-size: 1.02rem; } .btn--block { width: 100%; } /* ---------- header / nav ---------- */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; transition: background-color .4s, box-shadow .4s, height .4s; } .site-header.is-scrolled { background: rgba(247, 242, 232, .86); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 var(--paper-line), var(--shadow-sm); } /* light header treatment while at the top, over the hero image */ .site-header:not(.is-scrolled) .brand-name { color: var(--cream); text-shadow: 0 1px 14px rgba(20, 26, 16, .5); } .site-header:not(.is-scrolled) .brand-sub { color: rgba(247, 242, 232, .9); text-shadow: 0 1px 10px rgba(20, 26, 16, .55); } .site-header:not(.is-scrolled) .nav-toggle span, .site-header:not(.is-scrolled) .nav-toggle span::before, .site-header:not(.is-scrolled) .nav-toggle span::after { background: var(--cream); } @media (min-width: 861px) { .site-header:not(.is-scrolled) .navlink { color: var(--cream); text-shadow: 0 1px 12px rgba(20, 26, 16, .5); } .site-header:not(.is-scrolled) .lang-switch { border-color: rgba(247, 242, 232, .5); } .site-header:not(.is-scrolled) .lang-switch button { color: rgba(247, 242, 232, .85); } .site-header:not(.is-scrolled) .lang-switch button.is-active { background: var(--cream); color: var(--forest); } } .header-inner { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: .6rem; flex: none; } .brand img { width: 38px; height: 38px; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.32rem; letter-spacing: -.01em; } .brand-sub { font-size: .58rem; letter-spacing: .34em; text-transform: uppercase; color: var(--berry); font-weight: 800; margin-top: 3px; } .site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.7rem); } .site-nav a.navlink { font-size: .92rem; font-weight: 600; color: var(--forest); position: relative; padding: .3rem 0; } .site-nav a.navlink::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--berry); transition: width .3s ease; } .site-nav a.navlink:hover::after { width: 100%; } .lang-switch { display: inline-flex; align-items: center; gap: .1rem; padding: .2rem; border: 1px solid var(--paper-line); border-radius: 100px; } .lang-switch button { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .32rem .55rem; border-radius: 100px; color: var(--ink-55); transition: background-color .25s, color .25s; } .lang-switch button.is-active { background: var(--forest); color: var(--cream); } .nav-toggle { display: none; width: 46px; height: 46px; border-radius: 12px; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: var(--forest); transform: translate(-50%, -50%); transition: transform .3s, opacity .3s; border-radius: 2px; } .nav-toggle span::before { transform: translate(-50%, -8px); } .nav-toggle span::after { transform: translate(-50%, 6px); } body.nav-open .nav-toggle span { background: transparent; } body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); } body.nav-open .nav-toggle span::after { transform: translate(-50%, -50%) rotate(-45deg); } /* ---------- hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-top: var(--header-h); color: var(--cream); overflow: hidden; isolation: isolate; } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 24s ease-out forwards; } @keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,34,24,.42) 0%, rgba(28,34,24,0) 32%), linear-gradient(0deg, rgba(24,30,20,.86) 4%, rgba(30,38,26,.36) 42%, rgba(30,38,26,.08) 70%); } .hero-inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding-bottom: clamp(2.5rem, 7vh, 6rem); position: relative; } .hero .kicker { color: var(--cream); background: rgba(26, 32, 22, .46); border: 1px solid rgba(247, 242, 232, .26); backdrop-filter: blur(7px); padding: .5rem .95rem; border-radius: 100px; letter-spacing: .2em; box-shadow: 0 6px 20px -12px rgba(20, 26, 16, .8); } .hero .kicker::before { filter: brightness(1.3); } .hero h1 { color: var(--cream); margin: 1rem 0 0; max-width: 16ch; text-shadow: 0 2px 30px rgba(20,26,16,.4); } .hero-sub { margin-top: 1.3rem; max-width: 46ch; font-size: clamp(1.05rem, 1.4vw, 1.28rem); color: rgba(247,242,232,.92); } .hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; } .hero-chips { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .6rem; } .chip { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 100px; font-size: .86rem; font-weight: 700; background: rgba(247,242,232,.14); border: 1px solid rgba(247,242,232,.28); backdrop-filter: blur(6px); color: var(--cream); } .chip svg { width: 1.1em; height: 1.1em; opacity: .9; } .hero-scroll { position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 7vh, 6rem); display: flex; flex-direction: column; align-items: center; gap: .6rem; font-size: .68rem; letter-spacing: .25em; text-transform: uppercase; writing-mode: vertical-rl; color: rgba(247,242,232,.8); } .hero-scroll::after { content: ""; width: 1px; height: 46px; background: linear-gradient(rgba(247,242,232,.8), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%,100% { transform: scaleY(.6); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } } /* stronger overlay on phones so the hero sub-text stays legible over the photo */ @media (max-width: 700px) { .hero::before { background: linear-gradient(180deg, rgba(24,30,20,.5) 0%, rgba(24,30,20,0) 26%), linear-gradient(0deg, rgba(16,22,12,.95) 8%, rgba(20,26,16,.62) 52%, rgba(20,26,16,.26) 82%); } } /* ---------- welcome ---------- */ .welcome-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .welcome-copy p + p { margin-top: 1.1rem; color: var(--ink-70); } .welcome-copy .lead-para { font-size: 1.22rem; color: var(--forest); font-family: var(--font-display); font-weight: 420; line-height: 1.5; } .welcome-hand { font-family: var(--font-hand); color: var(--berry); font-size: 1.8rem; transform: rotate(-4deg); display: inline-block; margin-top: 1.4rem; } .welcome-media { position: relative; } .welcome-media .ph-main { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4/5; object-fit: cover; width: 100%; } .welcome-media .ph-inset { position: absolute; width: 46%; bottom: -8%; left: -7%; border-radius: var(--radius); border: 6px solid var(--cream); box-shadow: var(--shadow-md); aspect-ratio: 1/1; object-fit: cover; } .welcome-media .sprig-deco { position: absolute; top: -9%; right: -6%; width: 42%; opacity: .9; transform: rotate(8deg); } .stats { margin-top: clamp(2.4rem, 5vw, 3.6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--paper-line); padding-top: 2rem; } .stat .n { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3rem); color: var(--moss-deep); line-height: 1; font-weight: 500; } .stat .l { display: block; margin-top: .4rem; font-size: .9rem; color: var(--ink-55); font-weight: 600; } /* ---------- gallery ---------- */ .gallery-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; } .gallery-filter { padding: .5rem 1.05rem; border-radius: 100px; font-size: .86rem; font-weight: 700; border: 1.5px solid var(--paper-line); color: var(--ink-70); transition: all .25s; } .gallery-filter:hover { border-color: var(--moss); color: var(--forest); } .gallery-filter.is-active { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--cream); } .gallery-grid { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 17vw, 205px); grid-auto-flow: dense; } .shot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--sage-soft); box-shadow: var(--shadow-sm); height: 100%; cursor: zoom-in; } .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); } .shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(24,30,20,.62)); opacity: 0; transition: opacity .4s; } .shot figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; color: var(--cream); font-size: .88rem; font-weight: 600; opacity: 0; transform: translateY(8px); transition: all .4s; text-shadow: 0 1px 8px rgba(0,0,0,.4); } .shot:hover img { transform: scale(1.06); } .shot:hover::after, .shot:hover figcaption { opacity: 1; transform: translateY(0); } .shot:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; } .shot.is-hidden { display: none; } .shot--wide { grid-column: span 2; } .shot--tall { grid-row: span 2; } /* lightbox */ .lightbox { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: rgba(20, 25, 16, .92); backdrop-filter: blur(6px); padding: clamp(1rem, 5vw, 4rem); } .lightbox.open { display: grid; animation: fade .3s ease; } @keyframes fade { from { opacity: 0; } } .lb-figure { max-width: min(1100px, 92vw); text-align: center; } .lb-figure img { max-height: 80vh; width: auto; margin-inline: auto; border-radius: 12px; box-shadow: var(--shadow-lg); } .lb-figure figcaption { color: var(--cream); margin-top: 1rem; font-size: .95rem; opacity: .85; } .lb-close, .lb-nav { position: fixed; color: var(--cream); font-size: 2rem; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; transition: background-color .25s, transform .25s; } .lb-close { top: 1.2rem; right: 1.2rem; } .lb-nav { top: 50%; transform: translateY(-50%); background: rgba(247,242,232,.08); } .lb-prev { left: 1rem; } .lb-next { right: 1rem; } .lb-close:hover, .lb-nav:hover { background: rgba(247,242,232,.18); } .lb-nav:hover { transform: translateY(-50%) scale(1.08); } /* ---------- the house / features ---------- */ .house { background: linear-gradient(180deg, var(--cream), var(--sage-mist)); } .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); } .feature { background: var(--cream-2); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.7rem 1.5rem; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; } .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .feature-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--sage-soft); color: var(--moss-deep); margin-bottom: 1.1rem; } .feature-ic svg { width: 24px; height: 24px; } .feature h3 { font-size: 1.18rem; } .feature p { margin-top: .5rem; font-size: .95rem; color: var(--ink-70); } .house-note { margin-top: clamp(2rem, 4vw, 3rem); text-align: center; font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--moss-deep); display: flex; align-items: center; justify-content: center; gap: 1rem; } .house-note::before, .house-note::after { content: ""; height: 1px; flex: 1; max-width: 90px; background: var(--moss); opacity: .4; } /* ---------- area ---------- */ .area { position: relative; color: var(--cream); overflow: hidden; } .area-bg { position: absolute; inset: 0; z-index: -2; } .area-bg img { width: 100%; height: 100%; object-fit: cover; } .area::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(33,41,29,.92), rgba(40,52,38,.74)); } .area .kicker { color: var(--honey-soft); } .area .section-head h2, .area .section-head .lead { color: var(--cream); } .area .lead { color: rgba(247,242,232,.85); } .area .section-index { -webkit-text-stroke-color: rgba(247,242,232,.4); } .area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); } .area-card { background: rgba(247,242,232,.07); border: 1px solid rgba(247,242,232,.16); border-radius: var(--radius); padding: 1.7rem; backdrop-filter: blur(4px); transition: background-color .35s, transform .35s; } .area-card:hover { background: rgba(247,242,232,.12); transform: translateY(-4px); } .area-card .ac-no { font-family: var(--font-display); font-style: italic; color: var(--honey-soft); font-size: 1.4rem; } .area-card h3 { color: var(--cream); margin-top: .3rem; font-size: 1.22rem; } .area-card p { margin-top: .55rem; color: rgba(247,242,232,.8); font-size: .94rem; } /* ---------- rates & booking ---------- */ .booking-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.6rem, 3.5vw, 3.4rem); align-items: start; } .rate-cards { display: grid; gap: 1rem; } .rate-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--cream-2); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 1.4rem 1.6rem; position: relative; overflow: hidden; } .rate-card--weekend { border-color: var(--honey); background: linear-gradient(120deg, var(--cream-2), var(--honey-soft)); } .rate-card .rc-label { font-family: var(--font-display); font-size: 1.3rem; } .rate-card .rc-sub { font-size: .82rem; color: var(--ink-55); font-weight: 600; } .rate-card .rc-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--moss-deep); white-space: nowrap; } .rate-card .rc-price small { font-family: var(--font-body); font-size: .8rem; color: var(--ink-55); font-weight: 700; } .includes { margin-top: 1.6rem; } .includes h4 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; color: var(--berry); font-weight: 800; } .includes ul { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; } .includes li { display: flex; align-items: center; gap: .7rem; font-size: .96rem; color: var(--ink-70); } .includes li svg { width: 18px; height: 18px; color: var(--moss); flex: none; } .booking-card { background: var(--cream-2); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 2.2rem); box-shadow: var(--shadow-md); position: relative; } .booking-card h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.3rem; } .booking-card h3 img { width: 26px; height: 26px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; } .field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; } .field label { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-55); } .field input, .field select, .field textarea { border: 1.5px solid var(--paper-line); border-radius: 12px; padding: .7rem .85rem; background: var(--cream); transition: border-color .25s, box-shadow .25s; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--moss); box-shadow: 0 0 0 3px rgba(116,131,94,.18); } .field textarea { resize: vertical; min-height: 72px; } .booking-summary { margin: 1.2rem 0; border-radius: 14px; background: var(--sage-mist); border: 1px dashed var(--moss); padding: 1.1rem 1.2rem; transition: background-color .3s; } .booking-summary.is-active { background: var(--sage-soft); border-style: solid; } .booking-empty { color: var(--ink-55); font-size: .92rem; text-align: center; margin: .2rem 0; } .sum-dates { display: flex; align-items: center; justify-content: center; gap: .7rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--forest); margin-bottom: .7rem; } .sum-dates svg { color: var(--berry); } .sum-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--ink-70); padding: .18rem 0; } .sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--moss); } .sum-total span:first-child { font-weight: 700; } .sum-total-val { font-family: var(--font-display); font-size: 1.5rem; color: var(--moss-deep); } .sum-total-val small { font-family: var(--font-body); font-size: .78rem; color: var(--ink-55); font-weight: 700; margin-left: .25rem; } .booking-actions { display: flex; gap: .7rem; align-items: center; } .booking-actions .btn--berry { flex: 1; } .booking-flash { margin-top: .8rem; min-height: 1.2em; font-size: .88rem; font-weight: 700; color: var(--berry); opacity: 0; transition: opacity .3s; text-align: center; } .booking-flash.show { opacity: 1; } .booking-success { text-align: center; padding: 1.4rem .5rem .4rem; animation: bkPop .4s cubic-bezier(.2,.8,.2,1); } .booking-success-ic { width: 58px; height: 58px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--sage-soft); color: var(--moss-deep); margin-bottom: 1rem; } .booking-success-ic svg { width: 30px; height: 30px; } .booking-success h4 { font-family: var(--font-display); font-size: 1.5rem; color: var(--forest); } .booking-success p { margin-top: .6rem; color: var(--ink-70); max-width: 38ch; margin-inline: auto; } @keyframes bkPop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .btn.is-busy { opacity: .7; pointer-events: none; } .booking-card.shake { animation: shake .4s; } @keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } } /* ---------- pet toggle ---------- */ .pet-toggle { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; padding: .8rem 1rem; border: 1.5px solid var(--paper-line); border-radius: 14px; background: var(--cream); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .25s, background-color .25s, box-shadow .25s; } .pet-toggle:hover, .pet-toggle:focus-within { border-color: var(--moss); } .pet-toggle-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; } .pet-toggle-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--sage-soft); color: var(--moss-deep); transition: background-color .25s, color .25s; } .pet-toggle-ic svg { width: 22px; height: 22px; } .pet-toggle-text { flex: 1; font-weight: 700; font-size: .98rem; color: var(--forest); } .pet-toggle-check { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--paper-line); border-radius: 8px; background: var(--cream-2); color: transparent; transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s; } .pet-toggle-check svg { width: 16px; height: 16px; } .pet-toggle-input:checked ~ .pet-toggle-ic { background: var(--berry); color: var(--cream); } .pet-toggle-input:checked ~ .pet-toggle-check { background: var(--berry); border-color: var(--berry); color: var(--cream); } .pet-toggle-input:focus-visible ~ .pet-toggle-check { box-shadow: 0 0 0 3px rgba(116,131,94,.3); } .pet-toggle:has(.pet-toggle-input:checked) { border-color: var(--berry); background: linear-gradient(120deg, var(--cream-2), var(--honey-soft)); box-shadow: 0 10px 26px -18px var(--berry); } /* ---------- availability calendar ---------- */ .calendar { border: 1.5px solid var(--paper-line); border-radius: 16px; background: var(--cream); padding: 1rem 1rem 1.1rem; margin-bottom: .9rem; } .cal-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--moss-deep); margin-bottom: .7rem; } .cal-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a9d5b; box-shadow: 0 0 0 0 rgba(74,157,91,.5); animation: calPulse 2s infinite; } @keyframes calPulse { 0% { box-shadow: 0 0 0 0 rgba(74,157,91,.5); } 70% { box-shadow: 0 0 0 7px rgba(74,157,91,0); } 100% { box-shadow: 0 0 0 0 rgba(74,157,91,0); } } .cal-readout { display: flex; align-items: center; gap: .7rem; padding-bottom: .75rem; border-bottom: 1px solid var(--paper-line); } .cal-read { display: flex; flex-direction: column; gap: .12rem; flex: 1; min-width: 0; } .cal-read-l { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-55); } .cal-read-v { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.1; color: var(--ink-55); } .cal-read-v.is-set { color: var(--forest); } .cal-read-arrow { color: var(--berry); flex: none; } .cal-hint { font-size: .8rem; color: var(--ink-55); text-align: center; margin: .7rem 0 .2rem; } .cal-nav { display: flex; justify-content: space-between; align-items: center; } .cal-arrow { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--forest); border: 1.5px solid var(--paper-line); background: var(--cream-2); transition: border-color .2s, color .2s, opacity .2s; } .cal-arrow svg { width: 18px; height: 18px; } .cal-arrow:hover:not(:disabled) { border-color: var(--moss); color: var(--moss-deep); } .cal-arrow:disabled { opacity: .3; cursor: default; } .cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: .2rem; } .cal-month-title { text-align: center; text-transform: capitalize; font-family: var(--font-display); font-size: 1rem; color: var(--forest); margin-bottom: .5rem; } .cal-grid { display: flex; flex-direction: column; } .cal-row { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-weekdays { margin-bottom: .3rem; } .cal-wd { text-align: center; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-55); } .cal-cell { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; font-size: .82rem; font-weight: 600; color: var(--forest); border: none; border-radius: 9px; background: transparent; transition: background-color .15s, color .15s; } .cal-cell span { position: relative; z-index: 1; } .cal-cell:not(.is-past):not(.is-blocked):not(.is-checkin):not(.is-checkout):hover { background: var(--sage-soft); } .cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--moss); } .cal-cell.is-past, .cal-cell.is-blocked { color: var(--ink-55); opacity: .38; pointer-events: none; cursor: default; } .cal-cell.is-blocked { text-decoration: line-through; } .cal-cell.is-in-range, .cal-cell.is-preview { background: var(--sage-mist); border-radius: 0; } .cal-cell.is-checkin, .cal-cell.is-checkout { background: var(--berry); color: var(--cream); border-radius: 9px; z-index: 1; } .cal-cell.is-preview-end { background: var(--moss); color: var(--cream); border-radius: 9px; } .cal-cell:focus-visible { outline: 2px solid var(--berry); outline-offset: -2px; z-index: 2; } @media (max-width: 768px) { .cal-months { grid-template-columns: 1fr; } .cal-month--second { display: none; } } /* ---------- access ---------- */ .access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 3.5vw, 3.4rem); align-items: start; } .access-block + .access-block { margin-top: 1.7rem; } .access-block h3 { display: flex; align-items: center; gap: .6rem; } .access-block h3 svg { width: 22px; height: 22px; color: var(--berry); flex: none; } .access-block p { margin-top: .5rem; color: var(--ink-70); } .tips { margin-top: 1.7rem; background: var(--sage-soft); border-radius: var(--radius); padding: 1.4rem 1.6rem; } .tips h4 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .8rem; } .tips ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .tips li { display: flex; gap: .7rem; font-size: .94rem; color: var(--forest); } .tips li svg { width: 18px; height: 18px; color: var(--moss-deep); flex: none; margin-top: .15rem; } .map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--paper-line); background: var(--cream-2); } .map-card iframe { width: 100%; height: 340px; border: 0; display: block; filter: saturate(.9); } .map-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; flex-wrap: wrap; } .map-addr { font-weight: 700; } .map-addr span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--berry); font-weight: 800; margin-bottom: .2rem; } /* ---------- rules ---------- */ .rules { background: var(--forest); color: var(--cream); text-align: center; } .rules .wrap { max-width: 700px; } .rules .kicker { color: var(--honey-soft); justify-content: center; } .rules h2 { color: var(--cream); margin-top: .8rem; } .rules .soon-badge { display: inline-block; margin: 1.4rem 0; padding: .5rem 1.2rem; border-radius: 100px; border: 1px dashed var(--sage); color: var(--sage); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; } .rules p { color: rgba(247,242,232,.82); max-width: 56ch; margin-inline: auto; } /* ---------- footer ---------- */ .site-footer { position: relative; background: var(--forest); color: var(--cream); padding-top: 4rem; overflow: hidden; } .string-lights { position: absolute; top: 0; left: 0; right: 0; height: 40px; opacity: .85; } .footer-inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; padding-block: 2rem 2.4rem; } .footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(247,242,232,.16); } .footer-brand .brand-name { font-size: 1.6rem; color: var(--cream); } .footer-brand img { width: 44px; height: 44px; margin-bottom: .8rem; } .footer-brand p { color: rgba(247,242,232,.72); margin-top: .8rem; max-width: 34ch; font-family: var(--font-display); font-style: italic; } .footer-col h4 { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; color: var(--honey-soft); font-weight: 800; margin-bottom: 1rem; } .footer-col a, .footer-col p { color: rgba(247,242,232,.82); font-size: .95rem; display: block; padding: .22rem 0; transition: color .25s; } .footer-col a:hover { color: var(--berry); } .footer-contact .fc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(247,242,232,.5); margin-top: .8rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; font-size: .85rem; color: rgba(247,242,232,.6); } .footer-lang { display: inline-flex; gap: .2rem; align-items: center; } .footer-lang button { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(247,242,232,.6); padding: .3rem .5rem; border-radius: 8px; transition: color .25s, background-color .25s; } .footer-lang button.is-active { color: var(--cream); background: rgba(247,242,232,.12); } /* ---------- reveal animations ---------- */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); } [data-reveal].is-in { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: .08s; } [data-reveal][data-delay="2"] { transition-delay: .16s; } [data-reveal][data-delay="3"] { transition-delay: .24s; } [data-reveal][data-delay="4"] { transition-delay: .32s; } [data-reveal][data-delay="5"] { transition-delay: .4s; } [data-reveal][data-delay="6"] { transition-delay: .48s; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .area-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { :root { --header-h: 66px; } .site-nav { position: fixed; inset: var(--header-h) 0 0 auto; width: min(82vw, 340px); background: var(--cream-2); flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1.6rem var(--gutter); transform: translateX(102%); transition: transform .42s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-lg); overflow-y: auto; height: calc(100svh - var(--header-h)); } .site-nav.open { transform: translateX(0); } .site-nav a.navlink { font-size: 1.15rem; padding: .6rem 0; width: 100%; border-bottom: 1px solid var(--paper-line); } .site-nav a.navlink::after { display: none; } .nav-toggle { display: block; margin-left: auto; } .nav-cta { width: 100%; margin-top: .6rem; } .lang-switch { margin-top: 1rem; } .welcome-grid, .booking-grid, .access-grid { grid-template-columns: 1fr; } .welcome-media { max-width: 460px; margin: 1rem auto 2rem; } .welcome-media .ph-inset { width: 40%; } .footer-top { grid-template-columns: 1fr 1fr; } .booking-grid { gap: 2.2rem; } } @media (max-width: 560px) { .rate-card { flex-direction: column; align-items: flex-start; gap: .5rem; } .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 38vw, 180px); gap: .5rem; } .feature-grid { grid-template-columns: 1fr 1fr; } .area-grid { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr 1fr; gap: .5rem; } .field-row { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; gap: 1.6rem; } .shot--tall { grid-row: span 2; } .shot--wide { grid-column: span 2; } .hero-scroll { display: none; } .feature { padding: 1.3rem 1.2rem; } } @media (max-width: 380px) { .gallery-grid { grid-template-columns: 1fr; } .stats .stat .l { font-size: .8rem; } }