/* ============================================================================ Kaayko Alumni OS — CTA System (Letterpress edition) Source of truth. Drop this stylesheet into your static assets unmodified. Apply to : data-kc-theme="dark" toggles dark stock. data-kc-tenant="" applies a tenant rebrand. See: docs/cta-system.md ========================================================================== */ /* ============================================================================ TOKENS — every visible pixel reads from these. No hardcoded colours. ========================================================================== */ :root { /* Paper — warm ivory chapbook stock */ --kc-paper: #EDE6D3; --kc-paper-2: #E5DCC4; --kc-paper-3: #DCD0B2; /* Ink — warm black */ --kc-ink: #1B1814; --kc-ink-2: #3E392F; --kc-ink-3: #6E6857; --kc-ink-mute: #A39B82; /* Press hairlines */ --kc-rule: #1B1814; --kc-rule-2: rgba(27, 24, 20, 0.30); --kc-rule-3: rgba(27, 24, 20, 0.13); /* Ink halo — the dark edge where ink bites paper */ --kc-halo: rgba(27, 24, 20, 0.18); --kc-halo-strong: rgba(27, 24, 20, 0.32); /* Accent — terracotta, the second ink */ --kc-accent: #B8501C; --kc-accent-2: #8C3A11; --kc-accent-soft: rgba(184, 80, 28, 0.14); --kc-accent-ghost: rgba(184, 80, 28, 0.55); --kc-focus-ring: rgba(184, 80, 28, 0.32); /* Type */ --kc-display: "Fraunces", "Source Serif Pro", Georgia, serif; --kc-body: "Inter Tight", "Söhne", system-ui, -apple-system, sans-serif; --kc-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* Motion */ --kc-ease: cubic-bezier(0.32, 0.72, 0, 1); --kc-press: cubic-bezier(0.7, 0, 0.3, 1); --kc-dur-fast: 160ms; --kc-dur-base: 320ms; --kc-dur-slow: 520ms; } /* Dark stock — deep ink-blue chapbook cover */ [data-kc-theme="dark"] { --kc-paper: #15131C; --kc-paper-2: #1F1C28; --kc-paper-3: #2A2734; --kc-ink: #EDE6D3; --kc-ink-2: #C4BDA8; --kc-ink-3: #847E6E; --kc-ink-mute: #4F4A40; --kc-rule: #EDE6D3; --kc-rule-2: rgba(237, 230, 211, 0.34); --kc-rule-3: rgba(237, 230, 211, 0.16); --kc-halo: rgba(237, 230, 211, 0.18); --kc-halo-strong: rgba(237, 230, 211, 0.32); --kc-accent: #E89A5A; --kc-accent-2: #F4B884; --kc-accent-soft: rgba(232, 154, 90, 0.18); --kc-accent-ghost: rgba(232, 154, 90, 0.60); --kc-focus-ring: rgba(232, 154, 90, 0.36); } /* Per-tenant rebrand example */ [data-kc-tenant="st-marys"] { --kc-ink: #1A2D52; --kc-ink-2: #364B72; --kc-rule: #1A2D52; --kc-accent: #B8902C; --kc-accent-2: #8C6D1F; --kc-accent-soft: rgba(184, 144, 44, 0.14); --kc-accent-ghost: rgba(184, 144, 44, 0.55); --kc-focus-ring: rgba(184, 144, 44, 0.32); } /* ============================================================================ OPTIONAL — paper grain on body. Skip this block if you keep the existing solid background. Required if you want the full letterpress feel. ========================================================================== */ html, body { background-color: var(--kc-paper); background-image: repeating-linear-gradient( 90deg, transparent 0, transparent 2px, var(--kc-halo) 2px, var(--kc-halo) 2.3px, transparent 2.3px, transparent 6px ), url("data:image/svg+xml;utf8,"); background-blend-mode: multiply, multiply; color: var(--kc-ink); } /* ============================================================================ BASE ========================================================================== */ .kc { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--kc-body); font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: -0.005em; color: var(--kc-ink); text-decoration: none; background: transparent; border: 0; padding: 0; cursor: pointer; position: relative; -webkit-font-smoothing: antialiased; transition: color var(--kc-dur-base) var(--kc-ease); } .kc:focus { outline: none; } .kc::after { content: ""; position: absolute; inset: -8px -10px; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 var(--kc-focus-ring); transition: box-shadow var(--kc-dur-fast) var(--kc-ease); } .kc:focus-visible::after { box-shadow: 0 0 0 4px var(--kc-focus-ring); } .kc--sm { font-size: 13px; min-height: 36px; } .kc--md { font-size: 15px; min-height: 44px; padding: 10px 0; } .kc--lg { font-size: 18px; min-height: 56px; padding: 14px 0; } .kc--block { width: 100%; } /* ============================================================================ PRIMARY — type with a growing underline. No arrow. ========================================================================== */ .kc-primary { padding-right: 0; position: relative; } .kc-primary .kc__label { position: relative; padding-bottom: 8px; font-weight: 500; } /* The black ink rule */ .kc-primary .kc__label::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 32%; height: 1.5px; background: var(--kc-ink); transition: width var(--kc-dur-base) var(--kc-press), background var(--kc-dur-base) var(--kc-ease); } /* The misregistered terracotta ghost — only visible during hover/focus/active */ .kc-primary .kc__label::before { content: ""; position: absolute; left: 0; bottom: 3.5px; width: 0; height: 1.5px; background: var(--kc-accent-ghost); transition: width var(--kc-dur-slow) var(--kc-press), left var(--kc-dur-base) var(--kc-press); pointer-events: none; z-index: -1; } @media (hover: hover) { .kc-primary:hover .kc__label::after { width: 100%; } .kc-primary:hover .kc__label::before { width: 100%; left: 1px; } } .kc-primary:active .kc__label::after, .kc-primary:focus-visible .kc__label::after { width: 100%; } .kc-primary:active .kc__label::before, .kc-primary:focus-visible .kc__label::before { width: 100%; left: 1px; } /* ============================================================================ PRIMARY-SOLID — the whole block takes the impression. Used ONLY on the hero conversion CTA and the page closer (two surfaces site-wide). ========================================================================== */ .kc-primary-solid { background: var(--kc-ink); color: var(--kc-paper); padding: 14px 28px 16px; border-radius: 4px; font-weight: 500; align-items: center; gap: 14px; position: relative; isolation: isolate; box-shadow: 0 0 0 0.5px var(--kc-halo-strong), inset 0 -1px 0 0 var(--kc-halo); transition: background var(--kc-dur-base) var(--kc-ease), color var(--kc-dur-base) var(--kc-ease), box-shadow var(--kc-dur-base) var(--kc-press), transform var(--kc-dur-fast) var(--kc-ease); } .kc-primary-solid::before { content: ""; position: absolute; inset: 1px -1px -1px 1px; background: var(--kc-accent-ghost); border-radius: 4px; z-index: -1; opacity: 0; transition: opacity var(--kc-dur-base) var(--kc-press); } .kc-primary-solid::after { inset: -4px; border-radius: 6px; } .kc-primary-solid .kc-arrow-line, .kc-primary-solid .kc-arrow-head { stroke: var(--kc-paper); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: right center; transition: transform var(--kc-dur-base) var(--kc-press); } @media (hover: hover) { .kc-primary-solid:hover { box-shadow: 0 0 0 0.5px var(--kc-halo-strong), inset 0 -2px 0 0 var(--kc-halo-strong), inset 0 2px 0 0 var(--kc-halo); } .kc-primary-solid:hover::before { opacity: 1; } .kc-primary-solid:hover .kc-arrow-head { transform: translateX(4px); } } .kc-primary-solid:active { transform: translateY(1px); box-shadow: 0 0 0 0.5px var(--kc-halo-strong), inset 0 -1px 0 0 var(--kc-halo-strong), inset 0 1px 2px 0 var(--kc-halo-strong); } /* ============================================================================ SECONDARY — dot takes the impression. Full circle completes on hover. ========================================================================== */ .kc-secondary { align-items: center; gap: 14px; font-weight: 400; } .kc-secondary .kc__dot { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .kc-secondary .kc__dot svg { width: 18px; height: 18px; overflow: visible; } .kc-secondary .kc-dot-fill { fill: var(--kc-ink); transition: fill var(--kc-dur-base) var(--kc-ease); } .kc-secondary .kc-dot-ghost { fill: var(--kc-accent-ghost); opacity: 0; transform: translate(0.5px, 0.5px); transition: opacity var(--kc-dur-base) var(--kc-press); } .kc-secondary .kc-dot-arc { fill: none; stroke: var(--kc-ink); stroke-width: 1.2; stroke-linecap: round; /* Full circumference: 2*pi*8 ≈ 50.27. Round up so the line definitely closes. */ stroke-dasharray: 51; stroke-dashoffset: 51; transition: stroke-dashoffset var(--kc-dur-slow) var(--kc-press); } .kc-secondary .kc__label { transition: transform var(--kc-dur-base) var(--kc-press), color var(--kc-dur-base) var(--kc-ease); } @media (hover: hover) { .kc-secondary:hover .kc__label { transform: translateX(4px); } .kc-secondary:hover .kc-dot-ghost { opacity: 1; } .kc-secondary:hover .kc-dot-arc { stroke-dashoffset: 0; } } .kc-secondary:active { transform: translateY(0.5px); } /* ============================================================================ TERTIARY — italic Fraunces with a hand-drawn curved underline. ========================================================================== */ .kc-tertiary { font-family: var(--kc-display); font-style: italic; font-weight: 400; font-size: 17px; padding-bottom: 8px; position: relative; } .kc-tertiary.kc--sm { font-size: 14px; } .kc-tertiary .kc__underline { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; pointer-events: none; overflow: visible; } .kc-tertiary .kc__underline svg { width: 100%; height: 8px; overflow: visible; } .kc-tertiary .kc-curve { fill: none; stroke: var(--kc-ink); stroke-width: 1.1; stroke-linecap: round; transition: stroke var(--kc-dur-base) var(--kc-ease), stroke-width var(--kc-dur-base) var(--kc-press); } .kc-tertiary .kc-curve-ghost { fill: none; stroke: var(--kc-accent-ghost); stroke-width: 1.1; stroke-linecap: round; opacity: 0; transform: translate(0.5px, 1px); transition: opacity var(--kc-dur-base) var(--kc-press); } @media (hover: hover) { .kc-tertiary:hover .kc-curve { stroke-width: 1.5; } .kc-tertiary:hover .kc-curve-ghost { opacity: 1; } } /* ============================================================================ GHOST — quiet text at rest, block glow on hover. No leading marks. When used as a disclosure trigger (has data-kc-disclosure="true" + aria-controls + aria-expanded), a trailing chevron is rendered. ========================================================================== */ .kc-ghost { align-items: center; gap: 0; font-weight: 400; color: var(--kc-ink-2); padding: 8px 14px; border-radius: 4px; transition: color var(--kc-dur-base) var(--kc-ease), background-color var(--kc-dur-base) var(--kc-ease); } @media (hover: hover) { .kc-ghost:hover { color: var(--kc-ink); background-color: var(--kc-paper-3); } } .kc-ghost:active { background-color: var(--kc-paper-3); transform: translateY(0.5px); } /* Trailing chevron — only present in the markup when the ghost CTA is a disclosure trigger. Rotates 180° when aria-expanded="true". */ .kc-ghost .kc__caret { display: inline-flex; align-items: center; margin-left: 8px; } .kc-ghost .kc__caret svg { display: block; transition: transform var(--kc-dur-base) var(--kc-press); } .kc-caret-line { fill: none; stroke: var(--kc-ink-2); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--kc-dur-base) var(--kc-ease); } .kc-ghost:hover .kc-caret-line { stroke: var(--kc-ink); } .kc-ghost[aria-expanded="true"] .kc__caret svg { transform: rotate(180deg); } /* ============================================================================ EXTERNAL — inscribed circle around the ↗ glyph. Stamp on hover. Used for mailto:, tel:, and cross-origin links. ========================================================================== */ .kc-external { align-items: center; gap: 14px; font-weight: 400; } .kc-external .kc__circle { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .kc-external .kc__circle svg { width: 24px; height: 24px; overflow: visible; } .kc-external .kc-circle-ring { fill: none; stroke: var(--kc-rule-2); stroke-width: 1; transform-origin: center; transition: stroke var(--kc-dur-base) var(--kc-ease), stroke-width var(--kc-dur-base) var(--kc-press), transform var(--kc-dur-base) var(--kc-press); } .kc-external .kc-circle-ring-ghost { fill: none; stroke: var(--kc-accent-ghost); stroke-width: 1; opacity: 0; transform: translate(1px, 1px); transform-origin: center; transition: opacity var(--kc-dur-base) var(--kc-press); } .kc-external .kc-circle-arrow { fill: none; stroke: var(--kc-ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transform-origin: 12px 12px; transition: stroke var(--kc-dur-base) var(--kc-ease), transform var(--kc-dur-base) var(--kc-press); } @media (hover: hover) { .kc-external:hover .kc-circle-ring { stroke: var(--kc-ink); stroke-width: 1.3; transform: scale(1.06); } .kc-external:hover .kc-circle-ring-ghost { opacity: 1; } .kc-external:hover .kc-circle-arrow { transform: translate(2px, -2px); } } .kc-external:active { transform: translateY(0.5px); } /* ============================================================================ STATES — disabled, loading ========================================================================== */ .kc[aria-disabled="true"], .kc:disabled { color: var(--kc-ink-mute); cursor: not-allowed; pointer-events: none; } .kc[aria-disabled="true"] .kc__label::after { background: var(--kc-ink-mute); } .kc[aria-disabled="true"] .kc__label::before, .kc[aria-disabled="true"] .kc-dot-ghost, .kc[aria-disabled="true"] .kc-curve-ghost, .kc[aria-disabled="true"] .kc-circle-ring-ghost { display: none; } .kc[aria-disabled="true"] .kc-arrow-line, .kc[aria-disabled="true"] .kc-arrow-head, .kc[aria-disabled="true"] .kc-curve, .kc[aria-disabled="true"] .kc-circle-ring, .kc[aria-disabled="true"] .kc-circle-arrow, .kc[aria-disabled="true"] .kc-caret-line { stroke: var(--kc-ink-mute); } .kc[aria-disabled="true"] .kc-dot-fill { fill: var(--kc-ink-mute); } .kc[aria-disabled="true"].kc-primary-solid { background: var(--kc-paper-3); color: var(--kc-ink-mute); box-shadow: 0 0 0 0.5px var(--kc-rule-3); } .kc[aria-disabled="true"].kc-primary-solid::before { display: none; } .kc.is-loading { pointer-events: none; } .kc.is-loading .kc__label, .kc.is-loading .kc__arrow, .kc.is-loading .kc__circle, .kc.is-loading .kc__dot, .kc.is-loading .kc__underline { opacity: 0.25; } .kc__spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; } .kc.is-loading .kc__spinner { display: inline-flex; } .kc__spinner::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.4px solid currentColor; border-right-color: transparent; animation: kc-press-spin 720ms linear infinite; } @keyframes kc-press-spin { to { transform: rotate(360deg); } } .kc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================================ REDUCED MOTION — strip the press, keep the colour change ========================================================================== */ @media (prefers-reduced-motion: reduce) { .kc, .kc *, .kc::after, .kc::before { transition: none !important; animation: none !important; } .kc.is-loading .kc__spinner::before { animation: none !important; } } /* ============================================================================ FORCED COLORS / WINDOWS HIGH CONTRAST MODE ========================================================================== */ @media (forced-colors: active) { html, body { background-image: none; background-color: Canvas; color: CanvasText; } .kc { forced-color-adjust: none; } .kc-primary-solid { background: CanvasText; color: Canvas; border: 1px solid CanvasText; box-shadow: none; } .kc-primary-solid::before { display: none; } .kc-arrow-line, .kc-arrow-head, .kc-dot-fill, .kc-curve, .kc-circle-ring, .kc-circle-arrow, .kc-caret-line { stroke: CanvasText; fill: CanvasText; } .kc-dot-ghost, .kc-curve-ghost, .kc-circle-ring-ghost, .kc-primary .kc__label::before { display: none; } } /* ============================================================================ PAIR LAYOUT — two CTAs side by side, stack on mobile ========================================================================== */ .kc-pair { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } @media (min-width: 640px) { .kc-pair { flex-direction: row; align-items: center; gap: 48px; } } /* ============================================================================ HEADER COMPOSITION Used by the site header: brand on the left, nav CTAs on the right, collapsing to a Menu disclosure below 720px. ========================================================================== */ .kc-header { display: flex; align-items: center; gap: 24px; padding: 18px 28px; } .kc-header__brand { font-family: var(--kc-display); font-style: italic; font-weight: 400; font-size: 18px; color: var(--kc-ink); letter-spacing: -0.01em; margin-right: auto; text-decoration: none; } .kc-header__nav { display: flex; align-items: center; gap: 36px; } /* Mobile: hide the desktop nav, show the menu trigger. Below 720px, the nav items live inside the panel beneath the header. */ .kc-header__menu-trigger { display: none; } @media (max-width: 719px) { .kc-header { flex-wrap: wrap; gap: 16px; padding: 14px 18px; } .kc-header__nav { display: none; } .kc-header__menu-trigger { display: inline-flex; } .kc-header__panel { width: 100%; display: flex; flex-direction: column; gap: 18px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--kc-rule-3); } .kc-header__panel[hidden] { display: none; } } @media (min-width: 720px) { .kc-header__panel { display: none !important; } }