Add marketing website for SatsPrice
Static, dark-themed landing page showcasing the app's capabilities with real screenshots for Android, iOS, iPad, and macOS, plus download links for all supported distribution channels. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AejmWBrdE3DbJWbXoaE3aX
This commit is contained in:
Claude Sonnet 5
Binary file not shown.
|
After Width: | Height: | Size: 159 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Executable
+46
@@ -0,0 +1,46 @@
|
|||||||
|
<svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
|
||||||
|
<title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
|
||||||
|
<path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
|
||||||
|
</g>
|
||||||
|
<g id="_Group_" data-name="<Group>">
|
||||||
|
<g id="_Group_2" data-name="<Group>">
|
||||||
|
<g id="_Group_3" data-name="<Group>">
|
||||||
|
<path id="_Path_" data-name="<Path>" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
|
||||||
|
<path id="_Path_2" data-name="<Path>" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
|
||||||
|
<path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
|
||||||
|
<path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
|
||||||
|
<path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
|
||||||
|
<path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
|
||||||
|
<path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
|
||||||
|
<path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
|
||||||
|
<path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g id="_Group_4" data-name="<Group>">
|
||||||
|
<g>
|
||||||
|
<path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
|
||||||
|
<path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
|
||||||
|
<path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
|
||||||
|
<path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
|
||||||
|
<path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
|
||||||
|
<path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
|
||||||
|
<path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
|
||||||
|
<path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
|
||||||
|
<path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
|
||||||
|
<path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
|
||||||
|
<path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
|
||||||
|
<path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
|
||||||
|
<path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 360 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 412 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 303 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 455 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 240 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 301 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 529 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 587 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
@@ -0,0 +1,323 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>SatsPrice — Bitcoin Price & Sats Converter</title>
|
||||||
|
<meta name="description" content="SatsPrice converts Bitcoin, satoshis, and fiat currency in real time, sourced from Coinbase and CoinGecko. Free and open source for Android, iOS, and macOS." />
|
||||||
|
<link rel="icon" href="assets/app-icon.png" type="image/png" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="bg-glow"></div>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<a href="#top" class="brand">
|
||||||
|
<img src="assets/logo.png" alt="SatsPrice icon" />
|
||||||
|
<span>SatsPrice</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="main-nav">
|
||||||
|
<a href="#features">Features</a>
|
||||||
|
<a href="#platforms">Screenshots</a>
|
||||||
|
<a href="#download">Download</a>
|
||||||
|
<a href="https://github.com/tyiu/sats-price" target="_blank" rel="noopener">Code</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="header-cta">
|
||||||
|
<a href="#download" class="btn btn-primary btn-sm">Get the app</a>
|
||||||
|
<button class="nav-toggle" aria-label="Toggle menu" id="navToggle">
|
||||||
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mobile-nav" id="mobileNav">
|
||||||
|
<a href="#features">Features</a>
|
||||||
|
<a href="#platforms">Screenshots</a>
|
||||||
|
<a href="#download">Download</a>
|
||||||
|
<a href="https://github.com/tyiu/sats-price" target="_blank" rel="noopener">GitHub</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="top">
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="eyebrow">Bitcoin price calculator</p>
|
||||||
|
<h1>Know your <span class="accent">sats</span>,<br />wherever you carry Bitcoin.</h1>
|
||||||
|
<p class="lead">
|
||||||
|
SatsPrice converts Bitcoin, satoshis, and fiat currency in real time — sourced live
|
||||||
|
from Coinbase and CoinGecko, or set your own exchange rate. No account, no ads,
|
||||||
|
no tracking.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#download" class="btn btn-primary">Download SatsPrice</a>
|
||||||
|
<a href="#platforms" class="btn btn-ghost">See screenshots</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="platform-pills">
|
||||||
|
<span class="pill">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.536c-.03-3.06 2.5-4.53 2.61-4.6-1.42-2.08-3.63-2.37-4.42-2.4-1.88-.19-3.68 1.11-4.63 1.11-.96 0-2.42-1.09-3.98-1.06-2.05.03-3.94 1.19-5 3.02-2.13 3.7-.55 9.18 1.53 12.18 1.02 1.47 2.23 3.11 3.82 3.05 1.53-.06 2.11-.99 3.96-.99 1.84 0 2.37.99 3.98.96 1.65-.03 2.69-1.5 3.7-2.98 1.17-1.71 1.65-3.37 1.67-3.45-.04-.02-3.2-1.23-3.24-4.84zM14.15 3.6c.84-1.02 1.41-2.43 1.25-3.6-1.22.06-2.69.84-3.55 1.85-.78.9-1.46 2.34-1.28 3.57 1.2.09 2.75-.61 3.58-1.82z"/></svg>
|
||||||
|
iOS
|
||||||
|
</span>
|
||||||
|
<span class="pill">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.536c-.03-3.06 2.5-4.53 2.61-4.6-1.42-2.08-3.63-2.37-4.42-2.4-1.88-.19-3.68 1.11-4.63 1.11-.96 0-2.42-1.09-3.98-1.06-2.05.03-3.94 1.19-5 3.02-2.13 3.7-.55 9.18 1.53 12.18 1.02 1.47 2.23 3.11 3.82 3.05 1.53-.06 2.11-.99 3.96-.99 1.84 0 2.37.99 3.98.96 1.65-.03 2.69-1.5 3.7-2.98 1.17-1.71 1.65-3.37 1.67-3.45-.04-.02-3.2-1.23-3.24-4.84zM14.15 3.6c.84-1.02 1.41-2.43 1.25-3.6-1.22.06-2.69.84-3.55 1.85-.78.9-1.46 2.34-1.28 3.57 1.2.09 2.75-.61 3.58-1.82z"/></svg>
|
||||||
|
macOS
|
||||||
|
</span>
|
||||||
|
<span class="pill">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24a11.43 11.43 0 0 0-8.94 0L5.65 5.67c-.18-.28-.54-.37-.83-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"/></svg>
|
||||||
|
Android
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="trust-row">
|
||||||
|
<span>Free forever</span>
|
||||||
|
<span>Open source (GPL‑3.0)</span>
|
||||||
|
<span>No account required</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hero-visual">
|
||||||
|
<div class="hero-blob"></div>
|
||||||
|
<div class="phone-frame">
|
||||||
|
<img src="assets/screenshots/iphone/iphone-1.png" alt="SatsPrice app showing BTC to USD price, sats conversion, and a list of currencies" loading="eager" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="float-card ticker">
|
||||||
|
<div class="tk-label"><span class="dot"></span>Live‑style price</div>
|
||||||
|
<div class="tk-value">$77,300</div>
|
||||||
|
<div class="tk-sub">1 USD ≈ 1,294 sats</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="float-card sources">
|
||||||
|
<div class="ic">⇄</div>
|
||||||
|
<div class="tx">Coinbase & CoinGecko<small>or set your own rate</small></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- LOGO / VALUE STRIP -->
|
||||||
|
<section class="logo-strip">
|
||||||
|
<div class="container">
|
||||||
|
<span class="item">🔄 Multi‑source pricing</span>
|
||||||
|
<span class="item">🌍 150+ currencies</span>
|
||||||
|
<span class="item">🥇 Precious metals</span>
|
||||||
|
<span class="item">🔓 No ads, no accounts</span>
|
||||||
|
<span class="item">💻 Native on every platform</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FEATURES -->
|
||||||
|
<section class="features" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow" style="justify-content:center">Capabilities</p>
|
||||||
|
<h2>Everything you need to think in sats</h2>
|
||||||
|
<p>A focused calculator that does one job — Bitcoin, satoshis, and fiat conversion — and does it well on every device you own.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-grid">
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🔄</div>
|
||||||
|
<h3>Multi‑source pricing</h3>
|
||||||
|
<p>Live BTC/fiat rates from Coinbase and CoinGecko, refreshed with a tap — or enter your own exchange rate manually.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🧮</div>
|
||||||
|
<h3>Instant conversion</h3>
|
||||||
|
<p>Type into any field — Sats, BTC, or fiat — and watch every other value update immediately.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🌍</div>
|
||||||
|
<h3>150+ currencies</h3>
|
||||||
|
<p>Every major fiat currency with country flags, smart search, and a Priced / Unpriced split so you know what's live.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🥇</div>
|
||||||
|
<h3>Precious metals</h3>
|
||||||
|
<p>Track gold, silver, platinum, and palladium right alongside your fiat currencies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">📌</div>
|
||||||
|
<h3>Personalized watchlist</h3>
|
||||||
|
<p>Reorder currencies, pin favorites to the top, and reset with confirmation — it all persists between launches.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🔢</div>
|
||||||
|
<h3>Locale‑aware formatting</h3>
|
||||||
|
<p>Digit grouping and "updated" timestamps that read naturally, no matter where you are.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card wide">
|
||||||
|
<div class="icon">💻</div>
|
||||||
|
<h3>Native on every platform</h3>
|
||||||
|
<p>SwiftUI on iOS and macOS, Compose Multiplatform on Android — built with Kotlin Multiplatform to feel right at home on each device, not like a port.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card">
|
||||||
|
<div class="icon">🔓</div>
|
||||||
|
<h3>Free & open source</h3>
|
||||||
|
<p>GPL‑3.0 licensed, no ads, no accounts, no tracking. Inspect every line on GitHub.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PLATFORM SHOWCASE -->
|
||||||
|
<section class="showcase" id="platforms">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-head">
|
||||||
|
<p class="eyebrow" style="justify-content:center">See it in action</p>
|
||||||
|
<h2>One app, at home on every screen</h2>
|
||||||
|
<p>Real screenshots from Android, iPhone, iPad, and Mac — the same fast, focused experience everywhere.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<button class="tab-btn active" data-tab="panel-android">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 9.48l1.84-3.18c.16-.31.04-.69-.26-.85-.29-.15-.65-.06-.83.22l-1.88 3.24a11.43 11.43 0 0 0-8.94 0L5.65 5.67c-.18-.28-.54-.37-.83-.22-.3.16-.42.54-.26.85L6.4 9.48C3.3 11.25 1.28 14.44 1 18h22c-.28-3.56-2.3-6.75-5.4-8.52zM7 15.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm10 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"/></svg>
|
||||||
|
Android
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn" data-tab="panel-iphone">
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 12.536c-.03-3.06 2.5-4.53 2.61-4.6-1.42-2.08-3.63-2.37-4.42-2.4-1.88-.19-3.68 1.11-4.63 1.11-.96 0-2.42-1.09-3.98-1.06-2.05.03-3.94 1.19-5 3.02-2.13 3.7-.55 9.18 1.53 12.18 1.02 1.47 2.23 3.11 3.82 3.05 1.53-.06 2.11-.99 3.96-.99 1.84 0 2.37.99 3.98.96 1.65-.03 2.69-1.5 3.7-2.98 1.17-1.71 1.65-3.37 1.67-3.45-.04-.02-3.2-1.23-3.24-4.84zM14.15 3.6c.84-1.02 1.41-2.43 1.25-3.6-1.22.06-2.69.84-3.55 1.85-.78.9-1.46 2.34-1.28 3.57 1.2.09 2.75-.61 3.58-1.82z"/></svg>
|
||||||
|
iPhone
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn" data-tab="panel-ipad">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>
|
||||||
|
iPad
|
||||||
|
</button>
|
||||||
|
<button class="tab-btn" data-tab="panel-macos">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="13" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
||||||
|
Mac
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel active" id="panel-android">
|
||||||
|
<div class="shot-scroll h-phone">
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-1.png" alt="SatsPrice on Android — price source and conversion" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-2.png" alt="SatsPrice on Android — currency list" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-3.png" alt="SatsPrice on Android — reorder currency menu" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-4.png" alt="SatsPrice on Android" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-5.png" alt="SatsPrice on Android" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-6.png" alt="SatsPrice on Android — searching currencies by name" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-7.png" alt="SatsPrice on Android — reset confirmation dialog" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/android/android-8.png" alt="SatsPrice on Android" loading="lazy" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="panel-iphone">
|
||||||
|
<div class="shot-scroll h-phone">
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-1.png" alt="SatsPrice on iPhone — price source and conversion" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-2.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-3.png" alt="SatsPrice on iPhone — editing currency list" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-4.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-5.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-6.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-7.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-phone"><img src="assets/screenshots/iphone/iphone-8.png" alt="SatsPrice on iPhone" loading="lazy" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="panel-ipad">
|
||||||
|
<div class="shot-scroll h-tablet">
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-1.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-2.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-3.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-4.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-5.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-6.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-7.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
<div class="shot framed-tablet"><img src="assets/screenshots/ipad/ipad-8.png" alt="SatsPrice on iPad" loading="lazy" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-panel" id="panel-macos">
|
||||||
|
<div class="shot-scroll h-desktop">
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-1.png" alt="SatsPrice on macOS — main window" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-2.png" alt="SatsPrice on macOS" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-3.png" alt="SatsPrice on macOS" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-4.png" alt="SatsPrice on macOS" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-5.png" alt="SatsPrice on macOS" loading="lazy" /></div>
|
||||||
|
<div class="shot"><img src="assets/screenshots/macos/macos-6.png" alt="SatsPrice on macOS" loading="lazy" /></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="showcase-caption">Scroll or swipe to see more →</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- DOWNLOAD -->
|
||||||
|
<section class="download" id="download">
|
||||||
|
<div class="container">
|
||||||
|
<div class="download-card">
|
||||||
|
<p class="eyebrow" style="justify-content:center">Get the app</p>
|
||||||
|
<h2>Download SatsPrice</h2>
|
||||||
|
<p>Pick the option that fits your platform. Every build is free, with no in‑app purchases.</p>
|
||||||
|
|
||||||
|
<div class="badge-row">
|
||||||
|
<a class="badge-link apple" href="https://apps.apple.com/app/satsprice/id6478230475" target="_blank" rel="noopener" aria-label="Download on the App Store">
|
||||||
|
<img src="assets/badges/download_on_apple.svg" alt="Download on the App Store" />
|
||||||
|
</a>
|
||||||
|
<a class="badge-link zapstore" href="https://zapstore.dev/apps/xyz.tyiu.SatsPrice" target="_blank" rel="noopener" aria-label="Get it on Zap Store">
|
||||||
|
<img src="assets/badges/get-it-on-zapstore.svg" alt="Get it on Zap Store" />
|
||||||
|
</a>
|
||||||
|
<a class="badge-link obtainium" href="https://github.com/ImranR98/Obtainium" target="_blank" rel="noopener" aria-label="Get it on Obtainium">
|
||||||
|
<img src="assets/badges/download_on_obtainium.png" alt="Get it on Obtainium" />
|
||||||
|
</a>
|
||||||
|
<a class="badge-link github" href="https://github.com/tyiu/sats-price/releases" target="_blank" rel="noopener" aria-label="Get it on GitHub">
|
||||||
|
<img src="assets/badges/badge_github.png" alt="Get it on GitHub" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="version-row">
|
||||||
|
<span class="pill">🍎 iOS 16.0+</span>
|
||||||
|
<span class="pill">🖥️ macOS 13.0+</span>
|
||||||
|
<span class="pill">🤖 Android 7.0+</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="oss-note">
|
||||||
|
100% open source under GPL‑3.0 —
|
||||||
|
<a href="https://github.com/tyiu/sats-price" target="_blank" rel="noopener">view the code</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<a href="#top" class="footer-brand">
|
||||||
|
<img src="assets/logo.png" alt="SatsPrice icon" />
|
||||||
|
SatsPrice
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="footer-links">
|
||||||
|
<a href="https://github.com/tyiu/sats-price" target="_blank" rel="noopener">Code</a>
|
||||||
|
<a href="https://github.com/tyiu/sats-price/releases" target="_blank" rel="noopener">Releases</a>
|
||||||
|
<a href="https://github.com/tyiu/sats-price/blob/main/LICENSE.GPL" target="_blank" rel="noopener">License</a>
|
||||||
|
<a href="https://github.com/tyiu/sats-price/blob/main/PRIVACY.md" target="_blank" rel="noopener">Privacy</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-meta">
|
||||||
|
<span>© <span id="year">2026</span> SatsPrice. Licensed under GPL‑3.0.</span>
|
||||||
|
<span>Built with Kotlin Multiplatform & Compose Multiplatform.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
// Mobile nav toggle
|
||||||
|
const navToggle = document.querySelector(".nav-toggle");
|
||||||
|
const mobileNav = document.querySelector(".mobile-nav");
|
||||||
|
|
||||||
|
if (navToggle && mobileNav) {
|
||||||
|
navToggle.addEventListener("click", () => {
|
||||||
|
mobileNav.classList.toggle("open");
|
||||||
|
});
|
||||||
|
|
||||||
|
mobileNav.querySelectorAll("a").forEach((link) => {
|
||||||
|
link.addEventListener("click", () => mobileNav.classList.remove("open"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Platform showcase tabs
|
||||||
|
const tabButtons = document.querySelectorAll(".tab-btn");
|
||||||
|
const tabPanels = document.querySelectorAll(".tab-panel");
|
||||||
|
|
||||||
|
tabButtons.forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const target = btn.getAttribute("data-tab");
|
||||||
|
|
||||||
|
tabButtons.forEach((b) => b.classList.remove("active"));
|
||||||
|
tabPanels.forEach((p) => p.classList.remove("active"));
|
||||||
|
|
||||||
|
btn.classList.add("active");
|
||||||
|
document.getElementById(target).classList.add("active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Simulated live BTC price ticker (cosmetic only, not a real feed)
|
||||||
|
(function priceTicker() {
|
||||||
|
const valueEl = document.querySelector(".ticker .tk-value");
|
||||||
|
const subEl = document.querySelector(".ticker .tk-sub");
|
||||||
|
if (!valueEl) return;
|
||||||
|
|
||||||
|
let price = 77300;
|
||||||
|
|
||||||
|
function format(n) {
|
||||||
|
return n.toLocaleString("en-US", { maximumFractionDigits: 0 });
|
||||||
|
}
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
price += (Math.random() - 0.5) * 60;
|
||||||
|
valueEl.textContent = "$" + format(price);
|
||||||
|
const sats = Math.round(100000000 / price);
|
||||||
|
subEl.textContent = "1 USD ≈ " + sats.toLocaleString("en-US") + " sats";
|
||||||
|
}
|
||||||
|
|
||||||
|
tick();
|
||||||
|
setInterval(tick, 2200);
|
||||||
|
})();
|
||||||
|
|
||||||
|
// Footer year
|
||||||
|
const yearEl = document.getElementById("year");
|
||||||
|
if (yearEl) yearEl.textContent = new Date().getFullYear();
|
||||||
@@ -0,0 +1,747 @@
|
|||||||
|
/* ============ Tokens ============ */
|
||||||
|
:root {
|
||||||
|
--bg: #0a0d16;
|
||||||
|
--bg-soft: #0e1220;
|
||||||
|
--surface: #141a2c;
|
||||||
|
--surface-2: #1b2338;
|
||||||
|
--border: #262f4a;
|
||||||
|
--border-soft: #1e2740;
|
||||||
|
--text: #f2f4fb;
|
||||||
|
--text-dim: #a7afc9;
|
||||||
|
--text-faint: #6d7593;
|
||||||
|
--gold: #f7b955;
|
||||||
|
--gold-soft: #ffd98e;
|
||||||
|
--blue: #5ec8f2;
|
||||||
|
--coral: #ff6b6b;
|
||||||
|
--green: #4ade80;
|
||||||
|
|
||||||
|
--gradient-gold: linear-gradient(135deg, #ffd98e 0%, #f7b955 50%, #e8963f 100%);
|
||||||
|
--shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
|
||||||
|
--shadow-md: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
|
||||||
|
--shadow-glow: 0 0 0 1px rgba(247, 185, 85, 0.15), 0 20px 50px -15px rgba(247, 185, 85, 0.25);
|
||||||
|
|
||||||
|
--radius-sm: 10px;
|
||||||
|
--radius-md: 16px;
|
||||||
|
--radius-lg: 24px;
|
||||||
|
--radius-xl: 32px;
|
||||||
|
|
||||||
|
--container: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--container);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-inline: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section { position: relative; }
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--gold-soft);
|
||||||
|
margin: 0 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow::before {
|
||||||
|
content: "";
|
||||||
|
width: 18px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--gradient-gold);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: inherit;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head {
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto 56px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head h2 {
|
||||||
|
font-size: clamp(28px, 4vw, 42px);
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-head p {
|
||||||
|
margin-top: 14px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ Background texture ============ */
|
||||||
|
.bg-glow {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: -1;
|
||||||
|
background:
|
||||||
|
radial-gradient(700px 500px at 12% -5%, rgba(247, 185, 85, 0.16), transparent 60%),
|
||||||
|
radial-gradient(800px 600px at 100% 10%, rgba(94, 200, 242, 0.12), transparent 55%),
|
||||||
|
radial-gradient(900px 700px at 50% 120%, rgba(247, 185, 85, 0.08), transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ Buttons ============ */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 14px 24px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 15px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--gradient-gold);
|
||||||
|
color: #1a1305;
|
||||||
|
box-shadow: 0 12px 30px -10px rgba(247, 185, 85, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(247, 185, 85, 0.65); }
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
color: var(--text);
|
||||||
|
border-color: var(--border);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost:hover { border-color: rgba(247, 185, 85, 0.5); transform: translateY(-2px); }
|
||||||
|
|
||||||
|
.btn-sm { padding: 10px 18px; font-size: 13px; }
|
||||||
|
|
||||||
|
/* ============ Header ============ */
|
||||||
|
.site-header {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(10, 13, 22, 0.72);
|
||||||
|
backdrop-filter: blur(14px);
|
||||||
|
border-bottom: 1px solid var(--border-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header .container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 17px;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand img {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav a {
|
||||||
|
font-size: 14.5px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-dim);
|
||||||
|
transition: color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav a:hover { color: var(--text); }
|
||||||
|
|
||||||
|
.header-cta { display: flex; align-items: center; gap: 14px; }
|
||||||
|
|
||||||
|
.nav-toggle {
|
||||||
|
display: none;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 10px 24px 20px;
|
||||||
|
border-bottom: 1px solid var(--border-soft);
|
||||||
|
background: var(--bg-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav a {
|
||||||
|
padding: 12px 4px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-dim);
|
||||||
|
border-bottom: 1px solid var(--border-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav.open { display: flex; }
|
||||||
|
|
||||||
|
/* ============ Hero ============ */
|
||||||
|
.hero {
|
||||||
|
padding: 84px 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.05fr 0.95fr;
|
||||||
|
align-items: center;
|
||||||
|
gap: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1 {
|
||||||
|
font-size: clamp(36px, 5.2vw, 58px);
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy h1 .accent {
|
||||||
|
background: var(--gradient-gold);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-copy p.lead {
|
||||||
|
margin: 22px 0 0;
|
||||||
|
font-size: 18px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
max-width: 520px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 14px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.platform-pills {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill svg { width: 15px; height: 15px; flex-shrink: 0; }
|
||||||
|
|
||||||
|
.trust-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 26px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
|
||||||
|
.trust-row span::before { content: "✓"; color: var(--green); font-weight: 700; }
|
||||||
|
|
||||||
|
/* Hero visual */
|
||||||
|
.hero-visual {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-frame {
|
||||||
|
position: relative;
|
||||||
|
width: min(300px, 78vw);
|
||||||
|
border-radius: 46px;
|
||||||
|
padding: 14px;
|
||||||
|
background: linear-gradient(160deg, #232c46, #11162650);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-frame::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 26px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 90px;
|
||||||
|
height: 22px;
|
||||||
|
background: #05070c;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-frame img {
|
||||||
|
border-radius: 32px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-card {
|
||||||
|
position: absolute;
|
||||||
|
background: rgba(20, 26, 44, 0.85);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
padding: 14px 16px;
|
||||||
|
z-index: 4;
|
||||||
|
animation: float 5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-card.ticker {
|
||||||
|
top: -6px;
|
||||||
|
right: -18px;
|
||||||
|
min-width: 190px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-card.sources {
|
||||||
|
bottom: 60px;
|
||||||
|
left: -34px;
|
||||||
|
animation-delay: 1.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticker .tk-label {
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--text-faint);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticker .tk-label .dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--green);
|
||||||
|
box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
|
||||||
|
animation: pulse 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticker .tk-value {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticker .tk-sub {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-top: 3px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float-card.sources { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
|
||||||
|
.float-card.sources .ic {
|
||||||
|
width: 34px; height: 34px; border-radius: 10px;
|
||||||
|
background: var(--gradient-gold);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.float-card.sources .tx { font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
|
||||||
|
.float-card.sources .tx small { display: block; font-weight: 400; color: var(--text-faint); }
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.35; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-blob {
|
||||||
|
position: absolute;
|
||||||
|
width: 460px;
|
||||||
|
height: 460px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: radial-gradient(circle, rgba(247, 185, 85, 0.22), transparent 70%);
|
||||||
|
filter: blur(10px);
|
||||||
|
top: -60px;
|
||||||
|
right: -60px;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ Logo strip ============ */
|
||||||
|
.logo-strip {
|
||||||
|
padding: 30px 0 10px;
|
||||||
|
border-top: 1px solid var(--border-soft);
|
||||||
|
border-bottom: 1px solid var(--border-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-strip .container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 14px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-strip .item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-strip svg { width: 16px; height: 16px; }
|
||||||
|
|
||||||
|
/* ============ Features ============ */
|
||||||
|
.features { padding: 110px 0; }
|
||||||
|
|
||||||
|
.feature-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: 26px 24px;
|
||||||
|
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: rgba(247, 185, 85, 0.35);
|
||||||
|
background: var(--surface-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card .icon {
|
||||||
|
width: 46px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 13px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 22px;
|
||||||
|
background: linear-gradient(150deg, rgba(247, 185, 85, 0.18), rgba(94, 200, 242, 0.12));
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card h3 {
|
||||||
|
font-size: 16.5px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card p {
|
||||||
|
font-size: 14.5px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card.wide { grid-column: span 2; }
|
||||||
|
|
||||||
|
/* ============ Platform showcase ============ */
|
||||||
|
.showcase { padding: 40px 0 110px; }
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 11px 20px;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-btn svg { width: 16px; height: 16px; }
|
||||||
|
|
||||||
|
.tab-btn.active {
|
||||||
|
background: var(--gradient-gold);
|
||||||
|
color: #1a1305;
|
||||||
|
border-color: transparent;
|
||||||
|
box-shadow: 0 10px 24px -10px rgba(247, 185, 85, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-panel { display: none; }
|
||||||
|
.tab-panel.active { display: block; animation: fadein 0.35s ease; }
|
||||||
|
|
||||||
|
@keyframes fadein {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-scroll {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 10px 4px 26px;
|
||||||
|
scroll-snap-type: x proximity;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-scroll::-webkit-scrollbar { height: 8px; }
|
||||||
|
.shot-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||||
|
.shot-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
|
||||||
|
|
||||||
|
.shot-scroll .shot {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--surface);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shot-scroll.h-phone .shot { height: 480px; }
|
||||||
|
.shot-scroll.h-phone .shot img { height: 100%; width: auto; }
|
||||||
|
|
||||||
|
.shot-scroll.h-tablet .shot { height: 340px; }
|
||||||
|
.shot-scroll.h-tablet .shot img { height: 100%; width: auto; }
|
||||||
|
|
||||||
|
.shot-scroll.h-desktop .shot { height: 300px; }
|
||||||
|
.shot-scroll.h-desktop .shot img { height: 100%; width: auto; }
|
||||||
|
|
||||||
|
.shot.framed-phone { border-radius: 30px; border: 6px solid #1c2340; }
|
||||||
|
.shot.framed-tablet { border-radius: 18px; border: 6px solid #1c2340; }
|
||||||
|
|
||||||
|
.showcase-caption {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-faint);
|
||||||
|
font-size: 13.5px;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ Download ============ */
|
||||||
|
.download {
|
||||||
|
padding: 100px 0 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-card {
|
||||||
|
background: linear-gradient(155deg, var(--surface) 0%, var(--surface-2) 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: 64px 48px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(500px 260px at 50% -10%, rgba(247, 185, 85, 0.18), transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-card h2 {
|
||||||
|
font-size: clamp(26px, 4vw, 38px);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-card > p {
|
||||||
|
color: var(--text-dim);
|
||||||
|
margin: 14px auto 0;
|
||||||
|
max-width: 480px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 18px;
|
||||||
|
margin-top: 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.18s ease, filter 0.18s ease;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-link:hover { transform: translateY(-3px); }
|
||||||
|
|
||||||
|
.badge-link img { height: 56px; width: auto; border-radius: 12px; }
|
||||||
|
|
||||||
|
.badge-link.obtainium img,
|
||||||
|
.badge-link.github img { height: 56px; }
|
||||||
|
|
||||||
|
.version-row {
|
||||||
|
margin-top: 38px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-row .pill { background: rgba(255, 255, 255, 0.03); }
|
||||||
|
|
||||||
|
.oss-note {
|
||||||
|
margin-top: 26px;
|
||||||
|
font-size: 13.5px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.oss-note a { color: var(--gold-soft); font-weight: 600; }
|
||||||
|
.oss-note a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* ============ Footer ============ */
|
||||||
|
.site-footer {
|
||||||
|
border-top: 1px solid var(--border-soft);
|
||||||
|
padding: 48px 0 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-grid {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 26px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links a:hover { color: var(--text); }
|
||||||
|
|
||||||
|
.footer-meta {
|
||||||
|
margin-top: 28px;
|
||||||
|
padding-top: 24px;
|
||||||
|
border-top: 1px solid var(--border-soft);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 10px;
|
||||||
|
font-size: 12.5px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============ Responsive ============ */
|
||||||
|
@media (max-width: 980px) {
|
||||||
|
.main-nav { display: none; }
|
||||||
|
.nav-toggle { display: inline-flex; }
|
||||||
|
.hero .container { grid-template-columns: 1fr; }
|
||||||
|
.hero-visual { margin-top: 20px; }
|
||||||
|
.feature-grid { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.feature-card.wide { grid-column: span 2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.hero { padding: 48px 0 40px; }
|
||||||
|
.hero-copy p.lead { font-size: 16px; }
|
||||||
|
.feature-grid { grid-template-columns: 1fr; }
|
||||||
|
.feature-card.wide { grid-column: span 1; }
|
||||||
|
.download-card { padding: 44px 22px; }
|
||||||
|
.badge-link img { height: 48px; }
|
||||||
|
.float-card.sources { left: -10px; }
|
||||||
|
.float-card.ticker { right: -8px; }
|
||||||
|
.footer-grid { flex-direction: column; align-items: flex-start; }
|
||||||
|
.footer-meta { flex-direction: column; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.header-cta .btn { display: none; }
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user