:root {
--black: hsl(0 0% 0%);
--white: hsl(0 0% 100%);
--dark-base: hsl(34 5% 20%);
--gold-base: hsl(34 20% 52%);
--blue-base: hsl(214, 20%, 47%); --middle-base: hsl(34 3% 35%);
--color-text-main: var(--black);
--color-text-main-alt: hsl(from var(--color-text-main) h s l / 75%);
--color-text-inverted: var(--white);
--color-text-inverted-alt: hsl(from var(--color-text-inverted) h s l / 75%);
--color-text-link: hsl(214 52% 42%);
--color-text-link-hover: hsl(214 72% 32%);
--color-text-link-visited: hsl(244 52% 52%);
--color-background-main: var(--white);
--color-background-dark: var(--color-dark-0);
--color-border-main: var(--middle-base);
--color-gold-0: var(--gold-base);
--color-gold-1: hsl(from var(--color-gold-0) h s calc(l + 8));
--color-gold-2: hsl(from var(--color-gold-1) h s calc(l + 8));
--color-gold-3: hsl(from var(--color-gold-2) h s calc(l + 8));
--color-gold-4: hsl(from var(--color-gold-3) h s calc(l + 8));
--color-gold-5: hsl(from var(--color-gold-4) h s calc(l + 8));
--color-dark-0: var(--dark-base);
--color-dark-1: hsl(from var(--color-dark-0) h s calc(l + 10));
--color-dark-2: hsl(from var(--color-dark-1) h s calc(l + 10));
--color-dark-3: hsl(from var(--color-dark-2) h s calc(l + 10));
--color-dark-4: hsl(from var(--color-dark-3) h s calc(l + 10));
--color-dark-5: hsl(from var(--color-dark-4) h s calc(l + 10));
--color-dark-6: hsl(from var(--color-dark-5) h s calc(l + 10));
--color-dark-7: hsl(from var(--color-dark-6) h s calc(l + 10));
--color-blue-0: var(--blue-base);
--color-blue-1: hsl(from var(--color-blue-0) h s calc(l + 8));
--color-blue-2: hsl(from var(--color-blue-1) h s calc(l + 8));
--color-blue-3: hsl(from var(--color-blue-2) h s calc(l + 8));
--color-blue-4: hsl(from var(--color-blue-3) h s calc(l + 8));
--color-blue-5: hsl(from var(--color-blue-4) h s calc(l + 8));
--gap-double-double: calc(var(--gap) * 4);
--gap-double: calc(var(--gap) * 2);
--gap: 2rem;
--gap-half: calc(var(--gap) / 2);
--gap-half-half: calc(var(--gap) / 4);
--fx-blur: blur(1.5rem);
--fx-white-transparent-80: hsl(from var(--white) h s l / 80%);
--fx-white-transparent-50: hsl(from var(--white) h s l / 50%);
--fx-dark-transparent-80: hsl(from var(--color-dark-0) h s l / 80%);
--fx-dark-transparent-50: hsl(from var(--color-dark-0) h s l / 50%);
--fx-text-shadow: 1px 2px 3px var(--fx-dark-transparent-50), -1px 0 3px var(--fx-dark-transparent-50);
--bg-image: url(//hipcampers.com/wp-content/themes/hip/assets/grille-large-b.svg);
}  html {
scroll-behavior: smooth;
}
body {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
color: var(--color-text-main);
background: var(--color-background-main);
margin: 0;
padding: 0;
font-size: 110%;
}
svg {
display: block;
}
.fx-dark-transparent {
background-color: var(--fx-dark-transparent-80);
}
.fx-blur {
backdrop-filter: var(--fx-blur);
}
.fx-no-gap {
gap: 0;
}
.hip-btn {
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, var(--fx-white-transparent-50), transparent);
transition: left .3s ease-out;
}
&:hover {
&::before {
left: 100%;
}
}
a {
display: block;
padding: var(--gap-half-half) var(--gap-half);
border-radius: var(--gap-half-half);
color: var(--color-text-inverted);
text-decoration: none;
transition: color .3s ease;
&:hover {
color: var(--color-text-inverted);
}
&:visited {
color: var(--color-text-inverted);
}
}
}
.hip-btn.gold a {
background-color: var(--color-gold-0);
&:hover {
background-color: var(--color-gold-1);
}
}
.hip-btn.blue a {
background-color: var(--color-blue-0);
&:hover {
background-color: var(--color-blue-1);
}
}
.hip-btn.is-style-outline a {
border-width: 1px;
&:hover {
background-color: var(--fx-dark-transparent-80);
}
}
.has-gold-0-background-color {
background-color: var(--color-gold-0);
color: var(--color-text-inverted);
}
.has-gold-1-background-color {
background-color: var(--color-gold-1);
color: var(--color-text-inverted);
}
hr.dark {
--hr-color: var(--fx-dark-transparent-80);
}
hr.light {
--hr-color: var(--fx-white-transparent-80);
}
hr.hip-front {
grid-column: 1 / -1 !important;
border: none;
width: 100%;
height: 3px;
background-image:
linear-gradient(to right,
var(--hr-color), var(--hr-color) 16px,
transparent 16px, transparent 20px,
var(--hr-color) 20px, var(--hr-color) 36px,
transparent 36px, transparent 40px,
var(--hr-color) 40px, var(--hr-color) 56px),
linear-gradient(var(--hr-color)),
linear-gradient(to right,
var(--hr-color), var(--hr-color) 16px,
transparent 16px, transparent 20px,
var(--hr-color) 20px, var(--hr-color) 36px,
transparent 36px, transparent 40px,
var(--hr-color) 40px, var(--hr-color) 56px);
background-position: left, center, right;
background-repeat: no-repeat;
background-size: 56px, calc(100% - 122px), 56px;
} :root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
border-radius: var(--gap-half) !important;
}
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link) {
border-width: 1px !important;
}
.wp-block-list li {
margin-bottom: var(--gap-half);
}
.wp-block-table {
overflow-x: initial !important;
margin: var(--gap) 0 !important;
td {
border: none !important;
padding: var(--gap-half-half) !important;
vertical-align: top;
}
tr {
border-color: var(--fx-dark-transparent-50) !important;
border-bottom: 1px solid;
}
tr:first-child {
border-top: 1px solid;
}
} ::-webkit-scrollbar {
width: .5rem;
height: .5rem;
}
::-webkit-scrollbar-thumb {
background-color: hsl(from var(--black) h s l / 50%);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(from var(--black) h s l / 75%);
}
::-webkit-scrollbar-track {
background-color: transparent;
}  *,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
} p {
line-height: 1.5;
}
h1 {
font-size: 2.22em;
}
h2 {
font-size: 1.99em;
}
h3 {
font-size: 1.66em;
}
h4 {
font-size: 1.33em;
}
h1,
h2,
h3,
h4 {
font-weight: 600;
}
abbr,
acronym {
border-bottom: 1px dotted var(--color-border-main);
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
.small {
font-size: 85%;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace;
font-size: inherit;
}
pre code,
p>code,
li>code,
dd>code,
td>code {
background: hsl(from var(--color-dark-5) h s calc(l + 20));
word-wrap: break-word;
box-decoration-break: clone;
padding: .2em;
border-radius: .2em;
}
pre code {
padding: var(--gap-half-half);
}
sub,
sup {
font-size: 85%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
button,
select {
text-transform: none;
}
textarea {
overflow: auto;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
ol,
ul {
padding-left: 1.5em;
margin: 0;
line-height: 1.5;
}  #masthead {
display: flex;
justify-content: space-between;
gap: var(--gap-double);
}
.site-header .logo {
width: auto;
height: 1.5em;
fill: var(--color-text-inverted);
}
.site-header .logo-small {
display: none;
}
.header-icon {
width: 1.5em;
aspect-ratio: 1 / 1;
fill: var(--color-text-inverted);
}
#main-menu-zone {
display: flex;
align-items: start;
}
#context-menu-zone {
display: flex;
align-items: baseline;
flex-direction: row;
gap: var(--gap-half-half);
.hip-btn {
a {
padding: .15rem .6rem;
}
}
}
#language-menu-zone {
display: flex;
flex-direction: column;
gap: var(--gap-half);
}
#masthead input[type=checkbox],
#footer-navigation-zone input[type=checkbox],
#main-navigation-toggle~label.close-icon,
#main-navigation-toggle:checked~label.hamburger-icon,
#context-menu-zone .menu-toggle.clickable,
#language-navigation,
#footer-navigation-zone .menu-toggle.clickable {
display: none;
}
#main-navigation-toggle~label.hamburger-icon,
#main-navigation-toggle:checked~label.close-icon,
#language-navigation-toggle:checked~#language-navigation,
#context-navigation-toggle:checked~#context-navigation {
display: flex;
}
.menu-toggle {
display: flex;
align-items: center;
justify-content: start;
gap: var(--gap-half-half);
color: var(--color-text-inverted);
}
.menu-toggle.not-clickable {
color: unset;
}
label.menu-toggle {
cursor: pointer;
} #footer-navigation-zone {
.wrapper {
display: flex;
gap: var(--gap);
transition: transform .3s ease;
}
.arrow {
width: 2rem;
aspect-ratio: 1 / 1;
fill: var(--color-text-inverted);
}
.arrow.left {
transform: rotate(180deg);
}
.primary-pane {
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: var(--gap);
padding: var(--gap-half) 0;
ul.menu {
gap: var(--gap);
}
.menu-item-smaller {
font-size: smaller;
}
.menu-item-larger {
font-size: x-large;
}
.menu-item.expanded {
display: none;
}
}
.secondary-pane {
flex: 1 1 auto;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
overflow-x: auto;
gap: var(--gap);
.menu-toggle.clickable {
padding: var(--gap-half-half);
}
.camper-tile {
flex: 0 1 22em;
padding: var(--gap-half);
border-radius: var(--gap-half);
transition: background-color .25s;
display: flex;
flex-direction: column;
gap: var(--gap-half);
p,
h3 {
margin: 0;
}
img {
aspect-ratio: 4 / 3;
object-fit: contain;
border-radius: var(--gap-half);
}
}
.camper-tile.draft {
opacity: .66;
}
a {
display: contents;
}
a:hover .camper-tile {
background-color: var(--color-text-main-alt);
}
}
} footer {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.site-footer .logo {
fill: var(--color-dark-0);
}
.site-info {
display: flex;
justify-content: space-between;
align-items: center;
font-size: small;
color: var(--color-text-inverted-alt);
* {
margin: 0;
}
}
:where(.wp-block-social-links.is-style-logos-only) * {
color: var(--color-text-inverted-alt);
} ul.menu {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
gap: var(--gap-half);
* {
transition: all .25s ease;
transition-property: color, background-color;
}
}
ul.menu.vertical {
flex-direction: column;
align-content: flex-start;
}
ul.menu .menu-item-larger {
font-size: x-large;
}
ul.menu .menu-item-smaller {
font-size: small;
}
nav#language-navigation {
text-align: end;
justify-content: flex-end;
} #bg-fx {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99;
transform-origin: top;
transform: scaleY(0);
transition: .2s ease-out;
}
#masthead,
#footer-navigation-zone,
#colophon {
color: var(--color-text-inverted-alt);
padding: var(--gap);
}
#footer-navigation-zone,
#colophon {
background-color: var(--black);
}
#masthead {
padding: var(--gap-half) var(--gap);
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
body:has(#main-navigation-toggle:checked, #context-navigation-toggle:checked, #language-navigation-toggle:checked) {
#masthead {
background-color: unset;
backdrop-filter: unset;
}
#bg-fx {
transform: scaleY(1);
}
}
body:has(#main-navigation-toggle:checked) {
#footer-navigation-zone {
position: fixed;
top: 4em;
background-color: unset;
z-index: 101;
padding-top: 0;
}
} embed,
iframe,
object {
max-width: 100%;
}
img {
height: auto;
max-width: 100%;
}
figure {
margin: 0;
} a {
color: var(--color-text-link);
word-break: break-word;
}
a:visited {
color: var(--color-text-link-visited);
}
a:hover,
a:focus,
a:active {
color: var(--color-text-link-hover);
}
a:focus {
outline: thin dotted;
}
a:hover,
a:active {
outline: 0;
}
#footer-navigation-zone .secondary-pane a,
#footer-navigation-zone .secondary-pane a:visited,
ul.menu li a,
ul.menu li a:visited {
color: var(--color-text-inverted);
text-decoration: none;
}
ul.menu li a:hover,
ul.menu li a:active {
color: var(--color-text-inverted-alt);
text-decoration: none;
} form {
button,
label,
input,
textarea,
select,
progress,
meter {
display: block;
font-family: inherit;
font-size: 100%;
margin: 0;
box-sizing: border-box;
padding: var(--gap-half-half);
transition: all .33s ease;
}
input,
textarea {
border-radius: var(--gap-half-half);
border: 1px solid var(--color-dark-5);
appearance: none;
}
textarea {
width: 100%;
overflow: auto;
}
label {
font-size: .75rem;
font-weight: 600;
padding: var(--gap-half-half) 0;
}
input:focus,
textarea:focus,
input:focus-visible,
textarea:focus-visible,
input:active,
textarea:active {
box-shadow: inset 0 0rem 1rem var(--color-blue-5);
outline: 1px solid var(--color-blue-2);
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
border-radius: var(--gap-half-half);
background-color: var(--color-blue-0);
color: var(--color-text-inverted);
line-height: 1;
padding: var(--gap-half) var(--gap);
cursor: pointer;
border: none;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: var(--color-blue-1);
}
button:active,
button:focus,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
background-color: var(--color-blue-1);
}
}   .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
} #primary[tabindex="-1"]:focus {
outline: 0;
} .alignleft { float: left; margin-right: 1.5em;
margin-bottom: 1.5em;
}
.alignright { float: right; margin-left: 1.5em;
margin-bottom: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5em;
} body:not(.page-template-page-camper) {
background:
var(--bg-image),
linear-gradient(to bottom, var(--color-dark-0), var(--color-dark-1));
background-attachment: fixed;
main {
padding: 5vh 0 0 0;
display: flex;
justify-content: center;
}
section>.wp-block-group__inner-container {
max-width: 64em;
}
section.wp-block-group {
padding: var(--gap);
}
.group-bg {
background-color: var(--color-background-main);
}
.gold-3-bg {
background-color: var(--color-gold-3);
}
article header {
padding: 0 var(--gap);
color: var(--color-text-inverted);
text-shadow: var(--fx-text-shadow);
.subtitle {
font-size: larger;
max-width: 50em;
}
}
}
body.bg-image {
background-size: cover;
background-position: center;
main {
padding: 50vh 0 0 0;
}
}
.radius-top-left {
border-top-left-radius: var(--gap);
}
.radius-top-right {
border-top-right-radius: var(--gap);
}
.radius-bottom-right {
border-bottom-right-radius: var(--gap);
}
.radius-bottom-left {
border-bottom-left-radius: var(--gap);
}
:where(.is-layout-grid) {
gap: var(--gap) !important;
}
.flex-container-1-1>.wp-block-group__inner-container {
display: flex;
gap: var(--gap);
>* {
flex: 1 1 100%;
}
}
.grid-container>.wp-block-group__inner-container {
display: grid;
gap: 0 var(--gap);
>* {
grid-column: 2;
}
>.detached-title {
grid-column: 1;
grid-row: span 3;
}
}
.grid-container.one-one>.wp-block-group__inner-container {
grid-template-columns: 1fr 1fr;
}
.grid-container.one-two>.wp-block-group__inner-container {
grid-template-columns: 1fr 2fr;
}
.grid-container.two-one>.wp-block-group__inner-container {
grid-template-columns: 2fr 1fr;
} body.error404 {
background-image: url(//hipcampers.com/wp-content/uploads/2025/06/Hip-with-a-boat-at-sea-1.jpg);
background-attachment: fixed;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
color: var(--color-text-inverted);
text-shadow: var(--fx-text-shadow);
section.error-404 {
display: grid;
grid-template-columns: minmax(var(--gap), auto) repeat(4, minmax(0, 32em)) minmax(var(--gap), auto);
grid-template-rows: minmax(var(--gap), auto) repeat(4, minmax(0, 32em)) minmax(var(--gap), auto);
height: 100vh;
header {
grid-column: 2 / 5;
grid-row: 2 / 3;
}
section.wp-block-group {
padding: 0;
grid-column: 2 / 4;
grid-row: 3 / 6;
}
}
} @keyframes fx-shine {
0% {
mask-position: right;
}
100% {
mask-position: left;
}
}
body.page-template-page-camper {
main {
padding: 0;
background-image: linear-gradient(to bottom, var(--color-gold-4), var(--color-background-dark));
}
.entry-content {
display: flex;
flex-direction: column;
}
}
.title-mobile {
display: none;
}
.title-section {
padding: 0 var(--gap);
}
.header-slideshow-container {
mask-image:
url(//hipcampers.com/wp-content/themes/hip/assets/hip-shape-header.svg),
linear-gradient(to top, transparent, transparent calc(100vw / 15 - 1px), black calc(100vw / 15 - 1px), black);
mask-position: 46% bottom, center;
mask-size: auto calc(100vw / 15), 100%;
mask-repeat: no-repeat;
>.wp-block-group__inner-container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(5, minmax(0, 1fr));
color: var(--color-text-inverted);
text-shadow: var(--fx-text-shadow);
}
.header-slide {
grid-row: 1 / 6;
grid-column: 1 / 6;
opacity: 0;
transition: opacity 1s ease-in-out;
.wp-block-group__inner-container {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(5, minmax(0, 1fr));
figure {
grid-column: 1 / 6;
grid-row: 1 / 6;
aspect-ratio: 16 / 7.3;
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
}
}
}
.header-slide.active {
opacity: 1;
}
.header-slide-details {
grid-column: 4 / 6;
grid-row: 2 / 6;
padding-right: var(--gap);
.wp-block-group__inner-container {
display: flex;
flex-direction: column;
gap: var(--gap-half-half);
* {
margin: 0;
}
}
}
.header-title {
grid-row: 2;
grid-column: 1 / 3;
margin: 0;
padding-left: var(--gap);
z-index: 1;
}
}
.title-outside-section {
margin: 0;
padding: var(--gap-double) var(--gap) 0 var(--gap);
}
.exterior-section {
padding: var(--gap-double) var(--gap-double) 0 0;
>.wp-block-group__inner-container {
border-radius: 0 var(--gap) var(--gap) 0;
background-color: var(--color-dark-0);
color: var(--color-text-inverted);
overflow: hidden;
display: grid;
grid-template-columns: auto repeat(4, minmax(0, 20em)) auto;
position: relative;
}
>.wp-block-group__inner-container::before {
grid-column: 1;
grid-row: 1 / 3;
background-color: var(--color-dark-1);
content: "";
z-index: 2;
}
>.wp-block-group__inner-container::after {
content: "";
position: absolute;
top: 0;
height: 100%;
left: 0;
width: 100%;
background-image: url(//hipcampers.com/wp-content/themes/hip/assets/grille-large.svg);
background-attachment: fixed;
z-index: 0;
mask-image: radial-gradient(black, transparent 15%);
mask-size: 400% 400%;
animation: fx-shine 6s ease infinite;
animation-direction: alternate;
opacity: 0.33;
}
.title-section {
grid-row: 1;
grid-column: 3 / 6;
}
.exterior-tabs {
display: flex;
flex-direction: column;
padding-top: 5.5em;
z-index: 2;
grid-column: 2;
grid-row: 1 / 3;
background-color: var(--color-dark-1);
border-radius: 0 var(--gap) var(--gap) 0;
input[type=radio] {
display: none;
}
label {
color: var(--color-text-inverted);
cursor: pointer;
padding: var(--gap-half);
border-radius: var(--gap-half) 0 0 var(--gap-half);
transition: background-color .33s ease;
&:hover {
background-color: var(--color-dark-2);
}
}
input:checked+label {
background-color: var(--color-dark-0);
}
}
.exterior-slides {
grid-column: 2 / 6;
grid-row: 2;
overflow: hidden;
z-index: 1;
>.wp-block-group__inner-container {
display: flex;
transition: transform .33s ease-out;
}
}
.exterior-slide {
display: grid;
grid-template-columns: repeat(4, 1fr);
flex: 0 0 100%;
>.wp-block-group__inner-container {
grid-column: 2 / 5;
padding: 0 var(--gap);
figure {
aspect-ratio: 16 / 7;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
>.wp-block-group__inner-container:has(#exterior-tab-1:checked) {
.exterior-slides>.wp-block-group__inner-container {
transform: translateX(0);
}
}
>.wp-block-group__inner-container:has(#exterior-tab-2:checked) {
.exterior-slides>.wp-block-group__inner-container {
transform: translateX(-100%);
}
}
>.wp-block-group__inner-container:has(#exterior-tab-3:checked) {
.exterior-slides>.wp-block-group__inner-container {
transform: translateX(-200%);
}
}
>.wp-block-group__inner-container:has(#exterior-tab-4:checked) {
.exterior-slides>.wp-block-group__inner-container {
transform: translateX(-300%);
}
}
}
.interior-section {
padding: var(--gap-double) 0 0 var(--gap-double);
>.wp-block-group__inner-container {
background-image: linear-gradient(var(--fx-dark-transparent-50)), url(//hipcampers.com/wp-content/themes/hip/assets/interior-fabric.jpg);
background-attachment: fixed;
border-radius: var(--gap) 0 0 var(--gap);
color: var(--color-text-inverted);
overflow: hidden;
display: grid;
grid-template-columns: auto repeat(4, minmax(0, 20em)) auto;
}
>.wp-block-group__inner-container::after {
grid-row: 1 / 3;
grid-column: 6;
background-color: var(--color-dark-1);
content: "";
}
.title-section {
grid-row: 1;
grid-column: 2 / 5;
}
.interior-tabs {
display: flex;
flex-direction: column;
z-index: 1;
grid-column: 5;
grid-row: 1 / 3;
padding-top: 5.5em;
border-radius: var(--gap) 0 0 var(--gap);
background-color: var(--color-dark-1);
background-attachment: fixed;
overflow: hidden;
input[type=radio] {
display: none;
}
label {
color: var(--color-text-inverted);
cursor: pointer;
padding: var(--gap-half);
border-radius: 0 var(--gap-half) var(--gap-half) 0;
transition: background-color .33s ease;
&:hover {
background-color: var(--color-dark-2);
}
}
input:checked+label {
background-image: linear-gradient(var(--fx-dark-transparent-50)), url(//hipcampers.com/wp-content/themes/hip/assets/interior-fabric.jpg);
background-attachment: fixed;
}
}
.interior-slides {
grid-column: 2 / 6;
grid-row: 2;
overflow: hidden;
>.wp-block-group__inner-container {
display: flex;
transition: transform .33s ease-out;
}
}
.interior-slide {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 0 0 100%;
>.wp-block-group__inner-container {
padding: 0 var(--gap) var(--gap);
grid-column: 1 / 4;
figure {
aspect-ratio: 16 / 7;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
>.wp-block-group__inner-container:has(#interior-tab-1:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(0);
}
}
>.wp-block-group__inner-container:has(#interior-tab-2:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(-100%);
}
}
>.wp-block-group__inner-container:has(#interior-tab-3:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(-200%);
}
}
>.wp-block-group__inner-container:has(#interior-tab-4:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(-300%);
}
}
>.wp-block-group__inner-container:has(#interior-tab-5:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(-400%);
}
}
>.wp-block-group__inner-container:has(#interior-tab-6:checked) {
.interior-slides>.wp-block-group__inner-container {
transform: translateX(-500%);
}
}
}
.seasons-section {
margin: var(--gap-double) 0;
padding: 0 var(--gap-double) 0 0;
input[type=radio] {
display: none;
}
>.wp-block-group__inner-container {
border-radius: 0 var(--gap) var(--gap) 0;
overflow: hidden;
}
.seasons-slides {
>.wp-block-group__inner-container {
display: grid;
grid-template-columns: 100% 100%;
transition: transform .33s ease-out;
}
}
.seasons-slide {
>.wp-block-group__inner-container {
display: grid;
grid-template-columns: auto auto;
height: 100%;
figure {
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.slide-details {
padding: var(--gap);
max-width: 30em;
&.winter {
grid-column: 1;
grid-row: 1;
background-color: var(--white);
}
&.summer {
grid-column: 2;
grid-row: 1;
background-color: var(--color-gold-4);
}
.seasons-label {
display: inline-block;
cursor: pointer;
color: var(--color-text-inverted);
margin: var(--gap-half) 0;
padding: var(--gap-half);
border-radius: var(--gap-half-half);
transition: background-color .33s ease;
&.winter {
background-color: var(--color-blue-0);
}
&.summer {
background-color: var(--color-gold-0);
}
&:hover {
background-color: var(--color-dark-3);
}
}
}
}
}
.seasons-slide.winter {
figure {
grid-column: 2;
grid-row: 1;
}
}
.seasons-slide.summer {
figure {
grid-column: 1;
grid-row: 1;
img {
object-position: left;
}
}
}
>.wp-block-group__inner-container:has(#seasons-winter:checked) {
.seasons-slides>.wp-block-group__inner-container {
transform: translateX(0);
}
}
>.wp-block-group__inner-container:has(#seasons-summer:checked) {
.seasons-slides>.wp-block-group__inner-container {
transform: translateX(-100%);
}
}
}
.specifications-section {
mask-image: url(//hipcampers.com/wp-content/themes/hip/assets/hip-shape-section.svg),
linear-gradient(transparent, transparent calc(100vw / 15 - 1px), black calc(100vw / 15 - 1px), black);
mask-position: 55% top,
center;
mask-size: auto calc(100vw / 15),
100%;
mask-repeat: no-repeat;
>.wp-block-group__inner-container {
color: var(--color-text-inverted);
background-image:
linear-gradient(black 0%, transparent 20%),
linear-gradient(transparent 95%, black 100%),
url(//hipcampers.com/wp-content/uploads/HIP-Night-sky-1920X2555.jpg);
background-size: cover;
background-position: center bottom;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: 10em min-content min-content 45vh;
gap: var(--gap);
padding: 0 var(--gap);
>.title-section {
grid-row: 1;
grid-column: 3;
align-self: center;
}
::-webkit-scrollbar-thumb {
background-color: var(--fx-white-transparent-50);
border-radius: .5rem;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--fx-white-transparent-80);
}
}
.specs-container {
grid-row: 2;
grid-column: 1 / 4;
max-width: 64em;
justify-self: center;
>.wp-block-group__inner-container {
scroll-behavior: smooth;
overflow-y: auto;
height: 66vh;
padding: 0 var(--gap) var(--gap) var(--gap);
mask-image:
linear-gradient(to top,
transparent,
transparent var(--gap),
black var(--gap),
black calc(100% - var(--gap)),
transparent),
linear-gradient(to bottom,
transparent,
transparent var(--gap),
black var(--gap),
black calc(100% - var(--gap)),
transparent);
.wp-block-table tr {
border-color: var(--fx-white-transparent-50) !important;
}
}
}
.actions-panel {
grid-row: 3;
grid-column: 1 / 4;
width: 100%;
max-width: 64em;
justify-self: center;
>.wp-block-group__inner-container {
display: flex;
background-color: var(--fx-dark-transparent-50);
backdrop-filter: var(--fx-blur);
border-radius: var(--gap);
overflow: hidden;
}
.actions-primary {
flex: 1 1 auto;
color: var(--color-text-main);
background-color: var(--fx-white-transparent-80);
padding: var(--gap);
border-radius: var(--gap);
}
.actions-secondary {
flex: 0 0 auto;
padding: var(--gap);
.wp-block-buttons {
gap: var(--gap-half);
}
}
}
} .hip-slideshow-container {
position: relative;
overflow: hidden;
.slides-container>.wp-block-group__inner-container {
display: flex;
transition: transform 0.5s ease;
}
.slideshow-slide {
flex: 0 0 100%;
width: 100%;
}
.hip-slideshow-controls {
position: absolute;
left: 0;
right: 0;
z-index: 10;
display: flex;
justify-content: space-between;
pointer-events: none;
button {
pointer-events: auto;
background: transparent;
border: none;
cursor: pointer;
padding: var(--gap-half);
transition: all .3s ease;
border-radius: var(--gap-half-half) 0 0 var(--gap-half-half);
svg {
width: 2em;
aspect-ratio: 1 / 1;
fill: var(--color-text-inverted);
filter: drop-shadow(var(--fx-text-shadow));
}
}
button:hover {
background: hsl(from var(--black) h s l / 50%);
}
button.prev-slide {
transform: rotate(180deg);
}
}
.hip-slideshow-indicators {
position: absolute;
display: flex;
justify-content: center;
gap: var(--gap-half-half);
left: 0;
right: 0;
z-index: 11;
button {
pointer-events: auto;
background-color: var(--fx-white-transparent-50);
border-radius: var(--gap);
width: var(--gap-half);
height: .25rem;
border: none;
cursor: pointer;
transition: background-color .3s ease;
&.active {
background-color: var(--fx-dark-transparent-50);
}
&:hover {
background-color: var(--fx-white-transparent-80);
}
}
}
} @media (width >=1920px) { }
@media (width <=1024px) {
body {
font-size: 100%;
}
.site-header .logo-full {
display: none;
}
.site-header .logo-small {
display: block;
}
.is-layout-grid {
grid-auto-flow: row;
}
#context-menu-zone {
flex-direction: column;
pointer-events: auto;
gap: var(--gap-half);
.menu-toggle.clickable {
display: inherit;
}
#context-navigation,
.menu-toggle.not-clickable {
display: none;
}
.menu-toggle svg {
transform: rotate(90deg);
}
.menu {
flex-direction: column;
}
}
.exterior-section {
padding: var(--gap) var(--gap) 0 0;
}
.interior-section {
padding: var(--gap) 0 0 var(--gap);
}
.seasons-section {
padding: 0 var(--gap) 0 0;
margin: var(--gap) 0;
}
}
@media (width <=768px) {
body.page-template-page-camper {
.entry-content {
gap: var(--gap);
}
}
body:not(.page-template-page-camper) {
article header {
padding: 0 var(--gap-half);
}
main {
padding: 0;
}
section.wp-block-group {
padding: var(--gap-half);
}
.radius-top-left {
border-top-left-radius: var(--gap-half);
}
.radius-top-right {
border-top-right-radius: var(--gap-half);
}
.radius-bottom-right {
border-bottom-right-radius: var(--gap-half);
}
.radius-bottom-left {
border-bottom-left-radius: var(--gap-half);
}
}
body.bg-image main {
padding: 10vh 0 0 0;
}
.grid-container>.wp-block-group__inner-container {
display: initial;
}
#masthead,
#footer-navigation-zone,
#colophon {
padding: var(--gap-half);
}
#footer-navigation-zone:has(#footer-navigation-toggle:checked) {
.wrapper {
transform: translateX(-96vw);
}
}
#bg-fx {
bottom: 0;
top: unset;
transform-origin: bottom;
}
#masthead {
top: unset;
bottom: 0;
flex-direction: row-reverse;
gap: unset;
#main-menu-zone {
flex-direction: row-reverse;
align-items: end;
}
#context-menu-zone {
flex-direction: column-reverse;
.menu-toggle svg {
transform: rotate(-90deg);
}
}
#language-menu-zone {
flex-direction: column-reverse;
nav#language-navigation {
text-align: initial;
justify-content: flex-start;
}
}
}
.header-slideshow-container {
.header-slide>.wp-block-group__inner-container figure {
aspect-ratio: 1 / 1.25;
}
.header-slide-details {
grid-column: 1 / 6;
grid-row: 1 / 6;
padding: var(--gap-half);
}
.header-title {
grid-row: 5;
padding: var(--gap-half);
align-self: end;
font-size: 2rem;
}
}
.title-section {
padding: 0 var(--gap-half);
}
.title-mobile {
display: block;
}
.exterior-section {
padding: 0;
>.wp-block-group__inner-container {
border-radius: var(--gap-half);
}
>.wp-block-group__inner-container::before {
display: none;
}
.title-section {
grid-column: 1 / 6;
}
.exterior-tabs {
display: none;
}
.exterior-slides {
grid-column: 1 / 6;
>.wp-block-group__inner-container {
flex-direction: column;
overflow-x: hidden;
}
}
.exterior-slide {
display: grid;
grid-template-columns: repeat(4, 1fr);
flex: 0 0 100%;
border: 1px solid;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-image-source: linear-gradient(to right, transparent, var(--fx-white-transparent-50), transparent);
border-image-slice: 1;
>.wp-block-group__inner-container {
grid-column: 1 / 5;
padding: var(--gap-half);
figure {
aspect-ratio: 16 / 9;
}
}
}
}
.interior-section {
padding: 0;
>.wp-block-group__inner-container {
border-radius: var(--gap-half);
}
.title-section {
grid-column: 1 / 6;
}
.interior-tabs {
display: none;
}
.interior-slides {
grid-column: 1 / 6;
>.wp-block-group__inner-container {
flex-direction: column;
overflow-x: hidden;
}
}
.interior-slide {
display: grid;
grid-template-columns: repeat(4, 1fr);
flex: 0 0 100%;
border: 1px solid;
border-left: 0;
border-right: 0;
border-bottom: 0;
border-image-source: linear-gradient(to right, transparent, var(--fx-white-transparent-50), transparent);
border-image-slice: 1;
>.wp-block-group__inner-container {
grid-column: 1 / 5;
padding: var(--gap-half);
figure {
aspect-ratio: 16 / 9;
}
}
}
}
.seasons-section {
padding: 0;
margin: 0;
>.wp-block-group__inner-container {
border-radius: var(--gap-half);
}
.seasons-slide {
>.wp-block-group__inner-container {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
height: 100%;
figure {
grid-row: 1;
grid-column: 1;
}
.slide-details {
padding: var(--gap-half);
max-width: 100%;
&.winter,
&.summer {
grid-column: 1;
grid-row: 2;
border-radius: unset;
}
.seasons-label {
display: block;
justify-self: center;
}
}
}
}
}
.specifications-section {
>.wp-block-group__inner-container {
padding: 0 var(--gap-half);
>.title-section {
grid-column: 1 / 4;
align-self: end;
padding: 0;
}
}
.actions-panel {
max-width: unset;
justify-self: unset;
>.wp-block-group__inner-container {
flex-direction: column;
border-radius: var(--gap-half);
}
.actions-primary {
border-radius: var(--gap-half);
}
.actions-secondary {
.wp-block-buttons {
flex-direction: row;
justify-content: center;
}
}
}
}
.flex-container-1-1>.wp-block-group__inner-container {
flex-direction: column;
}
}
@media (width <=600px) {
#footer-navigation-zone {
overflow-x: hidden;
.menu-toggle.clickable {
display: inherit;
}
.menu-toggle.not-clickable {
display: none;
}
.primary-pane {
flex: 1 0 90vw;
}
.secondary-pane {
flex: 1 0 90vw;
}
}
} #CybotCookiebotDialogPoweredbyCybot {
visibility: hidden;
} #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo {
display: none !important;
}