b888634fd7
Wine red / terracotta / sand palette, Lora + Open Sans self-hosted (Google Fonts link removed for GDPR), water-wheel ornament, restyled hero, booking bar, room cards, gallery and footer. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
334 lines
15 KiB
CSS
334 lines
15 KiB
CSS
/*
|
||
* "Zum alten Wasserrad – L'Antica Ruota" skin for hotel-reservation-theme.
|
||
* Loaded last in header.tpl so it wins over theme and module styles.
|
||
* Palette from www.zum-alten-wasserrad.de: wine red, terracotta orange, warm sand.
|
||
* Fonts are self-hosted (no Google Fonts request, GDPR).
|
||
*/
|
||
|
||
/* ---------- Fonts ---------- */
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
|
||
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
|
||
src: url('../fonts/wasserrad/lora-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
|
||
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
|
||
src: url('../fonts/wasserrad/open-sans-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF; }
|
||
|
||
/* ---------- Tokens ---------- */
|
||
:root {
|
||
--wr-wine: #780808;
|
||
--wr-wine-dark: #4d0404;
|
||
--wr-wine-deep: #2e0202;
|
||
--wr-terra: #d3540f;
|
||
--wr-terra-dark: #b0450b;
|
||
--wr-sand: #f1e2a9;
|
||
--wr-sand-soft: #f7efd2;
|
||
--wr-paper: #fcf8ee;
|
||
--wr-ink: #2b1d14;
|
||
--wr-ink-soft: #5c4a3c;
|
||
--wr-line: #e3d3a4;
|
||
--wr-serif: 'Lora', Georgia, 'Times New Roman', serif;
|
||
--wr-sans: 'Open Sans', 'Segoe UI', Arial, sans-serif;
|
||
--wr-radius: 4px;
|
||
--wr-shadow: 0 12px 30px -12px rgba(46, 2, 2, .35);
|
||
}
|
||
|
||
/* ---------- Base ---------- */
|
||
body,
|
||
body .btn, body .button, body button, body input, body select, body textarea,
|
||
body .form-control, body p, body a, body li, body td, body th, body span, body label, body div {
|
||
font-family: var(--wr-sans);
|
||
}
|
||
body { background: var(--wr-paper); color: var(--wr-ink); }
|
||
body a { color: var(--wr-wine); }
|
||
body a:hover, body a:focus { color: var(--wr-terra); }
|
||
|
||
body h1, body h2, body h3, body h4, body h5,
|
||
body .page-heading, body .page-subheading, body .title_block, body .product-name,
|
||
body .home_block_heading, body .header-hotel-name {
|
||
font-family: var(--wr-serif) !important;
|
||
color: var(--wr-wine);
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
::selection { background: var(--wr-sand); color: var(--wr-wine-deep); }
|
||
|
||
/* ---------- Buttons (replace QloApps blue) ---------- */
|
||
body .btn-default.button, body .button.button-medium, body .button.button-small,
|
||
body .button.exclusive, body .button.exclusive-medium, body .exclusive,
|
||
body button.button, body .btn.button, body .btn-primary,
|
||
body #search_room_submit, body .header-rmsearch-container .btn,
|
||
body .nav_toggle, body .ajax_add_to_cart_button, body .book_now_submit,
|
||
body .htlRoomTypeBookNow, body .btn.btn-book, body #booking_action_block .btn {
|
||
background: var(--wr-terra) !important;
|
||
background-image: none !important;
|
||
border: 1px solid var(--wr-terra-dark) !important;
|
||
color: #fff !important;
|
||
border-radius: var(--wr-radius) !important;
|
||
text-shadow: none !important;
|
||
font-family: var(--wr-sans) !important;
|
||
font-weight: 600 !important;
|
||
letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
|
||
}
|
||
body .btn-default.button:hover, body .button.button-medium:hover, body .button.button-small:hover,
|
||
body .button.exclusive:hover, body .exclusive:hover, body button.button:hover,
|
||
body .btn.button:hover, body .btn-primary:hover, body #search_room_submit:hover,
|
||
body .ajax_add_to_cart_button:hover, body .book_now_submit:hover,
|
||
body .htlRoomTypeBookNow:hover, body .btn.btn-book:hover, body #booking_action_block .btn:hover {
|
||
background: var(--wr-wine) !important;
|
||
border-color: var(--wr-wine-dark) !important;
|
||
box-shadow: var(--wr-shadow);
|
||
transform: translateY(-1px);
|
||
}
|
||
body .button.exclusive-medium.continue, body span.continue.btn {
|
||
background: transparent !important;
|
||
color: var(--wr-wine) !important;
|
||
border: 1px solid var(--wr-wine) !important;
|
||
}
|
||
body .btn:focus-visible, body a:focus-visible, body button:focus-visible, body input:focus-visible {
|
||
outline: 2px solid var(--wr-terra);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ---------- Header / hero ---------- */
|
||
#header .header-top,
|
||
#header .banner + .header-top,
|
||
#header > .nav,
|
||
#header nav {
|
||
font-family: var(--wr-sans);
|
||
}
|
||
/* contact strip above the logo */
|
||
#header #nav-main {
|
||
background: var(--wr-wine-deep) !important;
|
||
border-bottom: 1px solid rgba(241, 226, 169, .18);
|
||
}
|
||
#header #nav-main .contact-item,
|
||
#header #nav-main .contact-item a,
|
||
#header #nav-main .contact-item i { color: var(--wr-sand-soft) !important; font-size: 13px; letter-spacing: .03em; }
|
||
#header #nav-main .contact-item a:hover { color: #fff !important; }
|
||
|
||
#header .header-top {
|
||
background: transparent !important;
|
||
border-bottom: 0;
|
||
}
|
||
/* soft wine veil: dark at the top for the menu, vignette in the middle for the title */
|
||
#header .header-media-layer {
|
||
background:
|
||
radial-gradient(ellipse 60% 38% at 50% 52%, rgba(46, 2, 2, .42) 0%, rgba(46, 2, 2, 0) 100%),
|
||
linear-gradient(180deg, rgba(46, 2, 2, .7) 0%, rgba(46, 2, 2, .18) 22%, rgba(46, 2, 2, .08) 55%, rgba(46, 2, 2, .6) 100%) !important;
|
||
}
|
||
#header_logo img.logo {
|
||
max-height: 96px;
|
||
width: auto;
|
||
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
|
||
}
|
||
#header .header-hotel-name {
|
||
color: #fff !important;
|
||
font-size: clamp(34px, 5.2vw, 64px) !important;
|
||
font-weight: 600 !important;
|
||
line-height: 1.1;
|
||
text-shadow: 0 3px 18px rgba(0, 0, 0, .55);
|
||
}
|
||
#header .header-hotel-name::after {
|
||
content: "Hotel · Ristorante · Annweiler am Trifels";
|
||
display: block;
|
||
margin-top: 14px;
|
||
font-family: var(--wr-sans);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
letter-spacing: .32em;
|
||
text-transform: uppercase;
|
||
color: var(--wr-sand);
|
||
text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
|
||
}
|
||
#header .header-hotel-desc {
|
||
font-family: var(--wr-serif) !important;
|
||
font-style: italic;
|
||
font-size: 19px !important;
|
||
color: #fff !important;
|
||
text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
|
||
max-width: 720px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
#header hr, #header .heasder-desc-hr-first, #header .heasder-desc-hr-second {
|
||
border-color: rgba(241, 226, 169, .7) !important;
|
||
}
|
||
|
||
/* Booking bar in the hero */
|
||
#header .header-rmsearch-container .header-rmsearch-wrapper,
|
||
#header .header-rmsearch-primary {
|
||
background: rgba(252, 248, 238, .97);
|
||
border-top: 4px solid var(--wr-terra);
|
||
border-radius: 0 0 var(--wr-radius) var(--wr-radius);
|
||
box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6);
|
||
}
|
||
#header .header-rmsearch-container .form-control,
|
||
#header .header-rmsearch-container .header-rmsearch-input,
|
||
#header #guest_occupancy {
|
||
border: 1px solid var(--wr-line) !important;
|
||
border-radius: var(--wr-radius) !important;
|
||
background: #fff !important;
|
||
color: var(--wr-ink) !important;
|
||
}
|
||
#header .header-rmsearch-container .form-control:focus { border-color: var(--wr-terra) !important; }
|
||
|
||
/* Top navigation */
|
||
#menu_cont .navigation-link, .wk-nav-style a, #header .nav a {
|
||
font-family: var(--wr-serif) !important;
|
||
color: var(--wr-ink) !important;
|
||
}
|
||
#menu_cont .navigation-link:hover, .wk-nav-style a:hover { color: var(--wr-terra) !important; }
|
||
#header .nav_toggle, #header .nav_toggle:hover { background: transparent !important; border: 0 !important; box-shadow: none; }
|
||
#header .nav_toggle .icon-bar { background: #fff; }
|
||
|
||
body .badge_style, body .ajax_cart_quantity, body .badge.ajax_cart_no_product,
|
||
body .close_navbar { background-color: var(--wr-terra) !important; color: #fff !important; }
|
||
|
||
/* ---------- Home sections ---------- */
|
||
#columns.container { padding-top: 10px; }
|
||
.home_block_container { padding-top: 70px; padding-bottom: 70px; }
|
||
body .home_block_heading {
|
||
font-size: clamp(30px, 3.4vw, 42px) !important;
|
||
font-weight: 600 !important;
|
||
position: relative;
|
||
margin-bottom: 8px;
|
||
}
|
||
/* water-wheel ornament under every section heading */
|
||
body .home_block_heading::after {
|
||
content: "";
|
||
display: block;
|
||
width: 64px;
|
||
height: 46px;
|
||
margin: 14px auto 0;
|
||
background: url('../img/wasserrad/rad.png') center / contain no-repeat;
|
||
opacity: .9;
|
||
}
|
||
body .home_block_description {
|
||
font-family: var(--wr-serif) !important;
|
||
font-style: italic;
|
||
color: var(--wr-ink-soft) !important;
|
||
font-size: 18px !important;
|
||
}
|
||
body .home_block_desc_line, body hr.separator { border-color: var(--wr-terra) !important; background: var(--wr-terra) !important; }
|
||
|
||
/* Rooms */
|
||
#hotelRoomsBlock .home_block_content > div > div,
|
||
#hotelRoomsBlock .room_block, #hotelRoomsBlock .roomblock {
|
||
background: #fff;
|
||
border: 1px solid var(--wr-line);
|
||
border-radius: var(--wr-radius);
|
||
overflow: hidden;
|
||
transition: box-shadow .25s ease, transform .25s ease;
|
||
}
|
||
#hotelRoomsBlock .home_block_content > div > div:hover { box-shadow: var(--wr-shadow); transform: translateY(-3px); }
|
||
#hotelRoomsBlock img { transition: transform .6s ease; }
|
||
#hotelRoomsBlock .home_block_content > div > div:hover img { transform: scale(1.04); }
|
||
#hotelRoomsBlock .rm_name, #hotelRoomsBlock .room_name, #hotelRoomsBlock h4 {
|
||
font-family: var(--wr-serif) !important; color: var(--wr-wine) !important; font-weight: 600;
|
||
}
|
||
#hotelRoomsBlock .rm_amt, #hotelRoomsBlock .price, #hotelRoomsBlock [class*=price] {
|
||
color: var(--wr-terra) !important; font-family: var(--wr-serif) !important; font-weight: 700;
|
||
}
|
||
|
||
/* Interior / gallery on sand */
|
||
#hotelInteriorBlock {
|
||
background: var(--wr-sand-soft);
|
||
box-shadow: 0 0 0 100vmax var(--wr-sand-soft);
|
||
clip-path: inset(0 -100vmax);
|
||
}
|
||
#hotelInteriorBlock img {
|
||
border-radius: var(--wr-radius);
|
||
width: 100%;
|
||
aspect-ratio: 4 / 3;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Amenities */
|
||
#hotelAmenitiesBlock .home_block_heading, #hotelAmenitiesBlock h4 { color: var(--wr-wine); }
|
||
#hotelAmenitiesBlock img { border-radius: var(--wr-radius); }
|
||
#hotelAmenitiesBlock [class*=amenity] h4, #hotelAmenitiesBlock .amenity_heading {
|
||
font-family: var(--wr-serif) !important;
|
||
}
|
||
|
||
/* Testimonials on wine red */
|
||
#hotelTestimonialBlock {
|
||
background: var(--wr-wine);
|
||
box-shadow: 0 0 0 100vmax var(--wr-wine);
|
||
clip-path: inset(0 -100vmax);
|
||
color: var(--wr-sand-soft);
|
||
}
|
||
#hotelTestimonialBlock .home_block_heading,
|
||
#hotelTestimonialBlock .home_block_description,
|
||
#hotelTestimonialBlock p, #hotelTestimonialBlock h4, #hotelTestimonialBlock span {
|
||
color: var(--wr-sand-soft) !important;
|
||
}
|
||
#hotelTestimonialBlock .home_block_heading::after { filter: brightness(1.15); }
|
||
#hotelTestimonialBlock .owl-dots .owl-dot span { background: rgba(241, 226, 169, .35) !important; }
|
||
#hotelTestimonialBlock .owl-dots .owl-dot.active span { background: var(--wr-terra) !important; }
|
||
|
||
/* ---------- Footer ---------- */
|
||
body .footer-container {
|
||
background: var(--wr-wine-deep) !important;
|
||
border-top: 6px solid var(--wr-terra);
|
||
color: rgba(247, 239, 210, .75);
|
||
}
|
||
body .footer-container #footer a,
|
||
body .footer-container #footer p,
|
||
body .footer-container #footer li { color: rgba(247, 239, 210, .8) !important; }
|
||
body .footer-container #footer a:hover { color: var(--wr-sand) !important; }
|
||
body .footer-container #footer h4,
|
||
body .footer-container #footer .h4,
|
||
body .footer-container #footer .footer-explore-heading {
|
||
font-family: var(--wr-serif) !important;
|
||
color: var(--wr-sand) !important;
|
||
text-transform: none;
|
||
font-size: 20px;
|
||
}
|
||
body .footer-container #footer #social_block a,
|
||
body .footer-container #footer .social_block a { background-color: var(--wr-wine) !important; color: var(--wr-sand) !important; }
|
||
body .footer-container #footer .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(241, 226, 169, .3); color: #fff; }
|
||
|
||
/* ---------- Inner pages ---------- */
|
||
body .page-heading {
|
||
border-bottom: 2px solid var(--wr-sand);
|
||
color: var(--wr-wine) !important;
|
||
}
|
||
body .breadcrumb { background: var(--wr-sand-soft); border: 1px solid var(--wr-line); }
|
||
body .breadcrumb a { color: var(--wr-wine); }
|
||
body .price, body .our_price_display, body .room_type_price { color: var(--wr-terra) !important; }
|
||
body .alert-info { background: var(--wr-sand-soft); border-color: var(--wr-line); color: var(--wr-ink); }
|
||
body .nav-tabs > li.active > a, body .nav-tabs > li.active > a:hover { border-top: 3px solid var(--wr-terra); color: var(--wr-wine); }
|
||
body .daterangepicker td.active, body .date-picker-wrapper .day.checked,
|
||
body .date-picker-wrapper .day.real-today, body .ui-datepicker .ui-state-active,
|
||
body .date-picker-wrapper .first-date-selected, body .date-picker-wrapper .last-date-selected {
|
||
background-color: var(--wr-terra) !important; color: #fff !important;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* { transition: none !important; }
|
||
}
|