/* ========================================================================== DEAR DIGI · IN BLOOM — /giveaway ========================================================================== Campaign styling for the spring giveaway. Scoped: every rule is under .page-giveaway or a .gv- prefix, so deleting this file and the page when the campaign ends leaves the store untouched. The header, announcement bar, search, cart, modal and footer are the store's own components, used unmodified — this page no longer hides any of them. SPACING. One scale, applied everywhere, rather than one global padding: --gv-gap-section between major sections ~72px desktop / ~44px mobile --gv-gap-block between blocks in a section ~28 / 22 --gv-gap-tight heading to text, text to control ~16 / 14 FLOWERS. Foreground layers that sit above a panel and overlap its edge. Painted as CSS background-image on empty spans, so a missing file renders nothing at all — no broken icon, no layout shift. Dropping cosmos-tl.png and cosmos-br.png into images/campaign finishes them with no code change. ========================================================================== */ .page-giveaway { /* the approved campaign palette */ --c-paper: #FFF9F3; --c-ink: #493329; --c-rose: #B63C5D; --c-wordmark: #CF6482; --c-blush: #F4CAD5; --c-ink-2: #80594E; --c-panel: #FBE8EE; --c-hair: rgba(182, 60, 93, 0.16); --gv-gap-section: clamp(2.75rem, 5vw, 4.5rem); --gv-gap-block: clamp(1.4rem, 2.6vw, 1.75rem); --gv-gap-tight: clamp(0.875rem, 1.6vw, 1rem); background: var(--c-paper); color: var(--c-ink); /* the flower layers overlap panel edges on purpose; clip keeps that from ever becoming horizontal page scroll */ overflow-x: clip; /* anchors land with the heading clear of the fixed header */ scroll-padding-top: calc(var(--nav-h) + var(--top-h) + 1rem); } /* The decorative layers hang past their columns by design. Clipping has to happen on the document element: overflow set on propagates to the viewport in a way that still lets scrollWidth grow. `clip`, not `hidden`, so no scroll container is created and the fixed header keeps behaving. */ html:has(body.page-giveaway) { overflow-x: clip; } /* the store's own chrome, tinted to the campaign — structure untouched */ /* the announcement bar keeps the store's own gradient — overriding it to a flat rose made this page's banner read as a different brand */ .page-giveaway .nav { border-bottom: 1px solid var(--c-hair); } .page-giveaway .brand-word { color: var(--c-wordmark); } .page-giveaway .footer { background: var(--c-paper); border-top: 1px solid var(--c-hair); } /* .footer-fine is nowrap site-wide, which overflows below ~360px */ .page-giveaway .footer-fine { white-space: normal; } /* ============================================================= scaffold ==*/ .gv-section { max-width: var(--max-w); margin: 0 auto; padding: var(--gv-gap-section) var(--pad-x); } /* section padding would otherwise stack with the previous section's */ .gv-section + .gv-section { padding-top: 0; } .gv-head { margin: 0 0 var(--gv-gap-block); } .gv-head.is-centered { text-align: center; margin-inline: auto; max-width: 44rem; } .gv-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--c-ink); margin: 0; } .gv-h2 em { font-style: italic; font-weight: 500; color: var(--c-rose); } .gv-lede { color: var(--c-ink-2); font-size: clamp(0.98rem, 2.2vw, 1.08rem); line-height: 1.62; margin: var(--gv-gap-tight) auto 0; max-width: 46ch; } .gv-note { font-size: 0.82rem; line-height: 1.5; color: var(--c-ink-2); margin: var(--gv-gap-tight) auto 0; max-width: 46ch; } /* style.css caps every p at 62ch. Inside a centred block that leaves the box hard against the left edge while its text centres within it, so short lines read as off-centre. Measured eight elements doing this. Reset for the page, then hand a measure back only where a paragraph actually wants one. */ .page-giveaway main p { max-width: none; } .gv-lede, .gv-note { max-width: 46ch; margin-inline: auto; } .gv-sub { max-width: 34ch; } /* =============================================================== panels ==*/ .gv-panel { position: relative; background: var(--c-paper); border: 1px solid var(--c-hair); border-radius: clamp(16px, 2.4vw, 24px); box-shadow: 0 1px 2px rgba(73, 51, 41, 0.04), 0 16px 40px rgba(73, 51, 41, 0.06); padding: clamp(1.5rem, 4vw, 2.75rem); } /* =============================================================== flowers ==*/ .gv-bloom { position: absolute; z-index: 3; pointer-events: none; background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 10px 16px rgba(73, 51, 41, 0.15)); } .gv-bloom.tl { background-image: url("/images/campaign/cosmos-tl.png"); background-position: top left; width: clamp(96px, 15vw, 190px); aspect-ratio: 266 / 261; /* as supplied */ top: calc(-1 * clamp(0.6rem, 1.8vw, 1.3rem)); left: calc(-1 * clamp(0.5rem, 1.6vw, 1.1rem)); } .gv-bloom.br { background-image: url("/images/campaign/cosmos-br.png"); background-position: bottom right; width: clamp(88px, 13vw, 165px); aspect-ratio: 348 / 469; /* as supplied */ bottom: calc(-1 * clamp(0.6rem, 1.8vw, 1.2rem)); right: calc(-1 * clamp(0.5rem, 1.6vw, 1.1rem)); } /* ============================================================= butterflies == Cues from the approved artwork: the butterflies there are translucent and slightly out of focus, not flat silhouettes, with loose cosmos petals drifting between them. So these are gradient-filled at low opacity and individually blurred — that is what reads as depth rather than as stickers. SVG data URIs: sharp at any size, no extra requests. Decorative only — aria-hidden in the markup and never a click target. ------------------------------------------------------------------------ */ .gv-fly, .gv-petal { position: absolute; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: contain; } .gv-fly { aspect-ratio: 120 / 100; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20120%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22wa%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220.6%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23E9A0B4%22%20stop-opacity%3D%220.9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23CF6482%22%20stop-opacity%3D%220.4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22url%28%23wa%29%22%3E%3Cpath%20d%3D%22M58%2052%20C44%2024%2030%208%2018%2012%20C4%2017%202%2038%2012%2050%20C22%2062%2042%2058%2058%2052%20Z%22%2F%3E%3Cpath%20d%3D%22M58%2054%20C46%2062%2030%2074%2022%2088%20C16%2098%2030%20100%2040%2092%20C50%2084%2056%2068%2058%2054%20Z%22%2F%3E%3Cpath%20d%3D%22M62%2052%20C76%2024%2090%208%20102%2012%20C116%2017%20118%2038%20108%2050%20C98%2062%2078%2058%2062%2052%20Z%22%2F%3E%3Cpath%20d%3D%22M62%2054%20C74%2062%2090%2074%2098%2088%20C104%2098%2090%20100%2080%2092%20C70%2084%2064%2068%2062%2054%20Z%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M60%2042%20C62.4%2042%2063.6%2045%2063.6%2050%20C63.6%2058%2062.4%2066%2060%2070%20C57.6%2066%2056.4%2058%2056.4%2050%20C56.4%2045%2057.6%2042%2060%2042%20Z%22%20fill%3D%22%23CF6482%22%20opacity%3D%220.55%22%2F%3E%3Cg%20stroke%3D%22%23CF6482%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.45%22%3E%3Cpath%20d%3D%22M59%2042%20C56%2034%2050%2028%2044%2025%22%2F%3E%3Cpath%20d%3D%22M61%2042%20C64%2034%2070%2028%2076%2025%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .gv-petal { aspect-ratio: 60 / 40; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22p%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23F0B8C6%22%20stop-opacity%3D%220.85%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23F0B8C6%22%20stop-opacity%3D%220.3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M2%2022%20C10%206%2034%200%2052%206%20C58%208%2058%2016%2050%2024%20C38%2036%2014%2036%202%2022%20Z%22%20fill%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E"); } /* Every decoration is anchored off an EDGE of the figure -- bottom:100% puts it wholly above the photograph, left:100% wholly to its right, and so on -- so none of them can sit on the camera itself. The ring of padding on .gv-hero-art below reserves the space they occupy. Sizes are capped to that ring so they stay inside the column too. Varied angle, opacity and focus keep them from reading as repeated stickers. */ .gv-fly.f1 { /* above, left of centre */ width: clamp(56px, 8.4vw, 112px); bottom: 100%; left: 3%; margin-bottom: 0.15rem; transform: rotate(-16deg); opacity: 0.95; } .gv-fly.f2 { /* right flank, upper third */ width: clamp(38px, 5.2vw, 72px); left: 100%; top: 14%; margin-left: 0.2rem; transform: rotate(24deg); opacity: 0.7; filter: blur(0.8px); } .gv-fly.f3 { /* below, left of centre */ width: clamp(46px, 6.6vw, 96px); top: 100%; left: 12%; margin-top: 0.15rem; transform: rotate(10deg); opacity: 0.85; } .gv-fly.f4 { /* left flank, lower third */ width: clamp(30px, 4.2vw, 58px); right: 100%; bottom: 8%; margin-right: 0.2rem; transform: rotate(-6deg); opacity: 0.55; filter: blur(1.1px); } .gv-petal.p1 { width: clamp(24px, 3.4vw, 44px); bottom: 100%; right: 22%; margin-bottom: 0.5rem; transform: rotate(-32deg); opacity: 0.7; } .gv-petal.p2 { width: clamp(20px, 2.8vw, 34px); top: 100%; right: 14%; margin-top: 0.6rem; transform: rotate(48deg); opacity: 0.6; filter: blur(0.7px); } .gv-petal.p3 { width: clamp(16px, 2.2vw, 28px); right: 100%; top: 20%; margin-right: 0.5rem; transform: rotate(18deg); opacity: 0.5; filter: blur(1px); } /* ================================================================== hero ==*/ .gv-hero { position: relative; padding: calc(var(--nav-h) + var(--top-h) + clamp(1.5rem, 4vw, 2.75rem)) var(--pad-x) 0; max-width: var(--max-w); margin: 0 auto; } .gv-hero::before { content: ""; position: absolute; inset: 0 auto -6rem 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: linear-gradient(180deg, rgba(244, 202, 213, 0.34) 0%, rgba(244, 202, 213, 0.20) 40%, rgba(244, 202, 213, 0.08) 72%, rgba(244, 202, 213, 0) 100%); } .gv-hero-inner { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .gv-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-rose); margin: 0 0 0.65rem; } .gv-kicker { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 4.8vw, 1.5rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink); margin: 0 0 0.5rem; line-height: 1.1; } .gv-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--c-ink); margin: 0; text-wrap: balance; } .gv-title .gv-heart { color: var(--c-wordmark); font-style: normal; font-size: 0.52em; vertical-align: 0.24em; } .gv-sub { color: var(--c-ink-2); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.55; margin: var(--gv-gap-tight) 0 0; max-width: 34ch; } .gv-hero .gv-note { margin-left: 0; margin-right: 0; } .gv-close { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--gv-gap-block); padding: 0.5rem 0.9rem; border: 1px solid var(--c-blush); border-radius: var(--radius-pill); background: #fff; font-size: 0.8rem; font-weight: 600; color: var(--c-rose); } .gv-close svg { width: 15px; height: 15px; flex: 0 0 15px; } .gv-count { margin-top: var(--gv-gap-tight); max-width: 26rem; } .gv-count-row { display: flex; gap: 0.4rem; } .gv-unit { /* was text-align + block children, which left the pair sitting high in the box. A centred flex column puts the number and its label on the box's optical centre instead. */ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem; min-height: 3.9rem; padding: 0.5rem 0.25rem; border: 1px solid var(--c-blush); border-radius: 12px; background: var(--c-panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .gv-unit b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 3.2vw, 1.45rem); line-height: 1; color: var(--c-rose); font-variant-numeric: tabular-nums; } .gv-unit i { font-style: normal; line-height: 1; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-2); } .gv-count.is-closed .gv-count-row { display: none; } .gv-closed-msg { display: none; margin: 0; padding: 0.8rem 1rem; border-radius: 12px; background: var(--c-panel); font-family: var(--font-display); color: var(--c-rose); text-align: center; } .gv-count.is-closed .gv-closed-msg { display: block; } .gv-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--gv-gap-block); } .gv-actions .btn { flex: 1 1 100%; justify-content: center; } @media (min-width: 620px) { .gv-actions .btn { flex: 0 1 auto; } } .gv-shot { position: relative; margin: 0; display: grid; place-items: center; /* the tilt lives here, not on the : rotating the image made its painted box 15px wider and 26px taller than the box the decorations are anchored to, which is how they ended up on the camera */ transform: rotate(-4deg); } .gv-shot::before { content: ""; position: absolute; width: 104%; aspect-ratio: 1 / 0.78; border-radius: 50%; background: radial-gradient(closest-side, rgba(244, 202, 213, 0.9) 0%, rgba(244, 202, 213, 0.45) 52%, rgba(244, 202, 213, 0) 80%); } .gv-shot img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(73, 51, 41, 0.2)); } /* ================================================================= prize ==*/ .gv-prize { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .gv-prize-shot { margin: 0; } .gv-prize-shot img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); box-shadow: 0 2px 4px rgba(73, 51, 41, 0.05), 0 14px 30px rgba(73, 51, 41, 0.12); } .gv-kit { list-style: none; margin: 0; padding: 0; } .gv-kit li { position: relative; padding: 0.55rem 0 0.55rem 1.6rem; border-bottom: 1px solid var(--c-hair); font-size: clamp(0.95rem, 2.2vw, 1.02rem); line-height: 1.4; color: var(--c-ink); } .gv-kit li:last-child { border-bottom: 0; } .gv-kit li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 9px; height: 5px; border-left: 2px solid var(--c-rose); border-bottom: 2px solid var(--c-rose); transform: translateY(-50%) rotate(-45deg); } .gv-kit em { display: block; font-style: normal; font-size: 0.84rem; color: var(--c-ink-2); margin-top: 0.1rem; } .gv-ship { margin: var(--gv-gap-tight) 0 0; padding: 0.7rem 0.95rem; background: var(--c-panel); border-radius: 10px; font-size: 0.88rem; font-weight: 600; color: var(--c-rose); text-align: center; } /* ================================================================= enter == Mockup 09 — an editorial ruled list. One measure, one left edge: the numerals, the rules, the pill, the button and the fine print all hang off the same 40rem column, so nothing in the panel reads as off-centre. ------------------------------------------------------------------------ */ .gv-enter { max-width: 46rem; margin-inline: auto; } .gv-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; } .gv-steps li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: clamp(0.6rem, 2vw, 1.1rem); align-items: baseline; padding: clamp(0.95rem, 2.4vw, 1.25rem) 0; border-bottom: 1px solid var(--c-hair); } .gv-steps li:first-child { border-top: 1px solid var(--c-hair); } .gv-no { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 3vw, 1.4rem); letter-spacing: 0.08em; line-height: 1; color: var(--c-rose); } /* heading and detail share one line — the point of the editorial treatment */ .gv-steps p { margin: 0; color: var(--c-ink-2); font-size: clamp(0.98rem, 2.4vw, 1.06rem); line-height: 1.5; } .gv-steps p b { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); margin-right: 0.15rem; } .gv-enter-foot { max-width: 40rem; margin: var(--gv-gap-block) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(0.8rem, 2.4vw, 1.2rem); } .gv-limit { margin: 0; padding: 0.7rem 1.15rem; background: var(--c-panel); border-radius: var(--radius-pill); font-size: 0.9rem; color: var(--c-ink-2); } .gv-limit strong { color: var(--c-ink); } .gv-enter-note { max-width: 40rem; margin: var(--gv-gap-tight) auto 0; text-align: left; } .gv-enter-note + .gv-enter-note { margin-top: 0.3rem; } @media (max-width: 620px) { /* one thumb: the pill sits above a full-width button */ .gv-enter-foot { flex-direction: column; align-items: stretch; } .gv-enter-foot .gv-limit { text-align: center; } .gv-enter-foot .btn { width: 100%; justify-content: center; } } /* ================================================================= offer ==*/ .gv-offer { position: relative; text-align: center; background: linear-gradient(180deg, var(--c-panel) 0%, #FFF6F8 100%); border: 1px solid var(--c-hair); border-radius: clamp(16px, 2.4vw, 24px); padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.25rem, 4vw, 3rem); } .gv-offer-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.6rem, 4.5vw, 2.3rem); line-height: 1.1; color: var(--c-ink); margin: 0; } .gv-offer-h em { font-style: italic; font-weight: 500; color: var(--c-rose); } .gv-pct { font-family: var(--font-display); font-weight: 600; font-size: clamp(3.6rem, 13vw, 6rem); line-height: 0.95; color: var(--c-rose); margin: var(--gv-gap-tight) 0 0; letter-spacing: -0.02em; } .gv-pct-sub { font-size: clamp(0.98rem, 2.6vw, 1.12rem); color: var(--c-ink); margin: 0.15rem 0 0; } .gv-code-row { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: var(--gv-gap-block) auto 0; max-width: 26rem; } .gv-code { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed var(--c-rose); border-radius: var(--radius-pill); padding: 0.85rem 1.4rem; font-weight: 700; font-size: clamp(1rem, 3vw, 1.15rem); letter-spacing: 0.16em; color: var(--c-rose); } .gv-copy { flex: 0 0 auto; } .gv-copy-msg { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--c-rose); min-height: 1.1em; } .gv-script-line { font-family: "Caveat", cursive; font-weight: 700; font-size: clamp(1.2rem, 3.4vw, 1.55rem); color: var(--c-rose); margin: var(--gv-gap-tight) 0 0; } /* ================================================================= shelf ==*/ .gv-shelf { margin-top: var(--gv-gap-section); } .gv-shelf-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--c-ink); margin: 0 0 var(--gv-gap-block); text-align: center; } .gv-shelf .card-cta, .gv-shelf .card-add { display: none; } .gv-shelf .card { cursor: pointer; } .gv-shelf-more { text-align: center; margin: var(--gv-gap-block) 0 0; } .gv-empty { text-align: center; color: var(--c-ink-2); padding: 1.5rem 0; } /* =================================================================== why == Proof on the left, reasons on the right. The ruled list is the same device as the entry steps, so the page has one editorial voice rather than a different layout per section. The old version was three equal 4:5 cards, one of which held a landscape cut-out and was therefore mostly empty. -------------------------------------------------------------------------- */ .gv-why { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: start; } .gv-why-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.8vw, 1.1rem); } .gv-why-shot { margin: 0; } .gv-why-shot img { width: 100%; /* the width/height attributes are presentational hints; without this the height attribute wins and aspect-ratio is ignored, so the frame stretches to the photograph's own proportions */ height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--radius-md); border: 1px solid var(--c-hair); background: var(--c-panel); } .gv-why-shot figcaption { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; margin: 0.6rem 0 0; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; } .gv-why-shot figcaption b { color: var(--c-ink); font-weight: 700; } .gv-why-shot figcaption em { font-style: normal; color: var(--c-ink-2); opacity: 0.8; } .gv-why-reasons { list-style: none; margin: 0; padding: 0; counter-reset: why; } .gv-why-reasons li { counter-increment: why; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0 0.9rem; padding: clamp(0.85rem, 2vw, 1.15rem) 0; border-top: 1px solid var(--c-hair); } .gv-why-reasons li:first-child { border-top: 0; padding-top: 0; } .gv-why-reasons li::before { content: counter(why, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--c-rose); line-height: 1.35; padding-top: 0.1rem; } .gv-why-reasons h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.28rem); color: var(--c-ink); margin: 0 0 0.3rem; line-height: 1.25; } .gv-why-reasons p { margin: 0; color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.6; } .gv-why-note { margin-top: var(--gv-gap-block); } @media (max-width: 880px) { .gv-why { grid-template-columns: minmax(0, 1fr); gap: var(--gv-gap-block); } } .gv-why-note { text-align: center; margin-top: var(--gv-gap-block); } /* ================================================================ signup ==*/ .gv-signup { max-width: 34rem; margin-inline: auto; text-align: center; } .gv-signup-h { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 3vw, 1.6rem); color: var(--c-ink); margin: 0; line-height: 1.2; } .gv-signup-form { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--gv-gap-block); } .gv-signup-form input[type="email"] { flex: 1 1 100%; min-width: 0; padding: 0.85rem 1.1rem; border: 1px solid var(--c-blush); border-radius: var(--radius-pill); background: #fff; font-family: var(--font-body); font-size: 1rem; color: var(--c-ink); } .gv-signup-form input:focus { outline: none; border-color: var(--c-rose); box-shadow: 0 0 0 3px rgba(182, 60, 93, 0.12); } .gv-signup-form .btn { flex: 1 1 100%; justify-content: center; } @media (min-width: 620px) { .gv-signup-form input[type="email"] { flex: 1 1 auto; } .gv-signup-form .btn { flex: 0 0 auto; } } .gv-signup-msg { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--c-ink-2); min-height: 1.1em; } .gv-signup-msg.is-error { color: var(--c-rose); } /* ================================================================= terms ==*/ .gv-terms-section { padding-bottom: var(--gv-gap-section); } .gv-terms { max-width: 46rem; margin-inline: auto; } .gv-terms ol { margin: 0; padding: 0 1rem 1.25rem 2.4rem; font-size: 0.9rem; line-height: 1.6; color: var(--c-ink-2); } .gv-terms ol li { margin-bottom: 0.55rem; } /* ================================================================ mobile ==*/ @media (max-width: 880px) { .gv-hero-inner { grid-template-columns: minmax(0, 1fr); } /* picture between the headline and the ask */ .gv-hero-copy { display: contents; } .gv-hero-lead { order: 1; } .gv-hero-art { order: 2; } .gv-hero-meta { order: 3; } .gv-prize { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .gv-actions .btn, .gv-signup-form .btn { width: 100%; } .gv-close { width: 100%; justify-content: center; } } /* This page carries no .reveal hooks. main.js sets window.__revealReady, which switches off the inline fallback that would otherwise un-hide anything the IntersectionObserver misses — measured leaving cards faint even after scrolling past them. Campaign content is always visible instead. */ .page-giveaway .reveal { opacity: 1 !important; transform: none !important; } /* the hero is not a panel, so its bloom is positioned against the section */ .gv-hero { position: relative; } /* The cosmos sit off the corners of the photograph, never over it: one above and right, one below and left. Capped in size so the upper one clears the fixed header (its bottom edge is at 113px) instead of hiding behind it. */ .gv-bloom.is-hero-bloom { background-image: url("/images/campaign/cosmos-tl.png"); background-position: bottom right; aspect-ratio: 266 / 261; width: clamp(88px, 10vw, 118px); /* capped so its top clears the fixed header */ bottom: 100%; right: -3%; top: auto; left: auto; margin-bottom: 0.25rem; transform: scaleX(-1) rotate(6deg); } .gv-bloom.is-hero-bloom-2 { background-image: url("/images/campaign/cosmos-br.png"); background-position: top left; aspect-ratio: 348 / 469; width: clamp(64px, 8.5vw, 118px); top: 100%; left: -2%; margin-top: 0.3rem; transform: rotate(-8deg); opacity: 0.95; } /* The ring. Inset the figure by roughly the size of the largest decoration on each edge, so everything anchored outside the photograph still lands inside the column and nothing reaches the viewport edge or the header. */ .gv-hero-art { position: relative; padding: clamp(2.6rem, 6.5vw, 5.5rem) clamp(2.2rem, 5.5vw, 4.75rem); } /* On a phone the card flowers kept their desktop minimum (96px and 88px) on a ~330px card and were only nudged ~9px past the corner, so their petals fell across the eyebrow, the shipping line and the note. Smaller here, and pushed further out of the corner. Desktop is untouched: these floors only bind below ~620px. */ @media (max-width: 620px) { .gv-bloom.tl { width: clamp(60px, 19vw, 88px); top: calc(-1 * clamp(1.2rem, 5vw, 2rem)); left: calc(-1 * clamp(1rem, 4.5vw, 1.8rem)); } .gv-bloom.br { width: clamp(54px, 16vw, 80px); bottom: calc(-1 * clamp(1.2rem, 5vw, 2rem)); right: calc(-1 * clamp(1rem, 4.5vw, 1.8rem)); } } /* Stacked-but-wide band. The camera is at its largest here (622px at 768), so the ring has to grow with it or the lower flower spills onto the meta line. */ @media (min-width: 621px) and (max-width: 880px) { .gv-hero-art { padding-block: clamp(3.5rem, 11vw, 6rem); } .gv-bloom.is-hero-bloom-2 { width: clamp(52px, 8vw, 72px); } } @media (max-width: 620px) { /* The phone hero read as unfinished: one flat butterfly on a camera pressed hard against both edges. The side ring is wider here so the camera has air, the right-flank butterfly and the drifting petal are back now that they can no longer land on the photograph, and every piece is sized to fit INSIDE the ring — any taller and it grows into the copy above, which is how the upper flower once ended up across "no purchase necessary". */ .gv-fly.f4 { display: none; } /* the tiniest, blurriest one only */ .gv-hero-art { padding: clamp(3rem, 19vw, 4.75rem) clamp(2.6rem, 13vw, 4rem); } .gv-bloom.is-hero-bloom { width: clamp(56px, 15vw, 74px); } .gv-bloom.is-hero-bloom-2 { width: clamp(40px, 11vw, 54px); } .gv-fly.f1 { width: clamp(58px, 16vw, 78px); } .gv-fly.f2 { width: clamp(28px, 7vw, 40px); } .gv-fly.f3 { width: clamp(46px, 12.5vw, 62px); } .gv-petal.p1 { width: clamp(17px, 4.4vw, 25px); } .gv-petal.p2 { width: clamp(15px, 3.8vw, 21px); } .gv-petal.p3 { width: clamp(12px, 3.2vw, 17px); } }