/* =============================================================================
style.css — Clann an Dhragaín Uaine na Gàidhealtachd Albannaich
Phase 2: Design system foundation. No page-specific layouts yet.
Brief refs: §5 Visual Design System, §15 Privacy posture.
Schrems II / GDPR posture (brief §5.2 + §15.2):
• All five typefaces are SELF-HOSTED in /assets/fonts/ as WOFF2.
• NO @import and NO to Google's font CDNs (the API host or
the static-asset host commonly used for webfonts).
• The build-time fetch of these files is documented in fetch_fonts.py;
runtime traffic is exclusively to our own origin.
── Preload tags to add in every page in Phase 3 ──────────────────────
(Cormorant Garamond italic and Libre Baskerville are loaded normally —
they appear later in the visual hierarchy and don't need preload.)
── WCAG AA contrast pairs (verified) ────────────────────────────────────────
Sea Mist on Deep Forest 13.42 AAA ← primary body
Sea Mist on Dark Moss Green 10.11 AAA ← body on cards
Mist Green on Deep Forest 4.99 AA ← links / accents
Green Light on Deep Forest 8.62 AAA ← key CTAs
Green Light on Dark Moss Green 6.50 AA ← CTAs on cards
Stone Grey on Deep Forest 3.48 AA-large only — use ≥24px
Stone Grey on Dark Moss Green 2.62 FAIL — never use on cards
Mist Green on Dark Moss Green 3.76 AA-large only — decoration / H≥24px
Usage rules are encoded in the utility classes below.
============================================================================= */
/* ── 1. Self-hosted @font-face declarations ─────────────────────────────── */
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 500;
font-display: optional;
src: url('/assets/fonts/cinzel-500.woff2') format('woff2');
}
@font-face {
font-family: 'Cinzel';
font-style: normal;
font-weight: 600;
font-display: optional;
src: url('/assets/fonts/cinzel-600.woff2') format('woff2');
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: optional;
src: url('/assets/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/assets/fonts/lora-400.woff2') format('woff2');
}
@font-face {
font-family: 'Libre Baskerville';
font-style: normal;
font-weight: 400;
font-display: optional;
src: url('/assets/fonts/libre-baskerville-400.woff2') format('woff2');
}
/* ── 2. Design tokens ───────────────────────────────────────────────────── */
:root {
/* Colour palette (brief §5.1) */
--color-deep-forest: #0E1A15;
--color-dark-moss: #1F3328;
--color-mist-green: #6E8F7A;
--color-stone-grey: #6A6F6B;
--color-sea-mist: #D7E2DC;
--color-green-light: #8FBFA3;
/* Semantic aliases */
--bg: var(--color-deep-forest);
--bg-card: var(--color-dark-moss);
--text: var(--color-sea-mist);
--text-muted: var(--color-stone-grey); /* only on --bg, ≥24px */
--link: var(--color-mist-green);
--link-hover: var(--color-sea-mist);
--accent: var(--color-green-light);
--border: rgba(215, 226, 220, 0.12); /* sea-mist @ 12% */
--border-strong: rgba(215, 226, 220, 0.22);
--focus-ring: var(--color-sea-mist);
/* Typography — families */
--font-display: 'Cinzel', 'Times New Roman', serif;
--font-sub: 'Cormorant Garamond', 'Georgia', serif;
--font-body: 'Lora', Georgia, 'Times New Roman', serif;
--font-ui: 'Libre Baskerville', Georgia, serif;
/* Typography — fluid sizes (mobile → desktop, brief §5.2) */
--fs-display: clamp(2.5rem, 5.4vw + 1rem, 4.5rem); /* H1 hero 40 → 72 */
--fs-h2: clamp(2rem, 3.6vw + 0.8rem, 3rem); /* H2 32 → 48 */
--fs-h3: clamp(1.375rem, 1.4vw + 0.9rem, 1.75rem);/* H3 22 → 28 */
--fs-body: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem); /* body 17 → 20 */
--fs-ui: clamp(0.875rem, 0.15vw + 0.85rem, 0.9375rem); /* UI 14 → 15 */
--fs-small: 0.8125rem;
--lh-display: 1.2;
--lh-heading: 1.25;
--lh-body: 1.75;
--lh-tight: 1.4;
--tracking-display: 0.12em;
--tracking-heading: 0.08em;
--tracking-ui: 0.04em;
/* 8px spacing scale */
--space-1: 0.5rem; /* 8px */
--space-2: 1rem; /* 16px */
--space-3: 1.5rem; /* 24px */
--space-4: 2rem; /* 32px */
--space-5: 3rem; /* 48px */
--space-6: 4rem; /* 64px */
--space-7: 5rem; /* 80px */
--space-8: 6rem; /* 96px */
--space-9: 7.5rem; /* 120px */
--space-10: 10rem; /* 160px */
/* Section rhythm — fluid between mobile (48/64/80) and desktop (80/120/160) */
--section-y-sm: clamp(var(--space-5), 4vw + 1rem, var(--space-7)); /* 48 → 80 */
--section-y-md: clamp(var(--space-6), 6vw + 1rem, var(--space-9)); /* 64 → 120 */
--section-y-lg: clamp(var(--space-7), 8vw + 1rem, var(--space-10));/* 80 → 160 */
/* Layout containers (brief §5.3) */
--container-max: 75rem; /* 1200px */
--prose-max: 45rem; /* 720px */
--gutter: clamp(1rem, 4vw, 2rem);
/* Breakpoints — mirrored as JS-readable custom properties (use in @media
directly; CSS doesn't yet allow var() inside @media queries).
These are documentation tokens for consistency. */
--bp-mobile: 640px; /* ≤ this = mobile */
--bp-tablet: 1024px; /* 641 – 1024 = tablet */
/* desktop = ≥ 1025px */
/* Motion */
--tr-fast: 150ms;
--tr-base: 200ms;
--tr-slow: 1200ms;
--easing: cubic-bezier(0.2, 0.7, 0.2, 1);
/* Elevation (kept extremely subtle — atmosphere over UI) */
--shadow-soft: 0 1px 0 rgba(215, 226, 220, 0.04) inset,
0 12px 32px rgba(0, 0, 0, 0.35);
}
/* ── 3. Modern reset (minimal) ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6,
p, blockquote, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg, video, canvas {
display: block;
max-width: 100%;
height: auto;
}
button, input, select, textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
table { border-collapse: collapse; }
/* ── 4. Base document ───────────────────────────────────────────────────── */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--space-5);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
::selection {
background: var(--color-mist-green);
color: var(--color-deep-forest);
}
/* ── 5. Typography ──────────────────────────────────────────────────────── */
h1, .h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
color: var(--text);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h2);
line-height: var(--lh-heading);
letter-spacing: var(--tracking-heading);
color: var(--text);
}
h3, .h3 {
font-family: var(--font-sub);
font-style: italic;
font-weight: 500;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--text);
}
h4, h5, h6 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: var(--tracking-heading);
line-height: var(--lh-heading);
color: var(--text);
}
p { max-width: 65ch; }
.lede {
font-family: var(--font-sub);
font-style: italic;
font-size: calc(var(--fs-body) * 1.15);
color: var(--text);
}
.muted {
color: var(--text-muted);
font-size: var(--fs-small);
}
.eyebrow {
font-family: var(--font-ui);
font-size: var(--fs-small);
text-transform: uppercase;
letter-spacing: var(--tracking-display);
color: var(--link);
}
.ui-text {
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-ui);
}
/* ── 6. Links ───────────────────────────────────────────────────────────── */
a {
color: var(--link);
text-decoration: underline;
text-decoration-color: var(--link);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--tr-base) var(--easing),
text-decoration-color var(--tr-base) var(--easing);
}
a:hover {
color: var(--link-hover);
text-decoration-color: var(--link-hover);
}
a:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
border-radius: 2px;
}
/* ── 7. Skip link (a11y) ────────────────────────────────────────────────── */
.skip-link {
position: absolute;
top: -100vh;
left: var(--space-2);
z-index: 1000;
padding: var(--space-1) var(--space-2);
background: var(--color-sea-mist);
color: var(--color-deep-forest);
text-decoration: none;
font-family: var(--font-ui);
font-size: var(--fs-ui);
}
.skip-link:focus {
top: var(--space-2);
}
/* ── 8. Layout primitives ───────────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.prose {
width: 100%;
max-width: var(--prose-max);
margin-inline: auto;
}
.prose > * + * { margin-top: var(--space-3); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--space-2); }
.prose > * + h2, .prose > * + h3 { margin-top: var(--space-5); }
.section {
padding-block: var(--section-y-md);
}
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--card {
background-color: var(--bg-card);
}
/* Reusable grid helper.
- Default: auto-fit columns at min --grid-min (default 16rem).
- Override --grid-min or use the modifier classes.
- Gap is overridable via --grid-gap. */
.grid {
--grid-min: 16rem;
--grid-gap: var(--space-4);
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(auto-fit, minmax(var(--grid-min), 1fr));
}
.grid--2 { --grid-min: 22rem; }
.grid--3 { --grid-min: 18rem; }
.grid--4 { --grid-min: 14rem; }
.grid--tight { --grid-gap: var(--space-2); }
.grid--loose { --grid-gap: var(--space-5); }
.stack > * + * { margin-top: var(--stack, var(--space-3)); }
.stack--sm { --stack: var(--space-1); }
.stack--md { --stack: var(--space-3); }
.stack--lg { --stack: var(--space-5); }
.flow > * + * { margin-block-start: 1em; }
/* Visually hidden but available to AT */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ── 9. Buttons (base, used by CTAs and Suno facade) ────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
padding: 0.875rem 1.5rem;
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-ui);
text-decoration: none;
border: 1px solid var(--border-strong);
background: transparent;
color: var(--text);
cursor: pointer;
transition: background-color var(--tr-base) var(--easing),
color var(--tr-base) var(--easing),
border-color var(--tr-base) var(--easing);
}
.btn:hover {
background: var(--color-sea-mist);
color: var(--color-deep-forest);
border-color: var(--color-sea-mist);
text-decoration: none;
}
.btn--primary {
background: var(--accent);
color: var(--color-deep-forest);
border-color: var(--accent);
}
.btn--primary:hover {
background: var(--color-sea-mist);
border-color: var(--color-sea-mist);
}
/* ── 10. Suno facade component (brief §15.3) ────────────────────────────── */
/*
Renders the click-to-consent thumbnail. The iframe is only injected
on user click — that JS lives in script.js (Phase 3).
Markup contract (Phase 3+):
*/
.suno-facade {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--bg-card);
border: 1px solid var(--border);
overflow: hidden;
isolation: isolate;
}
.suno-facade__thumb {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* Subtle dim so the overlay button reads even on bright thumbnails */
filter: brightness(0.72) saturate(0.9);
transition: filter var(--tr-base) var(--easing),
transform var(--tr-slow) var(--easing);
}
.suno-facade__play {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
width: 100%;
height: 100%;
padding: var(--space-3);
background: linear-gradient(
180deg,
rgba(14, 26, 21, 0.15) 0%,
rgba(14, 26, 21, 0.55) 100%
);
color: var(--text);
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-ui);
text-align: center;
cursor: pointer;
transition: background-color var(--tr-base) var(--easing);
}
.suno-facade__icon {
width: 56px;
height: 56px;
fill: none;
stroke: var(--color-sea-mist);
stroke-width: 1.25;
transition: stroke var(--tr-base) var(--easing),
transform var(--tr-base) var(--easing);
}
.suno-facade__label {
display: inline-block;
margin-top: var(--space-1);
text-transform: uppercase;
letter-spacing: var(--tracking-display);
}
.suno-facade__note {
display: inline-block;
margin-top: var(--space-1);
max-width: 32ch;
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--color-sea-mist);
opacity: 0.78;
line-height: var(--lh-tight);
}
/* ── Hover ── */
.suno-facade:hover .suno-facade__thumb,
.suno-facade__play:hover ~ .suno-facade__thumb {
filter: brightness(0.85) saturate(1);
}
.suno-facade__play:hover {
background: linear-gradient(
180deg,
rgba(14, 26, 21, 0.05) 0%,
rgba(14, 26, 21, 0.45) 100%
);
}
.suno-facade__play:hover .suno-facade__icon {
stroke: var(--color-green-light);
transform: scale(1.06);
}
/* ── Focus (keyboard-only) ── */
.suno-facade__play:focus { outline: none; }
.suno-facade__play:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: -4px;
}
.suno-facade__play:focus-visible .suno-facade__icon {
stroke: var(--color-green-light);
}
/* ── Pressed / active ── */
.suno-facade__play:active .suno-facade__icon {
transform: scale(0.98);
}
/* ── Loading state (set by JS while the iframe is being injected) ── */
.suno-facade.is-loading .suno-facade__play { cursor: progress; }
.suno-facade.is-loading .suno-facade__icon { animation: suno-pulse 1.4s ease-in-out infinite; }
@keyframes suno-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* ── 11. Responsive adjustments ─────────────────────────────────────────── */
/* Mobile (≤ 640px) */
@media (max-width: 640px) {
:root { --gutter: 1.25rem; }
.grid--2, .grid--3, .grid--4 { --grid-min: 100%; }
.suno-facade__icon { width: 44px; height: 44px; }
}
/* Tablet (641–1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
.grid--3 { --grid-min: 20rem; }
.grid--4 { --grid-min: 16rem; }
}
/* ── 12. Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.suno-facade__thumb { transform: none !important; filter: brightness(0.78); }
.suno-facade.is-loading .suno-facade__icon { animation: none; }
}
/* =============================================================================
PAGE-COMPONENT LAYER (Phase 3)
Adds the patterns required by the homepage. All purely class-driven,
no page-specific overrides bleed into the design tokens above.
============================================================================= */
/* ── 13. Site header (sticky) ──────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(14, 26, 21, 0.82);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--border);
}
.site-header__inner {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 64px;
padding-block: var(--space-1);
}
.site-wordmark {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.0625rem;
letter-spacing: var(--tracking-display);
color: var(--text);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.site-wordmark:hover { color: var(--accent); text-decoration: none; }
.site-nav { flex: 1; }
.site-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2) var(--space-4);
}
.site-nav__list a {
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-ui);
color: var(--text);
text-decoration: none;
padding-block: var(--space-1);
}
.site-nav__list a:hover {
color: var(--accent);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 0.35em;
}
.lang-switcher {
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-ui);
color: var(--text);
display: flex;
gap: 0.4em;
align-items: center;
flex-shrink: 0;
}
.lang-switcher [aria-current="true"] {
color: var(--text);
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 0.35em;
}
.lang-switcher a { color: var(--text); text-decoration: none; }
.lang-switcher a:hover { color: var(--accent); text-decoration: underline; }
.lang-switcher [aria-hidden="true"] { color: var(--text-muted); }
@media (max-width: 900px) {
.site-header__inner { flex-wrap: wrap; min-height: 0; }
.site-nav { order: 3; flex-basis: 100%; padding-block: var(--space-1); border-top: 1px solid var(--border); }
.site-nav__list { justify-content: flex-start; gap: var(--space-2) var(--space-3); }
.site-wordmark { flex: 1; }
}
/* ── 14. Hero ──────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
isolation: isolate;
/* Solid fallback colour for the moments before the picture loads */
background: radial-gradient(ellipse at center, #122620 0%, var(--color-deep-forest) 80%);
}
.hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.hero__media picture,
.hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero__overlay {
position: absolute;
inset: 0;
z-index: -1;
background:
radial-gradient(ellipse at center, rgba(14, 26, 21, 0) 0%, rgba(14, 26, 21, 0.55) 55%, rgba(14, 26, 21, 0.92) 100%),
linear-gradient(180deg, rgba(14, 26, 21, 0.35) 0%, rgba(14, 26, 21, 0.1) 40%, rgba(14, 26, 21, 0.85) 100%);
}
.hero__content {
max-width: 50rem;
padding-inline: var(--gutter);
padding-block: var(--space-7);
opacity: 0;
animation: hero-in 1200ms var(--easing) 80ms forwards;
}
.hero__title {
font-size: var(--fs-display);
margin-bottom: var(--space-3);
}
.hero__subtitle {
font-family: var(--font-sub);
font-style: italic;
font-size: clamp(1.125rem, 1.2vw + 0.9rem, 1.5rem);
color: var(--text);
margin-bottom: var(--space-4);
max-width: 42ch;
margin-inline: auto;
}
.hero__tagline {
font-family: var(--font-ui);
font-size: var(--fs-ui);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--space-5);
}
.hero__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
justify-content: center;
}
@keyframes hero-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero__content { animation: none; opacity: 1; }
}
/* ── 15. Section heading helper ─────────────────────────────────────────── */
.section__eyebrow {
display: block;
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-mist-green);
margin-bottom: var(--space-2);
text-align: center;
}
/* On card-background sections, raise contrast: Mist Green on Dark Moss
only clears AA-large. Use Sea Mist instead for the small eyebrow. */
.section--card .section__eyebrow { color: var(--color-sea-mist); opacity: 0.85; }
.section__heading {
text-align: center;
margin-bottom: var(--space-5);
}
/* ── 16. Clan timeline ──────────────────────────────────────────────────── */
.clan-timeline {
width: 100%;
max-width: 56rem;
margin: var(--space-5) auto 0;
}
.clan-timeline__svg {
width: 100%;
height: auto;
display: block;
}
.clan-timeline__line { stroke: var(--color-mist-green); stroke-width: 1.5; }
.clan-timeline__node { fill: var(--color-sea-mist); stroke: var(--color-mist-green); stroke-width: 1.5; }
.clan-timeline__year { fill: var(--text); font-family: 'Cinzel', serif; font-weight: 500; font-size: 14px; letter-spacing: 0.08em; }
.clan-timeline__label { fill: var(--text); font-family: 'Cinzel', serif; font-weight: 500; font-size: 13px; letter-spacing: 0.05em; }
.clan-timeline__descriptor { fill: var(--text-muted); font-family: 'Lora', serif; font-size: 12px; }
/* Vertical layout on narrow viewports */
.clan-timeline__list {
display: none;
list-style: none;
padding: 0;
margin: var(--space-4) 0 0;
}
.clan-timeline__list li {
display: grid;
grid-template-columns: 5rem 1px 1fr;
column-gap: var(--space-3);
padding-block: var(--space-2);
align-items: start;
}
.clan-timeline__list li::before {
content: "";
background: var(--color-mist-green);
width: 1px;
margin-inline: auto;
align-self: stretch;
}
.clan-timeline__list .y {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: 0.08em;
color: var(--text);
}
.clan-timeline__list .lbl { color: var(--text); }
.clan-timeline__list .desc {
color: var(--color-sea-mist);
opacity: 0.7;
font-size: var(--fs-small);
display: block;
margin-top: 0.25em;
}
@media (max-width: 720px) {
.clan-timeline__svg { display: none; }
.clan-timeline__list { display: block; }
}
/* ── 17. Dragon — five symbolic blocks ─────────────────────────────────── */
.dragon-block {
background: transparent;
padding: var(--space-4);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.dragon-block__glyph {
width: 64px;
height: 64px;
stroke: var(--color-mist-green);
fill: none;
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.dragon-block__glyph--accent { stroke: var(--color-green-light); }
.dragon-block__title {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-h3);
letter-spacing: var(--tracking-heading);
color: var(--text);
}
/* ── 18. Songs (ritual index — brief v3.1 §4.5) ─────────────────────────── */
.songs-intro {
max-width: var(--prose-max);
margin: 0 auto var(--space-7);
text-align: center;
}
.song-cycle {
margin-top: var(--space-6);
}
.song-cycle__heading {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 60px 0 40px;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.0625rem;
letter-spacing: 0.15em;
text-transform: uppercase;
/* Sea Mist on Dark Moss = 10.11 AAA. Mist Green (per brief §4.5)
would only clear AA-large; reserved for the heading rules below. */
color: var(--color-sea-mist);
}
.song-cycle__heading::before,
.song-cycle__heading::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-mist-green);
opacity: 0.6;
}
.song-cycle__heading > span {
flex-shrink: 0;
white-space: nowrap;
}
.song-grid {
display: grid;
gap: var(--space-3);
}
.song-grid--invocation { grid-template-columns: 1fr; }
.song-grid--introductions {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.song-grid--chants {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.song-grid--chants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.song-grid--introductions,
.song-grid--chants { grid-template-columns: 1fr; }
}
.song-card {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--space-1);
padding: var(--space-3);
background: rgba(14, 26, 21, 0.45);
border: 1px solid var(--border);
text-decoration: none;
color: var(--text);
transition: background-color var(--tr-base) var(--easing),
border-color var(--tr-base) var(--easing),
transform var(--tr-base) var(--easing);
min-height: 11rem;
isolation: isolate;
overflow: hidden;
}
.song-card:hover {
background: rgba(31, 51, 40, 0.85);
border-color: var(--color-green-light);
text-decoration: none;
}
.song-card__num {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-small);
/* Sea Mist @ 65% on Dark Moss ≈ 6.6:1, AA. Stone Grey would fail. */
color: var(--color-sea-mist);
opacity: 0.65;
letter-spacing: 0.18em;
}
.song-card__title {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.125rem;
letter-spacing: 0.05em;
color: var(--color-sea-mist);
line-height: 1.35;
}
.song-card__sub {
font-family: var(--font-sub);
font-style: italic;
font-size: 1rem;
/* Mist Green on Dark Moss is only AA-large. Bump to Sea Mist with
reduced opacity to keep the visual subordination but pass AA. */
color: var(--color-sea-mist);
opacity: 0.82;
line-height: 1.4;
}
.song-card__foot {
display: flex;
justify-content: space-between;
align-items: end;
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-small);
/* Sea Mist @ 65% on Dark Moss ≈ 6.6:1, AA. */
color: var(--color-sea-mist);
opacity: 0.65;
}
.song-card__play {
width: 18px;
height: 18px;
fill: none;
stroke: var(--color-green-light);
stroke-width: 1.5;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--tr-base) var(--easing),
transform var(--tr-base) var(--easing);
}
.song-card:hover .song-card__play,
.song-card:focus-visible .song-card__play {
opacity: 1;
transform: translateX(0);
}
/* Invocation — emphasised */
.song-card--invocation {
padding: var(--space-5);
min-height: 14rem;
background: rgba(31, 51, 40, 0.55);
}
.song-card--invocation .song-card__title { font-size: 1.5rem; letter-spacing: 0.06em; }
.song-card--invocation .song-card__sub { font-size: 1.125rem; }
.song-card--invocation .breath-sigil {
position: absolute;
inset: 0;
margin: auto;
width: 70%;
height: auto;
z-index: -1;
opacity: 0.05;
stroke: var(--color-sea-mist);
fill: none;
stroke-width: 1;
pointer-events: none;
}
/* ── 19. Landscape figures ─────────────────────────────────────────────── */
.landscape-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .landscape-grid { grid-template-columns: 1fr; } }
.landscape-figure {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.landscape-figure picture,
.landscape-figure img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--bg-card);
}
@media (max-width: 640px) {
.landscape-figure picture,
.landscape-figure img { aspect-ratio: 4 / 5; }
}
.landscape-figure figcaption {
font-family: var(--font-sub);
font-style: italic;
color: var(--text);
}
.landscape-figure figcaption strong {
display: block;
font-family: var(--font-display);
font-style: normal;
font-weight: 500;
font-size: 1.0625rem;
letter-spacing: var(--tracking-heading);
color: var(--text);
margin-bottom: 0.25em;
}
/* ── 20. About — Gaelic-register disclaimer ────────────────────────────── */
.about-disclaimer {
max-width: var(--prose-max);
margin: var(--space-5) auto 0;
font-family: var(--font-sub);
font-style: italic;
font-size: 1.0625rem;
line-height: 1.7;
color: var(--color-mist-green);
border-inline-start: 2px solid var(--color-mist-green);
padding-inline-start: var(--space-3);
}
/* ── 21. Footer ────────────────────────────────────────────────────────── */
.site-footer {
border-top: 1px solid var(--border);
padding-block: var(--space-5);
margin-top: var(--section-y-md);
background: rgba(14, 26, 21, 0.6);
}
.site-footer__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
align-items: start;
}
@media (max-width: 720px) {
.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-3); text-align: center; }
}
.site-footer__col h2 {
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: var(--tracking-display);
text-transform: uppercase;
/* Sea Mist @ 70% on Deep Forest ≈ 9.4:1, AA. Stone Grey would fail. */
color: var(--color-sea-mist);
opacity: 0.7;
margin-bottom: var(--space-2);
}
.site-footer a { color: var(--text); }
.site-footer a:hover { color: var(--accent); }
.site-footer__col--lang {
font-family: var(--font-ui);
letter-spacing: var(--tracking-ui);
}
/* ══════════════════════════════════════════════════════════════════════════
── 22. Song page (Phase 5) ────────────────────────────────────────────────
Per-page route: /songs/0X-.html and /it/canzoni/0X-.html
Hard Rule #2 preserved: facade uses native /
(closed details defers iframe network — empirically verified Chromium).
Decision log:
· Lora 400 italic for Gaelic verses → falls back to synthetic italic
(lora-400-italic.woff2 not yet commissioned). Acceptable: WCAG passes
on rendered glyphs, the otherness signal is preserved.
· No script.js: facade is pure-HTML disclosure, not a button injector.
══════════════════════════════════════════════════════════════════════════ */
.song-page {
padding-block: var(--section-y-md);
}
/* ── Track header ── */
.track-eyebrow {
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-sea-mist);
opacity: 0.7;
margin-bottom: var(--space-2);
}
.track-hero {
position: relative;
padding-block: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
margin-bottom: var(--space-5);
}
.track-hero__title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-display);
line-height: var(--lh-display);
color: var(--color-sea-mist);
margin: 0 0 var(--space-2);
letter-spacing: 0.01em;
}
.track-hero__subtitle {
font-family: var(--font-sub);
font-style: italic;
font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
color: var(--color-mist-green);
margin: 0 0 var(--space-3);
}
.track-hero__meta {
display: flex;
align-items: baseline;
gap: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
color: var(--color-sea-mist);
opacity: 0.78;
letter-spacing: var(--tracking-ui);
}
.track-hero__invocation-line {
font-family: var(--font-body);
font-style: italic;
font-size: var(--fs-body);
color: var(--color-sea-mist);
margin: var(--space-3) 0 0;
max-width: 56ch;
}
/* ── Suno facade as (no JS) ── */
/* Phase 5.A patch (override after review): the / facade
variant was retired in favour of the JS-injected pattern from brief
§15.3. The original .suno-facade button-injector contract (lines
~454-616) is the canonical contract; /script.js is the injector.
Below: only the iframe insertion slot + the .is-loaded final state. */
.suno-facade__slot {
display: contents;
}
.suno-facade.is-loaded {
/* Once the iframe replaces the facade contents, drop the placeholder
thumbnail aspect-ratio constraint and let the iframe drive height. */
aspect-ratio: auto;
background: transparent;
border: 0;
}
.suno-facade.is-loaded iframe {
display: block;
width: 100%;
max-width: 760px;
height: 240px;
margin: 0 auto;
border: 0;
}
.suno-facade__noscript {
display: block;
margin-top: var(--space-2);
font-family: var(--font-ui);
font-size: var(--fs-small);
text-align: center;
}
.suno-facade__noscript a {
color: var(--color-mist-green);
text-decoration: underline;
}
.suno-facade__noscript a:hover { color: var(--color-sea-mist); }
/* ── Lyrics two-column ── */
.lyrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
margin-block: var(--space-5);
}
@media (max-width: 720px) {
.lyrics { grid-template-columns: 1fr; gap: var(--space-4); }
}
.lyrics__col-label {
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
color: var(--color-sea-mist);
opacity: 0.7;
margin: 0 0 var(--space-2);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border);
}
.lyrics__verses {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
white-space: pre-line;
margin: 0;
}
/* Override per Phase 5.A review: Cormorant Garamond 500 italic for the
Gàidhlig column. Renaissance-era DNA matching the 1560 register;
typeface contrast against Lora 400 (translation column) creates the
visual separation; zero additional font download (Cormorant is
already preloaded via the subtitle treatment). */
.lyrics__verses--gd {
font-family: var(--font-sub);
font-style: italic;
font-weight: 500;
}
/* ── Contextual prose ── */
.in-cycle {
margin-block: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--border);
}
.in-cycle__heading {
font-family: var(--font-display);
font-size: var(--fs-h3);
color: var(--color-sea-mist);
margin: 0 0 var(--space-2);
}
.in-cycle__body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
max-width: 64ch;
margin: 0;
}
/* ── Prev / Next ── */
.prev-next {
display: flex;
justify-content: space-between;
align-items: stretch;
gap: var(--space-3);
margin-block: var(--space-5);
padding-block: var(--space-4);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) {
.prev-next { flex-direction: column; }
}
.prev-next__link {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-3);
font-family: var(--font-ui);
text-decoration: none;
color: var(--color-sea-mist);
background: var(--bg-card);
border: 1px solid var(--border);
transition: background-color var(--tr-base) var(--easing), border-color var(--tr-base) var(--easing);
}
.prev-next__link:hover { border-color: var(--border-strong); background: rgba(31,51,40,0.85); }
.prev-next__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.prev-next__link--next { text-align: right; align-items: flex-end; }
.prev-next__direction {
font-size: var(--fs-small);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
/* Sea Mist on Dark Moss = 10.11 AAA. Mist Green here would be 3.76 (AA-large only).
Deviation aligned with .song-card__sub on homepage. */
color: var(--color-sea-mist);
opacity: 0.82;
}
.prev-next__title {
font-family: var(--font-display);
font-size: 1.125rem;
color: var(--color-sea-mist);
}
.prev-next__placeholder {
flex: 1 1 0;
padding: var(--space-3);
border: 1px dashed var(--border);
font-family: var(--font-ui);
font-size: var(--fs-small);
/* Sea Mist @ 0.65 on Deep Forest ≈ 8.7 AAA. Stone Grey would fail (2.62). */
color: var(--color-sea-mist);
opacity: 0.65;
text-align: center;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Breadcrumb ── */
.breadcrumb {
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-ui);
color: var(--color-sea-mist);
/* No parent opacity — it would cascade onto link colour (--color-mist-green)
and drop link contrast from 4.99 AA to 3.94 (fail). */
margin-block: var(--space-4);
}
.breadcrumb__list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
}
.breadcrumb__list li::after {
content: '›';
margin-left: var(--space-2);
color: var(--color-stone-grey);
}
.breadcrumb__list li:last-child::after { content: ''; }
.breadcrumb a {
color: var(--color-mist-green);
text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-sea-mist); text-decoration: underline; }
.breadcrumb__current {
color: var(--color-sea-mist);
}
/* ── Footer extra link ── */
.footer-about-link {
margin-top: var(--space-3);
font-family: var(--font-ui);
font-size: var(--fs-small);
letter-spacing: var(--tracking-display);
text-transform: uppercase;
}
.footer-about-link a { color: var(--color-mist-green); text-decoration: none; }
.footer-about-link a:hover { color: var(--color-sea-mist); text-decoration: underline; }
/* ────────────────────────────────────────────────────────────────── *\
§23 — Contextual prose (Phase 5.C-post)
Descendant rules for the injected 8-H3 subtree + ritual-frame dl.
Purely additive; does not alter §22 .in-cycle/.in-cycle__heading.
\* ────────────────────────────────────────────────────────────────── */
.in-cycle__h3 {
font-family: var(--font-display);
font-size: var(--fs-h4, 1.125rem);
color: var(--color-sea-mist);
margin: var(--space-4) 0 var(--space-1);
letter-spacing: 0.01em;
}
.in-cycle__h3:first-of-type {
margin-top: var(--space-3);
}
.in-cycle__p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
max-width: 64ch;
margin: 0 0 var(--space-2);
}
.ritual-frame {
display: grid;
grid-template-columns: minmax(9rem, max-content) 1fr;
gap: var(--space-1) var(--space-3);
max-width: 64ch;
margin: var(--space-2) 0 var(--space-3);
}
.ritual-frame dt {
font-family: var(--font-display);
font-weight: 500;
color: var(--color-sea-mist);
letter-spacing: 0.01em;
}
.ritual-frame dd {
font-family: var(--font-body);
color: var(--color-sea-mist);
margin: 0;
}
@media (max-width: 36rem) {
.ritual-frame { grid-template-columns: 1fr; gap: 0; }
.ritual-frame dt { margin-top: var(--space-1); }
}
/* ────────────────────────────────────────────────────────────────── *\
§24 — Architecture pages (Phase 5.D)
Bespoke long-form layout for /architecture.html and
/it/architettura.html. Purely additive; does not alter §1–§23.
All colour pairings verified WCAG 2.2 AA at normal text size.
\* ────────────────────────────────────────────────────────────────── */
.architecture-page {
padding-block: var(--section-y-md, 4rem);
}
.architecture-page > .container {
max-width: 68rem;
}
/* Hero */
.architecture__hero {
margin-block: var(--space-4) var(--space-6);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border);
text-align: center;
}
.architecture__title {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: 0.02em;
margin: 0 0 var(--space-2);
color: var(--color-sea-mist);
}
.architecture__subtitle {
font-family: var(--font-sub);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
margin: 0;
}
.architecture__subtitle em span[lang="gd"] {
font-style: italic;
}
/* Intro lede */
.architecture__intro {
max-width: 65ch;
margin-inline: auto;
margin-bottom: var(--space-6);
}
.architecture__lede {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
margin: 0;
}
/* Generic section blocks */
.architecture__section,
.architecture__canon,
.architecture__phases {
max-width: 65ch;
margin-inline: auto;
margin-bottom: var(--space-6);
}
.architecture__section h2,
.architecture__canon > h2,
.architecture__phases h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
letter-spacing: 0.01em;
margin: 0 0 var(--space-3);
}
.architecture__section p,
.architecture__canon > p,
.architecture__phases > p {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
margin: 0 0 var(--space-2);
}
.architecture__practice-list {
list-style: disc;
padding-left: var(--space-3);
margin: var(--space-2) 0;
color: var(--color-sea-mist);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.architecture__practice-list li {
margin-bottom: var(--space-1);
}
/* Canonical-nomenclature section — the spine */
.architecture__canon {
/* Wider than default section to accommodate the two-column entry grid. */
max-width: 72ch;
}
.architecture__group {
margin-block: var(--space-5) var(--space-4);
}
.architecture__group > h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 var(--space-2);
}
.architecture__canon-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: none;
}
.architecture__chant-entry {
display: grid;
grid-template-columns: 3.5rem 1fr;
grid-template-rows: auto auto auto;
gap: var(--space-1) var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--border);
}
.architecture__chant-entry:last-child {
border-bottom: none;
}
.architecture__code {
grid-row: 1 / 4;
align-self: center;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 600;
color: var(--color-sea-mist);
letter-spacing: 0.02em;
}
.architecture__chant-title {
grid-column: 2;
font-family: var(--font-sub);
font-style: italic;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 160ms ease;
}
.architecture__chant-title:hover,
.architecture__chant-title:focus {
color: var(--color-sea-mist);
border-bottom-color: var(--color-green-light);
outline: none;
}
.architecture__chant-title:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
border-bottom-color: transparent;
}
.architecture__chant-subtitle {
grid-column: 2;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
opacity: 0.85;
}
.architecture__chant-desc {
grid-column: 2;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
margin: var(--space-1) 0 0;
}
.architecture__group-postscript {
margin-top: var(--space-3);
font-style: italic;
color: var(--color-sea-mist);
}
/* Four structural phases — responsive grid */
.architecture__phase-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--space-3);
margin-block: var(--space-3);
}
.architecture__phase {
padding: var(--space-3);
background-color: var(--bg-card);
border-left: 3px solid var(--color-green-light);
}
.architecture__phase > h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
letter-spacing: 0.01em;
margin: 0 0 var(--space-1);
}
.architecture__phase-codes {
font-family: var(--font-display);
font-size: var(--fs-ui);
letter-spacing: 0.08em;
color: var(--color-sea-mist);
opacity: 0.8;
margin: 0 0 var(--space-2);
text-transform: uppercase;
}
.architecture__phase > p:last-child {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
margin: 0;
}
.architecture__phases-outro {
margin-top: var(--space-4);
font-style: italic;
color: var(--color-sea-mist);
}
/* Closing note */
.architecture__section--closing {
text-align: center;
border-top: 1px solid var(--border);
padding-top: var(--space-5);
margin-top: var(--space-6);
}
.architecture__coda-text {
font-family: var(--font-sub);
font-style: italic;
font-size: var(--fs-h3);
line-height: var(--lh-heading);
color: var(--color-sea-mist);
max-width: 40ch;
margin-inline: auto;
margin-top: var(--space-4);
}
/* Saga CTA (homepage §4.2 injection) */
.saga__cta {
font-family: var(--font-sub);
font-style: italic;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-sea-mist);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
}
.saga__cta a {
color: var(--color-sea-mist);
border-bottom: 1px solid var(--color-green-light);
text-decoration: none;
}
.saga__cta a:hover,
.saga__cta a:focus-visible {
border-bottom-color: var(--color-sea-mist);
}
/* Narrow-viewport tuning */
@media (max-width: 36rem) {
.architecture__chant-entry {
grid-template-columns: 2.75rem 1fr;
gap: var(--space-1) var(--space-2);
}
.architecture__code {
font-size: var(--fs-body);
}
.architecture__chant-title,
.architecture__chant-subtitle,
.architecture__chant-desc {
grid-column: 2;
}
.architecture__phase-grid {
grid-template-columns: 1fr;
}
}