/* ========================================================================= Likchat home — AI video generation Self-contained: the old creator-monetisation stylesheets are not loaded on this page, so nothing here has to fight them. Light theme, Inter, the same pill buttons and soft-shadow cards the rest of the site uses. ========================================================================= */ :root { --ink: #0b0b0f; --ink-2: #111827; --muted: #6b7280; --line: #eef2f7; --brand: #6d28d9; --brand-2: #a855f7; --brand-soft: #f5f3ff; --radius: 24px; --shadow: 0 8px 24px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.06); } * { box-sizing: border-box; } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--muted); background: #fff; overflow-x: hidden; margin: 0; } img, video { max-width: 100%; display: block; } /* ================= ICONS ================= */ /* Inline SVG, defined once as a sprite at the top of . Sized in `em` and painted with currentColor, so every rule that used to colour or size a Font Awesome keeps working with no change. */ .ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; /* here drew an empty lilac square — visible as three blank boxes above the pills. */ .st-step em { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 15px; } .st-step b { display: block; font-size: 15px; margin-bottom: 3px; } .st-step span { font-size: 14.5px; color: var(--muted, #6b7280); line-height: 1.5; } /* ================= CTA BAND ================= */ .band { background: linear-gradient(135deg, #1a0b2e, #2f1f50 55%, #4c1d95); border-radius: 32px; padding: 64px 48px; text-align: center; position: relative; overflow: hidden; } .band::after { content: ""; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%); width: 520px; height: 380px; background: radial-gradient(ellipse, rgba(168, 85, 247, 0.45), transparent 70%); } .band h2, .band p { color: #fff; position: relative; z-index: 1; } .band p { opacity: 0.78; max-width: 520px; margin: 0 auto 30px; } .band .btn { position: relative; z-index: 1; } .band .btn-ghost { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.28); } /* ================= FAQ ================= */ .faq { max-width: 780px; margin: 0 auto; } .faq details { border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px; margin-bottom: 12px; background: #fff; } .faq details[open] { border-color: #ddd6fe; } .faq summary { font-size: 16px; font-weight: 650; color: var(--ink-2); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 22px; color: var(--brand); line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq p { font-size: 15px; line-height: 1.65; margin: 14px 0 0; } /* ================= RESPONSIVE ================= */ @media (max-width: 991px) { section { padding: 60px 0; } h1 { font-size: 42px; } h2 { font-size: 31px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-left { text-align: center; } .lead { margin-left: auto; margin-right: auto; } .hero-cta, .stats { justify-content: center; } .collage { height: 420px; } .grid-3, .grid-4, .models { grid-template-columns: repeat(2, 1fr); } .gallery { grid-template-columns: repeat(3, 1fr); } .st-grid { columns: 4; } .st-steps { grid-template-columns: 1fr; gap: 20px; max-width: 520px; margin-inline: auto; } .hd-nav { display: none; } } /* A range, not a max-width: the 767px blocks sit BELOW the 575px one in this file, so a plain max-width:767px rule would win at phone widths too and quietly undo the two-column grid set there. */ @media (min-width: 576px) and (max-width: 767px) { .st-grid { columns: 3; } } @media (max-width: 575px) { .wrap { padding: 0 16px; } section { padding: 46px 0; } h1 { font-size: 33px; } h2 { font-size: 25px; } .lead { font-size: 15.5px; } .hero { padding: 40px 0 56px; } .collage { height: 330px; gap: 10px; } .collage-col { gap: 10px; } .stats { gap: 22px; } .stats b { font-size: 22px; } /* Full-width buttons beat two cramped pills on a phone */ .hero-cta { flex-direction: column; } .hero-cta .btn { width: 100%; } .grid-3, .grid-4 { grid-template-columns: 1fr; } /* 2x2 — the four slots the belt rotates the eight templates through. Scoped to this width on purpose: JS clears .g-hide when it leaves phone size, and this makes a missed cleanup impossible to see anyway. */ .gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; } .g-item.g-hide { display: none; } /* Two columns, not three. On a 360px screen three masonry columns leave ~110px tiles, and these posts ARE their greeting text — at that size the words stop being readable and the grid turns into coloured rectangles. */ .st-grid { columns: 2; column-gap: 10px; } .st-item { margin-bottom: 10px; border-radius: 11px; } .st-cats .cat { padding: 10px 17px; font-size: 14px; } /* Wider tiles are also taller ones, so 15 of them ran on for screens. Eight still reads as "there are lots"; the button below goes and gets the rest. */ .st-item:nth-child(n + 9) { display: none; } .card, .model { padding: 22px; } .band { padding: 44px 22px; border-radius: 24px; } .sec-head { margin-bottom: 32px; } .ft-cols { gap: 36px; } } /* ================= ROADMAP, TURNED VERTICAL ================= */ /* The first version of this ran the stops down a rail on the left with the cards beside it. It read as a road, but the rail cost every card ~74px of an already narrow screen and the body copy wrapped to six lines. So the stop moves INSIDE the card, the cards go full width, and the road becomes a short dashed hop between one card and the next. Same route, and the text gets back about a third of its width. */ @media (max-width: 767px) { .roadmap { --rm-node: 40px; grid-template-columns: 1fr; gap: 0; } /* The bottom padding is the hop; the connector below measures itself against it, so the two must stay equal. */ .rm-step { padding: 0 0 30px; } .rm-step::before { top: calc(100% - 30px); height: 30px; /* Under the badge, not under the card's centre: the eye follows the numbers down the left edge. 20px is the card's own padding. */ left: calc(20px + var(--rm-node) / 2 - 1.5px); width: 3px; background-image: linear-gradient(180deg, var(--brand) 55%, transparent 0); background-size: 3px 15px; background-repeat: repeat-y; animation-name: rm-run-y; } /* In the flow now, sitting above the heading inside the card. */ .rm-node { position: static; transform: none; margin-bottom: 14px; font-size: 16px; /* The white ring existed to punch the stop out of the road behind it. Nothing runs behind it here, and against the card it read as a halo. */ box-shadow: 0 6px 14px rgba(109, 40, 217, 0.3); } .rm-step:hover .rm-node { transform: scale(1.06); } .rm-card { padding: 22px 20px; } .rm-card h3 { font-size: 17.5px; } /* Nothing follows the last card, so its hop is dead space. */ .rm-end { padding-bottom: 0; } } @keyframes rm-run-y { to { background-position: 0 15px; } } /* ================= MOBILE MARQUEES ================= */ /* Stacked one-per-row, the six model cards made the section endlessly long. Below 768px they become a single looping row instead. */ @media (max-width: 767px) { .models-mq { overflow: hidden; /* Bleed past .wrap's padding so cards run to both screen edges. */ margin: 0 -16px; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .models { display: flex; width: max-content; /* Cards are cloned once, so -50% lands exactly on the duplicate. Spacing is a per-card margin rather than `gap` — see .cat-track. */ animation: marquee-l 48s linear infinite; } .models:active { animation-play-state: paused; } .model { width: 80vw; max-width: 330px; margin-right: 14px; flex: none; } .model-clone { display: block; } /* Swap the wrapped pill cloud for scrolling rows. */ .cats { display: none; } .cat-rows { display: block; } .cat { padding: 10px 17px; font-size: 14px; } /* Status categories: six pills wrapped to three stacked rows here and pushed the grid below the fold. One looping strip instead. */ .st-cats-mq { overflow: hidden; /* Bleed past .wrap's padding so the strip runs to both screen edges. */ margin: 0 -16px; padding: 2px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .st-cats { flex-wrap: nowrap; justify-content: flex-start; width: max-content; /* Spacing is a per-pill margin, NOT `gap`. The pills are cloned once and the loop translates -50%; a gap would add one more space between the two sets than within them, and the loop would visibly jump. */ gap: 0; animation: marquee-l 30s linear infinite; } /* Held down to tap a pill, the strip stops — these are real links, and a moving target is hard to hit. */ .st-cats:active { animation-play-state: paused; } .st-cats .cat { flex: none; margin-right: 10px; } .st-clone { display: inline-flex; } } /* Anyone who asked for less motion gets the plain, static layouts. */ @media (prefers-reduced-motion: reduce) { /* The road stays drawn; only the lane markings stop flowing. */ .models, .cat-track, .st-cats, .rm-step::before { animation: none; } @media (max-width: 767px) { .models-mq { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cat-row { overflow-x: auto; } /* A stopped strip is still wider than the screen, so it has to become swipeable or the later pills are simply unreachable. The mask would fade the pill under the reader's thumb, so it goes too. */ .st-cats-mq { overflow-x: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; } } }