Add "Zum alten Wasserrad" skin to hotel-reservation-theme

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>
This commit is contained in:
DanielS
2026-11-11 00:20:04 +01:00
parent e32cd8f6ed
commit b888634fd7
20 changed files with 419 additions and 1 deletions

14
.impeccable/config.json Normal file
View File

@@ -0,0 +1,14 @@
{
"detector": {
"ignoreRules": [],
"ignoreFiles": [],
"ignoreValues": [
{
"rule": "overused-font",
"value": "open sans",
"createdAt": "2026-11-10T23:17:21.694Z",
"reason": "Brand font: www.zum-alten-wasserrad.de renders its h1/h2 in Open Sans (checked via computed styles); the skin mirrors that site"
}
]
}
}

View File

@@ -0,0 +1,333 @@
/*
* "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; }
}

View File

@@ -0,0 +1,35 @@
<?php
/*
* 2007-2017 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2017 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*/
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Location: ../");
exit;

View File

@@ -75,7 +75,8 @@
<!-- by webkul --> <!-- by webkul -->
<!-- <link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'> --> <!-- <link href='https://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'> -->
<!-- <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'> --> <!-- <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic' rel='stylesheet' type='text/css'> -->
<link href='//fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'> {* Google Fonts removed (GDPR); Wasserrad skin self-hosts Lora and Open Sans and is loaded last *}
<link rel="stylesheet" href="{$css_dir|escape:'html':'UTF-8'}wasserrad.css?v=5" type="text/css" media="all" />
</head> </head>
<!-- Built with QloApps --> <!-- Built with QloApps -->
<body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="qloapps {if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {' '|implode:$body_classes}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}" style="{if $page_name == 'index'}height: 100%;{/if}"> <body{if isset($page_name)} id="{$page_name|escape:'html':'UTF-8'}"{/if} class="qloapps {if isset($page_name)}{$page_name|escape:'html':'UTF-8'}{/if}{if isset($body_classes) && $body_classes|@count} {' '|implode:$body_classes}{/if}{if $hide_left_column} hide-left-column{else} show-left-column{/if}{if $hide_right_column} hide-right-column{else} hide-right-column{/if}{if isset($content_only) && $content_only} content_only{/if} lang_{$lang_iso}" style="{if $page_name == 'index'}height: 100%;{/if}">

View File

@@ -0,0 +1,35 @@
<?php
/*
* 2007-2017 PrestaShop
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
* @author PrestaShop SA <contact@prestashop.com>
* @copyright 2007-2017 PrestaShop SA
* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
* International Registered Trademark & Property of PrestaShop SA
*/
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Location: ../");
exit;

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB