presentation/styles/home.style.css

presentation/styles/home.style.css is a file in Bane's Lab Site. 174 lines of code and 0 definitions.

.home-content {
    overflow-x: clip;
    width: var(--percent-full);
}

.home-hero {
    align-items: center;
    display: grid;
    gap: var(--home-gap);
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    max-width: var(--home-hero-wide);
    padding: var(--home-hero-pad-top) 0 var(--home-hero-pad-bottom);
    position: relative;
    width: var(--percent-full);
}

.home-glow {
    animation: breathe var(--home-breathe) var(--easing-ease) infinite alternate;
    background: radial-gradient(60% 60% at 50% 40%, var(--accent-glow), transparent 70%);
    filter: blur(var(--home-glow-blur));
    inset: var(--home-glow-inset-block) var(--home-glow-inset-inline);
    pointer-events: none;
    position: absolute;
    z-index: var(--z-below);
}

@keyframes breathe {
    0% {
        opacity: var(--home-breathe-from);
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 1;
        transform: translateY(var(--home-breathe-lift)) scale(var(--home-breathe-scale));
    }
}

.home-intro {
    text-align: center;
}

.home-brand {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 auto var(--space-md);
    width: fit-content;
}

.home-mark {
    height: var(--size-logo-hero-sm);
    mix-blend-mode: lighten;
    width: var(--size-logo-hero-sm);
}

.home-eyebrow {
    color: var(--white-alpha-faint);
    font-family: var(--font-family-mono);
    font-size: var(--font-sm);
    letter-spacing: var(--home-letter-eyebrow);
    margin: 0;
    text-transform: uppercase;
}

.home-thesis {
    color: var(--banes-lab-accent);
    font-family: var(--font-family-heading);
    font-size: clamp(var(--home-thesis-min), 3.4vw, var(--home-thesis-max));
    font-weight: var(--font-weight-semibold);
    line-height: var(--home-thesis-leading);
    margin: 0 auto;
    max-width: var(--home-thesis-measure);
    text-wrap: balance;
}

.home-thesis .word {
    display: inline-block;
}

.home-lead {
    color: var(--white-alpha-secondary);
    font-size: var(--font-xl);
    line-height: var(--line-height-loose);
    margin: var(--space-lg) auto var(--space-xl);
    max-width: var(--home-lead-measure);
}

.home-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--home-actions-gap-block) var(--home-actions-gap-inline);
    justify-content: center;
    margin-top: var(--space-xl);
}

.btn {
    background: var(--banes-lab-accent);
    border: var(--border-s) solid var(--banes-lab-accent);
    border-radius: var(--radius-md);
    color: var(--black);
    font-family: var(--font-family-base);
    font-size: var(--font-regular);
    font-weight: var(--font-weight-semibold);
    padding: var(--home-btn-pad-block) var(--home-btn-pad-inline);
    transition:
        box-shadow var(--transition-base),
        transform var(--transition-base) var(--easing-spring);
}

.btn:hover {
    outline: var(--home-focus-ring) solid var(--accent-soft);
    text-decoration: none;
    transform: var(--transform-hover-lift);
}

.btn.ghost {
    background: transparent;
    color: var(--banes-lab-accent);
}

.go {
    color: var(--banes-lab-accent);
    font-size: var(--font-regular);
}

.go::after {
    content: "→";
    display: inline-block;
    margin-left: var(--home-go-gap);
    transition: transform var(--transition-base);
}

.go:hover::after {
    transform: translateX(var(--home-go-nudge));
}

.map-head {
    display: grid;
    gap: var(--home-go-gap);
    margin: var(--home-gap) 0 var(--space-md);
}

.map-head h2 {
    color: var(--banes-lab-accent);
    font-family: var(--font-family-heading);
    font-size: var(--font-xxl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.map-head p {
    color: var(--white-alpha-muted);
    font-size: var(--font-regular);
    line-height: var(--line-height-loose);
    margin: 0;
}

.home-hero .learning-card {
    transition: border-color var(--transition-base);
}

.home-hero:has(.map-head .chapter-cite:hover) .learning-card {
    border-color: var(--hex-call-bright);
}

@media (width >= 40rem) {
    .go {
        white-space: nowrap;
    }
}

@media (width >= 56.25rem) {
    .home-hero {
        grid-template-columns: minmax(0, var(--home-hero-left)) minmax(0, var(--home-hero-right));
    }

    .home-intro {
        text-align: right;
    }

    .home-brand {
        margin-right: 0;
    }

    .home-thesis {
        margin-right: 0;
    }

    .home-lead {
        margin-right: 0;
    }

    .home-actions {
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-glow {
        animation: none;
    }
}