/* UV Report — marketing site styles. Sun-amber theme (#FA9E17). */ :root { --sun: #FA9E17; --sun-deep: #F2730A; --sky: #2E9BD6; --ink: #1c1a16; --ink-soft: #534d44; --ink-faint: #8a8377; --bg: #fffdfa; --card: #ffffff; --line: #efe7da; --shadow: 0 1px 2px rgba(40,30,10,.05), 0 8px 28px rgba(40,30,10,.07); --radius: 16px; --maxw: 1080px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); } body { margin: 0; font-family: var(--font); color: var(--ink); background: transparent; line-height: 1.6; font-size: 17px; } /* Ambient "bloom" backdrop — two muted, slowly-drifting color clouds fixed behind all content. Additive warmth, not a focal point: very soft, low opacity, long lazy loops. Pure CSS (no markup); the base color lives on so these z-index:-1 layers sit above it but below the page. Frozen for anyone who prefers reduced motion. */ body::before, body::after { content: ""; position: fixed; z-index: -1; border-radius: 50%; filter: blur(72px); pointer-events: none; will-change: transform; } body::before { /* warm amber — upper right */ width: 64vw; height: 64vw; top: -20vw; right: -14vw; background: radial-gradient(circle, rgba(250, 158, 23, .40), transparent 70%); animation: bloom-a 38s ease-in-out infinite alternate; } body::after { /* cool sky — lower left */ width: 60vw; height: 60vw; bottom: -22vw; left: -16vw; background: radial-gradient(circle, rgba(46, 155, 214, .26), transparent 70%); animation: bloom-b 47s ease-in-out infinite alternate; } @keyframes bloom-a { to { transform: translate(-7vw, 7vw) scale(1.18); } } @keyframes bloom-b { to { transform: translate(8vw, -6vw) scale(1.14); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } a { color: var(--sun-deep); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; } h1, h2, h3 { line-height: 1.2; letter-spacing: -.01em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; /* More translucent than a typical bar so the page clearly frosts through as it scrolls underneath; the heavy blur + saturation keeps text legible. */ background: rgba(255, 253, 250, .6); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(40, 30, 10, .07); } /* Graceful fallback where backdrop-filter is unsupported: stay opaque enough to keep the nav readable instead of washing out over scrolled content. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(255, 253, 250, .94); } } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; color: var(--ink); } .logo:hover { text-decoration: none; } .logo svg { width: 30px; height: 30px; } .nav-links { display: flex; align-items: center; gap: 22px; } .nav-links a { color: var(--ink-soft); font-weight: 500; font-size: 16px; } .nav-links a:hover { color: var(--ink); text-decoration: none; } .nav-cta { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff !important; padding: 8px 15px; border-radius: 999px; font-weight: 600; font-size: 15px; } .nav-cta:hover { background: #000; text-decoration: none; } .nav-cta svg { width: 16px; height: 16px; } .nav-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink); } .nav-toggle svg { width: 26px; height: 26px; } /* Hero */ .hero { position: relative; overflow: hidden; /* Translucent base so the ambient bloom drifts through and blends with the hero's own static glow. */ background: radial-gradient(900px 460px at 80% -10%, rgba(250,158,23,.20), transparent 60%), radial-gradient(700px 420px at 5% 0%, rgba(46,155,214,.12), transparent 55%), linear-gradient(180deg, rgba(255,250,240,.5), transparent 78%); border-bottom: 1px solid var(--line); } .hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 72px 22px 64px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero h1 { font-size: clamp(34px, 5vw, 52px); margin: 0 0 18px; } .hero h1 .grad { background: linear-gradient(90deg, var(--sun-deep), var(--sun)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-soft); margin: 0 0 28px; max-width: 38ch; } /* Hero art: the app-preview video is the spotlight (a phone frame), with the animated UV gauge floating over it as an accent. */ .hero-art { position: relative; display: flex; justify-content: center; align-items: center; } /* Device-framed media — a warm-dark iPhone bezel shared by the hero preview video and the "See it in action" screenshots, so both read as a real device. The .screen fixes the 886/1920 aspect; the media fills it with object-fit. */ .device { background: #1c1a16; border-radius: 34px; padding: 9px; box-shadow: 0 22px 50px rgba(40, 30, 10, .22), 0 0 0 1px rgba(255,255,255,.06) inset; } .device .screen { aspect-ratio: 886 / 1920; border-radius: 26px; overflow: hidden; background: #fff8ef; display: block; } .device .screen img, .device .screen video { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; border-radius: inherit; } /* Hero phone: fixed width → height follows the screen ratio. */ .hero-device { width: clamp(198px, 26vw, 232px); } .hero-gauge { position: absolute; left: -4%; bottom: 7%; width: clamp(140px, 17vw, 188px); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 253, 250, .92); box-shadow: 0 14px 34px rgba(40, 30, 10, .18); display: grid; place-items: center; padding: 13px; transform-origin: 50% 50%; } .hero-gauge .gauge { width: 100%; height: 100%; aspect-ratio: 1; } /* Subtle "live gauge" motion — a gentle float of the gauge accent, a one-time arc draw-in on load, and a soft glow pulse on the arc. Disabled for users who prefer reduced motion (the gauge renders in its final resting state). */ @media (prefers-reduced-motion: no-preference) { .hero-gauge { animation: gauge-float 7s ease-in-out infinite; } .gauge-arc { animation: gauge-draw 1.7s cubic-bezier(.22,.61,.36,1) both, gauge-glow 3.6s ease-in-out 1.6s infinite; } } @keyframes gauge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes gauge-draw { from { stroke-dashoffset: 515; } to { stroke-dashoffset: 150; } } @keyframes gauge-glow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(250, 158, 23, .18)); } 50% { filter: drop-shadow(0 0 11px rgba(242, 115, 10, .55)); } } .badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .app-store-badge { display: inline-block; line-height: 0; transition: opacity .15s; } .app-store-badge:hover { opacity: .85; text-decoration: none; } .app-store-badge img { height: 54px; width: auto; display: block; } .app-store-badge .badge-dark { display: none; } @media (prefers-color-scheme: dark) { .app-store-badge .badge-light { display: none; } .app-store-badge .badge-dark { display: block; } } .pill { font-size: 13px; font-weight: 600; color: var(--sun-deep); background: rgba(250,158,23,.12); border: 1px solid rgba(250,158,23,.28); padding: 5px 12px; border-radius: 999px; } /* Sections */ section.block { padding: 64px 0; } section.block.alt { background: rgba(255,248,239,.55); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; } .section-head h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 12px; } .section-head p { color: var(--ink-soft); margin: 0; font-size: 18px; } .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); } .feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--sun), var(--sun-deep)); color: #fff; margin-bottom: 16px; } .feature .ic svg { width: 24px; height: 24px; } .feature h3 { font-size: 19px; margin: 0 0 8px; } .feature p { margin: 0; color: var(--ink-soft); font-size: 16px; } /* FAQ */ .faq { max-width: 760px; margin: 0 auto; } .faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--shadow); } .faq summary { cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none; font-size: 17px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; float: right; color: var(--sun-deep); font-weight: 400; font-size: 22px; line-height: 1; } .faq details[open] summary::after { content: "\2013"; } .faq details p { margin: 0 0 16px; color: var(--ink-soft); } /* "See it in action" — three device-framed screenshots in a row. Each child is a .device (styled above); the grid column sets its width. */ .shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 720px; margin: 0 auto; } .placeholder { position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(160deg, #fff3df, #ffe1b0); border: 1px dashed rgba(242,115,10,.45); color: var(--sun-deep); box-shadow: var(--shadow); } .placeholder::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-100%); animation: shimmer 2.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } .ph-label { position: relative; font-size: 13px; font-weight: 600; opacity: .85; padding: 0 10px; text-align: center; } .play { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--sun-deep); box-shadow: 0 6px 18px rgba(242,115,10,.4); } .play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%,-50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; } /* CTA strip */ .cta-strip { text-align: center; padding: 60px 22px; background: linear-gradient(135deg, var(--sun), var(--sun-deep)); color: #fff; } .cta-strip h2 { font-size: clamp(26px, 3.4vw, 34px); margin: 0 0 10px; } .cta-strip p { margin: 0 0 26px; opacity: .95; font-size: 18px; } .cta-strip .badges { justify-content: center; } /* Legal + support pages */ .legal-page { padding: 52px 0 72px; } .legal-content { max-width: 760px; margin: 0 auto; padding: 0 22px; } .legal-content h1 { font-size: 34px; margin: 0 0 8px; } .legal-content h2 { font-size: 23px; margin: 36px 0 12px; } .legal-content h3 { font-size: 18px; margin: 26px 0 8px; } .legal-content p, .legal-content li { color: var(--ink-soft); } .legal-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; } .legal-content code { background: #f4ede0; padding: 1px 6px; border-radius: 5px; font-size: .9em; } .support-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 28px 0; } .support-cards .feature { text-align: left; } /* Footer */ .site-footer { border-top: 1px solid var(--line); background: rgba(255,248,239,.6); padding: 36px 0; } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; } .footer-links a { color: var(--ink-soft); font-size: 15px; } .footer-aside { color: var(--ink-soft); font-size: 14px; max-width: 56ch; margin: 0; } .footer-copy { color: var(--ink-faint); font-size: 14px; } /* Responsive */ @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; text-align: center; padding-top: 48px; } .hero p.lede { margin-left: auto; margin-right: auto; } .badges { justify-content: center; } .hero-art { order: -1; } .features { grid-template-columns: 1fr; } /* One legible device at a time instead of three cramped ones. */ .shots { grid-template-columns: 1fr; max-width: 260px; gap: 28px; } .support-cards { grid-template-columns: 1fr; } .nav-links { display: none; } .nav-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 18px 22px; } }