/* ============================================================ Walnut Labs — a software joinery Production stylesheet (atelier direction + night theme) ============================================================ */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* page background set on so the pre-paint theme script avoids any flash */ html{background:#fcfcfb;} html.night{background:#0a0c10;} :root{ --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --disp:"Space Grotesk",system-ui,-apple-system,sans-serif; /* italian tricolore — used only by the literal flag stripe */ --flag-g:#1c9e5a; --flag-w:#f4f4f2; --flag-r:#d63b28; } /* ============ THEME TOKENS (atelier — light, airy, neutral) ============ */ .site{ --bg:#fcfcfb; --surface:#ffffff; --ink:#181a1d; --strong:#000; --muted:#62666d; --faint:#9aa0a8; --line:rgba(20,22,26,.12); --rule:rgba(20,22,26,.12); --btn-bg:#181a1d; --btn-fg:#fbfbf9; --disp-weight:500; --disp-tracking:-0.022em; --hero-size:clamp(38px,6vw,76px); --hero-lh:1.06; --hero-align:center; --shell:1080px; /* page accent ramp is grayscale — keeps the chrome black & white */ --grain-1:var(--faint); --grain-2:var(--muted); --grain-3:var(--ink); background:var(--bg); color:var(--ink); font-family:var(--disp); min-height:100vh; position:relative; transition:background .45s ease, color .45s ease; } /* night theme — identical layout, dark colors (class lives on , set pre-paint) */ html.night .site{ --bg:#0a0c10; --surface:#13171d; --ink:#eef1f5; --strong:#fff; --muted:#98a1ad; --faint:#5e6772; --line:rgba(255,255,255,.09); --rule:rgba(255,255,255,.11); --btn-bg:#eef1f5; --btn-fg:#0a0c10; } /* ============ SHELL ============ */ .shell{max-width:var(--shell);margin:0 auto;padding:0 40px;} @media(max-width:680px){ .shell{padding:0 22px;} } .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.24em;white-space:nowrap; text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:11px;} .eyebrow::before{content:"";width:22px;height:1px;background:var(--line);display:inline-block;} .hero .eyebrow{justify-content:center;} /* --faint is too dim on the near-black night background — lift the eyebrow */ html.night .eyebrow{color:var(--muted);} /* ============ NAV ============ */ nav{position:sticky;top:0;z-index:50; backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 78%, transparent); transition:background .45s ease, border-color .45s ease;} .navin{max-width:var(--shell);margin:0 auto;padding:17px 40px; display:flex;align-items:center;justify-content:space-between;} @media(max-width:680px){ .navin{padding:15px 22px;} } .navlinks{display:flex;align-items:center;gap:30px;} @media(max-width:480px){ .navlinks{gap:18px;} } .navlinks a{font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em; text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .2s;} .navlinks a:hover{color:var(--ink);} .navlinks .email{color:var(--ink);} /* filled chip previewing the OTHER theme: dark button (moon) on the light page, and vice versa */ .daynight{appearance:none;border:1px solid transparent;background:var(--btn-bg);color:var(--btn-fg); width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center; cursor:pointer;transition:background .25s,color .25s,transform .15s ease,box-shadow .25s ease;flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.12);} .daynight:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(0,0,0,.45);} .daynight svg{width:16px;height:16px;display:block;} /* ============ {W} MARK ============ */ .bmark{display:inline-flex;align-items:center;gap:0;line-height:1;} .bmark .br{font-family:var(--mono);color:var(--muted);font-weight:500;font-size:1.06em;} .bmark .bb{font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-0.02em; transform:translateY(0.075em);} /* {W} → {WXYZ} on logo hover — width transition between definite values is smooth */ .bmark .bx{display:inline-block;width:0;overflow:hidden;white-space:nowrap; font-family:var(--disp);font-weight:700;color:var(--ink);letter-spacing:-0.02em; transform:translateY(0.075em);opacity:0; transition:width .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease .03s;} @media(hover:hover){ .wordmark:hover .bmark .bx{width:1.92em;opacity:1;} } .wordmark:focus-visible .bmark .bx,.wordmark.expanded .bmark .bx{width:1.92em;opacity:1;} @media(prefers-reduced-motion:reduce){ .bmark .bx{transition:none;} } .wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);} .wordmark .wm-txt{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-0.02em;} .wordmark .wm-txt b{font-weight:600;} .wordmark .wm-txt .dim{color:var(--muted);font-weight:500;} /* ============ HERO ============ */ /* equal top/bottom whitespace around the hero (top was heavier, esp. on mobile) */ .hero{padding:clamp(52px,8vh,104px) 0;text-align:var(--hero-align);} .hero-inner{max-width:var(--shell);margin-inline:auto;max-width:880px;} h1.hero-h{font-size:var(--hero-size);line-height:var(--hero-lh); font-weight:var(--disp-weight);letter-spacing:var(--disp-tracking); margin:26px 0 0;text-wrap:balance;color:var(--ink);} h1.hero-h .soft{color:var(--muted);} /* lift line 1 so its descender (the "g") paints over line 2's selection highlight */ h1.hero-h .hero-l1{position:relative;z-index:1;} .hero-sub{margin:26px auto 0;font-size:clamp(16px,1.5vw,19px);line-height:1.6; color:var(--muted);max-width:560px;font-weight:400;} .hero-cta{margin-top:38px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center;} .btn{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap; text-decoration:none;padding:14px 22px;border-radius:9px;display:inline-flex;align-items:center;gap:9px; transition:transform .15s ease, opacity .2s ease, background .2s;cursor:pointer;border:1px solid transparent;} .btn.primary{background:var(--btn-bg);color:var(--btn-fg);box-shadow:0 1px 2px rgba(0,0,0,.1); transition:transform .15s ease, box-shadow .25s ease, background .2s, color .2s, font-weight .2s;} .btn.primary:hover{transform:translateY(-1px);color:#fff;font-weight:600; box-shadow:0 8px 22px -8px rgba(0,0,0,.5);} html.night .btn.primary:hover{color:#000;} .btn.primary:hover .dot{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb, currentColor 28%, transparent);} .btn .dot{transition:opacity .2s ease, box-shadow .25s ease;} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);} .btn.ghost:hover{border-color:var(--ink);} .btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;} /* hero meta strip (hidden by default — shown if meta cells present) */ .hero-meta{margin-top:clamp(48px,8vh,90px);display:flex;gap:0;flex-wrap:wrap; border-top:1px solid var(--rule);justify-content:center;} .hero-meta .cell{padding:18px 30px 0 0;margin-right:30px;flex:0 0 auto;} .hero-meta .cell:not(:last-child){border-right:1px solid var(--line);} .hero-meta .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em; text-transform:uppercase;color:var(--faint);} .hero-meta .v{font-size:15px;color:var(--ink);margin-top:5px;font-weight:500;} /* ============ SECTION SCAFFOLD ============ */ section.block{padding:clamp(58px,9vh,104px) 0;border-top:1px solid var(--rule);} .sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:46px;} .sec-num{font-family:var(--mono);font-size:12px;letter-spacing:0.1em;color:var(--faint);} .sec-title{font-size:clamp(22px,2.6vw,32px);font-weight:var(--disp-weight); letter-spacing:-0.02em;color:var(--ink);} /* ethos — The standard */ .ethos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line); transition:background .45s ease, border-color .45s ease;} .ethos .card{background:var(--bg);padding:34px 30px 36px;display:flex;flex-direction:column;gap:14px;min-height:180px; transition:background .45s ease;} .ethos .card h3{margin:0;font-size:21px;font-weight:var(--disp-weight);letter-spacing:-0.02em;color:var(--ink);} .ethos .card p{margin:0;font-size:14.5px;line-height:1.62;color:var(--muted);} @media(max-width:760px){ .ethos{grid-template-columns:1fr;} .ethos .card{min-height:0;} } /* what we do */ .lede{max-width:720px;} .lede p{margin:0;font-family:var(--disp);font-size:clamp(22px,2.7vw,33px);line-height:1.4; letter-spacing:-0.018em;color:var(--ink);font-weight:var(--disp-weight);text-wrap:pretty;} .lede p .soft{color:var(--muted);} .caps{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;} .cap{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:9px 15px; transition:border-color .2s, color .2s;} .cap:hover{border-color:var(--ink);color:var(--ink);} /* privacy */ .guarantees{margin-top:38px;max-width:720px;border-top:1px solid var(--line);} .guarantee{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);} .guarantee .gt{font-family:var(--disp);font-size:clamp(16px,1.7vw,19px);line-height:1.45;color:var(--ink);font-weight:500;} .guarantee .gt .soft{color:var(--muted);font-weight:400;} /* contact */ .contact{text-align:left;} .contact .big{font-size:clamp(34px,5.5vw,76px);font-weight:var(--disp-weight);letter-spacing:-0.03em;line-height:1.02;color:var(--ink);margin:0;overflow-wrap:break-word;} .contact .big a{color:inherit;text-decoration:none;border-bottom:2px solid var(--line);transition:border-color .2s;} .contact .big a:hover{border-color:var(--ink);} .contact .big code{font-family:var(--mono);font-size:0.82em;font-weight:500;letter-spacing:-0.02em; background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:0.04em 0.22em;vertical-align:0.04em;color:var(--ink); box-shadow:0 1px 0 var(--line); transition:background .45s ease, border-color .45s ease, box-shadow .45s ease, color .45s ease;} /* lift the code-block surface in dark mode so the binary reads more clearly */ html.night .contact .big code{background:#1c2128;} .contact .row{margin-top:40px;display:flex;gap:46px;flex-wrap:wrap;} .contact .row .k{font-family:var(--mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);} .contact .row .v{margin-top:7px;font-size:15px;color:var(--ink);} .contact .row .v a{color:var(--muted);text-decoration:none;} .contact .row .v a:hover{color:var(--ink);} /* footer + signature */ footer{border-top:1px solid var(--rule);padding:54px 0 60px;} .footin{display:flex;flex-direction:column;gap:14px;} .foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;} .tricolore{display:inline-flex;height:11px;border-radius:2px;overflow:hidden;} .tricolore i{flex:1;display:block;min-width:11px;} .tricolore .g{background:var(--flag-g);} .tricolore .w{background:var(--flag-w);} .tricolore .r{background:var(--flag-r);} .foot-row .tricolore{height:13px;} .foot-row .tricolore i{width:9px;flex:none;min-width:0;} .foot-line{font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--muted);font-weight:500;text-transform:uppercase;} .foot-link{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;} .foot-link:hover{color:var(--ink);} .foot-copy{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--faint);} /* --faint is too dim for the © line on the night background */ html.night .foot-copy{color:var(--muted);} @media(max-width:520px){ /* flatten both rows into one column, ordered: flag -> built by Italians -> walnutlabs.xyz -> copyright */ .foot-row{display:contents;} .footin{align-items:flex-start;} .footin .tricolore{order:1;} .footin .foot-line{order:2;} .footin .foot-link{order:3;} .footin .foot-copy{order:4;} } /* fade text colors with the 0.45s background instead of snapping to the target */ h1.hero-h, h1.hero-h .soft, .hero-sub, .eyebrow, .sec-num, .sec-title, .ethos .card h3, .ethos .card p, .lede p, .lede p .soft, .guarantee .gt, .guarantee .gt .soft, .contact .big, .contact .row .k, .contact .row .v, .wordmark, .bmark .br, .bmark .bb, .wm-txt .dim, .foot-line, .foot-copy{ transition:color .45s ease; } .foot-link{ transition:color .2s ease; } /* reveal-on-scroll */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease;} .reveal.in{opacity:1;transform:none;} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }