/* Auto-generated CSS bundle — do not edit, built by build-css.sh */
/* === variables.css === */
/* --------------------------------------------------------------------------
CSS Custom Properties - Lorinthe Brand Palette
-------------------------------------------------------------------------- */
/* Breakpoints (reference only — cannot be used as CSS variables in @media)
--bp-xs: 320px small mobile portrait
--bp-sm: 480px mobile landscape
--bp-md: 768px tablet
--bp-lg: 1024px desktop
--bp-xl: 1200px wide */
:root {
/* Brand Colors - matching book cover */
--color-juneberry: #893e59; /* Juneberry*/
--color-rose-dust: #a45e78; /* Rose Dust */
--color-oceanside: #005a6f; /* Oceanside */
--color-sea-green: #20abb2; /* Light Sea Green */
--color-auric: #c88c00; /* Auric */
--color-gold: #e4b330; /* Gambol Gold */
--color-violet: #7d3e89; /* Cadmium Violet */
--color-plum: #a85eb6; /* Purple Plum */
/* Semantic mapping */
--color-primary: var(--color-oceanside); /* Teal for headings / titles */
--color-primary-off: var(--color-sea-green);
--color-secondary: var(--color-juneberry); /* Rose for banners, subtitles, taglines */
--color-secondary-off: var(--color-rose-dust);
--color-highlight: var(--color-auric); /* Gold for accents */
--color-highlight-off: var(--color-gold);
--color-accent: var(--color-violet); /* Accent for buttons */
--color-accent-off: var(--color-plum);
/* Text Colors */
--color-text: #191919; /* Eerie Black */
--color-text-oceanside: var(--color-oceanside); /* Oceanside text */
--color-text-juneberry: var(--color-juneberry); /* Juneberry text */
--color-text-contrast: #fefefe; /* Off White */
--color-text-secondary: #555555; /* Mortar Gray */
--color-text-tertiary: #6a6a6a; /* Dim Gray */
--color-text-muted: #888888; /* Taupe Gray */
/* Background Colors */
--color-background: #fefefe; /* Off White */
--color-background-secondary: #f5f5f5; /* Very light gray */
--color-background-tertiary: #eeeeee; /* Light gray */
--color-border: #e0e0e0; /* Border */
--color-border-dark: #cccccc; /* Darker border */
/* Semantic Colors */
--color-success: #1f711f; /* Fruit Salad */
--color-success-off: #509d50; /* Forest Green */
--color-warning: #c56363; /* Burnt Umber */
--color-error: #c82800; /* Mahogany */
/* Dark base */
--color-caviar: #2d2b2c; /* Caviar */
/* Typography - Corporate fonts (Ghost custom font support) */
--gh-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--gh-font-heading: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-body: var(--gh-font-body);
--font-heading: var(--gh-font-heading);
--font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
/* Font sizes
Note: rem is font compared to root, so to change global fontsize:
html { font-size: 18px; }; (default is 16px )
*/
--font-size-base: 1rem;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-md: var( --font-size-base);
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.5rem;
--font-size-5xl: 3rem;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 6rem;
/* Layout */
--container-max: 1200px;
--container-narrow: 720px;
--header-height: 80px;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 10px 20px rgba(0, 0, 0, 0.3);
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;
}
/* Dark mode - only applies when explicitly set to "Dark" in Ghost admin */
.dark-mode {
--color-primary: #20abb2; /* Sea Green (lighter teal for dark bg) */
--color-secondary: #a45e78; /* Rose Dust (lighter rose for dark bg) */
--color-highlight: #e4b330; /* Gambol Gold (lighter gold for dark bg) */
--color-text: #efecec; /* Bright Gray */
--color-text-secondary: #bdbcbc; /* Lady Gray */
--color-text-tertiary: #999999; /* Spanish Gray */
--color-text-muted: #888888; /* Taupe Gray */
--color-border: #404040; /* Charcoal */
--color-border-dark: #555555; /* Mortar Gray */
--color-background: #2d2b2c; /* Caviar */
--color-background-secondary: #191919; /* Eerie Black */
--color-background-tertiary: #404040; /* Charcoal */
}
/* === screen.css === */
/* ==========================================================================
Lorinthe Theme - Minimal & Clean Ghost Theme
THRIVE — NOT JUST SURVIVE
========================================================================== */
/* --------------------------------------------------------------------------
Base Styles
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 18px;
scroll-padding-top: 80px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
}
/* Headings use Lato */
h1, h2, h3, h4, h5, h6,
.site-title {
font-family: var(--font-heading);
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-highlight); /* Auric gold on hover */
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
font-size: 0.925em;
line-height: 1.5;
padding-left: 1em;
ul, ol {
font-size: 0.975em;
}
}
ul li {
margin-top: 0.5em;
padding-left: var(--spacing-md);
}
strong {
font-weight: 550;
}
blockquote {
font-size: 0.925em;
}
/* --------------------------------------------------------------------------
Site wide Helpers
-------------------------------------------------------------------------- */
.truncate-after-hr,
.truncate-before-hr {
visibility: hidden;
}
.truncate-after-hr.truncate-ready,
.truncate-before-hr.truncate-ready {
visibility: visible;
}
@media (max-width: 320px) {
.hide-mobile {
display: none !important;
}
}
@media (max-width: 768px) {
.hide-tablet {
display: none !important;
}
}
/* --------------------------------------------------------------------------
Ghost Announcement Bar
-------------------------------------------------------------------------- */
.gh-announcement-bar-content {
font-weight: 600 !important;
letter-spacing: 0.03em !important;
}
/* --------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.container-narrow {
max-width: var(--container-narrow);
}
.site-main {
min-height: calc(100vh - var(--header-height) - 200px);
padding: 0;
}
/* --------------------------------------------------------------------------
Buttons (Site-style with Juneberry color)
-------------------------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-base);
font-weight: 600;
color: #fff;
background-color: var(--color-secondary); /* Juneberry */
border: none;
border-radius: var(--radius-full);
cursor: pointer;
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.button:hover {
color: #fff;
background-color: var(--color-secondary-off); /* Rose Dust */
transform: translateY(-1px);
}
/* {{@custom.readmore_label}} */
.readmore-label {
color: var(--color-secondary);
font-variant: all-petite-caps;
font-size: 0.925em;
font-weight: 500;
margin-bottom: var(--spacing-xl);
display: inline-block;
}
.gh-portal-triggerbtn-container {
height: 44px;
}
/* --------------------------------------------------------------------------
Header (Site-style: rounded grey background)
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
min-height: 80px;
background-color: var(--color-background);
}
.site-header .container {
max-width: none;
padding: 0;
background-color: var(--color-background-secondary);
}
/* Section Title */
.section-title {
font-family: var(--font-heading);
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-xl);
}
.section-kicker {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
border-bottom: 2px solid var(--color-highlight);
margin-bottom: var(--spacing-xl);
}
.post-feed-section {
padding: var(--spacing-2xl) 0;
}
/* --------------------------------------------------------------------------
Tag Page
-------------------------------------------------------------------------- */
.tag-header {
margin-bottom: var(--spacing-3xl);
}
.tag-header-cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
background-size: cover;
background-position: center;
border-radius: var(--radius-lg);
color: #fff;
text-align: center;
}
.tag-header-cover::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
border-radius: var(--radius-lg);
}
.tag-header-cover .tag-header-content {
position: relative;
z-index: 1;
padding: var(--spacing-xl);
}
.tag-header-simple {
text-align: center;
padding: var(--spacing-2xl) 0;
}
.tag-title {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-4xl);
font-weight: 700;
color: var(--color-primary); /* Oceanside teal */
}
.tag-description {
margin: 0 0 var(--spacing-md);
font-size: var(--font-size-lg);
opacity: 0.9;
}
.tag-count {
font-size: var(--font-size-sm);
opacity: 0.7;
}
/* --------------------------------------------------------------------------
Author Page
-------------------------------------------------------------------------- */
.author-header {
margin-bottom: var(--spacing-3xl);
}
.author-header-content {
display: flex;
gap: var(--spacing-xl);
align-items: center;
padding: var(--spacing-2xl) 0;
}
.author-avatar-hero {
width: 120px;
height: 120px;
border-radius: var(--radius-full);
object-fit: cover;
}
.author-header-info .author-name {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-primary); /* Oceanside teal */
text-transform: uppercase;
letter-spacing: 0.02em;
}
.author-header-info .author-bio {
margin: 0 0 var(--spacing-md);
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
}
.author-meta {
display: flex;
gap: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.author-website {
font-size: var(--font-size-sm);
margin-top: var(--spacing-sm);
}
/* --------------------------------------------------------------------------
Error Page
-------------------------------------------------------------------------- */
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 50vh;
text-align: center;
}
.error-code {
font-size: 8rem;
font-weight: 700;
line-height: 1;
color: var(--color-text-tertiary);
margin: 0 0 var(--spacing-md);
}
.error-message {
font-size: var(--font-size-xl);
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-xl);
}
.error-link {
color: var(--color-highlight); /* Auric gold */
font-weight: 500;
}
.error-link:hover {
color: var(--color-highlight-off); /* Gambol Gold */
}
/* --------------------------------------------------------------------------
Ghost-specific Styles
-------------------------------------------------------------------------- */
/* Members form states */
[data-members-form].loading .loading,
[data-members-form]:not(.loading) .loading {
display: none;
}
[data-members-form].loading .loading {
display: inline;
}
[data-members-form] .success,
[data-members-form] .error {
display: none;
}
[data-members-form].success .success {
display: block;
}
[data-members-form].error .error {
display: block;
}
/* Responsive images - break out of container-narrow */
.kg-width-wide,
.kg-width-full {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.kg-width-wide img,
.kg-width-full img {
width: 100%;
}
.kg-width-wide {
width: calc(100% + var(--spacing-xl) * 2);
}
.kg-width-full {
width: calc(100% + var(--spacing-lg) * 2);
}
@media (min-width: 768px) {
.kg-width-wide {
width: calc(100vw - var(--spacing-xl) * 2);
}
.kg-width-full {
width: 100vw;
max-width: 100vw;
}
}
/* Card styles */
.kg-card {
margin: var(--spacing-xl) 0 var(--spacing-2xl);
}
.kg-card figcaption {
margin-top: var(--spacing-sm);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.kg-image-card img,
.kg-gallery-card img {
border-radius: var(--radius-md);
}
.kg-width-full img {
border-radius: 0;
}
/* Bookmark card */
.kg-bookmark-card {
background: var(--color-background-secondary);
border-radius: var(--radius-lg);
overflow: hidden;
}
.kg-bookmark-container {
display: flex;
text-decoration: none;
color: var(--color-text);
}
.kg-bookmark-content {
flex: 1;
padding: var(--spacing-lg);
}
.kg-bookmark-title {
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.kg-bookmark-description {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kg-bookmark-metadata {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.kg-bookmark-icon {
width: 16px;
height: 16px;
}
.kg-bookmark-thumbnail {
width: 200px;
flex-shrink: 0;
}
.kg-bookmark-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Callout card */
.kg-callout-card {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-lg);
border-radius: var(--radius-md);
}
.kg-callout-card-grey {
background: var(--color-background-secondary);
}
.kg-callout-card-white {
background: var(--color-background);
border: 1px solid var(--color-border);
}
.kg-callout-card-blue {
background: #e7f1ff;
}
.kg-callout-card-green {
background: #e6f7e6;
}
.kg-callout-card-yellow {
background: #fff9e6;
}
.kg-callout-card-red {
background: #ffe6e6;
}
.kg-callout-card-pink {
background: #ffe6f0;
}
.kg-callout-card-purple {
background: #f0e6ff;
}
.kg-callout-card-accent {
background: var(--color-primary);
color: #fff;
}
.kg-callout-emoji {
font-size: 1.5em;
}
.kg-callout-text {
margin: 0;
}
/* Button card */
.kg-button-card {
text-align: center;
}
.kg-button-card a {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
font-weight: 600;
background: var(--color-highlight); /* Auric gold */
color: #fff;
border-radius: var(--radius-md);
transition: background-color var(--transition-fast);
}
.kg-button-card a:hover {
background: var(--color-highlight-off); /* Gambol Gold */
color: #fff;
}
.kg-button-card.kg-align-left {
text-align: left;
}
/* Toggle card */
.kg-toggle-card {
background: var(--color-background-secondary);
border-radius: var(--radius-md);
padding: var(--spacing-lg);
}
.kg-toggle-heading {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.kg-toggle-heading-text {
font-weight: 600;
}
.kg-toggle-content {
margin-top: var(--spacing-md);
display: none;
}
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content {
display: block;
}
/* Comments */
.post-comments {
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-3xl);
border-top: 1px solid var(--color-border);
}
/* === academy-services.css === */
/* --------------------------------------------------------------------------
Academy Services Section — Stacked Card Layout
-------------------------------------------------------------------------- */
.academy-service-section {
position: relative;
padding: var(--spacing-4xl) 0;
}
.academy-service-section.bg-loaded {
background: url('/assets/images/noordzee/noordzee-sm.webp') center / cover no-repeat;
}
@media (min-width: 768px) {
.academy-service-section.bg-loaded {
background: url('/assets/images/noordzee/noordzee.webp') center / cover no-repeat;
}
}
.academy-service-section::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.85);
}
.academy-service-section > .container {
position: relative;
}
/* Header */
.academy-service-header {
text-align: center;
margin: 0 auto var(--spacing-3xl);
max-width: 800px;
}
.academy-service-kicker {
color: var(--color-text-secondary);
border-color: var(--color-secondary);
}
.academy-service-title {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
margin: 0 0 var(--spacing-lg);
}
@media (min-width: 768px) {
.academy-service-title {
font-size: var(--font-size-4xl);
}
}
.academy-service-description {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0 auto;
}
.academy-service-description p {
margin: 0;
}
/* Cards container */
.academy-service-cards {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
max-width: 800px;
margin: 0 auto;
}
/* Card */
.academy-service-card {
position: relative;
display: block;
background-color: var(--color-background);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
border-left: 4px solid var(--color-secondary);
padding: var(--spacing-lg);
transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.academy-service-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
background-color: var(--color-background-secondary);
}
/* Title link */
.service-card-link {
color: inherit;
}
/* Cycle left border colors: juneberry, oceanside, violet */
.academy-service-card:nth-child(4n+1) {
border-left-color: var(--color-secondary);
}
.academy-service-card:nth-child(4n+2) {
border-left-color: var(--color-primary);
}
.academy-service-card:nth-child(4n+3) {
border-left-color: var(--color-accent);
}
.academy-service-card:nth-child(4n+4) {
border-left-color: var(--color-highlight);
}
/* Card inner layout */
.academy-service-card-inner {
display: flex;
align-items: flex-start;
gap: var(--spacing-lg);
}
/* Icon */
.service-icon {
display: none;
}
.service-icon.has-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
font-size: var(--font-size-xl);
}
/* Cycle icon background + color to match border */
.academy-service-card:nth-child(3n+1) .service-icon.has-icon {
background-color: rgba(137, 62, 89, 0.1);
color: var(--color-secondary);
}
.academy-service-card:nth-child(3n+2) .service-icon.has-icon {
background-color: rgba(0, 90, 111, 0.1);
color: var(--color-primary);
}
.academy-service-card:nth-child(3n+3) .service-icon.has-icon {
background-color: rgba(125, 62, 137, 0.1);
color: var(--color-accent);
}
/* Card text */
.service-card-text {
flex: 1;
min-width: 0;
color: var(--color-text-secondary);
}
.service-card-title {
font-family: var(--font-heading);
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--color-secondary);
margin: 0 var(--spacing-md) var(--spacing-xs) 0;
line-height: 1.4;
}
.service-card-description {
h3 {
font-size: var(--font-size-md);
}
p {
line-height: 1.4;
margin: 0;
}
p + p {
margin-top: var(--spacing-sm);
}
ul {
list-style: none;
padding: 0;
margin: var(--spacing-sm) 0 0 0;
}
li {
padding-left: var(--spacing-md);
position: relative;
}
li::before {
content: "›";
position: absolute;
left: 0;
margin-top: -0.2em;
font-weight: 600;
font-size: 1.25em;
color: var(--color-secondary);
}
}
.service-card-arrow {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
color: var(--color-border);
font-size: var(--font-size-md);
transition: color var(--transition-base);
}
.academy-service-card:hover .service-card-arrow {
color: var(--color-highlight);
}
/* Mobile: description flows full-width below icon + title */
@media (max-width: 767px) {
.academy-service-card-inner {
flex-wrap: wrap;
}
.service-card-text {
display: contents;
}
.service-card-title {
flex: 1;
min-width: 0;
}
.service-card-description {
flex-basis: 100%;
}
}
/* === book-preview.css === */
/* Table of Contents for the book page
Used on https://www.authoritativesales.com/book/ */
.book-preview-box,
ol.book-preview-box {
list-style: none;
padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-2xl) var(--spacing-2xl) !important;
border: 1px solid var(--color-border, #e0dcd5);
border-radius: var(--radius-sm, 6px);
font-size: var(--font-size-sm);
background-color: #f8f7f5;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.04);
/* Suppress circle badge from site-pages.css styled ol */
> li {
padding: 0.2em 0 !important;
border: none !important;
margin-bottom: 0 !important;
}
> li::before {
content: none !important;
}
/* Nested chapter list */
ol {
list-style: none;
padding-left: var(--spacing-lg);
li {
padding: 0 0 0 var(--spacing-sm) !important;
border: none !important;
}
li::before {
content: none !important;
}
}
/* Chapter number column */
.nr-col {
display: inline-block;
width: 1.5em;
}
/* Part heading row */
li:has(> .toc-part-line) {
font-weight: 500;
margin: var(--spacing-md) 0 0 0;
padding: 0;
}
/* Links are display-only, not interactive within TOC items */
.toc-chapter-line,
.toc-part-line {
pointer-events: none;
color: var(--color-text);
}
.toc-chapter-line {
font-size: 0.9em;
}
}
/* Mobile: description flows full-width below icon + title */
@media (max-width: 767px) {
.book-preview-box,
ol.book-preview-box {
padding: var(--spacing-lg) var(--spacing-xs) var(--spacing-xl) var(--spacing-md) !important;
}
}
/* === contact-section.css === */
/* --------------------------------------------------------------------------
Contact Section
-------------------------------------------------------------------------- */
/* Divider bar above contact section */
.contact-divider {
width: 100%;
height: 8px;
background-color: var(--color-secondary);
}
.contact-section {
position: relative;
padding: var(--spacing-4xl) 0;
}
.contact-section.bg-loaded {
background: url('/assets/images/les-arts-valencia/les-arts-valencia-sm.webp') center / cover no-repeat;
}
@media (min-width: 768px) {
.contact-section.bg-loaded {
background: url('/assets/images/les-arts-valencia/les-arts-valencia.webp') center / cover no-repeat;
}
}
.contact-section::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.90);
}
.contact-section > .contact-container {
position: relative;
}
.contact-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
/* Quote */
blockquote {
padding: var(--spacing-lg);
border-left: 4px solid var(--color-highlight);
background-color: var(--color-background-secondary);
margin: 0;
font-family: var(--font-heading);
font-size: var(--font-size-md);
font-style: italic;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0;
}
}
/* Header */
.contact-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xl);
}
.contact-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-highlight);
margin-bottom: var(--spacing-md);
}
.contact-title {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--spacing-md);
}
.three-pillars-description {
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.7;
/* color: rgba(255, 255, 255, 0.75); */
}
@media (min-width: 768px) {
.contact-title {
font-size: var(--font-size-4xl);
}
}
.contact-subtitle {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0;
h2 {
margin-top: 0;
}
}
/* Content Grid */
.contact-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
}
@media (min-width: 768px) {
.contact-content {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-4xl);
}
}
/* Left Column: Info */
.contact-info-title {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--spacing-md);
}
.contact-info-text {
font-size: var(--font-size-base);
line-height: 1.7;
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-xl);
}
/* Email Box */
.contact-email-box {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background-color: var(--color-background-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.contact-email-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-secondary);
color: #fff;
border-radius: var(--radius-md);
}
.contact-email-details {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.contact-email-label {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.contact-email-address {
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-text);
}
.contact-email-address:hover {
color: var(--color-secondary);
}
/* Right Column: Form */
.contact-form {
display: flex;
margin-top: var(--spacing-md);
flex-direction: column;
gap: var(--spacing-lg);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.form-group label {
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text);
}
.form-group input,
.form-group textarea {
padding: var(--spacing-md);
font-family: var(--font-body);
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--color-text-tertiary);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(130, 105, 136, 0.15);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Submit Button */
.contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-xl);
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: 600;
color: #fff;
background-color: var(--color-secondary);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background-color var(--transition-base), transform var(--transition-base);
}
.contact-submit:hover {
background-color: var(--color-secondary-off);
transform: translateY(-2px);
}
.contact-submit:active {
transform: translateY(0);
}
.contact-submit svg {
flex-shrink: 0;
}
/* === featured-carousel.css === */
/* --------------------------------------------------------------------------
Featured Posts Carousel
-------------------------------------------------------------------------- */
.featured-carousel-section {
padding: var(--spacing-3xl) 0 var(--spacing-xl) 0;
background-color: var(--color-highlight);
}
.featured-carousel-header {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-bottom: var(--spacing-xl); */
h2 {
color: var(--color-text-contrast);
}
}
.featured-carousel-title {
font-family: var(--font-heading);
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--color-text);
margin: 0;
}
.featured-carousel-nav {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.carousel-nav-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
cursor: pointer;
color: var(--color-text-secondary);
transition: all var(--transition-fast);
}
.carousel-nav-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.carousel-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.featured-carousel-track-wrapper {
overflow: hidden;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
}
.featured-carousel-track {
display: flex;
gap: var(--spacing-lg);
transition: transform 0.3s ease;
cursor: grab;
}
.featured-carousel-track:active {
cursor: grabbing;
}
.featured-carousel-card {
/* flex: 0 0 calc(25% - var(--spacing-lg) * 3 / 4); */ /* 4 cards */
flex: 0 0 calc(33% - var(--spacing-lg) * 2 / 3); /* 3 cards */
min-width: 220px;
background-color: var(--color-background-secondary);
border-radius: var(--radius-md);
padding: 2px; /* gives white border around */
a {
display: block;
text-decoration: none;
}
}
@media (max-width: 1024px) {
.featured-carousel-card {
flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
}
}
@media (max-width: 768px) {
.featured-carousel-card {
flex: 0 0 calc(50% - var(--spacing-lg) / 2);
}
}
@media (max-width: 480px) {
.featured-carousel-card {
flex: 0 0 100%;
}
}
.featured-card-image {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-md);
margin-bottom: var(--spacing-sm);
background-color: var(--color-background-tertiary);
}
.featured-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-base);
}
.featured-card-link:hover .featured-card-image img {
transform: scale(1.05);
}
.featured-card-no-image {
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-lg);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.featured-card-content{
padding-left: var(--spacing-xl);
padding-right: var(--spacing-xl);
}
.featured-card-title {
font-family: var(--font-heading);
font-size: var(--font-size-sm);
text-align: center;
font-weight: 550;
line-height: 1.25;
color: var(--color-text-tertiary);
margin: 0 0 var(--spacing-xs);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.featured-card-link:hover .featured-card-title {
color: var(--color-primary);
}
.featured-card-tag {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
/* === footer.css === */
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.site-footer {
padding: var(--spacing-3xl) 0;
background-color: var(--color-background-secondary);
border-top: 4px solid var(--color-secondary); /* Juneberry top border */
}
.footer-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl) var(--spacing-md);
margin-bottom: var(--spacing-2xl);
}
/* Brand spans full width on mobile */
.footer-brand {
grid-column: 1 / -1;
}
@media (min-width: 768px) {
.footer-inner {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--spacing-2xl);
}
.footer-brand {
grid-column: auto;
}
}
.footer-logo {
max-height: 32px;
margin-bottom: var(--spacing-md);
}
.footer-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin-bottom: var(--spacing-md);
color: var(--color-primary); /* Oceanside teal */
text-transform: uppercase;
letter-spacing: 0.02em;
}
.footer-description {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-variant: all-small-caps;
margin: 0;
}
.footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-nav-list li {
margin-bottom: var(--spacing-xs);
}
.footer-nav-list a {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
text-transform: lowercase;
}
.footer-nav-list a:hover {
color: var(--color-highlight); /* Auric gold */
}
.footer-social-always {
display: flex;
gap: var(--spacing-md);
}
.footer-social-always a {
color: var(--color-text-secondary);
}
.footer-social-always a:hover {
color: var(--color-highlight); /* Auric gold */
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--spacing-md);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
font-variant: small-caps;
}
.footer-powered a {
color: var(--color-text-secondary);
}
.footer-staff-link {
display: none;
}
.footer-staff-link:hover {
color: var(--color-secondary);
}
.is-staff .footer-staff-link {
color: var(--color-warning) !important;
font-weight: 500;
display: inline;
}
/* === header.css === */
/* --------------------------------------------------------------------------
Header
Used by partials/header.hbs
-------------------------------------------------------------------------- */
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--container-max);
margin: 0 auto;
padding: var(--spacing-md) var(--spacing-lg);
height: var(--header-height);
}
.header-brand {
flex-shrink: 0;
}
.site-logo-link {
display: flex;
align-items: center;
color: var(--color-text);
}
.site-logo {
max-height: 40px;
width: auto;
}
.site-title {
font-size: var(--font-size-xl);
font-weight: 700;
margin: 0;
color: var(--color-primary); /* Oceanside teal */
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* Header actions */
.header-actions {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.header-signin {
display: none;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.header-signin:hover {
color: var(--color-highlight); /* Auric gold */
}
/* Mobile: description flows full-width below icon + title */
@media (max-width: 460px) {
.header-inner {
padding: var(--spacing-md) var(--spacing-md);
}
.site-logo {
max-height: 34px;
}
.header-actions {
gap: var(--spacing-sm);
display: contents;
}
}
@media (max-width: 400px) {
.header-inner {
padding: var(--spacing-md) var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
}
.header-actions {
gap: var(--spacing-xs);
}
}
@media (min-width: 768px) {
.header-signin {
display: inline-block;
}
}
/* .header-signup {
display: none;
} */
@media (min-width: 768px) {
.header-signup {
display: inline-flex;
}
}
.header-account {
display: flex;
align-items: center;
transition: color var(--transition-fast);
}
/* Mobile menu toggle */
.header-menu-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 24px;
height: 24px;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.header-menu-toggle span {
width: 100%;
height: 2px;
background-color: var(--color-oceanside);
transition: transform var(--transition-base);
}
/* Centered header */
.header-centered .header-inner {
flex-wrap: wrap;
justify-content: center;
}
.header-centered .header-brand {
width: 100%;
text-align: center;
padding: var(--spacing-md) 0;
}
.header-centered .site-nav {
order: 3;
width: 100%;
}
.header-centered .nav-list {
justify-content: center;
}
/* === navigation-members.css === */
/* --------------------------------------------------------------------------
Membership Menu
Used by partials/navigation-members.hbs
-------------------------------------------------------------------------- */
/* Guest (not logged in): signup button */
.header-signup-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
font-family: 'Montserrat', sans-serif;
font-size: var(--font-size-sm);
line-height: 1;
background-color: var(--color-secondary);
color: #fff;
border: 1.5px solid var(--color-secondary);
border-radius: 999px;
transition: background-color var(--transition-fast);
}
.header-signup-btn span {
text-align: center;
}
.header-signup-btn:hover {
background-color: var(--color-secondary-off);
color: #fff;
}
/* Member (logged in): outline pill button */
.header-member-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
cursor: pointer;
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
font-family: 'Montserrat', sans-serif;
font-size: var(--font-size-sm);
font-weight: 400;
border-radius: 999px;
white-space: nowrap;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.header-member-btn i {
font-size: 1.25em;
}
.header-member-btn:hover {
background-color: var(--color-primary);
color: #fff;
}
/* Mobile: compact pill with icon + chevron only */
.header-member-label {
display: none;
}
@media (max-width: 1024px) {
.header-member-btn {
padding: 6px 16px;
gap: 3px;
}
.header-signup-btn {
font-size: var(--font-size-xs);
width: min-content;
}
}
@media (max-width: 768px) {
.header-member-menu {
max-width: 80vw;
}
.header-member-menu-title,
.header-member-menu-link {
white-space: normal;
}
.header-signup-btn {
padding: 6px 12px;
}
.header-signup-btn:hover {
background-color: var(--color-secondary-off);
border-color: var(--color-secondary-off);
color: #fff;
}
.header-member-btn {
padding: 2px 12px;
gap: 4px;
}
}
@media (min-width: 768px) {
.header-member-label {
display: inline;
}
}
.header-member-chevron {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
transition: transform var(--transition-fast);
}
/* Rotate chevron when dropdown is open */
.header-member-dropdown.is-open .header-member-chevron {
transform: rotate(180deg);
}
/* Member dropdown container */
.header-member-dropdown {
position: relative;
}
/* Member dropdown menu */
.header-member-menu {
display: none;
position: absolute;
top: calc(100% + var(--spacing-xs));
right: 0;
min-width: 200px;
padding: var(--spacing-sm) var(--spacing-xs);
margin: 0;
list-style: none;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
z-index: 200;
}
.header-member-dropdown.is-open .header-member-menu {
display: block;
}
.header-member-menu-title {
padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm);
font-family: 'Lato', sans-serif;
font-size: var(--font-size-sm);
font-weight: 700;
color: var(--color-primary);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
/* Parent items, any tier */
.header-member-menu-parent {
display: inline-block;
width: 100%;
color: var(--color-text-secondary);
opacity: 0.4;
pointer-events: none;
padding-bottom: var(--spacing-sm);
padding-top: var(--spacing-xs);
border-bottom: 1px solid var(--color-border);
.header-member-menu-children {
display: none;
}
.header-member-menu-link {
width: 100%;
font-weight: 400;
padding-top: var(--spacing-sm);
padding-bottom: 0;
/* the icon */
i {
width: var(--spacing-lg);
padding-right: 0.5em;
}
}
}
/* Parent item with tier of which the user is member */
.header-member-menu-parent.tier-active {
opacity: 1;
pointer-events: auto;
border-bottom: 1px solid var(--color-border);
.header-member-menu-link {
color: var(--color-secondary);
font-weight: 600;
}
.header-member-menu-children {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.header-member-menu-child .header-member-menu-link {
/* padding-left: calc(var(--spacing-md) + var(--spacing-md)); */
color: var(--color-text);
font-weight: normal;
/* font-size: var(--font-size-xs); */
}
}
/* Every link, parent and children */
.header-member-menu-link {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: 1.2;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.header-member-menu-link:hover,
.header-member-menu-account:hover {
background-color: var(--color-background-secondary);
color: var(--color-highlight) !important;
i {
color: var(--color-highlight) !important;
}
a {
color: var(--color-highlight) !important;
}
}
/* Account link at bottom of member menu */
.header-member-menu-account {
margin-top: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
font-variant: small-caps;
font-weight: 500;
color: var(--color-secondary);
a {
color: var(--color-secondary);
padding-left: var(--spacing-sm);
}
}
.header-account img {
width: 36px;
height: 36px;
border-radius: var(--radius-full);
object-fit: cover;
}
/* === navigation.css === */
/* --------------------------------------------------------------------------
Navigation
Used by partials/navigation.hbs
-------------------------------------------------------------------------- */
.site-nav {
display: none;
}
.nav-list {
display: flex;
gap: var(--spacing-sm);
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 768px) {
.site-nav {
display: block;
}
}
@media (min-width: 1024px) {
.nav-list {
gap: var(--spacing-lg);
}
}
.nav-link {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-weight: 500;
transition: color var(--transition-fast);
}
.nav-link:hover {
color: var(--color-highlight); /* Auric gold on hover */
}
.nav-link.nav-current {
color: var(--color-text);
border-bottom: 2px solid var(--color-highlight); /* Auric underline */
padding-bottom: 2px;
}
/* --------------------------------------------------------------------------
Desktop Dropdown Navigation
-------------------------------------------------------------------------- */
.nav-dropdown {
position: relative;
}
.nav-chevron {
display: inline-block;
width: 0;
height: 0;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid currentColor;
vertical-align: middle;
transition: transform var(--transition-fast);
}
.nav-dropdown-list {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
min-width: 180px;
padding: var(--spacing-sm) 0;
margin: var(--spacing-xs) 0 0 0;
list-style: none;
background-color: var(--color-background);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 150;
}
/* Show on hover and keyboard focus */
.nav-dropdown:hover > .nav-dropdown-list,
.nav-dropdown:focus-within > .nav-dropdown-list {
display: block;
}
/* Rotate chevron when open */
.nav-dropdown:hover > .nav-link .nav-chevron {
transform: rotate(180deg);
}
/* Invisible bridge to prevent hover gap */
.nav-dropdown::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: var(--spacing-xs);
}
/* Dropdown items */
.nav-dropdown-list .nav-item {
margin: 0;
}
.nav-dropdown-list .nav-link {
display: block;
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: 400;
color: var(--color-text-secondary);
white-space: nowrap;
border-bottom: none;
}
.nav-dropdown-list .nav-link:hover {
background-color: var(--color-background-secondary);
color: var(--color-highlight);
}
.nav-dropdown-list .nav-link.nav-current {
color: var(--color-text);
border-bottom: none;
padding-bottom: var(--spacing-sm);
background-color: var(--color-background-secondary);
border-left: 3px solid var(--color-highlight);
}
/* --------------------------------------------------------------------------
Mobile Navigation
-------------------------------------------------------------------------- */
.mobile-nav-list {
list-style: none;
padding: 1em 0 0 0;
border-top: 1px solid #aaa;
margin: var(--spacing-xl) 0;
}
/* Override horizontal flex from .nav-list when inside mobile menu */
.mobile-nav-list,
.mobile-nav-list .nav-list {
display: block;
}
.mobile-nav-list li,
.mobile-nav-list .nav-list li {
margin-bottom: var(--spacing-md);
margin-left: calc(-1 * var(--spacing-sm));
}
.mobile-nav-list a,
.mobile-nav-list .nav-list a {
font-size: var(--font-size-xl);
color: #fff;
display: block;
padding: var(--spacing-xs);
}
.mobile-nav-list a:hover,
.mobile-nav-list .nav-list a:hover {
color: var(--color-highlight-off);
background-color: var(--color-secondary-off);
}
/* --------------------------------------------------------------------------
Mobile Dropdown Navigation
-------------------------------------------------------------------------- */
/* Hide desktop chevron in mobile; use toggle button instead */
.mobile-nav-list .nav-link .nav-chevron {
display: none;
}
.mobile-nav-list .nav-dropdown {
position: relative;
}
/* Toggle button for mobile dropdowns */
.mobile-dropdown-toggle {
position: absolute;
right: 0;
top: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.mobile-dropdown-toggle .nav-chevron {
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
transition: transform var(--transition-base);
}
/* Rotate chevron when open */
.mobile-nav-list .nav-dropdown.is-open .mobile-dropdown-toggle .nav-chevron {
transform: rotate(180deg);
}
/* Dropdown list in mobile - hidden by default */
.mobile-nav-list .nav-dropdown-list {
display: none;
position: static;
background: none;
border: none;
box-shadow: none;
transform: none;
min-width: unset;
padding: 0 0 0 var(--spacing-lg);
margin: 0;
border-left: 2px solid var(--color-highlight-off);
}
/* Override desktop hover/focus rules inside mobile overlay */
.mobile-nav-list .nav-dropdown:hover > .nav-dropdown-list,
.mobile-nav-list .nav-dropdown:focus-within > .nav-dropdown-list {
display: none;
}
/* Show when toggled open */
.mobile-nav-list .nav-dropdown.is-open > .nav-dropdown-list {
display: block;
}
/* Child items in mobile */
.mobile-nav-list .nav-dropdown-list li {
margin-bottom: var(--spacing-sm);
}
.mobile-nav-list .nav-dropdown-list a {
font-size: var(--font-size-lg);
padding: var(--spacing-xs) var(--spacing-sm);
}
/* Mobile navigation overlay */
.mobile-nav-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: var(--color-secondary);
padding: var(--spacing-xl);
}
.mobile-nav-overlay.active {
display: flex;
flex-direction: column;
}
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
/* margin-bottom: var(--spacing-md); */
}
.mobile-nav-logo img {
height: 46px;
width: auto;
filter: brightness(0) invert(1);
}
.mobile-nav-close {
background: none;
border: none;
font-size: var(--font-size-2xl);
cursor: pointer;
color: #fff;
}
/* === page-card.css === */
/* --------------------------------------------------------------------------
Catalog Section
-------------------------------------------------------------------------- */
.catalog-section {
padding: var(--spacing-3xl) 0;
}
.catalog-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
/* --------------------------------------------------------------------------
Page Card (shared)
-------------------------------------------------------------------------- */
.page-card {
display: flex;
flex-direction: column;
background: var(--color-background-secondary);
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
position: relative;
cursor: pointer;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.page-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
border-color: var(--color-secondary);
}
.page-card-image-link {
display: block;
overflow: hidden;
}
.page-card-image {
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
transition: transform var(--transition-base);
}
.page-card:hover .page-card-image {
transform: scale(1.02);
}
.page-card-content {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--spacing-lg);
gap: var(--spacing-sm);
}
.page-card-title {
font-size: var(--font-size-lg);
font-weight: 700;
margin: 0;
}
/* Stretched link: title covers the entire card */
.page-card-title a {
color: var(--color-primary);
text-decoration: none;
}
.page-card-title a::after {
content: '';
position: absolute;
inset: 0;
}
.page-card:hover .page-card-title a {
color: var(--color-highlight);
}
.page-card-excerpt {
/* font-size: var(--font-size-sm); */
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
.page-card-arrow {
display: block;
text-align: right;
margin-top: auto;
padding-top: var(--spacing-sm);
color: var(--color-border);
font-size: var(--font-size-md);
transition: color var(--transition-base);
}
.page-card:hover .page-card-arrow {
color: var(--color-highlight);
}
.page-card-posts .page-card-arrow {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
margin-top: 0;
padding-top: 0;
}
.page-card-posts .page-card-content {
padding-bottom: var(--spacing-md);
}
/* --------------------------------------------------------------------------
Catalog card layout: image on the right
-------------------------------------------------------------------------- */
.catalog-grid .page-card {
flex-direction: row;
}
.catalog-grid .page-card .page-card-image-link {
order: 2;
flex: 0 0 240px;
align-self: stretch;
}
.catalog-grid .page-card .page-card-image {
height: 100%;
width: 240px;
}
.catalog-grid .page-card .page-card-content {
flex: 1;
}
@media (max-width: 639px) {
.catalog-grid .page-card {
flex-direction: column;
}
.catalog-grid .page-card .page-card-image-link {
order: 0;
flex: unset;
align-self: unset;
}
.catalog-grid .page-card .page-card-image {
height: auto;
width: 100%;
}
}
/* --------------------------------------------------------------------------
Page Card — Posts variant (mini post cards)
-------------------------------------------------------------------------- */
.post-mini-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
}
@media (max-width: 639px) {
.post-mini-grid {
grid-template-columns: 1fr;
}
}
.post-mini-card {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
text-decoration: none;
position: relative;
z-index: 1;
}
.post-mini-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-sm);
}
.post-mini-title {
font-size: var(--font-size-xs);
color: var(--color-text-primary);
line-height: 1.3;
}
.post-mini-card:hover .post-mini-title {
color: var(--color-highlight);
}
/* === pagination.css === */
/* --------------------------------------------------------------------------
Pagination
-------------------------------------------------------------------------- */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xl);
margin-top: var(--spacing-lg);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border);
}
.pagination-prev,
.pagination-next {
display: flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--color-text);
font-weight: 500;
}
.pagination-prev:hover,
.pagination-next:hover {
color: var(--color-highlight); /* Auric gold */
}
.pagination-info {
font-size: var(--font-size-sm);
font-variant: small-caps;
color: var(--color-primary);
}
/* === post-card.css === */
/* --------------------------------------------------------------------------
Post Feed (Grid layout)
-------------------------------------------------------------------------- */
.post-feed {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
@media (min-width: 640px) {
.post-feed {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.post-feed {
grid-template-columns: repeat(4, 1fr);
}
}
/* Classic list layout */
.has-list-feed .post-feed {
grid-template-columns: 1fr;
gap: var(--spacing-3xl);
}
/* List layout */
.has-list-feed .post-card {
display: flex;
gap: var(--spacing-lg);
align-items: flex-start;
}
.has-list-feed .post-card-image-link {
flex-shrink: 0;
width: 200px;
}
/* --------------------------------------------------------------------------
Post Card
-------------------------------------------------------------------------- */
.post-card {
position: relative;
}
.post-card-image-link {
display: block;
margin-bottom: var(--spacing-lg);
overflow: hidden;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
}
.post-card-image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
transition: transform var(--transition-base);
}
.post-card-image-link:hover .post-card-image {
transform: scale(1.02);
}
.post-card-top-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.post-card-tag {
flex: 1;
}
.post-card-tag a {
font-size: var(--font-size-xs);
font-variant: small-caps;
letter-spacing: 0.05em;
color: var(--color-secondary); /* Juneberry */
}
.post-card-tag a:hover {
color: var(--color-secondary-off); /* Rose Dust */
}
.post-card-title {
margin: var(--spacing-sm) 0;
font-size: var(--font-size-md);
font-weight: 700;
line-height: 1.3;
}
.post-card-title a {
color: var(--color-text);
}
.post-card-title a:hover {
color: var(--color-secondary); /* Juneberry */
}
.post-card-excerpt {
color: var(--color-text-secondary);
margin: var(--spacing-sm) 0;
font-size: 0.9em;
line-height: 1.4;
}
.post-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.post-card-author {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.post-card-author-avatar {
width: 28px;
height: 28px;
border-radius: var(--radius-full);
object-fit: cover;
}
.post-card-author-name {
color: var(--color-text-secondary);
}
.post-card-reading-time {
font-size: var(--font-size-xs);
color: var(--color-secondary); /* Juneberry */
margin-left: auto; /* Always right-aligned */
}
.post-card-featured {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
font-size: 1.8rem;
line-height: 1;
color: var(--color-gold); /* Auric gold star */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.post-card-access {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
background-color: var(--color-primary); /* Juneberry for members */
color: #fff;
border-radius: var(--radius-sm);
}
/* === promote-book.css === */
/* --------------------------------------------------------------------------
Promote Book Section
-------------------------------------------------------------------------- */
.promote-book-section {
position: relative;
padding: var(--spacing-3xl) 0;
border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
}
.promote-book-section.bg-loaded {
background: url('/assets/images/wadden/wadden-sm.webp') center / cover no-repeat;
}
@media (min-width: 768px) {
.promote-book-section.bg-loaded {
background: url('/assets/images/wadden/wadden.webp') center / cover no-repeat;
}
}
.promote-book-section::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.87);
}
.promote-book-section > .container {
position: relative;
}
.promote-book-main {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
align-items: center;
}
@media (min-width: 768px) {
.promote-book-main {
flex-direction: row;
align-items: flex-start;
gap: var(--spacing-3xl);
}
}
.promote-book-kicker-mobile {
display: block;
/* align-self: flex-start; */
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-secondary);
margin-bottom: calc(-1 * var(--spacing-lg));
}
@media (min-width: 768px) {
.promote-book-kicker-mobile {
display: none;
}
}
/* Book Cover */
.promote-book-cover {
flex-shrink: 0;
max-width: 280px;
width: 100%;
}
@media (min-width: 768px) {
.promote-book-cover {
max-width: 320px;
}
}
.promote-book-cover img {
width: 100%;
height: auto;
filter:
drop-shadow(0 4px 4px rgba(0, 0, 0, 0.35))
drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2))
}
/* Book Info */
.promote-book-info {
flex: 1;
min-width: 0;
.promote-book-kicker-desktop {
display: none;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
}
h1{
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-secondary);
margin: var(--spacing-sm) 0;
}
h2 {
margin-top: 0;
color: var(--color-primary)
}
}
@media (min-width: 768px) {
.promote-book-info .promote-book-kicker-desktop {
display: inline-block;
}
h1 {
font-size: var(--font-size-3xl);
}
}
.promote-book-author {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-lg);
}
.promote-book-content {
font-size: var(--font-size-base);
/* font-weight: 500; */
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
}
.promote-book-content p {
margin: 0 0 var(--spacing-md);
line-height: 1.5;
}
.promote-book-content p:last-child {
margin-bottom: 0;
}
.promote-book-content ul {
list-style: none;
line-height: 1.3;
/* font-size: var(--font-size-sm);; */
padding: 0;
margin: var(--spacing-lg) 0 0;
}
.promote-book-content ul li {
position: relative;
padding-left: var(--spacing-lg);
margin-bottom: var(--spacing-sm);
}
.promote-book-content ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-style: normal;
font-size: 1em;
position: absolute;
left: 0;
color: var(--color-highlight);
margin-top: 0.1em;
}
/* Action Buttons */
.promote-book-actions {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
align-items: flex-start;
}
.order-book-button,
.booklet-download-button {
display: inline-flex;
align-items: center;
padding: var(--spacing-sm) var(--spacing-lg);
font: inherit;
font-size: var(--font-size-sm);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
cursor: pointer;
}
/* Amazon book order */
.order-book-button {
background-color: var(--color-accent);
color: #fff;
font-weight: 450;
transition: background-color var(--transition-fast);
}
.order-book-button:hover {
background-color: var(--color-accent-off);
}
/* Get free excerpt */
.booklet-download-subscribe-tribe {
display: inline-grid;
grid-template-columns: min-content;
.booklet-download-button {
font-weight: 400;
background-color: var(--color-background);
color: var(--color-primary);
border: 1px solid var(--color-primary);
transition: color var(--transition-fast);
white-space: nowrap;
.fa-solid {
padding-right: var(--spacing-sm);
}
}
.booklet-download-button:hover {
background-color: var(--color-background-secondary);
border: 1px solid var(--color-highlight);
}
.booklet-download-caption {
margin-top: var(--spacing-xs);
padding-left: var(--spacing-sm);
color: var(--color-text-oceanside);
font-size: 0.8em;
line-height: 1.3;
min-width: 0;
}
}
@media (max-width: 400px) {
.booklet-download-subscribe-tribe {
display: inline-block;
}
.booklet-download-button {
white-space: normal !important;
}
}
/* Reader Blurbs */
.promote-book-blurbs {
margin-top: var(--spacing-2xl);
padding: var(--spacing-2xl) 0;
}
.promote-book-blurbs-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
@media (min-width: 768px) {
.promote-book-blurbs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.promote-book-blurbs-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.promote-book-blurb {
margin: 0;
padding: var(--spacing-lg);
background-color: var(--color-background-secondary);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.blurb-text {
font-size: var(--font-size-sm);
font-style: italic;
line-height: 1.6;
color: var(--color-text-secondary);
margin: 0 0 var(--spacing-md);
}
.blurb-text p {
margin: 0;
}
.blurb-author {
display: block;
font-size: var(--font-size-sm);
font-style: normal;
font-weight: 600;
color: var(--color-text);
}
/* === single-post.css === */
/* --------------------------------------------------------------------------
Single Post
Used by post.hbs template
-------------------------------------------------------------------------- */
.post-full {
padding-bottom: var(--spacing-3xl);
}
.post-header {
margin-bottom: var(--spacing-3xl);
}
.post-meta-tag a {
font-size: var(--font-size-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-highlight); /* Auric gold */
}
.post-meta-tag a:hover {
color: var(--color-highlight-off); /* Gambol Gold */
}
.post-title {
margin: var(--spacing-md) 0 var(--spacing-lg);
font-size: var(--font-size-4xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-primary); /* Oceanside teal */
}
@media (min-width: 768px) {
.post-title {
font-size: var(--font-size-5xl);
}
}
.post-excerpt {
font-size: var(--font-size-xl);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xl);
line-height: 1.6;
}
.post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-md);
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
}
.post-meta-author {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.author-avatar {
display: block;
}
.author-avatar img {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
object-fit: cover;
}
.author-name {
color: var(--color-text);
font-weight: 500;
}
/* Feature image */
.post-feature-image {
margin: var(--spacing-2xl) 0;
text-align: center;
}
.post-feature-image img {
max-width: 100%;
max-height: 50vh;
width: auto;
height: auto;
border-radius: var(--radius-lg);
margin: 0 auto;
}
.post-feature-image figcaption {
margin-top: var(--spacing-sm);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* Post content */
.post-content {
font-size: var(--font-size-md);
line-height: 1.6;
}
.post-content h2 {
margin: var(--spacing-3xl) 0 var(--spacing-lg);
font-size: var(--font-size-3xl);
color: var(--color-primary); /* Oceanside teal */
}
.post-content h3 {
margin: var(--spacing-2xl) 0 var(--spacing-md);
font-size: var(--font-size-2xl);
color: var(--color-highlight); /* Auric gold */
}
.post-content h4 {
margin: var(--spacing-xl) 0 var(--spacing-md);
font-size: var(--font-size-xl);
color: var(--color-primary); /* Oceanside teal */
}
.post-content p {
margin: 0 0 var(--spacing-lg);
}
.post-content a {
text-decoration: underline;
text-underline-offset: 2px;
}
.post-content blockquote {
margin: var(--spacing-2xl) 0;
padding: 0 0 0 var(--spacing-xl);
border-left: 4px solid var(--color-highlight); /* Auric gold border */
font-style: italic;
color: var(--color-text-secondary);
}
.post-content pre {
margin: var(--spacing-xl) 0;
padding: var(--spacing-lg);
background-color: var(--color-background-secondary);
border-radius: var(--radius-md);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.post-content code {
font-family: var(--font-mono);
font-size: 0.9em;
background-color: var(--color-background-secondary);
padding: 0.2em 0.4em;
border-radius: var(--radius-sm);
}
.post-content pre code {
background: none;
padding: 0;
}
.post-content ul,
.post-content ol {
margin: var(--spacing-lg) 0;
padding-left: var(--spacing-xl);
}
.post-content li {
margin-bottom: var(--spacing-sm);
}
.post-content figure {
margin: var(--spacing-2xl) 0;
}
.post-content figcaption {
margin-top: var(--spacing-sm);
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
.post-content hr {
margin: var(--spacing-3xl) auto;
border: none;
height: 1px;
max-width: 200px;
background: linear-gradient(
to right,
transparent,
var(--color-auric) 20%,
var(--color-auric) 80%,
transparent
);
opacity: 0.6;
}
/* Post footer (tags) */
.post-footer {
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-border);
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.post-tags .tag {
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
background-color: var(--color-background-secondary);
border-radius: var(--radius-full);
}
.post-tags .tag:hover {
color: var(--color-text);
background-color: var(--color-border);
}
/* Author card */
.post-author-section {
margin-top: var(--spacing-3xl);
padding: var(--spacing-2xl);
background-color: var(--color-background-secondary);
border-radius: var(--radius-lg);
}
.author-card {
display: flex;
gap: var(--spacing-xl);
align-items: flex-start;
}
.author-avatar-large img {
width: 80px;
height: 80px;
border-radius: var(--radius-full);
object-fit: cover;
}
.author-info .author-name {
margin: 0 0 var(--spacing-sm);
font-size: var(--font-size-xl);
}
.author-info .author-name a {
color: var(--color-text);
}
.author-bio {
margin: 0 0 var(--spacing-sm);
color: var(--color-text-secondary);
}
.author-location {
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);
}
/* --------------------------------------------------------------------------
Tables - Modern minimal styling
-------------------------------------------------------------------------- */
.post-content table {
width: 100%;
margin: var(--spacing-2xl) 0;
border-collapse: collapse;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.post-content thead {
border-bottom: 2px solid var(--color-primary);
}
.post-content th {
padding: var(--spacing-md) var(--spacing-lg);
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
}
.post-content td {
padding: var(--spacing-md) var(--spacing-lg);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.post-content tbody tr:hover {
background-color: var(--color-background-secondary);
}
.post-content tbody tr:last-child td {
border-bottom: none;
}
/* First column emphasis */
.post-content td:first-child {
font-weight: 500;
color: var(--color-text);
}
/* Responsive: horizontal scroll on small screens */
@media (max-width: 640px) {
.post-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.post-content th,
.post-content td {
padding: var(--spacing-sm) var(--spacing-md);
white-space: nowrap;
}
}
/* === site-pages.css === */
/* --------------------------------------------------------------------------
Single Page
-------------------------------------------------------------------------- */
.page-full {
padding-bottom: var(--spacing-3xl);
}
.page-header {
margin-bottom: var(--spacing-3xl);
}
.page-title {
margin: 0 0 var(--spacing-lg);
font-size: var(--font-size-4xl);
font-weight: 700;
line-height: 1.2;
color: var(--color-primary); /* Oceanside teal */
}
.page-excerpt {
font-size: var(--font-size-xl);
color: var(--color-text-secondary);
margin-bottom: var(--spacing-xl);
}
.page-feature-image {
margin: var(--spacing-2xl) 0;
}
.page-feature-image img {
width: 100%;
border-radius: var(--radius-lg);
}
.page-content {
font-size: var(--font-size-md);
line-height: 1.6;
h2 {
margin-top: var(--spacing-3xl);
margin-bottom: var(--spacing-md);
color: var(--color-secondary);
}
h3 {
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-lg);
}
ul li::marker {
color: var(--color-primary);
}
blockquote {
padding-left: var(--spacing-lg);
margin-left: 0;
font-style: normal;
border-left: 3px solid var(--color-primary);
}
hr {
margin: var(--spacing-xl) auto;
border: none;
height: 1px;
max-width: 200px;
background: linear-gradient(
to right,
transparent,
var(--color-auric) 20%,
var(--color-auric) 80%,
transparent
);
opacity: 0.6;
}
}
/* Cycling border colors for consecutive blockquotes */
.page-content blockquote:nth-of-type(3n+1) { border-left-color: var(--color-primary); }
.page-content blockquote:nth-of-type(3n+2) { border-left-color: var(--color-highlight); }
.page-content blockquote:nth-of-type(3n+3) { border-left-color: var(--color-accent); }
/* the top link bar on a page; for sister pages, the first row with 's */
.page-content > p:first-of-type a {
color: var(--color-secondary);
font-variant: small-caps;
font-size: 0.9em;
}
.page-content > p:first-of-type a:hover {
color: var(--color-highlight);
}
/* Active class is inserted by a helper, see themes/lorinthe/assets/js/helpers.js*/
.page-content > p:first-of-type a.active {
font-weight: 700;
/* text-decoration: underline;
text-underline-offset: 3px; */
}
.site-pages {
--page-hero-bg: var(--color-oceanside);
--page-accent: var(--color-auric);
}
/* Hero color variations via custom page templates
(classes set in custom-hero-*.hbs templates)
*/
.site-pages.hero-primary {
--page-hero-bg: var(--color-primary);
--page-accent: var(--color-auric); /* Contrast: Gold bar on Ocean Blue hero */
}
.site-pages.hero-secondary {
--page-hero-bg: var(--color-secondary);
--page-accent: var(--color-accent); /* Contrast: Ocean Blue bar on Gold hero */
}
.site-pages.hero-highlight {
--page-hero-bg: var(--color-highlight);
--page-accent: var(--color-primary); /* Contrast: Gold bar on Rose/Berry hero */
}
.site-pages.hero-accent {
--page-hero-bg: var(--color-accent);
--page-accent: var(--color-auric); /* Contrast: Gold bar on Violet hero */
}
.site-pages.hero-warning {
--page-hero-bg: var(--color-warning);
--page-accent: var(--color-auric); /* Contrast: Gold bar on Burnt Umber hero */
}
.site-page-header {
margin-bottom: var(--spacing-3xl);
}
/* Colored accent bar at top */
.page-accent-bar {
height: 8px;
background-color: var(--page-accent);
}
/* Hero box with background color */
.page-hero-box {
background-color: var(--page-hero-bg);
padding: var(--spacing-3xl) 0;
overflow: hidden;
}
.page-hero-inner {
display: flex;
flex-direction: column;
gap: var(--spacing-2xl);
}
@media (min-width: 768px) {
.page-hero-inner {
flex-direction: row;
align-items: center;
gap: var(--spacing-3xl);
}
}
/* Left side: text content */
.page-hero-content {
flex: 1;
min-width: 0;
}
@media (min-width: 768px) {
.page-hero-content {
flex: 1.2;
}
}
/* Breadcrumbs / Tags */
.page-breadcrumbs {
margin-bottom: var(--spacing-lg);
}
.page-breadcrumbs a {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--page-accent);
padding: var(--spacing-xs) var(--spacing-md);
background-color: rgba(255, 255, 255, 0.15);
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast);
}
.page-breadcrumbs a:hover {
background-color: rgba(255, 255, 255, 0.25);
}
/* Site-style title */
.site-page-title {
margin: 0 0 var(--spacing-lg);
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
line-height: 1.15;
color: #fff;
}
@media (min-width: 768px) {
.site-page-title {
font-size: 2.75rem;
}
}
@media (min-width: 1024px) {
.site-page-title {
font-size: 3.25rem;
}
}
/* Site-style excerpt */
.site-page-excerpt {
font-size: var(--font-size-xl);
font-weight: 600;
font-variant: all-small-caps;
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
margin: 0;
max-width: 600px;
}
@media (min-width: 768px) {
.site-page-excerpt {
font-size: var(--font-size-xl);
}
}
/* Right side: tilted feature image */
.page-hero-image {
flex: 1;
position: relative;
}
@media (min-width: 768px) {
.page-hero-image {
flex: 0.9;
}
}
.page-hero-image.no-radius img {
border-radius: 0;
}
.page-hero-image img {
width: auto;
border-radius: var(--radius-lg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transform: rotate(3deg);
transition: transform var(--transition-base);
max-height: 40vh;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.page-hero-image img {
transform: rotate(4deg) translateX(-10px);
}
}
.page-hero-image:hover img {
transform: rotate(2deg);
}
@media (min-width: 768px) {
.page-hero-image:hover img {
transform: rotate(2deg) translateX(-5px);
}
}
/* --------------------------------------------------------------------------
Styled step list: top-level with nested as description text
-------------------------------------------------------------------------- */
.page-content > ol {
list-style: none;
counter-reset: step-counter;
padding-left: 0;
margin: var(--spacing-xl) 0;
}
.page-content > ol > li {
counter-increment: step-counter;
position: relative;
padding-left: 3.25rem;
padding-top: 0.15em;
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--spacing-sm);
}
.page-content > ol > li:last-child {
border-bottom: none;
margin-bottom: 0;
}
/* Number circle badge */
.page-content > ol > li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0.1em;
width: 2rem;
height: 2rem;
border-radius: var(--radius-full);
border: 1.5px solid var(--color-primary);
color: var(--color-primary);
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 90, 111, 0.06);
}
/* Nested ol: displayed as description text, no counter or bullet */
.page-content > ol > li > ol {
list-style: none;
padding: var(--spacing-xs) 0 0;
margin: 0;
font-size: inherit;
}
.page-content > ol > li > ol > li {
color: var(--color-primary);
font-size: var(--font-size-sm);
padding: 0;
margin: 0;
line-height: 1.5;
position: static;
border: none;
}
.page-content > ol > li > ol > li::before {
display: none;
}
/* --------------------------------------------------------------------------
Tables - Modern minimal styling
-------------------------------------------------------------------------- */
.page-content table {
width: 100%;
margin: var(--spacing-md) 0 var(--spacing-2xl);
border-collapse: collapse;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.page-content thead {
border-bottom: 2px solid var(--color-primary);
}
.page-content th {
padding: var(--spacing-md) var(--spacing-lg);
text-align: left;
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
}
.page-content td {
padding: var(--spacing-sm) var(--spacing-md);
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
}
.page-content tbody tr:hover {
background-color: var(--color-background-secondary);
}
.page-content tbody tr:last-child td {
border-bottom: none;
}
/* First column emphasis */
.page-content td:first-child {
font-weight: 500;
color: var(--color-text);
}
/* Responsive: horizontal scroll on small screens */
@media (max-width: 640px) {
.page-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.page-content th,
.page-content td {
padding: var(--spacing-sm) var(--spacing-md);
white-space: nowrap;
}
}
/* === three-pillars.css === */
/* --------------------------------------------------------------------------
Three Pillars Section
-------------------------------------------------------------------------- */
.three-pillars-section {
padding: var(--spacing-3xl) 0;
background-color: var(--color-primary);
color: #fff;
}
/* Header */
.three-pillars-header {
text-align: center;
margin: 0 auto var(--spacing-3xl);
max-width: 800px;
}
.three-pillars-kicker {
color: var(--color-text-contrast);
border-color: var(--color-highlight);
}
.three-pillars-title {
font-family: var(--font-heading);
font-size: var(--font-size-3xl);
font-weight: 700;
line-height: 1.2;
color: #fff;
margin: 0 0 var(--spacing-lg);
}
@media (min-width: 768px) {
.three-pillars-title {
font-size: var(--font-size-4xl);
}
}
.three-pillars-description {
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.7;
color: rgba(255, 255, 255, 0.75);
}
.three-pillars-description p {
margin: 0;
}
/* Triangle Image */
.three-pillars-section .triangle-image {
display: block;
max-width: 180px;
width: 100%;
height: auto;
margin: 0 auto var(--spacing-3xl);
}
@media (min-width: 768px) {
.three-pillars-section .triangle-image {
max-width: 220px;
}
}
/* Pillar Cards Grid */
.three-pillars-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
@media (min-width: 768px) {
.three-pillars-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.three-pillars-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Pillar Card */
.three-pillars-card {
position: relative;
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.2);
background-size: cover;
background-position: center;
border: none;
border-radius: var(--radius-md);
padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-md);
overflow: hidden;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.three-pillars-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.three-pillars-card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 33, 45, 0.90);
transition: background-color var(--transition-fast);
}
.three-pillars-card:hover::before {
background-color: rgba(0, 40, 55, 0.80);
}
.three-pillars-card > * {
position: relative;
}
.pillar-header {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
/* Font Awesome icon */
.pillar-fa-icon {
display: none;
}
.pillar-fa-icon.has-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--radius-md);
font-size: var(--font-size-xl);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* Cycle icon backgrounds: juneberry, rose-dust, auric */
.three-pillars-card:nth-child(3n+1) .pillar-fa-icon.has-icon {
background-color: var(--color-secondary);
}
.three-pillars-card:nth-child(3n+2) .pillar-fa-icon.has-icon {
background-color: var(--color-accent);
}
.three-pillars-card:nth-child(3n+3) .pillar-fa-icon.has-icon {
background-color: var(--color-highlight);
}
.pillar-header-text {
flex: 1;
min-width: 0;
}
.pillar-title {
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: 700;
color: #fff;
margin: 0 0 var(--spacing-xs);
}
.pillar-card-link {
color: inherit;
}
.pillar-subtitle {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-highlight);
}
.pillar-content {
font-size: var(--font-size-sm);
line-height: 1.7;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
.pillar-content p {
margin: 0;
}
.pillar-card-arrow {
display: block;
text-align: right;
margin-top: auto;
/* padding-top: var(--spacing-md); */
color: rgba(255, 255, 255, 0.2);
font-size: var(--font-size-md);
transition: color var(--transition-base);
}
.three-pillars-card:hover .pillar-card-arrow {
color: var(--color-highlight);
}