:root {
--ck-sand: #eae0cf;
--ck-stone: #d7c6aa;
--ck-ink: #073f42;
--ck-ink-soft: #0c5657;
--ck-aqua: #59ddcb;
--ck-terracotta: #d95932;
--ck-shell: #fff7e8;
--ck-line: rgba(7, 63, 66, 0.28);
--ck-max: 1360px;
}
* {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
scroll-behavior: smooth;
}
body.ck-site {
margin: 0;
background: var(--ck-sand);
color: var(--ck-ink);
font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 16px;
line-height: 1.5;
}
body.ck-site a {
color: inherit;
text-decoration: none;
}
body.ck-site a:hover {
text-decoration: underline;
text-underline-offset: 0.25em;
}
body.ck-site img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.ck-skip-link {
position: fixed;
left: 16px;
top: 16px;
z-index: 9999;
transform: translateY(-160%);
background: var(--ck-terracotta);
color: #fff;
padding: 10px 14px;
}
.ck-skip-link:focus {
transform: translateY(0);
}
.ck-label,
.ck-hero__line,
.ck-header__line {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.ck-header {
position: sticky;
top: 0;
z-index: 100;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
padding: 22px 4%;
border-bottom: 1px solid var(--ck-line);
background: rgba(234, 224, 207, 0.92);
backdrop-filter: blur(18px);
}
body.admin-bar .ck-header {
top: 32px;
}
.ck-wordmark {
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
}
.ck-header__line {
margin: 0;
text-align: center;
}
.ck-nav__menu {
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
.ck-main {
overflow: hidden;
}
.ck-hero {
position: relative;
max-width: var(--ck-max);
margin: 0 auto;
padding: 28px 4% 44px;
}
body.home .ck-header {
position: absolute;
inset-inline: 0;
top: 0;
color: var(--ck-sand);
border-bottom-color: rgba(234, 224, 207, 0.18);
background:
linear-gradient(180deg, rgba(7, 63, 66, 0.7), rgba(7, 63, 66, 0.1)),
linear-gradient(90deg, rgba(7, 63, 66, 0.28), rgba(7, 63, 66, 0.02));
backdrop-filter: blur(10px);
}
body.home.admin-bar .ck-header {
top: 32px;
}
body.home .ck-hero {
display: grid;
min-height: 100vh;
min-height: 100svh;
max-width: none;
grid-template-rows: auto auto 1fr auto auto;
gap: clamp(16px, 2.4vh, 28px);
color: var(--ck-sand);
isolation: isolate;
padding-top: 124px;
padding-bottom: 34px;
overflow: hidden;
}
body.home.admin-bar .ck-hero {
min-height: calc(100vh - 32px);
min-height: calc(100svh - 32px);
}
body.home .ck-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(circle at 18% 22%, rgba(89, 221, 203, 0.22), transparent 28%),
radial-gradient(circle at 78% 12%, rgba(217, 89, 50, 0.2), transparent 24%),
linear-gradient(180deg, transparent 42%, rgba(7, 63, 66, 0.76) 100%);
pointer-events: none;
}
body.home .ck-hero__line,
body.home .ck-hero h1,
body.home .ck-hero__foot,
body.home .ck-hero__quick {
width: 100%;
max-width: var(--ck-max);
margin-right: auto;
margin-left: auto;
}
body.home .ck-hero h1 {
max-width: min(var(--ck-max), 94vw);
margin-top: 0;
color: var(--ck-sand);
font-size: clamp(5rem, 13.8vw, 18rem);
text-shadow: 0 3px 24px rgba(0, 0, 0, 0.24);
}
body.home .ck-hero__media {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0;
}
body.home .ck-hero__media::after {
background:
linear-gradient(180deg, rgba(7, 63, 66, 0.74), rgba(7, 63, 66, 0.12) 38%, rgba(7, 63, 66, 0.82)),
linear-gradient(90deg, rgba(7, 63, 66, 0.6), rgba(7, 63, 66, 0.04) 55%, rgba(7, 63, 66, 0.44));
}
body.home .ck-hero__foot {
position: relative;
z-index: 2;
align-self: end;
align-items: end;
border: 1px solid rgba(234, 224, 207, 0.24);
border-radius: 12px;
background:
linear-gradient(135deg, rgba(7, 63, 66, 0.62), rgba(7, 63, 66, 0.24)),
linear-gradient(90deg, rgba(234, 224, 207, 0.12), transparent);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
padding: clamp(16px, 2vw, 24px);
backdrop-filter: blur(14px);
}
body.home .ck-hero__foot p {
color: rgba(234, 224, 207, 0.86);
}
body.home .ck-video-toggle {
top: 92px;
right: 4%;
bottom: auto;
background: var(--ck-aqua);
color: var(--ck-ink);
}
body.home .ck-seal {
top: 38%;
right: clamp(22px, 6vw, 92px);
bottom: auto;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}
.ck-hero__line {
display: flex;
justify-content: space-between;
gap: 18px;
}
body.home .ck-hero__line {
position: relative;
z-index: 2;
color: rgba(234, 224, 207, 0.84);
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
.ck-hero h1 {
position: relative;
z-index: 2;
margin: 18px 0 0;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 5.5rem;
font-weight: 800;
line-height: 0.82;
letter-spacing: 0;
text-transform: uppercase;
pointer-events: none;
}
.ck-hero h1 span {
display: block;
}
.ck-hero h1 span:last-child {
margin-left: 22%;
color: var(--ck-aqua);
text-shadow: 0 2px 0 rgba(7, 63, 66, 0.35);
}
.ck-hero__media {
position: relative;
width: min(1040px, 88%);
height: 345px;
margin: -28px 0 0 6%;
overflow: hidden;
border-radius: 8px;
background: var(--ck-ink);
}
.ck-hero__media video,
.ck-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ck-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 63, 66, 0.05), rgba(7, 63, 66, 0.72));
pointer-events: none;
}
.ck-video-toggle {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 3;
border: 0;
border-radius: 4px;
background: var(--ck-shell);
color: var(--ck-ink);
padding: 10px 14px;
font: inherit;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.ck-margin-note {
display: none;
}
.ck-seal {
position: absolute;
right: 4%;
top: 31%;
z-index: 4;
display: grid;
place-items: center;
width: 92px;
height: 92px;
border-radius: 50%;
background: var(--ck-terracotta);
color: #fff0d9;
text-align: center;
font-size: 0.62rem;
font-weight: 700;
line-height: 1.25;
text-transform: uppercase;
transform: rotate(10deg);
}
.ck-seal b {
display: block;
font-size: 1.7rem;
line-height: 1;
}
.ck-hero__foot {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 24px;
}
.ck-hero__foot p {
max-width: 330px;
margin: 0;
font-size: 0.94rem;
}
.ck-hero__foot a,
.ck-inline-link {
width: fit-content;
border-bottom: 1px solid currentColor;
padding-bottom: 6px;
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
}
.ck-hero__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.ck-hero__actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 1px solid rgba(234, 224, 207, 0.36);
border-radius: 999px;
padding: 11px 16px;
background: rgba(234, 224, 207, 0.08);
color: var(--ck-sand);
text-decoration: none;
}
.ck-hero__actions a:first-child {
border-color: var(--ck-aqua);
background: var(--ck-aqua);
color: var(--ck-ink);
}
.ck-hero__quick {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid rgba(234, 224, 207, 0.22);
border-radius: 12px;
background: rgba(234, 224, 207, 0.22);
}
.ck-hero__quick a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 58px;
padding: 14px 16px;
background: rgba(7, 63, 66, 0.5);
color: var(--ck-sand);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
text-decoration: none;
transition: background 180ms ease, color 180ms ease;
}
.ck-hero__quick a:hover {
background: var(--ck-sand);
color: var(--ck-ink);
text-decoration: none;
}
.ck-hero__quick small {
color: var(--ck-aqua);
font-size: 0.68rem;
}
.ck-scroll-cue {
position: absolute;
left: 4%;
bottom: 46px;
z-index: 3;
display: none;
align-items: center;
gap: 9px;
color: rgba(234, 224, 207, 0.8);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
text-decoration: none;
}
.ck-scroll-cue i {
display: block;
width: 1px;
height: 44px;
background: linear-gradient(180deg, var(--ck-aqua), transparent);
}
.ck-tagline {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.75rem;
font-style: italic;
line-height: 1.08;
}
.ck-strip,
.ck-beach-callout {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
background: var(--ck-aqua);
color: var(--ck-ink);
padding: 16px 4%;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-chapter,
.ck-outside,
.ck-note,
.ck-page-hero,
.ck-listing,
.ck-route-listing,
.ck-generic-page,
.ck-single {
max-width: var(--ck-max);
margin: 0 auto;
}
.ck-chapter,
.ck-note,
.ck-page-hero,
.ck-listing,
.ck-route-listing,
.ck-generic-page,
.ck-single {
padding: 58px 4%;
}
.ck-section-head {
display: grid;
gap: 18px;
border-top: 1px solid var(--ck-line);
padding-top: 18px;
}
.ck-section-head p {
max-width: 330px;
margin: 0;
font-size: 0.95rem;
}
.ck-chapter h2,
.ck-outside h2,
.ck-note h2,
.ck-page-hero h1,
.ck-generic-page h1,
.ck-single h1 {
margin: 28px 0 34px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 4.5rem;
font-weight: 800;
line-height: 0.9;
letter-spacing: 0;
text-transform: uppercase;
}
.ck-chapter h2 em,
.ck-note h2 em,
.ck-page-hero h1 em {
font-family: Georgia, "Times New Roman", serif;
font-size: 0.72em;
font-weight: 400;
font-style: italic;
text-transform: none;
}
.ck-teaser-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
.ck-teaser {
display: block;
min-width: 0;
}
.ck-teaser__image,
.ck-place-card__image,
.ck-single__image {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
background: var(--ck-ink);
}
.ck-teaser__image {
height: 320px;
}
.ck-teaser__image img,
.ck-place-card__image img {
transition: transform 0.7s ease;
}
.ck-teaser:hover img,
.ck-place-card:hover img {
transform: scale(1.04);
}
.ck-number {
position: absolute;
left: 14px;
bottom: 8px;
color: var(--ck-sand);
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 4.2rem;
font-weight: 800;
line-height: 1;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.ck-teaser__title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
border-bottom: 1px solid var(--ck-line);
padding: 16px 0 12px;
}
.ck-teaser__title strong {
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 2.55rem;
line-height: 1;
text-transform: uppercase;
}
.ck-teaser__copy {
display: block;
max-width: 300px;
margin-top: 13px;
font-size: 0.86rem;
}
.ck-outside {
max-width: none;
margin: 0;
background: var(--ck-ink);
color: var(--ck-sand);
padding: 58px 4%;
}
.ck-outside > * {
max-width: var(--ck-max);
margin-left: auto;
margin-right: auto;
}
.ck-outside h2 {
color: var(--ck-sand);
}
.ck-outside h2 span {
display: block;
color: var(--ck-aqua);
}
.ck-outside__grid {
display: grid;
gap: 34px;
}
.ck-outside__image {
overflow: hidden;
height: 290px;
border-radius: 8px;
transform: rotate(-2deg);
}
.ck-route-links p {
max-width: 380px;
margin: 0 0 24px;
}
.ck-route-links a {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 18px;
border-top: 1px solid rgba(234, 224, 207, 0.35);
padding: 20px 0;
}
.ck-route-links a:last-child {
border-bottom: 1px solid rgba(234, 224, 207, 0.35);
}
.ck-route-links strong {
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 2.25rem;
line-height: 1;
text-transform: uppercase;
}
.ck-route-links small {
display: block;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
}
.ck-note {
display: grid;
gap: 28px;
}
.ck-note h2 {
margin-top: 0;
}
.ck-note p,
.ck-rich-text {
max-width: 760px;
font-size: 1rem;
line-height: 1.72;
}
.ck-asterisk {
display: none;
}
.ck-page-hero {
display: grid;
gap: 24px;
border-bottom: 1px solid var(--ck-line);
}
.ck-page-hero__copy {
align-self: end;
}
.ck-page-hero__copy h2 {
margin: 0 0 14px;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.9rem;
font-style: italic;
font-weight: 400;
}
.ck-page-hero__copy p,
.ck-page-hero__copy span {
display: block;
max-width: 520px;
}
.ck-page-hero__copy span {
margin-top: 18px;
color: var(--ck-terracotta);
font-weight: 800;
}
.ck-listing {
display: grid;
gap: 42px;
}
.ck-listing--filterable {
gap: 28px;
}
.ck-filter-panel {
display: grid;
gap: 22px;
border: 1px solid var(--ck-line);
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 247, 232, 0.62), rgba(215, 198, 170, 0.24)),
var(--ck-sand);
box-shadow: 0 24px 80px rgba(7, 63, 66, 0.08);
padding: clamp(18px, 3vw, 30px);
}
.ck-filter-panel h2 {
margin: 5px 0 6px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 4vw, 3.7rem);
font-style: italic;
font-weight: 400;
line-height: 1;
}
.ck-filter-count {
margin: 0;
color: var(--ck-terracotta);
font-weight: 800;
}
.ck-filter-controls {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.ck-filter-controls label {
display: grid;
gap: 7px;
}
.ck-filter-controls span {
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-filter-controls input,
.ck-filter-controls select,
.ck-filter-controls button {
width: 100%;
min-height: 48px;
border: 1px solid var(--ck-line);
border-radius: 999px;
background: rgba(255, 247, 232, 0.64);
color: var(--ck-ink);
padding: 0 16px;
font: inherit;
font-size: 0.9rem;
}
.ck-filter-controls input:focus,
.ck-filter-controls select:focus,
.ck-filter-controls button:focus-visible {
outline: 2px solid var(--ck-aqua);
outline-offset: 2px;
}
.ck-filter-controls button {
align-self: end;
background: var(--ck-ink);
color: var(--ck-sand);
cursor: pointer;
font-size: 0.76rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-filter-empty {
margin-top: 0;
}
.ck-place-results {
display: grid;
gap: 42px;
}
.ck-place-card {
display: grid;
gap: 22px;
align-items: end;
border-top: 1px solid var(--ck-line);
padding-top: 24px;
}
.ck-place-card__image {
min-height: 330px;
}
.ck-place-card__meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin: 8px 0 10px;
}
.ck-place-card__meta span {
border: 1px solid rgba(7, 63, 66, 0.24);
border-radius: 999px;
padding: 5px 9px;
background: rgba(255, 247, 232, 0.44);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-place-card__body h2,
.ck-route-card h2,
.ck-index-card h2 {
margin: 7px 0 12px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 2.7rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.ck-place-card__body p {
max-width: 620px;
}
.ck-place-card__links {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.ck-map-link {
display: inline-flex;
align-items: center;
min-height: 38px;
border: 1px solid rgba(7, 63, 66, 0.3);
border-radius: 999px;
padding: 8px 12px;
color: var(--ck-ink);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-map-link::before {
content: "⌖";
margin-right: 7px;
color: var(--ck-terracotta);
font-size: 1rem;
line-height: 1;
}
.ck-best {
color: var(--ck-terracotta);
font-weight: 800;
}
.ck-route-listing {
display: grid;
gap: 34px;
}
.ck-route-listing--filterable {
gap: 28px;
}
.ck-route-listing--single {
padding-top: 0;
}
.ck-route-results {
display: grid;
gap: 28px;
}
.ck-route-card {
position: relative;
display: grid;
gap: 18px;
overflow: hidden;
border: 1px solid var(--ck-line);
border-radius: 14px;
background:
linear-gradient(145deg, rgba(255, 247, 232, 0.72), rgba(215, 198, 170, 0.22)),
var(--ck-sand);
box-shadow: 0 24px 80px rgba(7, 63, 66, 0.08);
padding: clamp(18px, 3vw, 28px);
}
.ck-route-card::before {
content: "ROUTE";
position: absolute;
right: -10px;
top: 8px;
color: rgba(7, 63, 66, 0.045);
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(4.5rem, 10vw, 9rem);
font-weight: 800;
line-height: 0.82;
pointer-events: none;
}
.ck-route-card__head {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
.ck-route-card__head .ck-number {
position: static;
color: var(--ck-terracotta);
text-shadow: none;
}
.ck-route-card h2 a {
color: inherit;
}
.ck-route-card__excerpt {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0;
}
.ck-route-card__stats {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: 0;
background: var(--ck-line);
border: 1px solid var(--ck-line);
border-radius: 12px;
overflow: hidden;
}
.ck-route-card__stats span {
display: grid;
gap: 4px;
min-height: 76px;
align-content: center;
background: rgba(255, 247, 232, 0.5);
padding: 12px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(1.42rem, 3vw, 1.85rem);
font-weight: 700;
line-height: 1;
}
.ck-route-card__stats small {
font-family: "DM Sans", system-ui, sans-serif;
font-size: 0.68rem;
text-transform: uppercase;
}
.ck-route-card__embed {
position: relative;
z-index: 1;
overflow: hidden;
border: 1px solid rgba(7, 63, 66, 0.18);
border-radius: 12px;
background: var(--ck-ink);
}
.ck-route-card__embed iframe {
display: block;
width: 100%;
height: 460px;
border: 0;
}
.ck-route-card__note {
position: relative;
z-index: 1;
margin: 0;
border-left: 4px solid var(--ck-terracotta);
background: rgba(255, 247, 232, 0.46);
padding: 12px 14px;
color: var(--ck-ink);
font-weight: 700;
}
.ck-route-card__actions {
position: relative;
z-index: 1;
}
.ck-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.ck-actions a {
display: inline-flex;
min-height: 42px;
align-items: center;
border: 1px solid currentColor;
border-radius: 4px;
padding: 9px 13px;
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-actions .ck-action--primary {
background: var(--ck-ink);
color: var(--ck-sand);
}
.ck-actions .ck-action--primary::before {
content: "⌖";
margin-right: 8px;
color: var(--ck-aqua);
font-size: 1rem;
line-height: 1;
}
.ck-actions .ck-action--strava::before {
content: "▲";
}
.ck-generic-page,
.ck-single {
min-height: 60vh;
}
.ck-single__hero {
display: grid;
gap: 24px;
align-items: end;
}
.ck-single__hero h1 {
margin-bottom: 12px;
}
.ck-single__hero p {
max-width: 560px;
font-size: 1.12rem;
}
.ck-single__meta {
margin: 0 0 16px;
}
.ck-single__quick-actions {
margin-top: 18px;
}
.ck-single__image {
height: 420px;
}
.ck-single__body {
max-width: 780px;
margin-top: 34px;
}
.ck-place-single {
position: relative;
overflow: hidden;
isolation: isolate;
}
.ck-place-single::before {
content: "MALLORCA";
position: absolute;
top: 34px;
right: 3%;
z-index: 0;
color: rgba(7, 63, 66, 0.045);
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(7rem, 18vw, 18rem);
font-weight: 800;
line-height: 0.78;
pointer-events: none;
}
.ck-place-single__hero {
position: relative;
z-index: 1;
display: grid;
gap: 28px;
align-items: end;
border-bottom: 1px solid var(--ck-line);
padding-bottom: clamp(28px, 5vw, 58px);
}
.ck-place-single__copy {
position: relative;
z-index: 1;
}
.ck-back-link {
display: inline-flex;
width: fit-content;
margin-bottom: 24px;
border-bottom: 1px solid currentColor;
padding-bottom: 6px;
color: var(--ck-ink);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ck-place-single .ck-single__meta {
margin: 0 0 18px;
}
.ck-place-single__best {
max-width: 620px;
border-left: 5px solid var(--ck-terracotta);
background:
linear-gradient(135deg, rgba(255, 247, 232, 0.78), rgba(89, 221, 203, 0.12)),
rgba(255, 247, 232, 0.44);
box-shadow: 0 18px 60px rgba(7, 63, 66, 0.08);
padding: 18px 20px;
}
.ck-place-single__best span {
display: block;
margin-bottom: 7px;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-place-single__best strong {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.35rem, 2.3vw, 2rem);
font-style: italic;
font-weight: 400;
line-height: 1.15;
}
.ck-place-single .ck-actions a {
border-radius: 999px;
min-height: 48px;
padding: 11px 16px;
}
.ck-place-single__image {
height: min(64vh, 640px);
min-height: 360px;
margin: 0;
border: 1px solid rgba(7, 63, 66, 0.22);
box-shadow: 0 28px 90px rgba(7, 63, 66, 0.16);
}
.ck-place-single__image::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(7, 63, 66, 0) 42%, rgba(7, 63, 66, 0.62) 100%),
radial-gradient(circle at 24% 18%, rgba(89, 221, 203, 0.26), transparent 38%);
pointer-events: none;
}
.ck-place-single__image figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
z-index: 1;
width: fit-content;
max-width: calc(100% - 28px);
border: 1px solid rgba(255, 247, 232, 0.35);
border-radius: 999px;
background: rgba(7, 63, 66, 0.78);
color: var(--ck-sand);
padding: 8px 12px;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-place-single__content {
position: relative;
z-index: 1;
display: grid;
gap: 30px;
margin-top: clamp(32px, 5vw, 58px);
align-items: start;
}
.ck-place-single__story {
max-width: none;
border-top: 1px solid var(--ck-line);
padding-top: 22px;
}
.ck-place-single__story .ck-label {
margin-bottom: 18px;
}
.ck-place-single__story .ck-label + p {
max-width: 900px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.22rem, 2vw, 1.6rem);
font-style: italic;
line-height: 1.55;
}
.ck-place-single__story p:not(.ck-label) {
max-width: 850px;
}
.ck-place-single__aside {
border: 1px solid var(--ck-line);
border-radius: 14px;
background:
linear-gradient(160deg, rgba(255, 247, 232, 0.76), rgba(215, 198, 170, 0.26)),
var(--ck-sand);
box-shadow: 0 24px 80px rgba(7, 63, 66, 0.08);
padding: clamp(20px, 3vw, 28px);
}
.ck-place-single__aside h2 {
margin: 6px 0 18px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(2.3rem, 4vw, 3.2rem);
line-height: 0.92;
text-transform: uppercase;
}
.ck-place-single__facts {
display: grid;
gap: 0;
margin: 0;
}
.ck-place-single__facts div {
display: grid;
grid-template-columns: minmax(90px, 0.38fr) minmax(0, 1fr);
gap: 14px;
border-top: 1px solid rgba(7, 63, 66, 0.2);
padding: 13px 0;
}
.ck-place-single__facts div:last-child {
border-bottom: 1px solid rgba(7, 63, 66, 0.2);
}
.ck-place-single__facts dt {
color: var(--ck-terracotta);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-place-single__facts dd {
margin: 0;
font-weight: 800;
}
.ck-route-single {
position: relative;
overflow: hidden;
isolation: isolate;
}
.ck-route-single::before {
content: "TRAMUNTANA";
position: absolute;
top: 34px;
right: 3%;
z-index: 0;
color: rgba(7, 63, 66, 0.045);
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(5.2rem, 14vw, 15rem);
font-weight: 800;
line-height: 0.78;
pointer-events: none;
}
.ck-route-single__hero,
.ck-route-single__map,
.ck-route-single__content {
position: relative;
z-index: 1;
}
.ck-route-single__hero {
display: grid;
gap: 28px;
align-items: end;
border-bottom: 1px solid var(--ck-line);
padding-bottom: clamp(28px, 5vw, 58px);
}
.ck-route-single__note {
max-width: 680px;
border-left: 5px solid var(--ck-terracotta);
background:
linear-gradient(135deg, rgba(255, 247, 232, 0.78), rgba(89, 221, 203, 0.12)),
rgba(255, 247, 232, 0.44);
box-shadow: 0 18px 60px rgba(7, 63, 66, 0.08);
padding: 18px 20px;
}
.ck-route-single__note span {
display: block;
margin-bottom: 7px;
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-route-single__note strong {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.25rem, 2.1vw, 1.85rem);
font-style: italic;
font-weight: 400;
line-height: 1.2;
}
.ck-route-single .ck-actions a {
border-radius: 999px;
min-height: 48px;
padding: 11px 16px;
}
.ck-route-single__stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
border: 1px solid rgba(255, 247, 232, 0.24);
border-radius: 16px;
background: var(--ck-line);
box-shadow: 0 28px 90px rgba(7, 63, 66, 0.14);
}
.ck-route-single__stats span {
display: grid;
gap: 8px;
min-height: 118px;
align-content: center;
background:
linear-gradient(145deg, rgba(7, 63, 66, 0.95), rgba(12, 86, 87, 0.92)),
var(--ck-ink);
color: var(--ck-sand);
padding: 18px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(2.15rem, 4.5vw, 4rem);
font-weight: 800;
line-height: 0.9;
}
.ck-route-single__stats small {
color: var(--ck-aqua);
font-family: "DM Sans", system-ui, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.ck-route-single__map {
overflow: hidden;
margin-top: clamp(28px, 5vw, 58px);
border: 1px solid rgba(7, 63, 66, 0.22);
border-radius: 16px;
background: var(--ck-ink);
box-shadow: 0 28px 90px rgba(7, 63, 66, 0.16);
}
.ck-route-single__map iframe {
display: block;
width: 100%;
height: min(68vh, 650px);
min-height: 420px;
border: 0;
}
.ck-route-single__content {
display: grid;
gap: 30px;
margin-top: clamp(32px, 5vw, 58px);
align-items: start;
}
.ck-route-single__story {
max-width: none;
border-top: 1px solid var(--ck-line);
padding-top: 22px;
}
.ck-route-single__story .ck-label {
margin-bottom: 18px;
}
.ck-route-single__story .ck-label + p {
max-width: 900px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(1.18rem, 1.9vw, 1.5rem);
font-style: italic;
line-height: 1.58;
}
.ck-route-single__story p:not(.ck-label) {
max-width: 850px;
}
.ck-route-single__aside {
border: 1px solid var(--ck-line);
border-radius: 14px;
background:
linear-gradient(160deg, rgba(255, 247, 232, 0.76), rgba(215, 198, 170, 0.26)),
var(--ck-sand);
box-shadow: 0 24px 80px rgba(7, 63, 66, 0.08);
padding: clamp(20px, 3vw, 28px);
}
.ck-route-single__aside h2 {
margin: 6px 0 18px;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: clamp(2.3rem, 4vw, 3.2rem);
line-height: 0.92;
text-transform: uppercase;
}
.ck-route-single__facts {
display: grid;
gap: 0;
margin: 0;
}
.ck-route-single__facts div {
display: grid;
grid-template-columns: minmax(90px, 0.38fr) minmax(0, 1fr);
gap: 14px;
border-top: 1px solid rgba(7, 63, 66, 0.2);
padding: 13px 0;
}
.ck-route-single__facts div:last-child {
border-bottom: 1px solid rgba(7, 63, 66, 0.2);
}
.ck-route-single__facts dt {
color: var(--ck-terracotta);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-route-single__facts dd {
margin: 0;
font-weight: 800;
}
.ck-index-card {
border-top: 1px solid var(--ck-line);
padding: 20px 0;
}
.ck-empty {
border: 1px solid var(--ck-line);
border-radius: 8px;
padding: 24px;
background: rgba(255, 247, 232, 0.36);
}
.ck-beach-callout {
justify-content: space-between;
}
.ck-footer {
background: var(--ck-ink);
color: var(--ck-sand);
padding: 28px 4% 18px;
}
.ck-footer__top {
display: flex;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
max-width: var(--ck-max);
margin: 0 auto;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.ck-footer__word {
max-width: var(--ck-max);
margin: 16px auto 0;
font-family: "Barlow Condensed", Impact, sans-serif;
font-size: 5.5rem;
font-weight: 800;
line-height: 0.92;
letter-spacing: 0;
}
@media (min-width: 760px) {
.ck-hero h1 {
font-size: 9rem;
}
.ck-hero__media {
height: 410px;
margin-top: -62px;
margin-left: 14%;
width: 78%;
}
.ck-hero__foot {
grid-template-columns: 1fr 1.1fr auto;
align-items: center;
}
.ck-tagline {
font-size: 2rem;
}
.ck-chapter h2,
.ck-outside h2,
.ck-note h2,
.ck-page-hero h1,
.ck-generic-page h1,
.ck-single h1 {
font-size: 6.5rem;
}
.ck-teaser-grid {
grid-template-columns: 1fr 1.2fr 0.9fr;
align-items: start;
}
.ck-teaser--wide {
margin-top: 72px;
}
.ck-teaser--short {
margin-top: 28px;
}
.ck-teaser--tall .ck-teaser__image {
height: 360px;
}
.ck-teaser--wide .ck-teaser__image {
height: 420px;
}
.ck-teaser--short .ck-teaser__image {
height: 300px;
}
.ck-section-head,
.ck-page-hero,
.ck-note,
.ck-single__hero {
grid-template-columns: 1fr 1.1fr;
}
.ck-outside__grid {
grid-template-columns: 1.35fr 1fr;
align-items: end;
}
.ck-outside__image {
height: 410px;
}
.ck-filter-controls {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: end;
}
.ck-place-results .ck-place-card {
grid-template-columns: 0.9fr 1fr;
}
.ck-place-results .ck-place-card:nth-child(even) {
grid-template-columns: 1fr 0.9fr;
}
.ck-place-results .ck-place-card:nth-child(even) .ck-place-card__image {
order: 2;
}
.ck-place-card__image {
min-height: 430px;
}
.ck-place-single__hero {
grid-template-columns: 0.88fr 1.12fr;
}
.ck-place-single__content {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.ck-place-single__aside {
position: sticky;
top: 98px;
}
.ck-route-single__hero {
grid-template-columns: minmax(0, 1fr) minmax(310px, 0.62fr);
}
.ck-route-single__content {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.ck-route-single__aside {
position: sticky;
top: 98px;
}
.ck-single__image {
height: 520px;
}
.ck-footer__word {
font-size: 10rem;
}
}
@media (min-width: 1100px) {
.ck-filter-panel {
grid-template-columns: 0.72fr 1.28fr;
align-items: end;
}
.ck-filter-controls {
grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(132px, 0.7fr)) auto;
}
.ck-route-filter-controls {
grid-template-columns: minmax(180px, 1.3fr) minmax(132px, 0.7fr) minmax(160px, 0.7fr) auto;
}
.ck-hero h1 {
font-size: 13rem;
}
.ck-hero__media {
height: 470px;
margin-top: -98px;
}
.ck-margin-note {
position: absolute;
left: 4%;
top: 48%;
display: block;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
}
.ck-seal {
top: 39%;
width: 122px;
height: 122px;
font-size: 0.72rem;
}
.ck-seal b {
font-size: 2.2rem;
}
.ck-chapter h2,
.ck-outside h2,
.ck-note h2,
.ck-page-hero h1,
.ck-generic-page h1,
.ck-single h1 {
font-size: 8.3rem;
}
.ck-route-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.ck-route-listing--single {
grid-template-columns: 1fr;
}
.ck-route-single__hero {
grid-template-columns: minmax(0, 1fr) 460px;
gap: 48px;
}
.ck-route-single__content {
grid-template-columns: minmax(0, 1fr) 380px;
gap: 48px;
}
.ck-place-single__hero {
grid-template-columns: 0.78fr 1.22fr;
gap: 42px;
}
.ck-place-single__copy {
padding-bottom: 34px;
}
.ck-place-single__content {
grid-template-columns: minmax(0, 1fr) 380px;
gap: 48px;
}
.ck-place-single__image {
height: min(72vh, 680px);
}
}
@media (min-width: 1420px) {
.ck-hero h1 {
font-size: 15.5rem;
}
.ck-scroll-cue {
display: flex;
}
.ck-footer__word {
font-size: 13rem;
}
}
@media (max-width: 759px) {
body.admin-bar .ck-header {
top: 46px;
}
body.home.admin-bar .ck-header {
top: 46px;
}
body.home.admin-bar .ck-hero {
min-height: calc(100vh - 46px);
min-height: calc(100svh - 46px);
}
.ck-header {
grid-template-columns: 1fr;
gap: 12px;
padding: 17px 5%;
}
.ck-header__line {
display: none;
}
.ck-nav__menu {
gap: 14px;
overflow-x: auto;
padding-bottom: 2px;
font-size: 0.72rem;
}
.ck-hero,
.ck-chapter,
.ck-note,
.ck-page-hero,
.ck-listing,
.ck-route-listing,
.ck-generic-page,
.ck-single {
padding-left: 5%;
padding-right: 5%;
}
.ck-place-single {
padding-top: 42px;
}
.ck-place-single::before {
top: 88px;
right: -12%;
font-size: 7.5rem;
}
.ck-place-single .ck-actions a {
width: 100%;
justify-content: center;
}
.ck-place-single__image {
min-height: 320px;
height: 56vh;
}
.ck-place-single__facts div {
grid-template-columns: 1fr;
gap: 4px;
}
.ck-route-single {
padding-top: 42px;
}
.ck-route-single::before {
top: 88px;
right: -42%;
font-size: 7rem;
}
.ck-route-single .ck-actions a {
width: 100%;
justify-content: center;
}
.ck-route-card__head {
grid-template-columns: 58px minmax(0, 1fr);
}
.ck-route-card__stats {
grid-template-columns: 1fr;
}
.ck-route-card__embed iframe {
height: 360px;
}
.ck-route-single__stats {
grid-template-columns: 1fr;
}
.ck-route-single__stats span {
min-height: 88px;
}
.ck-route-single__map iframe {
min-height: 360px;
height: 58vh;
}
.ck-route-single__facts div {
grid-template-columns: 1fr;
gap: 4px;
}
.ck-hero__line span:last-child {
display: none;
}
.ck-seal {
right: 3%;
top: 28%;
}
body.home .ck-seal {
top: 36%;
bottom: auto;
width: 82px;
height: 82px;
font-size: 0.52rem;
}
body.home .ck-seal b {
font-size: 1.35rem;
}
body.home .ck-hero {
grid-template-rows: auto auto 1fr auto;
padding-top: 118px;
padding-bottom: 22px;
}
body.home .ck-hero__foot {
gap: 12px;
padding: 15px;
}
.ck-hero__actions {
justify-content: flex-start;
}
.ck-hero__actions a {
min-height: 38px;
padding: 9px 13px;
font-size: 0.72rem;
}
.ck-hero__quick {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ck-hero__quick a {
min-height: 46px;
padding: 11px 12px;
font-size: 0.7rem;
}
.ck-scroll-cue {
display: none;
}
.ck-chapter h2,
.ck-outside h2,
.ck-note h2,
.ck-page-hero h1,
.ck-generic-page h1,
.ck-single h1 {
font-size: 4.35rem;
}
.ck-route-card {
padding: 16px;
}
.ck-route-card__head {
grid-template-columns: 1fr;
}
.ck-route-card__stats {
grid-template-columns: 1fr;
}
.ck-route-card__embed iframe {
height: 380px;
}
.ck-footer__word {
font-size: 5.2rem;
}
}
@media (max-width: 420px) {
.ck-hero h1 {
font-size: 4.1rem;
}
body.home .ck-hero h1 {
font-size: clamp(3.8rem, 18vw, 4.9rem);
}
body.home .ck-hero h1 span:last-child {
margin-left: 8%;
}
.ck-hero h1 span:last-child {
margin-left: 14%;
}
.ck-hero__media {
height: 310px;
}
.ck-chapter h2,
.ck-outside h2,
.ck-note h2,
.ck-page-hero h1,
.ck-generic-page h1,
.ck-single h1 {
font-size: 3.7rem;
}
.ck-teaser__title strong,
.ck-place-card__body h2,
.ck-route-card h2,
.ck-index-card h2 {
font-size: 2.22rem;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
}
}