.hero { border-radius: 34px; padding: 28px 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .hero h1 { font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; } .hero p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); } .hero p a, h2 a { color: inherit; text-decoration: none; padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; transition: color .2s ease, background-size .3s ease; } .hero p a:hover, .hero p a:focus-visible, h2 a:hover, h2 a:focus-visible { color: #fff; background-size: 100% 1px; } .pill { flex: none; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: var(--edge); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 152px; padding: 16px; border-radius: 30px; color: inherit; text-decoration: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s, opacity .18s ease, scale .18s ease; } .page .tile { opacity: 0; scale: .96; } .page.active .tile { opacity: 1; scale: 1; transition: transform .35s cubic-bezier(.2, .8, .2, 1), background .35s, opacity .5s ease calc(.06s + var(--i, 0) * 35ms), scale .6s cubic-bezier(.2, .8, .2, 1) calc(.06s + var(--i, 0) * 35ms); } .tile:hover, .tile:focus-visible { transform: translateY(-3px) scale(1.015); background: var(--glass-hover); } .tile:active { transform: scale(.97); } .icon, .go { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); box-shadow: var(--edge); } .icon { width: 46px; height: 46px; } .go { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; color: var(--ink-soft); } .go svg { width: 15px; height: 15px; } .tile b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .tile small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-soft); } button.tile { border: 0; font: inherit; text-align: left; cursor: pointer; } .modal { margin: auto; padding: 0; border: 0; border-radius: 34px; width: min(320px, calc(100% - 32px)); color: var(--ink); text-align: center; transition: opacity .3s ease, scale .45s cubic-bezier(.2, .8, .2, 1); } .modal::backdrop { background: rgba(8, 12, 24, .45); transition: opacity .3s ease; } @starting-style { .modal[open] { opacity: 0; scale: .96; } .modal[open]::backdrop { opacity: 0; } } .modal form { display: grid; justify-items: center; padding: 28px 24px 20px; } .modal h3 { margin-top: 16px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; } .modal p { margin-top: 6px; font-size: 13px; color: var(--ink-soft); } .modal button { justify-self: stretch; margin-top: 22px; padding: 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: var(--edge); color: inherit; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .25s; } .modal button:hover, .modal button:focus-visible { background: rgba(255, 255, 255, .26); } .dock { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 6px; border-radius: 999px; } .dock::before { content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 7px); border-radius: 999px; background: rgba(255, 255, 255, .2); box-shadow: var(--edge); transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .dock:has(a:last-child.active)::before { transform: translateX(calc(100% + 2px)); } .dock a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: color .25s; } .dock a:hover, .dock a:focus-visible, .dock a.active { color: #fff; } .dock svg { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { .modal, .modal::backdrop, .modal button, .tile,.dock a, .dock::before, .hero p a, h2 a, .page, .page h2, .page.active h2, .page.active .tile { transition: none; } }