| :root { |
| --forest: #263a27; |
| --forest-2: #344831; |
| --ink: #241f17; |
| --muted: #746b57; |
| --paper: #efe2c5; |
| --paper-light: #f8efd9; |
| --paper-deep: #dfcda6; |
| --line: #594f38; |
| --gold: #a98d4c; |
| --shadow: rgba(44, 36, 23, 0.24); |
| } |
|
|
| html, |
| body { |
| margin: 0; |
| background: #2d3027; |
| color: var(--ink); |
| } |
|
|
| .gradio-container { |
| width: 100vw !important; |
| min-width: 980px; |
| max-width: 1600px !important; |
| height: 100vh; |
| max-height: 100vh; |
| overflow: hidden; |
| box-sizing: border-box; |
| margin: 0 auto !important; |
| padding: 10px !important; |
| color: var(--ink); |
| font-family: Georgia, "Noto Serif SC", "Songti SC", serif !important; |
| } |
|
|
| #journey-tabs { |
| height: 100%; |
| border: 0 !important; |
| background: transparent !important; |
| } |
|
|
| #journey-tabs > .tab-wrapper { |
| display: none !important; |
| } |
|
|
| #journey-tabs > [role="tabpanel"] { |
| height: 100%; |
| } |
|
|
| .app-screen { |
| position: relative; |
| height: calc(100vh - 20px); |
| min-height: calc(100vh - 20px); |
| max-height: calc(100vh - 20px); |
| overflow: hidden; |
| box-sizing: border-box; |
| border: 3px double var(--line); |
| border-radius: 4px; |
| background: |
| linear-gradient(rgba(255, 250, 235, 0.32), rgba(255, 250, 235, 0.08)), |
| repeating-linear-gradient( |
| 0deg, |
| rgba(72, 60, 37, 0.025) 0, |
| rgba(72, 60, 37, 0.025) 1px, |
| transparent 1px, |
| transparent 4px |
| ), |
| radial-gradient(circle at 13% 17%, rgba(151, 119, 66, 0.08), transparent 22%), |
| radial-gradient(circle at 83% 72%, rgba(151, 119, 66, 0.08), transparent 25%), |
| var(--paper); |
| box-shadow: |
| inset 0 0 0 6px rgba(244, 232, 202, 0.78), |
| inset 0 0 0 7px rgba(73, 63, 42, 0.36), |
| 0 16px 50px rgba(0, 0, 0, 0.3); |
| padding: 0 18px; |
| } |
|
|
| .app-screen > .column { |
| gap: 0 !important; |
| } |
|
|
| .app-screen > .column > .block.padded { |
| min-height: auto !important; |
| border: 0 !important; |
| background: transparent !important; |
| padding: 0 !important; |
| } |
|
|
| .app-screen::before, |
| .app-screen::after { |
| position: absolute; |
| z-index: 5; |
| color: var(--line); |
| font-size: 28px; |
| line-height: 1; |
| content: "⌜"; |
| pointer-events: none; |
| } |
|
|
| .app-screen::before { |
| top: 8px; |
| left: 10px; |
| } |
|
|
| .app-screen::after { |
| right: 10px; |
| bottom: 8px; |
| transform: rotate(180deg); |
| } |
|
|
| .vintage-header { |
| display: grid; |
| grid-template-columns: auto auto auto 1fr auto auto; |
| align-items: center; |
| height: 42px; |
| min-height: 42px; |
| margin: 0 -18px; |
| padding: 0 28px; |
| border-bottom: 2px solid #172518; |
| background: |
| linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 40%), |
| var(--forest); |
| color: #e7d9b8; |
| font-family: Georgia, "Noto Serif SC", serif; |
| font-size: 11px; |
| letter-spacing: 0.12em; |
| } |
|
|
| .header-paw { |
| margin-right: 9px; |
| color: #c7ad69; |
| font-size: 15px; |
| } |
|
|
| .header-brand { |
| font-weight: 700; |
| } |
|
|
| .header-divider { |
| margin: 0 12px; |
| color: #8f9c7f; |
| } |
|
|
| .header-chapter { |
| color: #cbbd9c; |
| } |
|
|
| .header-step { |
| margin-right: 16px; |
| color: #a89977; |
| font-size: 10px; |
| } |
|
|
| .header-moon { |
| color: #e6cc82; |
| font-size: 20px; |
| } |
|
|
| .vintage-footer { |
| display: grid; |
| grid-template-columns: 1fr auto 1fr; |
| align-items: center; |
| min-height: 30px; |
| margin-top: auto; |
| border-top: 1px solid rgba(77, 68, 48, 0.48); |
| color: var(--muted); |
| font-size: 10px; |
| letter-spacing: 0.16em; |
| text-align: center; |
| } |
|
|
| .vintage-footer span:first-child { |
| justify-self: start; |
| font-size: 18px; |
| } |
|
|
| .vintage-footer span:last-child { |
| justify-self: end; |
| font-size: 14px; |
| } |
|
|
| .ornament-title { |
| position: relative; |
| z-index: 2; |
| width: 100%; |
| padding: 16px 10px 8px; |
| box-sizing: border-box; |
| text-align: center; |
| } |
|
|
| .ornament-title > span, |
| .final-kicker { |
| display: inline-block; |
| color: var(--gold); |
| font-family: Georgia, serif; |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 0.24em; |
| } |
|
|
| .ornament-title h1 { |
| margin: 5px 0 3px; |
| color: var(--ink); |
| font-size: clamp(26px, 3vw, 44px); |
| font-weight: 700; |
| line-height: 1.08; |
| letter-spacing: 0.08em; |
| } |
|
|
| .ornament-title h1::before, |
| .ornament-title h1::after { |
| display: inline-block; |
| margin: 0 15px; |
| color: var(--gold); |
| content: "✦"; |
| font-size: 13px; |
| vertical-align: middle; |
| } |
|
|
| .ornament-title p { |
| margin: 5px 0 0; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.55; |
| letter-spacing: 0.08em; |
| } |
|
|
| .screen-body, |
| .question-layout, |
| .story-layout, |
| .final-layout { |
| flex: 1; |
| min-height: 0; |
| } |
|
|
| .landing-layout { |
| align-items: center; |
| gap: 46px; |
| padding: 16px 50px 8px; |
| } |
|
|
| .landing-copy { |
| align-items: flex-start; |
| justify-content: center; |
| padding-left: 24px; |
| } |
|
|
| .landing-copy .ornament-title { |
| padding: 0; |
| text-align: left; |
| } |
|
|
| .landing-copy .ornament-title h1 { |
| margin: 12px 0 20px; |
| font-size: clamp(40px, 5vw, 70px); |
| line-height: 1.18; |
| letter-spacing: 0.05em; |
| } |
|
|
| .landing-copy .ornament-title h1::before, |
| .landing-copy .ornament-title h1::after { |
| display: none; |
| } |
|
|
| .landing-copy .ornament-title p { |
| padding-left: 28px; |
| border-left: 2px solid var(--gold); |
| font-size: 15px; |
| line-height: 1.8; |
| } |
|
|
| .hero-illustration { |
| position: relative; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .sparkle { |
| position: absolute; |
| z-index: 4; |
| color: var(--gold); |
| font-size: 22px; |
| } |
|
|
| .sparkle.s1 { |
| top: 10%; |
| left: 5%; |
| } |
|
|
| .sparkle.s2 { |
| right: 5%; |
| bottom: 23%; |
| } |
|
|
| .vintage-cat-image { |
| border: 0 !important; |
| background: transparent !important; |
| box-shadow: none !important; |
| } |
|
|
| .vintage-cat-image > div { |
| background: transparent !important; |
| } |
|
|
| .vintage-cat-image button, |
| .vintage-cat-image a, |
| .card-cat-image button, |
| .card-cat-image a { |
| display: none !important; |
| } |
|
|
| .vintage-cat-image img { |
| filter: sepia(0.34) saturate(0.72) contrast(1.06); |
| } |
|
|
| .oval-image { |
| width: min(430px, 100%); |
| padding: 12px !important; |
| border: 1px solid var(--line) !important; |
| border-radius: 48% 48% 8px 8px !important; |
| background: rgba(244, 232, 203, 0.72) !important; |
| box-shadow: 10px 12px 0 rgba(82, 70, 44, 0.08) !important; |
| } |
|
|
| .oval-image img { |
| border-radius: 46% 46% 6px 6px !important; |
| object-fit: cover; |
| } |
|
|
| .hero-caption, |
| .collage-caption, |
| .polaroid-note { |
| color: var(--muted); |
| font-size: 9px; |
| letter-spacing: 0.18em; |
| text-align: center; |
| } |
|
|
| .ink-button, |
| .paper-button { |
| min-height: 42px !important; |
| border-radius: 5px !important; |
| font-family: Georgia, "Noto Serif SC", serif !important; |
| letter-spacing: 0.08em; |
| box-shadow: 0 3px 0 rgba(40, 34, 24, 0.18) !important; |
| } |
|
|
| button.ink-button, |
| a.ink-button { |
| border: 1px solid #172518 !important; |
| background: |
| linear-gradient(rgba(255, 255, 255, 0.05), transparent), |
| var(--forest) !important; |
| color: #f0e5ca !important; |
| } |
|
|
| button.ink-button:hover, |
| a.ink-button:hover { |
| background: var(--forest-2) !important; |
| } |
|
|
| button.paper-button { |
| border: 1px solid #8b7c5a !important; |
| background: rgba(247, 236, 210, 0.82) !important; |
| color: var(--ink) !important; |
| } |
|
|
| button:disabled { |
| opacity: 0.42 !important; |
| } |
|
|
| .relationship-deck { |
| max-width: 1040px; |
| flex: 1; |
| align-items: stretch; |
| gap: 16px; |
| min-height: 0; |
| margin: 0 auto; |
| padding: 6px 22px; |
| } |
|
|
| .relationship-card { |
| position: relative; |
| min-width: 0 !important; |
| justify-content: flex-start; |
| overflow: hidden; |
| border: 1px solid #8a7956; |
| border-radius: 7px; |
| background: rgba(248, 237, 211, 0.62); |
| box-shadow: 0 5px 14px rgba(59, 49, 30, 0.12); |
| padding: 10px 10px 12px; |
| } |
|
|
| .relationship-card::before { |
| position: absolute; |
| inset: 5px; |
| border: 1px dotted rgba(84, 71, 43, 0.45); |
| border-radius: 4px; |
| content: ""; |
| pointer-events: none; |
| } |
|
|
| .card-corner { |
| position: absolute; |
| z-index: 4; |
| top: 13px; |
| right: 15px; |
| color: var(--gold); |
| } |
|
|
| .card-cat-image { |
| margin: 12px 8px 2px; |
| overflow: hidden; |
| border: 1px solid #8e7e5d !important; |
| border-radius: 4px !important; |
| } |
|
|
| .card-cat-image img { |
| object-fit: cover; |
| } |
|
|
| .quiet-card .card-cat-image img { |
| object-position: 35% center; |
| filter: sepia(0.6) saturate(0.45) contrast(1.15) brightness(0.75); |
| } |
|
|
| .door-card .card-cat-image img { |
| object-position: 63% center; |
| transform: scaleX(-1); |
| filter: sepia(0.34) saturate(0.8) contrast(1.05); |
| } |
|
|
| .lap-card .card-cat-image img { |
| object-position: center; |
| filter: sepia(0.05) hue-rotate(305deg) saturate(1.35) contrast(1.05); |
| } |
|
|
| .relationship-card h3 { |
| margin: 8px 0 3px; |
| font-size: 18px; |
| letter-spacing: 0.12em; |
| text-align: center; |
| } |
|
|
| .relationship-card p { |
| margin: 0; |
| color: var(--muted); |
| font-size: 10px; |
| letter-spacing: 0.1em; |
| text-align: center; |
| } |
|
|
| .deck-actions, |
| .draw-result-row, |
| .matching-actions { |
| width: min(720px, 80%); |
| align-self: center; |
| gap: 14px; |
| } |
|
|
| .draw-result-row { |
| min-height: 66px; |
| } |
|
|
| .drawn-card { |
| width: 100%; |
| border: 1px solid #9d8a64; |
| border-radius: 4px; |
| background: rgba(255, 248, 228, 0.55); |
| padding: 8px 18px; |
| color: var(--muted); |
| text-align: center; |
| } |
|
|
| .drawn-card h3 { |
| margin: 0 0 4px; |
| color: var(--ink); |
| font-size: 16px; |
| } |
|
|
| .drawn-card p { |
| margin: 0; |
| font-size: 11px; |
| } |
|
|
| .question-layout { |
| width: min(1050px, 92%); |
| align-self: center; |
| align-items: center; |
| gap: 42px; |
| padding: 2px 20px 8px; |
| } |
|
|
| .question-cat-panel { |
| position: relative; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .cutout-cat { |
| width: min(440px, 100%); |
| overflow: hidden; |
| border: 1px solid #8a7956 !important; |
| border-radius: 50% 50% 8px 8px !important; |
| background: #d7c49e !important; |
| box-shadow: 10px 11px 0 rgba(67, 57, 37, 0.08) !important; |
| } |
|
|
| .cutout-cat img { |
| object-fit: cover; |
| object-position: 60% center; |
| filter: sepia(0.6) saturate(0.5) contrast(1.25) brightness(0.72); |
| } |
|
|
| .cat-two img { |
| transform: scaleX(-1); |
| filter: sepia(0.45) saturate(0.62) contrast(1.22) brightness(0.78); |
| } |
|
|
| .cat-prop { |
| position: absolute; |
| z-index: 5; |
| right: 8%; |
| bottom: 5%; |
| width: 66px; |
| height: 66px; |
| border: 1px solid #735f39; |
| border-radius: 50%; |
| background: var(--paper-light); |
| color: var(--forest); |
| font-size: 33px; |
| line-height: 66px; |
| text-align: center; |
| transform: rotate(7deg); |
| } |
|
|
| .paw-prop { |
| right: auto; |
| left: 7%; |
| transform: rotate(-7deg); |
| } |
|
|
| .choice-panel { |
| justify-content: center; |
| border: 1px solid #8d7c57; |
| border-radius: 7px; |
| background: rgba(250, 240, 216, 0.58); |
| box-shadow: 8px 9px 0 rgba(73, 62, 39, 0.07); |
| padding: 20px 24px; |
| } |
|
|
| .vintage-radio { |
| border: 0 !important; |
| background: transparent !important; |
| } |
|
|
| .vintage-radio > label { |
| color: var(--muted) !important; |
| font-size: 10px !important; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .vintage-radio .wrap { |
| gap: 9px !important; |
| } |
|
|
| .vintage-radio .wrap > label { |
| min-height: 52px; |
| box-sizing: border-box; |
| border: 1px solid #9a8964; |
| border-radius: 5px; |
| background: rgba(255, 248, 228, 0.62); |
| padding: 13px 16px !important; |
| color: var(--ink) !important; |
| font-size: 14px; |
| letter-spacing: 0.06em; |
| box-shadow: 0 2px 0 rgba(64, 54, 35, 0.1); |
| } |
|
|
| .vintage-radio .wrap > label:has(input:checked) { |
| border-color: var(--forest); |
| background: var(--forest); |
| color: #efe1c1 !important; |
| } |
|
|
| .vintage-radio input { |
| accent-color: var(--forest); |
| } |
|
|
| .nav-actions { |
| gap: 12px; |
| margin-top: 10px; |
| } |
|
|
| .matching-stage { |
| flex: 1; |
| align-items: center; |
| justify-content: center; |
| min-height: 0; |
| } |
|
|
| .matching-visual { |
| position: relative; |
| max-width: 860px; |
| align-items: center; |
| } |
|
|
| .matching-cat { |
| z-index: 2; |
| width: 330px; |
| overflow: hidden; |
| border: 1px solid #806e4a !important; |
| border-radius: 50% 50% 12px 12px !important; |
| background: #d3c09a !important; |
| } |
|
|
| .matching-cat img { |
| object-fit: cover; |
| object-position: 55% center; |
| filter: sepia(0.62) saturate(0.48) contrast(1.28) brightness(0.7); |
| } |
|
|
| .sound-wave { |
| display: flex; |
| width: 100%; |
| height: 70px; |
| align-items: center; |
| justify-content: center; |
| gap: 4px; |
| margin-top: -34px; |
| } |
|
|
| .sound-wave::before, |
| .sound-wave::after { |
| flex: 1; |
| height: 1px; |
| background: var(--line); |
| content: ""; |
| } |
|
|
| .sound-wave span { |
| width: 2px; |
| height: 18px; |
| background: var(--forest); |
| animation: sound 0.9s ease-in-out infinite alternate; |
| } |
|
|
| .sound-wave span:nth-child(3n) { |
| height: 42px; |
| animation-delay: 0.16s; |
| } |
|
|
| .sound-wave span:nth-child(4n) { |
| height: 28px; |
| animation-delay: 0.31s; |
| } |
|
|
| .sound-wave span:nth-child(5n) { |
| height: 55px; |
| animation-delay: 0.47s; |
| } |
|
|
| @keyframes sound { |
| from { |
| transform: scaleY(0.42); |
| opacity: 0.45; |
| } |
|
|
| to { |
| transform: scaleY(1); |
| opacity: 1; |
| } |
| } |
|
|
| .match-metrics { |
| display: grid; |
| width: min(820px, 82%); |
| grid-template-columns: repeat(4, 1fr); |
| align-self: center; |
| margin: 0 auto 8px; |
| border-top: 1px solid rgba(85, 72, 45, 0.42); |
| border-bottom: 1px solid rgba(85, 72, 45, 0.42); |
| } |
|
|
| .match-metrics div { |
| display: grid; |
| place-items: center; |
| padding: 8px 12px; |
| border-right: 1px solid rgba(85, 72, 45, 0.28); |
| } |
|
|
| .match-metrics div:last-child { |
| border-right: 0; |
| } |
|
|
| .match-metrics b { |
| color: var(--forest); |
| font-size: 22px; |
| } |
|
|
| .match-metrics strong { |
| margin-top: 2px; |
| font-size: 11px; |
| letter-spacing: 0.12em; |
| } |
|
|
| .match-metrics span { |
| color: var(--muted); |
| font-size: 9px; |
| } |
|
|
| .matching-actions { |
| width: min(620px, 75%); |
| } |
|
|
| .story-layout { |
| width: min(1080px, 92%); |
| align-self: center; |
| align-items: center; |
| gap: 54px; |
| padding: 5px 24px 10px; |
| } |
|
|
| .polaroid-panel { |
| position: relative; |
| align-items: center; |
| padding: 18px 18px 32px; |
| border: 1px solid #8c7b58; |
| background: #f5e8c9; |
| box-shadow: 12px 14px 0 rgba(57, 48, 30, 0.12); |
| transform: rotate(-2.2deg); |
| } |
|
|
| .paperclip { |
| position: absolute; |
| z-index: 6; |
| top: -21px; |
| left: 17%; |
| color: #75623f; |
| font-size: 55px; |
| transform: rotate(18deg); |
| } |
|
|
| .polaroid-image { |
| width: 100%; |
| overflow: hidden; |
| border: 1px solid #766849 !important; |
| border-radius: 2px !important; |
| } |
|
|
| .polaroid-image img { |
| object-fit: cover; |
| filter: sepia(0.55) saturate(0.58) contrast(1.18) brightness(0.8); |
| } |
|
|
| .story-copy-panel { |
| justify-content: center; |
| } |
|
|
| .story-heading { |
| border-bottom: 1px solid rgba(80, 68, 44, 0.45); |
| } |
|
|
| .story-heading h2, |
| .final-heading h2 { |
| margin: 0 0 10px; |
| color: var(--ink); |
| font-size: clamp(28px, 3.2vw, 46px); |
| line-height: 1.12; |
| letter-spacing: 0.08em; |
| } |
|
|
| .story-profile { |
| max-height: 220px; |
| overflow: auto; |
| color: var(--muted); |
| font-size: 12px; |
| line-height: 1.75; |
| } |
|
|
| .story-profile strong { |
| color: var(--forest); |
| } |
|
|
| .story-traits { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| margin: 6px 0; |
| } |
|
|
| .story-traits span { |
| border: 1px solid #9a8964; |
| border-radius: 3px; |
| background: rgba(255, 248, 228, 0.48); |
| padding: 8px 10px; |
| color: var(--forest); |
| font-size: 11px; |
| } |
|
|
| .final-layout { |
| width: min(1160px, 94%); |
| align-self: center; |
| align-items: center; |
| gap: 42px; |
| padding: 28px 24px 14px; |
| } |
|
|
| .photo-collage { |
| position: relative; |
| justify-content: center; |
| } |
|
|
| .collage-stars { |
| color: var(--gold); |
| font-size: 18px; |
| letter-spacing: 0.8em; |
| text-align: center; |
| } |
|
|
| .collage-row { |
| align-items: center; |
| gap: 0; |
| padding: 8px 0 16px; |
| } |
|
|
| .collage-photo { |
| min-width: 0 !important; |
| overflow: hidden; |
| border: 9px solid #f5e8cb !important; |
| border-bottom-width: 28px !important; |
| border-radius: 2px !important; |
| background: #f5e8cb !important; |
| box-shadow: 5px 7px 12px rgba(54, 45, 28, 0.22) !important; |
| } |
|
|
| .collage-photo img { |
| object-fit: cover; |
| filter: sepia(0.35) saturate(0.75) contrast(1.08); |
| } |
|
|
| .photo-left { |
| transform: rotate(-5deg) translateX(18px); |
| } |
|
|
| .photo-center { |
| z-index: 3; |
| transform: translateY(-10px); |
| } |
|
|
| .photo-right { |
| transform: rotate(5deg) translateX(-18px); |
| } |
|
|
| .final-copy-panel { |
| justify-content: center; |
| padding: 30px 10px; |
| } |
|
|
| .final-heading { |
| margin-top: 10px; |
| } |
|
|
| .final-copy { |
| margin: 4px 0 12px; |
| color: var(--muted); |
| font-size: 13px; |
| line-height: 1.75; |
| } |
|
|
| .cta-button { |
| min-height: 52px !important; |
| font-size: 16px !important; |
| } |
|
|
| @media (max-height: 760px) { |
| .ornament-title { |
| padding-top: 8px; |
| } |
|
|
| .ornament-title h1 { |
| font-size: 28px; |
| } |
|
|
| .relationship-deck { |
| max-height: 235px; |
| } |
|
|
| .question-layout, |
| .story-layout { |
| padding-top: 0; |
| } |
|
|
| .cutout-cat { |
| height: 285px !important; |
| } |
|
|
| .matching-cat { |
| height: 190px !important; |
| } |
|
|
| .collage-photo { |
| height: 265px !important; |
| } |
| } |
|
|
