/* 01-hero — DESKTOP (1024 px and wider). HERO-D. Every selector starts with #home .v-desktop */ /* Pull the hero up under the glass header so the sky runs behind it. */ #home .v-desktop { margin-top: calc(var(--header-h) * -1); } /* Today's sky, ending in a soft white hill that runs into the next (white) section. */ #home .v-desktop .hr { position: relative; overflow: hidden; padding-top: calc(var(--header-h) + 60px); /* the header pull-up */ padding-bottom: var(--section-y); /* §15: spacing is set centrally */ /* The bottom padding always sits under the hill; white there so the section's edge never shows a blue seam. */ background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-0) 16%, var(--sky-1) 50%, var(--sky-2) 84%, var(--sky-2) calc(100% - var(--section-y)), #fff calc(100% - var(--section-y))); } /* ---------- copy ---------- */ #home .v-desktop .hr-copy { position: relative; z-index: 5; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); text-align: center; } #home .v-desktop .eyebrow { margin-bottom: 16px; } #home .v-desktop .hr-line { white-space: nowrap; } #home .v-desktop .hr-blue { color: var(--accent-edge); } /* §13: no accent-blue text on the sky */ #home .v-desktop .hr-lede { max-width: 640px; margin: 22px auto 0; text-wrap: wrap; } #home .v-desktop .hr-cta { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 34px; } /* badge clear space ≥ ¼ of its height */ #home .v-desktop .hr-fine { margin-top: 16px; color: var(--body); } /* ---------- the product stage: three real phones fanned on the hill ---------- */ #home .v-desktop .hr-stage { --cw: 296px; /* centre phone width */ --sw: calc(var(--cw) * .86); /* side phones */ --ch: calc(var(--cw) * 2.1024); /* phone height = w × (0.06 + 0.94 × 2868 / 1320) */ --drop: 54px; /* side phones stand a little further back */ --tuck: .26; /* share of a side phone tucked behind the centre one */ --ground: 0px; /* centre phone's feet sit on the stage's bottom; the section padding below is var(--section-y) */ --hill: 96px; /* top of the hill, above the phones' feet */ --gap: 58px; /* air between the art and the side phones */ --star: 200px; --peak: 150px; position: relative; height: calc(var(--ch) + var(--ground) + 8px); margin-top: 56px; /* + the phone's 8 px = 64 px from the copy (§13) */ } /* Soft light behind the phones, so the stage glows on the sky. */ #home .v-desktop .hr-glow { position: absolute; z-index: 0; left: 50%; top: -150px; width: min(1280px, 100vw); height: calc(var(--ch) + 150px); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, .92), rgba(255, 255, 255, .5) 52%, rgba(255, 255, 255, 0)); pointer-events: none; } #home .v-desktop .hr-hill { position: absolute; z-index: 1; left: 50%; top: calc(100% - var(--hill)); width: 180vw; height: 1000px; border-radius: 50%; background: #fff; transform: translateX(-50%); box-shadow: 0 -18px 60px rgba(255, 255, 255, .6), inset 0 1px 0 #fff; } /* Contact shadows where each phone stands on the hill (level on the ground, not tilted with the phone). */ #home .v-desktop .hr-contact { --pw: var(--cw); /* phone width */ --px: 0px; /* phone's foot, from the stage centre */ --pb: var(--ground); /* phone's foot, above the stage bottom */ position: absolute; z-index: 1; left: 50%; bottom: calc(var(--pb) - 18px); width: calc(var(--pw) * 1.1); height: 36px; margin-left: calc(var(--px) - var(--pw) * .55); border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 26, 43, .24), rgba(15, 26, 43, 0)) center / 74% 56% no-repeat, radial-gradient(closest-side, rgba(15, 26, 43, .10), rgba(15, 26, 43, 0)); pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); } #home .v-desktop .hr-contact-l, #home .v-desktop .hr-contact-r { --pw: var(--sw); --pb: calc(var(--ground) + var(--ch) - var(--sw) * 2.1024 - var(--drop)); } #home .v-desktop .hr-contact-l { --px: calc(var(--cw) / -2 - var(--sw) * (1 - var(--tuck)) + var(--sw) / 2); } #home .v-desktop .hr-contact-r { --px: calc(var(--cw) / 2 - var(--sw) * var(--tuck) + var(--sw) / 2); } #home .v-desktop .hr-slot { position: absolute; left: 50%; transition: transform .5s var(--ease); } /* Same frame as .phone; its shadow stays inside the hero (the contact shadow does the grounding). */ #home .v-desktop .hr-phone { box-shadow: 0 22px 34px -20px rgba(15, 26, 43, .30), 0 6px 30px -8px rgba(15, 26, 43, .13); } #home .v-desktop .hr-centre { z-index: 3; top: 8px; margin-left: calc(var(--cw) / -2); } #home .v-desktop .hr-left, #home .v-desktop .hr-right { z-index: 2; top: calc(8px + var(--drop)); transform-origin: 50% 100%; } #home .v-desktop .hr-left { margin-left: calc(var(--cw) / -2 - var(--sw) * (1 - var(--tuck))); transform: rotate(-5deg); } #home .v-desktop .hr-right { margin-left: calc(var(--cw) / 2 - var(--sw) * var(--tuck)); transform: rotate(5deg); } /* Hover: a phone lifts off the hill and its contact shadow softens. */ @media (hover: hover) { #home .v-desktop .hr-centre:hover { transform: translateY(-10px); } #home .v-desktop .hr-left:hover { transform: rotate(-5deg) translateY(-10px); } #home .v-desktop .hr-right:hover { transform: rotate(5deg) translateY(-10px); } #home .v-desktop .hr-stage:has(.hr-centre:hover) .hr-contact-c, #home .v-desktop .hr-stage:has(.hr-left:hover) .hr-contact-l, #home .v-desktop .hr-stage:has(.hr-right:hover) .hr-contact-r { opacity: .55; transform: scale(.9); } } /* The waving star stands on the hill to the left of the phones (never over a screen). */ #home .v-desktop .hr-star { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--ground) + 18px); width: var(--star); margin-left: calc(var(--cw) / -2 - var(--sw) * (1 - var(--tuck)) - var(--gap) - var(--star)); transform-origin: 45% 100%; } #home .v-desktop .hr-star .art-shadow { width: 44%; margin: 4px 0 0 23%; } #home .v-desktop .hr-wave { width: 100%; transform-origin: 45% 99%; filter: var(--art-drop); } /* The goal: a little mountain with its flag, on the hill to the right. */ #home .v-desktop .hr-peak { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--ground) + 30px); width: var(--peak); margin-left: calc(var(--cw) / 2 + var(--sw) * (1 - var(--tuck)) + var(--gap)); transform-origin: 50% 100%; } #home .v-desktop .hr-peak img { width: 100%; filter: var(--art-drop); } /* ---------- motion: rise in on load, the star pops up and waves in bursts ---------- */ @keyframes hr-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes hr-phone { from { opacity: 0; transform: translateY(80px); } to { opacity: 1; transform: none; } } @keyframes hr-pop { from { opacity: 0; transform: translateY(18px) scale(.6); } to { opacity: 1; transform: none; } } @keyframes hr-wave { 0%, 60%, 100% { transform: rotate(0deg); } 65% { transform: rotate(-5deg); } 71% { transform: rotate(6deg); } 77% { transform: rotate(-4deg); } 83% { transform: rotate(4deg); } 89% { transform: rotate(-1.5deg); } 94% { transform: rotate(0deg); } } #home .v-desktop .hr-rise { animation: hr-rise .9s var(--ease) var(--d, 0s) both; } #home .v-desktop .hr-phone { animation: hr-phone 1.2s var(--ease) .28s both; } #home .v-desktop .hr-left .hr-phone { animation-delay: .4s; } #home .v-desktop .hr-right .hr-phone { animation-delay: .48s; } #home .v-desktop .hr-star { animation: hr-pop .9s var(--spring) .6s both; } #home .v-desktop .hr-peak { animation: hr-pop .9s var(--spring) .75s both; } #home .v-desktop .hr-wave { animation: hr-wave 5s var(--ease) 1.3s infinite; } /* ---------- sizes per screen ---------- */ @media (max-width: 1279.98px) { #home .v-desktop .hr-stage { --cw: 256px; --star: 136px; --peak: 110px; --drop: 46px; --gap: 46px; } } @media (min-width: 1280px) and (max-width: 1439.98px) { #home .v-desktop .hr-stage { --cw: 276px; --star: 178px; --peak: 134px; } } @media (min-width: 1920px) { #home .v-desktop .hr-stage { --cw: 320px; --star: 224px; --peak: 164px; --drop: 58px; } } /* 30 Sep: the tab-bar strip is fixed in the image itself (today-maya-p17-clean.webp: nothing scrolls behind the tab bar), no overlay. */