@font-face {
font-family: 'SourceSerif';
src: url(//destinationality.com/wp-content/themes/destinationality/assets/fonts/source-serif-pro-latin-400-normal.woff2) format('woff2');
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'SourceSerif';
src: url(//destinationality.com/wp-content/themes/destinationality/assets/fonts/source-serif-pro-latin-400-italic.woff2) format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'PublicSans';
src: url(//destinationality.com/wp-content/themes/destinationality/assets/fonts/PublicSans-Bold.woff2) format('woff2');
font-weight: 700;
font-display: swap;
font-style: normal;
} html, body, div, span, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp, small, strong,
sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
figure, footer, header, menu, nav, section, time,
mark, audio, video, details, summary {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
article, aside, figure, footer, header, nav, section,
details, summary {
display: block;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html, body {
min-height: 100%;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
height: auto;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
code, kbd, samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
line-height: 1.15;
text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
textarea:not([rows]) {
min-height: 10em;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
th {
font-weight: bold;
vertical-align: bottom;
}
td {
vertical-align: top;
}
:target {
scroll-margin-block: 5ex;
}
::selection {
color: var(--theme-background);
background-color: #777b87;
text-shadow: none;
} :root {
font-size: 62.5%; --theme-background: #e6e6e6;
--accent: #f7f7f7;
--accent-hover: #ffffff; --font-family-primary: "PublicSans", sans-serif;
--font-family-secondary: "SourceSerif", sans-serif;
--text-color: #000;
--text-muted: #6e7075;
--font-size-xs: 1.1rem;
--font-size-s: 1.4rem;
--font-size-m: 2rem;
--line-height: 1.3; --border: 1px solid rgba(0, 0, 0, 0.1); --spacer-s: 0.8rem;
--spacer-m: 1.6rem;
--spacer-l: 3.2rem;
--spacer-xl: 6.4rem;
--spacer-xxl: 9.6rem;
--spacer-3xl: 19.2rem; --logo-height: 144px;
--logo-scroll-lift: 42px;
--container: 100%;
--grid-gap: 4.8rem;
--stories-grid-gap: 16rem;
}
html {
background-color: rgba(var(--text-color));
}
body {
position: relative;
z-index: 0;
font-family: var(--font-family-primary), sans-serif;
font-size: var(--font-size-m);
line-height: var(--line-height);
font-weight: 700;
color: var(--text-color);
} a {
color: var(--text-color);
text-decoration: none;
transition: color .3s;
}
a:hover {
color: var(--text-muted);
}
.button, .story-content .wp-block-buttons a {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacer-m) var(--spacer-l);
background-color: var(--accent);
transition: background-color .3s;
gap: var(--spacer-s);
text-decoration: none;
font-family: var(--font-family-primary);
color: var(--text-color);
border-radius: 0;
}
.button:hover {
color: initial;
background-color: var(--accent-hover);
}
.button-pill {
font-size: var(--font-size-s);
text-transform: none;
background-color: var(--accent);
padding: var(--spacer-s) var(--spacer-m);
display: inline-block;
transition: background-color .3s;
}
.button-pill:hover {
color: initial;
background-color: var(--accent-hover);
} .wrapper {
background-color: var(--theme-background);
padding-top: calc(var(--logo-height) + var(--spacer-xl));
}
.container {
width: 100%;
margin: 0 auto;
padding: 0 var(--grid-gap);
}
main {
overflow: clip;
min-height: 100dvh;
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
main section {
position: relative;
} .header {
position: fixed;
z-index: 1020;
width: 100%;
top: 0;
right: 0;
font-size: var(--font-size-s);
}
.header .container {
display: flex;
justify-content: flex-end;
}
.header .menu a {
padding-top: var(--spacer-s);
padding-bottom: var(--spacer-s);
height: 48px;
display: inline-flex;
align-items: center;
}
.header .logo {
display: inline-block;
height: auto;
position: fixed;
transform: translate(-50%, 0);
left: 50%;
background-color: var(--text-color);
color: var(--theme-background);
top: 0;
transition: transform .4s ease;
will-change: transform;
}
.header .logo img {
height: var(--logo-height);
display: block;
}
body.logo-scrolled .header .logo {
transform: translate(-50%, calc(var(--logo-scroll-lift) * -1));
}
@media (prefers-reduced-motion: reduce) {
.header .logo {
transition: none;
}
}
.menu {
display: flex;
}
.menu a {
padding-right: var(--spacer-m);
}
.menu li:last-child a {
padding-right: 0;
}
.menu-toggle {
display: none;
border: none;
background: transparent;
width: auto;
height: 32px;
padding: 0;
color: var(--text-color);
cursor: pointer;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
top: var(--spacer-s);
z-index: 1022;
}
.menu-toggle-text {
font-family: var(--font-family-primary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1;
}
.menu-overlay {
display: none;
}
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
content: "";
display: block;
width: 16px;
height: 2px;
background-color: currentColor;
}
.menu-toggle-icon {
position: relative;
}
.menu-toggle-icon::before,
.menu-toggle-icon::after {
position: absolute;
left: 0;
}
.menu-toggle-icon::before {
top: -5px;
}
.menu-toggle-icon::after {
top: 5px;
} .footer {
border-top: var(--border);
padding-bottom: var(--grid-gap);
}
.footer-inner {
padding: var(--spacer-xxl) 0 var(--spacer-xxl) 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.footer-cta-nav {
display: flex;
justify-content: center;
gap: var(--spacer-m);
flex-wrap: wrap;
}
.footer-cta-nav a svg {
flex-shrink: 0;
}
.footer-tag {
flex-shrink: 0;
text-align: center;
cursor: default;
margin-bottom: var(--spacer-l);
}
.more-to-come {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: var(--spacer-m);
cursor: default;
}
.footer-bottom {
display: flex;
justify-content: space-between;
font-size: var(--font-size-s);
border-top: var(--border);
border-bottom: var(--border);
padding: var(--spacer-m) 0;
}
.footer-nav {
display: flex;
gap: var(--spacer-m);
flex-wrap: wrap;
}
.footer-nav a {
white-space: nowrap;
} .hero {
text-align: center;
padding-bottom: var(--spacer-xl);
}
.stories-grid {
display: flex;
flex-wrap: wrap;
gap: var(--spacer-xl) var(--stories-grid-gap);
justify-content: flex-start;
align-items: stretch;
padding: 0 calc(var(--stories-grid-gap) - var(--grid-gap)) var(--spacer-3xl);
}
.stories-grid:not(:has(> :nth-child(4))) {
justify-content: center;
}
.stories-grid>* {
flex: 0 0 calc((100% - (2 * var(--stories-grid-gap))) / 3);
height: 100%;
}
.story-excerpt {
display: inline-flex;
flex-direction: column;
transition: transform .5s ease;
}
@media (max-width: 1920px) {
:root {
--stories-grid-gap: 10.4rem;
}
}
@media (max-width: 1367px) {
:root {
--stories-grid-gap: 6.4rem;
}
}
@media (max-width: 1200px) {
:root {
--stories-grid-gap: var(--grid-gap);
}
}
@media (max-width: 768px) {
.stories-grid:has(> :nth-child(2)) {
justify-content: flex-start;
}
.stories-grid>* {
flex-basis: calc((100% - var(--stories-grid-gap)) / 2);
}
}
.story-excerpt:hover {
transform: translateY(-8px);
color: initial;
}
.excerpt-meta {
font-size: var(--font-size-xs);
font-weight: 700;
text-transform: uppercase;
margin-bottom: var(--spacer-s);
}
.excerpt-meta .divider {
display: inline-block;
padding: 0 var(--spacer-s);
}
.story-excerpt figure {
margin-bottom: var(--spacer-m);
}
.story-excerpt h3 {
margin-bottom: var(--spacer-m);
}
.more-cta {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: var(--spacer-3xl);
}
.more-cta .button, .footer .button {
min-width: 220px;
} .all-categories {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--spacer-s);
list-style: none;
max-width: 1440px;
margin: 0 auto;
}
.all-categories li {
margin: 0;
}
.all-categories a {
white-space: nowrap;
min-width: 120px;
} .not-found {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
text-align: center;
}
.not-found h1 {
text-align: center;
margin-bottom: var(--spacer-l);
color: var(--text-muted);
}
.not-found h1 span {
font-size: 12rem;
display: block;
line-height: 1;
color: var(--text-color);
}
.not-found .button {
width: 160px;
margin: 0 auto;
} .destination-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: var(--spacer-xl);
}
.destination-tree {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
.destination-tree.last {
flex-wrap: wrap;
gap: var(--spacer-s);
padding-top: var(--spacer-m);
}
.indent-arrow {
display: flex;
}
.indent-arrow span {
display: flex;
flex-shrink: 0;
justify-content: center;
align-items: center;
padding: 0 var(--spacer-s);
font-family: var(--font-family-secondary);
font-weight: 400;
}
.indent-arrow svg {
width: 32px;
stroke-width: 0.75px;
} .pagination {
position: relative;
display: flex;
justify-content: center;
align-content: center;
width: 100%;
font-size: var(--font-size-s);
margin-bottom: var(--spacer-3xl);
}
.page-numbers.current {
cursor: default;
background-color: var(--text-color);
color: var(--theme-background);
width: 32px;
height: 32px;
display: inline-flex;
align-content: center;
justify-content: center;
align-items: center;
}
.pagination-separator {
margin: 4rem 0;
}
.nav-links>* {
margin: 0 .4rem;
}
.nav-links .placeholder {
display: none;
visibility: hidden;
}
.pagination a {
padding: 4px 8px;
display: inline-flex;
min-height: 42px;
transition: all .3s;
align-content: center;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.next.page-numbers,
.prev.page-numbers {
padding-left: 16px;
padding-right: 16px;
}
.pagination .dots {
transform: translateY(-0.3em);
color: var(--light-text);
}
.nav-short {
display: none;
} .story-content {
max-width: 720px;
margin: 0 auto;
padding-bottom: var(--spacer-3xl);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: var(--font-family-secondary);
font-weight: 400;
font-size: var(--font-size-m);
line-height: 1.5;
}
.story-content>* {
width: 100%;
}
.story-content figure {
position: relative;
}
.story-content figure cite {
font-style: normal;
font-family: var(--font-family-primary);
color: var(--text-muted);
font-size: var(--font-size-xs);
position: absolute;
right: -24px;
bottom: 0;
writing-mode: vertical-rl;
display: block;
}
.story-meta-wrapper {
font-size: var(--font-size-xs);
text-transform: uppercase;
font-family: var(--font-family-primary);
font-weight: 700;
display: flex;
gap: var(--spacer-l);
width: 100%;
}
.story-meta .meta-label {
font-family: var(--font-family-secondary);
font-weight: 400;
}
.addtoany_content {
margin-top: var(--spacer-xl) !important;
}  .flow>*+* {
margin-block-start: 3.2rem;
}
.flow :is(h2 + *, h3 + *, h4 + *) {
margin-block-start: 2.4rem;
} b, strong {
font-weight: 700;
}
i, em {
font-style: italic;
}
.story-content .has-drop-cap:not(:focus)::first-letter {
font-size: 8em;
margin: .075em .05em .05em 0;
}
.story-content h1, .story-content h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-m);
font-weight: 700;
}
.story-content h3,
.story-content h4,
.story-content h5,
.story-content h6 {
font-family: var(--font-family-primary);
font-size: var(--font-size-s);
text-transform: uppercase;
font-weight: 700;
}
.story-content a {
text-decoration: underline;
} .story-content blockquote,
.story-content .wp-block-quote,
.story-content .wp-block-pullquote {
border-top: var(--border);
border-bottom: var(--border);
padding: var(--spacer-l) 0;
text-align: center;
font-family: var(--font-family-primary);
}
.story-content blockquote p {
max-width: 720px;
margin: 0 auto;
}
.story-content blockquote cite,
.story-content .wp-block-pullquote cite {
color: var(--text-muted);
display: block;
margin-top: var(--spacer-m);
}
.story-content cite {
position: relative;
font-style: normal;
font-size: var(--font-size-s);
}
.story-content cite a {
border-bottom: none !important;
} .story-content ul {
list-style: none;
}
.story-content ul li {
position: relative;
padding-left: 4rem;
margin-bottom: var(--spacer-s);
}
.story-content ul li:last-child {
margin-bottom: 0;
}
.story-content ul li:before {
content: "";
position: absolute;
left: 12px;
top: 8px;
width: 0.8rem;
height: 0.8rem;
text-align: center;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .1);
}
.story-content ol {
list-style-type: none;
counter-reset: li-counter;
}
.story-content ol>li {
position: relative;
padding-left: 4rem;
margin-bottom: var(--spacer-m);
counter-increment: roman;
}
.story-content ol>li:before {
content: counter(li-counter);
counter-increment: li-counter;
position: absolute;
left: 0;
top: -3px;
width: 2.8rem;
height: 2.8rem;
color: var(--text-muted);
text-align: center;
border-radius: 50%;
font-size: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .05);
}
.story-content ul ul,
.story-content ul ol,
.story-content ol ul,
.story-content ol ol {
margin-top: var(--spacer-s);
} .story-content hr,
.story-content .wp-block-separator {
border-top: var(--border);
border-top-width: 1px;
margin-top: var(--spacer-l);
margin-bottom: var(--spacer-l);
}
:root :where(.wp-block-separator.is-style-dots) {
height: 12px;
}
:root :where(.wp-block-separator.is-style-dots)::before {
color: currentColor;
content: "***";
font-family: inherit;
font-size: inherit;
letter-spacing: var(--spacer-s);
padding-left: 0;
text-align: center;
} .page-hero {
text-align: center;
padding-bottom: 2.4rem;
}
.nothing-found {
display: block;
width: 100%;
text-align: center;
}
.content-legal {
font-size: var(--font-size-s);
}  @media (max-width: 1640px) {
:root {
--spacer-3xl: 12.8rem;
--grid-gap: 2.4rem;
}
.story-content {
max-width: 640px;
}
}
@media (max-width: 1440px) {} @media (max-width: 1199px) {} @media (max-width: 991px) {} @media (max-width: 767px) {
:root {
--spacer-3xl: 6.4rem;
--spacer-xxl: 6.4rem;
--spacer-xl: 3.2rem;
--grid-gap: 1.6rem;
--font-size-s: 1.3rem;
--font-size-m: 1.6rem;
--logo-height: 112px;
--logo-scroll-lift: 32px;
}
.story-content {
--font-size-m: 2rem;
}
.story-meta-wrapper {
gap: var(--spacer-s);
flex-direction: column;
}
.story-content figure cite {
writing-mode: horizontal-tb;
right: 0;
bottom: -20px;
}
.menu-toggle {
display: inline-flex;
margin-left: auto;
}
.header .container {
align-items: center;
min-height: 48px;
}
.header .site-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--theme-background);
border-bottom: var(--border);
text-align: right;
font-size: var(--font-size-m);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
z-index: 1021;
padding: calc(var(--logo-height) + var(--spacer-m)) var(--grid-gap) var(--spacer-m);
}
.menu-overlay {
display: block;
position: fixed;
inset: 0;
border: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .3s ease, visibility .3s ease;
z-index: 1020;
}
.header .menu {
flex-direction: column;
}
.header .menu a {
padding-right: 0;
height: auto;
}
body.mobile-menu-open .header .site-nav {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
body.mobile-menu-open .menu-overlay {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.mobile-menu-open .menu-toggle-icon {
transform: rotate(45deg);
}
body.mobile-menu-open .menu-toggle-icon::before {
transform: rotate(-90deg);
top: 0;
}
body.mobile-menu-open .menu-toggle-icon::after {
opacity: 0;
top: 0;
}
.footer-bottom {
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
gap: var(--spacer-m);
}
.footer-nav {
justify-content: center;
}
.all-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.all-categories li {
flex: 1;
}
.all-categories a {
width: 100%;
min-width: auto;
}
.destination-tree {
flex-wrap: wrap;
}
.excerpt-meta .divider {
padding: 0 4px;
}
.indent-arrow span {
padding: 0 4px;
}
.story-excerpt:hover {
transform: none;
}
}
@media (max-width: 600px) {
.story-content .has-drop-cap:not(:focus)::first-letter {
font-size: 5.6em;
}
}