/* Surf Forecast Menubar — shared styles Used in conjunction with the Tailwind v3 Play CDN (see ). Brand tokens are duplicated here as CSS variables so the styles keep working even if Tailwind fails to load. */ :root { --deep-blue: #1a4d7a; --sky-blue: #4fb3d8; --turquoise: #6ed3cf; --sand: #f4d19b; --sunset: #f9a26c; --ink: #0f172a; --slate: #334155; --muted: #64748b; --line: #e2e8f0; --white: #ffffff; --light-gray: #f8fafc; --nav-height: 72px; } /* ---------- Typography ---------- */ html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; } .font-display { font-family: 'Montserrat', 'Inter', ui-sans-serif, system-ui, sans-serif; } /* ---------- Background & gradients ---------- */ .gradient { background: radial-gradient(1200px 600px at 85% 0%, rgba(249, 162, 108, 0.22), transparent 60%), radial-gradient(900px 500px at 10% 90%, rgba(244, 209, 155, 0.18), transparent 60%), linear-gradient(160deg, #0f3a5f 0%, var(--deep-blue) 28%, var(--sky-blue) 65%, var(--turquoise) 100%); } .gradient-text { background: linear-gradient(135deg, var(--deep-blue), var(--sky-blue) 60%, var(--turquoise)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Navigation ---------- */ .nav-shell { transition: background-color 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease; } .nav-shell.is-scrolled { background-color: rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06), 0 8px 24px -16px rgba(15, 23, 42, 0.2); } /* Nav text color follows the scroll state. Default (transparent over hero gradient) = white. Scrolled (glass background over white sections) = ink. */ .nav-shell .nav-link, .nav-shell .brand-text, .nav-shell .nav-icon { color: #ffffff; transition: color 0.2s ease; } .nav-shell.is-scrolled .nav-link, .nav-shell.is-scrolled .brand-text, .nav-shell.is-scrolled .nav-icon { color: var(--ink); } /* On mobile (when menu is expanded over white sheet), keep links readable */ @media (max-width: 1023.98px) { .nav-shell .nav-link { color: var(--ink); } } .nav-link { position: relative; transition: color 0.2s ease; } .nav-link::after { content: ''; position: absolute; left: 50%; bottom: 0.25rem; height: 2px; width: 0; background-color: currentColor; transition: width 0.25s ease, left 0.25s ease; border-radius: 2px; } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current='page']::after { width: 70%; left: 15%; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.75rem; padding: 0.875rem 1.5rem; font-weight: 600; font-family: 'Inter', system-ui, sans-serif; letter-spacing: 0.01em; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; will-change: transform; white-space: nowrap; } .btn:focus-visible { outline: 2px solid var(--sky-blue); outline-offset: 3px; } .btn-primary { background-color: var(--deep-blue); color: var(--white); box-shadow: 0 10px 24px -10px rgba(26, 77, 122, 0.55); } .btn-primary:hover { background-color: #143e63; transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(26, 77, 122, 0.6); } .btn-secondary { background-color: rgba(255, 255, 255, 0.1); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--deep-blue); border: 1px solid var(--line); } .btn-ghost:hover { border-color: var(--deep-blue); background-color: var(--light-gray); } /* ---------- Cards ---------- */ .feature-card { border-radius: 1rem; background-color: #ffffff; border: 1px solid var(--line); padding: 1.75rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .feature-card:hover { transform: translateY(-4px); border-color: rgba(79, 179, 216, 0.4); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.25); } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(79, 179, 216, 0.15), rgba(110, 211, 207, 0.2)); color: var(--deep-blue); } /* ---------- Testimonials & badges ---------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: linear-gradient(135deg, var(--sky-blue), var(--deep-blue)); color: #fff; font-weight: 700; font-size: 0.95rem; } .badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.625rem; border-radius: 9999px; background-color: rgba(110, 211, 207, 0.15); color: var(--deep-blue); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .badge-dark { background-color: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); } /* ---------- Demo video ---------- */ .demo-video { border-radius: 1rem; overflow: hidden; box-shadow: 0 20px 40px -16px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.06); } .demo-video video { display: block; width: 100%; height: auto; } /* ---------- Accordion (FAQ) ---------- */ .faq-item { border: 1px solid var(--line); border-radius: 0.75rem; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; overflow: hidden; } .faq-item + .faq-item { margin-top: 0.75rem; } .faq-item[open] { border-color: rgba(26, 77, 122, 0.35); box-shadow: 0 10px 30px -22px rgba(15, 23, 42, 0.2); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--ink); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .chev { flex-shrink: 0; width: 20px; height: 20px; color: var(--muted); transition: transform 0.25s ease, color 0.25s ease; } .faq-item[open] summary .chev { transform: rotate(180deg); color: var(--deep-blue); } .faq-item .faq-body { padding: 0 1.25rem 1.25rem; color: var(--slate); line-height: 1.65; } /* ---------- Wave separators ---------- */ .wave-top, .wave-bottom { display: block; width: 100%; height: auto; } /* ---------- Scroll-reveal ---------- */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn:hover { transform: none; } } /* ---------- Comparison strip ---------- */ .compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; background: #fff; } .compare-col { padding: 1.25rem 1.5rem; } .compare-col + .compare-col { border-left: 1px dashed var(--line); } .compare-col h4 { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--muted); font-weight: 700; } .compare-col.win h4 { color: var(--deep-blue); } @media (max-width: 640px) { .compare-row { grid-template-columns: 1fr; } .compare-col + .compare-col { border-left: none; border-top: 1px dashed var(--line); } } /* ---------- Skip link & focus ---------- */ .skip-link { position: absolute; left: 1rem; top: 0.5rem; transform: translateY(-150%); background: var(--deep-blue); color: #fff; padding: 0.5rem 0.875rem; border-radius: 0.5rem; z-index: 1000; transition: transform 0.2s ease; } .skip-link:focus { transform: translateY(0); } :focus-visible { outline: 2px solid var(--sky-blue); outline-offset: 2px; border-radius: 4px; } /* ---------- Prose tweaks (legal / docs pages) ---------- */ .prose-page { color: var(--slate); line-height: 1.7; } .prose-page h1, .prose-page h2, .prose-page h3 { color: var(--ink); margin-top: 2.25rem; margin-bottom: 0.85rem; } .prose-page h1 { font-size: 2.25rem; } .prose-page h2 { font-size: 1.5rem; } .prose-page h3 { font-size: 1.2rem; } .prose-page p, .prose-page ul, .prose-page ol { margin-bottom: 1rem; } .prose-page ul { list-style: disc; padding-left: 1.25rem; } .prose-page ol { list-style: decimal; padding-left: 1.25rem; } .prose-page a { color: var(--deep-blue); text-decoration: underline; text-underline-offset: 3px; } .prose-page a:hover { color: var(--sky-blue); } /* Page banner used on sub-pages */ .page-banner { position: relative; padding-top: calc(var(--nav-height) + 3rem); padding-bottom: 3.5rem; color: #fff; text-align: center; overflow: hidden; } .page-banner h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; } .page-banner p { max-width: 38rem; margin: 0.75rem auto 0; opacity: 0.9; font-size: 1.05rem; } /* ---------- Utility ---------- */ .icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .divider-soft { height: 1px; background: linear-gradient(to right, transparent, var(--line), transparent); margin: 2rem 0; }