/* ============================================================
Lekkey Salon — Casper override layer (theme v1.0.0)
------------------------------------------------------------
Loaded by default.hbs AFTER built/screen.css so its rules win
via natural cascade order (no !important needed in most places).
What this layer does:
- Loads Cormorant Garamond + Raleway from Google Fonts and
wires them into Casper's --gh-font-heading / --gh-font-body
custom properties (Casper exposes these for theme overrides).
- Replaces Casper's default dark-mode background (a bluish
near-black) with our pure #0a0a0a black + dark2 #181818 +
dark3 #222222 layering matching lekkeysalon.com.
- Adds gold accents that Casper's Accent color setting doesn't
reach (some hover states, borders, scrollbar).
- Caps feature/inline image heights so portrait phone photos
don't take 2+ screen-heights.
What this layer does NOT do (intentionally):
- Override layout, spacing, or Casper component structure
- Touch light-mode styling — Lekkey's blog uses "Dark" color
scheme (set in Ghost admin -> Design -> Color scheme)
- Restyle Casper's typography scale (sizes/weights)
To iterate: edit this file, zip the theme directory, upload via
Ghost admin -> Settings -> Design -> Change theme -> Upload.
============================================================ */
/* ---------- Load the salon's fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Raleway:wght@200;300;400;500;600;700&display=swap');
/* ---------- Salon palette as CSS variables ----------
Mirrors :root in lekkeysalon.com/index.html so visitors moving
between the two sites see consistent color values. */
:root {
--lekkey-gold: #C9A84C;
--lekkey-gold-light: #E8C97A;
--lekkey-gold-dark: #8B6914;
--lekkey-black: #0a0a0a;
--lekkey-dark: #111111;
--lekkey-dark2: #181818;
--lekkey-dark3: #222222;
--lekkey-white: #f5f5f5;
--lekkey-gray: #888888;
--lekkey-gray-light: #cccccc;
}
/* ---------- Wire fonts into Casper's variables ----------
Casper's screen.css uses var(--gh-font-heading, fallback) and
var(--gh-font-body, fallback) everywhere. Setting these once at
:root cascades through every heading/body rule in the theme. */
:root {
--gh-font-heading: 'Cormorant Garamond', 'Georgia', serif;
--gh-font-body: 'Raleway', system-ui, -apple-system, sans-serif;
}
/* ---------- Override Casper's dark-mode palette ----------
Casper's --color-darkmode is a near-black with a slight blue
tint. We override to pure #0a0a0a + supporting darks so the
blog visually matches lekkeysalon.com exactly. The is-dark
class is added by Casper when the user picks "Dark" in
Settings -> Design -> Color scheme. */
html.is-dark,
html.auto-color {
--color-darkmode: var(--lekkey-black);
--background-color: var(--lekkey-black);
--color-base: var(--lekkey-white);
--color-secondary-text: var(--lekkey-gray-light);
}
html.is-dark body,
html.auto-color body {
background: var(--lekkey-black);
color: var(--lekkey-white);
}
/* ---------- Gold accents on dark mode ----------
Casper's "Accent color" theme setting (gold #C9A84C, set in
Ghost admin -> Design -> Brand) already covers links, buttons,
tag pills. These rules fill in the spots Casper's accent doesn't
reach: borders, scrollbar, hover states on header/footer. */
html.is-dark .gh-head,
html.is-dark .gh-foot {
background: var(--lekkey-dark);
border-color: rgba(201, 168, 76, 0.2);
}
html.is-dark .gh-head a:hover,
html.is-dark .gh-foot a:hover {
color: var(--lekkey-gold-light);
}
html.is-dark .post-card,
html.is-dark .gh-card {
background: var(--lekkey-dark2);
border: 1px solid rgba(201, 168, 76, 0.15);
transition: border-color 0.3s, transform 0.3s;
}
html.is-dark .post-card:hover,
html.is-dark .gh-card:hover {
border-color: rgba(201, 168, 76, 0.4);
transform: translateY(-2px);
}
html.is-dark blockquote {
background: var(--lekkey-dark2);
border-left: 3px solid var(--lekkey-gold);
}
html.is-dark code,
html.is-dark pre {
background: var(--lekkey-dark3);
color: var(--lekkey-gold-light);
border: 1px solid rgba(201, 168, 76, 0.15);
}
/* ---------- Site title gold gradient ----------
Match lekkeysalon.com's "Lekkey" wordmark — gold gradient text
instead of solid color. Falls back to solid gold for browsers
that don't support background-clip: text (none modern, but
the fallback is still gold so it's brand-consistent). */
html.is-dark .gh-head-logo,
html.is-dark .site-title {
color: var(--lekkey-gold);
background: linear-gradient(135deg, #C9A84C, #E8C97A, #C9A84C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ---------- Scrollbar (WebKit) ---------- */
html.is-dark::-webkit-scrollbar { width: 8px; }
html.is-dark::-webkit-scrollbar-track { background: var(--lekkey-black); }
html.is-dark::-webkit-scrollbar-thumb { background: var(--lekkey-gold-dark); }
html.is-dark::-webkit-scrollbar-thumb:hover { background: var(--lekkey-gold); }
/* ---------- Form inputs ---------- */
html.is-dark input[type="email"],
html.is-dark input[type="text"],
html.is-dark .gh-input {
background: var(--lekkey-dark2) !important;
color: var(--lekkey-white) !important;
border: 1px solid rgba(201, 168, 76, 0.3) !important;
}
html.is-dark input:focus,
html.is-dark .gh-input:focus {
border-color: var(--lekkey-gold) !important;
outline: none !important;
}
/* ---------- Post images — sizing caps ----------
Same logic as the Code Injection v3 — feature image capped at
500px, inline body images at 600px, so portrait photos don't
eat multiple screens. Applies to BOTH light and dark color
schemes (not gated on .is-dark). */
.gh-feature-image,
.gh-article-image,
.post-feature-image,
.post-full-image,
.gh-canvas > figure:first-of-type {
max-height: 500px;
overflow: hidden;
}
.gh-feature-image img,
.gh-article-image img,
.post-feature-image img,
.post-full-image img,
.gh-canvas > figure:first-of-type img {
max-height: 500px;
width: 100%;
object-fit: cover;
}
.gh-content .kg-image,
.gh-content figure img,
.post-content .kg-image,
.post-full-content figure img {
max-height: 600px;
width: auto;
height: auto;
object-fit: contain;
margin-left: auto;
margin-right: auto;
display: block;
}
/* ---------- Homepage cover image — readability + brand color ----------
Casper's actual DOM structure when a cover image is set:
With a cover, Casper's screen.css sets ".has-cover .site-header-content
{ color: #fff; }" — that's why text is white. To override, our selectors
need to match or exceed that specificity (.has-cover prefix).
Three fixes:
1. ::after pseudo-element on the wrapper as a darkening overlay
between the img (z-index 0) and the inner content (z-index 2).
Put on the wrapper, NOT on .site-header-cover — that's an ![]()
element and pseudo-elements don't apply to replaced elements.
2. Override Casper's white text -> salon gold + text-shadow.
3. drop-shadow filter on the logo image for extra legibility. */
.has-cover .site-header-content::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.55) 100%
);
pointer-events: none;
z-index: 1;
}
/* Inner content (logo + text) sits above the overlay */
.has-cover .site-header-inner {
position: relative;
z-index: 2;
}
/* Override Casper's white text with salon gold + readability shadow */
.has-cover .site-header-content,
.has-cover .site-header-content .site-title,
.has-cover .site-header-content .site-description {
color: var(--lekkey-gold) !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
/* Drop shadow under the logo for legibility on bright photo backgrounds */
.has-cover .site-header-content .site-logo {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}