From 42c8c5b372e88251933b61b9ff0a55f501b4bcff Mon Sep 17 00:00:00 2001 From: Ammaar Reshi <159876365+ammaarreshi@users.noreply.github.com> Date: Fri, 16 Oct 2026 16:30:38 +0000 Subject: [PATCH] Polish gemma.ai hero, search, navigation, and callout design --- docs/javascripts/model-switcher.js | 216 ++++++++- docs/stylesheets/content.css | 51 +- docs/stylesheets/gemma.css | 10 +- docs/stylesheets/home.css | 386 +++++++-------- docs/stylesheets/motion.css | 26 +- docs/stylesheets/nav.css | 156 ++++-- overrides/home.html | 745 ++++++++++++++++++++++++----- 7 files changed, 1169 insertions(+), 421 deletions(-) diff --git a/docs/javascripts/model-switcher.js b/docs/javascripts/model-switcher.js index 0d12b98..4b0cf2b 100644 --- a/docs/javascripts/model-switcher.js +++ b/docs/javascripts/model-switcher.js @@ -258,13 +258,223 @@ if (requested && available.includes(requested)) apply(requested); }; + let prevTabState = null; + + const syncTabIndicator = () => { + const list = document.querySelector(".md-tabs__list"); + if (!list) return; + const activeLink = list.querySelector(".md-tabs__item--active > .md-tabs__link, .md-tabs__link--active"); + if (!activeLink) return; + + const listRect = list.getBoundingClientRect(); + const linkRect = activeLink.getBoundingClientRect(); + const nextLeft = linkRect.left - listRect.left; + const nextWidth = linkRect.width; + const nextHeight = linkRect.height; + + let indicator = list.querySelector(".gemma-tab-indicator"); + if (!indicator) { + indicator = document.createElement("span"); + indicator.className = "gemma-tab-indicator"; + list.appendChild(indicator); + } + list.classList.add("has-sliding-indicator"); + indicator.style.height = `${nextHeight}px`; + + if (prevTabState && (Math.abs(prevTabState.left - nextLeft) > 1 || Math.abs(prevTabState.width - nextWidth) > 1)) { + indicator.style.transition = "none"; + indicator.style.transform = `translate3d(${prevTabState.left}px, -50%, 0)`; + indicator.style.width = `${prevTabState.width}px`; + void indicator.offsetWidth; + requestAnimationFrame(() => { + indicator.style.transition = ""; + indicator.style.transform = `translate3d(${nextLeft}px, -50%, 0)`; + indicator.style.width = `${nextWidth}px`; + }); + } else { + indicator.style.transform = `translate3d(${nextLeft}px, -50%, 0)`; + indicator.style.width = `${nextWidth}px`; + } + + prevTabState = { left: nextLeft, width: nextWidth }; + }; + document.addEventListener("click", (event) => { + if (event.target.closest?.(".md-search__button, [data-md-component=search]")) { + setTimeout(initSearchModalDefaults, 20); + setTimeout(initSearchModalDefaults, 150); + } + const tabLink = event.target.closest?.(".md-tabs__link"); + if (tabLink) { + const list = tabLink.closest(".md-tabs__list"); + const currentActive = list?.querySelector(".md-tabs__item--active > .md-tabs__link, .md-tabs__link--active"); + if (list && currentActive) { + const listRect = list.getBoundingClientRect(); + const linkRect = currentActive.getBoundingClientRect(); + prevTabState = { left: linkRect.left - listRect.left, width: linkRect.width }; + } + } for (const picker of document.querySelectorAll(".page-context__picker")) { if (!picker.contains(event.target)) closePicker(picker); } }); - if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init); - else init(); - if (window.document$?.subscribe) window.document$.subscribe(init); + window.addEventListener("keydown", (event) => { + if (((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") || event.key === "/") { + setTimeout(initSearchModalDefaults, 20); + setTimeout(initSearchModalDefaults, 150); + } + }); + window.addEventListener("resize", syncTabIndicator); + + const DEFAULT_SEARCH_TOPICS = [ + { + title: "Quickstart with Gemma 4", + path: ["Get started", "Quickstart"], + url: "get-started/", + excerpt: "Choose a Gemma 4 model size (E2B to 31B) and run your first inference locally or in Google Colab." + }, + { + title: "Gemma 4 model overview & benchmarks", + path: ["Models", "Gemma 4"], + url: "models/gemma-4/", + excerpt: "Architecture, context windows, multimodal inputs, and benchmark results across the Gemma 4 family." + }, + { + title: "Run Gemma locally with Ollama", + path: ["Run", "Local"], + url: "deployment/ollama/", + excerpt: "Pull and run quantized Gemma 4 checkpoints on macOS, Linux, or Windows with a single command." + }, + { + title: "Fine-tune Gemma with QLoRA", + path: ["Fine-tune", "Guides"], + url: "tuning/qlora/", + excerpt: "Memory-efficient 4-bit LoRA fine-tuning with Hugging Face TRL and PEFT on a single GPU." + }, + { + title: "Multimodal vision, audio, and video", + path: ["Get started", "Multimodal"], + url: "get-started/capabilities/vision/", + excerpt: "Pass images, multi-frame video, and audio inputs to Gemma 4 and control token budgets." + }, + { + title: "Function calling & tool use", + path: ["Get started", "Text"], + url: "get-started/capabilities/function-calling/", + excerpt: "Define structured tool schemas and parse model tool calls in multi-turn agent loops." + } + ]; + + const resolveSiteBase = () => { + try { + const cfg = document.querySelector("#__config"); + if (cfg) { + const parsed = JSON.parse(cfg.textContent); + const raw = new URL(parsed.base || ".", window.location.href).toString(); + return raw.endsWith("/") ? raw : `${raw}/`; + } + } catch { + // Fallback to root + } + return new URL("/", window.location.href).toString(); + }; + + const initSearchModalDefaults = () => { + let shadowRoot = null; + for (const div of document.querySelectorAll("body > div")) { + if (div.shadowRoot && div.shadowRoot.querySelector(".z")) { + shadowRoot = div.shadowRoot; + break; + } + } + if (!shadowRoot || shadowRoot.__gemmaDefaultsInit) return; + const resultsPane = shadowRoot.querySelector(".z"); + const input = shadowRoot.querySelector(".f input"); + if (!resultsPane || !input) return; + shadowRoot.__gemmaDefaultsInit = true; + + const base = resolveSiteBase(); + const wrapper = document.createElement("div"); + wrapper.className = "gemma-search-defaults"; + wrapper.innerHTML = + `

Suggested topics

` + + `
    ` + + DEFAULT_SEARCH_TOPICS.map((item, idx) => { + const href = new URL(item.url, base).toString(); + const crumbs = item.path.map((p) => `
  1. ${p}
    2. `).join(""); + return ( + `
  2. ` + + `` + + `
    ` + + `
    ${crumbs}
    ` + + `

    ${item.title}

    ` + + `
    ${item.excerpt}
    ` + + `
    ` + + `    ` + + `
    3. ` + ); + }).join("") + + `
`; + + resultsPane.insertBefore(wrapper, resultsPane.firstChild); + + let activeIdx = 0; + const links = [...wrapper.querySelectorAll("a.i")]; + const closeModal = () => shadowRoot.querySelector(".k button")?.click(); + const setHighlight = (next) => { + links.forEach((a, i) => a.classList.toggle("h", i === next)); + activeIdx = next; + }; + links.forEach((a, i) => { + a.addEventListener("pointerenter", () => setHighlight(i)); + a.addEventListener("click", () => closeModal()); + }); + + const syncVisibility = () => { + const hasQuery = input.value.trim().length > 0; + wrapper.style.display = hasQuery ? "none" : ""; + }; + + input.addEventListener("input", syncVisibility); + input.addEventListener("focus", syncVisibility); + input.addEventListener("keydown", (e) => { + if (input.value.trim().length > 0) return; + if (e.key === "ArrowDown") { + e.preventDefault(); + e.stopPropagation(); + setHighlight((activeIdx + 1) % links.length); + links[activeIdx]?.scrollIntoView({ block: "nearest" }); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + e.stopPropagation(); + setHighlight((activeIdx - 1 + links.length) % links.length); + links[activeIdx]?.scrollIntoView({ block: "nearest" }); + } else if (e.key === "Enter" && links[activeIdx]) { + e.preventDefault(); + e.stopPropagation(); + const dest = links[activeIdx].href; + closeModal(); + window.location.href = dest; + } + }); + + const observer = new MutationObserver(syncVisibility); + observer.observe(resultsPane, { childList: true, subtree: true }); + syncVisibility(); + }; + + const onPageReady = () => { + init(); + syncTabIndicator(); + initSearchModalDefaults(); + setTimeout(initSearchModalDefaults, 250); + if (typeof window.__initGemmaHome === "function") { + window.__initGemmaHome(); + } + }; + + if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", onPageReady); + else onPageReady(); + if (window.document$?.subscribe) window.document$.subscribe(onPageReady); })(); diff --git a/docs/stylesheets/content.css b/docs/stylesheets/content.css index 5daaa04..e1492c8 100644 --- a/docs/stylesheets/content.css +++ b/docs/stylesheets/content.css @@ -71,37 +71,36 @@ /* ------------------------------------------------------------------- Admonitions - A tinted panel with a single accent rail on the left. Quieter than - Material's default full-colour title bar. + Clean editorial callouts: uniform 1px hairline, subtle surface tint, + crisp typographic title, no 3px left border rail or stock icons. ------------------------------------------------------------------- */ .md-typeset .admonition, .md-typeset details { margin: var(--gemma-space-5) 0; - padding: var(--gemma-space-3) var(--gemma-space-4); - font-size: 0.83rem; + padding: 0.95rem 1.2rem; + font-size: 0.84rem; + line-height: 1.6; background-color: var(--gemma-surface-sunken); border: 1px solid var(--gemma-border); - border-left: 3px solid var(--gemma-n300); - border-radius: var(--gemma-radius-md); + border-radius: var(--gemma-radius-lg); box-shadow: none; } .md-typeset .admonition-title, .md-typeset summary { - margin: 0 0 var(--gemma-space-1); - padding: 0 0 0 var(--gemma-space-5); - font-size: 0.83rem; + margin: 0 0 0.25rem; + padding: 0 !important; + font-size: 0.85rem; font-weight: 600; + letter-spacing: -0.01em; + color: var(--md-default-fg-color); background-color: transparent; border: 0; } .md-typeset .admonition-title::before, .md-typeset summary::before { - top: 0.1em; - left: 0; - width: 1rem; - height: 1rem; + display: none !important; } .md-typeset .admonition > :last-child, @@ -109,38 +108,22 @@ margin-bottom: 0; } -/* Material tints each type at `.md-typeset .admonition.note` (0,3,1), which outranks the - base rule above. Matching that specificity keeps every panel on the same neutral surface; - the type is carried by the rail colour instead. */ .md-typeset .admonition[class], .md-typeset details[class] { background-color: var(--gemma-surface-sunken); -} - -/* Accent rail and icon tint per type. */ -.md-typeset .admonition.note, -.md-typeset details.note { - border-left-color: var(--gemma-blue); -} - -.md-typeset .note > .admonition-title::before, -.md-typeset .note > summary::before { - background-color: var(--gemma-blue); -} - -.md-typeset .admonition.tip, -.md-typeset details.tip { - border-left-color: var(--gemma-status-success); + border-left: 1px solid var(--gemma-border); } .md-typeset .admonition.warning, .md-typeset details.warning { - border-left-color: var(--gemma-status-warning); + background-color: color-mix(in srgb, var(--gemma-status-warning) 5%, var(--gemma-surface-sunken)); + border-color: color-mix(in srgb, var(--gemma-status-warning) 28%, var(--gemma-border)); } .md-typeset .admonition.danger, .md-typeset details.danger { - border-left-color: var(--gemma-status-danger); + background-color: color-mix(in srgb, var(--gemma-status-danger) 5%, var(--gemma-surface-sunken)); + border-color: color-mix(in srgb, var(--gemma-status-danger) 28%, var(--gemma-border)); } /* ------------------------------------------------------------------- diff --git a/docs/stylesheets/gemma.css b/docs/stylesheets/gemma.css index 03985de..91cceb3 100644 --- a/docs/stylesheets/gemma.css +++ b/docs/stylesheets/gemma.css @@ -59,15 +59,15 @@ --gemma-white: #FFFFFF; --gemma-ink: #202124; - /* Landing-page gradient stops, derived from the palette. */ + /* Landing-page stage & gradient stops, derived from the palette. */ --gemma-ink-raised: #152238; --gemma-navy-900: #0e2042; --gemma-navy-800: #102a5c; --gemma-navy-700: #16366e; - --gemma-home-bg: #040d1a; - --gemma-home-bg-raised: #07152f; - --gemma-home-bg-mid: #040c1e; - --gemma-home-bg-deep: #020712; + --gemma-home-bg: #ffffff; + --gemma-home-bg-raised: #f2f5fb; + --gemma-home-bg-mid: #eef2f9; + --gemma-home-bg-deep: #141518; --gemma-blue-strong: var(--gemma-blue-800); --gemma-blue-hover: var(--gemma-blue-600); diff --git a/docs/stylesheets/home.css b/docs/stylesheets/home.css index 666d70e..27be4c9 100644 --- a/docs/stylesheets/home.css +++ b/docs/stylesheets/home.css @@ -14,252 +14,236 @@ * limitations under the License. */ -/* Landing page chrome, backdrop, and hero. The :has() scope keeps these - deliberate dark-theme overrides off ordinary documentation pages. */ +/* =================================================================== + HOME — DeepMind Gemma geometric blueprint stage, hero search & pills. + =================================================================== */ -html:has(.gemma-teaser), -body:has(.gemma-teaser), -body:has(.gemma-teaser) .md-container, -body:has(.gemma-teaser) .md-main { +@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap"); + +html:has(.gemma-stage), +body:has(.gemma-stage), +body:has(.gemma-stage) .md-container, +body:has(.gemma-stage) .md-main { height: 100%; max-height: 100vh; margin: 0; overflow: hidden; - background-color: var(--gemma-home-bg); + background-color: var(--gemma-surface); scrollbar-width: none; } -body:has(.gemma-teaser) * { scrollbar-width: none; } - -body:has(.gemma-teaser) *::-webkit-scrollbar, -html:has(.gemma-teaser)::-webkit-scrollbar { - display: none; -} - -body:has(.gemma-teaser) .md-header, -body:has(.gemma-teaser) .md-tabs { - background-color: transparent !important; - box-shadow: none !important; - color: var(--gemma-white) !important; - --md-default-fg-color: color-mix(in srgb, var(--gemma-white) 82%, transparent); - --md-default-fg-color--light: color-mix(in srgb, var(--gemma-white) 56%, transparent); - --md-default-fg-color--lighter: color-mix(in srgb, var(--gemma-white) 32%, transparent); - --md-default-fg-color--lightest: color-mix(in srgb, var(--gemma-white) 12%, transparent); - --md-default-bg-color: var(--gemma-ink); - --md-typeset-color: var(--gemma-white); - --md-typeset-a-color: var(--gemma-blue-light); - --md-primary-fg-color: var(--gemma-blue-deep); - --md-primary-bg-color: var(--gemma-white); - --md-accent-fg-color: var(--gemma-blue-light); -} - -body:has(.gemma-teaser) .md-header { - border-bottom: 0 !important; -} - -body:has(.gemma-teaser) .md-tabs { - border-bottom: 1px solid color-mix(in srgb, var(--gemma-white) 8%, transparent) !important; +[data-md-color-scheme="slate"] body:has(.gemma-stage), +body[data-md-color-scheme="slate"]:has(.gemma-stage), +body[data-md-color-scheme="slate"]:has(.gemma-stage) .md-container, +body[data-md-color-scheme="slate"]:has(.gemma-stage) .md-main { + background-color: var(--gemma-surface-sunken); } -body:has(.gemma-teaser) [data-md-component="palette"], -body:has(.gemma-teaser) .md-footer, -body:has(.gemma-teaser) [data-md-component="footer"] { - display: none !important; -} +body:has(.gemma-stage) * { scrollbar-width: none; } +body:has(.gemma-stage) *::-webkit-scrollbar, +html:has(.gemma-stage)::-webkit-scrollbar { display: none; } +body:has(.gemma-stage) .md-footer, +body:has(.gemma-stage) [data-md-component="footer"] { display: none !important; } +body:has(.gemma-stage) :is(.md-header, .md-tabs) { background-color: var(--gemma-surface); border-bottom: 0; } +body[data-md-color-scheme="slate"]:has(.gemma-stage) :is(.md-header, .md-tabs) { background-color: var(--gemma-surface-sunken); } -body:has(.gemma-teaser) :is( - .md-header__title, - .md-header__topic, - .md-header__button, - .md-header__source, - .md-tabs__link -) { - color: color-mix(in srgb, var(--gemma-white) 85%, transparent) !important; +.gemma-stage { + position: relative; + width: calc(100% - 2.5rem); + height: calc(100vh - 6.85rem); + margin: 0.35rem auto 1.15rem; + border-radius: 1.75rem; + overflow: hidden; + user-select: none; + font-family: "Google Sans Flex", "Google Sans", sans-serif; + font-optical-sizing: auto; + background: radial-gradient(circle at 50% 44%, var(--gemma-n0) 0%, var(--gemma-home-bg-raised) 56%, var(--gemma-home-bg-mid) 100%); } -body:has(.gemma-teaser) :is( - .md-header__title, - .md-tabs__link--active, - .md-tabs__link:hover, - .md-header__button:hover -) { - color: var(--gemma-white) !important; - opacity: 1 !important; +body[data-md-color-scheme="slate"] .gemma-stage { + background: radial-gradient(circle at 50% 44%, var(--gemma-surface) 0%, var(--gemma-home-bg-deep) 66%, rgb(12 13 16) 100%); } -body:has(.gemma-teaser) :is(.md-header__button, .md-tabs__link) :is(svg, .md-icon), -body:has(.gemma-teaser) .md-search :is(svg, .md-icon, .md-search__icon, .md-search__options) { - color: var(--gemma-white) !important; - fill: none !important; - stroke: currentColor !important; +.gemma-stage::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + backdrop-filter: blur(1px); + -webkit-backdrop-filter: blur(1px); + background: radial-gradient(ellipse 30% 22% at 50% 45%, color-mix(in srgb, var(--gemma-n0) 28%, transparent) 0%, transparent 80%); + mask-image: radial-gradient(ellipse 32% 24% at 50% 45%, rgb(0 0 0 / 75%) 0%, transparent 80%); + -webkit-mask-image: radial-gradient(ellipse 32% 24% at 50% 45%, rgb(0 0 0 / 75%) 0%, transparent 80%); +} +body[data-md-color-scheme="slate"] .gemma-stage::after { + background: radial-gradient(ellipse 30% 22% at 50% 45%, color-mix(in srgb, var(--gemma-home-bg-deep) 32%, transparent) 0%, transparent 80%); +} +.gemma-hero-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; } +.gemma-teaser { position: absolute; z-index: 4; top: 44.5%; left: 50%; width: min(92%, 46rem); text-align: center; transform: translate(-50%, -50%); pointer-events: none; } +.gemma-title { margin: 0 0 0.22em; color: var(--gemma-ink); font-family: "Google Sans Flex", "Google Sans", sans-serif; font-size: clamp(3.6rem, 6.8vw, 6.125rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.0272em; font-variation-settings: "opsz" 144, "wght" 500; } +body[data-md-color-scheme="slate"] .gemma-title { color: var(--gemma-white); } +.gemma-tagline { max-width: 34rem; margin: 0 auto; color: var(--gemma-n700); font-size: clamp(1.02rem, 1.48vw, 1.28rem); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; } +body[data-md-color-scheme="slate"] .gemma-tagline { color: var(--gemma-n300); } +.gemma-hero-search { position: relative; width: min(100%, 33.5rem); margin: 1.5rem auto 0; text-align: left; pointer-events: auto; } + +.gemma-hero-search__bar { + display: flex; + align-items: center; + gap: 0.65rem; + height: 3.2rem; + padding: 0 0.45rem 0 1.15rem; + border-radius: var(--gemma-radius-pill); + background-color: color-mix(in srgb, var(--gemma-white) 88%, transparent); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + box-shadow: 0 10px 30px rgb(32 33 36 / 7%); + transition: box-shadow 200ms var(--gemma-ease), background-color 200ms var(--gemma-ease); } -body:has(.gemma-teaser) .md-header .md-search :is(.md-search__button, .md-search__form) { - color: color-mix(in srgb, var(--gemma-white) 85%, transparent) !important; - background-color: color-mix(in srgb, var(--gemma-white) 15%, transparent) !important; - border: 1px solid color-mix(in srgb, var(--gemma-white) 20%, transparent) !important; +.gemma-hero-search__bar:focus-within { + background-color: var(--gemma-white); + box-shadow: 0 14px 38px rgb(32 33 36 / 12%); } -body:has(.gemma-teaser) .md-header .md-search :is(.md-search__button, .md-search__form):hover { - color: var(--gemma-white) !important; - background-color: color-mix(in srgb, var(--gemma-white) 25%, transparent) !important; - border-color: color-mix(in srgb, var(--gemma-white) 35%, transparent) !important; +body[data-md-color-scheme="slate"] .gemma-hero-search__bar { + background-color: color-mix(in srgb, var(--gemma-white) 10%, transparent); + box-shadow: 0 12px 32px rgb(0 0 0 / 38%); } -body:has(.gemma-teaser) .md-header .md-search__input { - color: var(--gemma-white) !important; - background-color: transparent !important; +body[data-md-color-scheme="slate"] .gemma-hero-search__bar:focus-within { + background-color: color-mix(in srgb, var(--gemma-surface) 94%, transparent); + box-shadow: 0 16px 40px rgb(0 0 0 / 50%); } -body:has(.gemma-teaser) .md-header .md-search__input::placeholder { - color: color-mix(in srgb, var(--gemma-white) 70%, transparent) !important; -} +.gemma-hero-search__icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--gemma-n500); } +.gemma-hero-search__field { position: relative; flex: 1; height: 100%; display: flex; align-items: center; overflow: hidden; } +.gemma-hero-search__input { width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--gemma-ink); font-family: inherit; font-size: 0.9rem; } +body[data-md-color-scheme="slate"] .gemma-hero-search__input { color: var(--gemma-white); } -.gemma-bg { +.gemma-hero-search__rotator { position: absolute; inset: 0; - height: 100vh; + display: flex; + align-items: center; + color: var(--gemma-n600); + font-size: 0.9rem; + white-space: nowrap; overflow: hidden; + text-overflow: ellipsis; pointer-events: none; - background: radial-gradient( - circle at 50% 35%, - var(--gemma-home-bg-raised) 0%, - var(--gemma-home-bg-mid) 55%, - var(--gemma-home-bg-deep) 100% - ); + opacity: 0; + filter: blur(5px); + transform: translateY(4px) scale(0.992); + transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1) 130ms, filter 460ms cubic-bezier(0.22, 1, 0.36, 1) 130ms, transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 130ms; + will-change: opacity, filter, transform; } -.gemma-wave-svg { - display: block; - width: 100%; - height: 100%; - object-fit: cover; -} +.gemma-hero-search__rotator.is-visible { opacity: 1; filter: blur(0px); transform: translateY(0) scale(1); } +.gemma-hero-search__rotator.is-exiting { opacity: 0; filter: blur(4px); transform: translateY(-3px) scale(0.994); transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1) 0ms, filter 220ms cubic-bezier(0.4, 0, 1, 1) 0ms, transform 220ms cubic-bezier(0.4, 0, 1, 1) 0ms; } +.gemma-hero-search__field.is-typing .gemma-hero-search__rotator { opacity: 0 !important; filter: blur(3px); transition: opacity 150ms ease 0ms, filter 150ms ease 0ms !important; } +body[data-md-color-scheme="slate"] .gemma-hero-search__rotator { color: var(--gemma-n400); } -.gemma-teaser { +.gemma-hero-search__go { + display: inline-flex; + align-items: center; + gap: 0.35rem; + height: 2.3rem; + padding: 0 0.9rem; + border: 0; + border-radius: var(--gemma-radius-pill); + background-color: color-mix(in srgb, var(--gemma-ink) 6%, transparent); + color: var(--gemma-n700); + font-family: inherit; + font-size: 0.76rem; + font-weight: 500; + cursor: pointer; + transition: background-color 180ms var(--gemma-ease), color 180ms var(--gemma-ease); +} + +body[data-md-color-scheme="slate"] .gemma-hero-search__go { background-color: color-mix(in srgb, var(--gemma-white) 10%, transparent); color: var(--gemma-n200); } +.gemma-hero-search__go:hover, +body[data-md-color-scheme="slate"] .gemma-hero-search__go:hover { background-color: var(--gemma-accent-fill); color: var(--gemma-white); } + +.gemma-hero-search__results { position: absolute; - z-index: 2; - top: 50%; - left: 50%; - width: min(90%, 60rem); - text-align: center; - transform: translate(-50%, -50%); + top: calc(100% + 0.5rem); + left: 0; + right: 0; + max-height: 17.5rem; + overflow-y: auto; + padding: 0.4rem; + border-radius: 1.1rem; + background-color: color-mix(in srgb, var(--gemma-white) 96%, transparent); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + box-shadow: 0 16px 40px rgb(32 33 36 / 14%); } -.gemma-name { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: baseline; - width: 100%; - margin: 0 auto -0.15em; - color: var(--gemma-white); - font-size: clamp(2.4rem, 6.8vw, 6.2rem); - font-weight: 800; - line-height: 1.15; - letter-spacing: -0.03em; - user-select: none; +body[data-md-color-scheme="slate"] .gemma-hero-search__results { + background-color: color-mix(in srgb, var(--gemma-surface) 96%, transparent); + box-shadow: 0 18px 44px rgb(0 0 0 / 55%); } -.gemma-prefix-slot, -.gemma-suffix-slot { +.gemma-hero-search__item { display: flex; align-items: center; - height: 1.15em; - overflow: hidden; -} - -.gemma-prefix-slot { - justify-self: end; - justify-content: flex-end; -} - -.gemma-suffix-slot { - justify-self: start; - justify-content: flex-start; - white-space: pre; -} - -.gemma-cycling { - display: inline-block; - color: var(--gemma-white); - will-change: transform, opacity; + justify-content: space-between; + gap: 0.75rem; + padding: 0.55rem 0.8rem; + border-radius: 0.7rem; + color: var(--gemma-ink) !important; + text-decoration: none !important; + transition: background-color 140ms var(--gemma-ease); } -.gemma-static { - color: transparent; - background: linear-gradient( - 135deg, - var(--gemma-blue-light), - var(--gemma-blue) 48%, - var(--gemma-blue-strong) - ); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - white-space: nowrap; -} +body[data-md-color-scheme="slate"] .gemma-hero-search__item { color: var(--gemma-white) !important; } +.gemma-hero-search__item:hover, +.gemma-hero-search__item.is-active { background-color: color-mix(in srgb, var(--gemma-blue) 12%, transparent); } +.gemma-hero-search__item-title { font-size: 0.84rem; font-weight: 600; } +.gemma-hero-search__item-path { font-size: 0.73rem; color: var(--gemma-text-muted); } -.gemma-tagline { - max-width: 44rem; - margin: 0 auto 2.8rem; - color: color-mix(in srgb, var(--gemma-white) 65%, transparent); - font-size: clamp(1.2rem, 2.2vw, 1.65rem); - font-weight: 400; - line-height: 1.5; - letter-spacing: 0.01em; +.gemma-actions { + position: absolute; + z-index: 3; + bottom: clamp(1.5rem, 3.8vh, 2.5rem); + left: 50%; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 0.75rem; + width: max-content; + max-width: calc(100% - 2rem); + transform: translateX(-50%); } -.gemma-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } - .gemma-btn { display: inline-flex; align-items: center; justify-content: center; - padding: 0.95rem 2.8rem; - color: var(--gemma-white) !important; - background-color: var(--gemma-accent-fill); - border: 1px solid color-mix(in srgb, var(--gemma-white) 15%, transparent); - border-radius: var(--gemma-radius-md); - box-shadow: 0 6px 24px color-mix(in srgb, var(--gemma-accent-fill) 40%, transparent); - font-size: 1.22rem; - font-weight: 700; + gap: 0.5rem; + padding: 0.82rem 1.65rem; + border-radius: var(--gemma-radius-pill); + font-family: "Google Sans Flex", "Google Sans", sans-serif; + font-size: 0.93rem; + font-weight: 500; + line-height: 1.2; + letter-spacing: -0.01em; text-decoration: none !important; - transition: background-color 250ms, border-color 250ms, box-shadow 250ms, transform 250ms; -} - -.gemma-btn:hover { - background-color: var(--gemma-blue-hover); - border-color: var(--gemma-white); - box-shadow: 0 8px 32px color-mix(in srgb, var(--gemma-accent-fill) 60%, transparent); - transform: translateY(-2px); -} - -/* Secondary hero action: white, so the blue primary stays the dominant call. */ -.gemma-btn--ghost { color: var(--gemma-ink) !important; background-color: var(--gemma-white); box-shadow: 0 6px 24px color-mix(in srgb, var(--gemma-ink) 30%, transparent); } -.gemma-btn--ghost:hover { background-color: var(--gemma-white); border-color: var(--gemma-white); box-shadow: 0 8px 32px color-mix(in srgb, var(--gemma-ink) 45%, transparent); } - -@media (max-width: 48rem) { - .gemma-name { font-size: clamp(1.8rem, 6vw, 2.6rem); } - .gemma-tagline { margin-bottom: 2.2rem; font-size: 1.25rem; } - .gemma-btn { padding: 0.85rem 2.4rem; font-size: 1.12rem; } -} - -@media (max-width: 31.25rem) { - .gemma-name { font-size: clamp(1.35rem, 6.2vw, 1.75rem); } - .gemma-tagline { font-size: 1.05rem; } -} - -@media (max-height: 30rem) { - html:has(.gemma-teaser), - body:has(.gemma-teaser), - body:has(.gemma-teaser) .md-container, - body:has(.gemma-teaser) .md-main { - height: auto; - min-height: 100%; - max-height: none; - overflow: auto; - } - - .gemma-bg { position: fixed; } - .gemma-teaser { position: relative; inset: auto; margin: 4rem auto 2rem; transform: none; } -} + white-space: nowrap; + transition: background-color 220ms var(--gemma-ease), color 220ms var(--gemma-ease), box-shadow 220ms var(--gemma-ease), transform 220ms var(--gemma-ease); +} + +.gemma-btn__icon { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 220ms var(--gemma-ease); } +.gemma-btn:hover { transform: translateY(-2px); } +.gemma-btn:hover .gemma-btn__icon--slide { transform: translateX(3px); } +.gemma-btn:hover .gemma-btn__icon--pop { transform: translate(2px, -2px); } +.gemma-btn--primary { color: var(--gemma-white) !important; background-color: var(--gemma-ink); box-shadow: 0 8px 24px rgb(32 33 36 / 16%); } +.gemma-btn--primary:hover { background-color: var(--gemma-accent-fill); box-shadow: 0 10px 28px color-mix(in srgb, var(--gemma-accent-fill) 34%, transparent); } +body[data-md-color-scheme="slate"] .gemma-btn--primary { color: var(--gemma-home-bg-deep) !important; background-color: var(--gemma-white); box-shadow: 0 8px 28px rgb(0 0 0 / 38%); } +body[data-md-color-scheme="slate"] .gemma-btn--primary:hover { color: var(--gemma-white) !important; background-color: var(--gemma-accent-fill); } +.gemma-btn--glass { color: var(--gemma-ink) !important; background-color: color-mix(in srgb, var(--gemma-white) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 6px 20px rgb(32 33 36 / 6%); } +.gemma-btn--glass:hover { background-color: var(--gemma-white); box-shadow: 0 10px 26px rgb(32 33 36 / 11%); } +body[data-md-color-scheme="slate"] .gemma-btn--glass { color: var(--gemma-white) !important; background-color: color-mix(in srgb, var(--gemma-white) 10%, transparent); box-shadow: 0 6px 20px rgb(0 0 0 / 28%); } +body[data-md-color-scheme="slate"] .gemma-btn--glass:hover { background-color: color-mix(in srgb, var(--gemma-white) 16%, transparent); } diff --git a/docs/stylesheets/motion.css b/docs/stylesheets/motion.css index ccae5c9..2526c0b 100644 --- a/docs/stylesheets/motion.css +++ b/docs/stylesheets/motion.css @@ -26,9 +26,29 @@ =================================================================== */ :root { - --gemma-ease: cubic-bezier(0.2, 0, 0.2, 1); - --gemma-duration-fast: 100ms; - --gemma-duration: 160ms; + --gemma-ease: cubic-bezier(0.22, 1, 0.36, 1); + --gemma-duration-fast: 120ms; + --gemma-duration: 200ms; +} + +@keyframes gemmaPageReveal { + from { + opacity: 0; + transform: translateY(6px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.md-content__inner, +.gemma-stage { + animation: gemmaPageReveal 260ms var(--gemma-ease) both; +} + +.md-sidebar--primary .md-nav--primary > .md-nav__list { + animation: gemmaPageReveal 220ms var(--gemma-ease) both; } /* ------------------------------------------------------------------- diff --git a/docs/stylesheets/nav.css b/docs/stylesheets/nav.css index 6e19bf3..5484ff1 100644 --- a/docs/stylesheets/nav.css +++ b/docs/stylesheets/nav.css @@ -16,14 +16,6 @@ /* =================================================================== NAV — header, top tabs, sidebar and table of contents. - - Owns: the site chrome around the content. - Does NOT own: colours (gemma.css), content width (layout.css). - - The header is a near-white tint rather than a slab of brand colour. - Brand blue appears once, on the active tab indicator — which is also - the one place --gemma-blue is safe, since a 2px rule has no contrast - requirement to meet. =================================================================== */ /* ------------------------------------------------------------------- @@ -36,51 +28,57 @@ box-shadow: none; } -.md-header--shadow { - box-shadow: none; -} +.md-header--shadow { box-shadow: none; } +.md-header__inner { padding-inline: var(--gemma-space-4); } -.md-header__title { - font-size: 0.9rem; - font-weight: 700; -} +/* Zensical reserves 11.5rem + 1.4rem margin for .md-header__source even when + it only contains whitespace, leaving search floating away from the right edge. */ +.md-header__source:not(:has(*)) { display: none !important; } +.md-header__title { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.015em; } .md-header__button { color: var(--gemma-header-fg); + border-radius: var(--gemma-radius-md); + transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms cubic-bezier(0.22, 1, 0.36, 1); } -body:not([data-md-color-scheme="slate"]):not(:has(.gemma-teaser)) .md-logo .gemma-logo-dark, -[data-md-color-scheme="slate"] .md-logo .gemma-logo-light, -body:has(.gemma-teaser) .md-logo .gemma-logo-light { - display: none !important; -} +.md-header__button:hover { background-color: color-mix(in srgb, var(--gemma-ink) 6%, transparent); } +[data-md-color-scheme="slate"] .md-header__button:hover { background-color: color-mix(in srgb, var(--gemma-white) 8%, transparent); } -/* Search sits on the tinted header, so it needs a surface of its own. */ -.md-search__form { +body:not([data-md-color-scheme="slate"]) .md-logo .gemma-logo-dark, +[data-md-color-scheme="slate"] .md-logo .gemma-logo-light { display: none !important; } + +/* Search button & form anchored cleanly on the right of the header. */ +.md-search__button { + width: 11.5rem; + height: 1.85rem; + border-radius: var(--gemma-radius-pill); background-color: var(--gemma-surface); border: 1px solid var(--gemma-border); - border-radius: var(--gemma-radius-md); - box-shadow: none; + transition: border-color 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms cubic-bezier(0.22, 1, 0.36, 1); } -.md-search__form:hover { - background-color: var(--gemma-surface); - border-color: var(--gemma-n200); +.md-search__button:hover, +.md-search__button:focus { + background-color: var(--gemma-surface-raised); + border-color: var(--gemma-border-strong); + box-shadow: var(--gemma-shadow-sm); } -.md-search__input { - font-size: 0.8rem; +.md-search__form { + background-color: var(--gemma-surface); + border: 1px solid var(--gemma-border); + border-radius: var(--gemma-radius-md); + box-shadow: none; } +.md-search__form:hover { background-color: var(--gemma-surface); border-color: var(--gemma-n200); } +.md-search__input { font-size: 0.8rem; } .md-search__input::placeholder, -.md-search__icon { - color: var(--gemma-text-muted); -} +.md-search__icon { color: var(--gemma-text-muted); } /* ------------------------------------------------------------------- Top tabs - The active tab is the strongest signal on the page chrome: brand - colour plus a 2px rule, rather than a faint weight change. ------------------------------------------------------------------- */ .md-tabs { background-color: var(--gemma-header-bg); @@ -89,36 +87,79 @@ body:has(.gemma-teaser) .md-logo .gemma-logo-light { box-shadow: none; } +.md-tabs > .md-grid { + padding-inline: var(--gemma-space-3); +} + .md-tabs__list { - gap: var(--gemma-space-1); + position: relative; + align-items: center; + gap: 0.2rem; + padding-block: 0.35rem; +} + +.md-tabs__item, +.md-tabs__item--active { + height: auto; + padding-inline: 0.08rem; + border-bottom: 0 !important; } .md-tabs__link { + position: relative; + z-index: 1; margin-top: 0; - padding: var(--gemma-space-3) var(--gemma-space-3); - font-size: 0.8rem; + padding: 0.38rem 0.85rem; + border-radius: var(--gemma-radius-pill); + border-bottom: 0 !important; + font-size: 0.82rem; font-weight: 500; opacity: 1; color: var(--gemma-text-muted); - border-bottom: 2px solid transparent; + transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1), + background-color 200ms cubic-bezier(0.22, 1, 0.36, 1); } .md-tabs__link:hover { color: var(--md-default-fg-color); + background-color: color-mix(in srgb, var(--gemma-ink) 5%, transparent); +} + +[data-md-color-scheme="slate"] .md-tabs__link:hover { + background-color: color-mix(in srgb, var(--gemma-white) 7%, transparent); } -/* Zensical marks the active tab on the
  • , not the . */ .md-tabs__item--active > .md-tabs__link, .md-tabs__item--active > .md-tabs__link:hover, .md-tabs__link--active { color: var(--gemma-accent-on-tint); font-weight: 600; - border-bottom-color: var(--gemma-blue); + background-color: color-mix(in srgb, var(--gemma-blue) 11%, transparent); +} + +.md-tabs__list.has-sliding-indicator :is(.md-tabs__item--active > .md-tabs__link, .md-tabs__link--active) { + background-color: transparent !important; +} + +.gemma-tab-indicator { + position: absolute; + top: 50%; + left: 0; + height: 1.95rem; + background-color: color-mix(in srgb, var(--gemma-blue) 11%, transparent); + border-radius: var(--gemma-radius-pill); + pointer-events: none; + transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), + width 280ms cubic-bezier(0.22, 1, 0.36, 1), + height 280ms cubic-bezier(0.22, 1, 0.36, 1); +} + +[data-md-color-scheme="slate"] .gemma-tab-indicator { + background-color: color-mix(in srgb, var(--gemma-blue) 18%, transparent); } /* ------------------------------------------------------------------- Sidebar - Quiet by default; the active item is the only thing with weight. ------------------------------------------------------------------- */ .md-nav { font-size: 0.8rem; @@ -133,39 +174,51 @@ body:has(.gemma-teaser) .md-logo .gemma-logo-light { } .md-nav__link { - margin-block: 0; - padding-block: var(--gemma-space-1); + margin-block: 1px; + margin-inline: 0; + padding: 0.34rem 0.65rem; + border-radius: var(--gemma-radius-md); color: var(--gemma-text-secondary); + transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1), + background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), + transform 180ms cubic-bezier(0.22, 1, 0.36, 1); } -.md-nav__link:hover { +.md-nav__link:hover, +.md-nav--primary .md-nav__link[for]:hover:not(.md-nav__link--active), +.md-nav--primary .md-nav__link[href]:hover:not(.md-nav__link--active) { color: var(--md-default-fg-color); + background-color: color-mix(in srgb, var(--gemma-ink) 4.5%, transparent); +} + +[data-md-color-scheme="slate"] .md-nav__link:hover, +[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link[for]:hover:not(.md-nav__link--active), +[data-md-color-scheme="slate"] .md-nav--primary .md-nav__link[href]:hover:not(.md-nav__link--active) { + background-color: color-mix(in srgb, var(--gemma-white) 6%, transparent); } -/* Material's own rule is `.md-nav--primary .md-nav__item .md-nav__link--active` - (0,3,0); anything less specific silently loses. */ .md-nav--primary .md-nav__item .md-nav__link--active, .md-nav--primary .md-nav__item .md-nav__link--active:hover, .md-nav__item .md-nav__link--active { font-weight: 600; color: var(--gemma-accent); + background-color: color-mix(in srgb, var(--gemma-blue) 10%, transparent); } -/* Section labels inside the sidebar (Text, Multimodal, Advanced…). */ .md-nav__item--section > .md-nav__link { + margin-inline: 0; + padding-inline: 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gemma-text-muted); + background-color: transparent !important; } -/* Indentation alone carries the nesting. An earlier hairline rail drew a - line down the outside of the whole sidebar, because Material wraps even - the top level in a nested list. */ .md-nav__list .md-nav__list { margin-left: var(--gemma-space-2); - padding-left: var(--gemma-space-3); + padding-left: var(--gemma-space-2); } /* ------------------------------------------------------------------- @@ -182,4 +235,5 @@ body:has(.gemma-teaser) .md-logo .gemma-logo-light { .md-sidebar--secondary .md-nav__link--active { color: var(--gemma-accent); + background-color: transparent; } diff --git a/overrides/home.html b/overrides/home.html index 66cdcbd..2e1c37e 100644 --- a/overrides/home.html +++ b/overrides/home.html @@ -17,142 +17,639 @@ {% extends "main.html" %} {% block container %} -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - -
    -
    -
    - -
    - Gemma -
    - +
    + + +
    +

    Gemma

    +

    Our most capable open models

    + +
    -

    Our most capable open models

    - -
    - Get Started - Model Overview +
    + + Get started + + + + Try in Google AI Studio + + + + Explore models +
    -
    +
    {% endblock %}