/* =========================================================
SVL GLOBAL DESIGN SYSTEM — v6 EDITORIAL COMPONENTS
Sweden Vocal Lab
========================================================= */
/* =========================================================
1. DESIGN TOKENS — UNIVERSAL
Shared across all viewport sizes.
========================================================= */
:root {
/* CORE PALETTE */
--svl-black: #090909;
--svl-black-deep: #050505;
--svl-charcoal: #151515;
--svl-wine: #5A0606;
--svl-gold: #C8A45A;
--svl-gold-soft: #D2B46F;
--svl-silver: #D7D7D7;
--svl-silver-soft: #ECECEC;
--svl-text: #F2EFEA;
--svl-text-secondary: #B9B4AC;
/* BORDERS */
--svl-border: rgba(255,255,255,0.10);
--svl-border-gold: color-mix(in srgb, var(--svl-gold) 28%, transparent);
--svl-border-gold-hover: color-mix(in srgb, var(--svl-gold) 62%, transparent);
/* CANONICAL TRANSPARENT CARD SURFACE
Light enough for ghost imagery / background texture to remain visible. */
--svl-card-bg-start-opacity: 0.18;
--svl-card-bg-mid-opacity: 0.24;
--svl-card-bg-end-opacity: 0.30;
/* CANONICAL SVL BRAND TEXTURE
Shared image source only.
Cropping / size / position remain locally controllable. */
--svl-brand-texture:
url("https://www.swedenvocallab.com/wp-content/uploads/Sweden-Vocal-Lab-Most-quoted-vocal-coach-in-Stockholm.jpg");
/* SHAPE */
--svl-radius-small: 4px;
--svl-radius-card: 10px;
/* TRANSITIONS */
--svl-transition-fast: 180ms ease;
--svl-transition: 280ms ease;
}
/* =========================================================
2. RESPONSIVE TOKENS — MOBILE DEFAULT
Mobile is the base design.
Tablet overrides start at 768px.
Desktop overrides start at 1025px.
========================================================= */
:root {
/* PAGE / SECTION GEOMETRY */
--svl-page-padding: 22px;
/* TYPOGRAPHIC COMPONENTS */
--svl-eyebrow-font-size: 13px;
--svl-link-font-size: 15px;
--svl-link-letter-spacing: .10em;
--svl-link-padding-bottom: 5px;
/* BUTTONS */
--svl-btn-outline-font-size: 15px;
--svl-btn-outline-padding: 13px 22px;
/* REUSABLE COMPONENTS */
--svl-card-padding: 28px;
}
/* =========================================================
5. SURFACES
========================================================= */
/* CLEAN BLACK */
.svl-surface-black {
background: var(--svl-black);
}
/* DEEP CHARCOAL */
.svl-surface-charcoal {
background:
linear-gradient(
135deg,
#111111 0%,
#090909 55%,
#050505 100%
);
}
/* DISTRESSED BLACK
Texture is deliberately CSS-only for now.
We can later add a custom SVL texture image if desired.
*/
.svl-surface-distressed {
position: relative;
background:
radial-gradient(
circle at 18% 20%,
rgba(255,255,255,0.025),
transparent 38%
),
radial-gradient(
circle at 85% 75%,
rgba(255,255,255,0.018),
transparent 42%
),
linear-gradient(
120deg,
#111111 0%,
#080808 52%,
#040404 100%
);
overflow: hidden;
}
.svl-surface-distressed::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(
115deg,
rgba(255,255,255,0.012) 0px,
rgba(255,255,255,0.012) 1px,
transparent 1px,
transparent 7px
);
opacity: 0.28;
mix-blend-mode: soft-light;
}
/* WINE SURFACE */
.svl-surface-wine {
background:
radial-gradient(
circle at 15% 40%,
rgba(120,10,10,0.45),
transparent 42%
),
linear-gradient(
110deg,
var(--svl-wine) 0%,
#3A0404 46%,
#150202 100%
);
}
/* =========================================================
6. GRADIENT GLASS
========================================================= */
/* BLACK GLASS — PARAMETRIC
Default appearance remains identical to the original SVL black glass.
Optional local controls:
--svl-glass-angle
--svl-glass-start
--svl-glass-mid
--svl-glass-mid-stop
--svl-glass-end
--svl-glass-border-color
--svl-glass-radius
--svl-glass-blur
*/
.svl-glass {
position: relative;
background:
linear-gradient(
var(--svl-glass-angle, 110deg),
var(--svl-glass-start, rgba(30,30,30,0.64)) 0%,
var(--svl-glass-mid, rgba(10,10,10,0.82))
var(--svl-glass-mid-stop, 58%),
var(--svl-glass-end, rgba(4,4,4,0.92)) 100%
);
border:
1px solid
var(--svl-glass-border-color, var(--svl-border));
border-radius:
var(--svl-glass-radius, var(--svl-radius-card));
backdrop-filter:
blur(var(--svl-glass-blur, 0px));
-webkit-backdrop-filter:
blur(var(--svl-glass-blur, 0px));
overflow: hidden;
}
/* WINE GLASS */
.svl-glass-wine {
position: relative;
background:
radial-gradient(
circle at 7% 50%,
rgba(120,8,8,0.50),
transparent 43%
),
linear-gradient(
105deg,
rgba(90,6,6,0.75) 0%,
rgba(42,3,3,0.76) 42%,
rgba(5,5,5,0.90) 100%
);
border: 1px solid color-mix(in srgb, var(--svl-gold) 18%, transparent);
border-radius: var(--svl-radius-card);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
}
/* DARK GLASS WITH SUBTLE WINE EDGE */
.svl-glass-wine-subtle {
position: relative;
background:
radial-gradient(
circle at 0% 50%,
rgba(90,6,6,0.34),
transparent 38%
),
linear-gradient(
105deg,
rgba(22,12,12,0.76),
rgba(6,6,6,0.88) 65%
);
border: 1px solid var(--svl-border);
border-radius: var(--svl-radius-card);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
}
/* =========================================================
7. OPTIONAL GHOST IMAGE LAYER
========================================================= */
/*
Add the class:
svl-ghost
Default image:
--svl-brand-texture
Optional local controls:
--svl-ghost-image
--svl-ghost-bg-size
--svl-ghost-bg-position
--svl-ghost-opacity
This keeps the image source global while allowing each
section / breakpoint to control cropping and placement.
*/
.svl-ghost {
position: relative;
overflow: hidden;
isolation: isolate;
}
.svl-ghost::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--svl-ghost-bg-color, #030303);
background-image: var(--svl-ghost-image, var(--svl-brand-texture));
background-size: var(--svl-ghost-bg-size, cover);
background-position: var(--svl-ghost-bg-position, center);
background-repeat: no-repeat;
filter: grayscale(1) contrast(1.15);
opacity: var(--svl-ghost-opacity, 0.60);
pointer-events: none;
}
/* =========================================================
8. EYEBROWS / SMALL LABELS
========================================================= */
.svl-eyebrow {
color: var(--svl-gold);
font-size: var(--svl-eyebrow-font-size);
line-height: 1.3;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 500;
}
/* =========================================================
9. TEXT COLOURS
========================================================= */
.svl-text-primary {
color: var(--svl-text);
}
.svl-text-secondary {
color: var(--svl-text-secondary);
}
.svl-text-gold {
color: var(--svl-gold);
}
/* =========================================================
10. GOLD EDITORIAL LINKS
========================================================= */
html body a.svl-link-gold,
html body a.svl-link-gold:link,
html body a.svl-link-gold:visited {
display:inline-flex !important;
align-items:center;
gap:10px;
color:var(--svl-gold) !important;
text-decoration:none !important;
font-size:var(--svl-link-font-size, 15px) !important;
line-height:1.2;
font-weight:500;
letter-spacing:var(--svl-link-letter-spacing, .10em);
text-transform:uppercase;
padding-bottom:var(--svl-link-padding-bottom, 5px);
border-bottom:1px solid color-mix(in srgb, var(--svl-gold) 55%, transparent) !important;
transition:
color var(--svl-transition-fast),
border-color var(--svl-transition-fast),
gap var(--svl-transition);
}
html body a.svl-link-gold:hover,
html body a.svl-link-gold:focus,
html body a.svl-link-gold:focus-visible,
html body a.svl-link-gold:active {
color:var(--svl-gold-soft) !important;
border-color:var(--svl-gold) !important;
text-decoration:none !important;
gap:15px;
}
/* =========================================================
11. BUTTONS
========================================================= */
/* =========================================================
OUTLINE BUTTON — CANONICAL SVL BUTTON
Transparent button used across the site.
Default:
--svl-btn-color: gold
--svl-btn-border-color: gold
To change colour locally, set only:
--svl-btn-color
--svl-btn-border-color
========================================================= */
html body a.svl-btn-outline,
html body a.svl-btn-outline:link,
html body a.svl-btn-outline:visited {
display:inline-flex !important;
align-items:center;
justify-content:center;
gap:10px;
padding:var(--svl-btn-padding, var(--svl-btn-outline-padding)) !important;
background:transparent !important;
color:var(--svl-btn-color, var(--svl-gold)) !important;
border:1px solid var(--svl-btn-border-color, color-mix(in srgb, var(--svl-gold) 65%, transparent)) !important;
border-radius:var(--svl-radius-small) !important;
font-size:var(--svl-btn-font-size, var(--svl-btn-outline-font-size)) !important;
line-height:1.2 !important;
font-weight:500 !important;
letter-spacing:.08em !important;
text-transform:uppercase !important;
text-decoration:none !important;
-webkit-tap-highlight-color:transparent;
transform:translateY(0) scale(1);
transition:
background var(--svl-transition),
color var(--svl-transition),
border-color var(--svl-transition),
transform var(--svl-transition-fast);
}
html body a.svl-btn-outline:hover,
html body a.svl-btn-outline:focus,
html body a.svl-btn-outline:focus-visible {
background:rgba(255,255,255,.045) !important;
text-decoration:none !important;
}
html body a.svl-btn-outline:active {
background:rgba(255,255,255,.075) !important;
color:var(--svl-btn-color, var(--svl-gold)) !important;
border-color:var(--svl-btn-border-color, color-mix(in srgb, var(--svl-gold) 65%, transparent)) !important;
transform:translateY(2px) scale(.985);
}
/* =========================================================
12. CARDS
========================================================= */
.svl-card {
position: relative;
padding: var(--svl-card-padding);
background:
linear-gradient(
110deg,
rgba(
26,
26,
26,
var(--svl-card-bg-start-opacity)
) 0%,
rgba(
10,
10,
10,
var(--svl-card-bg-mid-opacity)
) 58%,
rgba(
5,
5,
5,
var(--svl-card-bg-end-opacity)
) 100%
);
border: 1px solid var(--svl-border);
border-radius: var(--svl-radius-card);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
overflow: hidden;
transition:
border-color var(--svl-transition),
transform var(--svl-transition);
}
.svl-card:hover {
border-color: var(--svl-border-gold);
}
/* CLICKABLE CARD INTERACTION */
html body a.svl-clickable-card {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transform: scale(1);
transform-origin: center;
transition:
transform 110ms ease,
filter 110ms ease,
border-color 110ms ease;
}
/* DESKTOP — visible pulse on hover */
@media (hover: hover) and (pointer: fine) {
html body a.svl-clickable-card:hover {
animation: svl-card-pulse 260ms ease-out;
border-color: var(--svl-border-gold-hover);
}
}
/* MOBILE + CLICK — clear press */
html body a.svl-clickable-card:active {
transform: scale(.94);
filter: brightness(.82);
border-color: var(--svl-border-gold-hover);
}
@keyframes svl-card-pulse {
0% {
transform: scale(1);
}
45% {
transform: scale(.97);
}
100% {
transform: scale(1);
}
}
/* WINE CARD */
.svl-card-wine {
background:
radial-gradient(
circle at 0% 50%,
rgba(90,6,6,0.48),
transparent 45%
),
linear-gradient(
110deg,
rgba(28,10,10,0.80),
rgba(5,5,5,0.90)
);
}
/* =========================================================
13. HAIRLINES / DIVIDERS
========================================================= */
.svl-divider {
width: 100%;
height: 1px;
background:
linear-gradient(
90deg,
transparent 0%,
color-mix(in srgb, var(--svl-gold) 55%, transparent) 22%,
color-mix(in srgb, var(--svl-gold) 18%, transparent) 75%,
transparent 100%
);
}
.svl-divider-short {
width: 58px;
height: 1px;
background: var(--svl-gold);
}
/* =========================================================
13.1 GLOBAL EDITORIAL COMPONENTS
Shared editorial language for normal pages and KH articles:
- SVL quote
- SVL star list
These components are opt-in globally.
KH article unordered lists use the same star treatment
automatically inside .svl-article only.
========================================================= */
/* ---------------------------------------------------------
GLOBAL QUOTE
Default accent: SVL gold.
Inside KH articles, the current category accent is inherited
automatically through --svl-kh-accent when available.
Usage:
...
--------------------------------------------------------- */
blockquote.svl-quote {
--svl-quote-accent:
var(--svl-kh-accent, var(--svl-gold));
margin: 2em 0;
padding: 0.2em 0 0.2em 1.2em;
border-left:
3px solid
var(--svl-quote-accent);
color: var(--svl-silver-soft);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 1.18em;
font-style: italic;
font-weight: 500;
line-height: 1.55;
}
blockquote.svl-quote p {
margin: 0 0 0.8em;
}
blockquote.svl-quote p:last-child {
margin-bottom: 0;
}
blockquote.svl-quote cite {
display: block;
margin-top: 0.9em;
color: var(--svl-text-secondary);
font-family: var(--e-global-typography-text-font-family);
font-size: 0.78em;
font-style: normal;
font-weight: var(--e-global-typography-text-font-weight);
line-height: 1.45;
}
/* ---------------------------------------------------------
GLOBAL SVL STAR LIST
Visual marker: ✧
Normal pages:
add class "svl-star-list" to the UL.
KH articles:
every UL inside .svl-article receives this treatment
automatically.
Existing Home lists are untouched unless the class
svl-star-list is explicitly added there.
Optional local controls:
--svl-star-color
--svl-star-size
--svl-star-gap
--------------------------------------------------------- */
ul.svl-star-list,
.svl-article ul {
margin: 0 0 1.35em;
padding-left: 0;
list-style: none;
}
ul.svl-star-list > li,
.svl-article ul > li {
position: relative;
margin: 0 0 0.7em;
padding-left:
var(--svl-star-gap, 1.45em);
}
ul.svl-star-list > li:last-child,
.svl-article ul > li:last-child {
margin-bottom: 0;
}
ul.svl-star-list > li::before,
.svl-article ul > li::before {
content: "✧";
position: absolute;
top: 0.02em;
left: 0;
color:
var(--svl-star-color, var(--svl-gold));
font-size:
var(--svl-star-size, 0.9em);
line-height: inherit;
}
/* Nested unordered lists keep the same SVL marker,
with slightly tighter rhythm. */
ul.svl-star-list ul,
.svl-article ul ul {
margin-top: 0.65em;
margin-bottom: 0;
}
/* =========================================================
13A. KNOWLEDGE HUB — ARTICLE COMPONENT
Shared source of truth for all Knowledge Hub articles.
Elementor remains the typography source of truth.
Local font overrides exist only where the KH component
deliberately differs from Elementor:
- main article H1
- internal article H2
- Swedish language H2
- editorial subtitles
Category colours are defined once here and remain identical
across mobile, tablet and desktop.
Responsive rules below change geometry only.
========================================================= */
/* ---------------------------------------------------------
KNOWLEDGE HUB — CATEGORY TOKENS
--------------------------------------------------------- */
:root {
--svl-kh-accent-common-concerns: #5E8EC2;
--svl-kh-accent-voice-training: #5E4B8B;
--svl-kh-accent-vocal-identity: var(--svl-wine);
--svl-kh-accent-vocal-coach: #4F815F;
/* Safe fallback only.
Category classes override this inherited value locally. */
--svl-kh-accent: var(--svl-kh-accent-common-concerns);
--svl-kh-background-image:
url("https://www.swedenvocallab.com/wp-content/uploads/sangpedagog-sanglarare-sang-lektion.jpg");
}
/* ---------------------------------------------------------
KNOWLEDGE HUB — CATEGORY VARIANTS
--------------------------------------------------------- */
.svl-kh-common-concerns {
--svl-kh-accent: var(--svl-kh-accent-common-concerns);
}
.svl-kh-voice-training {
--svl-kh-accent: var(--svl-kh-accent-voice-training);
}
.svl-kh-vocal-identity {
--svl-kh-accent: var(--svl-kh-accent-vocal-identity);
}
.svl-kh-vocal-coach {
--svl-kh-accent: var(--svl-kh-accent-vocal-coach);
}
/* ---------------------------------------------------------
ELEMENTOR ARTICLE SHELL
--------------------------------------------------------- */
/* Elementor Post Title remains only as the dynamic source. */
#svl-source-post-title {
display: none !important;
}
/* Remove Elementor width / padding constraints. */
.svl-faq-shell,
.svl-faq-shell > .e-con-inner,
.svl-faq-shell .elementor-widget-html,
.svl-faq-shell .elementor-widget-html > .elementor-widget-container {
width: 100%;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------------------------------------------------------
ARTICLE FIELD — MOBILE BASE
Material / colour defined once here.
--------------------------------------------------------- */
.svl-faq-template {
position: relative;
isolation: isolate;
width: 100vw;
margin-left: calc(50% - 50vw);
padding: 28px 0 54px;
overflow: hidden;
color: var(--svl-text);
background-color: var(--svl-black);
background-image:
linear-gradient(
180deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.76) 40%,
rgba(0, 0, 0, 0.84) 100%
),
var(--svl-kh-background-image);
background-size:
100% 780px,
auto 560px;
background-repeat:
no-repeat,
no-repeat;
background-position:
center top,
55% top;
background-attachment: scroll;
}
.svl-faq-template,
.svl-faq-template * {
box-sizing: border-box;
}
/* ---------------------------------------------------------
MAIN ARTICLE CARD
--------------------------------------------------------- */
.svl-faq-card {
position: relative;
width: calc(100% - 20px);
margin: 0 auto;
overflow: hidden;
border:
1px solid
color-mix(
in srgb,
var(--svl-kh-accent) 30%,
transparent
);
border-radius: 16px;
background:
radial-gradient(
circle at 6% 4%,
color-mix(
in srgb,
var(--svl-kh-accent) 42%,
transparent
) 0%,
color-mix(
in srgb,
var(--svl-kh-accent) 22%,
transparent
) 22%,
color-mix(
in srgb,
var(--svl-kh-accent) 8%,
transparent
) 42%,
transparent 62%
),
linear-gradient(
112deg,
rgba(24, 31, 40, 0.58) 0%,
rgba(15, 19, 25, 0.54) 40%,
rgba(7, 8, 10, 0.66) 100%
);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Category accent hairline */
.svl-faq-card::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 78%;
height: 1px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
transparent,
color-mix(
in srgb,
var(--svl-kh-accent) 70%,
transparent
),
transparent
);
}
/* ---------------------------------------------------------
ARTICLE HEADER
--------------------------------------------------------- */
.svl-faq-card-head {
position: relative;
z-index: 1;
padding: 38px 20px 30px;
text-align: center;
}
/* Category badge */
.svl-faq-category {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
padding: 6px 12px;
border:
1px solid
color-mix(
in srgb,
var(--svl-gold) 72%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--svl-gold) 8%,
transparent
);
color: var(--svl-gold-soft);
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
box-shadow:
inset 0 0 14px
color-mix(
in srgb,
var(--svl-kh-accent) 14%,
transparent
),
0 0 18px
color-mix(
in srgb,
var(--svl-kh-accent) 10%,
transparent
);
}
/* Deliberate KH exception:
Elementor H1 is Rumble globally,
article title remains Cormorant. */
h1.svl-faq-title {
max-width: 380px;
margin: 0 auto 18px;
color: var(--svl-text);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(30px, 9.2vw, 40px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.022em;
text-transform: uppercase;
text-shadow:
0 4px 26px rgba(0, 0, 0, 0.72);
}
h1.svl-faq-title:empty {
min-height: 1.05em;
}
/* Editorial subtitle:
deliberate Cormorant exception from body typography. */
.svl-faq-subtitle {
position: relative;
max-width: 330px;
margin: 0 auto;
padding-bottom: 26px;
color: var(--svl-gold);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 17px;
font-style: italic;
font-weight: 500;
line-height: 1.46;
}
.svl-faq-subtitle::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 145px;
height: 1px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
transparent,
var(--svl-gold),
transparent
);
}
/* ---------------------------------------------------------
ARTICLE IMAGE
--------------------------------------------------------- */
.svl-faq-image {
position: relative;
z-index: 1;
margin: 0;
padding: 0 12px;
}
.svl-faq-image img {
display: block;
width: 100%;
max-width: none;
height: auto;
margin: 0 auto;
border:
1px solid
color-mix(
in srgb,
var(--svl-kh-accent) 18%,
transparent
);
border-radius: 10px;
box-shadow:
0 20px 52px rgba(0, 0, 0, 0.46);
}
/* ---------------------------------------------------------
ARTICLE CONTENT
--------------------------------------------------------- */
.svl-faq-content {
position: relative;
z-index: 1;
padding: 38px 22px 48px;
}
.svl-article {
width: 100%;
max-width: 860px;
margin: 0 auto;
padding: 0 1rem;
color: var(--svl-text);
/*
* The HTML widget does not reliably inherit Elementor's
* Body typography because theme paragraph rules can win.
* Use Elementor's own Text tokens as the source of truth.
*/
font-family: var(--e-global-typography-text-font-family);
font-weight: var(--e-global-typography-text-font-weight);
font-size: 17.5px;
line-height: 1.7;
}
.svl-article img,
.svl-article iframe {
max-width: 100%;
height: auto;
}
.svl-article p,
.svl-article li {
font-family: var(--e-global-typography-text-font-family);
font-weight: var(--e-global-typography-text-font-weight);
}
.svl-article p {
margin: 0 0 1.3em;
}
/* Inline article links keep Elementor's global link typography
and colour, but must follow the surrounding article text size. */
.svl-article a,
.svl-article a:link,
.svl-article a:visited {
font-size: 1.12em !important;
line-height: inherit;
}
/* Deliberate KH exception:
Elementor H2 is Rumble globally.
Internal editorial article headings remain Cormorant.
Clean article HTML will use:
*/
h2.svl-article-heading {
position: relative;
margin: 2.35em 0 1em;
padding: 0 0 0.55em;
color: var(--svl-gold);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: clamp(27px, 3.2vw, 38px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -0.018em;
}
h2.svl-article-heading:first-child {
margin-top: 0;
}
h2.svl-article-heading::after {
content: "";
display: block;
width: 72px;
height: 2px;
margin-top: 0.55em;
background:
linear-gradient(
90deg,
var(--svl-gold),
transparent
);
}
/* H3 keeps Elementor's global Cormorant typography.
Only article-specific geometry / colour belong here.
Clean article HTML will use:
*/
h3.svl-article-subheading {
margin: 2em 0 0.75em;
color: var(--svl-wine);
font-size: clamp(21px, 2.3vw, 27px);
}
/* Semantic emphasis */
.svl-article strong {
color: var(--svl-text);
font-weight: 700;
}
/* ---------------------------------------------------------
ARTICLE EDITORIAL PANELS
--------------------------------------------------------- */
.svl-article .svl-key-point {
margin: 1.7em 0;
padding: 1.15em 1.05em;
border-left: 3px solid var(--svl-gold);
background:
linear-gradient(
90deg,
color-mix(
in srgb,
var(--svl-gold) 11%,
transparent
),
color-mix(
in srgb,
var(--svl-gold) 2.5%,
transparent
)
);
color: var(--svl-text);
font-size: 1.08em;
}
.svl-article .svl-note {
margin: 1.8em 0;
padding: 1.25em 1.05em 0.15em;
border: 1px solid var(--svl-border-gold);
background:
rgba(255, 255, 255, 0.035);
}
.svl-article .svl-warning {
margin: 1.8em 0;
padding: 1.3em 1.05em 0.2em;
border-left: 3px solid var(--svl-wine);
background:
linear-gradient(
90deg,
color-mix(
in srgb,
var(--svl-wine) 12%,
transparent
),
color-mix(
in srgb,
var(--svl-wine) 2.5%,
transparent
)
);
}
.svl-article .svl-note p:last-child,
.svl-article .svl-warning p:last-child {
margin-bottom: 1em;
}
/* ---------------------------------------------------------
LANGUAGE DIVIDER
--------------------------------------------------------- */
.svl-language-divider {
position: relative;
max-width: 900px;
margin: 58px auto 46px;
padding-top: 42px;
border-top:
1px solid var(--svl-border-gold);
text-align: center;
}
.svl-language-divider::before {
content: "";
position: absolute;
top: -1px;
left: 50%;
width: 150px;
height: 2px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
transparent,
var(--svl-gold),
transparent
);
}
.svl-language-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 0 20px;
padding: 6px 13px;
border:
1px solid
color-mix(
in srgb,
var(--svl-kh-accent) 62%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--svl-kh-accent) 20%,
transparent
);
color: var(--svl-silver-soft);
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.17em;
text-transform: uppercase;
}
/* Deliberate KH exception:
semantic H2 remains Cormorant instead of Elementor Rumble. */
h2.svl-language-title {
max-width: 850px;
margin: 0 auto 14px;
color: var(--svl-text);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 32px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.022em;
}
.svl-language-subtitle {
max-width: 330px;
margin: 0 auto;
color: var(--svl-gold);
font-family: "Cormorant Garamond", Georgia, serif;
font-size: 19px;
font-style: italic;
line-height: 1.46;
}
/* ---------------------------------------------------------
KNOWLEDGE HUB — TABLET + DESKTOP SHARED SCALE
Geometry / scale only.
Colour and material remain untouched.
--------------------------------------------------------- */
@media (min-width: 768px) {
.svl-faq-template {
padding: 48px 0 100px;
background-size:
100% 980px,
auto 760px;
background-position:
center top,
center top;
}
.svl-faq-card {
width: min(calc(100% - 38px), 930px);
border-radius: 22px;
}
.svl-faq-card-head {
padding: 48px 34px 34px;
}
.svl-faq-category {
margin-bottom: 22px;
padding: 7px 15px;
font-size: 10px;
letter-spacing: 0.15em;
}
h1.svl-faq-title {
max-width: 880px;
font-size: clamp(38px, 4.2vw, 58px);
line-height: 1.05;
}
.svl-faq-subtitle {
max-width: 720px;
padding-bottom: 25px;
font-size: clamp(19px, 1.8vw, 24px);
line-height: 1.45;
}
.svl-faq-subtitle::after {
width: 180px;
}
.svl-faq-image {
padding: 0 18px;
}
.svl-faq-image img {
width: 88%;
max-width: 920px;
border-radius: 13px;
}
.svl-faq-content {
padding: 48px 54px 64px;
}
.svl-article {
font-size: 19px;
line-height: 1.78;
}
h2.svl-article-heading {
margin-top: 2.8em;
}
h2.svl-article-heading:first-child {
margin-top: 0;
}
.svl-article .svl-key-point {
padding-left: 1.3em;
padding-right: 1.3em;
}
.svl-article .svl-note {
padding-left: 1.4em;
padding-right: 1.4em;
}
.svl-article .svl-warning {
padding-left: 1.45em;
padding-right: 1.45em;
}
.svl-language-divider {
margin: 76px auto 58px;
padding-top: 48px;
}
.svl-language-label {
font-size: 10px;
}
h2.svl-language-title {
font-size: clamp(34px, 4vw, 48px);
}
.svl-language-subtitle {
max-width: 720px;
font-size: 22px;
line-height: 1.5;
}
}
/* ---------------------------------------------------------
KNOWLEDGE HUB — DESKTOP
Geometry only.
--------------------------------------------------------- */
@media (min-width: 1025px) {
.svl-faq-template {
padding: 72px 0 100px;
background-size:
cover,
cover;
background-position:
center center,
center center;
background-attachment:
fixed,
fixed;
}
.svl-faq-card {
width: min(calc(100% - 48px), 1040px);
}
.svl-faq-card-head {
padding: 54px 52px 38px;
}
.svl-faq-content {
padding: 52px 70px 72px;
}
}
/* =========================================================
13B. KNOWLEDGE HUB — HUB INDEX COMPONENTS
Shared source of truth for:
- Hub article cards
- Category accents
- Elementor Pro category accordion surfaces
Category colours come from the KH tokens defined in 13A.
No duplicate HEX/RGB values are introduced here.
Responsive rules change geometry / scale only.
========================================================= */
/* ---------------------------------------------------------
HUB CARD — CATEGORY MAPPING
--------------------------------------------------------- */
.svl-hub-card {
--svl-kh-accent: var(--svl-kh-accent-voice-training);
--svl-hub-accent-display:
color-mix(in srgb, var(--svl-kh-accent) 72%, white);
width: 100%;
height: 100%;
}
.svl-hub-card--common-concerns {
--svl-kh-accent: var(--svl-kh-accent-common-concerns);
}
.svl-hub-card--voice-training {
--svl-kh-accent: var(--svl-kh-accent-voice-training);
}
.svl-hub-card--vocal-identity {
--svl-kh-accent: var(--svl-kh-accent-vocal-identity);
}
.svl-hub-card--vocal-coach {
--svl-kh-accent: var(--svl-kh-accent-vocal-coach);
}
.svl-hub-card,
.svl-hub-card * {
box-sizing: border-box;
}
/* ---------------------------------------------------------
HUB CARD — MOBILE BASE
--------------------------------------------------------- */
html body a.svl-hub-card__link,
html body a.svl-hub-card__link:link,
html body a.svl-hub-card__link:visited {
position: relative;
display: block;
height: 100%;
min-height: 0;
padding: 1.45rem;
overflow: hidden;
border:
1px solid
color-mix(
in srgb,
var(--svl-gold) 48%,
transparent
);
background:
radial-gradient(
circle at 12% 8%,
color-mix(
in srgb,
var(--svl-kh-accent) 30%,
transparent
),
transparent 40%
),
linear-gradient(
155deg,
color-mix(
in srgb,
var(--svl-kh-accent) 18%,
transparent
) 0%,
rgba(19, 19, 21, 0.97) 48%,
rgba(8, 8, 9, 0.99) 100%
);
color: var(--svl-text);
text-decoration: none;
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.30),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
transition:
transform 220ms ease,
border-color 220ms ease,
box-shadow 220ms ease,
background 220ms ease;
}
/* Gold top accent */
html body a.svl-hub-card__link::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 105px;
height: 3px;
background:
linear-gradient(
90deg,
var(--svl-gold),
transparent
);
}
/* Subtle category glow */
html body a.svl-hub-card__link::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
color-mix(
in srgb,
var(--svl-kh-accent) 8%,
transparent
),
transparent 42%
);
pointer-events: none;
}
.svl-hub-card__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
}
/* Optional NEW badge */
.svl-hub-card__badge {
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-bottom: 1rem;
padding: 4px 10px;
border:
1px solid
color-mix(
in srgb,
var(--svl-gold) 45%,
transparent
);
border-radius: 999px;
background:
color-mix(
in srgb,
var(--svl-gold) 8%,
transparent
);
color: var(--svl-gold);
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.svl-hub-card__title {
margin: 0 0 1.1rem;
padding: 0;
color: var(--svl-text);
font-size: 23px;
line-height: 1.14;
letter-spacing: -0.018em;
font-weight: 700;
text-shadow:
0 0 18px
color-mix(
in srgb,
var(--svl-kh-accent) 18%,
transparent
);
}
/* Gold title divider */
.svl-hub-card__title::after {
content: "";
display: block;
width: 78px;
height: 2px;
margin-top: 0.8rem;
background:
linear-gradient(
90deg,
var(--svl-gold),
transparent
);
}
/* Excerpts intentionally follow Elementor Body typography.
Only local scale / rhythm belongs to the Hub component. */
html body a.svl-hub-card__link .svl-hub-card__excerpt {
margin: 0 0 0.8em;
color: var(--svl-text-secondary);
font-size: 17.5px;
line-height: 1.65;
}
html body a.svl-hub-card__link .svl-hub-card__excerpt:last-of-type {
margin-bottom: 0;
}
.svl-hub-card__cta {
display: inline-flex;
align-items: center;
gap: 0.5em;
width: fit-content;
margin-top: auto;
padding-top: 1.5rem;
color: var(--svl-hub-accent-display);
font-size: 17px;
line-height: 1.2;
font-weight: 700;
transition:
color 220ms ease,
transform 220ms ease;
}
/* ---------------------------------------------------------
HUB CARD — INTERACTION
--------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
html body a.svl-hub-card__link:hover,
html body a.svl-hub-card__link:focus-visible {
transform: translateY(-5px);
border-color:
color-mix(
in srgb,
var(--svl-gold) 82%,
transparent
);
background:
radial-gradient(
circle at 12% 8%,
color-mix(
in srgb,
var(--svl-kh-accent) 38%,
transparent
),
transparent 42%
),
linear-gradient(
155deg,
color-mix(
in srgb,
var(--svl-kh-accent) 24%,
transparent
) 0%,
rgba(19, 19, 21, 0.97) 48%,
rgba(8, 8, 9, 0.99) 100%
);
box-shadow:
0 25px 55px rgba(0, 0, 0, 0.38),
0 0 22px
color-mix(
in srgb,
var(--svl-kh-accent) 14%,
transparent
);
}
html body a.svl-hub-card__link:hover .svl-hub-card__cta,
html body a.svl-hub-card__link:focus-visible .svl-hub-card__cta {
color: var(--svl-text);
transform: translateX(4px);
}
}
html body a.svl-hub-card__link:focus-visible {
outline:
2px solid
var(--svl-hub-accent-display);
outline-offset: 4px;
}
/* ---------------------------------------------------------
ELEMENTOR PRO ACCORDION — CATEGORY SURFACES
The IDs already present in the Hub assign the category.
One shared gradient consumes the same KH accent token.
--------------------------------------------------------- */
#common-concerns {
--svl-kh-accent: var(--svl-kh-accent-common-concerns);
}
#voice-training {
--svl-kh-accent: var(--svl-kh-accent-voice-training);
}
#vocal-identity {
--svl-kh-accent: var(--svl-kh-accent-vocal-identity);
}
#vocal-coach {
--svl-kh-accent: var(--svl-kh-accent-vocal-coach);
}
#common-concerns > .e-n-accordion-item-title,
#voice-training > .e-n-accordion-item-title,
#vocal-identity > .e-n-accordion-item-title,
#vocal-coach > .e-n-accordion-item-title {
background:
radial-gradient(
circle at 12% 8%,
color-mix(
in srgb,
var(--svl-kh-accent) 20%,
transparent
),
transparent 40%
),
linear-gradient(
155deg,
color-mix(
in srgb,
var(--svl-kh-accent) 10%,
transparent
) 0%,
rgba(19, 19, 21, 0.97) 48%,
rgba(8, 8, 9, 0.99) 100%
) !important;
}
/* ---------------------------------------------------------
HUB CARD — TABLET + DESKTOP
Geometry / scale only.
--------------------------------------------------------- */
@media (min-width: 768px) {
html body a.svl-hub-card__link,
html body a.svl-hub-card__link:link,
html body a.svl-hub-card__link:visited {
min-height: 390px;
padding: 2rem;
}
.svl-hub-card__title {
margin-bottom: 1.4rem;
font-size: clamp(25px, 2vw, 30px);
}
html body a.svl-hub-card__link .svl-hub-card__excerpt {
font-size: 19px;
line-height: 1.72;
}
.svl-hub-card__cta {
padding-top: 2rem;
font-size: 18px;
}
}
/* =========================================================
14. RESPONSIVE — TABLET
Dedicated tablet scale: 768–1024px.
Mobile and desktop remain independent and unchanged.
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
:root {
/* PAGE / SECTION GEOMETRY */
--svl-page-padding: 32px;
/* TYPOGRAPHIC COMPONENTS */
--svl-eyebrow-font-size: 15px;
--svl-link-font-size: 15px;
--svl-link-letter-spacing: .10em;
--svl-link-padding-bottom: 5px;
/* BUTTONS */
--svl-btn-outline-font-size: 15px;
--svl-btn-outline-padding: 13px 22px;
/* REUSABLE COMPONENTS */
--svl-card-padding: 32px;
}
}
/* =========================================================
15. RESPONSIVE — DESKTOP
Desktop overrides start at 1025px.
========================================================= */
@media (min-width: 1025px) {
:root {
/* PAGE / SECTION GEOMETRY */
--svl-page-padding: 40px;
/* TYPOGRAPHIC COMPONENTS
Desktop scale aligned to the approved SVL Home. */
--svl-eyebrow-font-size: 16px;
--svl-link-font-size: 16px;
--svl-link-letter-spacing: .10em;
--svl-link-padding-bottom: 5px;
/* BUTTONS */
--svl-btn-outline-font-size: 15px;
--svl-btn-outline-padding: 13px 22px;
/* REUSABLE COMPONENTS */
--svl-card-padding: 34px;
}
}
/* WIDE DESKTOP — preserves the existing large-screen geometry */
@media (min-width: 1200px) {
:root {
--svl-page-padding: 64px;
}
}
/* =========================================================
16. ACCESSIBILITY / REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html body a.svl-link-gold,
html body a.svl-btn-outline,
html body a.svl-clickable-card,
.svl-card {
transition: none !important;
animation: none !important;
}
html body a.svl-clickable-card:hover,
html body a.svl-clickable-card:focus-visible,
html body a.svl-clickable-card:active {
transform: none !important;
animation: none !important;
}
}
/* =========================================================
17. OCEANWP HEADER FIX
Remove legacy theme divider on mobile only
========================================================= */
@media (max-width: 767px) {
#site-header {
border-bottom: none !important;
}
}