/* ═══════════════════════════════════════════════════════ "ALIVE" LAYER — gentle warmth + life for VertiGoes. IMPORTANT: the audience is vestibular / motion-sensitive. Every animation here is intentionally small (fade + ≤18px) and is automatically disabled by `.safe-view` and by `prefers-reduced-motion` (see global.css). No spinning, no parallax, no continuous background motion. Loaded LAST so the hero-blob colour tweaks win. ═══════════════════════════════════════════════════════ */ /* ── Friendly, clearly-visible colour wash across the hero ── A soft multi-colour mesh (teal + gold + green) baked into the element background, so it shows for EVERYONE — including safe-view / reduced-motion users. Static = zero motion risk. */ .hero-wrap { background: radial-gradient(58% 52% at 10% 0%, rgba(74,144,168,.18) 0%, transparent 60%), radial-gradient(52% 48% at 94% 8%, rgba(255,206,0,.16) 0%, transparent 60%), radial-gradient(60% 58% at 82% 100%, rgba(123,198,126,.16) 0%, transparent 62%), linear-gradient(180deg, #FFFFFF 0%, var(--warm-50) 100%); } .hero-wrap::before { width: 680px; height: 680px; top: -220px; inset-inline-start: -160px; background: radial-gradient(circle, rgba(74,144,168,.16) 0%, transparent 66%); } .hero-wrap::after { width: 580px; height: 580px; background: radial-gradient(circle, rgba(255,206,0,.15) 0%, transparent 66%); } /* ── Friendlier hero controls (colour, not motion) ── */ .hero-badge { background: #FFFFFF; box-shadow: 0 4px 14px rgba(74,144,168,.14); } .hero-chips .chip { background: #FFFFFF; color: var(--orange); box-shadow: 0 3px 10px rgba(45,44,43,.06); } .hero-search .search-btn { background: linear-gradient(135deg, #4A90A8 0%, #5BA9C4 100%); box-shadow: 0 6px 18px rgba(74,144,168,.30); } /* Site-wide: give primary buttons a soft branded glow so CTAs feel alive */ .btn-primary { box-shadow: 0 6px 18px rgba(74,144,168,.22); } /* ── Centre the homepage hero ── The redesign made it a two-column grid with a side photo, which in RTL pushed the text to the right. Back to a single, centred column, and drop the side photo. (alive.css loads last, so these win without !important.) */ .hero { display: block; max-width: 760px; text-align: center; } .hero-media { display: none; } .hero p { margin-inline: auto; } .hero-search { margin-inline: auto; } .hero-cta { justify-content: center; } .hero-chips { justify-content: center; } /* ── Mobile header: stop the "VertiGoes" brand from being squeezed/truncated ── On narrow screens the safe-view toggle shows as an icon only (its label moves out of the way), freeing room for the brand. */ @media (max-width: 600px) { .nav-inner { gap: 10px; } .safe-toggle { padding-inline: 9px; } .safe-toggle .safe-label-off, .safe-toggle .safe-label-on { display: none !important; } } /* ── One-time, staggered entrance for the hero (on load) ── `both` fill-mode means safe-view (duration:0) jumps straight to the final, fully-visible state — never stuck hidden. */ @keyframes vgRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .hero-badge { animation: vgRise .7s var(--ease) both; } .hero h1 { animation: vgRise .7s var(--ease) .06s both; } .hero p { animation: vgRise .7s var(--ease) .12s both; } .hero-search { animation: vgRise .7s var(--ease) .18s both; } .hero-chips { animation: vgRise .7s var(--ease) .24s both; } /* ── Scroll-reveal for content below the fold ── Only active when alive.js adds `.vg-reveal` to , which it does ONLY when motion is allowed. So if JS is off, or the user is in safe-view / reduced-motion, content is shown normally, never hidden. */ html.vg-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .65s var(--ease), transform .65s var(--ease); will-change: opacity, transform; } html.vg-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* Gentle stagger within common groups */ html.vg-reveal .grid-3 > [data-reveal]:nth-child(2), html.vg-reveal .start-here-grid > [data-reveal]:nth-child(2), html.vg-reveal .qa-list > [data-reveal]:nth-child(2) { transition-delay: .07s; } html.vg-reveal .grid-3 > [data-reveal]:nth-child(3), html.vg-reveal .start-here-grid > [data-reveal]:nth-child(3), html.vg-reveal .qa-list > [data-reveal]:nth-child(3) { transition-delay: .14s; } html.vg-reveal .start-here-grid > [data-reveal]:nth-child(4), html.vg-reveal .qa-list > [data-reveal]:nth-child(4) { transition-delay: .21s; } /* ── Friendly colour accents on the "Start Here" cards ── A slim coloured bar at the top of each card, themed per path. Pure colour — adds warmth + visual hierarchy, no motion. */ .start-here-grid .start-card { position: relative; overflow: hidden; } .start-here-grid .start-card::after { content: ''; position: absolute; top: 0; inset-inline: 0; height: 5px; background: var(--orange); border-radius: 0; } .start-here-grid .start-card:nth-child(1)::after { background: var(--orange); } .start-here-grid .start-card:nth-child(2)::after { background: var(--green); } .start-here-grid .start-card:nth-child(3)::after { background: #D98695; } .start-here-grid .start-card:nth-child(4)::after { background: var(--blue-dark); } /* ── A touch more life on hover (still tiny, still safe-view-gated) ── */ html:not(.safe-view) .qa-item-link { transition: box-shadow .25s var(--ease), transform .25s var(--ease); } html:not(.safe-view) .qa-item-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } html:not(.safe-view) .qa-source-link { transition: color .2s var(--ease), border-color .2s var(--ease); } /* Q&A question cards: soft brand-tinted left edge for a more "designed" feel */ .qa-item-link { border-inline-start: 3px solid var(--orange-light); }