Trippy | Gemini API Developer Competition

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="Google AI for Developers"> <meta property="og:type" content="website"><meta name="theme-color" content="#1967d2"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/googledevai/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/css/app.css"> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/images/favicon-new.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/images/touchicon-180-new.png"><link rel="canonical" href="https://ai.google.dev/competition/projects/trippy"><link rel="search" type="application/opensearchdescription+xml" title="Google AI for Developers" href="https://ai.google.dev/s/opensearch.xml"> <link rel="alternate" hreflang="en" href="https://ai.google.dev/competition/projects/trippy" /><link rel="alternate" hreflang="x-default" href="https://ai.google.dev/competition/projects/trippy" /><link rel="alternate" hreflang="ar" href="https://ai.google.dev/competition/projects/trippy?hl=ar" /><link rel="alternate" hreflang="bn" href="https://ai.google.dev/competition/projects/trippy?hl=bn" /><link rel="alternate" hreflang="zh-Hans" href="https://ai.google.dev/competition/projects/trippy?hl=zh-cn" /><link rel="alternate" hreflang="zh-Hant" href="https://ai.google.dev/competition/projects/trippy?hl=zh-tw" /><link rel="alternate" hreflang="fa" href="https://ai.google.dev/competition/projects/trippy?hl=fa" /><link rel="alternate" hreflang="fr" href="https://ai.google.dev/competition/projects/trippy?hl=fr" /><link rel="alternate" hreflang="de" href="https://ai.google.dev/competition/projects/trippy?hl=de" /><link rel="alternate" hreflang="he" href="https://ai.google.dev/competition/projects/trippy?hl=he" /><link rel="alternate" hreflang="hi" href="https://ai.google.dev/competition/projects/trippy?hl=hi" /><link rel="alternate" hreflang="id" href="https://ai.google.dev/competition/projects/trippy?hl=id" /><link rel="alternate" hreflang="it" href="https://ai.google.dev/competition/projects/trippy?hl=it" /><link rel="alternate" hreflang="ja" href="https://ai.google.dev/competition/projects/trippy?hl=ja" /><link rel="alternate" hreflang="ko" href="https://ai.google.dev/competition/projects/trippy?hl=ko" /><link rel="alternate" hreflang="pl" href="https://ai.google.dev/competition/projects/trippy?hl=pl" /><link rel="alternate" hreflang="pt-BR" href="https://ai.google.dev/competition/projects/trippy?hl=pt-br" /><link rel="alternate" hreflang="ru" href="https://ai.google.dev/competition/projects/trippy?hl=ru" /><link rel="alternate" hreflang="es-419" href="https://ai.google.dev/competition/projects/trippy?hl=es-419" /><link rel="alternate" hreflang="th" href="https://ai.google.dev/competition/projects/trippy?hl=th" /><link rel="alternate" hreflang="tr" href="https://ai.google.dev/competition/projects/trippy?hl=tr" /><link rel="alternate" hreflang="vi" href="https://ai.google.dev/competition/projects/trippy?hl=vi" /><title>Trippy  |  Gemini API Developer Competition  |  Google AI for Developers</title> <meta property="og:title" content="Trippy  |  Gemini API Developer Competition  |  Google AI for Developers"><meta name="description" content="Plan your next vacation trip with a simple audio or text prompt"> <meta property="og:description" content="Plan your next vacation trip with a simple audio or text prompt"><meta property="og:url" content="https://ai.google.dev/competition/projects/trippy"><meta property="og:image" content="https://ai.google.dev/static/site-assets/images/share.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary_large_image"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Gemini API Developer Competition", "item": "https://ai.google.dev/competition" },{ "@type": "ListItem", "position": 2, "name": "Trippy", "item": "https://ai.google.dev/competition/projects/trippy" }] } </script> <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no, height=device-height" name="viewport"> <meta name="keywords" content="gemini api,google gemini,ai studio"> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="page" theme="googledevai-theme" type="marketing" layout="full" theme="googledevai-theme" layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner" keep-tabs-visible> <div class="devsite-header--inner nocontent"> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="geminiAPIDeveloperCompetition" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://ai.google.dev/_static/googledevai/images/lockup-new.svg" class="devsite-site-logo" alt="Gemini API Developer Competition"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab > <a href="https://ai.google.dev/gemini-api/docs" track-metadata-eventdetail="https://ai.google.dev/gemini-api/docs" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - gemini api" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Gemini API" track-name="gemini api" > Gemini API </a> </tab> <tab > <a href="https://aistudio.google.com" track-metadata-eventdetail="https://aistudio.google.com" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google ai studio" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Google AI Studio" track-name="google ai studio" > Google AI Studio </a> </tab> <tab > <a href="https://ai.google.dev/gemma" track-metadata-eventdetail="https://ai.google.dev/gemma" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - gemma" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Gemma" track-name="gemma" > Gemma </a> </tab> <tab > <a href="https://ai.google.dev/edge" track-metadata-eventdetail="https://ai.google.dev/edge" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - google ai edge" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Google AI Edge" track-name="google ai edge" > Google AI Edge </a> </tab> <tab class="devsite-dropdown "> <span class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - tools" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Tools" track-name="tools" > Tools </span> <a href="#" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Dropdown menu for Tools" track-type="nav" track-metadata-eventdetail="" track-metadata-position="nav - tools" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Tools" track-name="tools" class="devsite-tabs-dropdown-toggle devsite-icon devsite-icon-arrow-drop-down"></a> <div class="devsite-tabs-dropdown" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section "> <li class="devsite-nav-item"> <a href="https://ai.google.dev/responsible" track-type="nav" track-metadata-eventdetail="https://ai.google.dev/responsible" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Responsible GenAI Toolkit </div> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.google/" track-type="nav" track-metadata-eventdetail="https://colab.google/" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Colab </div> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/genkit" track-type="nav" track-metadata-eventdetail="https://firebase.google.com/docs/genkit" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Firebase Genkit </div> </a> </li> <li class="devsite-nav-item"> <a href="https://jax.readthedocs.io/" track-type="nav" track-metadata-eventdetail="https://jax.readthedocs.io/" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> JAX </div> </a> </li> <li class="devsite-nav-item"> <a href="https://keras.io/" track-type="nav" track-metadata-eventdetail="https://keras.io/" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> Keras </div> </a> </li> <li class="devsite-nav-item"> <a href="https://www.tensorflow.org/" track-type="nav" track-metadata-eventdetail="https://www.tensorflow.org/" track-metadata-position="nav - tools" track-metadata-module="tertiary nav" tooltip > <div class="devsite-nav-item-title"> TensorFlow </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://discuss.ai.google.dev/" track-metadata-eventdetail="https://discuss.ai.google.dev/" class="devsite-tabs-content gc-analytics-event " track-type="nav" track-metadata-position="nav - community" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" > Community </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="Gemini API Developer Competition" tenant-name="Google AI for Developers" > <form class="devsite-search-form" action="https://ai.google.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="geminiAPIDeveloperCompetition" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <img src="https://ai.google.dev/_static/googledevai/images/lockup-new.svg" class="devsite-site-logo" alt="Gemini API Developer Competition"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <a href="/gemini-api/docs" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Gemini API" track-name="gemini api" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemini API" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemini API </span> </a> </li> <li class="devsite-nav-item"> <a href="https://aistudio.google.com" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Google AI Studio" track-name="google ai studio" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Studio" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Studio </span> </a> </li> <li class="devsite-nav-item"> <a href="/gemma" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Gemma" track-name="gemma" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Gemma" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Gemma </span> </a> </li> <li class="devsite-nav-item"> <a href="/edge" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Google AI Edge" track-name="google ai edge" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Google AI Edge" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Google AI Edge </span> </a> </li> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Tools" track-name="tools" > <span class="devsite-nav-text" tooltip > Tools </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Tools" track-name="tools" > <span class="devsite-nav-text" tooltip menu="Tools"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Tools"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="https://discuss.ai.google.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Community" track-name="community" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Community" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Community </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Tools" aria-label="Side menu" hidden> <li class="devsite-nav-item"> <a href="/responsible" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Responsible GenAI Toolkit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Responsible GenAI Toolkit </span> </a> </li> <li class="devsite-nav-item"> <a href="https://colab.google/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Colab" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Colab </span> </a> </li> <li class="devsite-nav-item"> <a href="https://firebase.google.com/docs/genkit" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Firebase Genkit" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Firebase Genkit </span> </a> </li> <li class="devsite-nav-item"> <a href="https://jax.readthedocs.io/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JAX" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JAX </span> </a> </li> <li class="devsite-nav-item"> <a href="https://keras.io/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Keras" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Keras </span> </a> </li> <li class="devsite-nav-item"> <a href="https://www.tensorflow.org/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: TensorFlow" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > TensorFlow </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"><style> /* Styles inlined from /css/style.css */ [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 40px 0; } @media screen and (max-width: 600px) { [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 16px 0; --devsite-banner-margin: -16px 0 16px; } } @media screen and (max-width: 840px) { [theme=googledevai-theme][layout=full] { --devsite-main-content-padding: 24px 0; --devsite-banner-margin: -24px 0 16px; } } .gemini-page { font-family: var(--gemini-font-primary); font-size: var(--gemini-font-size-base); background-color: var(--gemini-color-background); color: var(--gemini-color-foreground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; display: block; } .gemini-page * { margin: 0; } .devsite-article .gemini-page h1:first-of-type { display: flex; margin-top: inherit; vertical-align: inherit; } .gemini-page *, .gemini-page *:before, .gemini-page *:after { box-sizing: border-box; } .gemini-page ol, .gemini-page ul, .gemini-page li { /* all: unset; */ list-style: none; padding: 0; } .gemini-page img, .gemini-page picture, .gemini-page video, .gemini-page canvas, .gemini-page svg { max-inline-size: 100%; block-size: auto; } .gemini-page input, .gemini-page button, .gemini-page textarea, .gemini-page select { font: inherit; } /* remove link drag and call-out menu on touch */ .gemini-page a, .gemini-page img { -webkit-touch-callout: none; -webkit-user-drag: none; } /* Hide outline for mouse users. */ .gemini-page :focus:not(:focus-visible) { outline: none; } .gemini-page { --gemini-color-white: rgb(255 255 255); --gemini-color-grey-50: #f7f9fd; --gemini-color-grey-100: #f0f3f8; --gemini-color-grey-200: #d2d8e4; --gemini-color-grey-300: #b7becf; --gemini-color-grey-400: #939db6; --gemini-color-grey-500: #828fb1; --gemini-color-grey-600: #2f3543; --gemini-color-grey-700: #1b212d; --gemini-color-grey-800: #161823; --gemini-color-grey-900: #060606; --gemini-color-black: rgb(0 0 0); --gemini-color-gemini-peach: #FFDDB7; --gemini-color-gemini-blue: #368EFE; --gemini-color-gemini-cyan: #4FABFF; --gemini-color-gemini-light-blue: #B1C5FF; --gemini-color-gemini-white: var(--gemini-color-white); --gemini-color-gemini-grey-700: #5F6368; --gemini-color-gemini-grey-900: #202124; --gemini-color-blue: #368efe; --gemini-color-purple-100: #ac87eb; --gemini-color-red-200: #ee4d5d; --gemini-color-green-800: #137333; --gemini-color-blue-800: #185ABC; --gemini-color-blue-gradient: linear-gradient(61deg, #64b8fb 6.28%, #217bfe 76.97%); --gemini-color-pink-gradient: linear-gradient(90deg, #a485fa -104.88%, var(--gemini-color-red-200) 198.78%); --gemini-color-logo-gradient: linear-gradient(90deg, #217bfe 0%, #078efb 33.53%, #ac87eb 70%, #ee4d5d 100%); --gemini-color-primary-button-gradient: linear-gradient(52deg, #0844ff 11.5%, #64b8fb 129.52%); --gemini-color-chart-gradient: linear-gradient(105deg, #446eff 18.71%, #2e96ff 49.8%, #b1c5ff 90.55%); --gemini-color-foreground: var(--gemini-color-white); --gemini-color-background: var(--gemini-color-grey-900); --gemini-branding-button-gradient: linear-gradient(15deg, #217BFE 1.02%, #078EFB 28.51%, #A190FF 80.14%, #BD99FE 102.85%); --gemini-branding-text-gradient: linear-gradient(90deg, #217BFE 0%, #078EFB 33.53%, #AC87EB 67.74%, #EE4D5D 100%); --gemini-gradient-linear-colors: var(--gemini-color-gemini-blue) 5.96%, var(--gemini-color-gemini-cyan) 56.89%, var(--gemini-color-gemini-light-blue) 93.53%; --gemini-gradient-linear: linear-gradient(53deg, #0260FF 9.29%, #40A2FF 48.23%, #A8BEFF 82.56%); --gemini-text-gradient-light-blue: linear-gradient(69deg, #AABDF4 16.42%, #FFF 77.56%, #A8BEFF 124.91%); } .gemini-page .gemini-text-color-grey-400 { color: var(--gemini-color-grey-400); } .gemini-page .gemini-text-color-grey-500 { color: var(--gemini-color-grey-500); } .gemini-page { --gemini-font-primary: "Google Sans", Arial, Helvetica, sans-serif; --gemini-font-secondary: "Roboto Mono", Courier, monospace; --gemini-font-tertiary: "Google Sans Text", Arial, Helvetica, sans-serif; --gemini-font-size-base: 16px; --gemini-size-grid-margin: 20px; --gemini-size-max-width: calc(1440px + var(--gemini-size-grid-margin) * 2); --gemini-size-grid-gap: 8px; --devsite-main-content-padding-top: 40px; } @media (min-width: 600px) { .gemini-page { --gemini-size-grid-margin: 40px; --gemini-size-grid-gap: 20px; } } @media (min-width: 1440px) { .gemini-page { --gemini-size-grid-margin: 80px; } } .gemini-page { --gemini-border-radius-d16: 8px; --gemini-border-radius-d24: 16px; --gemini-border-radius-d32: 24px; } @media (min-width: 834px) { .gemini-page { --gemini-border-radius-d16: 16px; --gemini-border-radius-d24: 24px; --gemini-border-radius-d32: 32px; } } .gemini-page { --gemini-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --gemini-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --gemini-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --gemini-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); --gemini-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); --gemini-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); --gemini-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --gemini-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --gemini-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --gemini-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --gemini-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --gemini-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); --gemini-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --gemini-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --gemini-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --gemini-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --gemini-ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --gemini-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --gemini-ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1); --gemini-viewport-height: 100vh; --gemini-100vh: var(--gemini-viewport-height, 100vh); } .gemini-center-wrapper { display: flex; justify-content: center; align-items: center; } .gemini-page .gemini-type-d1, .gemini-page .gemini-type-d2, .gemini-page .gemini-type-d3, .gemini-page .gemini-type-d4 { font-family: var(--gemini-font-primary); line-height: 100%; font-weight: 400; } .gemini-page .gemini-type-d1 { font-size: 3.5rem; letter-spacing: -0.025862069em; } .gemini-page .gemini-type-d2 { font-size: 3rem; letter-spacing: -0.021em; } .gemini-page .gemini-type-d3 { font-size: 2.75rem; letter-spacing: -0.05rem; line-height: 105%; } .gemini-page .gemini-type-d4 { font-size: 2.25rem; line-height: 110%; letter-spacing: -0.05rem; } @media (min-width: 834px) { .gemini-page .gemini-type-d4 { font-size: 4rem; letter-spacing: -0.0125em; } } .gemini-page .gemini-type-h1, .gemini-page .gemini-type-h2, .gemini-page .gemini-type-h3, .gemini-page .gemini-type-h4 { font-family: var(--gemini-font-primary); line-height: 120%; font-weight: 400; } .gemini-page .gemini-type-h1 { font-size: 1.625rem; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h2 { font-size: 1.625rem; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h3 { font-size: 1.5rem; line-height: 120%; letter-spacing: -0.03125rem; } .gemini-page .gemini-type-h4 { font-size: 1.375rem; } .gemini-page .gemini-type-t1-medium, .gemini-page .gemini-type-t1, .gemini-page .gemini-type-t2, .gemini-page .gemini-type-t3 { font-family: var(--gemini-font-primary); } .gemini-page .gemini-type-t1-medium { font-size: 1rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-t1 { font-size: 1rem; font-weight: 400; line-height: 140%; } .gemini-page .gemini-type-t2 { font-size: 0.875rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-t3 { font-size: 0.75rem; font-weight: 500; line-height: 140%; } .gemini-page .gemini-type-b1, .gemini-page .gemini-type-b2 { font-family: var(--gemini-font-primary); font-weight: 400; line-height: 160%; } .gemini-page .gemini-type-b1 { font-size: 0.875rem; } .gemini-page .gemini-type-b2 { font-size: 0.875rem; line-height: 160%; } .gemini-page .gemini-type-btn { font-family: var(--gemini-font-primary); font-size: 0.875rem; font-weight: 500; line-height: 1.625em; } .gemini-page .gemini-type-btn-secondary { font-size: 0.875rem; } .gemini-page .gemini-type-code, .gemini-page .gemini-type-code pre { font-family: var(--gemini-font-secondary); font-size: 0.75rem; font-weight: 400; line-height: 1.666em; padding: 0; } .gemini-page .gemini-type-l1, .gemini-page .gemini-type-l2 { font-family: var(--gemini-font-primary); text-transform: uppercase; font-weight: 700; line-height: 140%; letter-spacing: 0.0416666667em; } .gemini-page .gemini-type-l1 { font-size: 0.75rem; } .gemini-page .gemini-type-l2 { font-size: 0.75rem; } .gemini-page .gemini-type-l3 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0; } @media (min-width: 834px) { .gemini-page .gemini-type-h3 { font-size: 2rem; letter-spacing: auto; } .gemini-page .gemini-type-h4 { font-size: 1.75rem; } .gemini-page .gemini-type-t1-medium { font-size: 1.25rem; } .gemini-page .gemini-type-t1 { font-size: 1.25rem; } .gemini-page .gemini-type-t2 { font-size: 1rem; line-height: 160%; } .gemini-page .gemini-type-t3 { font-size: 0.875rem; } .gemini-page .gemini-type-b1 { font-size: 1rem; } .gemini-page .gemini-type-b2 { font-size: 0.875rem; line-height: 160%; } .gemini-page .gemini-type-btn { font-size: 1rem; } .gemini-page .gemini-type-code, .gemini-page .gemini-type-code pre { line-height: 1.666em; font-size: 1rem; } .gemini-page .gemini-type-l1 { font-size: 0.875rem; } .gemini-page .gemini-type-l2 { font-size: 0.75rem; } .gemini-page .gemini-type-l3 { font-size: 0.75rem; } .gemini-page .gemini-type-d1 { font-size: 6.75rem; /*letter-spacing: -0.1875rem;*/ } .gemini-page .gemini-type-d2 { font-size: 6rem; } .gemini-page .gemini-type-d3 { font-size: 4.5rem; letter-spacing: -0.0111111111em; line-height: 110%; } .gemini-page .gemini-type-h1 { font-size: 2.8125rem; } .gemini-page .gemini-type-h2 { font-size: 2.25rem; } } .gemini-page { --gemini-space-8: 8px; --gemini-space-12: 12px; --gemini-space-16: 16px; --gemini-space-24: 24px; --gemini-space-32: 32px; --gemini-space-40: 40px; --gemini-space-48: 48px; --gemini-space-56: 56px; --gemini-space-64: 64px; --gemini-space-72: 72px; --gemini-space-80: 80px; --gemini-space-88: 88px; --gemini-space-96: 96px; --gemini-space-120: 120px; --gemini-space-140: 140px; --gemini-space-164: 164px; --gemini-space-180: 180px; --gemini-space-200: 200px; --gemini-space-220: 220px; --gemini-space-240: 240px; --gemini-space-264: 264px; --gemini-space-280: 280px; --gemini-space-320: 320px; --gemini-space-360: 360px; --gemini-space-440: 400px; --gemini-space-d8: var(--gemini-space-8); --gemini-space-d12: var(--gemini-space-12); --gemini-space-d16: var(--gemini-space-16); --gemini-space-d24: var(--gemini-space-16); --gemini-space-d32: var(--gemini-space-24); --gemini-space-d40: var(--gemini-space-32); --gemini-space-d48: var(--gemini-space-40); --gemini-space-d64: var(--gemini-space-48); --gemini-space-d72: var(--gemini-space-56); --gemini-space-d88: var(--gemini-space-64); --gemini-space-d120: var(--gemini-space-88); --gemini-space-d140: var(--gemini-space-120); --gemini-space-d180: var(--gemini-space-120); --gemini-space-d220: var(--gemini-space-180); --gemini-space-d264: var(--gemini-space-180); --gemini-space-d280: var(--gemini-space-200); --gemini-space-d320: var(--gemini-space-220); --gemini-space-d360: var(--gemini-space-240); --gemini-space-d440: var(--gemini-space-264); } @media (min-width: 834px) { .gemini-page { --gemini-space-d8: var(--gemini-space-8); --gemini-space-d12: var(--gemini-space-12); --gemini-space-d16: var(--gemini-space-16); --gemini-space-d24: var(--gemini-space-24); --gemini-space-d32: var(--gemini-space-32); --gemini-space-d40: var(--gemini-space-40); --gemini-space-d48: var(--gemini-space-48); --gemini-space-d64: var(--gemini-space-64); --gemini-space-d72: var(--gemini-space-72); --gemini-space-d88: var(--gemini-space-88); --gemini-space-d120: var(--gemini-space-120); --gemini-space-d140: var(--gemini-space-140); --gemini-space-d180: var(--gemini-space-180); --gemini-space-d220: var(--gemini-space-220); --gemini-space-d264: var(--gemini-space-264); --gemini-space-d280: var(--gemini-space-280); --gemini-space-d320: var(--gemini-space-320); --gemini-space-d360: var(--gemini-space-360); --gemini-space-d440: var(--gemini-space-440); } } .gemini-page .gemini-space-d8 { margin-block-end: var(--gemini-space-d8); } .gemini-page .gemini-space-d12 { margin-block-end: var(--gemini-space-d12); } .gemini-page .gemini-space-d16 { margin-block-end: var(--gemini-space-d16); } .gemini-page .gemini-space-d24 { margin-block-end: var(--gemini-space-d24); } .gemini-page .gemini-space-d32 { margin-block-end: var(--gemini-space-d32); } .gemini-page .gemini-space-d40 { margin-block-end: var(--gemini-space-d40); } .gemini-page .gemini-space-d48 { margin-block-end: var(--gemini-space-d48); } .gemini-page .gemini-space-d64 { margin-block-end: var(--gemini-space-d64); } .gemini-page .gemini-space-d72 { margin-block-end: var(--gemini-space-d72); } .gemini-page .gemini-space-d88 { margin-block-end: var(--gemini-space-d88); } .gemini-page .gemini-space-d120 { margin-block-end: var(--gemini-space-d120); } .gemini-page .gemini-space-d140 { margin-block-end: var(--gemini-space-d140); } .gemini-page .gemini-space-d164 { margin-block-end: var(--gemini-space-d164); } .gemini-page .gemini-space-d180 { margin-block-end: var(--gemini-space-d180); } .gemini-page .gemini-space-d220 { margin-block-end: var(--gemini-space-d220); } .gemini-page .gemini-space-d264 { margin-block-end: var(--gemini-space-d264); } .gemini-page .gemini-space-d280 { margin-block-end: var(--gemini-space-d280); } body[theme=googledevai-theme][layout=full] .devsite-main-content { max-width: none; padding-bottom: 0; background-color: #060606; } body[theme=googledevai-theme][layout=full] .devsite-article-body { margin-top: 0; background-color: var(--gemini-color-background); } body[theme=googledevai-theme] .devsite-banner-announcement { position: relative; z-index: 10; } devsite-header .devsite-product-id-row { display: none; } .gemini-page .gemini-decoration-link { text-decoration: underline; color: var(--gemini-color-blue-400); display: inline-flex; align-items: center; gap: var(--gemini-space-8); } .gemini-page .gemini-layout-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gemini-size-grid-gap); } .gemini-page .gemini-layout-max-width { max-inline-size: var(--gemini-size-max-width); padding-inline: var(--gemini-size-grid-margin); margin-inline: auto; } .gemini-page .gemini-layout-zstack { display: grid; } .gemini-page .gemini-layout-zstack > * { grid-area: 1/-1; } .gemini-page .gemini-layout-inline { display: inline-flex; flex-direction: row; align-items: center; gap: var(--gemini-space, 8px); } .gemini-page .gemini-layout-stack { display: flex; flex-direction: column; justify-content: flex-start; } .gemini-page .gemini-layout-stack > * { margin-block: 0; } .gemini-page .gemini-layout-stack > * + * { margin-block-start: var(--gemini-space, 1rem); } .gemini-page .gemini-shape-box { border-radius: var(--gemini-corner-radius-medium); } .gemini-page .gemini-shape-rounded-container { border-radius: 24px; } .gemini-page .gemini-shape-pill-label { display: inline-flex; align-items: center; background: var(--gemini-shape-pill-background, rgba(7, 110, 255, 0.2)); color: var(--gemini-label-color, #b1c5ff); padding: 6px 11px; border-radius: 99em; } @media (min-width: 834px) { .gemini-page .gemini-layout-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 1024px) { .gemini-page .gemini-layout-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /** Gemini: Gradient Text */ .gemini-gradient-text { --gemini-_gradient: var(--gemini-text-gradient, var(--gemini-color-blue-gradient)); } .gemini-gradient-text span { background: var(--gemini-_gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } /** Gemini: Youtube Video */ .gemini-youtube { position: relative; inline-size: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; border: 4px solid var(--gemini-color-grey-800); transition: border 0.2s var(--gemini-ease-in-out-quad); --gemini-hover-scale: 0.1; } .gemini-youtube:has(:hover) { border: 4px solid var(--gemini-color-blue); } .gemini-youtube:has(:hover) .gemini-youtube__play-button { transform: scale(calc(1 + var(--gemini-hover-scale))); } @media (min-width: 834px) { .gemini-youtube { border-radius: 32px; } } .gemini-youtube-poster { cursor: pointer; line-height: 0; } .gemini-youtube-poster :is(img, video) { height: 100%; width: 100%; } .gemini-video-overlay { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 12px; cursor: pointer; background-color: rgba(0, 0, 0, 0.05); pointer-events: none; } @media (min-width: 834px) { .gemini-video-overlay { gap: 48px; } } .gemini-youtube__title { max-width: 214px; display: inline-block; text-align: center; position: relative; z-index: 5; } @media (min-width: 834px) { .gemini-youtube__title { max-width: 620px; } } @media (max-width: 834px) { .gemini-youtube__title { font-size: 26px !important; } } .gemini-youtube__play-button { all: unset; height: 32px; width: 32px; border-radius: 50%; background: var(--gemini-color-white); display: grid; place-items: center; position: relative; z-index: 5; transition: transform 0.3s var(--gemini-ease-in-out-quad); box-shadow: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px 0 rgba(60, 64, 67, 0.32); } @media (min-width: 834px) { .gemini-youtube__play-button { height: 64px; width: 64px; } } .gemini-youtube__play-button svg { height: 16px; width: 16px; } @media (min-width: 834px) { .gemini-youtube__play-button svg { height: 28px; width: 28px; } } @media (min-width: 834px) { .gemini-anchor-padding { padding-block-start: 40px; } } @media (min-width: 834px) { .gemini-only-mobile { display: none; } } .gemini-only-desktop { display: none; } @media (min-width: 834px) { .gemini-only-desktop { display: block; } } /* Spinner */ .gemini-spinner { block-size: 48px; inline-size: 48px; flex-shrink: 0; animation: gemini-spinner-animation 1.6s linear infinite; } @keyframes gemini-spinner-animation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Gemini: Item grid */ .gemini-page .gemini-card-grid { row-gap: 8px; } @media (min-width: 834px) { .gemini-page .gemini-card-grid { row-gap: var(--gemini-size-grid-gap); } } .gemini-page .gemini-card-grid > * { grid-column: -1/1; } @media screen and (min-width: 834px) { .gemini-page .gemini-card-grid > * { grid-column: span 4/span 8; } } @media screen and (min-width: 1024px) { .gemini-page .gemini-card-grid > * { grid-column: span 4/span 12; } } .gemini-page .gemini-layout-small-card { align-items: flex-start; display: flex; padding: 24px; block-size: 100%; } @media screen and (min-width: 600px) { .gemini-page .gemini-layout-small-card { padding-block: 32px; padding-inline: 32px 40px; } } .gemini-page .gemini-layout-small-card.gemini-has-icon { gap: 24px; } @media screen and (min-width: 600px) { .gemini-page .gemini-layout-small-card.gemini-has-icon { gap: 32px; } } .gemini-page .gemini-layout-small-card.gemini-has-icon .gemini-icon { flex-shrink: 0; inline-size: 32px; line-height: 0; } .gemini-page a.gemini-reset-link { text-decoration: none; color: inherit; } .gemini-page .gemini-lottie-lines svg path { vector-effect: non-scaling-stroke; stroke-width: 1.5px !important; } /* ARROW LINK */ .gemini-arrow-link { color: var(--gemini-link-color, var(--gemini-color-white)); display: inline-flex; position: relative; text-decoration: none; text-underline-offset: 3px; justify-content: center; } .gemini-arrow-link .gemini-arrow { display: inline-block; inline-size: 16px; inset-block-start: calc(50% - 8px); inset-inline-start: calc(100% + 3px); line-height: 0; position: absolute; } .gemini-arrow-link:hover { text-decoration: underline; } /* Gemini Pill Button */ .gemini-page .gemini-btn { --gemini-_border: var(--gemini-button-border, var(--gemini-color-grey-600)); --gemini-_background: var(--gemini-button-fill, transparent); --gemini-_text: var(--gemini-button-text, inherit); border: 0; appearance: none; text-decoration: none; position: relative; cursor: pointer; color: var(--gemini-_text); background-color: var(--gemini-_background); user-select: none; display: inline-flex; justify-content: center; align-items: center; border-radius: 99em; padding: 15px 24px; leading-trim: both; height: auto; } .gemini-page .gemini-btn span { position: relative; z-index: 1; } .gemini-page .gemini-btn::before { position: absolute; content: ""; inset: 0; border-radius: inherit; will-change: opacity; transition-property: opacity; transition-duration: 0.25s; opacity: 0; } .gemini-page .gemini-btn:hover::before { opacity: 1; } .gemini-page .gemini-btn.gemini-disabled { pointer-events: none; opacity: 0.5; } .gemini-page .gemini-btn.gemini-has--icon > span { display: inline-flex; align-items: center; gap: var(--gemini-icon-gap, 12px); } /* Gemini Primary Button */ .gemini-page .gemini-btn.gemini-primary { --gemini-_text: var(--gemini-button-text, var(--gemini-color-white)); --gemini-_background: var(--gemini-button-fill, var(--gemini-color-gemini-blue)); } .gemini-page .gemini-btn.gemini-primary::before { background-color: var(--gemini-color-blue); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); } .gemini-page .gemini-btn.gemini-primary:hover::before { opacity: 1; } /* Gemini Secondary Button */ .gemini-page .gemini-btn.gemini-secondary { border: 1px solid var(--gemini-_border); transition: color 0.18s ease-in-out, background 0.2s ease-in-out; } .gemini-page .gemini-btn.gemini-secondary::before { background-color: var(--gemini-button-hover, rgba(255, 255, 255, 0.09)); } /* Gemini Tertiary Button */ .gemini-page .gemini-btn.gemini-tertiary { --gemini-_text: var(--gemini-button-text, var(--gemini-color-white)); padding-inline: 20px; padding-block: 10px; transition: transform 0.18s ease-in-out, background 0.2s ease-in-out, color 0.2s ease-in-out; border: 1px solid var(--gemini-_border); } .gemini-page .gemini-btn.gemini-tertiary:hover { background: var(--gemini-button-hover-background, var(--gemini-color-white)); color: var(--gemini-button-hover-text, var(--gemini-color-black)); } .gemini-page .gemini-btn.gemini-tertiary.gemini-has--icon { padding-inline: 18px 20px; } .gemini-page .gemini-btn.gemini-tertiary.gemini-has--icon > span { gap: 8px; } .gemini-page .gemini-btn.gemini-tertiary::before { background-color: var(--gemini-button-hover); } /* Gemini Gradient Button */ .gemini-page .gemini-btn.gemini-gradient { position: relative; --gemini-_background: var( --gemini-button-fill, var(--gemini-color-primary-button-gradient) ); background-image: var(--gemini-_background); transition: color 0.18s; } .gemini-page .gemini-btn.gemini-gradient::before { background: var(--gemini-button-hover-background, var(--gemini-color-white)); } .gemini-page .gemini-btn.gemini-gradient:hover { color: var(--gemini-button-hover-color, var(--gemini-color-blue, #368efe)); } .gemini-page .gemini-btn.gemini-gradient:hover::before { opacity: 1; } @media (min-width: 834px) { .gemini-page .gemini-btn { padding-block: 16px; } } /* CARD LIST */ .gemini-card-list { display: flex; flex-direction: column; row-gap: 12px; } @media screen and (min-width: 834px) { .gemini-card-list { row-gap: 16px; } } /* CARD GRID */ .gemini-cards-wrapper { display: grid; gap: 12px; grid-template-columns: repeat(1, 1fr); } @media screen and (min-width: 834px) { .gemini-cards-wrapper { gap: var(--gemini-size-grid-gap); } } @media screen and (min-width: 834px) { .gemini-cards-wrapper.gemini-row-of-two { grid-template-columns: repeat(2, 1fr); } } .gemini-cards-wrapper.gemini-row-of-two > * { grid-column: 1 span/auto; } /* GEMINI CARD GRID LIST */ .gemini-card-grid-list { --_gemini-colunm-amount: var(--gemini-grid-colunm-amount, 1); display: grid; gap: 12px; grid-template-columns: repeat(var(--_gemini-colunm-amount), 1fr); } @media screen and (min-width: 1024px) { .gemini-card-grid-list { --_gemini-colunm-amount: var(--gemini-grid-colunm-amount, 2); gap: var(--gemini-size-grid-gap); } .gemini-card-grid-list.gemini-row-of-three { --gemini-grid-colunm-amount: 3; } .gemini-card-grid > * { grid-column: 2 span/auto; } } /* GUIDE CARD LIST */ .gemini-card-guides { align-items: stretch; display: flex; flex-direction: column; gap: 12px; } .gemini-card-guides > * { flex-basis: 100%; inline-size: 100%; } @media screen and (min-width: 1024px) { .gemini-card-guides { flex-direction: row; flex-wrap: wrap; gap: var(--gemini-size-grid-gap); justify-content: center; } .gemini-card-guides > * { flex-basis: calc(33.3333333333% - var(--gemini-size-grid-gap) * 2); flex-grow: 1; min-width: 250px; } } /* BACKGROUND WRAPPER */ .gemini-background-wrapper { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: var(--gemini-border-radius-d32); display: block; inline-size: 100%; overflow: hidden; padding-block: var(--gemini-wrapper-padding-top, var(--gemini-space-d120)); padding-inline: 24px; position: relative; } @media (min-width: 1024px) { .gemini-background-wrapper { padding-inline: 0; } } .gemini-background-wrapper.gemini-background-dark { --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-dark.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-grey-700)); } .gemini-background-wrapper.gemini-background-dark .gemini-gradient-CTA_wrapper { background-image: none; background-color: var(--gemini-color-grey-800); } .gemini-background-wrapper.gemini-background-light-blue { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-title-color: var(--gemini-color-white); background-image: url("/images/system/wrapper-background-light-blue.jpg"); } .gemini-background-wrapper.gemini-background-green { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-green.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-green-800)); } .gemini-background-wrapper.gemini-background-dark-blue { --gemini-section-copy-color: var(--gemini-color-white); --gemini-section-copy-color: var(--gemini-color-grey-400); background-image: url("/images/system/wrapper-background-dark-blue.jpg"); border: 1px solid var(--gemini-wrapper-border-color, var(--gemini-color-blue-800)); } /* GEMINI TEXT LIST */ .gemini-text-list.gemini-layout-grid { row-gap: 0; } .gemini-text-list.gemini-has-animation .gemini-text-list-headline, .gemini-text-list.gemini-has-animation .gemini-text-list-item { opacity: 0; transform: translateY(20px); will-change: transform; transition-property: opacity, transform; transition-duration: 0.5s, 0.6s; transition-delay: calc(var(--gemini-text-animation-delay) * 0.12s + 0.3s); transition-timing-function: var(--gemini-ease-out-quad); } .gemini-text-list.gemini-has-animation.gemini-onscreen .gemini-text-list-headline, .gemini-text-list.gemini-has-animation.gemini-onscreen .gemini-text-list-item { opacity: 1; transform: translateY(0); } .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 1/-1; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 2/span 6; } } @media (min-width: 1024px) { .gemini-text-list .gemini-text-list-headline, .gemini-text-list .gemini-text-list-wrapper { grid-column: 3/span 8; } } .gemini-text-list .gemini-text-list-headline { text-align: center; } .gemini-text-list .gemini-text-list-item { display: grid; grid-template-columns: repeat(8, 1fr); padding-block: 16px 32px; border-top: 1px solid var(--gemini-color-grey-700); column-gap: var(--gemini-size-grid-gap); row-gap: 8px; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item { padding-block: 24px 40px; } } .gemini-text-list .gemini-text-list-item .gemini-title-wrapper { grid-column: 1/-1; } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item .gemini-title-wrapper { grid-column: span 3/auto; } .gemini-text-list .gemini-text-list-item .gemini-title-wrapper > * { max-inline-size: 202px; } } .gemini-text-list .gemini-text-list-item .gemini-description-wrapper { grid-column: 1/-1; } .gemini-text-list .gemini-text-list-item .gemini-description-wrapper > * { max-inline-size: 450px; color: var(--gemini-color-grey-400); } @media (min-width: 834px) { .gemini-text-list .gemini-text-list-item .gemini-description-wrapper { grid-column: span 5/auto; } } /* GEMINI CARD GRID ITEM */ .gemini-card-grid-item .gemini-card-content { --_gemini-card-arrow-color: var(--gemini-card-arrow-color, var(--gemini-color-blue)); --_gemini-copy-color: var(--gemini-card-description-color, var(--gemini-color-grey-400)); align-items: flex-start; color: inherit; display: flex; flex-direction: column; gap: 16px; position: relative; text-decoration: none; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content { gap: 24px; } } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default { --_gemini-card-logo-size: 64px; flex-direction: column; padding: 24px; } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default .gemini-card-link-decorator { inset-block-start: 24px; inset-inline-end: 24px; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default { --_gemini-card-logo-size: 126px; align-items: center; flex-direction: row; padding-block: 16px; padding-inline: 16px 32px; } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-default .gemini-card-link-decorator { inset-block-start: 16px; inset-inline-end: 16px; } } .gemini-card-grid-item .gemini-card-content.gemini-card-layout-compact { --_gemini-card-logo-size: 44px; align-items: center; flex-direction: row; padding-block: 16px; padding-inline: 16px 24px; } @media (min-width: 834px) { .gemini-card-grid-item .gemini-card-content.gemini-card-layout-compact { --_gemini-card-logo-size: 86px; padding-inline-end: 32px; } } .gemini-card-grid-item .gemini-card-content.gemini-theme-light-blue { --gemini-card-description-color: var(--gemini-color-grey-100); --gemini-card-arrow-color: var(--gemini-color-white); } .gemini-card-grid-item .gemini-card-link-decorator { inset-block-start: 16px; inset-inline-end: 16px; position: absolute; color: var(--_gemini-card-arrow-color); } .gemini-card-grid-item figure { display: inline-block; flex-shrink: 0; inline-size: var(--_gemini-card-logo-size); line-height: 0; } .gemini-card-grid-item figure img { max-inline-size: 100%; } .gemini-card-grid-item .gemini-card-description { color: var(--_gemini-copy-color); } .gemini-value-card { text-align: center; } .gemini-value-card.gemini-with-background { background-image: url("/images/system/value-card-background-dark.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: var(--gemini-border-radius-d24); overflow: hidden; padding-block: 40px; padding-inline: 24px; } @media (min-width: 834px) { .gemini-value-card.gemini-with-background { padding-inline: 40px; padding-block: 64px; } .gemini-value-card.gemini-with-background.gemini-with-icon { padding-block: 48px 64px; } } .gemini-value-card.gemini-with-background .gemini-card-icon { inline-size: 40px; margin-inline: auto; } @media (min-width: 834px) { .gemini-value-card.gemini-with-background .gemini-card-icon { inline-size: 48px; } } .gemini-value-card .gemini-card-description { color: var(--gemini-color-grey-400); } .gemini-feature-card { --_gemini-icon-size: 44px; } @media screen and (min-width: 834px) { .gemini-feature-card { --_gemini-icon-size: 64px; } } .gemini-feature-card .gemini-card-icon { inline-size: var(--gemini-card-icon-size, var(--_gemini-icon-size)); margin-inline: auto; } /* GUIDE CARD CENTERED ITEM */ .gemini-card-centered { --gemini-button-border: var(--gemini-color-grey-700); align-items: center; color: var(--gemini-color-white); display: flex; flex-direction: column; overflow: hidden; padding: 24px; text-align: center; text-decoration: none; } @media (min-width: 834px) { .gemini-card-centered { padding: 32px 24px; block-size: 100%; } } .gemini-card-centered.gemini-theme-light-blue { --gemini-card-description-color: var(--gemini-color-grey-100); --gemini-card-arrow-color: var(--gemini-color-white); --gemini-button-border: rgba(246, 248, 250, 0.5); } .gemini-card-centered .gemini-card-icon { align-items: center; block-size: 40px; inline-size: 40px; line-height: 0; } @media screen and (min-width: 834px) { .gemini-card-centered .gemini-card-icon { block-size: 56px; inline-size: 56px; } } .gemini-card-centered .gemini-card-title { color: var(--gemini-color-white); padding-inline: 26px; } .gemini-card-centered .gemini-card-content { color: var(--gemini-card-description-color, var(--gemini-color-grey-400)); } .gemini-card-centered .gemini-btn { --gemini-button-fill: transparent; --gemini-button-text: var(--gemini-color-white); margin-top: auto; } .gemini-card-centered:hover .gemini-btn { background: var(--gemini-color-white); color: var(--gemini-color-grey-900); } /** Gemini Section: CTA */ .gemini-section-cta { --gemini-_subtitle-color: var( --gemini-section-subtitle-color, var(--gemini-color-grey-500) ); --gemini-_text-alignment: var(--gemini-section-text-alignment, center); --gemini-_section-margin: var(--gemini-section-margin, 0 auto); --gemini-_title-color: var(--gemini-section-title-color, var(--gemini-color-grey-100)); --devsite-heading-color: var(--gemini-_title-color); --gemini-_copy-color: var(--gemini-section-copy-color, var(--gemini-color-grey-400)); --gemini-animation-ease: var(--gemini-ease-out-quad); --gemini-animation-duration: 0.5s; --gemini-animation-stagger: 0.16s; --gemini-animation-delay: 0s; --gemini-_title-order: calc(var(--gemini-animation-title-order, 2) - 1); --gemini-_copy-order: calc(var(--gemini-animation-copy-order, 3) - 1); --gemini-_buttons-order: calc(var(--gemini-animation-buttons-order, 4) - 1); --gemini-_heading-max-width: var(--gemini-heading-max-width, 630px); --gemini-_copy-max-width: var(--gemini-copy-max-width, 630px); } .gemini-section-cta .gemini-cta { text-align: var(--gemini-_text-alignment); } .gemini-section { outline: none; } .gemini-section-cta .gemini-section { margin: var(--gemini-_section-margin); } .gemini-section-cta .gemini-section__subtitle { color: var(--gemini-_subtitle-color); clip-path: fill-box; } .gemini-section-cta .gemini-section__subtitle > * { display: block; transform: translateY(100px); opacity: 0; transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) + var(--gemini-animation-delay)) var(--gemini-animation-ease), opacity 0.1s linear; } .gemini-section-cta .gemini-onscreen .gemini-section__subtitle > * { transform: translateY(0%); opacity: 1; } .gemini-section-cta .gemini-section__title { color: var(--gemini-_title-color); clip-path: fill-box; max-inline-size: var(--gemini-_heading-max-width); } .gemini-section-cta .gemini-section__title > * { display: block; transform: translateY(100%); transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) * var(--gemini-_title-order) + var(--gemini-animation-delay)) var(--gemini-animation-ease); padding-block-end: 0.04em; } .gemini-section-cta .gemini-section__title h1:first-of-type { display: block; } .gemini-section-cta .gemini-onscreen .gemini-section__title > * { transform: translateY(0%); } .gemini-section-cta .gemini-section__copy { color: var(--gemini-_copy-color); max-inline-size: var(--gemini-_copy-max-width); transform: translateY(60px); opacity: 0; transition: transform var(--gemini-animation-duration) calc(var(--gemini-animation-stagger) * var(--gemini-_copy-order) + var(--gemini-animation-delay)) var(--gemini-animation-ease), opacity 0.05s calc(var(--gemini-animation-stagger) * var(--gemini-_copy-order) + var(--gemini-animation-delay)) linear; } .gemini-section-cta .gemini-onscreen .gemini-section__copy { transform: translateY(0%); opacity: 1; } .gemini-section-cta .gemini-section__buttons { display: flex; gap: 12px; align-items: center; flex-direction: column; transform: translateY(60px); opacity: 0; transition: transform 0.5s calc(var(--gemini-animation-stagger) * var(--gemini-_buttons-order)) var(--gemini-animation-ease), opacity 0.15s calc(var(--gemini-animation-stagger) * var(--gemini-_buttons-order)) linear; } .gemini-section-cta .gemini-onscreen .gemini-section__buttons { transform: translateY(0%); opacity: 1; } @media (min-width: 768px) { .gemini-section-cta .gemini-section__buttons { justify-content: center; flex-direction: row; } } /** Gemini: Animated Rings */ .gemini-animated-rings-element { --gemini-_large-ring-size: min( max( var(--gemini-large-ring-size, 87.5vw), var(--gemini-large-ring-min-size, 872px) ), var(--gemini-large-ring-max-size, 1260px) ); --gemini-_small-ring-size: min( max( var(--gemini-small-ring-size, 77.5vw), var(--gemini-small-ring-min-size, 770px) ), var(--gemini-small-ring-max-size, 1116px) ); --gemini-_small-ring-animation-duration: var(--gemini-small-ring-animation-duration, 16s); --gemini-_large-ring-animation-duration: var(--gemini-large-ring-animation-duration, 10s); } .gemini-animated-rings-element { display: block; block-size: 10px; inline-size: 10px; pointer-events: none; position: absolute; inset-block-start: calc(50% - 1px); inset-inline-start: calc(50% - 1px); } .gemini-animated-rings-element .gemini-small-ring { display: block; inline-size: var(--gemini-_small-ring-size); block-size: var(--gemini-_small-ring-size); position: absolute; inset-inline-start: calc(var(--gemini-_small-ring-size) * -0.5); inset-block-start: calc(var(--gemini-_small-ring-size) * -0.5); transform: scale(0); transition: transform 1.6s 0.1s var(--gemini-ease-out-quart); } .gemini-animated-rings-element .gemini-small-ring > * { display: block; animation: gemini-animated-rings-spin var(--gemini-_small-ring-animation-duration) linear infinite; } .gemini-animated-rings-element .gemini-large-ring { inline-size: var(--gemini-_large-ring-size); block-size: var(--gemini-_large-ring-size); position: absolute; inset-inline-start: calc(var(--gemini-_large-ring-size) * -0.5); inset-block-start: calc(var(--gemini-_large-ring-size) * -0.5); transform: scale(0); transition: transform 1.6s var(--gemini-ease-out-quart); } .gemini-animated-rings-element .gemini-large-ring > * { display: block; animation: gemini-animated-rings-spin var(--gemini-_large-ring-animation-duration) linear infinite reverse; } .gemini-animated-rings-element .gemini-onscreen .gemini-small-ring, .gemini-animated-rings-element .gemini-onscreen .gemini-large-ring { transform: scale(1); } @keyframes gemini-animated-rings-spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } .gemini-section-ring-container { --_gemini-rings-offset-y: var(--gemini-rings-section-offset-y, -50%); block-size: 100vw; inline-size: 100vw; left: 50%; max-height: 1300px; max-width: 1300px; min-height: 872px; overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, var(--_gemini-rings-offset-y)); z-index: 0; display: none; } @media (min-width: 600px) { .gemini-section-ring-container { display: block; } } @media (min-width: 834px) { .gemini-section-ring-container { inline-size: calc(100vw - 20px); block-size: calc(100vw - 20px); } } .gemini-section-ring-container .gemini-rings { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } /* RING GRADIENT COVER */ .gemini-has-ring { position: relative; z-index: 4; } .gemini-gradient-cover--top, .gemini-gradient-cover--bottom { position: relative; z-index: 7; background: var(--gemini-color-background); } .gemini-gradient-cover--top *, .gemini-gradient-cover--bottom * { position: relative; z-index: 7; } .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { content: ""; position: absolute; inset-inline-start: 50%; block-size: var(--gemini-gradient-height, 300px); inline-size: 97vw; max-inline-size: 1440px; pointer-events: none; z-index: 1; display: none; } @media (min-width: 600px) { .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { display: block; } } @media (min-width: 834px) { .gemini-gradient-cover--top:before, .gemini-gradient-cover--bottom:after { block-size: var(--gemini-gradient-height, 450px); } } .gemini-gradient-cover--top:before { inset-block-start: 0; transform: translate(-50%, var(--gemini-gradient-y, -60%)); background: linear-gradient(0, #060606 50%, rgba(6, 6, 6, 0) 100%); /*#060606*/ } .gemini-gradient-cover--bottom:after { inset-block-end: 0; transform: translate(-50%, var(--gemini-gradient-y, 50%)); background: linear-gradient(180deg, #060606 50%, rgba(6, 6, 6, 0) 100%); /*#060606*/ } /** Gradient Box */ .gemini-gradient-box { --_gemini-box-radius: var(--gemini-gradient-box-radius, 16px); --_gemini-border-width: var(--gemini-gradient-box-border-width, 2px); --_box-border-color: var(--gradient-box-border-color, linear-gradient( 93deg, #076eff 0%, #0c0c0d 33%, #076eff 68.5%, #0c0c0d 98.75% )); background: var(--_box-border-color); border-radius: var(--_gemini-box-radius); bottom: 0; content: ""; display: block; left: 0; margin: 0; position: relative; right: 0; top: 0; transition: background 0.3s ease; } @media (min-width: 834px) { .gemini-gradient-box { --_gemini-box-radius: var(--gemini-gradient-box-radius, 32px); } } .gemini-gradient-box_wrapper { background-clip: padding-box; background-color: #060606; background-image: var(--_gemini-gradient-background); background-position: center center; background-repeat: no-repeat; background-size: 110% 110%; border-radius: var(--_gemini-box-radius); border: solid var(--_gemini-border-width) transparent; box-sizing: border-box; height: 100%; margin: 0; padding: 2px; position: relative; transform: translate3d(0, 0, 0); width: 100%; } .gemini-gradient-box__inner { border-radius: var(--_gemini-box-radius); height: 100%; width: 100%; } .gemini-gradient-box--custom { --_box-border-color: var(--gradient-box-border-color); --_gemini-gradient-background: var(--gemini-box-gradient-background); } .gemini-gradient-box--blue { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-blue.jpg") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(320deg, #2E64DE -17.73%, #3C8FE3 50.43%)); --gemini-text-gradient: linear-gradient(61deg, #64B8FB 6.28%, #217BFE 76.97%); } .gemini-gradient-box--pink { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-pink.jpg") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(313deg, #987BE9 -24.05%, #BE6EAE 92.91%)); --gemini-text-gradient: linear-gradient(90deg, #A485FA -104.88%, #EE4D5D 198.78%); } .gemini-gradient-box--w1 { --_gemini-border-width: 1px; } .gemini-gradient-box--grey { --_gemini-gradient-background: var( --gemini-box-gradient-background, url("/images/gradient-box-grey.png") ); --_box-border-color: var(--gradient-box-border-color, linear-gradient(299deg, #B1C5FF 10.12%, #D2DEFF 82.36%)); --gemini-text-gradient: var(--gemini-text-gradient-light-blue); } /* Gradient CTA */ .gemini-gradient-CTA { --_gemini-box-radius: var(--gemini-gradient-CTA-radius, 16px); --_box-border-color: none; --_gemini-border-width: 1px; background: var(--gemini-gradient-CTA-idle-border-color, linear-gradient(140deg, #151515 0.72%, #060606 100%)); border-radius: var(--_gemini-box-radius); bottom: 0; content: ""; display: block; left: 0; margin: 0; position: relative; right: 0; top: 0; } .gemini-gradient-CTA.gemini-with-hover { cursor: pointer; transition: background 0.3s ease; } @media (min-width: 834px) { .gemini-gradient-CTA { --_gemini-box-radius: var(--gemini-gradient-CTA-radius, 24px); --_gemini-border-width: 1px; } } @media (hover: hover) { .gemini-gradient-CTA.gemini-with-hover:hover .gemini-gradient-CTA_wrapper { border: var(--_gemini-border-width) solid transparent; transition: border 0.3s ease-out, background 0.3s ease-out; } .gemini-gradient-CTA.gemini-with-hover:hover::before { opacity: 0.9; transition: opacity 0.3s ease-out; } } .gemini-gradient-CTA::before { background: var(--_box-border-color); border-radius: var(--_gemini-box-radius); content: ""; height: 100%; opacity: 0; position: absolute; top: 0; transition: opacity 0.3s ease-out; width: 100%; } .gemini-gradient-CTA .gemini-gradient-CTA_wrapper::after { content: ""; position: absolute; block-size: 100%; inline-size: 100%; inset-block-start: 0; inset-inline-start: 0; border-radius: var(--_gemini-box-radius); transition: opacity 0.3s ease-out; z-index: 1; opacity: 0; background-image: var(--_gemini-gradient-hover-background); background-repeat: no-repeat; background-size: 110% 110%; background-position: center center; } .gemini-gradient-CTA_wrapper { --_gemini-gradient-background: var(--gemini-gradient-background, none); --_gemini-gradient-hover-background: var(--gemini-gradient-hover-background, none); transform: translate3d(0, 0, 0); margin: 0; width: 100%; height: 100%; position: relative; box-sizing: border-box; background-clip: padding-box; border: var(--_gemini-border-width) solid var(--gemini-gradient-CTA-idle-border-color, var(--gemini-color-grey-700, #202228)); border-radius: var(--_gemini-box-radius); transition: border 0.3s ease-out, background, 0.4s; background-image: var(--_gemini-gradient-background); background-repeat: no-repeat; background-size: 110% 110%; background-position: center center; } .gemini-gradient-CTA__inner { width: 100%; height: 100%; border-radius: calc(var(--_gemini-box-radius) - 2px); background: linear-gradient(121deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 101.29%); position: relative; z-index: 5; } .gemini-gradient-CTA--blue { --gemini-gradient-background: url("/images/system/card-list-item-background-dark.jpg"); --gemini-gradient-hover-background: url("/images/system/card-list-item-hover-dark.jpg"); --_box-border-color: var(--gradient-CTA-border-color, var(--gemini-color-blue-gradient)); } .gemini-gradient-CTA--blue.gemini-with-hover:hover .gemini-gradient-CTA_wrapper:after { opacity: 1; } .gemini-gradient-CTA--blue .gemini-gradient-CTA__inner { background: none; } .gemini-gradient-CTA--light-blue { --_box-border-color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.08) 100%); --gemini-gradient-CTA-idle-border-color: #7aa3ff; } .gemini-gradient-CTA--light-blue::before { border: var(--_gemini-border-width) solid var(--gemini-color-white); } /** Gemini: Partner Container */ .gemini-partner-container-element { display: block; } .gemini-partner-container-element section { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /** Gemini: Partner Item */ .gemini-partner-item .gemini-item { --gemini-_size: var(--gemini-partner-item-size, 160px); --gemini-border-width: 1; --gemini-border-radius: 8; --gemini-hover-alpha: 0.2; block-size: var(--gemini-_size); inline-size: var(--gemini-_size); text-decoration: none; user-select: none; position: relative; border-radius: calc(var(--gemini-border-radius) * 1px); display: grid; place-items: center; white-space: nowrap; } @media (min-width: 834px) { .gemini-partner-item .gemini-item { --gemini-_size: var(--gemini-partner-item-size, 170px); } } .gemini-partner-item .gemini-item::before { content: ""; position: absolute; inset: 0; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); mask-clip: padding-box, border-box; mask-composite: intersect; z-index: 2; } .gemini-partner-item .gemini-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(255 255 255/var(--gemini-hover-alpha)), transparent); border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); z-index: 1; opacity: 0; transition: opacity 0.35s ease-in-out; } .gemini-partner-item .gemini-item:hover .gemini-spark, .gemini-partner-item .gemini-item:focus-visible .gemini-spark { opacity: 1; } .gemini-partner-item .gemini-item:hover .gemini-spark::before, .gemini-partner-item .gemini-item:focus-visible .gemini-spark::before { opacity: 1; animation: gemini-item-spin 0.82s linear forwards; } .gemini-partner-item .gemini-item:hover::after, .gemini-partner-item .gemini-item:focus-visible::after { opacity: 1; } .gemini-partner-item .gemini-item.gemini-link { cursor: pointer; } .gemini-partner-item .gemini-item.gemini-link:after { background: linear-gradient(127deg, #1C213A 2.9%, #060606 100%); } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-arrow { transition-property: transform, opacity; transition-duration: 0.15s; will-change: transform, opacity; } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-text { /*transform: translateX(calc(var(--gemini-offset) * -1));*/ } .gemini-partner-item .gemini-item.gemini-link .gemini-label .gemini-arrow { display: block; /*opacity: 0;*/ /*transform: translateX(calc(var(--gemini-offset) * -1));*/ } .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-text, .gemini-partner-item .gemini-item.gemini-link:focus-visible .gemini-label .gemini-text { /*transform: translateX(0);*/ } .gemini-partner-item .gemini-item.gemini-link:hover .gemini-label .gemini-arrow, .gemini-partner-item .gemini-item.gemini-link:focus-visible .gemini-label .gemini-arrow { /*opacity: 1;*/ /*transition-delay: 0.05s;*/ transform: translateX(0); } .gemini-partner-item .gemini-item.gemini-dark { --gemini-glow: rgb(255 255 255 / 0.4); --gemini-hover-alpha: 0.1; background: linear-gradient(135deg, #10121B 0%, #060606 100%); } .gemini-partner-item .gemini-item.gemini-dark::before { background: var(--gemini-color-grey-700); } .gemini-partner-item .gemini-item.gemini-dark .gemini-label { color: var(--gemini-color-grey-100); } .gemini-partner-item .gemini-item.gemini-light { --gemini-glow: rgb(255 255 255 / 0.6); --gemini-hover-alpha: 0.2; background: linear-gradient(113deg, rgba(255, 255, 255, 0.27) -7.22%, rgba(255, 255, 255, 0) 99.63%); } .gemini-partner-item .gemini-item.gemini-light::before { background: rgba(255, 255, 255, 0.1); } .gemini-partner-item .gemini-item.gemini-light .gemini-label { color: var(--gemini-color-white); } .gemini-partner-item .gemini-sparks { container-type: size; position: absolute; inset: 0; pointer-events: none; z-index: 2; mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); } .gemini-partner-item .gemini-sparks .gemini-spark { position: absolute; inset: 0; overflow: visible; opacity: 0; transition: opacity 0.15s ease-in-out; } .gemini-partner-item .gemini-sparks .gemini-spark::before { --gemini-spread: 110; --gemini-glow-spread: calc(var(--gemini-spread) * 1deg); content: ""; position: absolute; inset: -100%; background: conic-gradient(from calc(270deg - var(--gemini-glow-spread) * 0.5), var(--gemini-glow) 0, var(--gemini-glow) var(--gemini-glow-spread), transparent var(--gemini-glow-spread)); background-repeat: no-repeat; border-radius: calc(var(--gemini-border-radius) * 1px); opacity: 0; transition: opacity 0.2s ease-in-out; } .gemini-partner-item .gemini-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--gemini-space-8); block-size: 100%; inline-size: 100%; z-index: 2; } @media (min-width: 834px) { .gemini-partner-item .content { gap: var(--gemini-space-16); } } .gemini-partner-item .gemini-content img { aspect-ratio: 106/74; inline-size: 100%; max-inline-size: 63%; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease-in-out; } .gemini-partner-item .gemini-content .gemini-label { --gemini-offset: 0.6em; flex-shrink: 0; flex-direction: column; justify-content: flex-end; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--gemini-offset); } .gemini-partner-item .gemini-content .gemini-label .gemini-arrow { display: none; } @keyframes gemini-item-spin { 0% { rotate: 0deg; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; rotate: 560deg; } } /* Gemini: Spark box */ .gemini-spark-box .gemini-spark-box-item { --gemini-_size: var(--gemini-spark-box-item-size, 106px); --gemini-_block-size: var(--gemini-spark-box-item-block-size, var(--gemini-_size)); --gemini-_inline-size: var(--gemini-spark-box-item-inline-size, var(--gemini-_size)); --gemini-border-width: 1; --gemini-border-radius: 8; --gemini-hover-alpha: 0.2; block-size: var(--gemini-_block-size); inline-size: var(--gemini-_inline-size); text-decoration: none; user-select: none; position: relative; border-radius: calc(var(--gemini-border-radius) * 1px); overflow: hidden; } @media (min-width: 834px) { .gemini-spark-box .gemini-spark-box-item { --gemini-_size: var(--gemini-spark-box-item-size, 170px); } } .gemini-spark-box .gemini-spark-box-item::before { content: ""; position: absolute; inset: 0; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); -webkit-mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; mask-image: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0)), linear-gradient(hsl(0, 0%, 100%), hsl(0, 0%, 100%)); mask-clip: padding-box, border-box; mask-composite: intersect; z-index: 2; } .gemini-spark-box .gemini-spark-box-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgb(255 255 255/var(--gemini-hover-alpha)), transparent); border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); z-index: 1; opacity: 0; transition: opacity 0.35s ease-in-out; } .gemini-spark-box .gemini-spark-box-item:hover .gemini-spark, .gemini-spark-box .gemini-spark-box-item:focus-visible .gemini-spark { opacity: 1; } .gemini-spark-box .gemini-spark-box-item:hover .gemini-spark::before, .gemini-spark-box .gemini-spark-box-item:focus-visible .gemini-spark::before { opacity: 1; animation: gemini-spark-box-spin 0.82s linear forwards; } .gemini-spark-box .gemini-spark-box-item:hover::after, .gemini-spark-box .gemini-spark-box-item:focus-visible::after { opacity: 1; } .gemini-spark-box .gemini-spark-box-item.gemini-dark { --gemini-glow: rgb(255 255 255 / 0.4); --gemini-hover-alpha: 0.1; background: linear-gradient(121deg, rgba(255, 255, 255, 0.07) -12.02%, rgba(255, 255, 255, 0.01) 87.55%); } .gemini-spark-box .gemini-spark-box-item.gemini-dark::before { background: var(--gemini-color-grey-700); } .gemini-spark-box-item .gemini-sparks { container-type: size; position: absolute; inset: 0; pointer-events: none; z-index: 2; mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); mask-clip: padding-box, border-box; mask-composite: intersect; -webkit-mask-image: linear-gradient(transparent, transparent), linear-gradient(white, white); -webkit-mask-clip: padding-box, border-box; -webkit-mask-composite: source-in, xor; border: calc(var(--gemini-border-width) * 1px) solid transparent; border-radius: calc(var(--gemini-border-radius) * 1px); } .gemini-spark-box-item .gemini-sparks .gemini-spark { position: absolute; inset: 0; overflow: visible; opacity: 0; transition: opacity 0.15s ease-in-out; } .gemini-spark-box-item .gemini-sparks .gemini-spark::before { --gemini-spread: 110; --gemini-glow-spread: calc(var(--gemini-spread) * 1deg); content: ""; position: absolute; inset: -100%; background: conic-gradient(from calc(270deg - var(--gemini-glow-spread) * 0.5), var(--gemini-glow) 0, var(--gemini-glow) var(--gemini-glow-spread), transparent var(--gemini-glow-spread)); background-repeat: no-repeat; border-radius: calc(var(--gemini-border-radius) * 1px); opacity: 0; transition: opacity 0.2s ease-in-out; } .gemini-spark-box-item .gemini-content { block-size: 100%; inline-size: 100%; z-index: 2; } @media (min-width: 834px) { .gemini-spark-box .gemini-spark-box-item .content { gap: var(--gemini-space-16); } } @keyframes gemini-spark-box-spin { 0% { rotate: 0deg; opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; rotate: 560deg; } } /* Sticky Nav */ .gemini-sticky-nav:not(.gemini-no-sticky) { --gemini-nav-bottom-padding: 20px; --gemini-nav-height: 36px; --_gemini-nav-background: var(--gemini-color-grey-700); --_gemini-nav-item-color: var(--gemini-color-grey-400); --_gemini-nav-item-active: var(--gemini-color-grey-600); --_gemini-nav-item-color-hover: var(--gemini-color-white); position: sticky; top: calc(100vh - var(--gemini-nav-height) - var(--gemini-nav-bottom-padding)); padding-bottom: var(--gemini-nav-bottom-padding); left: 0; justify-content: flex-start; z-index: 11; display: none; height: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s 0.3s, visibility 0.6s 0.3s; } @media (min-width: 1024px) { .gemini-sticky-nav:not(.gemini-no-sticky) { display: flex; justify-content: center; --gemini-nav-height: 48px; --gemini-nav-bottom-padding: 32px; } } .gemini-sticky-nav:not(.gemini-no-sticky).gemini-onscreen { opacity: 1; visibility: visible; } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav { display: flex; background-color: var(--gemini-nav-background, var(--_gemini-nav-background)); padding: 6px; border-radius: 56px; max-width: 335px; position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: var(--gemini-nav-height); } @media (min-width: 834px) { .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav { max-width: 100%; position: relative; } } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item { padding-inline: 24px; flex-shrink: 0; border-radius: 56px; transition: background-color 0.3s var(--gemini-ease-out-cubic); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item a { text-decoration: none; color: var(--gemini-nav-item-color, var(--_gemini-nav-item-color)); display: inline-flex; align-items: center; justify-content: center; min-height: 36px; transition: color 0.2s var(--gemini-ease-out-cubic); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item a:hover { color: var(--gemini-nav-item-color-hover, var(--_gemini-nav-item-color-hover)); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item.gemini-link--active { background: var(--gemini-nav-item-active-background, var(--_gemini-nav-item-active)); } .gemini-sticky-nav:not(.gemini-no-sticky) .gemini-nav__item.gemini-link--active a { color: var(--gemini-color-white); } .gemini-sticky-nav:not(.gemini-no-sticky).gemini-light-theme { --_gemini-nav-background: var(--gemini-color-white); --_gemini-nav-item-active: linear-gradient(61deg, #64b8fb 6.28%, #217bfe 76.97%); --_gemini-nav-item-color: var(--gemini-color-grey-600); --_gemini-nav-item-color-hover: var(--gemini-color-grey-900); } /** Gemini Section: Details */ .gemini-section-details-element { --gemini-animation-buttons-order: 3; display: block; position: relative; z-index: 4; } .gemini-section-details-element .gemini-section--details { position: relative; } .gemini-section-details-element .gemini-details__header { display: grid; place-items: center; position: relative; } .gemini-section-details-element .gemini-header__inner { --gemini-copy-max-width: 730px; --gemini-heading-max-width: 320px; } @media (min-width: 834px) { .gemini-section-details-element .gemini-header__inner { --gemini-heading-max-width: 550px; } } .gemini-section-details-element .gemini-details__body { text-align: center; position: relative; z-index: 5; } .gemini-section-details-element .gemini-details { grid-column: 1/-1; } @media (min-width: 1024px) { .gemini-section-details-element .gemini-details { grid-column: 2/span 10; } } .gemini-details-rings-container { --gemini-rings-section-offset-y: -28%; } @media (min-width: 600px) { .gemini-details-rings-container { display: block; } } /** Gemini: Module Code */ .gemini-module-code-element { display: block; } .gemini-module-code-element .gemini-module--code { width: 100%; --space: var(--gemini-space-d40); } .gemini-module-code-element .gemini-code__wrapper { transform: scale(1.2); transition: 0.8s var(--gemini-ease-out-quad); } .gemini-module-code-element .gemini-onscreen .gemini-code__wrapper { transform: scale(1); } /** Gemini: Code Preview */ .gemini-code-preview-element article { display: flex; flex-direction: column; gap: var(--gemini-space-40); } @media (min-width: 834px) { .gemini-code-preview-element article { gap: var(--gemini-space-48); } } .gemini-code-preview-element .gemini-window { --gemini-padding-inline: 24px; --gemini-padding-block: 24px; --gemini-border-radius: 16px; --gemini-line-height: 180%; --gemini-gap: 20px; } @media (min-width: 834px) { .gemini-code-preview-element .gemini-window { --gemini-padding-inline: 48px; --gemini-padding-block: 40px; --gemini-border-radius: 24px; --gemini-gap: 40px; } } .gemini-code-preview-element .gemini-tabs { background-color: var(--gemini-color-grey-800); border-radius: var(--gemini-border-radius) var(--gemini-border-radius) 0 0; user-select: none; overflow-x: auto; display: flex; justify-content: space-between; align-items: center; } .gemini-code-preview-element .gemini-tabs__links { display: flex; gap: var(--gemini-gap); padding-inline: var(--gemini-padding-inline); overflow-y: hidden; } .gemini-code-preview-element .gemini-tabs__links button { position: relative !important; all: unset; cursor: pointer; display: grid; padding-block: 16px; white-space: nowrap; } .gemini-code-preview-element .gemini-tabs__links button:focus-visible { outline: 1px solid var(--gemini-color-blue); } .gemini-code-preview-element .gemini-tabs__links button span:nth-child(1) { color: var(--gemini-color-grey-500); } .gemini-code-preview-element .gemini-tabs__links button span:nth-child(2) { background: var(--gemini-color-blue-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0; transition: opacity 0.2s var(--gemini-ease-in-out); } .gemini-code-preview-element .gemini-tabs__links button:hover span:nth-child(2) { opacity: 1; } .gemini-code-preview-element .gemini-tabs__links button::before { content: ""; display: block; position: absolute; inset-block-end: 0; inset-inline-start: -8px; block-size: 3px; inline-size: calc(100% + 16px); border-radius: 3px 3px 0 0; background: var(--gemini-color-blue-gradient); transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: ease-in-out; opacity: 0; transform: translateY(100%); } .gemini-code-preview-element .gemini-tabs__links button.gemini-active::before { opacity: 1; transform: translateY(0); } .gemini-code-preview-element .gemini-tabs__links button.gemini-active span:nth-child(2) { opacity: 1; } .gemini-code-preview-element .gemini-editor { display: grid; grid-template-columns: auto 1fr; background-color: var(--gemini-color-grey-600); border-radius: 0 0 var(--gemini-border-radius) var(--gemini-border-radius); padding-inline: 0 24px; padding-block: var(--gemini-padding-block); font-family: var(--gemini-font-secondary); text-align: start; overflow-x: auto; } .gemini-code-preview-element .gemini-editor__numbers { line-height: var(--gemini-line-height); color: var(--gemini-color-grey-500); user-select: none; } .gemini-code-preview-element pre.gemini-editor__code { background-color: var(--gemini-color-grey-600); tab-size: 1em; margin-inline-start: 0; line-height: var(--gemini-line-height); color: var(--gemini-color-grey-100); } @media (min-width: 1024px) { .gemini-code-preview-element pre.gemini-editor__code { margin-inline-start: 0; } } .gemini-code-preview-element .gemini-highlight { color: var(--gemini-color-blue); } .gemini-code-preview-element .gemini-details-cta { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; } @media (min-width: 738px) { .gemini-code-preview-element .gemini-details-cta { flex-direction: row; } } /* CARD ARROW */ .gemini-card-arrow { display: grid; align-items: stretch; } .gemini-card-arrow .gemini-gradient-CTA__inner { display: grid; } .gemini-card-arrow .gemini-card-inner { display: flex; position: relative; flex-direction: column; } @media screen and (min-width: 834px) { .gemini-card-arrow .gemini-card-inner { row-gap: 0; } } .gemini-card-arrow .gemini-media-wrapper { aspect-ratio: 738/413; inline-size: 100%; background: var(--gemini-color-grey-700); overflow: hidden; border-top-left-radius: 24px; border-top-right-radius: 24px; flex-shrink: 0; } .gemini-card-arrow .gemini-media-wrapper > * { background-size: cover; inline-size: 100%; } .gemini-card-arrow .gemini-text-wrapper { position: relative; padding: 24px; flex: 1; display: flex; row-gap: 16px; flex-direction: column; } @media screen and (min-width: 836px) { .gemini-card-arrow .gemini-text-wrapper { padding: 32px; column-gap: 32px; flex-direction: row; } } .gemini-card-arrow .gemini-icon-wrapper { flex-shrink: 0; } .gemini-card-arrow .gemini-card-copy { display: flex; flex-direction: column; max-inline-size: 234px; } @media screen and (min-width: 836px) { .gemini-card-arrow .gemini-card-copy { max-inline-size: var(--gemini-card-copy-max-width, 382px); } } .gemini-card-arrow .gemini-model-copy { color: var(--gemini-color-grey-400); } .gemini-card-arrow .gemini-arrow-link { position: absolute; inset-inline-end: 16px; inset-block-start: 16px; } @media screen and (min-width: 836px) { .gemini-card-arrow.gemini-layout-compact .gemini-card-inner { flex-direction: row; } } /* BLOG */ .gemini-blog-layout { row-gap: var(--gemini-size-grid-gap); } .gemini-blog-layout > * { grid-column: 1/-1; } @media screen and (min-width: 1024px) { .gemini-blog-layout > *:nth-child(1) { grid-area: 1/1/span 3/span 7; } .gemini-blog-layout > *:nth-child(2) { grid-area: 1/8/span 1/span 5; } .gemini-blog-layout > *:nth-child(3) { grid-area: 2/8/span 1/span 5; } .gemini-blog-layout > *:nth-child(4) { grid-area: 3/8/span 1/span 5; } } .gemini-blog-layout .article > * { block-size: 100%; } .gemini-blog-layout .article:first-of-type { --gemini-card-copy-max-width: 490px; } .gemini-blog-layout .article .gemini-card-arrow .gemini-model-copy { margin-top: auto; } /* CARD WITH BUTTON */ .gemini-card-with-button { display: grid; --_gemini-padding: 32px; } @media screen and (min-width: 834px) { .gemini-card-with-button { --_gemini-padding: 40px; } } .gemini-card-with-button .gemini-card-content { border-radius: var(--gemini-border-radius-d24); color: inherit; display: flex; height: 100%; padding: var(--_gemini-padding); position: relative; text-decoration: none; } .gemini-card-with-button .gemini-card-copy { display: flex; align-items: flex-start; flex-direction: column; gap: 24px; inline-size: 100%; } .gemini-card-with-button .gemini-card-copy .gemini-card-buttons { display: flex; column-gap: 8px; row-gap: 12px; flex-wrap: wrap; } .gemini-card-with-button .gemini-model-copy { color: var(--gemini-color-grey-400); max-inline-size: 420px; } .gemini-card-with-button .gemini-btn.gemini-tertiary { --gemini-button-fill: transparent; --gemini-button-text: var(--gemini-color-white); border: 1px solid var(--gemini-color-grey-600); flex-shrink: 0; inline-size: auto; } @media screen and (min-width: 834px) { .gemini-card-with-button.gemini-layout-large, .gemini-card-with-button.gemini-layout-inside-box { --_gemini-padding: 48px 48px; } .gemini-card-with-button.gemini-layout-large .gemini-card-copy, .gemini-card-with-button.gemini-layout-inside-box .gemini-card-copy { align-items: flex-start; gap: 24px; } .gemini-card-with-button.gemini-layout-large .gemini-card-copy > div:nth-child(1), .gemini-card-with-button.gemini-layout-inside-box .gemini-card-copy > div:nth-child(1) { flex: 1; } .gemini-card-with-button.gemini-layout-large .gemini-model-copy, .gemini-card-with-button.gemini-layout-inside-box .gemini-model-copy { width: 100%; max-inline-size: 610px; } } .gemini-card-with-button.gemini-layout-compact .gemini-card-copy { flex-direction: column; } @media screen and (min-width: 834px) { .gemini-card-with-button.gemini-layout-compact .gemini-card-copy { gap: 32px; } } .gemini-card-with-button.gemini-layout-compact .gemini-btn.gemini-tertiary { margin-block-start: auto; } @media screen and (max-width: 834px) { .gemini-card-with-button.gemini-layout-inside-box { --_gemini-padding: 40px 24px; } } .gemini-card-with-button.gemini-image-direction-column .gemini-card-content { flex-direction: column; row-gap: 40px; } .gemini-card-with-button.gemini-image-direction-column .gemini-card-image { inline-size: 100%; } .gemini-card-with-button.gemini-image-direction-column .gemini-card-image img { inline-size: 100%; } .gemini-card-with-button .gemini-card-image { border-radius: var(--gemini-border-radius-d16); clip-path: fill-box; line-height: 0; } /* Dialog */ .gemini-dialog { background: transparent; block-size: 100%; border: none; color: inherit; inline-size: 100%; max-block-size: none; max-inline-size: none; padding: 0; } .gemini-dialog::backdrop { background: transparent; } .gemini-dialog.gemini-dialog--active .gemini-dialog__backdrop { opacity: 0.8; } .gemini-dialog.gemini-dialog--active .gemini-dialog__content { opacity: 1; } .gemini-dialog__close-button { align-items: center; all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: center; position: absolute; z-index: 10; } .gemini-dialog__backdrop { background: #000; inset: 0; opacity: 0; outline: none; position: absolute; transition: opacity 0.2s ease-out; z-index: 1; } .gemini-dialog__content { opacity: 0; position: relative; transition: opacity 0.4s ease-out; } .gemini-dialog-wysiwyg h3 { margin-block-end: 4px; } .gemini-dialog-wysiwyg h2 { margin-block-end: 4px; } .gemini-dialog-wysiwyg p { color: var(--gemini-color-grey-300); } .gemini-dialog-wysiwyg b { color: var(--gemini-color-grey-200); font-weight: 500; } .gemini-side-dialog { overflow: hidden; } .gemini-side-dialog .gemini-dialog__content { position: absolute; z-index: 5; background: var(--gemini-color-grey-700); max-width: 600px; padding-block: 104px 46px; padding-inline: 20px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--gemini-color-white) transparent; height: 100%; inset-block-start: 0; inset-inline-end: 0; } @media (min-width: 768px) { .gemini-side-dialog .gemini-dialog__content { padding-block: 140px 24px; padding-inline: 64px; } } .gemini-side-dialog .gemini-dialog__eyebrow { color: var(--gemini-color-grey-400); } .gemini-side-dialog .gemini-dialog__close-button { inset-block-start: 48px; inset-inline-end: 20px; block-size: 48px; inline-size: 48px; border: 1px solid var(--gemini-color-grey-600); border-radius: 50%; background: transparent; transition: background 0.3s linear; } @media (min-width: 834px) { .gemini-side-dialog .gemini-dialog__close-button { inset-inline-end: 64px; } } .gemini-side-dialog .gemini-dialog__close-button svg { max-inline-size: 14px; } .gemini-side-dialog .gemini-dialog__close-button:hover, .gemini-side-dialog .gemini-dialog__close-button:focus-visible { background: var(--gemini-color-grey-600); } .gemini-side-dialog .gemini-dialog__close-button:focus-visible { outline: 1px solid var(--gemini-color-white); } .gemini-modal-dialog .gemini-dialog__close-button { block-size: 24px; inline-size: 24px; inset-block-start: 20px; inset-inline-end: 20px; transition: opacity 0.2s linear; background: transparent; } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog__close-button { inset-block-start: 24px; inset-inline-end: 24px; } } .gemini-modal-dialog .gemini-dialog__close-button:hover { opacity: 0.7; } .gemini-modal-dialog .gemini-dialog__close-button:focus-visible { outline: 1px solid var(--gemini-color-white); } .gemini-modal-dialog .gemini-dialog-inner { align-items: center; block-size: 100%; display: flex; inline-size: 100%; justify-content: center; pointer-events: none; position: relative; z-index: 10; } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog-inner { padding-block: 24px; } } .gemini-modal-dialog .gemini-dialog__content { background: var(--gemini-color-grey-700); block-size: var(--gemini-dialog-height, 100%); display: flex; flex-direction: column; inline-size: 100%; margin: auto auto; max-block-size: 100%; max-inline-size: var(--gemini-dialog-max-width, 846px); padding-block: 32px 20px; padding-inline: 20px; pointer-events: all; border: 1px solid var(--gemini-color-grey-600); } @media (min-width: 834px) { .gemini-modal-dialog .gemini-dialog__content { max-block-size: var(--gemini-dialog-max-height, 620px); border-radius: 24px; padding-block: 48px; padding-inline: 40px; } } .gemini-modal-dialog .gemini-dialog-header { flex-shrink: 0; margin-inline: auto; max-inline-size: 420px; text-align: center; } .gemini-modal-dialog .gemini-dialog-body { flex-grow: 1; overflow: hidden; padding-inline: 0 0; } .gemini-modal-dialog .gemini-dialog-block { background: var(--gemini-color-grey-800); border-radius: 12px; border: 1px solid var(--gemini-color-grey-600); } .gemini-modal-dialog .gemini-dialog-actions { display: flex; align-items: center; gap: 12px; } .gemini-scroller { height: 100%; overflow: auto; padding-block: 32px; padding-inline: 24px 40px; scrollbar-color: var(--gemini-color-white) transparent; scrollbar-width: thin; } .gemini-video-dialog .gemini-dialog-inner { align-items: center; block-size: 100%; display: flex; inline-size: 100%; justify-content: center; position: relative; z-index: 10; padding-inline: 20px; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog-inner { padding-inline: 60px; } } .gemini-video-dialog .gemini-dialog__close-button { position: absolute; background: var(--gemini-color-white); block-size: 40px; inline-size: 40px; inset-block-start: -60px; inset-inline-end: 0; border-radius: 50%; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog__close-button { inset-block-start: -40px; inset-inline-end: -40px; } } .gemini-video-dialog .gemini-dialog__close-button svg { width: 24px; } .gemini-video-dialog .gemini-dialog__content { inline-size: 100%; aspect-ratio: 559/315; position: relative; } @media screen and (min-width: 834px) { .gemini-video-dialog .gemini-dialog__content { min-inline-size: 700px; max-inline-size: 1200px; inline-size: 80%; } } .gemini-video-dialog .gemini-dialog__content .gemini-dialog-body { block-size: 100%; line-height: 0; border: var(--gemini-color-grey-600) 1px solid; border-radius: 16px; overflow: hidden; background: var(--gemini-color-grey-600); } .gemini-dialog-link { all: unset; cursor: pointer; color: var(--gemini-dialog-link-cta, #368efe); } </style><style> /* Styles inlined from /css/project.css */ .gemini-project-page { --_gemini-project-intro-ease: cubic-bezier(0.22, 0.61, 0.355, 1); --_gemini-project-intro-delay: .5s; position: relative; min-block-size: 100vh; opacity: 0; animation: fadeIn 0.6s var(--_gemini-project-intro-ease) var(--_gemini-project-intro-delay); animation-fill-mode: forwards; padding-top: 48px; } .devsite-article .gemini-page.gemini-project-page h1:first-of-type { display: block; } .gemini-project-page .gemini-project-background { position: absolute; top: 0; left: 0; opacity: 0.4; content: ""; width: 100%; height: 100%; background-image: url("/images/competition/vote/voting-intro-gradient-bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center bottom -20vh; background-attachment: fixed; } @media (min-width: 1024px) { .gemini-project-page { padding-top: 88px; } } .gemini-project-page .gemini-project-content { position: relative; } .gemini-project-page .gemini-project-nav-bar { inline-size: 100%; position: fixed; top: 98px; left: 0; display: none; } @media (min-width: 1024px) { .gemini-project-page .gemini-project-nav-bar { display: block; } } .gemini-project-page .gemini-project-hero { pointer-events: none; padding: 0 20px; } .gemini-project-page .gemini-project-hero .gemini-section-cta { --gemini-animation-ease: var(--_gemini-project-intro-ease); --gemini-animation-delay: calc(.19s + var(--_gemini-project-intro-delay)); --gemini-animation-stagger: .06s; --gemini-section-copy-color: var(--gemini-color-grey-300); clip-path: fill-box; } .gemini-project-page .gemini-project-nav-bar-mobile { grid-column: 1/-1; } .gemini-project-page .gemini-project-nav-bar-mobile .gemini-btn { padding: 8px 18px; } .gemini-project-page .gemini-project-nav-bar-mobile svg { display: block; } @media (min-width: 1024px) { .gemini-project-page .gemini-project-nav-bar-mobile { display: none; } } .gemini-project-page .gemini-nav-bar-inner { display: flex; justify-content: space-between; align-items: center; inline-size: 100%; } .gemini-project-page .gemini-copy-url-label:after { content: "Copy URL"; } .gemini-project-page .gemini-copy-button.copied .gemini-copy-url-label:after { content: "Link copied!"; } .gemini-project-page .gemini-tertiary { --gemini-button-fill: var(--gemini-color-grey-700); --gemini-button-border: var(--gemini-color-grey-700); } .gemini-project-page .gemini-tertiary path { transition: 0.3s fill; } .gemini-project-page .gemini-tertiary:hover path { fill: var(--gemini-color-black); } .gemini-project-page .gemini-tertiary span { display: flex; align-items: center; gap: 8px; } .gemini-project-page .gemini-project-video { grid-column: 1/-1; overflow: hidden; border-radius: var(--gemini-border-radius-d16); line-height: 0; opacity: 0; animation: scaleIn 0.82s var(--_gemini-project-intro-ease) var(--_gemini-project-intro-delay); animation-fill-mode: forwards; } @media (min-width: 1024px) { .gemini-project-page .gemini-project-video { grid-column: 3/span 8; } } .gemini-project-page .gemini-project-video iframe { inline-size: 100%; aspect-ratio: 16/9; } .gemini-project-page .gemini-project-voting-cta-wrapper, .gemini-project-page .gemini-project-nav-bar { opacity: 0; animation: fadeIn 0.6s var(--_gemini-project-intro-ease) calc(0.29s + var(--_gemini-project-intro-delay)); animation-fill-mode: forwards; } .gemini-project-page .gemini-project-voting-cta-wrapper { grid-column: 1/-1; } @media (min-width: 1024px) { .gemini-project-page .gemini-project-voting-cta-wrapper { grid-column: 4/span 6; } } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta { position: relative; inline-size: 100%; block-size: 54px; border-radius: 16px; padding: 0; border: none; background: var(--gemini-color-blue-gradient); background-repeat: no-repeat; background-size: cover; overflow: hidden; justify-content: center; cursor: pointer; color: var(--gemini-color-white); transition: 0.5s box-shadow, 0.5s transform; } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta:before { content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; border-radius: 15px; background: url("/images/projects/vote-button-bg.png"); background-repeat: no-repeat; background-size: 100% 54px; } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-background, .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-foreground, .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-foreground-voted { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-background { transform: translateY(100%); transition: 0.5s transform cubic-bezier(0.63, 0.01, 0.34, 1); background-image: var(--gemini-button-fill, var(--gemini-color-blue-gradient)); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-foreground-voted { transform: translateY(100%); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-foreground, .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta .gemini-voted-foreground-voted { display: flex; align-items: center; justify-content: center; transition: 0.5s transform cubic-bezier(0.63, 0.01, 0.34, 1); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta svg { margin-right: 6px; transform: scale(0.8); } @media (min-width: 1024px) { .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta svg { margin-right: 10px; transform: scale(1); } } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta.voted { pointer-events: none; } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta.voted .gemini-voted-foreground { transform: translateY(-100%); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta.voted .gemini-voted-foreground-voted { transform: translateY(0); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta.voted .gemini-voted-background { transform: translateY(0); } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta:hover { box-shadow: 0 0 40px 0 rgba(59, 107, 255, 0.4); transform: scale(1.03); } @media (min-width: 1024px) { .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta { block-size: 68px; } .gemini-project-page .gemini-project-voting-cta-wrapper .gemini-voting-cta:before { background-size: 100% 68px; } } .gemini-project-page .gemini-project-body { row-gap: 32px; padding-bottom: 88px; } @media (min-width: 1024px) { .gemini-project-page .gemini-project-body { padding-bottom: 200px; } } .gemini-project-page .gemini-project-description { color: var(--gemini-color-grey-200); } .gemini-project-page .gemini-project-description .gemini-description-label { color: var(--gemini-color-white); } .gemini-project-page .gemini-project-description, .gemini-project-page .gemini-project-tools, .gemini-project-page .gemini-project-about { border-bottom: 1px solid var(--gemini-color-grey-700); } .gemini-project-page .gemini-project-tagline, .gemini-project-page .gemini-project-description, .gemini-project-page .gemini-project-tools, .gemini-project-page .gemini-project-about, .gemini-project-page .gemini-related-apps { grid-column: 1/-1; padding-block-end: var(--gemini-space-d32); } @media (min-width: 1024px) { .gemini-project-page .gemini-project-tagline, .gemini-project-page .gemini-project-description, .gemini-project-page .gemini-project-tools, .gemini-project-page .gemini-project-about, .gemini-project-page .gemini-related-apps { grid-column: 4/span 6; } } .gemini-project-page .gemini-project-tagline { padding-block-end: 8px; } .gemini-project-page .gemini-tools-list { display: flex; justify-content: flex-start; flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; } .gemini-project-page .gemini-tools-list > * { color: var(--gemini-color-white); background: var(--gemini-color-grey-900); border: 1px solid var(--gemini-color-blue); border-radius: 8px; padding: 8px 12px; white-space: nowrap; } .gemini-project-page .gemini-project-details { display: flex; flex-direction: column; gap: 14px; } .gemini-project-page .gemini-project-detail p:first-of-type { color: var(--gemini-color-grey-400); } .gemini-project-page .gemini-related-apps { padding-top: var(--gemini-space-d32); } .gemini-project-page .gemini-related-apps .gemini-app-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gemini-size-grid-gap); } .gemini-project-page .gemini-related-apps .gemini-app { grid-column: -1/1; display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; } @media (min-width: 600px) { .gemini-project-page .gemini-related-apps .gemini-app { grid-column: span 1/auto; } } .gemini-project-page .gemini-related-apps .gemini-app:has(:hover) .gemini-app-thumbnail { box-shadow: 0 0 20px rgba(59, 107, 255, 0.3803921569); transform: scale(1.05); } .gemini-project-page .gemini-related-apps .gemini-app-thumbnail { overflow: hidden; inline-size: 100%; aspect-ratio: 300/170; border-radius: 12px; padding: 1px; background: linear-gradient(152deg, #64B8FB -17.89%, #3b4e7e 48.1%, #64B8FB 122.52%); box-shadow: 0 0 10px rgba(59, 107, 255, 0.4588235294); transition: 0.35s all cubic-bezier(0, 0, 0.08, 1.02); line-height: 0; will-change: transform; } .gemini-project-page .gemini-related-apps .gemini-app-thumbnail img { display: block; object-fit: cover; width: 100%; height: 100%; border-radius: 12px; } .gemini-project-page .gemini-related-apps .gemini-app-details p { color: var(--gemini-color-white); } .gemini-project-page .gemini-related-apps .gemini-app-details p:nth-of-type(2) { color: var(--gemini-color-grey-400); } .gemini-project-page .gemini-project-hearts-container.play .gemini-project-heart { animation-play-state: running; } .gemini-project-page .gemini-project-heart { --_gemini-heart-scale: .5; position: fixed; top: 0; left: 0; width: var(--_gemini-heart-width); aspect-ratio: 1; background-image: url("/images/projects/heart.svg"); background-size: contain; background-repeat: no-repeat; animation: heartUp 2s cubic-bezier(0.33, 0, 0.34, 1); animation-play-state: paused; animation-delay: var(--_gemini-heart-delay); animation-fill-mode: forwards; transform: translateY(calc(100vh + 200px)) scale(var(--_gemini-heart-scale)); transform-origin: center; } @media (prefers-reduced-motion) { .gemini-project-page .gemini-project-heart { animation: none; } } @media (min-width: 1024px) { .gemini-project-page .gemini-project-heart { --_gemini-heart-scale: 1; } } .gemini-project-page .gemini-project-heart:nth-child(1) { --_gemini-heart-width: 300px; --_gemini-heart-position-x: 25vw; --_gemini-heart-position-y: 100vh; --_gemini-heart-delay: 0s; } .gemini-project-page .gemini-project-heart:nth-child(2) { --_gemini-heart-width: 80px; --_gemini-heart-position-x: 90vw; --_gemini-heart-position-y: 110vh; --_gemini-heart-delay: .2s; } .gemini-project-page .gemini-project-heart:nth-child(3) { --_gemini-heart-width: 190px; --_gemini-heart-position-x: 53vw; --_gemini-heart-position-y: 120vh; --_gemini-heart-delay: .3s; } .gemini-project-page .gemini-project-heart:nth-child(4) { --_gemini-heart-width: 300px; --_gemini-heart-position-x: 70vw; --_gemini-heart-position-y: 130vh; --_gemini-heart-delay: .4s; } .gemini-project-page .gemini-project-heart:nth-child(5) { --_gemini-heart-width: 80px; --_gemini-heart-position-x: 45vw; --_gemini-heart-position-y: 140vh; --_gemini-heart-delay: .5s; } .gemini-project-page .gemini-project-heart:nth-child(6) { --_gemini-heart-width: 190px; --_gemini-heart-position-x: 10vw; --_gemini-heart-position-y: 150vh; --_gemini-heart-delay: .55s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scaleIn { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } @keyframes heartUp { 0% { transform: translate(calc(var(--_gemini-heart-position-x) - 50%), calc(var(--_gemini-heart-position-y) + 200px)) scale(var(--_gemini-heart-scale)); } 40% { opacity: 1; } 60% { opacity: 0; } 100% { transform: translate(calc(var(--_gemini-heart-position-x) - 50%), -50vh) scale(var(--_gemini-heart-scale)); } } </style> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" aria-label="Breadcrumb"> <li class="devsite-breadcrumb-item "> <a href="https://ai.google.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="" > Home </a> </li> <li class="devsite-breadcrumb-item "> <div class="devsite-breadcrumb-guillemet material-icons" aria-hidden="true"></div> <a href="https://ai.google.dev/competition" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="2" track-type="globalNav" track-name="breadcrumb" track-metadata-position="2" track-metadata-eventdetail="Gemini API Developer Competition" > Gemini API Developer Competition </a> </li> </ul> </div> <devsite-feedback position="header" project-name="Gemini API Developer Competition" product-id="5292923" bucket="documentation" context="" version="t-devsite-webserver-20241114-r00-rc02.464921008191574316" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="header" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/images/touchicon-180-new.png" > <button> Send feedback </button> </devsite-feedback> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix devsite-no-page-title"> <devsite-gemini-project-page class="gemini-page gemini-project-page"> <dialog class="gemini-dialog gemini-video-dialog" data-dialog="gemini-video" > <div class="gemini-dialog__backdrop gemini-dialog-close" ></div> <div class="gemini-dialog-inner"> <div class="gemini-dialog__content"> <button class="gemini-dialog__close-button gemini-dialog-close" > <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.00391 7L17.0802 17.0763" stroke="#060606" stroke-width="1.33594" stroke-linecap="round"/> <path d="M17.0781 7L7.00185 17.0763" stroke="#060606" stroke-width="1.33594" stroke-linecap="round"/> </svg> </button> <div class="gemini-dialog-body"> <devsite-video video-id="Rbh7CWsF1C8"></devsite-video> </div> </div> </div> </dialog> <div class="gemini-project-background"></div> <div class="gemini-project-content"> <div class="gemini-project-nav-bar"> <div class="gemini-layout-max-width"> <div class="gemini-nav-bar-inner"> <a class="gemini-btn gemini-tertiary gemini-type-t3 gc-analytics-event" data-category="content_click" href="/competition#w-6" rel="" > <span><svg width="7" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.94 1.607 6 .667.667 6 6 11.334l.94-.94L2.553 6" fill="#fff"/></svg>See all winners</span> </a> <div class="gemini-btn gemini-tertiary gemini-copy-button gemini-type-t3"> <span><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 11.333V2c0-.734-.6-1.333-1.333-1.333H5.333C4.6.667 4 1.267 4 2v9.333c0 .733.6 1.333 1.333 1.333h7.334c.733 0 1.333-.6 1.333-1.333ZM12 14H2.667V4.666H1.333V14c0 .733.6 1.333 1.334 1.333H12V14Zm-6.667-2.667h7.334V2H5.333v9.333Z" fill="#fff"/></svg><span class="gemini-copy-url-label"></span></span> </div> </div> </div> </div> <section class="gemini-project-hero gemini-space-d72"> <div class="gemini-section-cta " style=""> <article class="gemini-cta " data-viewport="once" data-viewport-threshold="0.3" > <div class="gemini-section gemini-section__subtitle"> <p class="gemini-type-t1-medium gemini-gradient-text gemini-space-d24"><span>Best use of Firebase app</span></p> </div> <div class="gemini-section gemini-section__title"> <h1 class="gemini-type-d1" id="trippy" data-text="Trippy" tabindex="-1">Trippy</h1> </div> <div class="gemini-section gemini-section__copy"> </div> <div class="gemini-section gemini-section__buttons"> </div> </article> </div> </section> <section class="gemini-space-d72"> <div class="gemini-layout-max-width gemini-layout-grid"> <div class="gemini-project-video"> <div class="gemini-youtube gemini-dialog-cta gemini-layout-zstack" data-dialog-target="gemini-video" data-video-id="Rbh7CWsF1C8" tab-index="0"> <div class="gemini-youtube-poster"> <video class="gemini-poster-video" poster="/images/winners/trippy.jpg" loop muted autoplay playsinline> <source src="/static/videos/winners/trippy.mp4" type="video/mp4"> </video> </div> <div class="gemini-video-overlay"> <button class="gemini-youtube__play-button"> <svg viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M22.1495 13.3165C22.6757 13.6203 22.6757 14.3798 22.1495 14.6837L10.5175 21.3994C9.99127 21.7032 9.33349 21.3235 9.33349 20.7158L9.3335 7.28434C9.3335 6.67671 9.99127 6.29694 10.5175 6.60076L22.1495 13.3165Z" fill="#060606"/> </svg> </button> </div> </div> </div> </div> </section> <section class="gemini-project-main-section"> <div class="gemini-layout-max-width gemini-layout-grid gemini-project-body"> <div class="gemini-project-tagline"> <p class="gemini-type-h2">Plan your next vacation trip with a simple audio or text prompt</p> </div> <div class="gemini-project-description"> <p class="gemini-description-label gemini-type-t2 gemini-space-d8">What it does</p> <p class="gemini-type-b1">Trippy makes planning trips as easy as ABC. From as little as a 5 second audio recording or a written sentence, Trippy can plan a whole journey with real time flight information, telling you the least amount of money you need for the journey, accomodation options with a summarized review of the place, so you don't have to read thousands of reviews yourself, events taking place while you are on the journey and a detailed profile of the place(s) you are traveling to. It also keeps track of your expenditure with automatic currency conversion while you are on vacation by simply scanning receipts, has a personal assistant linked to each trip which can answer more indepth questions, features a gamified area with AI enhanced games such as the Wanderer Detective where you find specific places on Google Street view to win points, and the best part?? You can use the app entirely in the language you understand best and Trippy will always respond to you in that language. All of this is powered by Gemini's powerful audio capabilities, image, math, reasoning, multilingual capabitlites and multimodal processing.</p> </div> <div class="gemini-project-tools"> <p class="gemini-description-label gemini-type-t2 gemini-space-d8">Built with</p> <ul class="gemini-tools-list"> <li class="gemini-type-l1">Flutter</li> <li class="gemini-type-l1"> Firebase</li> <li class="gemini-type-l1"> Google Maps</li> </ul> </div> <div class="gemini-project-about"> <p class="gemini-description-label gemini-type-t2 gemini-space-d8">Team</p> <div class="gemini-project-details"> <div class="gemini-project-detail"> <p class="gemini-type-t2">By</p> <p class="gemini-type-t2">Ndahi</p> </div> <div class="gemini-project-detail"> <p class="gemini-type-t2">From</p> <p class="gemini-type-t2">Cameroon</p> </div> </div> </div> <div class="gemini-related-apps"> <p class="gemini-type-h4 gemini-space-d24">More winners</p> <div class="gemini-app-list"> <a class="gemini-app" href="/competition/projects/vite-vere"> <div class="gemini-app-thumbnail"> <img src="/static/images/winners/vite-vere.jpg"> </div> <div class="gemini-app-details"> <p class="gemini-type-t2">VITE VERE</p> <p class="gemini-type-t2">Most Impactful app / People's Choice </p> </div> </a> <a class="gemini-app" href="/competition/projects/pen-apple"> <div class="gemini-app-thumbnail"> <img src="/static/images/winners/penapple.jpg"> </div> <div class="gemini-app-details"> <p class="gemini-type-t2">Pen Apple</p> <p class="gemini-type-t2">Best Game app</p> </div> </a> </div> </div> <div class="gemini-project-nav-bar-mobile"> <div class="gemini-nav-bar-inner"> <a class="gemini-btn gemini-tertiary gemini-type-t3 gc-analytics-event" data-category="content_click" href="/competition" rel="" > <span><svg width="7" height="12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.94 1.607 6 .667.667 6 6 11.334l.94-.94L2.553 6" fill="#fff"/></svg></span> </a> <div class="gemini-btn gemini-tertiary gemini-copy-button gemini-has--icon gemini-type-t3"> <span><svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 11.333V2c0-.734-.6-1.333-1.333-1.333H5.333C4.6.667 4 1.267 4 2v9.333c0 .733.6 1.333 1.333 1.333h7.334c.733 0 1.333-.6 1.333-1.333ZM12 14H2.667V4.666H1.333V14c0 .733.6 1.333 1.334 1.333H12V14Zm-6.667-2.667h7.334V2H5.333v9.333Z" fill="#fff"/></svg><span class="gemini-copy-url-label"></span></span> </div> </div> </div> </div> </section> </div> </devsite-gemini-project-page> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-thumb-rating-feedback"> <devsite-feedback position="thumb-rating" project-name="Gemini API Developer Competition" product-id="5292923" bucket="documentation" context="" version="t-devsite-webserver-20241114-r00-rc02.464921008191574316" data-label="Send Feedback Button" track-type="feedback" track-name="sendFeedbackLink" track-metadata-position="thumb-rating" class="nocontent" project-icon="https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/images/touchicon-180-new.png" > <button> Need to tell us more? </button> </devsite-feedback> </template> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> <devsite-language-selector> <ul role="presentation"> <li role="presentation"> <a role="menuitem" lang="en" >English</a> </li> <li role="presentation"> <a role="menuitem" lang="de" >Deutsch</a> </li> <li role="presentation"> <a role="menuitem" lang="es_419" >Español – América Latina</a> </li> <li role="presentation"> <a role="menuitem" lang="fr" >Français</a> </li> <li role="presentation"> <a role="menuitem" lang="id" >Indonesia</a> </li> <li role="presentation"> <a role="menuitem" lang="it" >Italiano</a> </li> <li role="presentation"> <a role="menuitem" lang="pl" >Polski</a> </li> <li role="presentation"> <a role="menuitem" lang="pt_br" >Português – Brasil</a> </li> <li role="presentation"> <a role="menuitem" lang="vi" >Tiếng Việt</a> </li> <li role="presentation"> <a role="menuitem" lang="tr" >Türkçe</a> </li> <li role="presentation"> <a role="menuitem" lang="ru" >Русский</a> </li> <li role="presentation"> <a role="menuitem" lang="he" >עברית</a> </li> <li role="presentation"> <a role="menuitem" lang="ar" >العربيّة</a> </li> <li role="presentation"> <a role="menuitem" lang="fa" >فارسی</a> </li> <li role="presentation"> <a role="menuitem" lang="hi" >हिंदी</a> </li> <li role="presentation"> <a role="menuitem" lang="bn" >বাংলা</a> </li> <li role="presentation"> <a role="menuitem" lang="th" >ภาษาไทย</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_cn" >中文 – 简体</a> </li> <li role="presentation"> <a role="menuitem" lang="zh_tw" >中文 – 繁體</a> </li> <li role="presentation"> <a role="menuitem" lang="ja" >日本語</a> </li> <li role="presentation"> <a role="menuitem" lang="ko" >한국어</a> </li> </ul> </devsite-language-selector> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-TC2MQKS8", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "marketing", "projectName": "Gemini API Developer Competition", "signedIn": "False", "tenant": "googledevai", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="HoYphDnGQmMFq+wIXji2WBW/5GPg+/"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/js/app_loader.js', '[59,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai","https://googledevai-dot-devsite-v2-prod-3p.appspot.com",null,null,["/_pwa/googledevai/manifest.json","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/v870e399c64f7c43c99a3043db4b3a74327bb93d0914e84a0c3dba90bbfd67625/googledevai/images/favicon-new.png","/_static/googledevai/images/lockup-new.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","ai.google.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["MiscFeatureFlags__emergency_css","MiscFeatureFlags__enable_firebase_utm","Profiles__enable_developer_profiles_callout","MiscFeatureFlags__developers_footer_image","Search__enable_ai_eligibility_checks","Search__enable_dynamic_content_confidential_banner","Profiles__enable_dashboard_curated_recommendations","Cloud__enable_llm_concierge_chat","Cloud__enable_cloud_facet_chat","Profiles__enable_complete_playlist_endpoint","Profiles__enable_page_saving","Profiles__enable_recognition_badges","DevPro__enable_cloud_innovators_plus","Profiles__enable_public_developer_profiles","Cloud__enable_cloud_shell_fte_user_flow","TpcFeatures__enable_mirror_tenant_redirects","Profiles__enable_awarding_url","Cloud__enable_free_trial_server_call","TpcFeatures__enable_required_headers","Profiles__enable_profile_collections","Cloud__enable_cloudx_experiment_ids","Profiles__enable_completecodelab_endpoint","MiscFeatureFlags__developers_footer_dark_image","BookNav__enable_tenant_cache_key","Cloud__enable_cloud_shell","CloudShell__cloud_shell_button","Cloud__enable_legacy_calculator_redirect","Search__enable_suggestions_from_borg","MiscFeatureFlags__enable_variable_operator","Search__enable_page_map","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__enable_explain_this_code","MiscFeatureFlags__enable_view_transitions","Cloud__enable_cloud_dlp_service","Cloud__enable_cloudx_ping","Concierge__enable_pushui","OnSwitch__enable","Experiments__reqs_query_experiments","CloudShell__cloud_code_overflow_menu","Profiles__enable_release_notes_notifications","Profiles__require_profile_eligibility_for_signin","DevPro__enable_developer_subscriptions","Analytics__enable_clearcut_logging","EngEduTelemetry__enable_engedu_telemetry"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[59,"googledevai","Google AI for Developers","ai.google.dev",null,"googledevai-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,1,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1],[1,1,null,1,1]],null,[73,null,null,null,null,null,"/images/lockup-new.svg","/images/touchicon-180-new.png",null,null,null,null,1,1,null,null,null,null,null,null,null,1,null,null,null,"/images/lockup-dark-theme-new.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-TC2MQKS8"],null,null,null,null,null,[["GTM-TC2MQKS8",1]],1]],null,4]]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

Trippy | Gemini API Developer Competition | Google AI for Developers