/* ============================================================ HARBOUR GLASS - Typography + Buttons Source: prototype css/main.css lines 169-320 Consumes design tokens from tokens.css - must load AFTER tokens.css. Applies prototype typography and button styles to both native HTML elements and Breakdance-compiled markup. Pure ASCII only. See functions.php note on encoding. ============================================================ */ /* --- HEADINGS --- */ /* Breakdance's compiled global-settings.css loads AFTER our theme CSS in and contains both .breakdance h1{font-size:var(--bde-h1-font-size)} rules and a :root override that collapses all heading sizes to 16px. Variable bridging from this file fails because of cascade order. We use !important on the size declarations - same pattern used for the link-color fight in components.css (S5/S6). */ h1, h2, h3, h4, h5, h6, .breakdance h1, .breakdance h2, .breakdance h3, .breakdance h4, .breakdance h5, .breakdance h6 { font-family: 'fredericka-the-greatest', 'Fredericka the Great', cursive; font-weight: 400; line-height: 1.1; color: var(--text-primary); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(122, 79, 151, 0.12); } h1, .breakdance h1 { font-size: var(--text-display) !important; line-height: 1.0; } h2, .breakdance h2 { font-size: var(--text-4xl) !important; line-height: 1.05; } h3, .breakdance h3 { font-size: var(--text-3xl) !important; line-height: 1.1; } h4, .breakdance h4 { font-size: var(--text-2xl) !important; } h5, .breakdance h5 { font-size: var(--text-xl) !important; } h6, .breakdance h6 { font-size: var(--text-lg) !important; } /* --- PARAGRAPHS --- */ .breakdance p, body p { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--text-secondary); max-width: 65ch; line-height: 1.7; font-size: var(--text-base); } /* --- BRAND WORDMARK (Harbour Glass logotype) --- */ .brand-name { font-family: 'Bradley Hand', cursive; font-weight: 700; font-size: 1.15em; color: var(--text-primary); white-space: nowrap; } /* --- OVERLINE / EYEBROW LABEL --- */ .overline { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple-light); } /* --- LINKS --- */ a { color: inherit; text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } /* --- BUTTONS --- */ .btn { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.875rem 2rem; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: none; border-radius: 0; position: relative; overflow: hidden; transition: all var(--duration-normal) var(--ease-out); text-decoration: none; cursor: pointer; } /* Primary: purple fill, purple-light slide-in on hover */ .btn--primary { background: var(--purple); color: var(--text-primary); } .btn--primary::before { content: ''; position: absolute; inset: 0; background: var(--purple-light); transform: translateX(-101%); transition: transform var(--duration-normal) var(--ease-out); } .btn--primary:hover::before { transform: translateX(0); } .btn--primary > * { position: relative; z-index: 1; } /* Outline: transparent with subtle border, purple on hover */ .btn--outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-light); } .btn--outline:hover { border-color: var(--purple); color: var(--purple-light); } /* Ghost: inline text-link variant with underline sweep */ /* Specificity bumped to .btn.btn--ghost to beat Breakdance's global link colour */ .btn.btn--ghost, a.btn.btn--ghost:link, a.btn.btn--ghost:visited { background: transparent; color: var(--text-secondary); padding: 0.5rem 0; text-transform: none; letter-spacing: 0; font-weight: 500; } .btn.btn--ghost::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--purple-light); transition: width var(--duration-normal) var(--ease-out); } .btn.btn--ghost:hover::after { width: 100%; } .btn.btn--ghost:hover, a.btn.btn--ghost:hover { color: var(--text-primary); } /* Arrow icon inside buttons - nudges right on hover */ .btn .arrow-icon { width: 1.2em; height: 1.2em; transition: transform var(--duration-normal) var(--ease-out); } .btn:hover .arrow-icon { transform: translateX(4px); }