Autumn in Vrådal

.straand-booking { --white: #ffffff; --off-white: #f8f6f3; --border-grey: #e2dfd9; --divider: #e2dfd9; --divider-strong: #cfcabd; --text-heading: #312F2D; --text-body: #4a4845; --text-muted: #8a8682; --gold: #C09A5D; --burgundy: #80004D; --burgundy-hover: #9a1a65; --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif; font-family: var(--font-body); -webkit-font-smoothing: antialiased; margin: 0 auto; position: relative; } .straand-booking *, .straand-booking *::before, .straand-booking *::after { box-sizing: border-box; } .straand-booking .booking-form { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr auto; align-items: stretch; margin: 0; padding: 0; border: 1px solid var(--border-grey); } .straand-booking .field { background: var(--white); padding: 18px 22px; position: relative; cursor: pointer; transition: background 0.18s ease; display: block; min-height: 76px; border-radius: 0 !important; } .straand-booking .field + .field { border-left: 1px solid var(--divider); } .straand-booking .field:hover, .straand-booking .field:focus-within, .straand-booking .field.is-open { background: var(--off-white); } .straand-booking .field-label { display: block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 8px; pointer-events: none; } .straand-booking .field-row { display: flex; align-items: center; gap: 10px; pointer-events: none; } .straand-booking .field-icon { flex: 0 0 16px; color: var(--text-muted); } .straand-booking .field-value { font-family: var(--font-heading); font-size: 1rem; font-weight: 400; color: var(--text-heading); line-height: 1.2; } .straand-booking .field-value.is-placeholder { color: var(--text-muted); font-style: italic; font-weight: 300; } .straand-booking .field--date input.datepicker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; color: transparent; border-radius: 0 !important; } .straand-booking .field--select { position: relative; } .straand-booking .field--select .field-row { padding-right: 18px; } .straand-booking .field--select select.native-select { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .straand-booking .field--select .chevron { position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--burgundy); border-bottom: 1.5px solid var(--burgundy); transform: translateY(-25%) rotate(45deg); pointer-events: none; transition: transform 0.2s ease; } .straand-booking .field--select.is-open .chevron { transform: translateY(25%) rotate(-135deg); } .straand-booking .submitButton { background: var(--burgundy); color: #fff !important; border: none; border-radius: 0 !important; padding: 0 40px; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease; -webkit-appearance: none; appearance: none; align-self: stretch; height: auto; min-height: 76px; display: inline-flex; align-items: center; justify-content: center; } .straand-booking .submitButton:hover { background: var(--burgundy-hover); color: #fff !important; } .straand-booking .submitButton:active { transform: translateY(1px); } @media (max-width: 880px) { .straand-booking .booking-form { grid-template-columns: 1fr 1fr; } .straand-booking .field:nth-child(4) { border-top: 1px solid var(--divider); border-left: none; } .straand-booking .field:nth-child(5) { border-top: 1px solid var(--divider); } .straand-booking .submitButton { grid-column: 1 / -1; padding: 18px; min-height: 56px; } } @media (max-width: 480px) { .straand-booking .booking-form { grid-template-columns: 1fr; } .straand-booking .field { border-left: none !important; } .straand-booking .field + .field { border-top: 1px solid var(--divider); } .straand-booking .submitButton { grid-column: auto; } } /* FIXED positioning so sticky parents don't break placement */ .straand-dropdown { position: fixed; background: #ffffff; border: 1px solid #cfcabd; box-shadow: 0 12px 40px rgba(49, 47, 45, 0.12); z-index: 99998; max-height: 280px; overflow-y: auto; display: none; font-family: 'DM Sans', sans-serif; } .straand-dropdown.is-open { display: block; } .straand-dropdown .dropdown-option { padding: 12px 22px; font-family: 'Merriweather', serif; font-size: 0.95rem; color: #312F2D; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .straand-dropdown .dropdown-option:hover { background: #f8f6f3; color: #80004D; } .straand-dropdown .dropdown-option.is-selected { background: rgba(128, 0, 77, 0.08); color: #80004D; } .straand-dropdown .dropdown-option + .dropdown-option { border-top: 1px solid #e2dfd9; } .ui-datepicker.ui-datepicker--straand { font-family: 'DM Sans', sans-serif !important; background: #ffffff !important; border: 1px solid #cfcabd !important; border-radius: 0 !important; padding: 16px !important; box-shadow: 0 12px 40px rgba(49, 47, 45, 0.15) !important; width: 320px !important; z-index: 99999 !important; position: fixed !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-header { background: transparent !important; border: none !important; padding: 0 0 12px !important; margin-bottom: 8px !important; border-bottom: 1px solid #e2dfd9 !important; position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-title { font-family: 'Merriweather', serif !important; font-weight: 400 !important; font-size: 0.95rem !important; color: #312F2D !important; text-transform: capitalize !important; margin: 0 !important; flex: 1 1 auto !important; text-align: center !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-prev, .ui-datepicker.ui-datepicker--straand .ui-datepicker-next { width: 28px !important; height: 28px !important; border-radius: 0 !important; background: #f8f6f3 !important; border: none !important; cursor: pointer !important; top: auto !important; left: auto !important; right: auto !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background 0.2s ease !important; text-indent: 0 !important; overflow: hidden !important; flex: 0 0 28px !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-prev:hover, .ui-datepicker.ui-datepicker--straand .ui-datepicker-next:hover { background: #80004D !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-prev .ui-icon, .ui-datepicker.ui-datepicker--straand .ui-datepicker-next .ui-icon { display: none !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-prev .nav-chevron, .ui-datepicker.ui-datepicker--straand .ui-datepicker-next .nav-chevron { width: 10px !important; height: 10px !important; display: block !important; stroke: #312F2D !important; fill: none !important; pointer-events: none !important; transition: stroke 0.2s ease !important; } .ui-datepicker.ui-datepicker--straand .ui-datepicker-prev:hover .nav-chevron, .ui-datepicker.ui-datepicker--straand .ui-datepicker-next:hover .nav-chevron { stroke: #ffffff !important; } .ui-datepicker.ui-datepicker--straand table { width: 100% !important; border-collapse: collapse !important; font-size: 0.85rem !important; margin: 0 !important; } .ui-datepicker.ui-datepicker--straand th { font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; font-size: 0.65rem !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #80004D !important; padding: 8px 0 !important; background: transparent !important; border: none !important; } .ui-datepicker.ui-datepicker--straand td { padding: 0 !important; border: none !important; background: transparent !important; } .ui-datepicker.ui-datepicker--straand td a, .ui-datepicker.ui-datepicker--straand td span { display: block !important; text-align: center !important; padding: 8px 0 !important; margin: 2px !important; font-family: 'DM Sans', sans-serif !important; font-size: 0.85rem !important; color: #312F2D !important; background: transparent !important; border: none !important; border-radius: 0 !important; transition: all 0.15s ease !important; cursor: pointer !important; text-decoration: none !important; } .ui-datepicker.ui-datepicker--straand td a:hover { background: #f8f6f3 !important; color: #80004D !important; } .ui-datepicker.ui-datepicker--straand td .ui-state-active, .ui-datepicker.ui-datepicker--straand td a.ui-state-active { background: #80004D !important; color: #ffffff !important; font-weight: 600 !important; } .ui-datepicker.ui-datepicker--straand td .ui-state-highlight { background: #f8f6f3 !important; color: #80004D !important; font-weight: 600 !important; } .ui-datepicker.ui-datepicker--straand td.range-start a, .ui-datepicker.ui-datepicker--straand td.range-end a { background: #80004D !important; color: #ffffff !important; font-weight: 600 !important; } .ui-datepicker.ui-datepicker--straand td.range-mid a { background: rgba(128, 0, 77, 0.12) !important; color: #80004D !important; } .ui-datepicker.ui-datepicker--straand td.range-mid a:hover { background: rgba(128, 0, 77, 0.22) !important; color: #80004D !important; } .ui-datepicker.ui-datepicker--straand td.ui-datepicker-unselectable span, .ui-datepicker.ui-datepicker--straand td.ui-datepicker-other-month span { color: #cfcabd !important; cursor: default !important; } (function () { let arrival, departure; const PREV_SVG = ''; const NEXT_SVG = ''; const settings = { closeText: "Lukk", prevText: "", nextText: "", currentText: "I dag", monthNames: ["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"], monthNamesShort: ["jan","feb","mars","apr","mai","jun","juli","aug","sep","okt","nov","des"], dayNames: ["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"], dayNamesShort: ["sø","ma","ti","on","to","fr","lø"], dayNamesMin: ["sø","ma","ti","on","to","fr","lø"], firstDay: 1, dateFormat: "dd/mm/yy", showAnim: "" }; function rangeMarker(date) { if (!arrival || !departure) return [true, "", ""]; const d = moment(date); const a = arrival.clone().startOf('day'); const b = departure.clone().startOf('day'); if (d.isSame(a, 'day')) return [true, "range-start", ""]; if (d.isSame(b, 'day')) return [true, "range-end", ""]; if (d.isAfter(a) && d.isBefore(b)) return [true, "range-mid", ""]; return [true, "", ""]; } function injectChevrons($dp) { $dp.addClass('ui-datepicker--straand'); const $prev = $dp.find('.ui-datepicker-prev'); const $next = $dp.find('.ui-datepicker-next'); if ($prev.length && !$prev.find('.nav-chevron').length) $prev.html(PREV_SVG); if ($next.length && !$next.find('.nav-chevron').length) $next.html(NEXT_SVG); } let observer = null; function watchDatepicker() { const dpEl = document.getElementById('ui-datepicker-div'); if (!dpEl) return; if (observer) observer.disconnect(); observer = new MutationObserver(function () { injectChevrons(jQuery(dpEl)); }); observer.observe(dpEl, { childList: true, subtree: true }); injectChevrons(jQuery(dpEl)); } function positionDatepicker(inputId) { const $input = jQuery('#' + inputId); const $field = $input.closest('.field'); const $dp = jQuery('#ui-datepicker-div'); if (!$field.length || !$dp.length) return; const rect = $field[0].getBoundingClientRect(); $dp.css({ position: 'fixed', top: rect.bottom + 'px', left: rect.left + 'px' }); } let activeDateInputId = null; function decorateOnShow(input, inst) { activeDateInputId = input.id; setTimeout(function () { injectChevrons(jQuery(inst.dpDiv)); watchDatepicker(); positionDatepicker(input.id); }, 0); } function updateDateDisplay($input) { const $field = $input.closest('.field'); const $value = $field.find('.field-value'); const val = $input.val(); if (val) { $value.removeClass('is-placeholder').text(val); } else { $value.addClass('is-placeholder').text($input.attr('data-placeholder') || 'Velg dato'); } } function refreshDatepickers() { jQuery('#arrival, #departure').each(function () { if (jQuery(this).datepicker('widget').is(':visible')) { jQuery(this).datepicker('refresh'); } }); if (activeDateInputId) positionDatepicker(activeDateInputId); } jQuery(function () { jQuery('#arrival').datepicker(Object.assign({ minDate: 0, beforeShow: decorateOnShow, beforeShowDay: rangeMarker, onSelect: function (date) { arrival = moment(date, 'DD/MM/YYYY'); if (!jQuery('#departure').datepicker('getDate') || !departure || departure.clone().subtract(1, 'days').isBefore(arrival)) { departure = arrival.clone().add(1, 'days'); } jQuery('#departure').datepicker('setDate', departure.toDate()); jQuery('#departure').datepicker('option', 'minDate', arrival.clone().add(1, 'days').toDate()); updateDateDisplay(jQuery('#arrival')); updateDateDisplay(jQuery('#departure')); refreshDatepickers(); }, onClose: function (date) { activeDateInputId = null; if ((!date || date.length === 0) && arrival) { setTimeout(function () { jQuery('#arrival').datepicker('setDate', arrival.toDate()); updateDateDisplay(jQuery('#arrival')); }, 1); } } }, settings)); jQuery('#departure').datepicker(Object.assign({ minDate: '+1', beforeShow: decorateOnShow, beforeShowDay: rangeMarker, onSelect: function (date) { departure = moment(date, 'DD/MM/YYYY'); setTimeout(function () { jQuery('#departure').datepicker('setDate', departure.toDate()); updateDateDisplay(jQuery('#departure')); refreshDatepickers(); }, 1); }, onClose: function (date) { activeDateInputId = null; if ((!date || date.length === 0) && arrival) { setTimeout(function () { jQuery('#departure').datepicker('setDate', departure.toDate()); updateDateDisplay(jQuery('#departure')); }, 1); } } }, settings)); jQuery('.straand-booking .field--date').on('click', function (e) { const $input = jQuery(this).find('input.datepicker'); if (!$input.is(e.target)) $input.focus(); }); const $body = jQuery('body'); jQuery('.straand-booking .field--select').each(function () { const $field = jQuery(this); const $select = $field.find('select.native-select'); const $value = $field.find('.field-value'); const fieldId = $select.attr('id'); const $panel = jQuery(''); $select.find('option').each(function () { const $opt = jQuery(this); const $row = jQuery('') .attr('data-value', $opt.attr('value')) .text($opt.text()); if ($opt.is(':selected')) $row.addClass('is-selected'); $panel.append($row); }); $body.append($panel); $value.text($select.find('option:selected').text()); }); function closeAllDropdowns() { jQuery('.straand-booking .field--select').removeClass('is-open'); jQuery('.straand-dropdown').removeClass('is-open'); } function positionPanel($field, $panel) { const rect = $field[0].getBoundingClientRect(); $panel.css({ position: 'fixed', top: rect.bottom + 'px', left: rect.left + 'px', width: rect.width + 'px' }); } jQuery('.straand-booking .field--select').on('click', function (e) { e.stopPropagation(); const $field = jQuery(this); const fieldId = $field.find('select.native-select').attr('id'); const $panel = jQuery('.straand-dropdown[data-for="' + fieldId + '"]'); const wasOpen = $field.hasClass('is-open'); closeAllDropdowns(); if (!wasOpen) { positionPanel($field, $panel); $field.addClass('is-open'); $panel.addClass('is-open'); } }); $body.on('click', '.straand-dropdown .dropdown-option', function (e) { e.stopPropagation(); const $opt = jQuery(this); const $panel = $opt.closest('.straand-dropdown'); const fieldId = $panel.attr('data-for'); const $select = jQuery('#' + fieldId); const $field = $select.closest('.field--select'); const $value = $field.find('.field-value'); $select.val($opt.attr('data-value')).trigger('change'); $value.text($opt.text()); $panel.find('.dropdown-option').removeClass('is-selected'); $opt.addClass('is-selected'); closeAllDropdowns(); }); jQuery(document).on('click', function (e) { if (!jQuery(e.target).closest('.straand-booking .field--select, .straand-dropdown').length) { closeAllDropdowns(); } }); jQuery(document).on('keydown', function (e) { if (e.key === 'Escape') closeAllDropdowns(); }); jQuery(window).on('scroll resize', function () { jQuery('.straand-booking .field--select.is-open').each(function () { const $field = jQuery(this); const fieldId = $field.find('select.native-select').attr('id'); const $panel = jQuery('.straand-dropdown[data-for="' + fieldId + '"]'); if ($panel.hasClass('is-open')) positionPanel($field, $panel); }); if (activeDateInputId) positionDatepicker(activeDateInputId); }); jQuery('#bookingform').submit(function () { const $f = jQuery('#bookingform'); $f.find('input[type="hidden"][data-dynamic-param="true"]').remove(); if (arrival) { $f.append(jQuery('').attr({ type: 'hidden', name: 'arrive', value: arrival.format('YYYY-MM-DD'), 'data-dynamic-param': 'true' })); } if (departure) { $f.append(jQuery('').attr({ type: 'hidden', name: 'depart', value: departure.format('YYYY-MM-DD'), 'data-dynamic-param': 'true' })); } }); }); })();