diff --git a/crowdfunding/index.html b/crowdfunding/index.html index 3a09a86bc0..9a7e8b9ef7 100644 --- a/crowdfunding/index.html +++ b/crowdfunding/index.html @@ -111,8 +111,11 @@ :root { --cf-grad-light: linear-gradient(10deg, #e8f3ff 0%, #c0e2ff 40%, #e9ffff 80%, #ffefd6 90%); --cf-grad-dark: linear-gradient(9.2deg, #000000 0%, #131d49 52%, #3f5598 65%, #c3faff 85%, #fff6e0 90%); - --cf-cyan: #70F0F9; --cf-ink: #023789; + /* .area is sized from vh, the section from svh: this is how far the + area's top sits above the section's visible top, negative below. + Anything anchored to the viewport inside .area subtracts it. */ + --cf-area-off: calc((var(--sec-h) - 100svh) / 2); } @media screen and (max-width: 959px) { @@ -157,15 +160,20 @@ min-height: calc(110lvh + var(--cf-band)); } + /* the band fills the top safe area, so a screen without one must not + grow its sections. Every iPhone with a safe area is at least 812pt + tall; the tallest without one is 736pt. */ + @media screen and (max-height: 750px) { + section.page.cf { --cf-band: 0px; } + } + section.page.cf.cf-light { background-image: var(--cf-art), var(--cf-grad-light); } section.page.cf.cf-dark { background-image: var(--cf-art), var(--cf-grad-dark); } - /* Art paths */ - .cf-problem { --cf-art: url("/img/crowdfunding/problem.png"); } - .cf-growth { --cf-art: url("/img/crowdfunding/simplex-growth-2.png"); } - .cf-network { --cf-art: url("/img/design_3/section-3-desktop-light.webp"); } /* 5 participants - home page */ - .cf-revenue { --cf-art: url("/img/design_3/section-4-desktop-light.webp"); } /* Funded by Its Users - home page */ - + /* the two sections whose art is a full-bleed background (desktop only: + on mobile both draw the gradient and place the art as an ) */ + .cf-network { --cf-art: url("/img/design_3/section-3-desktop-light.webp"); } + .cf-revenue { --cf-art: url("/img/design_3/section-4-desktop-light.webp"); } /* hero + close: full-bleed globe (home page hero cover) */ section.page.cf.cf-hero, @@ -173,11 +181,6 @@ background-color: #02071D; background-image: url("/img/design_3/cover.webp"); background-size: var(--cover-bg-w) var(--cover-bg-h); - background-position: center; - } - - section.page.cf.cf-hero, - section.page.cf.cf-close { background-position: calc(50% + var(--sec-vwu) * 40.3) calc(50% + var(--sec-vhu) * 2.2); } @@ -215,43 +218,6 @@ .cf-right .text-container { margin-left: auto; } .cf-left .text-container { margin-right: auto; } - /* ---- centered content (hero + close) ---- */ - section.page.cf-center { flex-direction: column; } - - .cf-center .content { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - gap: calc(var(--sec-vhu) * 3.2); - width: var(--sec-w); - height: var(--sec-h); - padding: 0 calc(var(--sec-vwu) * 6); - z-index: 2; - } - - .cf-center h1 { - font-family: "GT-Walsheim", sans-serif; - font-weight: 700; - font-size: calc(var(--sec-vwu) * 6.4); - line-height: 1.0; - letter-spacing: -0.025em; - color: #ffffff; - max-width: calc(var(--sec-vwu) * 62); - } - - .cf-center .lead { - font-family: "Manrope", sans-serif; - font-weight: 300; - font-size: calc(var(--sec-vwu) * 2.15); - line-height: 1.5; - color: #dfeaff; - max-width: calc(var(--sec-vwu) * 50); - } - - .cf-center .lead strong { font-weight: 600; color: #ffffff; } - /* ---- hero: text left, phone right, bleeding off the bottom ---- */ section.page.cf.cf-hero { overflow: hidden; } .cf-hero .area { position: relative; display: flex; align-items: center; } @@ -339,14 +305,6 @@ letter-spacing: -0.025em; color: #ffffff; } - .cf-close .lead { - font-family: "Manrope", sans-serif; - font-weight: 300; - font-size: calc(var(--sec-vwu) * 2.4); - line-height: 1.55; - color: #ffffff; - margin-top: calc(var(--sec-vhu) * 7); - } .cf-close .cf-close-call { font-family: "Manrope", sans-serif; font-weight: 500; @@ -382,7 +340,7 @@ position: absolute; right: calc(var(--sec-vwu) * -4.6); width: calc(var(--sec-vhu) * 144.4 * 0.4914); - bottom: calc((var(--sec-h) - 100svh) / 2); + bottom: var(--cf-area-off); height: calc(var(--sec-vhu) * 38); background: linear-gradient(to top, #02071D 22%, rgba(2, 7, 29, .8) 52%, rgba(2, 7, 29, 0) 100%); z-index: 3; @@ -429,6 +387,9 @@ } .cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 2.1); width: auto; display: block; transform: translateY(calc(var(--sec-vwu) * -0.25)); } .cf-hero-invest-link:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; border-radius: 4px; } + /* the same link twice: beside the button (desktop), in the hero's top + right corner (mobile). Only one of the two is ever displayed. */ + .cf-hero-corner { display: none; } .cf-hero-cta .cf-pill { position: relative; right: auto; @@ -451,6 +412,7 @@ padding: 0 28px; display: flex; align-items: center; + gap: 9px; font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 600; @@ -480,18 +442,8 @@ } .cf-secondary:hover { box-shadow: 0 0 0 1px #80b6eb; } - .cf-pill { gap: 9px; } .cf-pill svg { height: 30px; width: auto; display: block; transform: translateY(-3.5px); } - /* the hero's invest control keeps the pill's slot, not its skin */ - .cf-pill.cf-hero-invest-link { - padding: 0; - font-weight: 400; - font-size: calc(var(--sec-vwu) * 1.5); - gap: calc(var(--sec-vwu) * 0.7); - } - .cf-pill.cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 2.1); transform: translateY(calc(var(--sec-vwu) * -0.25)); } - @media screen and (min-width: 960px) { .cf-pill { width: 252px; justify-content: center; } } @@ -546,6 +498,11 @@ their colours. Fixed size, does not scale. ============================================================ */ + /* the bar spans the full width at z-index 50000, above every section: + only the logo itself may take a tap, or it covers what sits beside it */ + header#navbar { pointer-events: none; } + header#navbar > a.logo { pointer-events: auto; } + /* logo swap by section theme */ #navbar.on-dark > a.logo.logo-light { display: none; } #navbar.on-dark > a.logo.logo-dark { display: flex; } @@ -581,13 +538,6 @@ /* ---- mobile: portrait art on top, text at the bottom (home page system) ---- */ @media screen and (max-width: 959px) { - .cf-network { --cf-art: url("/img/design_3/section-3-mobile-light.webp"); } - .cf-revenue { --cf-art: url("/img/design_3/section-4-mobile-light.webp"); } - - section.page.cf.cf-network { - background-size: auto calc(var(--cover-bg-h) * 0.72), 102% 102%; - background-position: 50% calc(50% - var(--sec-vhu) * 4.5), center; - } .cf .text-container h2 { font-size: calc(var(--sec-vwu) * 9.4); } .cf .text-container { margin-left: 0 !important; @@ -606,10 +556,6 @@ calc((100vw - var(--cf-phone-w)) / 2 - var(--cf-phone-w) * 1.4462) calc(100svh - var(--cf-phone-show) - var(--cf-phone-h) * 0.4034 + var(--cf-band-shift)); } - section.page.cf.cf-revenue { - background-size: auto calc(var(--cover-bg-h) * 0.84), 102% 102%; - background-position: 50% calc(50% - var(--sec-vhu) * 2), center; - } .cf-problem .area, .cf-growth .area, .cf-moat .area, @@ -715,38 +661,33 @@ padding-right: var(--cf-text-inset); } - .cf-center h1 { font-size: calc(var(--sec-vwu) * 15); max-width: calc(var(--sec-vwu) * 90); } - .cf-center .lead { font-size: calc(var(--sec-vwu) * 5); max-width: calc(var(--sec-vwu) * 88); } - :root { --cf-gutter: 16px; --cf-text-pad: 21.6px; --cf-text-inset: calc(var(--cf-text-pad) - var(--cf-gutter)); - --cf-nav: 54px; --cf-nav-shift: 2.5px; - /* .area is sized from vh; when the browser chrome shrinks the - visible box below that, the area overhangs it symmetrically */ + /* the area's overhang above the section, clamped to zero: text + inside it is pushed down by that much to stay on screen */ --cf-top-base: 66px; - --cf-over: max(0px, calc((var(--sec-h) - 100svh) / 2)); + --cf-over: max(0px, var(--cf-area-off)); --cf-top: calc(var(--cf-top-base) + var(--cf-over)); --cf-safe-b: env(safe-area-inset-bottom, 0px); --cf-cta-gap: 12px; --cf-cta-bottom: max(var(--cf-cta-gap), var(--cf-safe-b)); --cf-cta: calc(62px + var(--cf-cta-bottom) + var(--cf-over)); --cf-gap: 24px; - --cf-pad: var(--cf-gutter); --cf-art-max: 54%; --cf-phone-w: 82vw; --cf-phone-h: calc(var(--cf-phone-w) / 0.4914); --cf-phone-part: 0.55; /* bottom of the hero text block, measured from the section top */ - --cf-hero-text-b: calc(var(--cf-top-base) + max(0px, calc((100svh - var(--sec-h)) / 2)) + 78.5vw); + --cf-hero-text-b: calc(var(--cf-top-base) + max(0px, calc(-1 * var(--cf-area-off))) + 78.5vw); /* the arc crest starts 0.2678 down the cover image, which is 2.349 phone widths tall and sits 0.4034 phone heights above the phone top: the phone may rise no higher than this */ --cf-phone-ceiling: calc(var(--cf-hero-text-b) + var(--cf-phone-w) * 0.1917); --cf-phone-show: max(calc(var(--cf-phone-h) * 0.15), min(calc(var(--cf-phone-h) * var(--cf-phone-part)), calc(100svh - var(--cf-phone-ceiling)))); - --cf-phone-top: calc(100svh - var(--cf-phone-show) - (100svh - var(--sec-h)) / 2); + --cf-phone-top: calc(100svh - var(--cf-phone-show) + var(--cf-area-off)); --cf-fade-ext: max(0px, calc(110lvh - 100svh)); /* dvh so the fade rides with the button as the chrome moves */ --cf-fade-dyn: max(0px, calc(110lvh - 100dvh)); @@ -760,18 +701,17 @@ .cf-close .area { flex-direction: column; justify-content: flex-start; align-items: stretch; } section.page.cf .area { width: 100%; } .cf-hero .area { padding: var(--cf-top) var(--cf-gutter) 0; } - .cf-close .area { padding-top: var(--cf-top); padding-bottom: var(--cf-cta); } - .cf-hero .cf-hero-text { display: contents; } + /* both blocks lay out as one column: text from the top, CTA pinned + to the bottom, so the h1 and the pills are direct flex items */ + .cf-hero .cf-hero-text, + .cf-close .cf-hero-text { display: contents; } .cf-hero h1, .cf-hero .lead, .cf-hero .cf-stats, .cf-hero .cf-live-link { position: relative; z-index: 4; } - .cf-close .cf-hero-text { margin: 0; width: auto; } .cf-hero h1 { font-size: calc(var(--sec-vwu) * 9.7); } .cf-hero .lead { font-size: calc(var(--sec-vwu) * 3.55); max-width: none; margin-top: calc(var(--sec-vhu) * 2); } - /* same frame as the hero: text from the top, CTA pinned to the bottom */ - .cf-close .cf-hero-text { display: contents; } - .cf-close .area { align-items: stretch; justify-content: flex-start; padding: calc(var(--cf-top) + var(--sec-vhu) * 14) var(--cf-gutter) 0; } + .cf-close .area { padding: calc(var(--cf-top) + var(--sec-vhu) * 14) var(--cf-gutter) 0; } /* crest a fixed 78px from the section top */ section.page.cf.cf-close { background-position: 50% calc(78px - var(--cover-bg-h) * 0.2678 + var(--cf-band-shift)); @@ -791,7 +731,6 @@ width: auto; text-shadow: 0 0 2px rgba(2, 7, 29, .95), 0 0 4px rgba(2, 7, 29, .9), 0 2px 10px rgba(2, 7, 29, .7); } - .cf-close .cf-hero-text { width: auto; align-self: stretch; } .cf-close-offer { width: auto; align-self: stretch; @@ -800,21 +739,14 @@ } .cf-close-offer p { font-size: calc(var(--sec-vwu) * 3.6); } .cf-close .cf-live-link { display: block; font-size: calc(var(--sec-vwu) * 5); margin-top: calc(var(--sec-vhu) * 2.5); top: 0; } - .cf-stats { gap: calc(var(--sec-vwu) * 8); margin-top: calc(var(--sec-vhu) * 3); } + .cf-stats { top: 0; gap: calc(var(--sec-vwu) * 8); margin-top: calc(var(--sec-vhu) * 3); } .cf-stat img { width: calc(var(--sec-vwu) * 8); } .cf-stat b { font-size: calc(var(--sec-vwu) * 6.5); } .cf-stat span { font-size: calc(var(--sec-vwu) * 3.4); } .cf-hero .cf-live-link { margin-top: calc(var(--sec-vhu) * 2); top: 0; font-size: calc(var(--sec-vwu) * 5); } - .cf-hero .cf-hero-cta { - order: 5; - flex-direction: column-reverse; - align-items: center; - gap: calc(var(--sec-vhu) * 2); - margin: auto 0 calc((var(--sec-h) + 100svh) / 2 - 100dvh + var(--cf-cta-bottom)); - position: relative; - z-index: 5; - } - .cf-hero-cta .cf-pill { width: 100%; height: 48px; font-size: 16px; } + /* the pill sits on the bottom edge and rides with the chrome: + dvh tracks the visible bottom, svh the box the area is sized from */ + .cf-hero .cf-hero-cta, .cf-close .cf-hero-cta { order: 5; flex-direction: column-reverse; @@ -822,17 +754,29 @@ gap: calc(var(--sec-vhu) * 1.6); margin: auto 0 calc((var(--sec-h) + 100svh) / 2 - 100dvh + var(--cf-cta-bottom)); } - /* its own button-sized target, sitting on the button */ - .cf-close .cf-hero-invest-link { + /* over the phone and the gradient covering it */ + .cf-hero .cf-hero-cta { z-index: 5; } + .cf-hero-cta .cf-pill { width: 100%; height: 48px; font-size: 16px; } + /* one link, two placements: the top right corner of the hero, and + its own button-sized target above the pill on the closing section */ + .cf-hero-invest-link { height: 48px; - justify-content: center; font-size: calc(var(--sec-vwu) * 4.6); gap: calc(var(--sec-vwu) * 1.9); } - .cf-close .cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 6.5); transform: translateY(calc(var(--sec-vwu) * -0.7)); } - .cf-pill.cf-hero-invest-link { font-size: calc(var(--sec-vwu) * 4.6); gap: calc(var(--sec-vwu) * 1.9); } - .cf-pill.cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 6.5); transform: translateY(calc(var(--sec-vwu) * -0.7)); } - .cf-stats { top: 0; margin-top: calc(var(--sec-vhu) * 3); } + .cf-hero-invest-link svg { height: calc(var(--sec-vwu) * 6.5); transform: translateY(calc(var(--sec-vwu) * -0.7)); } + .cf-close .cf-hero-invest-link { justify-content: center; } + .cf-hero .cf-hero-cta .cf-hero-invest-link { display: none; } + /* a child of the section, so its reference is the section's top + edge, which the band raises by --cf-band-shift, as with the arc. + z-index clears .area, which is 11 and covers this corner. */ + .cf-hero-corner { + display: flex; + position: absolute; + top: calc(5px + var(--cf-nav-shift) + var(--cf-band-shift)); + right: 16px; + z-index: 12; + } .cf-phone { position: absolute; left: 50%; @@ -854,7 +798,7 @@ right: auto; transform: translateX(-50%); width: var(--cf-phone-w); - bottom: calc((var(--sec-h) - 100svh) / 2 - var(--cf-fade-ext)); + bottom: calc(var(--cf-area-off) - var(--cf-fade-ext)); height: calc(var(--cf-fade-base) + var(--cf-fade-ramp)); background: linear-gradient(to top, rgba(2, 7, 29, .9) var(--cf-fade-base), @@ -899,16 +843,17 @@ .cf-tag .n { font-size: 3.54cqh; line-height: 1.3; } } - /* narrow phones: keep the Wefunder pill clear of the logo */ /* 320pt phones: keep the headline at three lines */ @media screen and (max-width: 330px) { .cf-hero h1 { font-size: calc(var(--sec-vwu) * 9.3); } } + /* narrow phones: keep the corner link and the pill clear of the logo */ @media screen and (max-width: 389px) { header#navbar > a.logo img { height: 24px; } .cf-bottom { font-size: 12px; padding: 0 12px; height: 40px; } .cf-bottom svg { height: 22px; transform: translateY(-2.5px); } + .cf-hero-corner { height: 40px; } .cf-tag .v { font-size: 2.96cqh; line-height: 1.4; } } @@ -924,8 +869,8 @@ margin: 0 auto; padding: calc(var(--sec-vhu) * 9) calc(var(--sec-vwu) * 7.5) calc(var(--sec-vhu) * 7); } - .cf-fine { max-width: calc(var(--sec-vwu) * 72); } .cf-fine { + max-width: calc(var(--sec-vwu) * 72); font-family: "Manrope", sans-serif; font-weight: 300; font-size: calc(var(--sec-vwu) * 1.05); @@ -945,9 +890,7 @@ .cf-fine-links { gap: calc(var(--sec-vwu) * 6); } } - /* extension link + CSS-only :target popups (as on simplex.domains) */ - .cf-ext-link { display: inline-block; margin-top: calc(var(--sec-vhu) * 2.2); font-family: "Manrope", sans-serif; font-weight: 600; font-size: calc(var(--sec-vwu) * 1.5); text-decoration: underline; text-underline-offset: 4px; color: var(--cf-ink); } - .cf-dark .cf-ext-link { color: #9fd0ff; } + /* CSS-only :target popups (as on simplex.domains) */ .cf-dark .text-container a.gradient-text { background: linear-gradient(90deg, #019bfe 0%, #64fdff 58%, #c8feff 100%); -webkit-background-clip: text; @@ -1057,6 +1000,8 @@ + +