/* ========================================================================== Genva marketing website — styles Self-hosted type: Google Sans Flex (the app's own face, SIL OFL) + IBM Plex Mono. Design tokens mirror genva-app: lib/app.dart, splash_screen.dart. ========================================================================== */ @font-face { font-family: "Google Sans Flex"; src: url("/fonts/GoogleSansFlex-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Google Sans Flex"; src: url("/fonts/GoogleSansFlex-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } @font-face { font-family: "Google Sans Flex"; src: url("/fonts/GoogleSansFlex-Bold.ttf") format("truetype"); font-weight: 600 700; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } /* ===== Genva design tokens (lib/app.dart, splash_screen.dart) ===== */ :root { --bg: #060910; --bg-deep: #030508; --ink: #ffffff; --ink-2: #c8cdd8; --ink-3: #8b909e; --ink-4: #5b6070; --pink: #fe0299; --amber: #f7f062; --grad: linear-gradient(115deg, #fe0299 0%, #ff5fb6 44%, #f7f062 100%); /* the app's own create-button texture (/assets/images/create_button_bg.webp) — every primary pill on the page paints with this, so it lives here */ --pill-bg: #ee2fa4 url("/assets/img/create-button-bg.webp") center / 100% 100% no-repeat; --glass: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.10); --rim: rgba(255,255,255,.14); --rim-soft: rgba(255,255,255,.08); --r-pill: 999px; --font: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; } /* The beam's sweep angle (see .pb-beam) — genva-app's `uAngle`, which its shader spins from 0 to 1. A registered property, because a plain custom property is a string and CSS cannot interpolate a string; registering it as an is what makes it animatable, and `inherits` is what lets one animation on the box drive every layer's gradient at once. */ @property --pb-angle { syntax: ""; inherits: true; initial-value: 0deg; } /* A gated page holds its own paint until js/services/gate.js has decided who you are — see the note on in video/image/music//design. `visibility`, not `display`: layout still happens, so the page is ready to show the instant the session lands rather than reflowing into view. The ground stays painted, so this reads as the page loading, which it is. Belt and braces with the click intercept in site.js: that one keeps you from ever arriving here without a session, this one covers a typed URL, a bookmark and a stale tab. */ html.is-gating body { visibility: hidden; } * { box-sizing: border-box; } html, body { margin: 0; } /* The clip lives on the scroller, NOT on . The fan's side cards are transformed past the viewport edge and have to be cut off — but an `overflow-x: hidden` on body makes body a scroll container, and iOS Safari then refuses to stick `position: sticky` descendants to the viewport: the whole top bar scrolls away with the page. On , which is already the scrollport, the clip costs nothing. */ html { overflow-x: hidden; } body { font-family: var(--font); background: var(--bg); color: var(--ink-2); -webkit-font-smoothing: antialiased; } /* ambient magenta floor-glow + faint amber top-right — from splash.webp */ .bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(135% 95% at 50% 122%, rgba(254,2,153,.15) 0%, rgba(254,2,153,0) 56%), radial-gradient(70% 50% at 90% -12%, rgba(247,240,98,.05) 0%, rgba(247,240,98,0) 55%), /* the one background the whole site paints */ var(--bg); animation: breathe 9s ease-in-out infinite; } .bgfx::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .5px); background-size: 3px 3px; opacity: .4; mix-blend-mode: overlay; } @keyframes breathe { 50% { opacity: .82; } } .stage { position: relative; z-index: 1; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* ===== top promo strip ===== */ .promo { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 46px 9px 20px; font-size: 13px; color: var(--ink-2); background: linear-gradient(90deg, rgba(254,2,153,.14), rgba(247,240,98,.09)); border-bottom: 1px solid var(--rim-soft); } .promo b { color: #fff; font-weight: 600; } .promo a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); } .promo .x { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; } .promo .x:hover { color: #fff; } .promo.hidden { display: none; } @media (max-width: 640px) { .promo { font-size: 11.5px; padding: 8px 38px 8px 14px; gap: 8px; } } /* ===== nav ===== */ header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: linear-gradient(180deg, rgba(6,9,16,.82), rgba(6,9,16,.4)); border-bottom: 1px solid var(--rim-soft); } header .row { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo img { height: 32px; display: block; } .nav { display: flex; align-items: center; gap: 4px; } .navitem { position: relative; } .navitem > a, .navitem > button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-family: var(--font); font-size: 14.5px; font-weight: 500; border-radius: 10px; text-decoration: none; transition: color .16s, background .16s; } .navitem > a:hover, .navitem:hover > button, .navitem.open > button { color: var(--ink); background: rgba(255,255,255,.05); } .navitem > a.is-current { color: var(--ink); } .navitem .chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .65; transition: transform .2s; } .navitem.open .chev { transform: rotate(-135deg); margin-top: 2px; } .megamenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 70; padding-top: 12px; /* invisible hover bridge */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease; } .navitem.open .megamenu { opacity: 1; visibility: visible; pointer-events: auto; } .mm-panel { display: grid; gap: 6px 32px; padding: 22px 26px; background: #10131c; border: 1px solid var(--rim-soft); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); } .mm-panel.cols-4 { grid-template-columns: repeat(4, minmax(138px, 1fr)); } .mm-panel.cols-3 { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .mm-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 10px; } .mm-col a { display: block; color: var(--ink-2); font-size: 13.5px; padding: 6px 0; text-decoration: none; transition: color .14s; } .mm-col a:hover { color: #fff; } /* the right-hand cluster: sign-in + CTA + (under 980px) the menu button */ .row-end { display: flex; align-items: center; gap: 10px; } .signin-link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--ink-2); font-size: 14px; font-weight: 500; transition: color .16s, background .16s; } .signin-link:hover { color: var(--ink); background: rgba(255,255,255,.05); } /* [hidden] is only the UA stylesheet's display:none — the rule above wins over it, so hiding the link has to be said explicitly. */ .signin-link[hidden] { display: none; } /* Sign out, to the right of the Pro badge or the coin pill. Quieter than either — it is the thing nobody came here to press. */ .signout-link { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--r-pill); cursor: pointer; background: transparent; border: 1px solid var(--rim); color: var(--ink-2); font-family: inherit; font-size: 14px; font-weight: 500; transition: color .16s, background .16s, border-color .16s; } .signout-link:hover { color: var(--ink); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.22); } .signout-link[hidden] { display: none; } .signout-link:disabled { opacity: .6; cursor: default; } /* Below 980px the bar has no room; the drawer carries it instead. */ @media (max-width: 980px) { .signout-link { display: none; } } /* Signed in: the initial stands in for the whole email, which never fits. */ .signin-link .avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--pill-bg); color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.25); } @media (max-width: 640px) { /* the drawer carries both, and 375px has room for neither */ .signin-link { display: none; } } .burger { display: none; /* desktop has the real nav */ flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; background: var(--glass); border: 1px solid var(--rim-soft); border-radius: 12px; cursor: pointer; } .burger span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .15s ease; } /* three bars fold into a cross: the middle one fades, the outer two meet */ .burger.is-open span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); } @media (max-width: 980px) { .nav { display: none; } .burger { display: flex; } } /* ===== mobile drawer (built from `.nav` by js/site.js) ===== */ /* z-index sits under the header (50) and the promo strip (60), and above the hero (1) and the showcase panel (2) — see js/site.js for why the header has to stay on top. */ .drawer { position: fixed; inset: 0; z-index: 45; background: rgba(3,5,8,.6); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .drawer.open { opacity: 1; visibility: visible; } .drawer-panel { position: absolute; inset: 0 0 auto; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px; /* padding-top is set in js/site.js from the header's real height */ padding: 100px 20px calc(28px + env(safe-area-inset-bottom)); background: #0a0e17; border-bottom: 1px solid var(--rim-soft); box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: translateY(-10px); transition: transform .24s cubic-bezier(.4,0,.2,1); } /* the header (and its close button) stay on top of the sheet */ .drawer.open .drawer-panel { transform: none; } .dgroup { border-bottom: 1px solid var(--rim-soft); } .dgroup > summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; cursor: pointer; list-style: none; color: var(--ink); font-size: 17px; font-weight: 600; } .dgroup > summary::-webkit-details-marker { display: none; } .dgroup > summary::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .dgroup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .dcol { padding: 2px 2px 14px; } .dcol h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4); margin: 8px 0 4px; } .dcol a { display: block; padding: 9px 0; color: var(--ink-2); font-size: 15px; text-decoration: none; } /* The drawer's Sign out is a `.dlink` like the rest, but a button, so it needs the parts a button does not inherit. */ .dlink-out { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; color: var(--ink-2); } .dlink[hidden] { display: none; } .dlink { display: block; padding: 15px 2px; color: var(--ink); font-size: 17px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rim-soft); } .dlink[aria-current] { color: var(--pink); } .dlink[hidden] { display: none; } .dcta { margin-top: 20px; width: 100%; } /* Nothing behind the sheet is visible, so freezing the scroller costs no layout — and it keeps the page still while the menu is open. */ .nav-open, .nav-open body { overflow: hidden; } /* The takeover's own lock, deliberately not `nav-open`. It opens on top of the template dialog and outlives it — the dialog closing underneath would otherwise take the shared lock with it and leave the page scrolling behind a full-screen overlay. */ .gp-open, .gp-open body { overflow: hidden; } /* shared gradient-pill treatment (nav CTA + hero primary) — uses the app's own create-button background, see --pill-bg. */ .gpill { background: var(--pill-bg); border: 0; color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,.22); box-shadow: 0 10px 26px -10px rgba(0,0,0,.55), 0 2px 12px rgba(254,2,153,.14); transition: transform .18s ease, box-shadow .22s ease, filter .2s ease; } .gpill:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 34px -10px rgba(0,0,0,.6), 0 4px 16px rgba(254,2,153,.18); } .gpill:active { transform: translateY(0); } .navcta { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; text-decoration: none; } /* ===== hero copy ===== */ /* whole hero — headline, fan and caption — is centred in the viewport so the caption always sits directly under the cards, whatever the height */ .hero { text-align: center; /* the card width drives both the fan height and each card — and is capped by BOTH viewport width and height, so the whole hero (headline + fan + caption) fits on screen at any desktop size. */ --card-w: min(52vw, 640px, 62svh); /* The hero scrolls away with the page like any other section — the showcase below simply follows it up. Nothing sticks, nothing is covered. At rest the hero ends exactly at the fold. */ position: relative; z-index: 1; /* 72px header + the promo strip, which is two lines on a phone and gone once dismissed — js/site.js measures it into --promo-h. */ min-height: calc(100svh - 72px - var(--promo-h, 34px)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(10px, 1.8vh, 22px) 0; } /* Scrolled past: the fan's videos are paused in JS (see main.js) — there is no reason to composite four 3D-transformed layers nobody can see. */ .hero-idle .mcard { will-change: auto; } .hero h1 { font-family: var(--font); font-weight: 600; font-size: min(clamp(34px, 5.4vw, 72px), 8.4svh); line-height: 1.03; letter-spacing: -0.038em; margin: 0 auto clamp(8px, 1.4vh, 12px); color: var(--ink); text-wrap: balance; } .hero h1 .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .pills { display: flex; gap: 12px; justify-content: center; margin-top: clamp(14px, 2vh, 22px); } .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: var(--r-pill); font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; /* "Get started free" is not three lines */ border: 1px solid transparent; cursor: pointer; transition: transform .16s, box-shadow .16s, border-color .16s; } /* .btn-grad inherits the .gpill treatment — and drops .btn's 1px border so it reads exactly like the nav "Get the app" pill (no edge seam). */ .btn.gpill { border: 0; } .btn-glass { background: var(--glass-2); color: var(--ink); border-color: var(--rim); backdrop-filter: blur(12px); transition: transform .16s, border-color .16s, background .16s; } .btn-glass:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.14); } /* ===== coverflow ===== */ .flow { position: relative; width: 100%; /* exactly the centre card's height + a little breathing room, so the caption always hugs the cards */ height: calc(var(--card-w) * 0.5625 + 12px); /* The headline and its two pills read as their own thing, not as a label on the fan, so they get real air underneath. The hero centres its whole stack, so widening this gap is what lifts the copy: it does not move the copy on its own, it pushes the two halves apart. The card's svh cap pays for it (66 -> 62 above). On a short laptop the fan is the tallest thing here and the hero has to end exactly at the fold — buying the gap without giving the space back somewhere would push the caption off it. */ margin-top: clamp(32px, 7.5vh, 88px); perspective: 1700px; perspective-origin: 50% 44%; cursor: pointer; /* inherits down to the cards / video */ } .track { position: absolute; inset: 0; transform-style: preserve-3d; } .mcard { --w: var(--card-w); position: absolute; left: 50%; top: 0; width: var(--w); aspect-ratio: 16 / 9; margin-left: calc(var(--w) / -2); border-radius: 20px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #0b0f1a; border: 1px solid var(--rim); transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .85s cubic-bezier(.4,0,.2,1), filter .85s ease; will-change: transform, opacity; transform: translateX(var(--x, 0)) translateY(var(--y, 0)) translateZ(var(--z, 0)) rotateY(var(--ry, 0)) scale(var(--s, 1)); opacity: var(--o, 1); filter: blur(var(--blur, 0)) brightness(var(--br, 1)); z-index: var(--zi, 1); box-shadow: 0 40px 90px rgba(0,0,0,.5); } /* diagonal glass rim (GlassRimPainter equivalent) */ .mcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.05) 50%, rgba(254,2,153,.16)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .mcard .mvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b0f1a; display: block; } /* tap feedback — a quick light bloom over the card the user clicked */ .mcard .tapfx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(65% 65% at 50% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) 72%); mix-blend-mode: screen; } .mcard.tap .tapfx { animation: tapfade .5s cubic-bezier(.2,.7,.2,1); } @keyframes tapfade { 0% { opacity: .38; } 100% { opacity: 0; } } /* hover state — a shadow-like scrim on whichever card the pointer is over (JS-driven, since 3D-transformed cards don't fire :hover reliably) */ .mcard .hoverfx { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(120% 120% at 50% 46%, rgba(0,0,0,.14), rgba(0,0,0,.34) 100%); transition: opacity .22s ease; } .mcard.hover .hoverfx { opacity: 1; } /* the hovered card also drops slightly into shadow */ .mcard.hover { filter: blur(var(--blur, 0)) brightness(.93) !important; } /* The prompt box — the concept, said out loud on the card: the video is the output, and the box is the input that would have produced it. OpenArt puts a "Direct this" pill on its genre cards; this goes a step further and shows the prompt itself, per card, from data-prompt in the markup. On by default for the centred card rather than revealed on hover: an affordance that only exists once you point at it cannot carry a concept to somebody who is merely reading the page. The side cards keep it hidden — at 88% scale and 27deg of rotation a line of 13px text is unreadable noise, not information. */ .mcard .mprompt { position: absolute; z-index: 4; /* Narrow and tall rather than a wide strip: a composer shape reads as something you type into, where a full-width bar reads as a caption. Centred by transform, so the width can change without touching the insets. */ left: 50%; bottom: 14px; /* Sized in px, not a percentage of the card. The prompt is a fixed string at a fixed 13px, so what it needs is a fixed number of pixels (248 for the longest of the three, plus the caret, the gap, the Create chip and the padding = 372). The card, though, is min(52vw, 640px, 66svh) — so the same text needs 58% of a wide card and 81% of a short-window one, and any single percentage clips somewhere. max-width keeps it inside the card when the window gets too short for even that; past there the run scrolls and the caret stays in view, which is the honest fallback rather than a hidden tail. */ width: 384px; max-width: calc(100% - 24px); /* One row: text on the left, Create on the right. The column layout stacked them and cost a whole extra row of height for nothing the shape was not already saying. */ display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border: 1px solid var(--rim); border-radius: 16px; /* Flat, and no backdrop-filter on purpose. These cards are 3D transformed and their own transition animates `filter`, so a live blur surface here would be re-sampled through that for the whole 850ms of every rotation — the one place on this page that cannot afford it. Nearly opaque, and that is not a style choice: this box lies over whatever frame the video happens to be on. At .72 the background lifts toward the artwork, and on a bright frame (the interior shots go almost white) placeholder-grey text on it fell to roughly 1:1 — invisible. At .92 the worst case still clears 4.5:1, and a real input is solid anyway. */ background: rgba(11, 15, 26, .92); cursor: pointer; text-align: left; opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none; transition: opacity .28s ease, transform .28s ease, border-color .2s ease; } .mcard.is-center .mprompt { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .mcard.is-center.hover .mprompt { border-color: rgba(255,255,255,.28); } /* Pointer on the box: it lifts and firms up. Real :hover rather than the JS-driven .mcard.hover class — that class exists because side cards are rotated 27deg and do not hit-test reliably, but the centred card carries no rotation at all, so the pointer lands on this button honestly. translateX(-50%) has to be repeated: it is what centres the box, and a transform declaration replaces rather than adds to the previous one. -3px matches the lift .gpill and .btn-glass already use on this site. */ .mcard.is-center .mprompt:hover { transform: translateX(-50%) translateY(-3px); border-color: rgba(255,255,255,.38); background: rgba(11, 15, 26, .96); box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); } .mcard.is-center .mprompt:hover .mprompt-go { filter: brightness(1.08); } .mprompt-text { font-family: var(--font); font-size: 13px; line-height: 1.45; /* --ink-2, not the dimmer --ink-3 a placeholder would normally take: it still reads as unentered text next to the white "Create" label, but survives a bright frame underneath. */ color: var(--ink-2); /* Exactly one line, and it must never become two: the text arrives a character at a time, so a wrap mid-sentence would shove the Create button down while you are reading it. `nowrap` guarantees the height, and the overflow scrolls instead — main.js keeps the caret in view the way a real input does, rather than clipping it off the end. */ height: 1.45em; /* flex-1 with min-width:0 is what lets the run be narrower than its own text — without the zero minimum a flex item refuses to shrink past its content and the box would widen instead of scrolling. */ flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; } /* The caret rides in the text flow, immediately after the last character typed. steps(1) rather than a fade: a caret that eases is a glow. */ .mprompt-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1.5px; vertical-align: -2px; background: var(--pink); animation: mcaret 1.05s steps(1, end) infinite; } @keyframes mcaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .mprompt-go { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: var(--r-pill); background: var(--pill-bg); color: #ffffff; font-family: var(--font); font-size: 12.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.22); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); transition: filter .2s ease; } .mprompt-go .spk { width: 14px; height: 14px; object-fit: contain; } .mcard.is-center.hover .mprompt-go { filter: brightness(1.06); } /* No blinking caret for anyone who asked for less motion; the line is written out in full by the script in that case, so it has nothing left to point at. */ @media (prefers-reduced-motion: reduce) { .mprompt-caret { display: none; } } /* connecting light beams behind the centre card */ .beam { position: absolute; top: 34%; height: 10px; width: 22%; filter: blur(3px); z-index: 0; opacity: .4; } .beam.l { left: 18%; background: linear-gradient(90deg, transparent, rgba(254,2,153,.26)); transform: rotate(7deg); } .beam.r { right: 18%; background: linear-gradient(270deg, transparent, rgba(247,240,98,.22)); transform: rotate(-7deg); } .caption { position: relative; z-index: 6; text-align: center; margin-top: 12px; } .caption .c-title { display: block; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } .caption .c-sub { display: block; color: var(--ink-3); font-size: 13.5px; margin-top: 3px; } /* ===== showcase panel ===== */ /* An ordinary section in the flow: it follows the hero up the page on a normal scroll. No sheet, no rounded lip, no cast shadow — and no background of its own, so the page's one backdrop shows through. */ .panel { position: relative; z-index: 2; padding: clamp(54px, 7vh, 96px) 0 clamp(64px, 8vh, 112px); isolation: isolate; } .wrap-wide { max-width: 1560px; } /* ===== template detail dialog (/js/templatedialog.js) ===== */ /* The app's Template Detail screen, laid out for a desktop the way glam.ai lays its own out: the clip on the left, everything you would fill in on the right. Sits at 90 — above the header (50), the promo strip (60) and the mega-menus (70), and deliberately below the sign-in dialog (95), which is what the Use Effect button hands you to. Same `visibility`/`opacity`/`translateZ(0)` treatment as .authdlg, for the same reason: the hero's 3D-transformed fan is a composited layer and would otherwise draw straight through a fixed overlay. */ .tdlg { position: fixed; inset: 0; z-index: 90; transform: translateZ(0); visibility: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(3, 5, 8, .74); opacity: 0; transition: opacity .2s ease; } .tdlg.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .tdlg-card { display: grid; grid-template-columns: minmax(0, 1fr) 400px; width: 100%; max-width: 1180px; height: min(88svh, 820px); overflow: hidden; background: #0c1018; border: 1px solid var(--rim-soft); border-radius: 26px; box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); transform: translateY(10px) scale(.985); transition: transform .22s cubic-bezier(.4,0,.2,1); } .tdlg.is-open .tdlg-card { transform: none; } /* ---- the stage ---- */ .tdlg-stage { position: relative; overflow: hidden; background: #05070c; } /* A 9:16 clip in a landscape box leaves two thirds of the stage empty, so the poster fills it blurred — the same trick the card art plays behind a portrait video everywhere else. The still, never the video: a live backdrop-filter over playing footage is the one thing this page cannot afford (see the sign-in dialog's flat scrim). Scaled up because a blur samples past its own edges and would otherwise fade to nothing there. */ .tdlg-blur { position: absolute; inset: 0; background: center / cover no-repeat; filter: blur(34px) saturate(1.25) brightness(.62); transform: scale(1.18); } .tdlg-poster, .tdlg-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } /* The poster holds the frame until the clip can paint over it, so the stage is never empty and never flashes black between the two. */ .tdlg-vid[hidden] { display: none; } .tdlg-sound { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: #fff; background: rgba(10,12,20,.55); border: 1px solid var(--rim); border-radius: 50%; cursor: pointer; transition: background .16s; } .tdlg-sound:hover { background: rgba(10,12,20,.8); } .tdlg-sound svg { width: 20px; height: 20px; } .tdlg-sound[hidden] { display: none; } /* ---- the panel ---- */ .tdlg-panel { display: flex; flex-direction: column; min-height: 0; padding: 22px 22px 16px; border-left: 1px solid var(--rim-soft); background: #0c1018; } .tdlg-head { display: flex; align-items: flex-start; gap: 12px; } /* the app's badge pill: white 16% on a white 8% rim */ .tdlg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.08); color: #fff; font-size: 12px; font-weight: 500; line-height: 16px; } .tdlg-badge img { width: 16px; height: 16px; display: block; } .tdlg-badge[hidden] { display: none; } .tdlg-x { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--ink-3); background: transparent; border: 0; border-radius: 50%; cursor: pointer; transition: color .16s, background .16s; } .tdlg-x:hover { color: var(--ink); background: rgba(255,255,255,.06); } .tdlg-x svg { width: 18px; height: 18px; } .tdlg-title { margin: 12px 0 0; color: #fff; font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -.01em; } .tdlg-sub { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; line-height: 22px; } .tdlg-sub[hidden] { display: none; } /* Scrolls on its own, not with the panel: the price and the button are the two things that must never end up below the fold, and a three-slot template on a laptop is taller than the dialog. */ .tdlg-slots { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-right: 4px; scrollbar-width: thin; } .tdlg-slots[hidden] { display: none; } .tdlg-field-label { display: block; margin-bottom: 8px; color: #fff; font-size: 15px; line-height: 22px; font-weight: 500; } /* One treatment for every field the sheet has — the photo slot, the prompt area, the product name and its details: white 8% fill on a white 8% rim. They differ only in shape, which is exactly how the app draws them. The photo slot is a