Merge branch 'main' of https://git.kaamyab.dev/vargha/TourWebsite
This commit is contained in:
@@ -58,6 +58,15 @@ html {
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
"Plus Jakarta Sans",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
font-family:
|
||||
"Plus Jakarta Sans",
|
||||
system-ui,
|
||||
@@ -1706,6 +1715,7 @@ dd {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.acc__a > * {
|
||||
.acc__a > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -2627,6 +2637,68 @@ dd {
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Weblog archive
|
||||
========================================================= */
|
||||
.hero--blog {
|
||||
min-height: clamp(22rem, 52svh, 30rem);
|
||||
}
|
||||
|
||||
.filters--blog .filters__row {
|
||||
padding: var(--sp-3);
|
||||
}
|
||||
|
||||
.filters--blog .fsearch {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* the article cards carry their own tint, so the grid only lays them out */
|
||||
.titem .acard {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titem .acard__excerpt {
|
||||
padding: var(--sp-3) var(--sp-4) var(--sp-4);
|
||||
}
|
||||
|
||||
/* hovering any card in the grid hands the highlight over to it */
|
||||
.tgrid:hover .acard.is-active:not(:hover):not(:focus-within),
|
||||
.tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) {
|
||||
background: var(--c-white);
|
||||
}
|
||||
|
||||
.tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media,
|
||||
.tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) .acard__media {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__media::after,
|
||||
.tgrid:focus-within
|
||||
.acard.is-active:not(:hover):not(:focus-within)
|
||||
.acard__media::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(0, 0, 0, 0.35) 0%,
|
||||
rgba(0, 0, 0, 0.05) 40%,
|
||||
rgba(0, 0, 0, 0.65) 100%
|
||||
);
|
||||
}
|
||||
|
||||
.tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt,
|
||||
.tgrid:focus-within .acard.is-active:not(:hover):not(:focus-within) .acard__excerpt {
|
||||
opacity: 0.7;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.tgrid:hover .acard.is-active:not(:hover):not(:focus-within) .ring-badge__dot,
|
||||
.tgrid:focus-within
|
||||
.acard.is-active:not(:hover):not(:focus-within)
|
||||
.ring-badge__dot {
|
||||
color: var(--c-white);
|
||||
background: var(--c-glass);
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Tour details — hero
|
||||
========================================================= */
|
||||
@@ -2769,6 +2841,33 @@ dd {
|
||||
scale: 1.2;
|
||||
}
|
||||
|
||||
/* per-city figures: each cut-out has its own aspect, so each gets its own
|
||||
offset and height (em against the display word, like the London one) */
|
||||
.hero-tour__figure--nashville {
|
||||
left: 2.3em;
|
||||
top: -0.5em;
|
||||
height: 2.48em;
|
||||
}
|
||||
|
||||
.hero-tour__figure--paris {
|
||||
left: 0.7em;
|
||||
top: -0.55em;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
.hero-tour__figure--sydney {
|
||||
left: 1.05em;
|
||||
top: 0.35em;
|
||||
height: 2.3em;
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
.hero-tour__figure--san-diego {
|
||||
left: 2.1em;
|
||||
top: -0.26em;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Tour details — layout
|
||||
========================================================= */
|
||||
@@ -2803,7 +2902,6 @@ dd {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
text-align: justify;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@@ -3333,3 +3431,861 @@ dd {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Weblog — single article
|
||||
========================================================= */
|
||||
.hero--post {
|
||||
min-height: clamp(20rem, 46svh, 31rem);
|
||||
}
|
||||
|
||||
.post__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(3rem, 2rem + 3vw, 6.25rem);
|
||||
max-width: 58.5rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.post__head {
|
||||
align-items: flex-start;
|
||||
margin-block-end: var(--sp-5);
|
||||
}
|
||||
|
||||
.post__title {
|
||||
max-width: 28rem;
|
||||
margin: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
line-height: 1.15;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.post__h2 {
|
||||
margin: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.post__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-5);
|
||||
}
|
||||
|
||||
.post__img {
|
||||
width: 100%;
|
||||
height: clamp(13rem, 8rem + 16vw, 22.1875rem);
|
||||
border-radius: var(--r-card);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.post__pair {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--sp-5);
|
||||
}
|
||||
|
||||
.post__rule {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: var(--c-line);
|
||||
}
|
||||
|
||||
/* --- tip callout --- */
|
||||
.tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--c-teal-05);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.tip__icon {
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
.tip__k {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
.tip__text p {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* --- share --- */
|
||||
.share {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-3) var(--sp-4);
|
||||
}
|
||||
|
||||
.share__title {
|
||||
margin: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.share__btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-1);
|
||||
}
|
||||
|
||||
.share__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 3rem;
|
||||
height: 3rem;
|
||||
padding-inline: var(--sp-3);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-pill);
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
color: var(--c-black);
|
||||
background: var(--c-white);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s var(--ease),
|
||||
background-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.share__btn:hover {
|
||||
border-color: var(--c-black);
|
||||
}
|
||||
|
||||
white);
|
||||
border-color: var(--c-black);
|
||||
background: var(--c-black);
|
||||
}
|
||||
|
||||
/* --- reviews --- */
|
||||
.reviews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.rform {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-3);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--c-white);
|
||||
}
|
||||
|
||||
.rform .field {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.rform__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-self: stretch;
|
||||
gap: var(--sp-1);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.rform__row {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.rinput {
|
||||
width: 100%;
|
||||
min-height: var(--control-h);
|
||||
padding: 0 var(--sp-3);
|
||||
border: 1px solid var(--c-white);
|
||||
border-radius: var(--r-pill);
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--c-black);
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
transition: border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.rinput::placeholder {
|
||||
color: var(--c-black);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.rinput:focus-visible {
|
||||
outline: 0;
|
||||
border-color: var(--c-teal);
|
||||
}
|
||||
|
||||
.rinput[aria-invalid="true"] {
|
||||
border-color: var(--c-red);
|
||||
}
|
||||
|
||||
.rinput--area {
|
||||
min-height: 8.25rem;
|
||||
padding-block: var(--sp-2);
|
||||
border-radius: var(--r-card);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.rform__status {
|
||||
align-self: stretch;
|
||||
min-height: 1.25rem;
|
||||
margin: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
.rform__status.is-error {
|
||||
color: var(--c-red);
|
||||
}
|
||||
|
||||
.rform__submit {
|
||||
min-width: 10.625rem;
|
||||
}
|
||||
|
||||
.reviews__list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.reviews__list.is-collapsed {
|
||||
max-height: 68rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* fade the cut-off review out so it reads as "more below" */
|
||||
.reviews__list.is-collapsed::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: auto 0 0;
|
||||
height: 8rem;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--c-white));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reviews__more {
|
||||
align-self: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
padding: var(--sp-1);
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-weight: 500;
|
||||
color: var(--c-teal);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.reviews__more .icon {
|
||||
transition: transform 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.reviews__more[aria-expanded="true"] .icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.rcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--c-white);
|
||||
}
|
||||
|
||||
.rcard--tint {
|
||||
border-color: transparent;
|
||||
background: var(--c-teal-05);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.rcard__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.rcard__avatar {
|
||||
width: 3rem;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.rcard__who {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.rcard__who b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rcard__who span {
|
||||
font-weight: 500;
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
.rcard__text {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
text-align: justify;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.rcard__votes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vote {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
.share__btn--copy {
|
||||
width: 9.125rem;
|
||||
}
|
||||
|
||||
col.share__btn--copy {
|
||||
width: 9.125rem;
|
||||
}
|
||||
|
||||
or: var(--c-teal);
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.vote:hover {
|
||||
background: var(--c-teal-05);
|
||||
}
|
||||
|
||||
.vote--down .icon {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
|
||||
.vote[aria-pressed="true"] {
|
||||
color: var(--c-white);
|
||||
background: var(--c-teal);
|
||||
}
|
||||
|
||||
/* replies hang off the review above with a rule down the left */
|
||||
.replies {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
margin-inline-start: 6.875rem;
|
||||
padding-block-start: 2.5rem;
|
||||
}
|
||||
|
||||
.replies__k {
|
||||
position: absolute;
|
||||
left: -2.5rem;
|
||||
top: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.replies::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -3.375rem;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 2.5rem;
|
||||
background: var(--c-line);
|
||||
}
|
||||
|
||||
.replies__all {
|
||||
align-self: flex-end;
|
||||
font-weight: 500;
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
/* --- related --- */
|
||||
.related {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.related__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.related__all {
|
||||
width: 9.125rem;
|
||||
}
|
||||
|
||||
.tgrid--related {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
.rform__row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rform__submit {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.rcard {
|
||||
padding: var(--sp-3);
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin-inline-start: var(--sp-4);
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
.replies__k,
|
||||
.replies::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post__pair,
|
||||
.tgrid--related {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.share {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Inner pages — About, FAQ, Contact
|
||||
========================================================= */
|
||||
.hero--page {
|
||||
align-items: start;
|
||||
min-height: clamp(20rem, 28vw, 26.25rem);
|
||||
padding-block: calc(var(--header-h) + var(--sp-5)) 0;
|
||||
}
|
||||
|
||||
.hero--page .hero__title {
|
||||
max-width: none;
|
||||
font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
|
||||
}
|
||||
|
||||
.hero--page .crumbs__list {
|
||||
color: var(--c-black);
|
||||
}
|
||||
|
||||
.hero--page .hero__content {
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.hero--page .hero__img {
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
/* the cards climb up over the foot of the hero */
|
||||
.pagebody {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
/* ---------- About ---------- */
|
||||
.hero--about {
|
||||
align-items: center;
|
||||
min-height: clamp(26rem, 38.5vw, 36rem);
|
||||
padding-block: calc(var(--header-h) + var(--sp-2)) var(--sp-6);
|
||||
}
|
||||
|
||||
.about-hero__block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--sp-1);
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.about-hero__title {
|
||||
margin: 0;
|
||||
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
|
||||
font-weight: 500;
|
||||
color: var(--c-black);
|
||||
}
|
||||
|
||||
.about-hero__mark {
|
||||
position: relative;
|
||||
padding-inline-end: 1.5rem;
|
||||
}
|
||||
|
||||
.about-hero__logo {
|
||||
display: block;
|
||||
width: clamp(15rem, 10rem + 20vw, 29.75rem);
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0.25rem 1.5rem rgba(0, 0, 0, 0.15));
|
||||
}
|
||||
|
||||
.about-hero__chip {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2.75rem;
|
||||
transform: rotate(-6deg);
|
||||
}
|
||||
|
||||
.aboutpage__inner {
|
||||
max-width: 53.5rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.aboutpage {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
.tour__block--roomy {
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.astats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--sp-4);
|
||||
margin: 0;
|
||||
padding: var(--sp-4);
|
||||
border: 1px dashed var(--c-line);
|
||||
border-radius: var(--r-card);
|
||||
}
|
||||
|
||||
.astat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
gap: var(--sp-1);
|
||||
}
|
||||
|
||||
.astat__num {
|
||||
margin: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.astat__num span {
|
||||
color: var(--c-teal);
|
||||
}
|
||||
|
||||
.astat__label {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.agallery {
|
||||
display: grid;
|
||||
grid-template-columns: 350fr 245fr 245fr;
|
||||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--sp-3);
|
||||
height: clamp(16rem, 10rem + 20vw, 24.9375rem);
|
||||
}
|
||||
|
||||
.agallery img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
border-radius: var(--r-card);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.agallery__hero {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.aboutpage + .testimonials {
|
||||
padding-block-start: var(--sp-6);
|
||||
}
|
||||
|
||||
/* ---------- FAQ ---------- */
|
||||
.faqpage {
|
||||
margin-block-start: calc(var(--sp-6) * -1.4);
|
||||
}
|
||||
|
||||
.faqpage__layout {
|
||||
display: grid;
|
||||
grid-template-columns: 19.125rem minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.catnav {
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--sp-3));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
padding: var(--sp-4);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--c-white);
|
||||
}
|
||||
|
||||
.catnav__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.catnav__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.catnav__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 3rem;
|
||||
padding-inline: var(--sp-3);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-pill);
|
||||
font-weight: 500;
|
||||
color: var(--c-black);
|
||||
background: var(--c-white);
|
||||
transition:
|
||||
color 0.2s var(--ease),
|
||||
background-color 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.catnav__link:hover {
|
||||
border-color: var(--c-black);
|
||||
}
|
||||
|
||||
.catnav__link.is-active {
|
||||
color: var(--c-white);
|
||||
border-color: var(--c-black);
|
||||
background: var(--c-black);
|
||||
}
|
||||
|
||||
.faqpage__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.faqcard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-5);
|
||||
padding: var(--sp-5);
|
||||
border: 1px solid var(--c-line);
|
||||
border-radius: var(--r-card);
|
||||
background: var(--c-white);
|
||||
scroll-margin-top: calc(var(--header-h) + var(--sp-3));
|
||||
}
|
||||
|
||||
.faqcard__title {
|
||||
margin: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.faqcard .accordion {
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
/* ---------- Contact ---------- */
|
||||
.contactpage {
|
||||
margin-block-start: calc(var(--sp-6) * -3);
|
||||
}
|
||||
|
||||
.contactpage__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 26rem minmax(0, 1fr);
|
||||
gap: var(--sp-4);
|
||||
width: min(60.375rem, 100%);
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.contactcard {
|
||||
align-items: stretch;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.contactcard__social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.facts--col {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.ticketform {
|
||||
min-height: 27rem;
|
||||
}
|
||||
|
||||
.ticketform__grow {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ticketform__grow .rinput--area {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 68.75rem) {
|
||||
.astats {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.contactpage {
|
||||
margin-block-start: calc(var(--sp-6) * -2);
|
||||
}
|
||||
|
||||
.contactpage__grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 56rem) {
|
||||
.faqpage__layout {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.catnav {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.catnav__list {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.catnav__link {
|
||||
gap: var(--sp-1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 40rem) {
|
||||
.faqcard {
|
||||
padding: var(--sp-3);
|
||||
}
|
||||
|
||||
.agallery {
|
||||
height: auto;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-template-rows: none;
|
||||
}
|
||||
|
||||
.agallery__hero {
|
||||
grid-column: span 2;
|
||||
grid-row: auto;
|
||||
aspect-ratio: 16 / 10;
|
||||
}
|
||||
|
||||
.agallery img {
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.about-hero__chip {
|
||||
top: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* the FAQ and contact photos are tinted to the brand teal, as in the design */
|
||||
.hero--faq .hero__media::after,
|
||||
.hero--contact .hero__media::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--c-teal);
|
||||
mix-blend-mode: hue;
|
||||
}
|
||||
|
||||
/* a closed answer must not keep its top padding, or every collapsed row looks taller */
|
||||
.acc__q[aria-expanded="false"] + .acc__a p {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Scroll reveal
|
||||
each top-level section fades and rises into place the first
|
||||
time it crosses into view; its cards cascade in right after
|
||||
========================================================= */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(2.5rem);
|
||||
transition:
|
||||
opacity 0.7s var(--ease),
|
||||
transform 0.7s var(--ease);
|
||||
}
|
||||
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.reveal-item {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.reveal-item.is-visible {
|
||||
animation: card-rise 0.6s var(--ease) both;
|
||||
}
|
||||
|
||||
@keyframes card-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1.5rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user