/* getsharkfin.com. Palette derived from the app's Abyss colorway. */ :root { --bg: #0d131f; --bg-alt: #111a29; --card: #16202f; --card-edge: rgba(223, 232, 242, 0.08); --text: #dfe8f2; --muted: #8fa2b8; --accent: #6ed3ee; --accent-deep: #3d9fc4; --accent-ink: #0b1620; --radius: 14px; --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", sans-serif; color-scheme: dark; } /* Colorway switch. The radios sit at the top of ; :has() re-skins the page. */ :root:has(#r-olivia:checked) { --bg: #171310; --bg-alt: #1d1815; --card: #221d1a; --card-edge: rgba(239, 224, 214, 0.09); --text: #ece2d8; --muted: #a5988a; --accent: #e8b4a4; --accent-deep: #cd8d7b; --accent-ink: #201410; } :root:has(#r-laser:checked) { --bg: #191233; --bg-alt: #1f173d; --card: #261d49; --card-edge: rgba(236, 227, 247, 0.1); --text: #ece3f7; --muted: #a89bc4; --accent: #e750b8; --accent-deep: #c13a97; --accent-ink: #250b1e; } :root:has(#r-botanical:checked) { --bg: #eef3ec; --bg-alt: #e2eadf; --card: #f8faf6; --card-edge: rgba(44, 53, 47, 0.14); --text: #2c352f; --muted: #5c6b60; --accent: #3c7a5a; --accent-deep: #2e5f45; --accent-ink: #f2f7f0; color-scheme: light; } :root:has(#r-8008:checked) { --bg: #17181d; --bg-alt: #1d1f25; --card: #23252b; --card-edge: rgba(230, 232, 236, 0.09); --text: #e6e8ec; --muted: #989ea9; --accent: #e06e73; --accent-deep: #bd5257; --accent-ink: #200f11; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } body, .nav, .section.alt, .stats, .footer, .shot, details, .chips span, .btn.ghost, .stats-row b { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } img, svg { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); font-size: 0.9em; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 4px; padding: 0.1em 0.35em; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; } .wrap.narrow { max-width: 820px; } .center { text-align: center; } h1, h2, h3 { font-family: var(--mono); letter-spacing: -0.01em; } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.6em; } h3 { font-size: 1.1rem; } .sub { color: var(--muted); max-width: 62ch; margin-bottom: 2rem; } /* Nav */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--card-edge); } .nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--text); } .brand:hover { text-decoration: none; } .nav-links { display: flex; gap: 22px; font-family: var(--mono); font-size: 0.9rem; } .nav-links a { color: var(--muted); } .nav-links a:hover { color: var(--text); text-decoration: none; } .nav-actions { margin-left: auto; display: flex; gap: 10px; } /* Buttons */ .btn { display: inline-block; font-family: var(--mono); font-size: 0.9rem; font-weight: 600; padding: 9px 18px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn.big { padding: 13px 26px; font-size: 1rem; } .btn.primary { background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.1); } .btn.ghost { color: var(--text); border-color: color-mix(in srgb, var(--text) 25%, transparent); } .btn.ghost:hover { border-color: var(--accent); color: var(--accent); } /* Hero */ .hero { position: relative; overflow: hidden; padding: 84px 0 64px; text-align: center; background: radial-gradient(900px 420px at 50% -80px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), var(--bg); } .hero-fin { position: absolute; width: 620px; height: 620px; right: -160px; top: -140px; color: var(--accent); opacity: 0.05; pointer-events: none; } .eyebrow { font-family: var(--mono); font-size: 0.85rem; color: var(--accent); margin-bottom: 1.2rem; } h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.14; margin-bottom: 1.1rem; } .lede { color: var(--muted); max-width: 66ch; margin: 0 auto 1.8rem; font-size: 1.06rem; } .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 1.2rem; } .fine { font-size: 0.88rem; color: var(--muted); max-width: 58ch; margin: 0 auto 3rem; } /* Screenshot frames */ .shot { max-width: 960px; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--card-edge); background: var(--card); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 90px color-mix(in srgb, var(--accent) 8%, transparent); overflow: hidden; } .chrome { display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--card-edge); } .chrome i { width: 11px; height: 11px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); } .shot img { width: 100%; height: auto; } .shot.push { margin-top: 2.6rem; } .shot-caption { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); text-align: center; padding: 12px; border-top: 1px solid var(--card-edge); } /* Stats strip */ .stats { border-block: 1px solid var(--card-edge); background: var(--bg-alt); } .stats-row { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px 34px; padding: 26px 24px; text-align: center; } .stats-row b { display: block; font-family: var(--mono); font-size: 1.9rem; color: var(--accent); } .stats-row span { font-size: 0.85rem; color: var(--muted); } /* Sections */ .section { padding: 84px 0; } .section.alt { background: var(--bg-alt); border-block: 1px solid var(--card-edge); } .section.alt + .section.alt { border-top: none; } /* Feature grid */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-top: 2.2rem; } .card { background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 26px; transition: border-color 0.2s ease, transform 0.2s ease; } .card:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); } .card h3 { margin: 14px 0 8px; } .card p { color: var(--muted); font-size: 0.95rem; } .icon { width: 30px; height: 30px; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; } /* Colorway switch. Radios sit at the top of ; the nav dots are their labels. */ .cw-radio { position: absolute; opacity: 0; pointer-events: none; } .hero-shot img { display: none; } :root:has(#r-abyss:checked) .h-abyss, :root:has(#r-olivia:checked) .h-olivia, :root:has(#r-laser:checked) .h-laser, :root:has(#r-botanical:checked) .h-botanical, :root:has(#r-8008:checked) .h-8008 { display: block; } /* Nav colorway dots, like the app's sidebar swatches */ .cw-dots { display: flex; align-items: center; gap: 8px; margin-right: 6px; } .dot { width: 17px; height: 17px; border-radius: 50%; cursor: pointer; border: 1px solid color-mix(in srgb, var(--text) 30%, transparent); transition: transform 0.15s ease; } .dot:hover { transform: scale(1.2); } .dot-abyss { background: linear-gradient(135deg, #232c3d 50%, #6ed3ee 50%); } .dot-olivia { background: linear-gradient(135deg, #2b2725 50%, #e8b4a4 50%); } .dot-laser { background: linear-gradient(135deg, #2b2145 50%, #e750b8 50%); } .dot-botanical { background: linear-gradient(135deg, #e8efe6 50%, #3c7a5a 50%); } .dot-8008 { background: linear-gradient(135deg, #2a2c33 50%, #e06e73 50%); } :root:has(#r-abyss:checked) .dot-abyss, :root:has(#r-olivia:checked) .dot-olivia, :root:has(#r-laser:checked) .dot-laser, :root:has(#r-botanical:checked) .dot-botanical, :root:has(#r-8008:checked) .dot-8008 { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); } :root:has(#r-abyss:focus-visible) .dot-abyss, :root:has(#r-olivia:focus-visible) .dot-olivia, :root:has(#r-laser:focus-visible) .dot-laser, :root:has(#r-botanical:focus-visible) .dot-botanical, :root:has(#r-8008:focus-visible) .dot-8008 { outline: 2px solid var(--accent); outline-offset: 2px; } /* Boards */ .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 2.4rem; } .chips span { font-family: var(--mono); font-size: 0.85rem; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--card-edge); background: var(--card); color: var(--text); } .chips .more { color: var(--muted); border-style: dashed; } .board-stats { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 32px; align-items: center; margin-bottom: 2.4rem; } .board-stats p { color: var(--muted); } table { border-collapse: collapse; width: 100%; } .board-stats td { padding: 11px 14px; border-bottom: 1px solid var(--card-edge); font-size: 0.95rem; } .board-stats td:last-child { font-family: var(--mono); color: var(--accent); text-align: right; font-weight: 700; } /* Compare */ .table-scroll { overflow-x: auto; } .compare { min-width: 480px; } .compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--card-edge); text-align: left; font-size: 0.95rem; } .compare thead th { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); font-weight: 600; } .compare td:first-child { color: var(--muted); } .compare td:nth-child(2) { color: var(--accent); font-weight: 600; } /* Safety */ .safe-list { list-style: none; } .safe-list li { position: relative; padding: 0 0 1.1rem 34px; color: var(--muted); } .safe-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1.5px solid var(--accent); } /* FAQ */ details { border: 1px solid var(--card-edge); border-radius: 12px; background: var(--card); padding: 0; margin-bottom: 10px; } details p { padding: 0 20px 18px; color: var(--muted); } details a { text-decoration: underline; } summary { cursor: pointer; font-family: var(--mono); font-weight: 600; font-size: 0.98rem; padding: 16px 20px; list-style: none; position: relative; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; position: absolute; right: 20px; color: var(--accent); font-weight: 400; } details[open] summary::after { content: "–"; } /* Final CTA */ .cta-final { padding: 100px 0; } .fin-small { width: 56px; height: 56px; color: var(--accent); margin: 0 auto 1.4rem; } .cta-final .sub { margin-inline: auto; } /* Footer */ .footer { border-top: 1px solid var(--card-edge); background: var(--bg-alt); padding: 44px 0 30px; } .footer-inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; margin-bottom: 26px; } .footer-brand { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 700; } .footer-brand p { grid-column: 1 / -1; font-family: var(--sans); font-weight: 400; font-size: 0.88rem; color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: 0.88rem; align-items: start; } .footer-links a { color: var(--muted); } .footer-links a:hover { color: var(--accent); } .disclaimer { font-size: 0.8rem; color: color-mix(in srgb, var(--muted) 70%, transparent); } /* Responsive */ @media (max-width: 760px) { .nav-links { display: none; } .nav-inner { gap: 14px; } .nav .btn.ghost { display: none; } .cw-dots { gap: 6px; } .dot { width: 15px; height: 15px; } .board-stats { grid-template-columns: 1fr; } .section { padding: 60px 0; } .hero { padding-top: 56px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .card, .card:hover, .dot, .dot:hover { transition: none; transform: none; } }