/* ========================================================================== Landing page: "Campfire for human connection". Tokens come from theme.css; motion is driven by CSS transforms/opacity plus a few small canvases in landing.js (all paused off-screen). Everything is readable with animations off: hidden-until-revealed states only apply when landing.js has added .motion to . ========================================================================== */ body.landing { background: var(--bg); } .skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: 200; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-input); background: var(--ember); color: var(--text-on-accent); font-weight: 700; text-decoration: none; } .skip-link:focus { top: var(--space-2); } /* -------------------------------------------------------------------------- Navbar: transparent over the hero, solid once you scroll -------------------------------------------------------------------------- */ .landing-nav { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .landing-nav.scrolled { background: var(--overlay); border-bottom-color: var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .flame-mark { width: 30px; height: 36px; filter: drop-shadow(0 0 8px var(--fire-light)); } .nav-logo .flame-mark + span { font-weight: 800; letter-spacing: 0.06em; } .nav-links { display: flex; gap: var(--space-6); } .landing-nav .nav-logo { min-width: var(--tap); min-height: var(--tap); } .nav-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-muted); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; transition: color var(--dur-fast); } .nav-links a:hover { color: var(--text); } /* -------------------------------------------------------------------------- Shared section pieces -------------------------------------------------------------------------- */ .section { max-width: var(--content-max); margin: 0 auto; padding: var(--space-section) var(--space-6); } .section-head { max-width: 720px; margin: 0 auto var(--space-12); text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); color: var(--ember-text); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .section h2, .final-cta h2 { font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; } .section-lead { margin-top: var(--space-4); color: var(--text-muted); font-size: 18px; line-height: 1.65; } .warm { color: var(--ember-text); } /* Reveal on scroll (only when motion is on) */ .motion [data-reveal] { opacity: 0; transform: translateY(28px) scale(0.98); transition: opacity var(--dur-cinematic) var(--ease), transform var(--dur-cinematic) var(--ease); transition-delay: var(--reveal-delay, 0ms); } .motion [data-reveal].is-visible { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: calc(var(--nav-h) + var(--space-8)) var(--space-6) var(--space-12); background: radial-gradient(ellipse 70% 60% at 72% 62%, var(--fire-light), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 100%, var(--fire-light-far), transparent 70%), var(--night); } /* The night fades into the page instead of ending in a hard edge */ .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; } .hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); width: 100%; max-width: var(--content-max); margin: 0 auto; } /* The hero plays its entrance with CSS alone, so it never waits for scripts to load */ .hero-copy > * { animation: rise-in var(--dur-cinematic) var(--ease) both; } .hero-copy > :nth-child(2) { animation-delay: 90ms; } .hero-copy > :nth-child(3) { animation-delay: 180ms; } .hero-copy > :nth-child(4) { animation-delay: 270ms; } .hero-copy > :nth-child(5) { animation-delay: 360ms; } .hero-scene { animation: scene-in 1500ms var(--ease) 150ms both; } @keyframes rise-in { from { opacity: 0; transform: translateY(22px); } } @keyframes scene-in { from { opacity: 0; transform: scale(0.94); } } .hero-copy h1 { font-size: clamp(40px, 5.6vw, 64px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; } .hero-lead { max-width: 520px; margin: var(--space-6) 0 var(--space-8); color: var(--text-muted); font-size: 18px; line-height: 1.65; } .signin-card { max-width: 440px; padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); } .google-btn { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-3); border: 1px solid var(--ember); border-radius: var(--radius-pill); background: var(--ember); color: var(--text-on-accent); font-weight: 700; font-size: var(--fs-md); box-shadow: 0 8px 28px var(--fire-light); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast), box-shadow var(--dur) var(--ease); } .google-btn:not(:disabled):hover { background: var(--ember-hover); transform: translateY(-2px); box-shadow: 0 14px 36px var(--fire-light); } .google-btn:not(:disabled):active { transform: scale(0.98); } .google-btn:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; } .google-btn img { width: 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--piece-white); } /* The sign-in card glows briefly when the final CTA brings you back here */ .signin-card.nudge { animation: nudge 1.4s var(--ease); } @keyframes nudge { 30% { box-shadow: 0 0 0 4px var(--ember-soft), 0 0 48px var(--fire-light); } } .custom-checkbox { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); cursor: pointer; color: var(--text-muted); font-size: var(--fs-sm); user-select: none; } .custom-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; } .checkmark { position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); transition: background-color var(--dur-fast), border-color var(--dur-fast); } .custom-checkbox:hover .checkmark { border-color: var(--text-muted); } .custom-checkbox input:checked ~ .checkmark { background: var(--ember); border-color: var(--ember); } .custom-checkbox input:focus-visible ~ .checkmark { outline: 2px solid var(--ember); outline-offset: 2px; } .checkmark::after { content: ''; position: absolute; display: none; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--text-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); } .custom-checkbox input:checked ~ .checkmark::after { display: block; } .custom-checkbox a { font-weight: 600; } .error-msg { display: none; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-input); background: var(--rose-soft); color: var(--rose-text); font-size: var(--fs-sm); } .hero-proof { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); } .hero-proof i { color: var(--ember-text); margin-right: var(--space-1); } /* The campfire scene */ .hero-scene { position: relative; height: min(620px, 70vh); min-height: 460px; } .hero-scene > * { will-change: transform; } .fire-light { position: absolute; left: 50%; top: 64%; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; background: radial-gradient(circle, var(--fire-light) 0%, var(--fire-light-far) 45%, transparent 70%); animation: breathe 4.5s ease-in-out infinite; } @keyframes breathe { 50% { opacity: 0.75; scale: 0.94; } } .embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .campfire { position: absolute; left: 50%; top: 66%; width: 180px; margin-left: -90px; margin-top: -150px; } .campfire-flame { display: block; width: 150px; height: 188px; margin: 0 auto -26px; transform-origin: 50% 100%; filter: drop-shadow(0 0 24px var(--fire-light)) drop-shadow(0 0 60px var(--fire-light)); animation: flicker 2.6s ease-in-out infinite; } .campfire-logs { display: block; width: 180px; } .float-card { position: absolute; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); } /* Floating video-call card */ .call-mock { right: 0; top: 2%; width: 236px; padding: var(--space-3); animation: bob 6s ease-in-out infinite; } @keyframes bob { 50% { translate: 0 -10px; } } .call-tiles { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2); } .call-tile { position: relative; height: 118px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); overflow: hidden; } .call-tile.them { background: radial-gradient(circle at 50% 40%, var(--ember-soft), var(--surface-2) 70%); } .avatar-bubble { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ember); color: var(--text-on-accent); font-weight: 800; font-size: var(--fs-sm); } .me .avatar-bubble { width: 38px; height: 38px; background: var(--sky); color: var(--text-on-accent); font-size: var(--fs-xs); } .voice-bars { position: absolute; bottom: 22px; display: flex; align-items: flex-end; gap: 3px; height: 14px; } .voice-bars i, .wave i { display: block; width: 3px; border-radius: 2px; background: var(--ember); animation: talk 1.1s ease-in-out infinite; } .voice-bars i:nth-child(2), .wave i:nth-child(2n) { animation-delay: -0.3s; } .voice-bars i:nth-child(3), .wave i:nth-child(3n) { animation-delay: -0.6s; } .voice-bars i:nth-child(4), .wave i:nth-child(5) { animation-delay: -0.9s; } @keyframes talk { 0%, 100% { height: 4px; } 50% { height: 14px; } } .tile-label { position: absolute; left: 8px; bottom: 6px; color: var(--text-muted); font-size: 11px; font-weight: 600; } .call-controls-mini { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } .call-controls-mini span { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 12px; } .call-controls-mini .accent { background: var(--ember); color: var(--text-on-accent); } /* Floating chips */ .chip-mock { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .chip-interest { left: 0; top: 2%; animation: bob 7s ease-in-out -2s infinite; } .chip-interest i { color: var(--rose-text); } .chip-streak { left: 0; bottom: 4%; color: var(--glow-text); animation: bob 5.5s ease-in-out -1s infinite; } .chip-connect { right: 0; bottom: 8%; animation: bob 6.5s ease-in-out -3s infinite; } .chip-connect i { color: var(--mint-text); } .scroll-cue { position: absolute; left: 50%; bottom: var(--space-6); z-index: 1; width: var(--tap); height: var(--tap); margin-left: calc(var(--tap) / -2); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); animation: cue 2.4s ease-in-out infinite; } @keyframes cue { 50% { transform: translateY(6px); opacity: 0.6; } } /* -------------------------------------------------------------------------- Connection network -------------------------------------------------------------------------- */ .network-stage { position: relative; height: 420px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--fire-light), transparent 55%), var(--night); border: 1px solid var(--border); } .network { position: absolute; inset: 0; width: 100%; height: 100%; } .network-flame { position: absolute; left: 50%; top: 50%; width: 72px; height: 90px; margin: -52px 0 0 -36px; transform-origin: 50% 100%; filter: drop-shadow(0 0 22px var(--fire-light)); animation: flicker 2.8s ease-in-out infinite; } .steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); } .steps li { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); } .steps li:nth-child(2) { --reveal-delay: 120ms; } .steps li:nth-child(3) { --reveal-delay: 240ms; } .step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-bottom: var(--space-3); border-radius: 50%; background: var(--ember-soft); color: var(--ember-text); font-weight: 800; } .steps h3, .feature-row h3, .safety-card h3, .game-card h3 { font-size: var(--fs-lg); margin-bottom: var(--space-1); } .steps p, .feature-row p, .safety-card p, .game-card p { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.55; } /* -------------------------------------------------------------------------- Split sections (chat story, friendship clock) -------------------------------------------------------------------------- */ .split-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); } .tick-list { list-style: none; display: grid; gap: var(--space-3); margin-top: var(--space-6); } .tick-list li { position: relative; padding-left: var(--space-8); font-weight: 500; } .tick-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--mint-soft); } .tick-list li::after { content: ''; position: absolute; left: 6px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--mint-text); border-bottom: 2px solid var(--mint-text); transform: rotate(-45deg); } /* Phone with the chat story */ .phone { justify-self: center; width: min(360px, 100%); border-radius: 36px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2), 0 0 80px var(--fire-light-far); } .phone-top { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--border); } .phone-title { display: block; font-weight: 700; } .phone-sub { color: var(--text-muted); font-size: var(--fs-xs); } .chat-story { position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-height: 380px; padding: var(--space-4) var(--space-3); } .story-msg { max-width: 82%; padding: var(--space-2) var(--space-3); border-radius: 16px; font-size: var(--fs-sm); line-height: 1.45; } .story-msg.them { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: var(--space-1); } .story-msg.me { align-self: flex-end; background: var(--ember-soft); border-bottom-right-radius: var(--space-1); } .story-msg.system { align-self: center; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--glow-soft); font-size: var(--fs-xs); } .story-msg.icebreaker { align-self: stretch; max-width: none; border-left: 3px solid var(--glow); background: var(--surface-2); } .story-msg.icebreaker b { display: block; color: var(--glow-text); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } /* The story plays message by message (landing.js toggles .shown) */ .motion .chat-story .story-msg, .motion .chat-story .typing { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 420ms var(--ease), transform 420ms var(--ease); } .motion .chat-story .shown { opacity: 1; transform: none; } .typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: var(--space-3); border-radius: 16px; background: var(--surface-2); } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: typing-dot 1.2s ease-in-out infinite; } .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; } /* With motion, "typing…" floats in the slot of the message that's about to arrive */ .motion .chat-story .typing { position: absolute; left: var(--space-3); top: 0; } @keyframes typing-dot { 30% { transform: translateY(-4px); opacity: 0.6; } } .phone-input { display: flex; align-items: center; justify-content: space-between; margin: 0 var(--space-2) var(--space-2); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm); } .phone-input .send { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ember); color: var(--text-on-accent); } /* -------------------------------------------------------------------------- Video call: a small card that grows into a full call as it scrolls in -------------------------------------------------------------------------- */ .call-stage { display: flex; justify-content: center; perspective: 1200px; } .big-call { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-2), 0 0 120px var(--fire-light-far); } .motion .big-call { transform: scale(0.55) translateY(40px); opacity: 0.4; transition: transform var(--dur-cinematic) var(--ease), opacity var(--dur-cinematic) var(--ease); } .motion .call-stage.expanded .big-call { transform: none; opacity: 1; } .big-tile.them { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: radial-gradient(circle at 50% 42%, var(--ember-soft), transparent 60%); } .big-avatar { display: flex; align-items: center; justify-content: center; width: clamp(72px, 12vw, 120px); height: clamp(72px, 12vw, 120px); border-radius: 50%; background: var(--ember); color: var(--text-on-accent); font-size: clamp(28px, 4vw, 44px); font-weight: 800; box-shadow: 0 0 0 10px var(--ember-soft), 0 0 60px var(--fire-light); } .wave { display: flex; align-items: flex-end; gap: 4px; height: 18px; } .wave i { width: 4px; } .big-tile-note { color: var(--text-muted); font-size: var(--fs-sm); } .big-tile.me { position: absolute; right: 3%; top: 5%; width: 18%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); font-weight: 700; font-size: var(--fs-sm); } .big-caption { position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%); padding: var(--space-1) var(--space-3); border-radius: 8px; background: var(--media-scrim); color: var(--text-on-media); font-size: var(--fs-sm); white-space: nowrap; } .big-controls { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-pill); background: var(--overlay); border: 1px solid var(--border); } .big-controls span { min-width: 44px; height: 44px; padding: 0 var(--space-3); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; } .big-controls .accent { background: var(--ember); color: var(--text-on-accent); } .big-controls .end { background: var(--rose); color: var(--text-on-danger); } /* Controls arrive one after another once the call has expanded */ .motion .big-controls span { opacity: 0; transform: translateY(14px); transition: opacity 360ms var(--ease), transform 360ms var(--ease); transition-delay: calc(700ms + var(--i) * 90ms); } .motion .call-stage.expanded .big-controls span { opacity: 1; transform: none; } .feature-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); } .feature-row li { text-align: center; } .feature-row li:nth-child(2) { --reveal-delay: 120ms; } .feature-row li:nth-child(3) { --reveal-delay: 240ms; } .feature-row i { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: var(--space-3); border-radius: 16px; background: var(--ember-soft); color: var(--ember-text); font-size: var(--fs-lg); } /* -------------------------------------------------------------------------- Games: each card plays a tiny demo on hover or keyboard focus; on touch screens landing.js adds .play as the card scrolls into view. Without motion the art simply shows its starting position. -------------------------------------------------------------------------- */ .games-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .game-card { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); outline-offset: 4px; } .game-card:is(:hover, :focus-visible, .play) { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember-soft), 0 16px 40px var(--fire-light-far); } .games-grid .game-card:nth-child(3n + 2) { --reveal-delay: 100ms; } .games-grid .game-card:nth-child(3n) { --reveal-delay: 200ms; } .game-art { position: relative; height: 110px; margin-bottom: var(--space-4); border-radius: 14px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Chess: the knight jumps two up, one across */ .mini-board { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); border-radius: 6px; overflow: hidden; } .mini-board i:nth-child(odd) { background: var(--art-light); } .mini-board i:nth-child(even) { background: var(--art-dark); } .knight { position: absolute; left: calc(50% - 39px); top: calc(50% + 13px); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--piece-black); font-size: 22px; line-height: 1; transition: transform 650ms var(--ease); } .g-chess:is(:hover, :focus-visible, .play) .knight { animation: knight-jump 650ms var(--ease) both; transform: translate(26px, -52px); } @keyframes knight-jump { 0% { transform: translate(0, 0); } 55% { transform: translate(10px, -46px) scale(1.25); } 100% { transform: translate(26px, -52px); } } /* Tic-Tac-Toe: the X draws itself in the middle */ .g-ttt svg { width: 90px; height: 90px; } .g-ttt .grid { stroke: var(--border); stroke-width: 3; stroke-linecap: round; } .g-ttt .x, .g-ttt .o { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; } .g-ttt .x { stroke: var(--ember); stroke-dashoffset: 1; transition: stroke-dashoffset 500ms var(--ease); } .g-ttt .o { stroke: var(--sky); stroke-dashoffset: 0; } .g-ttt:is(:hover, :focus-visible, .play) .x { stroke-dashoffset: 0; } /* Draw & Guess: the brush paints the stroke again */ .g-draw .game-art { background: var(--art-light); } .g-draw svg { width: 120px; height: 70px; } .g-draw .stroke { fill: none; stroke: var(--ember); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } /* The brush tip rests where the stroke ends (110, 18 in the drawing) */ .brush { position: absolute; left: calc(50% + 50px); top: calc(50% - 33px); color: var(--art-ink); } .g-draw:is(:hover, :focus-visible, .play) .stroke { animation: paint 900ms var(--ease) both; } .g-draw:is(:hover, :focus-visible, .play) .brush { animation: brush-trace 900ms var(--ease) both; } @keyframes paint { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes brush-trace { 0% { transform: translate(-100px, 32px); } 35% { transform: translate(-62px, -14px); } 65% { transform: translate(-44px, 10px); } 100% { transform: translate(0, 0); } } /* Ludo: the token hops two squares */ .ludo-track { display: flex; gap: 4px; } .ludo-track i { width: 24px; height: 24px; border-radius: 6px; background: var(--piece-white); border: 1px solid var(--border); } .ludo-track i:first-child { background: var(--art-red); } .token { position: absolute; left: calc(50% - 65px); width: 18px; height: 18px; border-radius: 50%; background: var(--art-red); border: 2px solid var(--piece-white); box-shadow: var(--shadow-1); } .g-ludo:is(:hover, :focus-visible, .play) .token { animation: hop 700ms var(--ease) forwards; } @keyframes hop { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, -14px); } 50% { transform: translate(28px, 0); } 75% { transform: translate(42px, -14px); } 100% { transform: translate(56px, 0); } } /* Truth or Dare: the card flips */ .g-tod .game-art { perspective: 600px; } .flip-card { position: relative; width: 110px; height: 70px; transform-style: preserve-3d; transition: transform 700ms var(--ease); } .flip-card span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-weight: 800; backface-visibility: hidden; } .flip-card .front { background: var(--sky-soft); border: 1px solid var(--sky); color: var(--sky-text); } .flip-card .back { background: var(--ember-soft); border: 1px solid var(--ember); color: var(--ember-text); transform: rotateY(180deg); } .g-tod:is(:hover, :focus-visible, .play) .flip-card { transform: rotateY(180deg); } /* Snakes & Ladders: a token climbs the ladder */ .g-snakes svg { width: 90px; height: 70px; } .g-snakes .rail, .g-snakes .rung { stroke: var(--art-ladder); stroke-width: 3; stroke-linecap: round; } .climber { position: absolute; left: calc(50% - 20px); bottom: 19px; width: 14px; height: 14px; border-radius: 50%; background: var(--gm-mine); border: 2px solid var(--piece-white); transition: transform 800ms var(--ease); } .g-snakes:is(:hover, :focus-visible, .play) .climber { transform: translate(26px, -56px); } /* -------------------------------------------------------------------------- Friendship Clock -------------------------------------------------------------------------- */ .clock-visual { position: relative; justify-self: center; width: min(340px, 80vw); aspect-ratio: 1; } .clock-ring { width: 100%; height: 100%; transform: rotate(-90deg); } .clock-ring circle { fill: none; stroke-width: 12; } .clock-ring .track { stroke: var(--surface-2); } .clock-ring .progress { stroke: var(--glow); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--clock-offset, 40); filter: drop-shadow(0 0 10px var(--glow-soft)); transition: stroke-dashoffset 400ms var(--ease); } .clock-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .clock-hours { font-size: 64px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .clock-unit { color: var(--text-muted); font-size: var(--fs-sm); } .clock-level { margin-top: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--glow-soft); color: var(--glow-text); font-weight: 700; font-size: var(--fs-sm); } /* Milestone reached: a warm halo swells behind the ring and fades (opacity and scale only) */ .clock-visual::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, transparent 52%, var(--glow-soft) 62%, transparent 72%); opacity: 0; pointer-events: none; } .clock-visual.celebrate::before { animation: halo 900ms var(--ease); } @keyframes halo { 0% { opacity: 0; transform: scale(0.92); } 40% { opacity: 1; transform: scale(1.04); } 100% { opacity: 0; transform: scale(1.08); } } .milestones { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-6); } .milestones li { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--surface); border: 1px solid var(--border); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .milestones span { color: var(--text-muted); font-size: var(--fs-sm); } .milestones li.reached { border-color: var(--glow); background: var(--glow-soft); } .milestones li.reached b::after { content: ' ✓'; color: var(--glow-text); } .milestones li.just-reached { box-shadow: 0 0 0 3px var(--glow-soft), 0 0 30px var(--glow-soft); } /* -------------------------------------------------------------------------- Safety -------------------------------------------------------------------------- */ .safety-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .safety-card { padding: var(--space-6); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--border); } .safety-card:nth-child(2) { --reveal-delay: 80ms; } .safety-card:nth-child(3) { --reveal-delay: 160ms; } .safety-card:nth-child(4) { --reveal-delay: 240ms; } .safety-card i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--space-3); border-radius: 14px; background: var(--mint-soft); color: var(--mint-text); } /* -------------------------------------------------------------------------- Final CTA: particles converge on the flame -------------------------------------------------------------------------- */ .final-cta { position: relative; overflow: hidden; padding: 140px var(--space-6); text-align: center; background: radial-gradient(circle at 50% 45%, var(--fire-light), transparent 50%), var(--night); } .converge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .final-inner { position: relative; max-width: 640px; margin: 0 auto; } .final-flame { width: 90px; height: 112px; margin-bottom: var(--space-4); transform-origin: 50% 100%; filter: drop-shadow(0 0 26px var(--fire-light)) drop-shadow(0 0 70px var(--fire-light)); animation: flicker 2.4s ease-in-out infinite; } .final-cta p { margin: var(--space-4) auto var(--space-8); color: var(--text-muted); font-size: 18px; } .connect-btn.big { min-height: 56px; padding: 0 var(--space-8); font-size: var(--fs-md); box-shadow: 0 10px 34px var(--fire-light); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { padding: var(--space-12) var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--fs-sm); border-top: 1px solid var(--border); } .footer-links { display: flex; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-3); } .footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2); color: var(--text-muted); font-weight: 600; text-decoration: none; } .footer-links a:hover { color: var(--text); } .social-links { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); } .social-links a { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text-muted); font-size: var(--fs-lg); } .social-links a:hover { color: var(--text); } /* -------------------------------------------------------------------------- Tablets and phones: simpler and lighter -------------------------------------------------------------------------- */ @media (max-width: 960px) { .hero-inner, .split-section { grid-template-columns: 1fr; gap: var(--space-8); } .hero { min-height: 0; } .hero-copy { text-align: center; } .hero-lead, .signin-card { margin-left: auto; margin-right: auto; } .signin-card { text-align: left; } .hero-proof { justify-content: center; } .hero-scene { height: 380px; min-height: 0; } .scroll-cue, .nav-links { display: none; } .steps, .feature-row, .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clock-section .clock-visual { order: 2; } } /* Small tablets and phones: one calm fire and two chips (the video section shows the call) */ @media (max-width: 760px) { .hero-scene { height: 300px; } .call-mock, .chip-streak { display: none; } .fire-light, .campfire { top: 50%; } .campfire { margin-top: -111px; scale: 0.8; } .chip-interest { top: 0; } .chip-connect { bottom: 0; } } @media (max-width: 600px) { .section { padding-left: var(--space-4); padding-right: var(--space-4); } .hero { padding-left: var(--space-4); padding-right: var(--space-4); } .hero-copy h1 { font-size: clamp(36px, 10vw, 44px); } .hero-lead, .section-lead { font-size: var(--fs-md); } .network-stage { height: 300px; } .steps, .feature-row, .games-grid, .safety-grid { grid-template-columns: 1fr; } .big-call { aspect-ratio: 3 / 4; } .big-caption { bottom: 88px; white-space: normal; width: 80%; text-align: center; } .big-controls .accent { font-size: 0; gap: 0; } .big-controls .accent i { font-size: var(--fs-sm); } .big-tile.me { width: 28%; } .instructions-btn span { display: none; } .final-cta { padding: 96px var(--space-4); } } /* -------------------------------------------------------------------------- Reduced motion: everything visible and still -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .campfire-flame, .network-flame, .final-flame, .fire-light, .float-card, .scroll-cue, .voice-bars i, .wave i, .typing i { animation: none; } }