/* ============================================================ Brevis AI Stadium — production CSS Сборка из дизайна Gridchin (ds/colors_and_type.css + styles/shared.css) + минимальная адаптация под форму, валидацию и pipeline-статус. ============================================================ */ /* fonts loaded asynchronously from index.html */ :root { color-scheme: light; --gr-black: #000; --gr-white: #fff; --gr-dark-body: #242423; --gr-light-body: #f4f4f0; --gr-light-body-alt: #fbfbf9; --gr-pink: #ff90e9; --gr-pink-100: #fbeaf9; --gr-pink-500: #ff90e9; --gr-pink-600: #ff8fe7; --gr-green: #23a094; --gr-green-100: #d3f3f0; --gr-green-500: #23a094; --gr-green-600: #169286; --gr-gold: #ffc900; --gr-gold-100: #fdf4d0; --gr-purple: #90a8ed; --gr-purple-100: #e9eefa; --gr-red: #dc341e; --gr-red-100: #f8d6d2; --gr-orange: #ff7051; --gr-neutral-100: #e5e5e5; --gr-neutral-200: #ccc; --gr-neutral-300: #b2b2b2; --gr-neutral-500: #808080; --gr-neutral-700: #78716c; --gr-border: #e7e5e4; --font-sans: "Manrope", "IBM Plex Sans", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --ease-out: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--gr-light-body); min-height: 100%; font-family: var(--font-sans); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; } .gr-root { font-family: var(--font-sans); color: var(--gr-black); background: var(--gr-light-body); } /* Mobile-first frame, centered on desktop */ .mobile-frame { max-width: 480px; width: 100%; margin: 0 auto; position: relative; background: var(--gr-white); box-shadow: 0 10px 40px rgba(0,0,0,0.10); overflow-x: clip; } @media (max-width: 520px) { .mobile-frame { box-shadow: none; max-width: 100%; } } .visually-hidden, input.visually-hidden, select.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } /* ===== TOPBAR ===== */ .con .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1.5px solid var(--gr-black); background: var(--gr-white); position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 0 0 rgba(0,0,0,0.04); } .con .topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; } .con .topbar__brand-mark { width: 26px; height: 26px; border-radius: 999px; background: var(--gr-pink); border: 1.5px solid var(--gr-black); display: grid; place-items: center; font-size: 10px; font-weight: 800; } .con .topbar__menu { width: 38px; height: 38px; border: 1.5px solid var(--gr-black); border-radius: 10px; background: var(--gr-white); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 2px 2px 0 0 var(--gr-black); } .con .topbar__menu span { width: 18px; height: 2px; background: var(--gr-black); border-radius: 1px; display: block; } /* ===== PROMO STRIP ===== */ .con .promo-strip { background: var(--gr-pink); color: var(--gr-black); font-size: 13px; font-weight: 700; text-align: center; padding: 9px 20px; border-bottom: 1.5px solid var(--gr-black); letter-spacing: -0.01em; } .con .promo-strip strong { background: var(--gr-black); color: var(--gr-pink); padding: 1px 8px; border-radius: 999px; margin: 0 4px; } /* ===== HERO ===== */ .con .hero { padding: 28px 20px 32px; background: var(--gr-light-body); border-bottom: 1.5px solid var(--gr-black); position: relative; } .con .hero__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--gr-black); color: var(--gr-pink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 999px; margin-bottom: 16px; } .con .hero__tag .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gr-pink); animation: blink 1.2s infinite; } @keyframes blink { 0%,50%{ opacity:1 } 51%,100%{ opacity:0.25 } } .con .hero h1 { margin: 0; font-size: 40px; line-height: 0.98; font-weight: 800; letter-spacing: -0.025em; } .con .hero h1 em { font-style: normal; background: var(--gr-pink); border: 1.5px solid var(--gr-black); padding: 0 8px; display: inline-block; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 0 var(--gr-black); } .con .hero__sub { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: var(--gr-neutral-700); } .con .hero__video { margin-top: 22px; position: relative; width: 100%; aspect-ratio: 9/16; background: var(--gr-black); border: 1.5px solid var(--gr-black); border-radius: 18px; overflow: hidden; box-shadow: 5px 5px 0 0 var(--gr-black); } .con .hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; } .con .hero__live-counter { position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; background: var(--gr-white); border: 1.5px solid var(--gr-black); padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 2px 2px 0 0 var(--gr-black); } .con .hero__live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gr-red); animation: blink 1.2s infinite; } .con .hero__sticker { position: absolute; top: 16px; right: 16px; z-index: 3; width: 108px; height: 108px; display: grid; place-items: center; text-align: center; background: var(--gr-gold); border: 2.5px solid var(--gr-black); border-radius: 999px; transform: rotate(8deg); box-shadow: 3px 3px 0 0 var(--gr-black); font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; } .con .hero__sticker strong { display: block; font-size: 12px; font-weight: 800; margin-top: 4px; opacity: 0.85; } .con .hero__poster-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85) 100%); pointer-events: none; } .con .hero__poster-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 10px; z-index: 2; } .con .hero__poster-text { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--gr-white); text-transform: uppercase; } .con .hero__poster-chips { display: flex; gap: 6px; flex-wrap: wrap; } .con .hero__chip { font-size: 10px; font-weight: 800; padding: 4px 9px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; color: var(--gr-white); backdrop-filter: blur(8px); text-transform: uppercase; letter-spacing: 0.04em; } .con .hero__chip--accent { background: var(--gr-pink); color: var(--gr-black); border-color: var(--gr-pink); } .con .hero__social-proof { margin-top: 18px; display: flex; gap: 12px; align-items: center; } .con .hero__avatars { display: flex; } .con .hero__avatars img { width: 32px; height: 32px; border-radius: 999px; border: 2px solid var(--gr-light-body); margin-left: -10px; display: block; } .con .hero__avatars img:first-child { margin-left: 0; } .con .hero__proof-text { font-size: 12px; color: var(--gr-neutral-700); line-height: 1.35; margin: 0; } .con .hero__proof-text strong { color: var(--gr-black); font-weight: 800; } .con .hero__cta-row { margin-top: 20px; display: flex; align-items: center; gap: 10px; } .con .hero__cta-btn { flex: 1; background: var(--gr-black); color: var(--gr-pink); border: 1.5px solid var(--gr-black); border-radius: 999px; padding: 14px 14px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 3px 3px 0 0 var(--gr-pink); display: flex; justify-content: center; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: 0.02em; } .con .hero__cta-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--gr-pink); } .con .hero__price-stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; flex-shrink: 0; } .con .hero__price-old { font-size: 11px; color: var(--gr-neutral-500); text-decoration: line-through; } .con .hero__price-new { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--gr-black); margin-top: 2px; } .con .hero__price-badge { background: var(--gr-pink); color: var(--gr-black); border: 1.5px solid var(--gr-black); font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 999px; margin-top: 4px; transform: rotate(-3deg); } /* ===== SECTION HEAD ===== */ .con .sect { padding: 32px 20px; border-bottom: 1.5px solid var(--gr-black); } .con .sect--white { background: var(--gr-white); } .con .sect--bg { background: var(--gr-light-body); } .con .sect__kicker { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; background: var(--gr-black); color: var(--gr-pink); border-radius: 4px; } .con .sect__title { margin: 12px 0 4px; font-size: 26px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; } .con .sect__sub { margin: 8px 0 22px; font-size: 14px; color: var(--gr-neutral-700); line-height: 1.5; } /* ===== PIPE / STEPS ===== */ .con .pipe { display: flex; flex-direction: column; gap: 22px; } .con .pipe__step { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: stretch; border: 1.5px solid var(--gr-black); border-radius: 12px; background: var(--gr-white); padding: 12px; box-shadow: 3px 3px 0 0 var(--gr-black); position: relative; } .con .pipe__media { width: 90px; height: 116px; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--gr-black); background: var(--gr-neutral-100); } .con .pipe__media img, .con .pipe__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .con .pipe__body { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .con .pipe__num { font-size: 10px; font-weight: 800; padding: 2px 7px; background: var(--gr-pink); border: 1.5px solid var(--gr-black); border-radius: 999px; align-self: flex-start; text-transform: uppercase; letter-spacing: 0.05em; } .con .pipe__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .con .pipe__caption { font-size: 13px; color: var(--gr-neutral-700); line-height: 1.4; margin: 0; } .con .pipe__arrow { position: absolute; left: 42px; bottom: -22px; z-index: 2; width: 26px; height: 26px; border-radius: 999px; background: var(--gr-white); border: 1.5px solid var(--gr-black); display: grid; place-items: center; font-weight: 800; font-size: 14px; box-shadow: 2px 2px 0 0 var(--gr-black); } /* ===== BENEFITS ===== */ .con .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .con .benefit { border: 1.5px solid var(--gr-black); background: var(--gr-white); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 96px; box-shadow: 2px 2px 0 0 var(--gr-black); } .con .benefit__icon { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid var(--gr-black); background: var(--gr-pink); display: grid; place-items: center; font-weight: 800; font-size: 12px; } .con .benefit__icon--green { background: var(--gr-green); color: var(--gr-white); } .con .benefit__icon--gold { background: var(--gr-gold); } .con .benefit__icon--purple { background: var(--gr-purple); } .con .benefit__title { font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; } .con .benefit__sub { font-size: 11px; color: var(--gr-neutral-700); line-height: 1.3; } /* ===== GENERATOR BLOCK ===== */ .con-gen { background: var(--gr-light-body); border: 1.5px solid var(--gr-black); border-radius: 14px; padding: 22px 20px 28px; box-shadow: 4px 4px 0 0 var(--gr-black); } .con-gen__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; } .con-gen__heading h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--gr-black); } .con-gen__heading span, .con-gen__heading a { font-size: 12px; font-weight: 700; color: var(--gr-neutral-700); } .con-gen__heading a { color: var(--gr-black); text-decoration: underline; } /* Photo zone */ .con-photo-zone { border: 1.5px dashed var(--gr-black); border-radius: 14px; background: var(--gr-pink-100); padding: 22px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; } .con-photo-zone__icon { width: 48px; height: 48px; border-radius: 999px; background: var(--gr-pink); color: var(--gr-black); border: 1.5px solid var(--gr-black); display: grid; place-items: center; font-size: 24px; font-weight: 800; box-shadow: 2px 2px 0 0 var(--gr-black); } .con-photo-zone__title { font-weight: 800; font-size: 15px; } .con-photo-zone__sub { font-size: 12px; color: var(--gr-neutral-700); line-height: 1.4; } .con-photo-zone__or { font-size: 10px; color: var(--gr-neutral-500); text-transform: uppercase; letter-spacing: 0.1em; } .con-photo-zone__btn { background: var(--gr-white); color: var(--gr-black); border: 1.5px solid var(--gr-black); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 12px; } .con-photo-loaded { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--gr-white); border: 1.5px solid var(--gr-black); box-shadow: 2px 2px 0 0 var(--gr-black); margin-top: 14px; } .con-photo-loaded img { width: 52px; height: 68px; border-radius: 8px; object-fit: cover; border: 1.5px solid var(--gr-black); } .con-photo-loaded__body { flex: 1; min-width: 0; } .con-photo-loaded__name { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; } .con-photo-loaded__meta { font-size: 11px; color: var(--gr-neutral-700); margin-top: 2px; } .con-photo-loaded__check { font-size: 11px; color: var(--gr-green-600); margin-top: 4px; font-weight: 700; } .con-photo-loaded__replace { font-size: 11px; padding: 6px 10px; border-radius: 999px; border: 1.5px solid var(--gr-black); background: var(--gr-light-body); color: var(--gr-black); font-family: inherit; cursor: pointer; font-weight: 700; } /* Form field */ .con-field { margin-top: 22px; border: 0; padding: 0; min-width: 0; } /* fieldset by default has min-width: min-content — это ломает overflow-x flex-чилдов (chip-row, poster-row) */ fieldset.con-field { min-width: 0; max-width: 100%; } .con-field__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .con-field__label { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; letter-spacing: -0.005em; color: var(--gr-black); } .con-field__num { font-size: 10px; font-weight: 800; padding: 2px 6px; background: var(--gr-black); color: var(--gr-pink); border-radius: 4px; } .con-field__hint { font-size: 11px; color: var(--gr-neutral-700); display: flex; gap: 4px; align-items: center; font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; } .con-field__hint__icon { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--gr-black); display: grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--gr-white); color: var(--gr-black); } .con-field__hint:hover .con-field__hint__icon { background: var(--gr-pink); } .con-tooltip { position: relative; margin: 6px 0 10px; padding: 10px 12px 10px 36px; background: var(--gr-gold-100); border: 1.5px solid var(--gr-black); border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--gr-black); } .con-tooltip::before { content: "i"; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--gr-gold); color: var(--gr-black); border-right: 1.5px solid var(--gr-black); border-bottom: 1.5px solid var(--gr-black); border-radius: 8px 0 10px 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; } .con-input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14px; background: var(--gr-white); border: 1.5px solid var(--gr-black); border-radius: 12px; color: var(--gr-black); outline: none; transition: box-shadow 0.12s var(--ease-out); } .con-input:focus { box-shadow: 2px 2px 0 0 var(--gr-pink); } /* Pills (radio + checkbox state) */ .con-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .con-pills.con-pills--check { grid-template-columns: repeat(2, 1fr); } .con-pill { position: relative; padding: 10px 12px; border-radius: 18px; background: var(--gr-white); border: 1.5px solid var(--gr-black); font-size: 12px; font-weight: 700; color: var(--gr-black); cursor: pointer; font-family: inherit; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out); } .con-pill input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .con-pill:has(input:checked) { background: var(--gr-pink); color: var(--gr-black); box-shadow: 2px 2px 0 0 var(--gr-black); transform: translate(-1px, -1px); } .con-pill:has(input:focus-visible) { outline: 2px solid var(--gr-black); outline-offset: 2px; } .con-pill__hint { font-size: 9px; font-weight: 700; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; } /* Sport chip row — горизонтальный скролл с видимым scrollbar и touch-pan */ .con-chip-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 6px 4px 14px; margin: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: thin; scrollbar-color: var(--gr-black) transparent; } .con-chip-row::-webkit-scrollbar { height: 6px; } .con-chip-row::-webkit-scrollbar-track { background: transparent; } .con-chip-row::-webkit-scrollbar-thumb { background: var(--gr-black); border-radius: 999px; } .con-chip { scroll-snap-align: start; } .con-chip { flex-shrink: 0; width: 92px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; position: relative; background: none; border: 0; padding: 0; font-family: inherit; } .con-chip__thumb { width: 92px; height: 116px; border-radius: 10px; border: 1.5px solid var(--gr-black); background-color: var(--gr-neutral-100); background-size: cover; background-position: center; position: relative; overflow: hidden; display: grid; place-items: center; transition: transform 0.15s var(--ease-out); } .con-chip__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; background: rgba(0,0,0,0.18); color: var(--gr-white); } .con-chip.active .con-chip__thumb { border-color: var(--gr-black); box-shadow: 3px 3px 0 0 var(--gr-pink); transform: translate(-1px, -1px); } .con-chip__label { font-size: 12px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--gr-black); } .con-chip__check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 999px; background: var(--gr-pink); color: var(--gr-black); border: 1.5px solid var(--gr-black); display: none; place-items: center; font-weight: 800; font-size: 11px; } .con-chip.active .con-chip__check { display: grid; } /* Scenario posters — горизонтальный скролл с видимым scrollbar */ .con-poster-row { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; margin: 0; padding: 6px 4px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: thin; scrollbar-color: var(--gr-black) transparent; } .con-poster-row::-webkit-scrollbar { height: 6px; } .con-poster-row::-webkit-scrollbar-track { background: transparent; } .con-poster-row::-webkit-scrollbar-thumb { background: var(--gr-black); border-radius: 999px; } .con-poster { scroll-snap-align: start; } .con-poster { flex-shrink: 0; width: 156px; cursor: pointer; border-radius: 14px; position: relative; overflow: hidden; border: 1.5px solid var(--gr-black); background: var(--gr-white); font-family: inherit; padding: 0; } .con-poster.active { box-shadow: 3px 3px 0 0 var(--gr-pink); transform: translate(-1px, -1px); } .con-poster__media { width: 100%; aspect-ratio: 3/4; background-color: var(--gr-neutral-100); background-size: cover; background-position: center; display: grid; place-items: center; font-size: 38px; } .con-poster__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85)); pointer-events: none; } .con-poster__title { position: absolute; bottom: 10px; left: 12px; right: 12px; font-size: 13px; font-weight: 800; line-height: 1.15; color: var(--gr-white); text-align: left; } .con-poster__title small { display: block; font-weight: 400; font-size: 10px; opacity: 0.85; margin-top: 2px; } /* Details toggle */ .con-details-toggle { margin-top: 22px; width: 100%; padding: 14px 16px; background: var(--gr-white); border: 1.5px solid var(--gr-black); border-radius: 14px; color: var(--gr-black); font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 14px; box-shadow: 3px 3px 0 0 var(--gr-pink); text-align: left; transition: transform 0.12s var(--ease-out); } .con-details-toggle:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--gr-pink); } .con-details-toggle[aria-expanded="true"] { background: var(--gr-pink); box-shadow: 3px 3px 0 0 var(--gr-black); } .con-details-toggle__icon { width: 36px; height: 36px; border: 1.5px solid var(--gr-black); border-radius: 999px; background: var(--gr-pink); color: var(--gr-black); display: grid; place-items: center; font-size: 18px; font-weight: 800; flex-shrink: 0; } .con-details-toggle[aria-expanded="true"] .con-details-toggle__icon { background: var(--gr-white); } .con-details-toggle__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .con-details-toggle__title { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; } .con-details-toggle__sub { font-size: 11px; color: var(--gr-neutral-700); line-height: 1.3; } .con-details-toggle[aria-expanded="true"] .con-details-toggle__sub { color: rgba(0,0,0,0.7); } .con-details-toggle__chev { font-weight: 800; font-size: 18px; flex-shrink: 0; transition: transform 0.18s var(--ease-out); } .con-details-toggle[aria-expanded="true"] .con-details-toggle__chev { transform: rotate(90deg); } /* Summary */ .con-summary { margin-top: 22px; padding: 14px; background: var(--gr-pink-100); border: 1.5px solid var(--gr-black); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 3px 3px 0 0 var(--gr-black); } .con-summary h4 { margin: 0 0 4px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gr-black); } .con-summary__row { display: flex; justify-content: space-between; font-size: 13px; color: var(--gr-black); gap: 10px; align-items: center; } .con-summary__row span:first-child { color: var(--gr-neutral-700); } .con-summary__row strong { font-weight: 800; } .con-summary__row--total { border-top: 1px dashed var(--gr-black); padding-top: 8px; margin-top: 4px; font-size: 14px; } .con-summary__row--total strong { font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; } .con-summary__strike { text-decoration: line-through; color: var(--gr-neutral-500); font-size: 12px; font-weight: 400; } /* Sticky CTA */ .con .sticky-cta { position: sticky; bottom: 12px; margin: 24px 0 0; padding: 12px; border: 1.5px solid var(--gr-black); border-radius: 14px; background: var(--gr-white); box-shadow: 4px 4px 0 0 var(--gr-black); z-index: 10; display: flex; flex-direction: column; gap: 10px; } .con .sticky-cta__row { display: flex; gap: 10px; align-items: center; } .con .sticky-cta__progress { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .con .sticky-cta__progress-bar { height: 8px; background: var(--gr-light-body); border: 1.5px solid var(--gr-black); border-radius: 999px; overflow: hidden; } .con .sticky-cta__progress-fill { height: 100%; background: var(--gr-pink); transition: width 0.3s var(--ease-out); } .con .sticky-cta__progress-text { font-size: 11px; color: var(--gr-neutral-700); font-weight: 600; } .con .sticky-cta__progress-text strong { color: var(--gr-black); font-weight: 800; } .con .sticky-cta__btn { background: var(--gr-black); color: var(--gr-pink); border: 1.5px solid var(--gr-black); padding: 13px 16px; font-size: 14px; font-weight: 800; border-radius: 999px; font-family: inherit; cursor: pointer; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; } .con .sticky-cta__btn:active { transform: translate(1px, 1px); } .con .sticky-cta__btn[disabled] { background: var(--gr-light-body); color: var(--gr-neutral-500); cursor: not-allowed; } .con .sticky-cta__alert { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gr-red-100, #fee2e2); border: 1.5px solid var(--gr-red, #ef4444); color: var(--gr-red, #b91c1c); font-size: 13px; font-weight: 700; line-height: 1.35; } .con-field.field-invalid, .con-chip-row.field-invalid, .con-poster-row.field-invalid { outline: 2px solid var(--gr-red, #ef4444); outline-offset: 2px; border-radius: 12px; } .con .validation-message { color: var(--gr-red, #b91c1c); font-size: 12px; font-weight: 700; margin: 6px 0 0; } .con .sticky-cta__sub { font-size: 11px; color: var(--gr-neutral-700); line-height: 1.3; text-align: center; margin: 0; } .con .sticky-cta__sub strong { color: var(--gr-black); } /* ===== STAGES / LOADER ===== */ .con .stages { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; } .con .stage.loader { background: var(--gr-white); border: 1.5px solid var(--gr-black); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 2px 2px 0 0 var(--gr-black); } .con .stage--error.loader { background: var(--gr-red-100); } .con .loader__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .con .loader__title { font-weight: 800; font-size: 14px; display: flex; gap: 8px; align-items: center; } .con .loader__title .badge { font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: var(--gr-light-body); border: 1px solid var(--gr-black); color: var(--gr-black); text-transform: uppercase; letter-spacing: 0.04em; } .con .loader__title .badge.running { background: var(--gr-pink); } .con .loader__title .badge.done { background: var(--gr-green); color: var(--gr-white); border-color: var(--gr-green); } .con .loader__title .badge.error { background: var(--gr-red); color: var(--gr-white); border-color: var(--gr-red); } .con .loader__eta { font-size: 11px; color: var(--gr-neutral-700); font-weight: 700; } .con .loader__spin { width: 14px; height: 14px; border: 2px solid var(--gr-black); border-right-color: transparent; border-radius: 999px; animation: spin 0.9s linear infinite; display: inline-block; } .con .stage.loader[data-stage-state="pending"] .loader__spin, .con .stage.loader[data-stage-state="done"] .loader__spin { display: none; } @keyframes spin { to { transform: rotate(360deg); } } .con .loader__bar { height: 8px; background: var(--gr-light-body); border: 1.5px solid var(--gr-black); border-radius: 999px; overflow: hidden; } .con .loader__bar-fill { height: 100%; background: var(--gr-pink); transition: width 0.4s var(--ease-out); } .con .pipeline__msg { font-size: 13px; color: var(--gr-neutral-700); margin: 6px 0 14px; font-weight: 600; } /* Unified loader card */ .con .loader-card { background: var(--gr-white); border: 2px solid var(--gr-black); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 3px 3px 0 0 var(--gr-black); } .con .loader-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .con .loader-card__title { font-weight: 900; font-size: 18px; } .con .loader-card__pct { color: var(--gr-pink); } .con .loader-card__eta { font-size: 13px; font-weight: 800; color: var(--gr-neutral-700); } .con .loader-card__bar { height: 10px; background: var(--gr-light-body); border: 1.5px solid var(--gr-black); border-radius: 999px; overflow: hidden; } .con .loader-card__bar-fill { height: 100%; background: var(--gr-pink); transition: width 0.4s var(--ease-out); } .con .loader-card[data-state="done"] .loader-card__bar-fill { background: var(--gr-green); } .con .loader-card[data-state="error"] .loader-card__bar-fill { background: var(--gr-red); } .con .loader-card__msg { font-size: 13px; color: var(--gr-neutral-700); font-weight: 600; margin: 0; } .con .loader-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .con .loader-step { display: grid; grid-template-columns: 32px 1fr 28px; gap: 12px; align-items: center; background: var(--gr-light-body); border: 1.5px solid var(--gr-black); border-radius: 12px; padding: 12px 14px; } .con .loader-step__num { width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--gr-black); background: var(--gr-white); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px; } .con .loader-step__title { font-weight: 800; font-size: 14px; } .con .loader-step__sub { font-size: 11px; color: var(--gr-neutral-700); font-weight: 700; margin-top: 2px; } .con .loader-step__icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; } .con .loader-step[data-state="active"] { background: var(--gr-pink-100); border-color: var(--gr-pink); } .con .loader-step[data-state="active"] .loader-step__num { background: var(--gr-pink); color: var(--gr-white); border-color: var(--gr-pink); } .con .loader-step[data-state="active"] .loader-step__icon::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--gr-black); border-right-color: transparent; border-radius: 999px; animation: spin 0.9s linear infinite; display: inline-block; } .con .loader-step[data-state="done"] { background: var(--gr-green-100); border-color: var(--gr-green); } .con .loader-step[data-state="done"] .loader-step__num { background: var(--gr-green); color: var(--gr-white); border-color: var(--gr-green); } .con .loader-step[data-state="done"] .loader-step__icon::before { content: "✓"; font-weight: 900; color: var(--gr-green); } .con .loader-step[data-state="error"] { background: var(--gr-red-100); border-color: var(--gr-red); } .con .loader-step[data-state="error"] .loader-step__num { background: var(--gr-red); color: var(--gr-white); border-color: var(--gr-red); } .con .loader-step[data-state="error"] .loader-step__icon::before { content: "!"; font-weight: 900; color: var(--gr-red); } .con .loader-step[data-state="pending"] { opacity: 0.6; } .con .loader-step__downloads { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .con .loader-step__downloads a { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--gr-black); background: var(--gr-white); color: var(--gr-black); text-decoration: none; } .con .loader-step__downloads a:hover { background: var(--gr-pink); } .con .loader-step__preview-host { margin-top: 10px; } .con .loader-step__preview { display: block; width: 100%; max-width: 220px; border: 1.5px solid var(--gr-black); border-radius: 10px; overflow: hidden; background: var(--gr-light-body); box-shadow: 2px 2px 0 0 var(--gr-black); } .con .loader-step__preview img, .con .loader-step__preview video { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; } .con .loader-step__preview--video video { background: var(--gr-black); } .con .hero__banner { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border: 2px solid var(--gr-black); border-radius: 14px; overflow: hidden; box-shadow: 3px 3px 0 0 var(--gr-black); margin: 0 0 14px; background: var(--gr-light-body); } /* Scenario poster video */ .con .con-poster__media { position: relative; overflow: hidden; } .con .con-poster__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; } .con .stage-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: var(--gr-neutral-700); } .con .stage-meta strong { color: var(--gr-black); font-weight: 800; } .con .artifact-placeholder { margin: 0; font-size: 12px; color: var(--gr-neutral-700); } .con .artifact { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .con .artifact img, .con .artifact video { max-width: 100%; border: 1.5px solid var(--gr-black); border-radius: 10px; } .con .artifact a { font-size: 12px; font-weight: 700; padding: 6px 10px; background: var(--gr-black); color: var(--gr-pink); border-radius: 999px; text-decoration: none; } .con .progress { margin-top: 10px; font-size: 11px; color: var(--gr-neutral-700); } .con .progress-row { display: flex; justify-content: space-between; gap: 10px; } .con .progress-row strong { color: var(--gr-black); } .con .results { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--gr-black); } .con .result-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .con .result-download { background: var(--gr-black); color: var(--gr-pink); border: 1.5px solid var(--gr-black); padding: 12px 14px; font-size: 13px; font-weight: 800; border-radius: 999px; text-decoration: none; text-align: center; box-shadow: 3px 3px 0 0 var(--gr-pink); } .con .job-link { font-size: 12px; font-weight: 700; color: var(--gr-black); text-decoration: underline; } /* ===== VALIDATION ===== */ .field-invalid { box-shadow: inset 0 0 0 2px var(--gr-red); border-radius: 12px; } .validation-message { font-size: 11px; color: var(--gr-red); font-weight: 700; margin: 6px 0 0; } /* ===== FAQ ===== */ .con .faq { display: flex; flex-direction: column; gap: 8px; } .con .faq__item { border: 1.5px solid var(--gr-black); border-radius: 10px; background: var(--gr-white); overflow: hidden; box-shadow: 2px 2px 0 0 var(--gr-black); } .con .faq__item[open] { background: var(--gr-pink-100); } .con .faq__q { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 14px; cursor: pointer; list-style: none; } .con .faq__q::-webkit-details-marker { display: none; } .con .faq__q span { width: 22px; height: 22px; border-radius: 999px; background: var(--gr-pink); border: 1.5px solid var(--gr-black); display: grid; place-items: center; font-size: 13px; } .con .faq__item[open] .faq__q span { background: var(--gr-black); color: var(--gr-pink); } .con .faq__a { padding: 0 14px 14px; font-size: 13px; color: var(--gr-neutral-700); line-height: 1.5; } /* ===== FOOTER ===== */ .con .footer { padding: 28px 20px 40px; background: var(--gr-black); color: var(--gr-white); font-size: 12px; } .con .footer h4 { font-size: 18px; font-weight: 800; margin: 0 0 8px; } .con .footer p { margin: 0 0 12px; opacity: 0.75; line-height: 1.5; } .con .footer__links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; } .con .footer__links a { color: var(--gr-pink); text-decoration: underline; } /* ===== SIDE MENU / HISTORY ===== */ .side-menu { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); animation: side-fade-in 0.2s ease-out; } .side-menu[aria-hidden="true"] { display: none; } @keyframes side-fade-in { from { opacity: 0; } to { opacity: 1; } } .side-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 86%; max-width: 360px; background: var(--gr-light-body); border-left: 1.5px solid var(--gr-black); box-shadow: -8px 0 0 0 var(--gr-black); display: flex; flex-direction: column; animation: side-slide-in 0.22s var(--ease-out); font-family: var(--font-sans); } @keyframes side-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .side-menu__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1.5px solid var(--gr-black); background: var(--gr-white); } .side-menu__kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gr-neutral-700); margin-bottom: 4px; } .side-menu__header h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--gr-black); } .side-menu__close { width: 36px; height: 36px; border: 1.5px solid var(--gr-black); border-radius: 999px; background: var(--gr-white); color: var(--gr-black); font-size: 20px; font-weight: 800; cursor: pointer; display: grid; place-items: center; padding: 0; line-height: 1; font-family: inherit; } .side-menu__summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-bottom: 1.5px solid var(--gr-black); background: var(--gr-pink); } .side-menu__summary > div { padding: 14px 18px; } .side-menu__summary > div + div { border-left: 1.5px solid var(--gr-black); } .side-menu__summary-val { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--gr-black); } .side-menu__summary-lbl { font-size: 11px; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gr-black); opacity: 0.7; } .side-menu__list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; } .side-menu__footer { padding: 14px 18px; border-top: 1.5px solid var(--gr-black); background: var(--gr-white); } .side-menu__new { width: 100%; background: var(--gr-black); color: var(--gr-pink); border: 1.5px solid var(--gr-black); border-radius: 999px; padding: 12px 16px; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 3px 3px 0 0 var(--gr-pink); text-transform: uppercase; letter-spacing: 0.02em; } /* History items (used by script.js) */ .history-item { display: flex; align-items: center; gap: 12px; background: var(--gr-white); border: 1.5px solid var(--gr-black); border-radius: 12px; padding: 10px; box-shadow: 2px 2px 0 0 var(--gr-black); text-decoration: none; color: var(--gr-black); } .history-item img { width: 52px; height: 68px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--gr-black); flex-shrink: 0; } .history-item span { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .history-item strong { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; } .history-item small { font-size: 11px; color: var(--gr-neutral-700); } .history-item--active { border-color: var(--gr-pink-600); box-shadow: 2px 2px 0 0 var(--gr-pink); } .history-empty { width: 52px; height: 68px; border-radius: 8px; border: 1.5px solid var(--gr-black); background: var(--gr-light-body); display: grid; place-items: center; font-size: 18px; } .hist-empty { text-align: center; padding: 30px 16px; background: var(--gr-white); border: 1.5px dashed var(--gr-black); border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hist-empty__icon { width: 54px; height: 54px; background: var(--gr-pink); border: 1.5px solid var(--gr-black); border-radius: 999px; display: grid; place-items: center; font-size: 26px; box-shadow: 2px 2px 0 0 var(--gr-black); } .hist-empty__title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; } .hist-empty__sub { font-size: 13px; color: var(--gr-neutral-700); line-height: 1.5; margin: 0; } /* Accessibility focus */ button:focus-visible, [role="radio"]:focus-visible, .con-pill:focus-within, .con-chip:focus-visible, .con-poster:focus-visible { outline: 2px solid var(--gr-black); outline-offset: 2px; }