Repository navigation
Expand file tree
/
Copy pathshared-hero.css
More file actions
48 lines (46 loc) · 2.64 KB
/
Copy pathshared-hero.css
File metadata and controls
48 lines (46 loc) · 2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* Shared composition for the home and product pages. */
.home-hero{border-bottom:1px solid var(--hairline)}
.home-hero .hero-inner{width:100%}
.home-hero .eyebrow{min-height:16px;line-height:16px}
.home-hero h1{margin-top:0;min-height:2.28em}
.hero-title-line{display:block;white-space:nowrap}
.home-hero .lede{min-height:3.7em;margin-top:0;margin-bottom:0}
.home-hero .hero-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,420px);margin-left:auto;margin-right:auto;gap:10px}
.home-hero .hero-cta .btn{justify-content:center;white-space:nowrap}
.home-hero .hero-foot{min-height:32px}
.home-hero .vine-controls{min-height:32px}
@media(max-width:540px){
.home-hero h1{font-size:clamp(21px,6.7vw,32px);letter-spacing:-.055em}
.home-hero .lede{min-height:7.6em}
.home-hero .hero-cta .btn{padding-left:10px;padding-right:10px;gap:6px}
}
/* Native page navigation preserves normal links, history, and anchor behavior.
Only the copy crossfades; the restored garden is shown at full opacity. */
@view-transition{navigation:auto}
.site-header{view-transition-name:hero-header}
.home-hero .vine-left{view-transition-name:hero-vine-left}
.home-hero .vine-right{view-transition-name:hero-vine-right}
.home-hero .hero-garden{view-transition-name:hero-garden}
.home-hero .hero-logo{view-transition-name:hero-mascot}
.home-hero .vine-controls{view-transition-name:hero-playback}
.home-hero .eyebrow{view-transition-name:hero-eyebrow}
.home-hero h1{view-transition-name:hero-title}
.home-hero .lede{view-transition-name:hero-description}
.home-hero .hero-cta{view-transition-name:hero-actions}
.home-hero .hero-foot{view-transition-name:hero-foot}
.home-hero .hero-coordinate{view-transition-name:hero-coordinate}
::view-transition-group(*){animation:none}
::view-transition-old(*){animation:none;opacity:0}
::view-transition-new(*){animation:none;opacity:1;mix-blend-mode:normal}
::view-transition-old(hero-eyebrow),::view-transition-old(hero-title),
::view-transition-old(hero-description),::view-transition-old(hero-actions),
::view-transition-old(hero-foot),::view-transition-old(hero-coordinate){animation:hero-copy-out 100ms ease-out both}
::view-transition-new(hero-eyebrow),::view-transition-new(hero-title),
::view-transition-new(hero-description),::view-transition-new(hero-actions),
::view-transition-new(hero-foot),::view-transition-new(hero-coordinate){animation:hero-copy-in 100ms 100ms ease-in both}
@keyframes hero-copy-out{from{opacity:1}to{opacity:0}}
@keyframes hero-copy-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
@view-transition{navigation:none}
::view-transition-old(*),::view-transition-new(*){animation:none!important}
}