@jjlmoya/landings 0.4.0

package/src/landing/team/styles/BobModelBook.css

@@ -0,0 +1,709 @@
+.bob-model-book {
+    --bob-blue: #00aff0;
+    --bob-blue-dark: #008ccf;
+
+    position: relative;
+    padding-bottom: clamp(5rem, 9vw, 8rem);
+}
+
+.bob-model-book-header {
+    max-width: 820px;
+}
+
+.bob-model-book-logo {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.04em;
+    margin: 0;
+    color: var(--bob-blue);
+    font-size: clamp(3.4rem, 10vw, 7.5rem);
+    font-weight: var(--font-weight-bold, 800);
+    letter-spacing: -0.035em;
+    line-height: 0.9;
+}
+
+.bob-model-book-logo-mark {
+    position: relative;
+    display: inline-block;
+    width: 0.62em;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--bob-blue);
+    transform: translateY(0.02em);
+}
+
+.bob-model-book-logo-mark::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.26em;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--team-surface);
+    content: "";
+    transform: translate(-50%, -50%);
+}
+
+.bob-model-book-logo-mark::after {
+    position: absolute;
+    right: -0.24em;
+    bottom: 0.09em;
+    width: 0.44em;
+    height: 0.24em;
+    border-radius: 999px 999px 999px 0;
+    background: var(--bob-blue-dark);
+    content: "";
+    transform: rotate(-26deg);
+}
+
+.bob-model-book-logo span {
+    font-style: italic;
+}
+
+.bob-model-book-logo strong {
+    color: var(--bob-blue-dark);
+    font-style: normal;
+}
+
+.bob-model-book-editorial {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: clamp(0.85rem, 1.8vw, 1.2rem);
+    align-items: stretch;
+    max-width: 1040px;
+    margin-top: clamp(2rem, 5vw, 3.5rem);
+}
+
+.bob-model-book-gallery {
+    display: grid;
+    grid-column: 7 / -1;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    gap: clamp(0.85rem, 1.8vw, 1.2rem);
+}
+
+.bob-model-book-hero,
+.bob-model-book-frame {
+    min-width: 0;
+    margin: 0;
+}
+
+.bob-model-book-hero {
+    grid-column: 1 / span 6;
+}
+
+.bob-model-book-frame-landscape {
+    grid-column: 1 / -1;
+}
+
+.bob-model-book-stage {
+    position: relative;
+    display: grid;
+    place-items: end center;
+    overflow: hidden;
+    border: 0;
+    border-radius: 6px;
+    background:
+        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.54), transparent 21%),
+        radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--team-mint) 18%, transparent), transparent 48%),
+        linear-gradient(180deg, color-mix(in srgb, var(--team-surface-strong) 70%, #fff), var(--team-surface));
+    box-shadow:
+        inset 0 0 0 1px var(--team-border),
+        0 22px 80px rgba(0, 0, 0, 0.12);
+}
+
+.bob-model-book-frame-feature .bob-model-book-stage {
+    aspect-ratio: 4 / 5;
+}
+
+.bob-model-book-hero .bob-model-book-stage {
+    aspect-ratio: 4 / 5;
+    min-height: auto;
+}
+
+.bob-model-book-frame-portrait .bob-model-book-stage {
+    aspect-ratio: 4 / 5;
+}
+
+.bob-model-book-frame-landscape .bob-model-book-stage {
+    aspect-ratio: 16 / 9;
+}
+
+.theme-dark .bob-model-book-stage {
+    background:
+        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.2), transparent 20%),
+        linear-gradient(180deg, #303546, #171a22 72%);
+}
+
+.theme-light .bob-model-book-stage {
+    background:
+        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.88), transparent 24%),
+        linear-gradient(180deg, #f7efe2, #d9e7df 72%);
+}
+
+.bob-model-book-stage::before {
+    position: absolute;
+    inset: auto 10% 0;
+    height: 32%;
+    border-radius: 50% 50% 0 0;
+    background: color-mix(in srgb, var(--team-mint) 18%, transparent);
+    content: "";
+    filter: blur(18px);
+}
+
+.bob-model-book-stage::after {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+        linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.05));
+    content: "";
+}
+
+.bob-model-book-stage img {
+    position: relative;
+    z-index: 1;
+    display: block;
+    width: min(72%, 320px);
+    height: auto;
+    object-fit: contain;
+    filter:
+        drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38))
+        drop-shadow(0 0 24px rgba(255, 255, 255, 0.18));
+}
+
+.bob-model-book-lock {
+    position: absolute;
+    z-index: 3;
+    display: grid;
+    width: clamp(2.8rem, 5vw, 4rem);
+    aspect-ratio: 1;
+    place-items: center;
+    border: 1px solid rgba(255, 255, 255, 0.34);
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.44);
+    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
+    backdrop-filter: blur(8px);
+}
+
+.bob-model-book-lock::before {
+    content: none;
+}
+
+.bob-model-book-lock::after {
+    content: none;
+}
+
+.bob-model-book-hero .bob-model-book-stage img {
+    width: min(76%, 460px);
+}
+
+@media (max-width: 860px) {
+    .bob-model-book-editorial {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .bob-model-book-hero {
+        grid-column: 1 / -1;
+    }
+
+    .bob-model-book-gallery {
+        grid-column: 1 / -1;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .bob-model-book-frame-portrait,
+    .bob-model-book-frame-landscape {
+        grid-column: span 1;
+    }
+}
+
+@media (max-width: 560px) {
+    .bob-model-book-gallery {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .bob-model-book-hero .bob-model-book-stage {
+        aspect-ratio: 4 / 5;
+    }
+}
+
+/* OnlyBob v2: continuous gallery, clean backgrounds, stronger locked state. */
+.bob-model-book-grid {
+    display: grid;
+    grid-auto-flow: dense;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: clamp(0.75rem, 1.7vw, 1.1rem);
+    max-width: 1040px;
+    margin-top: clamp(2rem, 5vw, 3.5rem);
+}
+
+.bob-model-book-grid .bob-model-book-frame {
+    min-width: 0;
+    margin: 0;
+}
+
+.bob-model-book-frame-large {
+    grid-column: span 4;
+}
+
+.bob-model-book-frame-portrait {
+    grid-column: span 4;
+}
+
+.bob-model-book-frame-wide {
+    grid-column: span 4;
+}
+
+.bob-model-book-frame-large .bob-model-book-stage,
+.bob-model-book-frame-portrait .bob-model-book-stage,
+.bob-model-book-frame-wide .bob-model-book-stage {
+    aspect-ratio: 1 / 1;
+}
+
+.bob-model-book-grid .bob-model-book-stage {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--team-surface-strong) 92%, #fff), var(--team-surface));
+    box-shadow:
+        inset 0 0 0 1px var(--team-border),
+        0 18px 54px rgba(0, 0, 0, 0.1);
+    place-items: stretch;
+}
+
+.bob-model-book-open {
+    position: relative;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    cursor: zoom-in;
+}
+
+.bob-model-book-open:focus-visible {
+    outline: 3px solid var(--bob-blue);
+    outline-offset: 4px;
+}
+
+.bob-model-book-grid .bob-model-book-stage img,
+.bob-model-book-open img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.theme-dark .bob-model-book-grid .bob-model-book-stage {
+    background: linear-gradient(180deg, #252a36, #171a22);
+}
+
+.theme-light .bob-model-book-grid .bob-model-book-stage {
+    background: linear-gradient(180deg, #eef4f7, #dfe8e4);
+}
+
+.bob-model-book-grid .bob-model-book-stage::before {
+    display: none;
+}
+
+.bob-model-book-grid .bob-model-book-stage::after {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(0, 0, 0, 0.06));
+}
+
+.bob-model-book-frame-large .bob-model-book-stage img {
+    width: 100%;
+}
+
+.bob-model-book-frame.is-locked .bob-model-book-stage {
+    background: linear-gradient(180deg, #141923, #080b12);
+}
+
+.theme-light .bob-model-book-frame.is-locked .bob-model-book-stage {
+    background: linear-gradient(180deg, #202837, #0d111a);
+}
+
+.bob-model-book-frame.is-locked .bob-model-book-stage img {
+    filter:
+        blur(12px)
+        saturate(0.25)
+        brightness(0.28)
+        contrast(1.45)
+        drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38));
+    opacity: 0.22;
+    transform: scale(1.22);
+}
+
+.bob-model-book-frame.is-locked .bob-model-book-stage::after {
+    z-index: 2;
+    background:
+        radial-gradient(circle at 50% 50%, rgba(0, 175, 240, 0.16), transparent 28%),
+        rgba(0, 0, 0, 0.78);
+}
+
+.bob-model-book-frame.is-unlocking {
+    animation: bob-model-book-frame-unlock 1500ms cubic-bezier(0.2, 0.74, 0.22, 1) var(--unlock-delay, 0ms) both;
+    pointer-events: none;
+}
+
+.bob-model-book-frame.is-unlocking .bob-model-book-stage {
+    overflow: hidden;
+}
+
+.bob-model-book-frame.is-unlocking .bob-model-book-stage img {
+    animation: bob-model-book-image-unveil 1500ms cubic-bezier(0.2, 0.74, 0.22, 1) var(--unlock-delay, 0ms) both;
+}
+
+.bob-model-book-frame.is-unlocking .bob-model-book-stage::after {
+    animation: bob-model-book-veil-lift 1500ms cubic-bezier(0.2, 0.74, 0.22, 1) var(--unlock-delay, 0ms) both;
+    background:
+        radial-gradient(circle at 50% 44%, rgba(0, 175, 240, 0.14), transparent 34%),
+        rgba(0, 0, 0, 0.78);
+}
+
+.bob-model-book-frame.is-unlocking .bob-model-book-lock {
+    animation: bob-model-book-lock-yield 980ms cubic-bezier(0.2, 0.74, 0.22, 1) var(--unlock-delay, 0ms) both;
+}
+
+.bob-model-book-frame.is-trial-unlocked .bob-model-book-stage {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--team-surface-strong) 92%, #fff), var(--team-surface));
+}
+
+.bob-model-book-frame.is-trial-unlocked .bob-model-book-stage img {
+    filter:
+        drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38))
+        drop-shadow(0 0 24px rgba(255, 255, 255, 0.18));
+    opacity: 1;
+    transform: none;
+}
+
+.bob-model-book-frame.is-trial-unlocked .bob-model-book-stage::after {
+    z-index: 0;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(0, 0, 0, 0.06));
+}
+
+.bob-model-book-frame.is-trial-unlocked .bob-model-book-lock {
+    display: none;
+}
+
+.bob-model-book-lock svg {
+    width: 1.45rem;
+    height: 1.45rem;
+    color: var(--team-mint);
+}
+
+.bob-model-book-lightbox {
+    width: min(92vw, 820px);
+    max-width: none;
+    max-height: 94vh;
+    padding: 0;
+    border: 0;
+    border-radius: 10px;
+    color: var(--team-text);
+    background: transparent;
+    overflow: visible;
+}
+
+.bob-model-book-lightbox::backdrop {
+    background:
+        radial-gradient(circle at 50% 42%, rgba(0, 175, 240, 0.14), transparent 34%),
+        rgba(1, 5, 18, 0.84);
+    backdrop-filter: blur(10px);
+}
+
+.bob-model-book-lightbox[open] {
+    animation: bob-model-book-lightbox-in 160ms ease-out;
+}
+
+.bob-model-book-lightbox-frame {
+    position: relative;
+    display: grid;
+    place-items: center;
+    padding: clamp(0.55rem, 1.2vw, 0.85rem);
+    border: 1px solid color-mix(in srgb, var(--bob-blue) 28%, var(--team-border));
+    border-radius: 10px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 18%),
+        color-mix(in srgb, var(--team-surface-strong) 94%, #050814);
+    box-shadow:
+        0 34px 120px rgba(0, 0, 0, 0.6),
+        0 0 0 1px rgba(255, 255, 255, 0.055),
+        inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.bob-model-book-lightbox img {
+    display: block;
+    width: 100%;
+    max-height: min(82vh, 780px);
+    border-radius: 6px;
+    background: #0b1020;
+    object-fit: contain;
+    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.32);
+}
+
+.bob-model-book-lightbox-close {
+    position: absolute;
+    top: -0.85rem;
+    right: -0.85rem;
+    z-index: 2;
+    display: grid;
+    width: 2.7rem;
+    aspect-ratio: 1;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--bob-blue) 34%, var(--team-border));
+    border-radius: 999px;
+    color: var(--team-text);
+    background: color-mix(in srgb, var(--team-surface-strong) 92%, #050814);
+    box-shadow:
+        0 16px 42px rgba(0, 0, 0, 0.42),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    cursor: pointer;
+    transition:
+        color 160ms ease,
+        border-color 160ms ease,
+        transform 160ms ease;
+}
+
+.bob-model-book-lightbox-close:hover,
+.bob-model-book-lightbox-close:focus-visible {
+    color: var(--bob-blue);
+    border-color: var(--bob-blue);
+    transform: scale(1.06);
+}
+
+.bob-model-book-lightbox-close svg {
+    width: 1.3rem;
+    height: 1.3rem;
+}
+
+.bob-model-book-paywall {
+    width: min(92vw, 480px);
+    padding: 0;
+    border: 0;
+    border-radius: 10px;
+    color: var(--team-text);
+    background: transparent;
+    overflow: visible;
+}
+
+.bob-model-book-paywall::backdrop {
+    background: rgba(1, 5, 18, 0.86);
+    backdrop-filter: blur(10px);
+}
+
+.bob-model-book-paywall[open] {
+    animation: bob-model-book-lightbox-in 160ms ease-out;
+}
+
+.bob-model-book-paywall-panel {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    padding: clamp(1.4rem, 4vw, 2rem);
+    border: 1px solid color-mix(in srgb, var(--bob-blue) 46%, var(--team-border));
+    border-radius: 10px;
+    background: color-mix(in srgb, var(--team-surface-strong) 94%, #050814);
+    box-shadow:
+        0 34px 120px rgba(0, 0, 0, 0.62),
+        0 0 0 6px color-mix(in srgb, var(--bob-blue) 8%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+
+.bob-model-book-paywall h3 {
+    margin: 0;
+    color: var(--bob-blue);
+    font-size: clamp(1.7rem, 5vw, 2.5rem);
+    line-height: 1;
+}
+
+.bob-model-book-paywall p {
+    margin: 0;
+    color: var(--team-text-muted);
+    line-height: 1.65;
+}
+
+.bob-model-book-buy,
+.bob-model-book-trial {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 3rem;
+    border-radius: 999px;
+    font-weight: var(--font-weight-bold, 800);
+}
+
+.bob-model-book-buy {
+    gap: 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--team-border) 74%, transparent);
+    color: var(--team-text-muted);
+    background: color-mix(in srgb, var(--team-surface) 54%, transparent);
+    cursor: not-allowed;
+    opacity: 0.72;
+}
+
+.bob-model-book-buy svg {
+    width: 1.1rem;
+    height: 1.1rem;
+}
+
+.bob-model-book-trial {
+    border: 1px solid var(--bob-blue);
+    color: var(--human-touch-inverse, #fff);
+    background: var(--bob-blue);
+    box-shadow: 0 16px 42px color-mix(in srgb, var(--bob-blue) 24%, transparent);
+    cursor: pointer;
+    transition:
+        box-shadow 160ms ease,
+        transform 160ms ease;
+}
+
+.bob-model-book-trial:hover,
+.bob-model-book-trial:focus-visible {
+    box-shadow: 0 18px 54px color-mix(in srgb, var(--bob-blue) 34%, transparent);
+    transform: translateY(-1px);
+}
+
+.bob-model-book-subscription {
+    position: fixed;
+    right: clamp(1rem, 3vw, 1.5rem);
+    bottom: clamp(1rem, 3vw, 1.5rem);
+    z-index: 60;
+    display: flex;
+    gap: 0.7rem;
+    align-items: center;
+    max-width: calc(100vw - 2rem);
+    padding: 0.7rem 0.9rem;
+    border: 1px solid color-mix(in srgb, var(--team-gold) 42%, var(--team-border));
+    border-radius: 999px;
+    color: var(--team-text);
+    background: color-mix(in srgb, var(--team-surface-strong) 88%, #050814);
+    box-shadow:
+        0 18px 54px rgba(0, 0, 0, 0.34),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    backdrop-filter: blur(12px);
+}
+
+.bob-model-book-subscription[hidden] {
+    display: none;
+}
+
+.bob-model-book-subscription span {
+    color: var(--team-text-muted);
+    font-size: 0.86rem;
+}
+
+.bob-model-book-subscription strong {
+    color: var(--team-gold);
+    font-variant-numeric: tabular-nums;
+}
+
+@keyframes bob-model-book-lightbox-in {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.985);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes bob-model-book-frame-unlock {
+    0% {
+        transform: translateY(0) scale(1);
+    }
+
+    44% {
+        transform: translateY(-0.35rem) scale(1.012);
+    }
+
+    100% {
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes bob-model-book-image-unveil {
+    0% {
+        filter:
+            blur(12px)
+            saturate(0.25)
+            brightness(0.28)
+            contrast(1.45)
+            drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38));
+        opacity: 0.22;
+        transform: scale(1.22);
+    }
+
+    42% {
+        filter:
+            blur(6px)
+            saturate(0.7)
+            brightness(0.62)
+            contrast(1.22)
+            drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38));
+        opacity: 0.56;
+        transform: scale(1.12);
+    }
+
+    100% {
+        filter:
+            drop-shadow(0 22px 28px rgba(0, 0, 0, 0.38))
+            drop-shadow(0 0 24px rgba(255, 255, 255, 0.18));
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes bob-model-book-veil-lift {
+    0% {
+        opacity: 1;
+    }
+
+    58% {
+        opacity: 0.64;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+@keyframes bob-model-book-lock-yield {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+
+    54% {
+        opacity: 1;
+        transform: translateY(-0.45rem) scale(1.08);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(0.9rem) scale(0.82);
+    }
+}
+
+@media (max-width: 860px) {
+    .bob-model-book-grid {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .bob-model-book-frame-large,
+    .bob-model-book-frame-portrait,
+    .bob-model-book-frame-wide {
+        grid-column: span 3;
+    }
+}
+
+@media (max-width: 560px) {
+    .bob-model-book-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .bob-model-book-frame-large,
+    .bob-model-book-frame-portrait,
+    .bob-model-book-frame-wide {
+        grid-column: span 1;
+    }
+}