Book your stay – Straand Hotel
.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'
}));
}
});
});
})();
Adults
2 adults
1 adult
2 adults
3 adults
4 adults
5 adults
6 adults
7 adults
8 adults
9 adults
Children
0 children
0 children
1 child
2 children
3 children
4 children
5 children
6 children
7 children
8 children
9 children
