/* ================================================================ PAPERHINT · design system Flat & playful school brand · Emerald on near-white · dark/light Geist (display + body) + Merriweather italic (accents) ================================================================ */ :root{ --bg:#FCFBF8; --bg-soft:#F6F4EE; --surface:#FFFFFF; --surface-2:#FAF9F5; --ink:#10201A; --ink-soft:#3D4F47; --muted:#68766E; --emerald:#0B8A5C; --emerald-strong:#087A50; --emerald-deep:#0A3B2A; --emerald-tint:rgba(11,138,92,.10); --violet:#7C5CFF; --orange:#FF8A3D; --yellow:#FFD84D; --forest:#0A241A; --line:rgba(16,32,26,.12); --line-soft:rgba(16,32,26,.07); --shadow:0 1px 2px rgba(16,32,26,.05),0 12px 40px -12px rgba(16,32,26,.18); --shadow-lg:0 2px 4px rgba(16,32,26,.06),0 32px 80px -20px rgba(16,32,26,.28); --nav-bg:rgba(255,255,255,.62); --nav-line:rgba(255,255,255,.55); --nav-edge:rgba(16,32,26,.16); --radius:14px; --radius-lg:18px; /* VERTICAL SCALE — one ladder, so every section is spaced by the same decisions rather than by whatever each component chose. Derived from mercury.com's rhythm at 1440. */ --s-section:112px; /* top of one section to the next */ --s-rule:32px; /* the hairline down to its headline */ --s-head:52px; /* headline block down to the content */ --s-sub:18px; /* headline down to its standfirst */ --s-tile-col:26px; /* between tiles across */ --s-tile-row:64px; /* between tile rows */ --s-cap:20px; /* panel down to its caption */ /* THE DIVIDER: wherever a section used a straight grey hairline, it is this — a subtle grey curl, tiled across the full width. Not green. */ --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 q6 -3 12 0 t12 0' fill='none' stroke='rgba(16,32,26,0.26)' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E"); --font-display:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-serif:"Merriweather",Georgia,serif; color-scheme:light; } [data-theme="dark"]{ --bg:#0A0F0C; --bg-soft:#0E1511; --surface:#121A15; --surface-2:#0F1712; --ink:#F2EEE3; --ink-soft:#C4CCC2; --muted:#8B968D; --emerald:#31D492; --emerald-strong:#3BE3A0; --emerald-deep:#BFF5DE; --emerald-tint:rgba(49,212,146,.12); /* flat shapes get slightly deeper, less shouty versions in the dark */ --violet:#8B72F5; --orange:#E8823B; --yellow:#E3C44F; --forest:#0A241A; --line:rgba(242,238,227,.14); --line-soft:rgba(242,238,227,.08); --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 40px -12px rgba(0,0,0,.6); --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 32px 80px -20px rgba(0,0,0,.75); --nav-bg:rgba(18,26,21,.6); --nav-line:rgba(242,238,227,.12); --nav-edge:rgba(242,238,227,.16); color-scheme:dark; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* soft green frost falling from the top edge, under the nav */ body::before{ content:"";position:fixed;top:0;left:0;right:0;height:190px;z-index:45;pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb,var(--emerald) 9%, transparent) 0%, color-mix(in srgb,var(--emerald) 4%, transparent) 44%, transparent 100%); } [data-theme="dark"] body::before{ background:linear-gradient(180deg, color-mix(in srgb,var(--emerald) 13%, transparent) 0%, color-mix(in srgb,var(--emerald) 5%, transparent) 44%, transparent 100%); } /* global filmic grain — fixed, click-through, under nav/toast */ body::after{ content:"";position:fixed;inset:0;z-index:40;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.045;mix-blend-mode:overlay; } [data-theme="dark"] body::after{opacity:.075} html{scroll-behavior:smooth;overflow-x:hidden} body{ background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background .45s ease,color .45s ease; overflow-x:hidden; } ::selection{background:var(--emerald);color:#fff} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} /* Two containers, both deliberate. --page the marketing grid the home page is built on (audited at 1180) --read the reading measure for long-form pages: role pages and /product. 1104 is the width amplemarket.com uses at 1440, measured off their live pages, and long copy holds together better in it. */ :root{--page:1180px;--read:1104px} .wrap{width:min(var(--page),92vw);margin-inline:auto} .wrap-read{width:min(var(--read),92vw);margin-inline:auto} .grain{position:relative} .grain::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:3; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.07;mix-blend-mode:overlay; } [data-theme="dark"] .grain::after{opacity:.11} /* ---------------- flat shape doodles ---------------- */ /* Inline SVG decorations: squiggles, sparkles, blobs, arcs. Always aria-hidden, absolutely positioned, never interactive. */ .doodle{position:absolute;pointer-events:none;user-select:none;z-index:0;height:auto} [data-theme="dark"] .doodle{opacity:.78} /* Z-INDEX BANDS: decor z:0-1 · lifted content z:2+ (.reveal, footer .wrap) · nav z:50 · z:60 is RESERVED for the future #gravity-layer overlay. */ /* ---------------- nav ---------------- */ .nav{ position:fixed;inset:8px 0 auto;z-index:50; /* NB: never put a filter here — a filtered ancestor becomes a backdrop root and silently disables the frost (backdrop-filter) on .nav-inner */ } .nav-inner{ --cap:70px; --nav-ease:cubic-bezier(.3,.8,.24,1); transition:width 1.15s var(--nav-ease), -webkit-mask-size 1.15s var(--nav-ease), mask-size 1.15s var(--nav-ease), -webkit-mask-position 1.15s var(--nav-ease), mask-position 1.15s var(--nav-ease), padding 1.15s var(--nav-ease); will-change:width; /* rosette end-cap = bar height, kept square so it never distorts */ position:relative;overflow:hidden; width:min(1180px,92vw);margin-inline:auto; display:flex;align-items:center;gap:28px; background:var(--nav-bg); backdrop-filter:blur(26px) saturate(1.6) brightness(1.03);-webkit-backdrop-filter:blur(26px) saturate(1.6) brightness(1.03); border-radius:999px; /* fallback silhouette where masks are unsupported */ padding:16px 36px 16px calc(var(--cap) / 2 - 15px); /* mark centred inside the left cap */ /* custom silhouette: the logo shape at each end unioned with the straight middle */ -webkit-mask-image:url("../img/Logo/nav-cap.svg"),url("../img/Logo/nav-cap.svg"),linear-gradient(#000,#000); mask-image:url("../img/Logo/nav-cap.svg"),url("../img/Logo/nav-cap.svg"),linear-gradient(#000,#000); -webkit-mask-position:left center,right center,center; mask-position:left center,right center,center; -webkit-mask-size:var(--cap) var(--cap),var(--cap) var(--cap),calc(100% - var(--cap)) 74%; mask-size:var(--cap) var(--cap),var(--cap) var(--cap),calc(100% - var(--cap)) 74%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-mode:alpha;mask-mode:alpha; } /* frosted glass: faint blurred tints + grain inside the pill (the one glass moment) */ .nav-inner::before{ content:"";position:absolute;inset:0;pointer-events:none;filter:blur(12px); background: radial-gradient(42% 140% at 10% 50%, color-mix(in srgb,var(--emerald) 6%, transparent) 0%, transparent 70%), radial-gradient(38% 140% at 88% 50%, color-mix(in srgb,var(--violet) 5%, transparent) 0%, transparent 70%), radial-gradient(30% 140% at 68% 50%, color-mix(in srgb,var(--orange) 4%, transparent) 0%, transparent 70%); } .nav-inner::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.06;mix-blend-mode:overlay; } .nav-inner>*{position:relative;z-index:1} /* content: staggered fades — out quickly front-to-back, in gently back-to-front */ .nav-inner>*{transition:opacity .65s ease} .nav-inner:not(.nav-shrink)>*:nth-child(1){transition-delay:.55s} .nav-inner:not(.nav-shrink)>*:nth-child(2){transition-delay:.72s} .nav-inner:not(.nav-shrink)>*:nth-child(3){transition-delay:.89s} .nav-inner:not(.nav-shrink)>*:nth-child(4){transition-delay:1.06s} .nav-inner.nav-shrink>*:nth-child(4){transition-delay:0s} .nav-inner.nav-shrink>*:nth-child(3){transition-delay:.09s} .nav-inner.nav-shrink>*:nth-child(2){transition-delay:.18s} .nav-inner.nav-shrink>*:nth-child(1){transition-delay:.27s} /* links inside the list ripple too */ /* the fold fades the TOP-LEVEL items only — direct children, so the links inside a dropdown panel are never touched by it */ .nav-links > a,.nav-links .nav-trigger{transition:opacity .5s ease, color .2s, background .2s} .nav-inner.nav-shrink .nav-links > *{opacity:0} .nav-inner.nav-shrink .nav-links > *:nth-child(1){transition-delay:.06s} .nav-inner.nav-shrink .nav-links > *:nth-child(2){transition-delay:.045s} .nav-inner.nav-shrink .nav-links > *:nth-child(3){transition-delay:.03s} .nav-inner.nav-shrink .nav-links > *:nth-child(4){transition-delay:0s} /* ---- collapsed: the bar IS the rosette ---- LAYOUT NEVER CHANGES — only the mask collapses to a centred rosette and the brand glides over on a transform, so nothing can jump or blink */ .nav-inner.nav-shrink{ --brand-x:-2px; /* pre-JS default: the mark sits ~centre of the folded box naturally */ /* the caps NEVER resize — folded they are the same --cap as the open bar; they only travel to centre and merge while the middle band shrinks away and the bar's width collapses around them. Same three mask layers, so everything interpolates. */ width:var(--cap); -webkit-mask-position:center,center,center; mask-position:center,center,center; -webkit-mask-size:var(--cap) var(--cap),var(--cap) var(--cap),0 74%; mask-size:var(--cap) var(--cap),var(--cap) var(--cap),0 74%; pointer-events:none; /* only the rosette (brand) stays interactive */ } .nav-inner.nav-shrink>*{opacity:0;pointer-events:none} /* the brand never blinks: it stays in flow and GLIDES to the bar's centre (main.js sets --brand-x from measurement) */ .brand{transition:transform .8s var(--nav-ease, cubic-bezier(.3,.8,.24,1))} .nav-inner:not(.nav-shrink) .brand{transition-delay:.6s} .nav-inner.nav-shrink .brand{transition-delay:0s} .nav-inner.nav-shrink .brand{ opacity:1;pointer-events:auto; transform:translateX(var(--brand-x, 0px)); transition-delay:0s; } .brand .wordmark{transition:opacity .5s ease .35s} .nav-inner.nav-shrink .brand .wordmark{opacity:0;transition-delay:0s} .nav-inner.nav-shrink .brand .mark{color:var(--emerald)} /* the mark's rotation is scroll-driven from main.js (lerped per frame) */ /* boot: spin the mark while collapsed, then main.js releases the bar */ .nav-inner.nav-boot .brand .mark svg{animation:markSpin 1s linear infinite} @keyframes markSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ .nav-inner,.nav-inner>*{transition:none} .nav-inner.nav-boot .brand .mark svg{animation:none} } .brand{display:flex;align-items:center;gap:10px;white-space:nowrap;flex:none;font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-.02em} /* the h of hint: small Merriweather italic, tucked flush into the Geist word */ .brand .hint em{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:.94em;letter-spacing:0;margin-right:.5px;color:var(--emerald)} .brand .hint{color:inherit} .brand .mark{width:30px;height:30px;display:grid;place-items:center;color:var(--emerald)} .brand .mark svg{width:27px;height:27px} /* boot: the collapsed rosette drops in from above the viewport… */ @media (prefers-reduced-motion: no-preference){ .nav .brand .mark svg{transform-origin:50% 50%} .nav-inner.nav-boot{animation:navDrop 1.1s cubic-bezier(.22,.9,.28,1) both} /* …and as the bar exhales open, the mark takes one decelerating turn while it glides back to the left — same clock as the glide */ .nav-inner.nav-arrive .brand .mark svg{animation:markSpin .8s cubic-bezier(.3,.8,.24,1) 1 .6s} } @keyframes navDrop{ from{transform:translateY(calc(-100% - 96px))} /* from beyond the viewport edge */ 60%{transform:translateY(6px)} /* a gentle settle, no bounce */ to{transform:translateY(0)} } .nav-links{display:flex;gap:4px;margin-left:auto;align-items:center} /* ---- mobile hamburger ---- */ .nav-burger{display:none;flex:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line); flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:.25s} .nav-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink); transition:transform .3s ease, opacity .25s ease} .nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.menu-open .nav-burger span:nth-child(2){opacity:0} .nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .nav-menu{ display:none;width:min(1180px,92vw);margin:10px auto 0; background:var(--nav-bg); backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5); border:1px solid var(--nav-line);border-radius:20px;padding:10px; flex-direction:column;gap:2px; opacity:0;transform:translateY(-8px); /* closed = gone: an opacity-0 popover still swallows taps without these */ visibility:hidden;pointer-events:none; /* The hierarchy made this taller than a phone: eleven links plus headings and two buttons measured 850px in an 812px viewport, which put "Book a demo" off the bottom with no way to reach it. Cap it to the screen and let it scroll inside itself. dvh so the browser's own chrome counts. */ max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transition:opacity .3s ease, transform .35s cubic-bezier(.3,.8,.24,1), visibility .3s; } @supports not (height: 100dvh){ .nav-menu{max-height:calc(100vh - 96px)} } .nav-menu a{padding:11px 16px;border-radius:12px;font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink)} .nav-menu .btn{border-radius:999px} /* menu links keep 12px; its CTAs stay pills */ .nav-menu a:hover{background:var(--emerald-tint)} .nav-menu .btn{margin-top:6px;justify-content:center} .nav-menu .menu-theme{ display:flex;align-items:center;justify-content:space-between; padding:13px 16px;border-radius:12px; font-family:var(--font-display);font-weight:500;font-size:16px;color:var(--ink); cursor:pointer;background:none;border:none;width:100%;text-align:left; } .nav-menu .menu-theme:hover{background:var(--emerald-tint)} .nav-menu .menu-theme .theme-btn{width:34px;height:34px;pointer-events:none;display:grid} .nav.menu-open .nav-menu,.nav-menu.open{opacity:1;transform:none;visibility:visible;pointer-events:auto} .nav-links > a,.nav-links .nav-trigger{padding:7px 13px;border-radius:9px; font-family:var(--font-display);font-size:14.5px;font-weight:500;color:var(--ink-soft); transition:.2s;background:transparent;border:0;cursor:pointer; display:inline-flex;align-items:center;gap:6px} .nav-links > a:hover,.nav-links .nav-trigger:hover, .nav-links .nav-drop.open .nav-trigger{color:var(--ink);background:var(--emerald-tint)} .nav-links > a.active{color:var(--emerald);background:var(--emerald-tint);font-weight:500} .nav-trigger .caret{opacity:.55;transition:transform .22s ease} .nav-drop.open .nav-trigger .caret{transform:rotate(180deg);opacity:.9} .theme-btn{ width:38px;height:38px;border-radius:999px;display:grid;place-items:center; border:1px solid var(--line);color:var(--ink-soft);transition:.25s;flex:none; } .theme-btn:hover{border-color:var(--emerald);color:var(--emerald);transform:rotate(15deg)} .theme-btn .moon{display:none} [data-theme="dark"] .theme-btn .sun{display:none} [data-theme="dark"] .theme-btn .moon{display:block} .btn{ display:inline-flex;align-items:center;gap:8px;justify-content:center; padding:10px 18px;border-radius:999px; /* every CTA is a pill */ font-family:var(--font-display);font-weight:500;font-size:14.5px;letter-spacing:.005em; transition:.25s;white-space:nowrap; } .btn-primary{background:var(--emerald);color:#fff} [data-theme="dark"] .btn-primary{color:#06231A} .btn-primary:hover{background:var(--emerald-strong);transform:translateY(-1px)} .btn-ghost{border:1px solid var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--emerald);color:var(--emerald)} .btn-lg{padding:13px 24px;font-size:15px} .btn-ivory{background:var(--ink);color:var(--bg)} .btn-ivory:hover{transform:translateY(-1px)} /* ---------------- hero ---------------- */ .hero{position:relative;padding:132px 0 100px} .hero-content{position:relative;z-index:4;text-align:center;width:min(585px,92vw)} .tagline{ display:inline-flex;align-items:center;gap:10px; font-size:13.5px;font-weight:500;color:var(--ink-soft); padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line-soft); background:var(--surface);transition:.2s; } .tagline:hover{border-color:var(--line);color:var(--ink)} .tagline .tag{ background:var(--ink);color:var(--bg); font-family:var(--font-display); font-size:10.5px;font-weight:500;letter-spacing:.07em; padding:4px 8px;border-radius:999px; } .tagline i{font-style:normal;opacity:.45;font-size:12px} .hero-link{ display:inline-flex;align-items:center;gap:6px; font-family:var(--font-display); font-size:14.5px;font-weight:500;color:var(--ink-soft); padding:10px 4px;transition:.2s; } .hero-link:hover{color:var(--emerald);gap:9px} h1.display{ font-family:var(--font-display); font-size:clamp(38px,5vw,56px);letter-spacing:-.05em; line-height:1.09;letter-spacing:-.025em;font-weight:500; margin:32px auto 16px; ;text-wrap:balance} h1.display .h1-line2{display:block;position:relative} /* pencil-drawn [AI] — a margin note explaining the second pair of hands */ .ai-note{position:absolute;width:54px;height:38px;margin-left:12px;margin-top:4px; transform:rotate(7deg);color:var(--muted);opacity:.9} .ai-note path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:aiDraw .8s ease 1.1s forwards} @keyframes aiDraw{to{stroke-dashoffset:0}} /* Narrow screens wrap the headline, and an absolutely-positioned note then lands on a phantom line below it (colliding with the sub). Below 900px it rides in the flow, straight after "hands". */ @media (max-width:900px){ .ai-note{position:static;display:inline-block;width:44px;height:31px; margin:0 0 0 7px;vertical-align:-.2em;transform:rotate(7deg)} } @media (max-width:640px){.ai-note{width:38px;height:27px;margin-left:6px}} /* Merriweather italic slipped inside the Geist headline (Amplemarket move) */ h1.display em{ font-family:var(--font-serif);font-style:italic;font-weight:500; font-size:1.04em;line-height:0;letter-spacing:0; margin-right:.015em;position:relative;top:-.01em; } .hero-sub{ /* Amplemarket's measured sub: 20px; wider than the 585px lockup so it sets as two full lines instead of three balanced slivers */ width:min(680px,94vw);margin:0 calc((100% - min(680px,94vw)) / 2) 26px; font-size:20px;line-height:1.42;letter-spacing:-.02em;color:var(--ink-soft);text-wrap:balance; } /* the bowl: hero subcopy rides an invisible U-curve wrapping the lockup */ /* the band: colour is TEXT-RELATIVE — the ribbon strokes in currentColor, inherited from the display-text ink, so path and type always agree */ .hero-ribbon{ --band:var(--ink);--band-echo:var(--emerald);--band-text:var(--bg);--band-kw:var(--yellow); position:absolute;top:88px;left:0;right:0;z-index:0;pointer-events:none;overflow:hidden; } /* the hero's own band rides above the stage-glow fade, so it stays solid ink all the way — the next section starts after it, never washes it */ .hero > .hero-ribbon{z-index:3} [data-theme="dark"] .hero-ribbon{--band:var(--surface);--band-text:var(--ink)} .hero-ribbon svg{display:block;max-width:100%} .ribbon-line{fill:none;stroke:var(--band);stroke-width:42;stroke-linecap:round;stroke-linejoin:round} .ribbon-echo{fill:none;stroke:var(--band-echo);stroke-width:42;stroke-linecap:round;stroke-linejoin:round;transform:translate(11px,15px);opacity:.9} [data-theme="dark"] .ribbon-echo{opacity:.45} @media (prefers-reduced-motion: no-preference){ .ribbon-line,.ribbon-echo{stroke-dasharray:var(--len,5000);stroke-dashoffset:var(--len,5000);animation:ribbonDraw 2s .2s cubic-bezier(.35,.75,.25,1) forwards} .ribbon-echo{animation-delay:.06s} } @keyframes ribbonDraw{to{stroke-dashoffset:0}} /* ribbon: solid band with the emerald underside flashing through at the turns, where a twisting ribbon would show its back face */ .bowl-band{fill:none;stroke:var(--ink);stroke-width:34;stroke-linecap:round} .bowl-band-echo{ fill:none;stroke:var(--emerald);stroke-width:34;stroke-linecap:butt; /* long gaps = ribbon front; short dashes = the flash of its back face */ stroke-dasharray:0 250 120 300 90 340 140 260; transform:translate(2px,-13px) scaleY(.985); transform-origin:center; } [data-theme="dark"] .bowl-band{stroke:var(--surface)} [data-theme="dark"] .bowl-band-echo{stroke:var(--emerald);opacity:.75} .bowl-marquee{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:.045em;fill:var(--band-text,var(--bg));dominant-baseline:middle;opacity:1} .bowl-marquee tspan.bserif{font-family:var(--font-serif);font-style:italic;font-size:19px;fill:var(--yellow)} /* fluid copy: only painted inside the cursor window, displaced by turbulence */ .bowl-fluid{pointer-events:none} .hero-bowl.fluid-off .bowl-fluid{display:none} .bowl-marquee tspan{transition:fill .3s} @media (max-width:1199px){ /* the same ribbon, scaled down — no second band system */ .ribbon-line,.ribbon-echo{stroke-width:30} .ribbon-echo{transform:translate(8px,11px)} .bowl-marquee{font-size:15px} .bowl-marquee tspan.kw{font-size:15.5px} .hero{padding-top:168px} } /* the sweep band (below 960) needs viewport-scaled room; the loop keeps 100px */ @media (max-width:959px){ .hero{padding-bottom:calc(22vw + 30px)} } /* Amplemarket-style capture pill */ .hero-capture{ display:flex;align-items:center;gap:8px;max-width:460px;margin:0 auto; background:var(--surface);border:1px solid var(--line-soft);border-radius:999px; padding:5px 5px 5px 18px;box-shadow:var(--shadow);transition:.2s; } .hero-capture:focus-within{border-color:color-mix(in srgb,var(--emerald) 45%, transparent);box-shadow:0 0 0 4px var(--emerald-tint),var(--shadow)} .hero-capture.invalid{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.12)} .hero-capture input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none} .hero-capture input::placeholder{color:var(--muted)} .hero-capture .btn{border-radius:999px;padding:10px 18px;font-size:14px;background:var(--ink);color:var(--bg);box-shadow:none;flex:none} .hero-capture .btn:hover{transform:none;background:var(--ink);opacity:.9;box-shadow:none} .hero-ctas{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;align-items:center} .hero-note{margin-top:16px;font-size:13px;color:var(--muted)} /* the ONE soft wash — sits LOW in the hero, behind the product frame. NEAT paints the canvas; .hero-gradient is the no-JS fallback. */ .hero-stage{position:relative;height:0;z-index:0} .stage-glow{ position:absolute;z-index:0;left:0; /* anchored at the left edge; 47vw × the 1.38 scale below carries it about 65% across, so it runs from the left to the centre */ top:-40px;width:47vw;height:560px;overflow:hidden;pointer-events:none; transform:scale(1.38);transform-origin:0% 34%; /* full strength at the left edge, dissolving as it nears the middle */ -webkit-mask:linear-gradient(90deg, #000 0%, #000 58%, transparent 100%); mask:linear-gradient(90deg, #000 0%, #000 58%, transparent 100%); filter:saturate(.9);opacity:.5; } [data-theme="dark"] .stage-glow{opacity:.28;filter:saturate(.7)} .hero-gradient{ position:absolute;inset:-14%; background: radial-gradient(38% 42% at 18% 34%, color-mix(in srgb,var(--violet) 16%, transparent) 0%, transparent 70%), radial-gradient(36% 40% at 82% 30%, color-mix(in srgb,var(--orange) 16%, transparent) 0%, transparent 68%), radial-gradient(30% 34% at 62% 66%, color-mix(in srgb,var(--yellow) 16%, transparent) 0%, transparent 70%), radial-gradient(46% 52% at 34% 78%, color-mix(in srgb,var(--emerald) 22%, transparent) 0%, transparent 72%); filter:blur(88px); animation:heroFloat 16s ease-in-out infinite alternate; } @keyframes heroFloat{ 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-2.5%,2%) scale(1.06)} 100%{transform:translate(2%,-2%) scale(1.03)} } #neat-canvas{position:absolute;inset:0;width:100%;height:100%;isolation:isolate;display:block} /* a frosted pane over the wash — diffuses the NEAT ribbon without changing its shape or colour */ .stage-veil{ position:absolute;inset:0;z-index:1;pointer-events:none; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } .stage-glow::after{ content:"";position:absolute;inset:0;z-index:2; background: radial-gradient(58% 52% at 50% 8%, var(--bg) 0%, color-mix(in srgb,var(--bg) 62%, transparent) 52%, transparent 78%), linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 72%, var(--bg) 100%); } .trust{margin-top:92px;position:relative;z-index:4;text-align:center} .trust p{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px} .trust-row{display:flex;gap:clamp(24px,4vw,56px);justify-content:center;flex-wrap:wrap;opacity:.8} .trust-row span{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.015em;color:var(--ink-soft)} /* Ask Paperhint lives in its own custom element — see public/assets/js/ask-paperhint.js (styles are inside its shadow root). */ /* ---------------- section scaffolding ---------------- */ section{position:relative} .section-pad{padding:88px 0} .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--emerald);font-family:var(--font-display);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px} .kicker::before{content:"";width:22px;height:2px;background:var(--emerald);border-radius:2px} h2.title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.04em;font-weight:500;max-width:22ch} .section-sub{margin-top:12px;color:var(--ink-soft);font-size:19px;line-height:1.35;letter-spacing:-.02em;max-width:58ch} .reveal{position:relative;z-index:2;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} /* first paint: the hero itself arrives as a cascade, not one block */ @media (prefers-reduced-motion: no-preference){ .hero-content>*{animation:riseIn .75s cubic-bezier(.25,.8,.25,1) both} .hero-content>*:nth-child(1){animation-delay:.15s} .hero-content>*:nth-child(2){animation-delay:.24s} .hero-content>*:nth-child(3){animation-delay:.33s} .hero-content>*:nth-child(4){animation-delay:.42s} .hero-content>*:nth-child(5){animation-delay:.51s} .hero-content>*:nth-child(6){animation-delay:.60s} } @keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .reveal.in{opacity:1;transform:none} /* contact form: sent state + error line */ .form-done{position:relative;text-align:center;padding:38px 28px 34px;background:var(--surface); border:1px solid var(--line-soft);border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow)} .form-done img{display:block;margin:0 auto 10px} .form-done h3{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.03em;margin-bottom:8px} .form-done p{color:var(--ink-soft);font-size:16px;line-height:1.5;max-width:46ch;margin:0 auto} .form-done .form-done-echo{margin-top:12px;font-size:14px;color:var(--muted)} .form-done .btn{margin-top:22px} .form-error{margin-top:12px;font-size:14px;color:#B3261E;line-height:1.5} .form-error a{color:inherit;text-decoration:underline} /* the two nav actions read as one group: tight gap, pill shapes */ .nav-cta{display:inline-flex;align-items:center;gap:6px} .nav-cta .theme-btn{width:40px;height:40px;border-radius:999px;margin:0} .nav-cta .btn{border-radius:999px;height:40px;padding:0 18px} /* founder-set: 40px */ /* ---------------- product spec / interactive ---------------- */ .spec{padding:44px 0 88px} /* top padding = horizontal seam lane for the ribbons */ .spec-shell{ background:var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;position:relative; } .spec-tabs{ display:flex;gap:6px;flex-wrap:wrap; padding:18px 18px 0;position:relative;z-index:1; } .spec-tab{ padding:10px 18px;border-radius:14px 14px 0 0; font-family:var(--font-display);font-size:14.5px;font-weight:500;color:var(--muted); border:1px solid transparent;border-bottom:none;transition:.2s;position:relative;top:1px; } .spec-tab:hover{color:var(--ink)} .spec-tab.active{ background:var(--surface);color:var(--emerald); border-color:var(--line-soft); box-shadow:0 -6px 18px -10px rgba(16,32,26,.15); } .spec-panel{ position:relative;z-index:1; background:var(--surface);border-top:1px solid var(--line-soft); display:grid;grid-template-columns:0.9fr 1.1fr;gap:0;height:474px; } .spec-copy{padding:44px 40px;display:flex;flex-direction:column;justify-content:center} .spec-copy h3{font-family:var(--font-display);font-size:28px;letter-spacing:-.015em;font-weight:500;margin-bottom:12px} .spec-copy p{color:var(--ink-soft);margin-bottom:22px} .spec-points{display:flex;flex-direction:column;gap:11px;list-style:none} .spec-points li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft)} .spec-points li svg{flex:none;margin-top:3px;color:var(--emerald)} .spec-visual{ position:relative;padding:38px 38px 0 6px;display:flex;align-items:flex-end;overflow:hidden;min-height:0; background:color-mix(in srgb,var(--emerald) 7%, var(--surface)); } /* ---------------- feature folder-cards ---------------- */ .feature-grid{perspective:1400px;display:grid;grid-template-columns:repeat(6,1fr);column-gap:18px;row-gap:58px;margin-top:52px} /* section 2 runs as two rooms — a header introduces each group of cards */ .fgroup-head{margin-top:84px} .fgroup-head h3{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.02em} .fgroup-head p{color:var(--muted);font-size:16px;margin-top:8px} .fgroup-head + .feature-grid{margin-top:40px} .fg-half .fcard,.fg-half .fcard:nth-child(1),.fg-half .fcard:nth-child(2){grid-column:span 3} .fg-desk .fcard,.fg-desk .fcard:nth-child(1),.fg-desk .fcard:nth-child(2){grid-column:span 2} .fg-row .fcard,.fg-row .fcard:nth-child(1),.fg-row .fcard:nth-child(2){grid-column:span 2} .fg-desk .fcard:last-child{grid-column:1/-1;flex-direction:row;align-items:stretch;gap:36px;padding:30px 30px 26px} .fg-desk .fcard:last-child .fcard-copy{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px} .fg-desk .fcard:last-child .fcard-visual{flex:1;margin-top:0} .fcard{ scroll-margin-top:130px; /* deep links land clear of the fixed nav */ grid-column:span 2; position:relative;background:var(--surface); border:1px solid var(--line-soft); border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg); padding:26px 26px 22px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:10px; transition:transform .3s ease-out,box-shadow .3s,opacity .7s ease; } .fcard.reveal.in{transform:translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} /* light catches the paper as it tilts — a warm glint, visible on ivory */ .fcard::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; z-index:-1; /* the glint lives behind the card's content, never over text */ background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(255,216,77,.07), rgba(255,216,77,0) 58%); opacity:var(--sheen,0);transition:opacity .35s ease; } .fcard:nth-child(1),.fcard:nth-child(2){grid-column:span 3} .fcard:hover{--lift:-5px;box-shadow:var(--shadow-lg)} /* the folder tab IS the kicker — same paper as the card, sized to its text, overlapping the card border by 1px so they read as one piece */ .fcard-kicker{ position:absolute;top:-25px;left:-1px;height:26px; display:inline-flex;align-items:center;gap:7px; padding:1px 30px 0 15px; background:var(--surface); border:1px solid var(--line-soft);border-bottom:none; border-radius:12px 20px 0 0; clip-path:polygon(0 0,calc(100% - 20px) 0,100% 100%,0 100%); font-family:var(--font-display);font-size:11px;font-weight:500; letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft); white-space:nowrap; } .fcard-kicker::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--tint,var(--emerald))} .fcard h3{font-family:var(--font-display);font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin-top:6px} .fcard p{color:var(--ink-soft);font-size:14px;line-height:1.55} .fcard-visual{ margin-top:auto;flex:1;display:flex;flex-direction:column;justify-content:center;gap:0; padding:14px;border-radius:12px; background:color-mix(in srgb,var(--tint,var(--emerald)) 6%, var(--surface-2)); border:1px solid var(--line-soft); } @media (max-width:960px){ .feature-grid{grid-template-columns:1fr;gap:34px} .fg-half .fcard,.fg-half .fcard:nth-child(1),.fg-half .fcard:nth-child(2){grid-column:span 1} .fg-desk .fcard,.fg-desk .fcard:nth-child(1),.fg-desk .fcard:nth-child(2), .fg-row .fcard,.fg-row .fcard:nth-child(1),.fg-row .fcard:nth-child(2), .fg-desk .fcard:last-child{grid-column:span 1;display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px} .fcard,.fcard:nth-child(1),.fcard:nth-child(2){grid-column:span 1} } /* mock app window */ .app{ width:100%;background:var(--surface); border:1px solid var(--line);border-bottom:none;border-radius:16px 16px 0 0; box-shadow:var(--shadow-lg);overflow:hidden; transform:translateY(0);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s; } .app.switching{opacity:0;transform:translateY(14px)} .app-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:var(--surface-2)} .app-bar i{width:9px;height:9px;border-radius:99px;background:var(--line)} .app-bar i:nth-child(1){background:#FF5F57}.app-bar i:nth-child(2){background:#FEBC2E}.app-bar i:nth-child(3){background:#28C840} .app-bar span{margin-left:10px;font-size:11.5px;color:var(--muted);font-weight:500} .app-body{display:grid;grid-template-columns:150px 1fr;min-height:300px} .app-side{border-right:1px solid var(--line-soft);padding:14px 10px;display:flex;flex-direction:column;gap:5px;background:var(--surface-2)} .app-side b{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin-bottom:3px} .app-side i{height:24px;border-radius:7px;background:var(--line-soft);font-style:normal;font-size:11px;display:flex;align-items:center;padding:0 8px;color:var(--ink-soft);font-weight:500} .app-side i.on{background:var(--emerald-tint);color:var(--emerald);font-weight:500} .app-main{padding:16px} .app-main h4{font-size:13px;font-weight:500;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between} .app-main h4 u{text-decoration:none;font-size:10px;background:var(--emerald-tint);color:var(--emerald);padding:3px 8px;border-radius:99px;font-weight:500} .tt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px} .tt-grid s{text-decoration:none;height:30px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--line-soft);font-size:9.5px;display:grid;place-items:center;color:var(--muted);font-weight:500} .tt-grid s.c1{background:var(--emerald-tint);color:var(--emerald);border-color:transparent} .tt-grid s.c2{background:color-mix(in srgb,var(--violet) 14%, transparent);color:var(--violet);border-color:transparent} .tt-grid s.c3{background:color-mix(in srgb,var(--orange) 16%, transparent);color:#C05A12;border-color:transparent} [data-theme="dark"] .tt-grid s.c3{color:#FFB077} .bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:10.5px;color:var(--muted)} .bar-row em{font-style:normal;width:52px;flex:none;font-weight:500;color:var(--ink-soft)} .bar-row .bar{flex:1;height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden} .bar-row .bar i{display:block;height:100%;border-radius:99px;background:var(--emerald);width:0;transition:width 1s cubic-bezier(.2,.7,.2,1)} .bar-row u{text-decoration:none;font-weight:500;color:var(--emerald);width:34px;text-align:right} .lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} /* note thumbnails read as paper, not swatches — ruled, grid, dots, diagram */ .lib-grid .np{position:relative;overflow:hidden} .np-ruled{background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb,var(--emerald) 30%, transparent) 7px 8px), color-mix(in srgb,var(--emerald) 12%, var(--surface))} .np-ruled.np-alt{background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb,var(--orange) 34%, transparent) 7px 8px), color-mix(in srgb,var(--orange) 13%, var(--surface))} .np-grid{background: repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb,var(--violet) 26%, transparent) 8px 9px), repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in srgb,var(--violet) 26%, transparent) 8px 9px), color-mix(in srgb,var(--violet) 10%, var(--surface))} .np-grid.np-alt{background: repeating-linear-gradient(0deg, transparent 0 8px, color-mix(in srgb,var(--emerald) 28%, transparent) 8px 9px), repeating-linear-gradient(90deg, transparent 0 8px, color-mix(in srgb,var(--emerald) 28%, transparent) 8px 9px), color-mix(in srgb,var(--emerald) 10%, var(--surface))} .np-dots{background: radial-gradient(color-mix(in srgb,var(--orange) 45%, transparent) 1.2px, transparent 1.6px), color-mix(in srgb,var(--yellow) 18%, var(--surface)); background-size:9px 9px, auto} .np-diagram{background: radial-gradient(circle at 62% 40%, transparent 9px, color-mix(in srgb,var(--violet) 55%, transparent) 9px 10.5px, transparent 10.5px), linear-gradient(115deg, transparent 46%, color-mix(in srgb,var(--violet) 45%, transparent) 46% 47.5%, transparent 47.5%), linear-gradient(65deg, transparent 46%, color-mix(in srgb,var(--violet) 45%, transparent) 46% 47.5%, transparent 47.5%), color-mix(in srgb,var(--violet) 9%, var(--surface))} .lib-grid figcaption i{font-style:normal;color:var(--muted);font-size:.85em;float:right} .lib-grid figure{border:1px solid var(--line-soft);border-radius:9px;overflow:hidden;background:var(--bg-soft)} .lib-grid figure div{height:44px;background:color-mix(in srgb,var(--emerald) 16%, var(--surface))} .lib-grid figure:nth-child(2) div{background:color-mix(in srgb,var(--orange) 22%, var(--surface))} .lib-grid figure:nth-child(3) div{background:color-mix(in srgb,var(--violet) 18%, var(--surface))} .lib-grid figcaption{font-size:9.5px;font-weight:500;padding:6px 8px;color:var(--ink-soft)} .q-line{border:1px solid var(--line-soft);border-radius:9px;padding:9px 11px;margin-bottom:7px;font-size:11px;color:var(--ink-soft);display:flex;gap:8px;align-items:center;background:var(--surface-2)} .q-line b{color:var(--emerald);font-size:10px} .q-line span{margin-left:auto;font-size:9px;background:var(--emerald-tint);color:var(--emerald);border-radius:99px;padding:2px 7px;font-weight:500} .feed-item{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:10.5px;color:var(--ink-soft)} .feed-item i{width:24px;height:24px;flex:none;border-radius:99px;font-style:normal;display:grid;place-items:center;font-size:10px;font-weight:500;color:#fff;background:var(--emerald)} .feed-item:nth-child(3) i{background:var(--orange)} .feed-item:nth-child(4) i{background:var(--violet)} [data-theme="dark"] .feed-item i{color:#08110D} .feed-item b{display:block;color:var(--ink);font-size:11px} /* ---------------- testimonials deck ---------------- */ .testimonials{background:var(--bg-soft)} .testi-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:center} .deck{position:relative;height:400px;perspective:1200px} .t-card{ position:absolute;inset:0;margin:auto;max-width:560px;height:340px; background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:40px 44px; display:flex;flex-direction:column;justify-content:space-between; transition:transform .7s cubic-bezier(.2,.75,.25,1),opacity .6s,filter .6s; will-change:transform; } .t-card .t-spark{position:absolute;top:20px;right:22px;width:22px;height:22px;color:var(--yellow)} .t-card .quote-mark{font-family:var(--font-serif);font-style:italic;font-size:58px;line-height:.6;color:var(--emerald);opacity:.9} .t-card blockquote{font-family:var(--font-serif);font-style:italic;font-size:clamp(17px,1.7vw,21px);line-height:1.42;letter-spacing:-.01em;font-weight:500;color:var(--ink);margin-top:14px} .t-foot{display:flex;align-items:center;gap:14px} .t-ava{width:46px;height:46px;border-radius:99px;flex:none;display:grid;place-items:center;font-family:var(--font-display);font-weight:500;color:#fff;font-size:15px;letter-spacing:.02em} .t-foot b{display:block;font-size:15px} .t-foot span{font-size:13px;color:var(--muted)} .t-card[data-pos="0"]{transform:translateY(0) rotate(0) scale(1);opacity:1;z-index:5} .t-card[data-pos="1"]{transform:translateY(-26px) rotate(2.4deg) scale(.945);opacity:.75;z-index:4;filter:blur(0.4px)} .t-card[data-pos="2"]{transform:translateY(-50px) rotate(-2deg) scale(.89);opacity:.45;z-index:3;filter:blur(1px)} .t-card[data-pos="3"]{transform:translateY(-72px) rotate(1.2deg) scale(.845);opacity:.22;z-index:2;filter:blur(1.6px)} .t-card[data-pos="4"]{transform:translateY(-88px) scale(.8);opacity:0;z-index:1} .t-card.leaving{transform:translateY(46%) rotate(-7deg) scale(1.02);opacity:0;z-index:6} .deck-nav{display:flex;gap:10px;margin-top:26px} .deck-dot{width:8px;height:8px;border-radius:99px;background:var(--line);transition:.3s;padding:0} .deck-dot.on{background:var(--emerald);width:26px} /* ---------------- roles: one folder, tabs on top ---------------- */ .rolefolder{ margin-top:54px;background:var(--surface); border:1px solid var(--line-soft);border-radius:var(--radius-lg); box-shadow:var(--shadow);overflow:hidden; } .rf-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;background:var(--bg-soft)} .rf-tab{ display:flex;flex-direction:column;align-items:center;gap:12px; padding:18px 10px 16px;border-radius:14px;border:1px solid transparent; background:transparent;transition:.25s; } .rf-tab b{font-family:var(--font-display);font-size:14.5px;font-weight:500;color:var(--muted);transition:.25s} .rf-art{ width:86px;height:86px;display:grid;place-items:center; filter:grayscale(1) opacity(.32);transition:.3s; } .rf-art img{width:100%;height:100%;object-fit:contain;display:block} .rf-tab:hover .rf-art{filter:grayscale(.4) opacity(.7);transform:translateY(-3px)} .rf-tab:hover b{color:var(--ink)} .rf-tab.active{background:var(--surface);border-color:var(--line-soft);box-shadow:var(--shadow)} .rf-tab.active .rf-art{filter:none;transform:translateY(-4px) rotate(-3deg)} .rf-tab.active b{color:var(--ink)} .rf-panel{ display:grid;grid-template-columns:.85fr 1.15fr;gap:48px; padding:44px 46px 46px;transition:opacity .18s ease; } .rf-panel.swapping{opacity:0} .rf-lead h3{font-family:var(--font-display);font-size:clamp(24px,2.7vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:500;margin-bottom:22px} .rf-items{display:flex;flex-direction:column} .rf-item{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line-soft)} .rf-item:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} .rf-item b{display:block;font-family:var(--font-display);font-size:17px;font-weight:500;margin-bottom:6px} .rf-item p{color:var(--ink-soft);font-size:14.5px;line-height:1.55} /* ---------------- scribble accents beside headings ---------------- */ .h-mark{position:relative;display:inline-block} .h-mark svg{position:absolute;pointer-events:none;overflow:visible} .h-mark .scribble-under{left:-2%;bottom:-16px;width:104%;height:16px;color:var(--emerald)} .h-mark .scribble-spark{right:-42px;top:-26px;width:34px;height:34px;color:var(--orange)} .h-mark .scribble-circle{left:-14px;top:-12px;width:calc(100% + 58px);height:calc(100% + 30px);color:var(--violet)} .scribble-under path,.scribble-spark path,.scribble-circle path{ fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400); } .reveal.in .scribble-under path,.reveal.in .scribble-spark path,.reveal.in .scribble-circle path{ animation:draw .9s .25s cubic-bezier(.4,.7,.3,1) forwards; } @keyframes draw{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){ .scribble-under path,.scribble-spark path,.scribble-circle path{stroke-dashoffset:0} } /* ---------------- CTA banner: yellow, one bright action, the gang ---------------- */ /* 48px left the pricing FAQ almost touching the card (59px of clearance). The kit pages get the full ladder via .role-cta-band; this is the floor for everything else. */ .cta{padding:72px 0 88px} .cta-card{ position:relative;border-radius:36px;overflow:hidden; padding:clamp(48px,6vw,84px) clamp(28px,6vw,84px) 0; color:var(--ink);text-align:left; background:var(--bg-soft); /* light ground — the gang's colours do the talking */ border:1px solid var(--line-soft); box-shadow:var(--shadow-lg); } .cta-card::after{ content:"";position:absolute;inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.07;mix-blend-mode:overlay;pointer-events:none; } .cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center} .cta-copy{padding-bottom:clamp(48px,6vw,84px);display:flex;flex-direction:column;align-items:flex-start;gap:18px;justify-content:center} .cta-card h2{font-family:var(--font-display);font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.04em;font-weight:500} .cta-card p{color:var(--ink-soft);max-width:44ch;font-size:19px;line-height:1.4;letter-spacing:-.02em} /* the one bright action: yellow, the complement that supports the gang */ .btn-ink{background:var(--yellow);color:#10201A;box-shadow:0 8px 22px -8px rgba(233,196,59,.7)} .btn-ink:hover{background:#FFDE66;transform:translateY(-1px)} /* the banner's own ribbon: pink twirl behind the gang */ .cta-band{position:absolute;inset:0;top:0;overflow:hidden;z-index:1;pointer-events:none} .cta-band .ribbon-line,.cta-band .ribbon-echo{stroke-width:34} .cta-band .ribbon-echo{transform:translate(8px,11px)} @media (max-width:960px){.cta-band{display:none}} /* the gang, standing together on the banner's floor */ .cta-gang{display:flex;align-items:flex-end;justify-content:flex-end;align-self:end} .cta-gang img{display:block;width:100%;max-width:560px;height:auto;filter:drop-shadow(0 5px 10px rgba(16,32,26,.18))} /* ---------------- footer ---------------- */ footer{position:relative;border-top:1px solid var(--line-soft);padding:70px 0 40px;background:var(--bg-soft)} footer .wrap{position:relative;z-index:2} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:56px} .foot-grid .brand{font-size:24px} .foot-tag{margin-top:14px;color:var(--muted);font-size:14px;max-width:30ch} .foot-grid h5{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px} .foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px} .foot-grid ul a{font-size:14.5px;color:var(--ink-soft);transition:.2s} .foot-grid ul a:hover{color:var(--emerald)} .foot-word{ /* the same wordmark as the nav, oversized: light grey with only the h in green */ font-family:var(--font-display);font-weight:500;letter-spacing:-.045em; font-size:clamp(72px,14vw,210px);line-height:.9;text-align:center; color:var(--line);user-select:none; padding-bottom:.12em; /* the p's descender clears the base rule */ } .foot-word em{font-family:var(--font-serif);font-style:italic;font-weight:500;font-size:.94em;letter-spacing:0;color:var(--emerald)} .foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:24px;margin-top:10px;font-size:13px;color:var(--muted)} /* ---------------- about: the founder's letter ---------------- */ .letter{ max-width:640px;margin:0 auto;background:var(--surface); border:1px solid var(--line-soft);border-radius:6px; padding:clamp(34px,6vw,64px); /* paper on a desk: soft lift, one corner folded over */ box-shadow:0 2px 4px rgba(16,32,26,.05), 0 26px 50px -22px rgba(16,32,26,.25); position:relative; transform:rotate(-.4deg); /* laid down, not printed by a machine */ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 58px), calc(100% - 58px) 100%, 0 100%); } .letter>*{transform:rotate(.4deg)} /* the text stays level */ /* the folded-over flap in the cut corner */ .letter .fold{ position:absolute;right:0;bottom:0;width:58px;height:58px;transform:none !important; background:linear-gradient(315deg, transparent 49.5%, color-mix(in srgb,var(--ink) 10%, var(--surface)) 50%, color-mix(in srgb,var(--ink) 4%, var(--surface)) 62%, var(--surface-2) 100%); filter:drop-shadow(-3px -3px 5px rgba(16,32,26,.12)); } .letter::before{ /* stamp: the rosette pressed into the corner */ content:"";position:absolute;top:26px;left:26px;width:44px;height:44px; background:var(--emerald-tint);border-radius:8px; -webkit-mask:url("../img/Logo/nav-cap.svg") center/contain no-repeat; mask:url("../img/Logo/nav-cap.svg") center/contain no-repeat; background-color:var(--emerald);opacity:.85; } .letter p{font-size:16.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:20px} .letter p em{font-family:var(--font-serif);font-style:italic;color:var(--ink)} .letter-date{font-size:13px !important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted) !important;margin-bottom:30px !important} .letter-sign{font-family:var(--font-serif);font-style:italic;font-size:19px !important;color:var(--ink) !important;margin-top:34px;margin-bottom:0 !important} .letter-cta{display:flex;gap:18px;align-items:center;justify-content:center;margin-top:44px} /* ---------------- about: the gang, front and centre ---------------- */ .letter .cr-gang-solo{display:flex;justify-content:center;margin:-6px 0 38px} .letter .cr-gang-solo img{width:min(520px,100%);height:auto;display:block;filter:drop-shadow(0 6px 12px rgba(16,32,26,.12))} [data-plx]{will-change:transform} /* ---------------- contact: the greeter lives in the email card ---------------- */ .c-direct{position:relative;padding-right:150px} .c-direct .mail-mascot{position:absolute;right:14px;bottom:10px;width:118px;margin:0} .c-direct .mail-mascot img{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(16,32,26,.18))} @media (max-width:960px){.c-direct{padding-right:130px}} /* ---------------- 404 ---------------- */ .notfound{min-height:100vh;display:flex;align-items:center;padding:120px 0 60px} .nf-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center} .nf-kid{display:block;max-width:340px;justify-self:end} .nf-kid img{width:100%;height:auto;display:block} .nf-code{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:.2em;color:var(--emerald);margin-bottom:10px} .nf-copy h1{font-family:var(--font-display);font-size:clamp(34px,4.6vw,56px);font-weight:500;letter-spacing:-.05em;line-height:1.05;margin-bottom:16px} .nf-copy p{color:var(--ink-soft);font-size:19px;line-height:1.4;max-width:42ch;margin-bottom:28px} .nf-actions{display:flex;gap:18px;align-items:center} @media (max-width:960px){ .nf-inner{grid-template-columns:1fr;text-align:center} .nf-kid{justify-self:center;max-width:240px} .nf-copy p{margin-inline:auto} .nf-actions{justify-content:center} .mail-mascot{margin-inline:auto} } /* ---------------- pricing ---------------- */ .page-hero{position:relative;padding:158px 0 30px;text-align:center} /* the ribbon is free here: no cropping, it dives behind the next section */ .page-hero .hero-ribbon{top:60px;overflow:visible;z-index:0} .page-hero .hero-ribbon svg{overflow:visible} .price-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px;align-items:stretch} .price-card{ position:relative;background:var(--surface);border:1px solid var(--line-soft); border-radius:var(--radius-lg);padding:36px 32px;box-shadow:var(--shadow); display:flex;flex-direction:column;gap:0;transition:transform .3s,box-shadow .3s; } .price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .price-card.hot{ border-color:color-mix(in srgb,var(--emerald) 45%, transparent); background:color-mix(in srgb,var(--emerald) 5%, var(--surface)); } .hot-badge{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--emerald);color:#fff;font-family:var(--font-display);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; padding:6px 16px;border-radius:99px;box-shadow:0 8px 20px -6px rgba(11,138,92,.5); } [data-theme="dark"] .hot-badge{color:#06231A} .price-card h3{font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:-.015em} .price-card .for{color:var(--muted);font-size:13.5px;margin:6px 0 22px} .price-line{display:flex;align-items:baseline;gap:6px;margin-bottom:4px} .price-line b{font-family:var(--font-display);font-size:44px;font-weight:500;letter-spacing:-.03em} .price-line span{color:var(--muted);font-size:13.5px} .price-note{font-size:12px;color:var(--muted);margin-bottom:24px} .price-card ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:22px 0 30px;padding-top:22px;border-top:1px dashed var(--line)} .price-card ul li{display:flex;gap:10px;font-size:14px;color:var(--ink-soft);align-items:flex-start} .price-card ul li svg{flex:none;margin-top:3px;color:var(--emerald)} .price-card .btn{margin-top:auto;width:100%} .faq{position:relative;z-index:2;max-width:760px;margin:70px auto 0} .faq details{border:1px solid var(--line-soft);border-radius:16px;background:var(--surface);margin-bottom:12px;overflow:hidden} .faq summary{padding:20px 24px;font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:15.5px} .faq summary::after{content:"+";font-family:var(--font-display);font-size:22px;color:var(--emerald);transition:.3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 24px 20px;color:var(--ink-soft);font-size:14.5px;max-width:65ch} /* ---------------- contact: the twirl behind the form ---------------- */ .contact-twirl{position:absolute;left:0;right:0;top:auto;bottom:0;height:600px;overflow:hidden;z-index:0} .contact-arch{position:absolute;left:0;right:0;top:34px;height:440px;overflow:visible;z-index:0} .contact-arch svg{overflow:visible} .contact-arch .ribbon-line,.contact-arch .ribbon-echo{stroke-width:34} .contact-arch .ribbon-echo{transform:translate(8px,11px)} @media (max-width:960px){.contact-arch{display:none}} .contact-twirl .ribbon-line,.contact-twirl .ribbon-echo{stroke-width:36} .contact-twirl .ribbon-echo{transform:translate(9px,12px)} .contact-twirl svg{overflow:visible} .contact-grid{position:relative;z-index:2} .contact-sec{z-index:1} @media (max-width:960px){.contact-twirl{display:none}} /* ---------------- contact ---------------- */ .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start;margin-top:60px} .contact-info h2{margin-bottom:18px} .c-steps{margin:34px 0;display:flex;flex-direction:column;gap:0} .c-step{display:flex;gap:16px;position:relative;padding-bottom:26px} .c-step::before{content:"";position:absolute;left:23px;top:52px;bottom:6px;width:1.5px;background:var(--line)} .c-step:last-child::before{display:none} .c-step .c-ico{width:48px;height:48px;flex:none;display:grid;place-items:center} .c-step .c-ico img{width:44px;height:44px;object-fit:contain;display:block} .c-step b{display:block;font-size:15px} .c-step span{font-size:13.5px;color:var(--muted)} .c-direct{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line-soft);border-radius:18px;background:var(--surface)} .c-direct a{display:flex;gap:12px;align-items:center;font-size:14.5px;font-weight:500;color:var(--ink-soft);transition:.2s} .c-direct a:hover{color:var(--emerald)} .form-card{ background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:40px;position:relative;overflow:hidden; } .etypes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:26px} .etype{position:relative} .etype input{position:absolute;opacity:0;inset:0;cursor:pointer} .etype label{ display:flex;gap:10px;align-items:center;border:1.5px solid var(--line);border-radius:14px; padding:13px 15px;font-size:13.5px;font-weight:500;color:var(--ink-soft);transition:.2s;cursor:pointer; } .etype .eico{width:28px;height:28px;border-radius:8px;background:var(--bg-soft);display:grid;place-items:center;font-size:13px;flex:none} .etype input:checked+label{border-color:var(--emerald);background:var(--emerald-tint);color:var(--emerald)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px} .field label{font-size:13px;font-weight:500;color:var(--ink-soft)} .field input,.field textarea,.field .dd-btn{ font:inherit;font-size:14.5px;color:var(--ink); background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px; padding:12px 14px;outline:none;transition:.2s;width:100%; } /* THE DROPDOWN — ours, never the system popover (founder's rule, every page). A button that looks like the field it replaces, and a listbox of our own: arrow keys move, Enter chooses, Escape and a click outside close. The hidden input carries the name, so FormData sees exactly what a