/* Import Fonts */
@import url('//fonts.googleapis.com/css?family=Montserrat:400,700,900,300%7CPoppins:500,600,700%7COswald:300%7CDosis:400%7CCabin+Sketch:700%7CPlayfair+Display:900%7CRoboto:700,500%7CRouge+Script:400&subset=latin,cyrillic,greek,latin-ext,greek-ext,vietnamese,cyrillic-ext&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url("https://use.typekit.net/plr7zds.css");
/* Root Variables */
:root {
--ud-blue: rgb(47 111 215);
--ud-green: rgb(0 118 57);
--primary: rgb(61 68 137);
--secondary: rgb(47 111 215) !important;
--tertiary: rgb(45 128 84) !important;
--accent: rgba(232, 232, 232, 1);
--title: rgba(10, 40, 60, 1);
--subtitle: rgba(29, 29, 31, 0.4);
--text: rgba(82, 82, 82, 1);
--icon: #1b1b1d;
--title-inverse: #ffffff;
--text-inverse: rgba(255, 255, 255, 0.4);
--bg-primary: #ffffff;
--bg-secondary: #f5f8f8;
--bg-dark: #1e293d;
--bg-dark-accent: #20364c;
--border: #eeeeee;
--shadow: rgba(0, 0, 0, 0.15);
--overlay: rgba(0, 0, 0, 0.5);
--hover: #2f3439;
/* --primary: rgb(25,89,96);*/
--secondary: rgb(191, 131, 170);
--tertiary: rgb(234, 174, 69);
--primary-text-emphasis: #ced2e2;
--secondary-text-emphasis: #BB7FA6;
--tertiary-text-emphasis: #195158;
}
a:not([class]) {
color: var(--primary-text-emphasis);
text-decoration: none !important;
}
a:not([class]):hover {
color:white;
}
.container-component>:first-child, .container-sidebar-left>:first-child, .container-sidebar-right>:first-child, .container-component>*+*, .container-sidebar-left>*+*, .container-sidebar-right>*+* {
margin-top: unset;
}
header.header.container-header.full-width {
display: flex;
}
.site-grid {
background: #162640;
}
main {
background: transparent;
color: white;
padding: 30px;
}
.tours.blue, .tours.blue main {
background: var(--ud-blue);
}
.tours.green, .tours.green main {
background: var(--ud-green);
}
body.green, body.blue {
color: white;
background: transparent !important;
}
/* Global Styles */
body, h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
font-family: "source-arabic-sans", sans-serif;
font-weight: normal !important;
}
/* Grid Layout */
.site-grid {
display: block;
}
@supports (display:grid) {
.blog-items {
grid-gap: 0px;
grid-gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin: 0;
}
}
.daily .items-leading, .expeditions .items-leading {
grid-template-columns: none;
}
body:not(.has-sidebar-right) .site-grid .container-component,
body:not(.has-sidebar-left) .site-grid .container-component {
grid-column-start: 1;
grid-column-end: 7;
}
@media (min-width: 800px) {
header, footer {
display: grid;
gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
/* Typography */
.home h1 {
color: var(--white);
}
.home h2 {
color: white;
}
.home h3 {
text-align: left;
color: white;
}
.home h4 {
text-align: left;
color: var(--secondary);
}
.home h5 {
text-align: left;
color: white;
}
.hero_1 h5 {
font-family:"verveine", sans-serif;
font-size: calc(1.5rem + 3vw);
font-style: normal;
font-weight: 400;
letter-spacing: 0px;
text-align: center;
line-height: calc(1.0rem + 3vw);
}
/* Buttons */
.btn {
border: 1px black solid;
font-size: 1.2rem;
}
.btn-white {
border: 1px solid white;
color: white;
}
.btn-white a {
color: white;
}
.btn-white a:hover {
color: black;
}
.tours .btn.btn-white {
width: 150px;
}
.tours .btn.btn-white:first-child {
/*float:left;*/
margin-right: 5px;
}
td {
padding-right: 10px;
}
.btn-white:hover {
background: white;
color: var(--secondary-text-emphasis);
}
/* Blockquote */
blockquote {
font-style: normal;
line-height: 2vh;
text-align: center;
color: var(--primary);
}
.hero_1 blockquote {
font-family: "fort", sans-serif;
font-weight: 700;
font-style: normal;
/*text-shadow: -6px -6px 0 #022841, 6px -6px 0 #022841, -6px 6px 0 #022841, 6px 6px 0 #022841;*/
font-size: calc(2.5rem + 3vw);
line-height: calc(2rem + 3vw);
letter-spacing: 2.5px;
transform: scaleX(0.8);
color: white;
margin-top: 350px;
/* background: rgb(41, 52, 92, 0.8); */
-webkit-text-stroke: 13px #022841;
paint-order: stroke fill;
}
/* Header */
@media (max-width: 800px) {
header {
padding: 0 7vw;
}
}
header .grid-child:first-child {
grid-column-start: 2;
grid-column-end: 3;
}
.brand-logo img {
padding: 10px 0px 0px 0px;
}
.grid-child.container-nav {
grid-column-start: 3;
grid-column-end: 6;
align-items: center;
}
/* Navigation */
@media (width >= 992px) {
.container-header .mod-menu {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
nav.navbar.navbar-expand-lg {
flex-direction: row-reverse;
width: 100%;
}
.mod-list li {
padding: 1.25em 0 0 0;
}
.mod-menu li a {
font-size: x-large;
}
.mod-menu li a:hover, .footer a:hover {
color: #fff800;
}
.metismenu.mod-menu .metismenu-item>span, .metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button {
color: var(--secondary-rgb);
}
.mod-menu li a:hover, .footer a:hover {
color: var(--secondary-rgb) !important;
}
/* Main Content */
.home .page-header {
display: none;
}
.container-header {
background-color: var(--primary);
background-image: none;
}
li.nav-item {
color: white;
}
.home .site-grid {
/*position: absolute;*/
}
.site-grid {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
@media (min-width: 800px) {
.grid-child.container-component {
margin: 0px;
display: grid;
gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
}
@media (min-width: 720px) {
.grid-child.container-component {
margin: 0px;
}
}
/* Banner */
.container-banner {
background: black;
padding: 0px;
}
.container-banner img {
float: left !important;
width: 50%;
}
@media (max-width: 800px) {
.container-banner img {
width: 100%;
}
}
.container-banner p {
margin-bottom: 0px;
}
.container-banner h2, .container-banner h3, .container-banner h4 {
color: black;
}
/* Main Content Area */
main {
grid-column-start: 2;
grid-column-end: 6;
}
.view-article main {
padding-left: 10vw;
padding-top: calc(50px + 4vw);
padding-right: 10vw;
padding-bottom: calc(50px + 4vw);
}
.home main {
grid-column-start: 1;
grid-column-end: 7;
padding: 0px;
margin: 0;
background: #687da4;
color:white;
}
@media (max-width: 720px) {
main {
grid-column-start: 1;
grid-column-end: 7;
padding: 10px;
}
}
@media (min-width: 800px) {
.wf-columns {
column-count: 2;
column-gap: 50px;
}
}
/* Header and Footer */
.header, .footer {
position: relative;
background-image: url('');
background-color: #022841;
background-size: 10vw;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
background-position-y: 1.5vw;
}
.footer {
margin: 0;
}
@media (max-width: 991.98px) {
.header, .footer {
background-size: 25vw;
}
}
.footer form, .footer div, header div {
z-index: 1;
}
.bottom-a.card {
background: var(--primary);
color: white;
margin: 4rem 0;
min-width: unset;
}
@media (min-width: 1020px) {
.bottom-a.card {
grid-column-end: 4;
grid-column-start: 2;
}
}
div#mod-custom115 {
flex: 1 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
/*.header::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--white);
opacity: .9;
}*/
/* Off-Canvas Menu */
.offcanvas.show {
background-color: white !important;
}
@media (min-width: 992px) {
.offcanvas-start {
width: 100%;
}
}
@media (max-width: 991.98px) {
.offcanvas .metismenu.mod-menu .metismenu-item > ul {
position: relative;
width: 100%;
margin-top: 1rem;
}
.offcanvas .metismenu.mod-menu .mm-collapse {
background-color: transparent;
}
.offcanvas .metismenu.mod-menu .metismenu-item > a {
color: #fff;
}
}
.offcanvas-header > *:only-child {
margin-left: auto;
}
/* Blog Items */
ul.fields-container {
display: none;
}
/* Hero Sections */
.hero_1::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-color: rgb(0 133 178 / 34%);*/
pointer-events: none;
}
/*.blog-item.hero_1,
.hero_2 {
padding: 0%;
margin: 0px;
text-align: center;
color: white;
}
.hero_1 {
grid-column-start: 1;
grid-column-end: 2;
background: var(--tertiary);
}
.hero_2 {
grid-column-start: 2;
grid-column-end: 3;
background: var(--secondary);
}
.hero_1 h3,
.hero_2 h3 {
text-align: center;
color: white;
}
.hero_1 h3 {
margin-top: -160px;
}
.hero_2 h3 {
margin-top: -20px;
}
.hero_1 p,
.hero_2 p {
margin-bottom: 50px;
}
.hero_1 div div:after,
.hero_2 div div:after {
position: relative;
display: inline-block;
background-size: cover;
background-position: center;
}
.hero_1 div div:after {
content: url);
bottom: 118px;
scale: 0.42;
}
.hero_2 div div:after {
content: url();
width: 100px;
height: 100px;
bottom: 50px;
}*/
/* Other Sections */
.welcome {
background: var(--primary);
color: white;
margin: 0px;
padding: 5%;
text-align: center;
}
.faqs {
background: #a5c1da;
}
.base h3 {
}
/* Responsive Adjustments */
@media (max-width: 800px) {
.blog-item.hero_1,
.blog-item.hero_2,
.blog-item.logo,
.blog-item.contact {
grid-column-start: 1;
grid-column-end: 5;
}
}
.blog-item.hero_1 {
position: relative;
height: 1800px;
background-image: url('/images/Karamea_1_Day_Rafting_MG_2194-Edit.jpg');
background-size: cover;
background-attachment: scroll;
background-position: top right 60%;
background-repeat: no-repeat;
filter: saturate(1.3);
}
.blog-item.operations {
}
.at_best {
color: white;
margin-top: -800px;
z-index: 1;
}
.at_best .item-content {
background: var(--secondary);
margin: 6vh 6vw;
padding: 9vh 6vw !important;
}
.at_best h1, .at_best h2, .at_best h3, .at_best h4, .at_best h5 {
color: white;
text-align: left;
text-transform: uppercase;
}
.at_best h2 {
font-family: "verveine", sans-serif;
font-size: 5rem;
font-weight: 400;
text-transform: lowercase;
margin: -15px 0 10px 0;
}
.at_best h3 {
margin: 0 0 50px 0;
}
.at_best h4 {
font-family: 'Montserrat';
}
.operations .item-content {
/*grid-column-start: 2;
grid-column-end: 6;*/
padding: 10%;
}
.tours::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-color: rgba(0, 0, 0, 0.5);*/
pointer-events: none; /* Ensure the overlay does not block clicks */
}
.tours .item-content {
color: white;
padding: 15vh 0vw 10vh 6vw;
font-size: 1.2rem;
}
.tours h1, .tours h2, .tours h3, .tours h4, .tours h5 {
color: white;
text-align: left;
text-transform: uppercase;
}
.tours h2 {
font-family: "verveine", sans-serif;
font-size: 4.5rem;
font-weight: 400;
text-transform: lowercase;
font-size: 1.5em;
}
.tours h3 {
margin: 10px 0px 50px 0px;
font-size: 2.4em;
line-height: 0.85em;
}
.tours h4 {
font-family: 'Montserrat';
font-size: 1rem;
}
@media (min-width: 1020px) {
.daily-raft {
background: white;
grid-column-start: 1 !important;
grid-column-end: 3 !important;
margin: 0px;
}
}
.daily-raft .item-content {
grid-column-start: 3;
grid-column-end: 5;
}
.daily-raft h1, .daily-raft h2, .daily-raft h3, .daily-raft h4, .daily-raft h5 {
color: black;
text-align: left;
text-transform: uppercase;
}
.daily-raft h2 {
font-family: "verveine", sans-serif;
font-size: 4rem;
font-weight: 400;
text-transform: lowercase;
}
.daily-raft h3 {
margin:10px 0 50px 60px;
}
.daily-raft h4 {
font-family: 'Montserrat';
font-size: 1rem;
}
.blog-item.daily_photo {
position: relative;
}
@media (min-width: 1020px) {
.blog-item.daily_photo {
grid-column-start: 2;
grid-column-end: 3;
color: white;
margin: 0px;
padding: 0px;
}
}
.daily_photo .item-content {
grid-column-start: 1 !important;
grid-column-end: 7 !important;
display: inline-block;
justify-content: center;
align-items: center; align-items: center;
right: calc(209px - 11vw);
}
.daily_photo p {
margin-top: 0;
margin-bottom: 0;
}
.daily_photo img {
max-width: unset;
}
.blog-item.daily-raft {
padding: 70px 50px;
}
@media (min-width: 1020px) {
.blog-item.daily-raft.whitewater {
grid-column-start: 1 !important;
grid-column-end: 2 !important;
}
}
@media (min-width: 800px) {
.grid-child.container-bottom-a {
display: grid;
gap: 0px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
background: url('/images/2024-01-05 10.33.07-1-.jpg');
background-position-y: -132px;
background-position-x: center;
padding: 400px 0 0 0;
}
}
.grid-child.container-bottom-a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0); /* Change color and opacity as needed */
pointer-events: none; /* Ensure the overlay does not block clicks */
}
/*--- buller_whitewater_photo ---- */
.blog-item.buller_whitewater_photo {
position: relative;
}
@media (min-width: 1020px) {
.blog-item.buller_whitewater_photo {
color: white;
margin: 0px;
padding: 0px;
}
}
.buller_whitewater_photo .item-content {
display: inline-block;
justify-content: center;
align-items: center; align-items: center;
right: calc(209px - 11vw);
}
.buller_whitewater_photo p {
margin-top: 0;
margin-bottom: 0;
}
.buller_whitewater_photo img {
max-width: unset;
width: auto;
height: 875px;
transform: translateX(-302px);
}
/*--- buller_fun_photo ---- */
.blog-item.buller_fun_photo {
position: relative;
}
@media (min-width: 1020px) {
.blog-item.buller_fun_photo {
color: white;
margin: 0px;
padding: 0px;
}
}
.buller_fun_photo .item-content {
display: inline-block;
justify-content: center;
align-items: center; align-items: center;
right: calc(209px - 11vw);
}
.buller_fun_photo p {
margin-top: 0;
margin-bottom: 0;
}
.buller_fun_photo img {
max-width: unset;
width: auto;
height: 875px;
transform: translateX(-129px);
}
/*--- ---- */
.home .expeditions {
position: relative;
}
@media (min-width: 1020px) {
.home .expeditions {
color: white;
}
}
.expeditions::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background-color: rgba(0, 0, 0, 0.5); Change color and opacity as needed */
pointer-events: none; /* Ensure the overlay does not block clicks */
}
.expeditions .item-content {
position: relative;
background: var(--secondary);
color: white;
padding: 15vh 1vw 15vh 6vw;
}
.items-leading .item-content {
padding: 0px;
}
/*
.expeditions h1, .expeditions h2, .expeditions h3, .expeditions h4, .expeditions h5 {
color: white;
text-align: left;
text-transform: uppercase;
}
/*.expeditions h2 {
font-family: "verveine", sans-serif;
font-size: 4rem;
font-weight: 400;
text-transform: lowercase;
margin: -15px 0 10px 0;
}
.expeditions h3 {
margin: 0 0 50px 0;
}
.expeditions h4 {
font-family: 'Montserrat';
font-size: 1rem;
}
.expedition_photo .item-content {
right: calc(439px - 12vw);
}*/
.tours h3::after, .expeditions h3::after {
content: "";
display: block;
position: relative;
background: url(/images/UlitmateDescents-icon-20241024.svg) no-repeat;
background-size: contain;
width: auto;
height: 22px;
top: 0px;
left: 18px;
}
.blog-item.expedition_photo {
position: relative;
}
@media (min-width: 1020px) {
.blog-item.expedition_photo {
grid-column-start: 2;
grid-column-end: 3;
color: white;
margin: 0px;
padding: 0px;
}
}
.expedition_photo .item-content {
}
.expedition_photo p {
margin: 0px;
}
.expedition_photo img {
max-width: unset;
zoom: 1.3;
}
@media (max-width: 800px) {
.photo img {
transform: revert !important;
width: 100vw !important;
}
.buller-whitewater.tours {
order:0;
}
.buller_whitewater.photo {
order:1;
}
.buller_family.photo {
order:3;
}
.buller-family.tours {
order:2;
}
.expeditions.tours {
order:4;
}
.expedition.photo {
order:5;
}
.base {
order:6;
}
}
.bottom-a.card {
border: none;
padding: 30px;
}
.card-header {
border: none;
}
p.features img {
height: 40px;
}
.fade_in item-content {
opacity: 0;
transform: translateY(50px);
transition: opacity 1.0s ease-in-out, transform 1.0s ease-in-out;
}
.fade_in item-content {
opacity: 1;
transform: translateY(0);
}
.youtube-responsive-container {
margin-bottom: 30px;
}
.youtube-responsive-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.youtube-responsive-container iframe, .youtube-responsive-container object, .youtube-responsive-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
max-width: 100%;
}
.bottom-a.card.footer-main {
grid-column-end: 5;
grid-column-start: 4;
}
.bottom-a.card.footer-admin {
grid-column-end: 6;
grid-column-start: 5;
}
.bottom-a.card.nzra {
grid-column-end: 2;
grid-column-start: 1;
background: white;
}
.accordion-content {
display: none;
}
.accordion-header {
cursor: pointer;
}
.accordion-header.active + .accordion-content {
display: block;
}
h4.accordion-header {
margin: 20px 0 0px 0;
}
h4.accordion-header:after {
font-family: "Font Awesome 6 Free";
content: "\f078"; /* Chevron down - very commonly available */
position: absolute;
right: 1em;
top: 50%;
transform: translateY(-50%);
}
/* Change icon when FAQ is open */
h4.accordion-header:after {
content: "\f068"; /* Minus icon */
}
.photo p {
height: 100%;
margin: 0;
padding: 0;
}
.photo .item-content {
height: 950px;
}
@media (max-width: 800px) {
.photo .item-content {
height: 750px;
}
}
.photo img {
max-width: unset;
width: 100%;
height: 100%;
object-fit: cover;
}
.buller_whitewater.photo img {
object-position: 50% center;
}
.buller_family.photo img {
object-position: 56% center;
}
.expedition.photo img {
object-position: 34% center;
}
.features img {
height: 45px;
margin: 5px 0 15px 0;
filter: invert(1);
opacity: 0.8;
}
.text a.btn.btn-secondary {
background: transparent;
color: white;
border: white solid 1px;
}
.full {
position: relative;
grid-column-start: 1;
grid-column-end: 7;
}
.standard {
grid-column-start: 2;
grid-column-end: 4;
}
.narrow {
grid-column-start: 3;
grid-column-end: 5;
}
.full .item-content {
grid-column-start: 1;
grid-column-end: 7;
}
.standard .item-content {
grid-column-start: 2;
grid-column-end: 6;
}
.narrow .item-content {
grid-column-start: 3;
grid-column-end: 5;
}
.left {
grid-column-start: 1;
grid-column-end: 3;
}
.right {
grid-column-start: 3;
grid-column-end: 5;
}
@media (max-width: 800px) {
.left, .right {
grid-column-start: 1;
grid-column-end: 7;
}
.standard {
grid-column-start: 1;
grid-column-end: 7;
}
.narrow {
grid-column-start: 2;
grid-column-end: 6;
}
}
@media (min-width: 768px) {
.blog-item.text, .blog-item.photo {
height: 950px;
}
.expeditions .blog-item.text, .expeditions .blog-item.photo {
height: unset;
}
}
.tours h2 {
/*display: none;*/
margin-bottom: 70px;
}
.blog-item .item-image {
overflow: unset;
margin: 0;
}
.tours .hero-image img {
width: 100%;
margin: 50px 0 15px 0;
}
.column-break {
break-before: column;
}
.com-content-featured__item.blog-item.base.standard {
text-align: center;
padding: 60px 0;
}
/* ===============================================
BULLER FAMILY RAFTING - CSS STYLESHEET
Modern, responsive design for adventure tourism
=============================================== */
/* ============= BASE STYLES ============= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Color Palette */
--primary-blue: #007bbf;
--secondary-blue: #00a0e6;
--accent-orange: #ff6b35;
--accent-orange-light: #ff8e53;
--light-blue: #f8fbff;
--lighter-blue: #f0f8ff;
--text-dark: #333;
--text-medium: #555;
--white: #ffffff;
--orange-bg: #fff4e6;
--orange-bg-light: #fff8f0;
/* Typography */
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-xs: 0.9rem;
--font-size-sm: 1rem;
--font-size-base: 1.1rem;
--font-size-lg: 1.2rem;
--font-size-xl: 1.3rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
/* Spacing */
--space-xs: 8px;
--space-sm: 15px;
--space-md: 20px;
--space-lg: 30px;
--space-xl: 40px;
--space-2xl: 50px;
--space-3xl: 60px;
--space-4xl: 80px;
/* Borders & Shadows */
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-full: 0px;
--shadow-light: 0 10px 40px rgba(0,0,0,0.05);
--shadow-medium: 0 20px 60px rgba(0,0,0,0.1);
--shadow-button: 0 8px 25px rgba(255,107,53,0.3);
--shadow-button-hover: 0 12px 30px rgba(255,107,53,0.4);
/* Transitions */
--transition-fast: 0.3s ease;
--transition-medium: 0.5s ease;
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
}
.container {
max-width: 1280px;
margin: 0 auto;
/*padding: 0 var(--space-md);*/
padding: 0;
}
/* ============= HERO SECTION ============= */
.hero {
background: linear-gradient(135deg, rgba(0,123,191,0.8), rgba(0,87,138,0.9)),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--white);
padding: 120px 0 var(--space-4xl);
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(0,123,191,0.1), rgba(0,191,165,0.1));
animation: shimmer 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes shimmer {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.7; }
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
animation: fadeInUp 1s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
margin-bottom: var(--space-md);
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
background: linear-gradient(135deg, #fff, #e6f7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.02em;
}
.hero-tagline {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-lg);
opacity: 0.95;
font-weight: 300;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-highlights {
display: flex;
justify-content: center;
gap: var(--space-lg);
margin: var(--space-xl) 0;
flex-wrap: wrap;
}
.highlight-item {
background: rgba(255,255,255,0.15);
padding: var(--space-sm) 25px;
border-radius: var(--radius-full);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
font-weight: 600;
font-size: var(--font-size-sm);
transition: all var(--transition-fast);
white-space: nowrap;
}
.highlight-item:hover {
background: rgba(255,255,255,0.25);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(255,255,255,0.2);
}
/* ============= BUTTONS & CTAs ============= */
.cta-primary {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light));
color: var(--white);
padding: 18px var(--space-xl);
font-size: var(--font-size-lg);
font-weight: 700;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: var(--shadow-button);
text-decoration: none;
display: inline-block;
margin-top: var(--space-md);
text-align: center;
letter-spacing: 0.5px;
}
.cta-primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-button-hover);
background: linear-gradient(135deg, #e55a2b, var(--accent-orange));
}
.cta-primary:active {
transform: translateY(-1px);
}
/* ============= BOOKING PANEL ============= */
.booking-panel {
background: var(--white);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-medium);
margin: -60px auto var(--space-3xl);
position: relative;
z-index: 3;
max-width: 800px;
border: 1px solid rgba(0,123,191,0.1);
backdrop-filter: blur(10px);
}
.booking-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.booking-item {
text-align: center;
padding: var(--space-md);
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
border-radius: var(--radius-md);
border: 2px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.booking-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--secondary-blue), transparent);
transition: left var(--transition-medium);
}
.booking-item:hover {
border-color: rgba(0,123,191,0.3);
transform: translateY(-2px);
box-shadow: var(--shadow-light);
}
.booking-item:hover::before {
left: 100%;
}
.booking-item h3 {
color: var(--primary-blue);
font-size: var(--font-size-base);
margin-bottom: var(--space-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.95rem;
}
.booking-item .value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-dark);
line-height: 1.3;
}
.price-highlight {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue)) !important;
color: var(--white) !important;
border-color: var(--primary-blue) !important;
position: relative;
overflow: hidden;
}
.price-highlight::after {
content: '💰';
position: absolute;
top: 10px;
right: 10px;
font-size: 1.2rem;
opacity: 0.7;
}
.price-highlight h3,
.price-highlight .value {
color: var(--white) !important;
}
/* ============= MAIN CONTENT LAYOUT ============= */
.main-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--space-xs);
margin: var(--space-4xl) 0;
align-items: start;
}
.content-section {
background: var(--white);
padding: var(--space-xl);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.05);
position: relative;
}
.content-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue), var(--accent-orange));
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.content-section h2 {
color: var(--primary-blue);
font-size: var(--font-size-3xl);
margin-bottom: var(--space-md);
font-weight: 700;
position: relative;
}
.content-section h2::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.content-section p {
font-size: var(--font-size-base);
margin-bottom: var(--space-md);
color: var(--text-medium);
line-height: 1.7;
}
/* ============= EXPERIENCE CARDS ============= */
.experience-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
margin: var(--space-xl) 0;
}
.experience-card {
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
padding: 25px;
border-radius: var(--radius-md);
text-align: center;
border: 2px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.experience-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(0,123,191,0.05), transparent);
transform: rotate(45deg);
transition: all var(--transition-medium);
opacity: 0;
}
.experience-card:hover {
border-color: rgba(0,123,191,0.3);
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.experience-card:hover::before {
opacity: 1;
top: -25%;
left: -25%;
}
.trip-card {
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
padding: 25px;
border-radius: var(--radius-md);
text-align: center;
border: 2px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
position: relative;
overflow: hidden;
}
.trip-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(0,123,191,0.05), transparent);
transform: rotate(45deg);
transition: all var(--transition-medium);
opacity: 0;
}
.trip-card:hover {
border-color: rgba(0,123,191,0.3);
transform: translateY(-5px);
box-shadow: var(--shadow-light);
}
.trip-card:hover::before {
opacity: 1;
top: -25%;
left: -25%;
}
.experience-icon {
width: 60px;
height: 60px;
/*background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));*/
border-radius: 50%;
margin: 0 auto var(--space-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--white);
position: relative;
z-index: 1;
transition: all var(--transition-fast);
}
.experience-card:hover .experience-icon {
transform: scale(1.1) rotateY(360deg);
}
.experience-card h3 {
font-size: var(--font-size-base);
margin-bottom: var(--space-xs);
color: var(--primary-blue);
font-weight: 700;
}
.experience-card p {
font-size: var(--font-size-sm);
color: var(--text-medium);
margin: 0;
}
/* ============= SIDEBAR ============= */
.sidebar {
display: flex;
flex-direction: column;
gap: var(--space-lg);
position: sticky;
top: var(--space-md);
}
.sidebar-card {
background: var(--white);
padding: var(--space-lg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.05);
transition: all var(--transition-fast);
}
.sidebar-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.sidebar-card h3 {
font-size: var(--font-size-base);
margin-bottom: var(--space-md);
font-weight: 600;
text-align: center;
}
/* ============= LISTS ============= */
.included-list {
list-style: none;
}
.included-list li {
padding: 12px 0;
border-bottom: 1px solid var(--lighter-blue);
position: relative;
padding-left: var(--space-lg);
transition: all var(--transition-fast);
}
.included-list li:last-child {
border-bottom: none;
}
.included-list li:hover {
background: var(--light-blue);
margin: 0 -15px;
padding-left: calc(var(--space-lg) + 15px);
border-radius: var(--radius-sm);
}
.included-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--secondary-blue);
font-weight: bold;
font-size: 1.2rem;
top: 50%;
transform: translateY(-50%);
}
.bring-list {
list-style: none;
background: linear-gradient(135deg, var(--orange-bg), var(--orange-bg-light));
padding: var(--space-md);
border-radius: var(--radius-md);
margin-top: var(--space-md);
border-left: 4px solid var(--accent-orange);
}
.bring-list li {
padding: var(--space-xs) 0;
padding-left: 25px;
position: relative;
font-size: var(--font-size-sm);
}
.bring-list li::before {
content: '📦';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* ============= FLEXIBLE MASONRY GALLERY ============= */
.gallery {
margin: var(--space-4xl) 0;
}
.gallery h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.gallery h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
/* Masonry-style flexible grid - LIMITED TO MAX 3 COLUMNS */
.gallery-grid.masonry {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-md);
/* Limit to maximum 3 columns */
max-width: 1200px;
margin: 0 auto;
align-items: start;
}
/* For very wide screens, force max 3 columns */
@media (min-width: 1400px) {
.gallery-grid.masonry {
grid-template-columns: repeat(3, 1fr);
max-width: 1200px;
}
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
column-count: 3;
column-width: auto;
}
}
}
/* Pure CSS Masonry fallback using columns */
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
display: block;
column-count: auto;
column-width: 300px;
column-gap: var(--space-md);
column-fill: balance;
/* Limit max columns */
max-width: 1200px;
margin: 0 auto;
}
.gallery-item {
display: inline-block;
width: 100%;
margin-bottom: var(--space-md);
break-inside: avoid;
page-break-inside: avoid;
}
}
/* For browsers that support masonry */
@supports (grid-template-rows: masonry) {
.gallery-grid.masonry {
grid-template-rows: masonry;
align-items: stretch;
}
}
.gallery-item {
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
position: relative;
cursor: pointer;
transition: transform var(--transition-fast);
break-inside: avoid; /* For fallback column layout */
margin-bottom: var(--space-md);
}
.gallery-item:hover {
transform: translateY(-5px);
z-index: 2;
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
/* Style the Joomla caption wrapper */
.gallery-item .wf_caption {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto;
position: relative;
}
/* Gallery images - TRUE MASONRY with natural aspect ratios */
.gallery-item .wf_caption img {
width: 100% !important;
height: auto !important;
/* Remove fixed heights to allow natural aspect ratios */
min-height: unset !important;
max-height: unset !important;
object-fit: unset !important;
display: block !important;
transition: transform var(--transition-fast);
/* Remove lazy loading opacity issues */
opacity: 1 !important;
visibility: visible !important;
}
.gallery-item:hover .wf_caption img {
transform: scale(1.05);
}
/* Caption styling */
.gallery-item .wf_caption span:last-child {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: var(--white) !important;
padding: var(--space-xl) var(--space-md) var(--space-md);
font-weight: 600;
font-size: var(--font-size-sm);
transform: translateY(100%);
transition: transform var(--transition-fast);
display: block !important;
line-height: 1.4;
}
.gallery-item:hover .wf_caption span:last-child {
transform: translateY(0);
}
/* Remove default paragraph margins in gallery */
.gallery-item p {
margin: 0 !important;
padding: 0 !important;
height: auto !important;
display: block !important;
}
/* Fix for HTML comments interfering with layout */
.gallery-grid.masonry::before,
.gallery-grid.masonry::after {
content: none !important;
}
/* Ensure images load properly */
.gallery-item img[loading="lazy"] {
opacity: 1 !important;
transition: none !important;
}
/* Override any conflicting styles */
.gallery-item .wf_caption img[style*="display"] {
display: block !important;
}
.gallery-item .wf_caption img[style*="width"] {
width: 100% !important;
}
/* Responsive breakpoints - 1-3 COLUMNS ONLY */
@media (min-width: 1201px) {
.gallery-grid.masonry {
grid-template-columns: repeat(3, 1fr);
max-width: 1200px;
}
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
column-count: 1;
column-width: auto;
}
}
}
@media (min-width: 901px) and (max-width: 1200px) {
.gallery-grid.masonry {
grid-template-columns: repeat(3, 1fr);
max-width: 1000px;
}
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
column-count: 3;
column-width: auto;
}
}
}
@media (min-width: 601px) and (max-width: 900px) {
.gallery-grid.masonry {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
column-count: 2;
column-width: auto;
column-gap: var(--space-sm);
}
}
.gallery-item .wf_caption span:last-child {
padding: var(--space-md) var(--space-sm) var(--space-sm);
font-size: var(--font-size-xs);
}
}
@media (max-width: 600px) {
.gallery-grid.masonry {
grid-template-columns: 1fr;
gap: var(--space-xs);
}
@supports not (grid-template-rows: masonry) {
.gallery-grid.masonry {
column-count: 1;
column-width: auto;
column-gap: var(--space-xs);
}
}
.gallery-item:hover {
transform: translateY(-2px);
}
}
/* Fallback for browsers without good CSS Grid support */
@supports not (display: grid) {
.gallery-grid.masonry {
column-count: auto;
column-width: 300px;
column-gap: var(--space-md);
}
.gallery-item {
display: inline-block;
width: 100%;
}
}
/* High-density display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.gallery-item .wf_caption img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* ============= FINAL BOOKING SECTION ============= */
.final-booking {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: var(--white);
padding: var(--space-4xl) 0;
text-align: center;
margin: var(--space-4xl) 0 0;
position: relative;
overflow: hidden;
}
.final-booking::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 200px 200px;
animation: float 20s linear infinite;
}
@keyframes float {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-200px) translateY(-200px); }
}
.final-booking h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-lg);
position: relative;
z-index: 1;
}
.final-booking p {
position: relative;
z-index: 1;
}
.booking-form {
max-width: 600px;
margin: 0 auto;
background: rgba(255,255,255,0.1);
padding: var(--space-xl);
border-radius: var(--radius-lg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
position: relative;
z-index: 1;
}
.form-group {
margin-bottom: 25px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: var(--space-xs);
font-weight: 600;
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: var(--space-sm);
border: none;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
background: rgba(255,255,255,0.9);
transition: all var(--transition-fast);
border: 2px solid transparent;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--accent-orange);
box-shadow: 0 0 0 3px rgba(255,107,53,0.2);
transform: translateY(-1px);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
/* ============= RESPONSIVE DESIGN ============= */
@media (max-width: 1024px) {
.container {
padding: 0 var(--space-md);
}
.main-content {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.sidebar {
position: static;
}
}
@media (max-width: 768px) {
.hero {
padding: 100px 0 var(--space-3xl);
background-attachment: scroll;
}
.hero h1 {
font-size: 2.5rem;
}
.hero-tagline {
font-size: var(--font-size-base);
}
.booking-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.booking-panel {
margin: -40px auto var(--space-xl);
padding: var(--space-md);
}
.hero-highlights {
flex-direction: column;
align-items: center;
gap: var(--space-sm);
}
.highlight-item {
padding: 10px var(--space-md);
font-size: var(--font-size-xs);
}
.form-row {
grid-template-columns: 1fr;
}
.experience-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.gallery-grid {
grid-template-columns: 1fr;
}
.content-section,
.sidebar-card {
padding: var(--space-md);
}
.final-booking {
padding: var(--space-3xl) 0;
}
.booking-form {
padding: var(--space-md);
}
}
@media (max-width: 480px) {
.container {
padding: 0 var(--space-sm);
}
.hero h1 {
font-size: 2rem;
margin-bottom: var(--space-sm);
}
.hero-tagline {
font-size: var(--font-size-sm);
margin-bottom: var(--space-md);
}
.booking-item {
padding: var(--space-sm);
}
.booking-item .value {
font-size: var(--font-size-base);
}
.cta-primary {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-sm);
}
.content-section h2 {
font-size: var(--font-size-2xl);
}
.gallery h2,
.final-booking h2 {
font-size: var(--font-size-3xl);
}
}
/* ============= ACCESSIBILITY ============= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus styles for better accessibility */
*:focus-visible {
outline: 2px solid var(--accent-orange);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--primary-blue: #0056b3;
--secondary-blue: #007bb5;
--accent-orange: #cc5529;
--text-dark: #000000;
--text-medium: #333333;
}
.booking-item,
.experience-card,
.sidebar-card {
border-width: 3px;
}
}
/* Print styles */
@media print {
.hero,
.gallery,
.final-booking {
display: none;
}
.booking-panel,
.content-section,
.sidebar-card {
box-shadow: none;
border: 2px solid #000;
}
* {
color: #000 !important;
background: #fff !important;
}
}
.sidebar {
background: transparent;
color: #000000;
margin-bottom: 20px;
padding: 0 0 0 30px;
}
@media (max-width: 1024px) {
.sidebar {
padding: 0 0 0 0px;
}
}
.sidebar ol, .sidebar ul {
padding-left: 1rem;
}
.view-article main {
background: none !important;
padding: 0;
margin: 0;
}
.view-article .blue .intro {
background: var(--ud-blue);
padding: 50px 30px;
}
.view-article .green .intro {
background: var(--ud-green);
padding: 50px 30px;
}
h3.trip-card, h4.trip-card, .trip-card h4 {
font-size: 1.5em;
color: #005097;
padding: 30px;
text-align: center;
line-height: 1.2em;
}
.trip-card ul {
color: #005097;
text-align: left;
}
tr {
vertical-align: top;
}
.expeditions figure img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
/* ===============================================
EXPEDITION TEMPLATE CSS EXTENSIONS
Additional styles for multi-day adventures
=============================================== */
/* ============= EXPEDITION-SPECIFIC MODIFICATIONS ============= */
/* Enhanced booking urgency card */
.experience-card.booking-urgent {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light)) !important;
color: white !important;
border-color: var(--accent-orange) !important;
}
.experience-card.booking-urgent h3,
.experience-card.booking-urgent p {
color: white !important;
}
.experience-card.booking-urgent .experience-icon {
background: rgba(255,255,255,0.2) !important;
color: white !important;
font-size: 24px;
}
/* ============= DETAILED ITINERARY SECTION ============= */
.itinerary-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
border-radius: var(--radius-lg);
}
.itinerary-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.itinerary-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.itinerary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.itinerary-day {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
position: relative;
}
.itinerary-day::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.itinerary-day:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.itinerary-day h3 {
color: var(--primary-blue);
font-size: var(--font-size-2xl);
margin-bottom: var(--space-sm);
font-weight: 700;
text-align: center;
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
padding: var(--space-sm);
border-radius: var(--radius-sm);
margin: -10px -10px var(--space-sm) -10px;
}
.itinerary-day h4 {
color: var(--accent-orange);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 600;
}
.itinerary-day p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= PREPARATION SECTION ============= */
.preparation-section {
margin: var(--space-4xl) 0;
}
.preparation-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.preparation-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.preparation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.prep-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
text-align: center;
}
.prep-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
border-color: rgba(0,123,191,0.3);
}
.prep-card h3 {
color: var(--primary-blue);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
position: relative;
}
.prep-card h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--accent-orange);
border-radius: 1px;
}
.prep-card p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= EXPEDITION HERO TABLE ENHANCEMENTS ============= */
/* Add more expedition-specific features to the intro table */
.intro .triptable tr:has(td:first-child:contains("Group Size")),
.intro .triptable tr:nth-child(5) {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light)) !important;
color: white !important;
}
.intro .triptable tr:nth-child(5) td {
color: white !important;
}
.intro .triptable tr:has(td:first-child:contains("Season")) {
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue)) !important;
border: 2px solid var(--secondary-blue) !important;
}
/* ============= CHALLENGE LEVEL SECTION ============= */
.challenge-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,142,83,0.1));
border-radius: var(--radius-lg);
border: 2px solid var(--accent-orange);
}
.challenge-section h2 {
text-align: center;
color: var(--accent-orange);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.challenge-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.challenge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.challenge-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-medium);
border: 2px solid var(--accent-orange);
transition: all var(--transition-fast);
text-align: center;
position: relative;
overflow: hidden;
}
.challenge-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
}
.challenge-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(255,107,53,0.3);
border-color: var(--accent-orange-light);
}
.challenge-card h3 {
color: var(--accent-orange);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
}
.challenge-card p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= SPECIAL FEATURE SECTION ============= */
.special-feature-section {
margin: var(--space-4xl) 0;
}
.feature-highlight {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: white;
padding: var(--space-4xl) var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.feature-highlight::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.feature-highlight h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-lg);
position: relative;
z-index: 1;
}
.feature-highlight p {
font-size: var(--font-size-lg);
line-height: 1.6;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
/* ============= RESPONSIVE ADJUSTMENTS FOR CHALLENGE SECTION ============= */
@media (max-width: 768px) {
.challenge-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.challenge-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.challenge-card {
padding: var(--space-md);
}
.feature-highlight {
padding: var(--space-xl) var(--space-md);
}
.feature-highlight h2 {
font-size: var(--font-size-3xl);
}
.feature-highlight p {
font-size: var(--font-size-base);
}
}
@media (max-width: 768px) {
.itinerary-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.preparation-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.itinerary-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.itinerary-day,
.prep-card {
padding: var(--space-md);
}
.itinerary-day h3 {
font-size: var(--font-size-lg);
margin: -10px -10px var(--space-sm) -10px;
}
}
@media (max-width: 480px) {
.itinerary-section h2,
.preparation-section h2 {
font-size: var(--font-size-3xl);
}
.experience-card.booking-urgent {
order: -1; /* Move to top on mobile */
}
}
/* ============= EXPEDITION COLOR SCHEMES ============= */
/* Heli-rafting expeditions (high adventure) */
.karamea-heli.tours .intro {
background: linear-gradient(135deg, rgba(0,87,138,0.9), rgba(0,43,69,0.9));
}
/* Family expeditions (welcoming) */
.maruia-family.tours .intro {
background: linear-gradient(135deg, rgba(0,118,57,0.9), rgba(45,128,84,0.9));
}
/* Wilderness expeditions (premium) */
.clarence-wilderness.tours .intro {
background: linear-gradient(135deg, rgba(0,123,191,0.9), rgba(0,87,138,0.9));
}
/* Glamping expeditions (luxury) */
.buller-glamping.tours .intro {
background: linear-gradient(135deg, rgba(47,111,215,0.9), rgba(61,68,137,0.9));
}
/* ============= PRINT STYLES FOR EXPEDITIONS ============= */
@media print {
.itinerary-section,
.preparation-section {
break-inside: avoid;
page-break-inside: avoid;
}
.itinerary-day,
.prep-card {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
.experience-card.booking-urgent {
background: #ddd !important;
color: #000 !important;
}
}
/* ===============================================
EXPEDITION TEMPLATE CSS EXTENSIONS
Additional styles for multi-day adventures
=============================================== */
/* ============= EXPEDITION-SPECIFIC MODIFICATIONS ============= */
/* Enhanced booking urgency card */
.experience-card.booking-urgent {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light)) !important;
color: white !important;
border-color: var(--accent-orange) !important;
}
.experience-card.booking-urgent h3,
.experience-card.booking-urgent p {
color: white !important;
}
.experience-card.booking-urgent .experience-icon {
background: rgba(255,255,255,0.2) !important;
color: white !important;
font-size: 24px;
}
/* ============= DETAILED ITINERARY SECTION ============= */
.itinerary-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
border-radius: var(--radius-lg);
}
.itinerary-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.itinerary-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.itinerary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.itinerary-day {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
position: relative;
}
.itinerary-day::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.itinerary-day:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.itinerary-day h3 {
color: var(--primary-blue);
font-size: var(--font-size-2xl);
margin-bottom: var(--space-sm);
font-weight: 700;
text-align: center;
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
padding: var(--space-sm);
border-radius: var(--radius-sm);
margin: -10px -10px var(--space-sm) -10px;
}
.itinerary-day h4 {
color: var(--accent-orange);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 600;
}
.itinerary-day p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= PREPARATION SECTION ============= */
.preparation-section {
margin: var(--space-4xl) 0;
}
.preparation-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.preparation-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.preparation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-lg);
}
.prep-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
text-align: center;
}
.prep-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
border-color: rgba(0,123,191,0.3);
}
.prep-card h3 {
color: var(--primary-blue);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
position: relative;
}
.prep-card h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--accent-orange);
border-radius: 1px;
}
.prep-card p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= EXPEDITION HERO TABLE ENHANCEMENTS ============= */
/* Add more expedition-specific features to the intro table */
.intro .triptable tr:has(td:first-child:contains("Group Size")),
.intro .triptable tr:nth-child(5) {
background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-light)) !important;
color: white !important;
}
.intro .triptable tr:nth-child(5) td {
color: white !important;
}
.intro .triptable tr:has(td:first-child:contains("Season")) {
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue)) !important;
border: 2px solid var(--secondary-blue) !important;
}
/* Enhanced features row for expeditions */
.intro .triptable .features img {
transition: all var(--transition-fast);
}
/* ============= CHALLENGE LEVEL SECTION ============= */
.challenge-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, rgba(255,107,53,0.1), rgba(255,142,83,0.1));
border-radius: var(--radius-lg);
border: 2px solid var(--accent-orange);
}
.challenge-section h2 {
text-align: center;
color: var(--accent-orange);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.challenge-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.challenge-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
}
.challenge-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-medium);
border: 2px solid var(--accent-orange);
transition: all var(--transition-fast);
text-align: center;
position: relative;
overflow: hidden;
}
.challenge-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
}
.challenge-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(255,107,53,0.3);
border-color: var(--accent-orange-light);
}
.challenge-card h3 {
color: var(--accent-orange);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
}
.challenge-card p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
}
/* ============= SPECIAL FEATURE SECTION ============= */
.special-feature-section {
margin: var(--space-4xl) 0;
}
.feature-highlight {
background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
color: white;
padding: var(--space-4xl) var(--space-xl);
border-radius: var(--radius-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.feature-highlight::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.feature-highlight h2 {
font-size: var(--font-size-4xl);
margin-bottom: var(--space-lg);
position: relative;
z-index: 1;
}
.feature-highlight p {
font-size: var(--font-size-lg);
line-height: 1.6;
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
/* ============= GLAMPING FEATURES SECTION ============= */
.glamping-features-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, var(--light-blue), var(--lighter-blue));
border-radius: var(--radius-lg);
}
.glamping-features-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
}
.glamping-features-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
max-width: 1000px;
margin: 0 auto;
}
.comparison-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
transition: all var(--transition-fast);
border: 2px solid transparent;
}
.comparison-card.glamping {
border-color: var(--accent-orange);
position: relative;
overflow: hidden;
}
.comparison-card.glamping::before {
content: '⭐ RECOMMENDED';
position: absolute;
top: 15px;
right: -30px;
background: var(--accent-orange);
color: white;
padding: 5px 40px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1px;
transform: rotate(45deg);
}
.comparison-card.traditional {
border-color: var(--primary-blue);
opacity: 0.8;
}
.comparison-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.comparison-card h3 {
color: var(--primary-blue);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
text-align: center;
}
.comparison-card.glamping h3 {
color: var(--accent-orange);
}
.comparison-card ul {
list-style: none;
padding: 0;
}
.comparison-card li {
padding: var(--space-xs) 0;
padding-left: 25px;
position: relative;
color: var(--text-medium);
font-size: var(--font-size-sm);
}
.comparison-card.glamping li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent-orange);
font-weight: bold;
font-size: 1.1rem;
}
.comparison-card.traditional li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-blue);
font-weight: bold;
font-size: 1.1rem;
}
/* ============= PHILOSOPHY SECTION ============= */
.philosophy-section {
margin: var(--space-4xl) 0;
padding: var(--space-4xl) 0;
background: linear-gradient(135deg, rgba(0,123,191,0.1), rgba(0,160,230,0.1));
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
}
.philosophy-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: 150px 150px;
animation: float-gentle 30s linear infinite;
pointer-events: none;
}
@keyframes float-gentle {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-150px) translateY(-150px); }
}
.philosophy-section h2 {
text-align: center;
color: var(--primary-blue);
font-size: var(--font-size-4xl);
margin-bottom: var(--space-2xl);
position: relative;
z-index: 1;
}
.philosophy-section h2::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, var(--accent-orange), var(--accent-orange-light));
border-radius: 2px;
}
.philosophy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--space-lg);
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.philosophy-card {
background: white;
padding: var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--shadow-light);
border: 1px solid rgba(0,123,191,0.1);
transition: all var(--transition-fast);
text-align: center;
position: relative;
overflow: hidden;
}
.philosophy-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-blue), var(--secondary-blue));
}
.philosophy-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: rgba(0,123,191,0.3);
}
.philosophy-card h3 {
color: var(--primary-blue);
font-size: var(--font-size-lg);
margin-bottom: var(--space-md);
font-weight: 700;
}
.philosophy-card p {
color: var(--text-medium);
line-height: 1.6;
font-size: var(--font-size-sm);
font-style: italic;
}
/* ============= RESPONSIVE ADJUSTMENTS FOR PHILOSOPHY SECTION ============= */
@media (max-width: 768px) {
.philosophy-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.philosophy-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.philosophy-card {
padding: var(--space-md);
}
.philosophy-section h2 {
font-size: var(--font-size-3xl);
}
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.glamping-features-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.comparison-card {
padding: var(--space-md);
}
.comparison-card.glamping::before {
font-size: 0.6rem;
padding: 3px 30px;
right: -25px;
}
}
@media (max-width: 768px) {
.challenge-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.challenge-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.challenge-card {
padding: var(--space-md);
}
.feature-highlight {
padding: var(--space-xl) var(--space-md);
}
.feature-highlight h2 {
font-size: var(--font-size-3xl);
}
.feature-highlight p {
font-size: var(--font-size-base);
}
}
@media (max-width: 768px) {
.itinerary-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.preparation-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
}
.itinerary-section {
padding: var(--space-xl) var(--space-md);
margin: var(--space-xl) 0;
}
.itinerary-day,
.prep-card {
padding: var(--space-md);
}
.itinerary-day h3 {
font-size: var(--font-size-lg);
margin: -10px -10px var(--space-sm) -10px;
}
}
@media (max-width: 480px) {
.itinerary-section h2,
.preparation-section h2 {
font-size: var(--font-size-3xl);
}
.experience-card.booking-urgent {
order: -1; /* Move to top on mobile */
}
}
/* ============= PRINT STYLES FOR EXPEDITIONS ============= */
@media print {
.itinerary-section,
.preparation-section {
break-inside: avoid;
page-break-inside: avoid;
}
.itinerary-day,
.prep-card {
break-inside: avoid;
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
.experience-card.booking-urgent {
background: #ddd !important;
color: #000 !important;
}
}
.expeditions-hero {
background: var(--ud-blue);
color: white;
padding: 80px 0 60px;
text-align: center;
}
.daily-tours-hero {
background: var(--ud-green);
color: white;
padding: 80px 0 60px;
text-align: center;
}
.expeditions-hero h1 {
font-size: clamp(1.5rem, 3vw, 2rem) !important;
margin-bottom: 20px;
font-weight: 700;
font-family: 'Montserrat';
text-transform: uppercase;
}
.daily-tours-hero h1 {
font-size: clamp(1.5rem, 3vw, 2rem) !important;
margin-bottom: 20px;
font-weight: 700;
font-family: 'Montserrat';
text-transform: uppercase;
}
.hero-tagline {
font-size: 1.3rem;
opacity: 0.95;
max-width: 600px;
margin: 0 auto;
}
h2.hero-tagline {
font-family: "verveine", sans-serif;
font-size: 2rem;
}
.expeditions-intro {
padding: 60px 30px;
background: #f8fbff;
}
.intro-content {
text-align: center;
margin-bottom: 30px;
}
.intro-content h2 {
color: #007bbf;
font-size: 2.5rem;
margin-bottom: 20px;
}
.intro-lead {
font-size: 1.2rem;
color: #555;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.expedition-range {
margin-bottom: 60px;
}
.expedition-range h3 {
text-align: center;
color: #007bbf;
font-size: 2rem;
margin-bottom: 40px;
}
.operating-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.info-card {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}
.info-card h4 {
color: #007bbf;
margin-bottom: 10px;
font-size: 1.1rem;
}
.info-card p {
color: #666;
line-height: 1.5;
margin: 0;
font-size: 0.95rem;
}
.location-overview h2 {
color: #007bbf;
font-size: 2.5rem;
margin-bottom: 20px;
}
.why-murchison {
margin-bottom: 60px;
}
.why-murchison h3 {
text-align: center;
color: #007bbf;
font-size: 2rem;
margin-bottom: 40px;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.benefit-card {
background: white;
padding: 25px;
/* border-radius: 15px; */
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
/* border: 2px solid transparent;*/
}
.benefit-card:hover {
transform: translateY(-3px);
border-color: #007bbf;
}
.benefit-card.rivers { border-left: 4px solid #007bbf; }
.benefit-card.rainfall { border-left: 4px solid #00a057; }
.benefit-card.buller { border-left: 4px solid #ff6b35; }
.benefit-card.gateway { border-left: 4px solid #9c27b0; }
.benefit-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.benefit-card h4 {
color: #007bbf;
font-size: 1.2rem;
margin-bottom: 10px;
}
.benefit-card p {
color: #666;
line-height: 1.5;
font-size: 0.95rem;
}
.find-us {
margin-bottom: 60px;
}
.find-us h3 {
text-align: center;
color: #007bbf;
font-size: 2rem;
margin-bottom: 40px;
}
.location-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.address-card, .directions-card {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.address-card h4, .directions-card h4 {
color: #007bbf;
font-size: 1.3rem;
margin-bottom: 20px;
}
.address-details {
background: #f8fbff;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
line-height: 1.6;
color: #333;
}
.contact-info p {
margin-bottom: 8px;
color: #666;
}
.contact-info a {
color: #007bbf;
text-decoration: none;
font-weight: 600;
}
.contact-info a:hover {
text-decoration: underline;
}
.directions-steps {
display: flex;
flex-direction: column;
gap: 15px;
}
.step {
display: flex;
align-items: flex-start;
gap: 15px;
}
.step-number {
background: #007bbf;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.step p {
color: #666;
margin: 0;
line-height: 1.5;
padding-top: 3px;
}
.base-facilities {
margin-bottom: 60px;
}
.base-facilities h3 {
text-align: center;
color: #007bbf;
font-size: 2rem;
margin-bottom: 40px;
}
.facilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
.facility-card {
background: white;
padding: 20px;
border-radius: 12px;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.08);
transition: transform 0.3s ease;
}
.facility-card:hover {
transform: translateY(-3px);
}
.facility-icon {
font-size: 2rem;
margin-bottom: 12px;
}
.facility-card h4 {
color: #007bbf;
font-size: 1rem;
margin-bottom: 8px;
}
.facility-card p {
color: #666;
font-size: 0.85rem;
line-height: 1.4;
}
/* ============= REGIONAL HIGHLIGHTS CARDS ============= */
.murchison-region {
margin-bottom: 50px;
padding: 60px 0;
background: linear-gradient(135deg, #f8fbff, #f0f8ff);
border-radius: 20px;
}
.murchison-region h3 {
text-align: center;
color: #6b9bd1;
font-size: 2rem;
margin-bottom: 30px;
font-weight: 400;
}
.region-content p {
font-size: 1.1rem;
color: #6b7280;
line-height: 1.6;
text-align: center;
max-width: 800px;
margin: 0 auto 40px;
font-weight: 300;
}
.region-highlights {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
max-width: 1000px;
margin: 0 auto;
}
.highlight-item {
background: rgba(255, 255, 255, 0.8);
padding: 15px 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
font-size: 0.9rem;
color: #6b7280;
font-weight: 400;
transition: all 0.3s ease;
white-space: nowrap;
display: flex;
align-items: center;
gap: 8px;
}
.highlight-item:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* Individual highlight styling */
.highlight-item:nth-child(1) {
border-left: 3px solid #8B5CF6; /* Purple for River Walks */
}
.highlight-item:nth-child(2) {
border-left: 3px solid #F59E0B; /* Amber for Local Cafes */
}
.highlight-item:nth-child(3) {
border-left: 3px solid #EF4444; /* Red for Accommodation */
}
.highlight-item:nth-child(4) {
border-left: 3px solid #10B981; /* Green for Nature Access */
}
/* Icon styling within highlights */
.highlight-item strong {
color: #374151;
font-weight: 600;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.region-highlights {
flex-direction: column;
align-items: center;
gap: 15px;
}
.highlight-item {
width: 100%;
max-width: 300px;
justify-content: center;
white-space: normal;
text-align: center;
}
.murchison-region {
padding: 40px 20px;
}
.murchison-region h3 {
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.highlight-item {
padding: 12px 16px;
font-size: 0.85rem;
}
.region-content p {
font-size: 1rem;
padding: 0 15px;
}
}
.visit-cta {
text-align: center;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.visit-cta h3 {
color: #007bbf;
font-size: 1.8rem;
margin-bottom: 15px;
}
.visit-cta p {
color: #666;
font-size: 1.1rem;
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary:hover {
transform: translateY(-2px);
}
.btn-secondary:hover {
transform: translateY(-2px);
}
@media (max-width: 768px) {
.base-hero {
padding: 60px 0 40px;
}
.location-grid {
grid-template-columns: 1fr;
}
.facilities-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
}
.region-highlights {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.benefits-grid {
grid-template-columns: 1fr;
}
.facilities-grid {
grid-template-columns: 1fr 1fr;
}
}
.base .com-content-category-blog__item.blog-item {
grid-column-start: 1;
grid-column-end: 5;
}
/* ============= FAQ PAGE STYLING ============= */
/* FAQ Page Layout */
.faqs {
background: linear-gradient(135deg, #f8fbff, #f0f8ff);
padding: 60px 0;
min-height: 100vh;
}
.faqs .container {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
/* FAQ Header */
.faqs h1 {
text-align: center;
color: #007bbf;
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin-bottom: 50px;
font-weight: 700;
position: relative;
}
.faqs h1::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #ff6b35, #ff8e53);
margin: 20px auto;
border-radius: 2px;
}
/* FAQ Questions (h4.accordion-header) */
h4.accordion-header {
background: linear-gradient(135deg, #007bbf, #0094d9);
color: white;
padding: 20px 25px;
margin: 20px 0 0 0;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
border: none;
border-radius: 15px 15px 0 0;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
h4.accordion-header:hover {
background: linear-gradient(135deg, #0066a3, #007bbf);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* FAQ Icons */
h4.accordion-header::after {
font-family: "Font Awesome 6 Free";
content: "\f078"; /* chevron down */
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
font-weight: 900;
font-size: 1rem;
transition: transform 0.3s ease;
}
h4.accordion-header.active::after {
content: "\f077"; /* chevron up */
transform: translateY(-50%) rotate(180deg);
}
/* FAQ Answer Content */
.accordion-content {
color: #222;
background: white;
padding: 25px;
border-radius: 0 0 15px 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 123, 191, 0.1);
border-top: none;
margin-bottom: 20px;
display: none;
animation: fadeInUp 0.3s ease-out;
}
.accordion-content.active {
display: block;
}
.accordion-content p {
color: #4b5563;
line-height: 1.6;
margin-bottom: 15px;
font-size: 1rem;
}
.accordion-content p:last-child {
margin-bottom: 0;
}
/* FAQ Answer Lists */
.accordion-content ul {
margin: 15px 0;
padding-left: 25px;
}
.accordion-content li {
color: #4b5563;
margin-bottom: 8px;
line-height: 1.5;
}
/* FAQ Answer Links */
.accordion-content a {
color: #007bbf;
text-decoration: none;
font-weight: 600;
}
.accordion-content a:hover {
text-decoration: underline;
color: #0066a3;
}
/* Strong text in answers */
.accordion-content strong {
color: #007bbf;
font-weight: 700;
}
/* Special Content Boxes */
.grade-definitions {
background: linear-gradient(135deg, #f8fbff, #f0f8ff);
padding: 20px;
border-radius: 10px;
margin: 15px 0;
border-left: 4px solid #007bbf;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.grade-definitions p {
margin: 8px 0;
font-weight: 600;
color: #374151;
}
.grade-definitions strong {
color: #007bbf;
min-width: 80px;
display: inline-block;
}
/* FAQ Categories (optional classes) */
.faq-safety h4.accordion-header {
background: linear-gradient(135deg, #dc2626, #ef4444);
}
.faq-safety h4.accordion-header:hover {
background: linear-gradient(135deg, #b91c1c, #dc2626);
}
.faq-booking h4.accordion-header {
background: linear-gradient(135deg, #059669, #10b981);
}
.faq-booking h4.accordion-header:hover {
background: linear-gradient(135deg, #047857, #059669);
}
.faq-info h4.accordion-header {
background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}
.faq-info h4.accordion-header:hover {
background: linear-gradient(135deg, #6d28d9, #7c3aed);
}
/* Contact CTA Section */
.faq-cta {
background: white;
padding: 40px;
border-radius: 20px;
text-align: center;
margin-top: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(0, 123, 191, 0.1);
}
.faq-cta h3 {
color: #007bbf;
font-size: 1.8rem;
margin-bottom: 15px;
}
.faq-cta p {
color: #6b7280;
font-size: 1.1rem;
margin-bottom: 25px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.faq-cta .btn-primary {
background: linear-gradient(135deg, #ff6b35, #ff8e53);
color: white;
padding: 15px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}
.faq-cta .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.faqs {
padding: 40px 0;
}
.faqs .container {
padding: 0 15px;
}
h4.accordion-header {
padding: 18px 20px;
font-size: 1rem;
}
h4.accordion-header::after {
right: 20px;
}
.accordion-content {
padding: 20px;
}
.faq-cta {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
h4.accordion-header {
padding: 15px;
font-size: 0.95rem;
}
h4.accordion-header::after {
right: 15px;
}
.accordion-content {
padding: 15px;
}
.grade-definitions {
padding: 15px;
}
}
/* Focus states for accessibility */
h4.accordion-header:focus {
outline: 3px solid rgba(255, 107, 53, 0.5);
outline-offset: 2px;
}
/* Print styles */
@media print {
.accordion-content {
display: block !important;
}
h4.accordion-header::after {
display: none;
}
.faq-cta {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* Enquire page main content styles */
.enquire main {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: #dce7f5;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
margin: 20px 0;
}
/* Main container */
.enquire main .container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
max-width: 600px;
width: 100%;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
overflow: hidden;
}
.enquire main .container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
}
/* Header styling */
.enquire main h1 {
font-size: 2.5rem;
margin-bottom: 30px;
color: #2c3e50;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Contact information styling */
.enquire main .contact-info {
display: flex;
flex-direction: column;
gap: 25px;
margin-bottom: 30px;
}
.enquire main .contact-item {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 15px 20px;
background: rgba(102, 126, 234, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
border-left: 4px solid #667eea;
}
.enquire main .contact-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
background: rgba(102, 126, 234, 0.15);
}
.enquire main .contact-item:nth-child(2) {
border-left-color: #764ba2;
}
.enquire main .contact-item:nth-child(3) {
border-left-color: #f093fb;
}
.enquire main .contact-item:last-child {
border-left-color: #f5576c;
}
/* Icon styling */
.enquire main .icon {
width: 24px;
height: 24px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
.enquire main .icon-phone {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23667eea' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
.enquire main .icon-email {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23764ba2' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}
.enquire main .icon-location {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f093fb' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}
/* Contact text styling */
.enquire main .contact-text {
font-size: 1.1rem;
font-weight: 500;
color: #2c3e50;
}
.enquire main .contact-text a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.enquire main .contact-text a:hover {
color: #667eea;
}
/* Welcome message */
.enquire main .welcome-message {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 20px;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 500;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
margin-top: 20px;
}
/* Responsive design */
@media (max-width: 768px) {
.enquire main {
padding: 30px 15px;
min-height: 60vh;
}
.enquire main .container {
padding: 30px 20px;
}
.enquire main h1 {
font-size: 2rem;
margin-bottom: 25px;
}
.enquire main .contact-item {
flex-direction: column;
text-align: center;
gap: 10px;
padding: 20px;
}
.enquire main .contact-text {
font-size: 1rem;
}
.enquire main .welcome-message {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.enquire main {
padding: 20px 10px;
margin: 10px 0;
}
.enquire main h1 {
font-size: 1.8rem;
}
.enquire main .contact-item {
padding: 15px;
}
.enquire main .contact-text {
font-size: 0.95rem;
}
}
/* Animation for page load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.enquire main .container {
animation: fadeInUp 0.8s ease-out;
}
.enquire main .contact-item {
animation: fadeInUp 0.8s ease-out;
}
.enquire main .contact-item:nth-child(1) { animation-delay: 0.1s; }
.enquire main .contact-item:nth-child(2) { animation-delay: 0.2s; }
.enquire main .contact-item:nth-child(3) { animation-delay: 0.3s; }
.enquire main .contact-item:nth-child(4) { animation-delay: 0.4s; }
/* Hover effects */
.enquire main .container:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.booking-widget-wrap {
max-width: 980px; /* your working width */
margin: 0 auto;
width: 100%;
background: #fff; /* make the wrapper white */
padding: 1rem; /* optional: gives breathing room */
border-radius: 6px; /* optional: soften edges */
box-shadow: 0 2px 6px rgba(0,0,0,0.08); /* optional: subtle lift */
}
/* If an iframe gets injected inside */
#CHECKFRONT_WIDGET_01 iframe {
width: 100%;
max-width: 100%;
display: block;
border: 0;
background: #fff; /* ensures iframe interior shows white if transparent */
}
@media (max-width: 480px) {
.wf-columns {
display: block !important;
}
}
/* 1) Make the form a flex container so we can reorder items */
#contact-form {
display: flex;
flex-direction: column; /* stack items (control-groups) vertically */
gap: 1rem;
}
/* 2) Flatten fieldsets so their children become direct flex items */
#contact-form fieldset {
display: contents; /* removes borders & lets children participate in parent layout */
}
/* 3) Hide the second legend so it looks like a single section */
#contact-form fieldset + fieldset > legend {
display: none !important;
}
/* 4) Optional: remove “spacer” line if you don’t want it */
#contact-form .field-spacer { display: none; }
/* 5) Reorder specific fields using :has() to target the right .control-group */
#contact-form .control-group { order: 0; }
/* Core fields */
#contact-form .control-group:has(#jform_contact_name),
#contact-form .control-group:has(#jform_contact_name-lbl) { order: 10; }
#contact-form .control-group:has(#jform_contact_email),
#contact-form .control-group:has(#jform_contact_email-lbl) { order: 20; }
#contact-form .control-group:has(#jform_contact_emailmsg),
#contact-form .control-group:has(#jform_contact_emailmsg-lbl) { order: 30; }
#contact-form .control-group:has(#jform_contact_message),
#contact-form .control-group:has(#jform_contact_message-lbl) { order: 40; }
/* Custom fields (from the second fieldset) */
#contact-form .control-group:has(#jform_com_fields_trips),
#contact-form .control-group:has(#jform_com_fields_trips-lbl) { order: 25; }
#contact-form .control-group:has(#jform_com_fields_organisation),
#contact-form .control-group:has(#jform_com_fields_organisation-lbl) { order: 35; }
#contact-form .control-group:has(#jform_com_fields_contact_method),
#contact-form .control-group:has(#jform_com_fields_contact_method-lbl) { order: 45; }
#contact-form .control-group:has(#jform_com_fields_awareness),
#contact-form .control-group:has(#jform_com_fields_awareness-lbl) { order: 50; }
/* Optional: keep the submit row last */
#contact-form .control-group:has(button[type="submit"]) { order: 1000; }