类型：Site模板 · 收录：2026-10-26 23:38:27 · 源码：会员可见
Build a single standalone index.html landing page for a fictional climate-tech SaaS called "Terrena®" (commute/travel carbon tracking, reduction and offsetting). Everything (HTML, CSS, JS) goes in one file, with no build step and no local assets. Use the remote CloudFront URLs below exactly as given for every image and video. It must be pixel-careful, smooth, and fully mobile responsive with no horizontal scroll.
==================================================
1. HEAD, FONTS, LIBRARIES
==================================================
- <title>Terrena® — Measure, trim, offset each journey</title>
- <meta name="description" content="Terrena automates travel emission tracking, cutting and certified offsetting for all modern teams.">
- viewport meta: width=device-width, initial-scale=1
- Google Font: Inter Tight, weights 300/400/500/600 (with preconnect to fonts.googleapis.com and fonts.gstatic.com). The whole site uses Inter Tight; body weight 400, letter-spacing -0.01em, antialiased.
- Smooth scrolling: Lenis 1.1.13 from https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js → new Lenis({ duration: 1.15, smoothWheel: true }) driven by requestAnimationFrame. Every in-page anchor link (href="#...") uses lenis.scrollTo(target, {offset:0}) and also closes the mobile menu. Add the standard Lenis CSS: html.lenis, html.lenis body {height:auto} and .lenis.lenis-smooth {scroll-behavior:auto !important}.
- If prefers-reduced-motion is set: no Lenis, no animations or transitions, all reveal elements shown immediately, all paragraph words colored.
==================================================
2. DESIGN TOKENS (CSS :root)
==================================================
--bg:#e3e5de (pale sage-grey page background)
--bg-2:#eceee8
--card:#eef0ea (light cards)
--ink:#151a12 (near-black green text and dark buttons)
--ink-2:#4b5246 (secondary text)
--muted:#8d9387
--line:#cfd3c9 (dividers)
--panel:#1b2814 (deep moss-green panels)
--moss:#5f7146 (footer wordmark, hover color)
--moss-2:#6f8250
--lime:#d7ef6b (accent: icon chips, progress bars, light-button hover)
--r:10px (big frame radius)
--gutter:clamp(10px,1vw,14px) (outer inset for the framed sections)
--pad:clamp(16px,2vw,28px) (horizontal padding for content sections)
--ease:cubic-bezier(.22,1,.36,1) (used for every transition)
Reset: * {box-sizing:border-box; margin:0; padding:0}. img and video {display:block; max-width:100%}. Links inherit color with no underline. Buttons are unstyled. Body has overflow-x:hidden.
==================================================
3. SHARED COMPONENTS
==================================================
SECTION TAG (pill pair, e.g. "01 | The trouble"): inline-flex, gap 2px, font-size 11px, color ink-2. Each <span> has background rgba(120,130,110,.18), padding 5px 7px, radius 3px. On dark backgrounds (.on-dark) the spans are rgba(255,255,255,.14) with text rgba(255,255,255,.75).
BUTTON (split button): two separate dark blocks with a 2px gap. Left block: label, height 34px, padding 0 14px, radius 5px, bg ink, white text 14px. Right block: a 34×34 square with radius 5px containing a right-arrow SVG (viewBox 0 0 16 16, path "M2 8h11M9 4l4 4-4 4", stroke currentColor, width 1.4). The square holds TWO stacked arrows. On hover, the first slides out to translateX(140%) and the second slides in from translateX(-140%) to 0 (0.5s ease), and both blocks turn #2c3a22. Light variant: white blocks with ink text, turning lime on hover. Small variant: height 28px, 12px text, 28×28 square.
ICON CHIP: 28×28, radius 4px, bg #344a1c, lime icon. In the "why" cards: 24×24, lime background, #2a3a12 icon.
REVEAL CLASSES:
- .rv starts at opacity 0, translateY(28px), blur(8px). With .in it goes to opacity 1, no transform, no blur (1.1s ease each).
- .split (headings): JS wraps every word in <span class="w"> (inline-block, overflow hidden, vertical-align top, padding-bottom .08em, margin-bottom -.08em) holding an inner span that starts at translateY(105%) and rises to 0 when the parent gets .in. Stagger is 70ms per word (inline transition-delay). Keep <br> tags. Walk into child elements such as <span class="dim">.
- An IntersectionObserver (threshold .18, rootMargin "0px 0px -6% 0px") adds .in once to every .rv, .split, .stat, .ph, #fword and .cta-frame outside the hero. It honors a data-d delay in ms. When .cta-frame becomes visible it also adds .in to #ctaPanel (observe the frame, not the clipped panel). On reveal, it starts count-up on any [data-count] inside.
- Stagger: children of .grid, .why-grid, #projects and #qs that have .rv get transition-delay = index × 0.09s.
COUNT-UP: animates from 0 to data-count over 1800ms with easeOutQuart (1-(1-p)^4). Decimals come from data-dec, the suffix from data-suf.
BIG LETTER WORDMARK (used in the hero and footer): JS builds "Terrena" letter by letter, each as <span class="ch"> (inline-block, overflow hidden) wrapping an inner span, plus a final ® span with class "reg". The inner spans start at translateY(110%) rotate(12deg) with transform-origin 0 100% (footer: rotate 10deg), and transition to none (hero 1.4s, footer 1.3s, ease) with 70ms stagger per letter. The ® is .86em, margin-left .04em; in the hero it is align-self:flex-start with margin-top .04em.
==================================================
4. NAV (fixed)
==================================================
- Fixed bar: top/left/right = var(--gutter), height 54px, padding 0 10px 0 16px, radius 10px, background rgba(236,238,233,.82), backdrop-filter blur(14px), z-index 50.
- Left: logo "Terrena" + <sup>®</sup> (22px, weight 500, letter-spacing -.03em; sup .62em, vertical-align .35em).
- Center (absolutely centered): links "Software" (#solution), "Legacy" (#impact), "Knowledge" (#faq). 15px, gap 26px. Underline on hover: 1px line that scales from 0 to 1 (origin right → left), 0.5s.
- Right: split button "Find your impact" → #cta.
- Hide on scroll: once scrollY > 0.6×viewport height and the user is scrolling down, add .hide (translateY(calc(-100% - 20px)), 0.6s). It reappears on any scroll up or near the top.
- Mobile (≤760px): hide the links and button, show a 34×34 dark burger (three white lines made with a 14×1.5px bar plus box-shadows at ±4px). The burger toggles a full-screen overlay menu (.mnav, z-index 49, bg rgba(227,229,222,.96), blur 10px, vertically centered column, gap 18px, 40px links, fade 0.5s) with Software, Legacy, Knowledge and "Find your impact".
==================================================
5. HERO (full-viewport framed video — starts full size, NOT a small card that expands)
==================================================
- Section: height 100vh (100svh), min-height 560px, padding: (2×gutter + 54px) top, gutter on the sides and bottom.
- Inner frame: full height, radius 10px, overflow hidden, bg #2c302a.
- Background video (absolute, cover, autoplay muted loop playsinline preload="auto"):
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093533_f67fa00a-b4c1-45f2-a99f-3559651c2afa.mp4
poster: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093307_bf401caa-91ce-47a7-bd14-1a7518047d31.png
(The video is misty dark basalt terraces covered in moss, ferns and white flowers, with a slow zoom-in and slight rotation baked in.)
- Overlay (::after): linear-gradient(90deg, rgba(20,24,18,.45), transparent 55%) plus linear-gradient(0deg, rgba(15,18,13,.45), transparent 40%).
- Copy block (absolute, left clamp(18px,2.4vw,34px), top clamp(70px,17%,160px), white):
H1 (split reveal): "Measure trim offset<br>each commute" — weight 400, clamp(40px,4.6vw,68px), line-height 1.04, letter-spacing -.035em.
Below it, a "Play video" link with an arrow (→ #how): 16px, gap 12px, margin-top clamp(28px,4vw,50px), padding-bottom 8px, 1px white/70% bottom border. The arrow nudges 5px right on hover. It reveals with .rv and a 0.7s delay.
- Bottom-left glass card (.calc, .rv with a 0.9s delay): absolute left/bottom clamp(14px,1.8vw,22px), width min(332px, 100% - 28px), padding 10px, gap 18px, radius 8px, bg rgba(92,104,80,.42), blur(16px), 1px border rgba(255,255,255,.12), white text.
Thumb: 100×100, radius 4px, bg #eceee9, image https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093344_7e4c1e5d-e032-45b6-a484-de03f9219dc7.png (a moss-covered earth globe). On card hover the thumb image scales to 1.08 and rotates 6deg (1.2s).
Title "Gauge your own impact" (15px, margin-top 6px). Sub "Get your full footprint in 120 seconds" (11px, opacity .85, margin 5px 0 18px). Small light split button "Test it" → #cta.
- Giant white wordmark "Terrena®" at bottom-right: absolute, right clamp(10px,1.5vw,22px), bottom clamp(-6px,-.4vw,0px), weight 500, font-size clamp(70px,13.2vw,220px), line-height .95, letter-spacing -.05em, display flex, pointer-events none.
- Intro: 250ms after the first frame, add .in to the hero split, the hero .rv elements and the wordmark (letters rise and un-rotate in sequence).
- Scroll parallax (while scrollY < 1.2×vh, with p = scrollY/vh): the video wrapper gets translate3d(0, p×18%, 0) scale(1 + p×.08); the copy block gets translateY(p×-60px) and opacity 1 - p×1.3.
==================================================
6. 01 — THE TROUBLE (floating island + stats + scroll-colored paragraph)
==================================================
- Section padding clamp(70px,10vw,120px) var(--pad) clamp(80px,10vw,140px), text centered. Tag "01 | The trouble".
- Island wrapper: width min(980px,100%), centered, aspect-ratio 4/3, margin-top clamp(20px,4vw,40px).
- Island image (object-fit contain), floating with keyframes "float" over 7s ease-in-out infinite: 0%/100% translateY(-10px) rotate(-.4deg), 50% translateY(10px) rotate(.4deg).
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093314_4a958650-3b27-45b1-b77a-a71fdf2bbb53.png
To blend its pale background into the page: filter brightness(1.09) and mask-image radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%), with the -webkit- prefix too.
- Three glass stat cards (absolutely positioned over the island). Each: width clamp(150px,15vw,190px), padding 12px 14px 14px, radius 4px, bg rgba(120,132,108,.62), blur(10px), white, left-aligned. Hidden state: opacity 0, translateY(20px) scale(.96); revealed 1s. Number: 400 weight, clamp(22px,2.1vw,28px), margin-bottom 12px. Label: 11.5px, line-height 1.35, opacity .9.
Each card has a 1px white/75% leader line (.ln) ending in a 7px white dot with a 4px rgba(255,255,255,.25) halo. The line scales in after a 0.5s delay (1s).
• s1: left 0, top 18%. Count to 43 with suffix "%". Label "Have no way to quantify staff travel emissions". Line from the right edge, top 30px, width clamp(40px,9vw,110px), rotate(18deg). Delay 0.
• s2: right 0, top 22%. Count to 2.4 with 1 decimal and suffix " tons". Label "Yearly per worker from the daily commute". Line from the left edge (origin right), width clamp(40px,8vw,100px), rotate(-24deg), dot on the left end. data-d 200.
• s3: left 58%, bottom 6%. Number "<" followed by a count to 8 with suffix "%". Label "Of all commute emissions truly neutralised". Line from the left edge, top 22px, width clamp(30px,6vw,80px), rotate(30deg). data-d 400.
- Paragraph (.lede): max-width 760px, centered block, left-aligned, clamp(20px,1.9vw,25px), line-height 1.3, letter-spacing -.02em, margin-top clamp(30px,5vw,60px). Text:
"Businesses meter every watt in the building yet overlook the car park. Staff commuting, 15-30% of your footprint, goes unrecorded because manual logging breaks. Surveys fall flat. Spreadsheets fall behind. You need a system that handles it on autopilot, always."
JS splits it into word spans. Words start at rgba(80,92,70,.28) and turn #3d4f22 (0.35s) one by one as you scroll. Progress = clamp((0.85×vh − rect.top) / (rect.height + 0.45×vh), 0, 1); color the first round(progress × wordCount) words.
==================================================
7. 02 — OUR APPROACH (staggered 4-column card grid)
==================================================
- Padding clamp(40px,6vw,80px) var(--pad) clamp(80px,10vw,140px).
- Header row (flex, space-between, align bottom, margin-bottom clamp(36px,5vw,64px)): tag "02 | Our approach" and H2 (split) "Carbon tracking,<br><span class="dim">totally hands-off</span>" (H2 style: 400 weight, clamp(32px,3.2vw,46px), line-height 1.05, letter-spacing -.035em, margin-top 12px; .dim is ink-2). On the right: the dark split button "See it live" → #cta.
- Grid: 4 equal columns, gap 12px, in this order (empty divs are spacers):
Row 1: [empty] [card A, col 2] [photo B, col 3] [empty]
Row 2: [card C, col 1] [photo D, col 2] [empty] [card E, col 4]
- Card: bg --card, radius 6px, padding 16px, aspect-ratio 9/10, min-height 250px, flex column space-between. Icon chip, then H3 (400, clamp(17px,1.4vw,20px), line-height 1.15, margin-top 18px), with the paragraph at the bottom (13px, line-height 1.4, ink-2, max-width 270px).
• A: crosshair icon. "Hands-free emission<br>logging" / "Syncs with your HRIS or mobile app. Live EPA-based maths. No forms to fill in."
• C: leaf icon. "Balance with total<br>accountability" / "Hands-off balancing with audited credits. Pick projects, follow tons, share results proudly."
• E: document icon. "Instant ESG<br>reporting files" / "Download compliant filings in seconds. GRI, CDP, TCFD aligned. Always fresh and exact."
- Photo tiles (.ph): radius 6px, aspect 9/10, min-height 250px. The image starts at scale(1.15) and settles to scale(1) on reveal (1.6s); hover scale(1.05).
• B: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093238_54ad50db-6cdc-4a12-8091-d980fdecda48.png (wind turbines in fog above mossy basalt terraces)
• D: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093238_8426b4e5-6203-41bd-997b-1550067a32b3.png (macaque mother and baby on mossy stone)
- All cards and photos use .rv with a 0.09s stagger.
==================================================
8. 03 — THE WORKFLOW (sticky scroll-driven steps over a video)
==================================================
- Section height 360vh, padding 0 var(--gutter). Inside, a sticky wrapper (top 0, height 100vh, padding (2×gutter + 54px) top and gutter bottom) holds the frame (full height, radius 10px, overflow hidden, bg #cfd2cb).
- Left media (absolute inset 0 30% 0 0) holds a looping video (cover, scale 1.04, autoplay muted loop playsinline):
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261022_054448_f9b60b53-1d76-4d33-8e3d-36483b0944fa.mp4
poster: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093322_c14c53d8-e04f-44fc-bcf2-220865406818.png
(a giant basalt chain being swallowed by moss and ferns, with slow orbit motion)
- Right panel: absolute, top/right/bottom clamp(10px,1vw,14px), width min(48%,560px), bg --panel, radius 6px, padding clamp(20px,2.4vw,34px), white, flex column.
Tag (on-dark) "03 | The workflow".
Step list (margin-top clamp(30px,6vh,70px)): "Link up", "Analyse", "Enlist", "Retire", "Attest". Each step: clamp(30px,3vw,44px), line-height 1.12, letter-spacing -.03em, color rgba(255,255,255,.35), blur(2.5px), width max-content, pointer cursor. The active step (.on) is white, unblurred and shifted translateX(6px) (0.6s ease).
Footer row (margin-top auto, flex, gap clamp(18px,3vw,44px)): a thumbnail (clamp(80px,8vw,110px) square, radius 5px, 3px border rgba(255,255,255,.12)) and a text block (max-width 260px, margin-left auto; H4 15px with margin-bottom 12px; paragraph 12.5px, line-height 1.45, opacity .82).
Progress: 5 thin bars (height 2px, gap 4px, track rgba(255,255,255,.18)), each with a lime fill scaled on X.
- Step data (heading, body, thumbnail filename appended to https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/):
1. "Connected in 15 minutes." / "Hook up your HRIS or run our built-in questionnaire. Import staff info, sites and shift patterns. Ready." / hf_20261021_093322_c14c53d8-e04f-44fc-bcf2-220865406818.png
2. "Count every journey" / "Travel emissions are worked out on auto-pilot per person, per route and per transport mode, using EPA and DEFRA." / hf_20261021_093238_54ad50db-6cdc-4a12-8091-d980fdecda48.png
3. "Enlist your people." / "Contests, team scoreboards and gentle prompts make greener travel a shared routine, never a chore." / hf_20261021_093238_8426b4e5-6203-41bd-997b-1550067a32b3.png
4. "Retire the residual." / "Leftover emissions get paired with audited, top-tier credits from projects you pick. Follow every ton." / hf_20261021_093357_18eb2aad-2a22-45bd-bc1f-fd357818a264.png
5. "Disclose with certainty" / "Download audit-proof GRI, CDP and TCFD files in a single tap. Always fresh, always precise." / hf_20261021_093404_167e8307-f3c9-44df-bfe7-c5a2e83b1178.png
- Behavior (desktop >760px): progress hp = clamp(−sectionRect.top / (sectionHeight − vh), 0, .9999). Active step = floor(hp × 5); progress bar i fills to clamp(hp×5 − i, 0, 1). Whenever the step changes: swap the text, replay a "swap" keyframe (0.7s, from opacity 0 / translateY(10px) / blur(4px) to normal), and change the thumbnail image. Clicking a step also activates it.
- Mobile (≤760px): not sticky, normal height; the steps auto-advance every 3.2s.
==================================================
9. 04 — OUR LEGACY (project accordion)
==================================================
- Padding clamp(80px,10vw,140px) var(--pad) clamp(60px,8vw,110px).
- Header: tag "04 | Our legacy"; H2 (split) "Audited programs,<br><span class="dim">tangible change</span>". On the right (.rv, flex, gap clamp(20px,6vw,90px), wraps): filter tabs "Tree planting" (active), "Cleantech", "Coast", "Reuse" (14px, muted color; the active one is ink with a 1px underline) and a dark split button "See more". Clicking a tab moves the active state and re-plays the row reveal (remove .in, re-add with 80ms + i×90ms delays).
- LAYOUT RULE (critical): the row heading and the expanded body share the SAME two-column grid, so everything on the right lines up on one vertical line:
.proj-row and .proj-inner both use grid-template-columns: 1fr 1fr; column-gap: clamp(16px,2vw,28px).
Left column = project name (row) / image (body).
Right column = year · location · arrow (row) / description + meta (body). The year, the description and the meta block must all start at exactly the same x position.
- Row markup:
<div class="proj rv [open]">
<button class="proj-row" aria-expanded>
<span class="n">NAME</span>
<span class="rt"><span class="y">YEAR</span><span class="loc">LOCATION</span><span class="ar">→ svg</span></span>
</button>
<div class="proj-body"><div class="proj-clip"><div class="proj-inner">
<div class="proj-img"><img></div>
<div class="proj-det"><p class="proj-desc">…</p><div class="proj-meta">…2 items…</div></div>
</div></div></div>
</div>
- Row: padding 24px 0, align-items center, 1px --line BOTTOM border on every .proj. Name: clamp(17px,1.4vw,20px), letter-spacing -.02em, hover color --moss (0.4s). The .rt sub-grid is clamp(56px,5.5vw,80px) | 1fr | 24px: year (12.5px ink-2), location (12.5px ink-2), arrow (14px right-arrow, path "M2 8h11M9 4l4 4-4 4", justify-self end). The arrow ALWAYS points right (no rotation when open) and slides translateX(4px) on row hover (0.6s ease).
- Expand/collapse: .proj-body is display:grid, grid-template-rows:0fr → 1fr when .open (0.9s ease). .proj-clip has overflow:hidden and min-height:0. .proj-inner has padding-bottom 26px.
Image (.proj-img): width 82% of the left column, max-width 620px, aspect-ratio 3/2, radius 6px, overflow hidden. The image is object-fit cover, scale(1.12) → scale(1) when open (1.4s ease).
Details (.proj-det): flex column, justify-content space-between, gap 28px, stretched to the image's height so the description sits at the top and the meta row's bottom lines up with the image's bottom. Hidden state: opacity 0, translateY(14px). When open: opacity 1 and no transform, with a 0.25s delay (opacity 0.6s, transform 0.8s, ease).
Description: 13px, line-height 1.45, ink-2, max-width 470px.
Meta (.proj-meta): grid 1fr 1fr, gap 20px. Each item has a 22×22 chip (radius 4px, bg rgba(120,132,108,.2), moss-colored 12px icon, margin-bottom 12px), an H5 (13px, #3d5222) and a value (12px ink-2, margin-top 6px). Item 1 is titled "Legacy" with a leaf icon (path "M3 13c0-6 4-10 10-10 0 6-4 10-10 10Z"). Item 2 is titled "Accreditation" with a check-circle icon.
- Behavior: the first row starts open. Clicking a row opens it and closes the others; clicking the open row closes it. Keep aria-expanded in sync.
- Data (image = filename on base https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/):
1. "Amazonian rainforest recovery" · 2025 · "Acre, in NW Brazil" · hf_20261021_093357_18eb2aad-2a22-45bd-bc1f-fd357818a264.png · "Reviving damaged Amazon rainforest while backing 23 Indigenous communities. This programme blends tree planting with low-impact agroforestry, opening up local livelihoods while restoring crucial territory for threatened wildlife species." · "67,000 tons of CO2 captured" · "Gold Standard VER + CCB"
2. "Great green Sahel shield" · 2023 · "Sahel corridor, W. Africa" · hf_20261021_093400_63c8dc4c-dd27-4d16-ae8b-b242dd8f6a6a.png · "Planting a living shield of drought-hardy trees right across the Sahel to stop desert spread, heal worn-out soils and secure harvests and earnings for rural farming families." · "42,500 tons of CO2 captured" · "Verra VCS + CCB"
3. "Madagascar rainforest belt" · 2022 · "Madagascar's heart" · hf_20261021_093238_49a0c499-c074-44b5-8e9d-c16eb45a67e4.png · "Guarding and relinking broken-up tropical woodland corridors that house endemic lemurs and orchids, with ranger patrols and tree nurseries led by neighboring villages." · "31,800 tons of CO2 captured" · "Gold Standard VER"
4. "Appalachian woodlands recovery" · 2019 · "Kentucky and W. Virginia, USA" · hf_20261021_093404_167e8307-f3c9-44df-bfe7-c5a2e83b1178.png · "Replanting old strip-mine sites across Appalachia with native hardwoods, renewing soils and river basins while creating clean jobs in former coal-mining towns." · "24,300 tons of CO2 captured" · "ACR Verified + CCB"
==================================================
10. 05 — OUR ADVANTAGE (video background with glass cards)
==================================================
- Wrapper padding 0 var(--gutter). Frame: radius 10px, overflow hidden, min-height min(100vh,900px), padding clamp(18px,2vw,26px), flex column, bg #9aa094.
- Background video (absolute inset -6% 0, cover, autoplay muted loop playsinline):
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093614_2655d54e-5a17-496a-aa5b-154c1f22f126.mp4
poster: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093330_0c65c7db-67ca-4311-aad0-aebd077dc10b.png
(a moss- and fern-wrapped basalt monolith on a wildflower meadow under grey fog)
Top gradient overlay: linear-gradient(180deg, rgba(40,46,36,.25), transparent 40%).
Parallax: translateY(p × -8%), where p = (frameCenter − vh/2)/vh, while the frame is on screen.
- Top row (space-between): tag (on-dark) "05 | Our advantage" and a white split H2 "Not the earliest, the finest" (clamp(30px,3vw,44px), letter-spacing -.035em, margin-right clamp(0px,14vw,240px)).
- A 3-column glass card grid pushed to the bottom (margin-top auto, padding-top 40px, gap 12px):
row 1 = columns 2 and 3; row 2 = columns 1 and 2.
Card: bg rgba(96,108,86,.5), backdrop blur(18px) saturate(1.1), 1px border rgba(255,255,255,.1), radius 6px, padding 14px 16px 16px, white, min-height clamp(150px,15vw,190px), flex column; lime 24px icon chip; H3 clamp(16px,1.3vw,19px) with margin-top 16px; paragraph 12px, opacity .82, pinned to the bottom (margin-top auto, padding-top 22px).
• A (sun icon): "Up in days, not quarters" / "Most tools need a quarter. Terrena is live in seven days."
• B (target icon): "Boardroom-grade rigor" / "Checked calculations designed for executives and strict regulators."
• C (checkbox icon): "Habits over box-ticking" / "Game mechanics that land. Make climate action a thing your teams really love."
• D (shield-check icon): "Quality credits only" / "Just Gold Standard and Verra-approved credits. Never any others."
The cards reveal with .rv and stagger.
==================================================
11. 06 — THE DATA TELLS IT (stats row)
==================================================
- Padding clamp(70px,9vw,120px) var(--pad) clamp(60px,8vw,110px). Tag "06 | The data tells it".
- 4 columns (margin-top clamp(36px,5vw,56px)), separated by 1px --line left borders (padding-left clamp(14px,1.6vw,22px)). Number: 400 weight, clamp(40px,4.4vw,64px), letter-spacing -.04em, color #3a4d1f, line-height 1. Label: 13px ink-2, margin-top clamp(28px,4vw,48px). The columns reveal with .rv at 0/.1/.2/.3s delays and count up:
• 15 with suffix "M+" and a small "kg" (.28em, ink-2, margin-left 6px) → "CO2 balanced to date"
• "±" followed by 3 with suffix "%" → "Measurement accuracy"
• 67 with suffix "%" → "Employee engagement level"
• 100 with suffix "%" → "Climate-neutral partners"
==================================================
12. 07 — HELP (FAQ accordion)
==================================================
- Centered. Padding clamp(60px,8vw,110px) var(--pad) clamp(80px,10vw,140px). Tag "07 | Help"; H2 (split) "Still curious?<br>here's everything" (margin-top 16px).
- List: max-width 640px, centered, left-aligned, margin-top clamp(36px,5vw,60px). Each item has a 1px --line bottom border. The question button is full width with space-between, padding 24px 0 22px, 15.5px, color #2d3b1b, and a 12px chevron (path "m3 6 5 5 5-5") that rotates 180deg when open. The answer opens with grid-template-rows 0fr → 1fr (0.7s); text 12.5px, line-height 1.5, ink-2, padding-bottom 20px. Only one item is open at a time. Items use .rv with stagger.
- Q&A:
1. "How does Terrena estimate footprints?" — "We apply EPA and DEFRA emission factors—worldwide norms for carbon bookkeeping. Our model corrects for car type, fuel kind, local power grid mixes for EVs, car-share headcount, public transport efficiency, and congestion patterns. We reach ±3% precision checked against independent expert carbon audits."
2. "What makes our carbon credits top-tier?" — "Each credit is Gold Standard or Verra approved, independently audited, lasting and traceable to one named project. We turn down avoidance-only and over-issued programmes, and you can see exactly where every ton ends up."
3. "How fast can we be up and running?" — "Most teams go live inside seven days. Link your HRIS in about 15 minutes, invite your staff, and Terrena starts logging travel emissions hands-free from the first day."
4. "Do workers have to log trips by hand?" — "No. Terrena deduces travel habits from shift rosters, workplace addresses and optional app check-ins. Staff members can confirm or correct in a tap, but nothing needs manual entry."
5. "Can we specify which programmes we fund?" — "Yes. Pick from our audited catalog covering tree planting, clean energy, coastal and reuse projects, or let Terrena build a balanced mix matched to your ESG aims."
==================================================
13. 08 — GET STARTED (CTA over video)
==================================================
- Wrapper padding 0 var(--gutter). Frame: radius 10px, overflow hidden, height clamp(460px,72vh,640px), bg #3b4232.
- Background video (absolute inset -8% 0, cover, autoplay muted loop playsinline, same parallax as the "why" section):
src: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093540_00ff040e-d412-4e71-a33d-f3c709845fc7.mp4
poster: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20261021_093337_6b117fb0-4433-4e5e-a26b-acfc6db9e1c5.png
(a dark concrete/basalt room with a skylight and a floor of moss, ferns and wildflowers in fog)
- Right panel: absolute, top/right/bottom clamp(10px,1vw,14px), width min(48%,560px), bg --panel, radius 6px, padding clamp(20px,2.4vw,30px), white, flex column. Reveal: clip-path from inset(100% 0 0 0 round 6px) to inset(0 0 0 0 round 6px) over 1.4s ease, so the panel grows up from the bottom. Trigger it when .cta-frame enters view.
Tag (on-dark) "08 | Get started"; split H2 "Ready to balance each journey?" (clamp(28px,2.6vw,38px), line-height 1.1, margin-top 22px, max-width 380px).
Bottom row (margin-top auto, space-between, align end): paragraph "Join 1,200+ businesses turning everyday travel into real climate progress." (13px, max-width 270px, opacity .9) and a light split button "See it live" → #top.
==================================================
14. FOOTER
==================================================
- Padding clamp(40px,5vw,60px) var(--pad) 18px.
- 6-column grid (1fr 1fr 1fr .8fr .8fr .8fr, gap 24px 16px):
col 1: "Email" → hello@terrena.com (mailto); "Offices" → "350 5th Avenue, Suite 7680<br>New York, NY 10118"
col 2: "Phone" → +1 (415) 555-0124 (tel:+14155550124); "Follow" → LinkedIn / Instagram / X on separate lines
col 3: "Software": The workflow (#how), Programs (#impact), Data sources, Dev docs
col 4: "Knowledge": News, Proof points, Impact app
col 5: "Terms": Privacy notice, Service contract, Defences, Cookie notice
Small labels (h6): 11px muted with margin-bottom 8px; blocks separated by 22px. Values 13px, line-height 1.45. Column titles 12px ink. Links 12px ink-2, line-height 1.75, turning ink on hover.
- Bottom row (margin-top clamp(40px,6vw,80px), space-between, align end): a giant moss-colored letter wordmark "Terrena®" (#fword: weight 500, clamp(64px,10.5vw,170px), letter-spacing -.05em, line-height .9; letters rise when scrolled into view) and meta text "© 2025 Terrena Technologies Ltd." + "New York, NY" (12px ink-2, gap clamp(16px,2vw,24px), padding-bottom 12px).
==================================================
15. RESPONSIVE
==================================================
≤1024px:
- Solution grid → 2 columns; remove the forced column positions; hide the empty spacers.
- Footer grid → 3 columns.
- Why grid → 2 columns with auto placement.
≤760px:
- Nav: burger menu as described above.
- Hero: min-height 620px; copy top 56px; H1 clamp(38px,11vw,52px). The wordmark spans left:12px/right:12px, centered, font-size 23.5vw. The glass card sits just above the wordmark (bottom: calc(clamp(64px,22vw,110px) + 18px)).
- Island: wrapper uses padding-top 76% instead of aspect-ratio. The stat cards become normal inline blocks below the island, two per row (width calc(50% - 14px), margin 6px), with the leader lines hidden.
- Section headers stack vertically, aligned left.
- Solution grid → 1 column; cards have no aspect ratio (min-height 220px); photos use aspect 4/3.
- How section: not sticky, auto height. The media becomes a 280px-tall block on top, and the panel is a normal block below it (margin 0 10px 10px, overlapping upward by -40px, min-height 480px). The text block loses its auto left margin. Steps auto-advance every 3.2s.
- Project accordion: the row becomes one column (row-gap 6px, padding 18px 0) with the .rt sub-grid at 52px | 1fr | 24px under the name. The body becomes one column (row-gap 18px, padding-bottom 22px). The image is 100% wide, then the description (no max-width), then the meta.
- Why: frame auto height, top row stacked, cards in 1 column with padding-top 160px so the video shows above them.
- Numbers: 2×2 grid with a 36px row gap; the 3rd item has no left border or padding.
- CTA: frame height auto with padding-top 240px (video shows above), media inset 0; the panel is a normal block (margin 10px, min-height 300px); the footer row of the panel stacks.
- Footer: 2 columns; bottom row stacks; wordmark 24vw; meta wraps.
- Tabs wrap with a 14px gap.
==================================================
16. QUALITY BAR
==================================================
- All videos: autoplay, muted, loop, playsinline, a poster image, object-fit cover. The hero uses preload="auto"; the others use preload="metadata".
- Every animation uses cubic-bezier(.22,1,.36,1). Nothing animates layout properties except the accordion grid-template-rows.
- No horizontal scroll at any width (test at 375px, 768px, 1280px and 1440px).
- Use semantic HTML (header, nav, section, article, footer) and alt text on every image.