/* hero — section styles (loaded from by build.py) */ #vp-hero, #vp-hero * { box-sizing:border-box; } /* Full-bleed so the cream ground reaches both edges; the content inside keeps to the 1240px column every redesigned section shares. */ #vp-hero { width:100vw; margin-left:calc(50% - 50vw); padding:72px 0 0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); } #vp-hero .vp-hero__inner { width:var(--vp-page); margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; } /* ------------------------------------------------------------------ copy -- */ #vp-hero .vp-hero__eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; padding:7px 16px 7px 10px; border-radius:999px; background:var(--color-accent-2-200); color:var(--color-accent-2-800); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } #vp-hero .vp-hero__eyebrow:before { content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--color-accent-2-600); } #vp-hero h1 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(46px,5.4vw,80px); line-height:.98; letter-spacing:-.02em; } #vp-hero .vp-hero__text { max-width:480px; margin:26px 0 0; color:color-mix(in srgb, var(--color-text) 78%, transparent); font-size:19px; line-height:1.55; } #vp-hero .vp-hero__facts { display:flex; flex-wrap:wrap; gap:14px 28px; margin:34px 0 0; } #vp-hero .vp-hero__fact { display:flex; flex-direction:column; } /* The hairline between two figures, drawn by the second of the pair so a wrapped row never starts with a stray rule. */ #vp-hero .vp-hero__fact + .vp-hero__fact { padding-left:28px; border-left:1px solid var(--color-divider); } #vp-hero .vp-hero__figure { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:30px; line-height:1; white-space:nowrap; } #vp-hero .vp-hero__note { margin:6px 0 0; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; line-height:1.35; } /* ----------------------------------------------------------------- media -- */ #vp-hero .vp-hero__media { position:relative; } #vp-hero .vp-hero__blob { position:absolute; z-index:0; top:-26px; left:-34px; width:150px; height:150px; border-radius:50%; background:var(--color-accent-2-300); } /* The drop: three soft corners and one long sweep into the page. */ #vp-hero .vp-hero__frame { position:relative; z-index:1; overflow:hidden; border-radius:var(--radius-lg) var(--radius-lg) 220px var(--radius-lg); box-shadow:var(--shadow-lg); } #vp-hero .vp-hero__frame img { width:100%; height:520px; object-fit:cover; } #vp-hero .vp-hero__badge { position:absolute; z-index:2; right:-14px; bottom:36px; margin:0; display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; background:var(--color-bg); box-shadow:var(--shadow-md); font-size:14px; font-weight:600; } #vp-hero .vp-hero__badge:before { content:""; width:10px; height:10px; flex:none; border-radius:50%; background:var(--color-accent-2-600); } /* ------------------------------------------------------------ two to one -- */ /* Below the second breakpoint the pair becomes one column with the photograph on top — the same rule every two-column section of the redesign follows. */ @media (max-width:980px) { #vp-hero { padding-top:48px; } #vp-hero .vp-hero__inner { grid-template-columns:1fr; gap:36px; } #vp-hero .vp-hero__media { order:-1; } #vp-hero .vp-hero__frame img { height:340px; } #vp-hero .vp-hero__text { max-width:620px; } /* One column leaves only the 24px gutter beside the photograph, so the two pieces that lean out of it lean less far. */ #vp-hero .vp-hero__blob { top:-18px; left:-18px; } #vp-hero .vp-hero__badge { right:8px; } } @media (max-width:780px) { #vp-hero { padding:20px 0 0; } #vp-hero .vp-hero__inner { width:calc(100% - 32px); gap:22px; } #vp-hero .vp-hero__frame { border-radius:var(--radius-lg) var(--radius-lg) 120px var(--radius-lg); } #vp-hero .vp-hero__frame img { height:260px; } /* Nothing hangs past the edge of a 390px screen: the circle behind the photograph and the pill over it both need room the phone has not got. */ #vp-hero .vp-hero__blob, #vp-hero .vp-hero__badge { display:none; } #vp-hero .vp-hero__eyebrow { margin-bottom:14px; padding:6px 14px 6px 9px; font-size:11px; } #vp-hero .vp-hero__eyebrow:before { width:7px; height:7px; } #vp-hero h1 { font-size:36px; line-height:1; } #vp-hero .vp-hero__text { margin-top:14px; font-size:16px; } /* Three columns rather than a wrapping row: a wrapped row would start its second line with the hairline that belongs between two figures. */ #vp-hero .vp-hero__facts { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:24px; } #vp-hero .vp-hero__fact { padding-right:10px; } #vp-hero .vp-hero__fact + .vp-hero__fact { padding-left:12px; } #vp-hero .vp-hero__figure { font-size:20px; } #vp-hero .vp-hero__note { font-size:11px; } } /* A phone on its side has ~350px of height: the photograph gives most of it back rather than taking three swipes to get past. */ @media (max-width:900px) and (orientation:landscape) and (max-height:560px) { #vp-hero .vp-hero__frame img { height:220px; } #vp-hero h1 { font-size:clamp(34px,6.6vw,46px); } }