/* ===== Herzl Bibi — Daylesford direction · shared stylesheet ===== */ :root{ --cream:#f7f3ea; --paper:#fffdf8; --stone:#ece4d4; --stone-2:#e0d6c3; --ink:#2b2a25; --ink-soft:#736c5d; --line:#e2dac9; --forest:#33523a; --forest-d:#28412e; --olive:#5d6a3e; --gold:#a9823b; --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:"Frank Ruhl Libre",serif;color:var(--ink);background:var(--cream); line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden} .serif{font-family:"Frank Ruhl Libre",serif} .wrap{max-width:1200px;margin:0 auto;padding:0 34px} .narrow{max-width:760px;margin:0 auto;padding:0 34px} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} .label{display:inline-block;font-size:12px;letter-spacing:.34em;font-weight:500;color:var(--gold);text-transform:uppercase} .reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)} .reveal.in{opacity:1;transform:none} .tlink{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;letter-spacing:.04em; border-bottom:1px solid currentColor;padding-bottom:3px;transition:gap .4s var(--ease),opacity .3s} .tlink:hover{gap:14px;opacity:.7} .btn-solid{background:var(--forest);color:var(--cream);font-size:13px;letter-spacing:.16em;text-transform:uppercase; padding:16px 38px;border-radius:2px;border:0;cursor:pointer;display:inline-block;transition:background .4s var(--ease),transform .4s var(--ease)} .btn-solid:hover{background:var(--forest-d);transform:translateY(-2px)} .btn-cream{background:var(--cream);color:var(--forest);font-size:13px;letter-spacing:.16em;text-transform:uppercase; padding:16px 38px;border-radius:2px;border:0;cursor:pointer;display:inline-block} /* ===== header (light bar, original logo) ===== */ .site-head{position:sticky;top:0;z-index:40;background:#f7f3ea; border-bottom:1px solid var(--line)} .headbar{display:flex;align-items:center;justify-content:space-between;height:84px;gap:30px} .brand img{height:50px;width:auto} .mainnav{display:flex;gap:34px;font-size:15px;letter-spacing:.02em} .mainnav a{color:var(--ink);position:relative;padding:4px 0;transition:color .3s} .mainnav a:hover{color:var(--forest)} .mainnav a::after{content:"";position:absolute;right:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .35s var(--ease)} .mainnav a:hover::after{width:100%} .req-link{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.1em;text-transform:uppercase; color:var(--forest);border:1px solid var(--forest);padding:11px 20px;border-radius:2px;transition:background .4s var(--ease),color .4s var(--ease)} .req-link:hover{background:var(--forest);color:var(--cream)} .req-link .n{background:var(--gold);color:#fff;font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;letter-spacing:0} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px} .burger span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .35s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{display:none;flex-direction:column;background:var(--cream);border-top:1px solid var(--line)} .mobile-menu.open{display:flex} .mobile-menu a{padding:16px 34px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)} .mobile-menu a:active{background:var(--stone)} /* ===== hero (video) ===== */ .hero{position:relative;height:84vh;min-height:560px;display:flex;align-items:flex-end;justify-content:center;text-align:center;overflow:hidden} .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(22,28,18,.34) 0%,rgba(22,28,18,.12) 38%,rgba(22,28,18,.78) 100%)} .hero-in{position:relative;z-index:2;color:#fff;padding-bottom:10vh;max-width:880px} .hero .label{color:rgba(255,255,255,.92)} .hero h1{font-weight:500;font-size:clamp(40px,6vw,84px);line-height:1.04;margin:22px 0 0;text-shadow:0 2px 34px rgba(0,0,0,.4)} .hero p{font-size:19px;font-weight:300;color:rgba(255,255,255,.92);margin:22px auto 34px;max-width:34em;text-shadow:0 1px 16px rgba(0,0,0,.4)} .hero-cta{display:flex;gap:28px;justify-content:center;align-items:center;flex-wrap:wrap} .hbtn{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff;border:1px solid rgba(255,255,255,.6); padding:14px 30px;border-radius:2px;transition:background .4s var(--ease),color .4s var(--ease)} .hbtn:hover{background:#fff;color:var(--ink)} /* ===== philosophy ===== */ .philo{padding:120px 0 110px;text-align:center} .philo h2{font-weight:400;font-size:clamp(26px,3.2vw,40px);line-height:1.4;margin-top:24px;color:var(--ink)} .philo .rule{width:54px;height:1px;background:var(--gold);margin:40px auto 0} /* ===== editorial split ===== */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:center} .split .media{height:640px;overflow:hidden} .split .media img{width:100%;height:100%;object-fit:cover} .split .text{padding:0 8vw} .split h2{font-weight:500;font-size:clamp(30px,3.6vw,48px);line-height:1.1;margin:20px 0 22px} .split p{color:var(--ink-soft);font-size:17px;margin-bottom:30px;max-width:30em} /* ===== section heads ===== */ .center-head{text-align:center;margin-bottom:60px} .center-head h2{font-weight:400;font-size:clamp(30px,3.6vw,48px);margin-top:18px} /* ===== categories ===== */ .cats-sec{padding:120px 0} .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 30px} .cat{text-align:center;cursor:pointer} .cat .disc{width:150px;height:150px;margin:0 auto 22px;border-radius:50%; background:radial-gradient(circle at 50% 42%,var(--paper),var(--stone));display:grid;place-items:center; transition:transform .6s var(--ease),box-shadow .6s var(--ease)} .cat .disc img{width:108px;height:108px;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(80,60,20,.16))} .cat:hover .disc{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(80,60,20,.4)} .cat b{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:20px;display:block} .cat span{font-size:13px;letter-spacing:.1em;color:var(--ink-soft)} /* ===== quality band ===== */ .band{position:relative;height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden} .band .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band::after{content:"";position:absolute;inset:0;background:rgba(28,24,18,.56)} .band .in{position:relative;z-index:2;color:#fff;max-width:720px;padding:0 30px} .band h2{font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1.12;margin-top:22px} .band p{font-weight:300;color:rgba(255,255,255,.88);margin-top:22px;font-size:18px} /* ===== products grid ===== */ .prod-sec{padding:120px 0} .prods{display:grid;grid-template-columns:repeat(4,1fr);gap:50px 26px} .pcard{text-align:center} .pcard a.ph,.pcard .ph{position:relative;display:block;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:20px; background:radial-gradient(circle at 50% 42%,var(--paper),var(--stone));transition:transform .6s var(--ease)} .pcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:30px;transition:transform .7s var(--ease)} .pcard:hover .ph img{transform:scale(1.06)} .pcard .cat-l{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .pcard h3{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:19px;margin:6px 0 4px} .pcard h3 a:hover{color:var(--forest)} .pcard .pack{font-size:13px;color:var(--ink-soft);letter-spacing:.06em} .pcard .add{margin-top:14px;font-size:13px;letter-spacing:.08em;color:var(--ink);border-bottom:1px solid var(--line); padding-bottom:3px;display:inline-block;cursor:pointer;transition:border-color .3s,color .3s;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit} .pcard .add:hover{border-color:var(--gold);color:var(--gold)} .center-btn{display:flex;justify-content:center;margin-top:70px} /* ===== CTA ===== */ .cta{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch} .cta .t{background:var(--forest);color:var(--cream);padding:90px 8vw;display:flex;flex-direction:column;justify-content:center} .cta .t .label{color:#cdbb8a} .cta .t h2{font-weight:400;font-size:clamp(28px,3.4vw,46px);line-height:1.14;margin:18px 0 22px} .cta .t p{color:rgba(247,243,234,.8);margin-bottom:34px;max-width:28em} .cta .btn-cream{align-self:flex-start} .cta .media{overflow:hidden;min-height:440px} .cta .media img{width:100%;height:100%;object-fit:cover} /* ===== footer ===== */ footer{background:var(--ink);color:rgba(247,243,234,.72);padding:80px 0 36px} .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px} .fgrid img{height:42px;background:var(--cream);padding:8px 12px;border-radius:4px;margin-bottom:18px} .fgrid p{font-weight:300;font-size:14px;max-width:24em} .fgrid h5{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#cdbb8a;margin-bottom:16px} .fgrid li{list-style:none;margin-bottom:10px;font-size:14px;font-weight:300} .fgrid li a:hover{color:#fff} .fbottom{display:flex;justify-content:space-between;margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;letter-spacing:.06em} /* ===== breadcrumb + page header ===== */ .crumb{padding:30px 0 0;font-size:13px;letter-spacing:.06em;color:var(--ink-soft)} .crumb a:hover{color:var(--forest)} .crumb span{margin:0 8px;opacity:.5} .page-head{padding:34px 0 30px;border-bottom:1px solid var(--line)} .page-head h1{font-weight:500;font-size:clamp(34px,4.4vw,56px)} .page-head .meta{color:var(--ink-soft);margin-top:8px;font-size:16px} /* ===== category toolbar ===== */ .toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;flex-wrap:wrap} .chips{display:flex;gap:10px} .chip{font-size:13px;letter-spacing:.08em;padding:9px 18px;border:1px solid var(--line);border-radius:2px;background:var(--paper);cursor:pointer;transition:.3s} .chip.active,.chip:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)} .searchbox{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:11px 16px;min-width:280px;color:var(--ink-soft);font-size:14px} .searchbox input{border:0;background:none;outline:0;font-family:inherit;font-size:14px;color:var(--ink);width:100%} /* ===== product detail ===== */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:50px 0 90px;align-items:start} .pdp .gallery{position:relative;aspect-ratio:1;border-radius:6px;background:radial-gradient(circle at 50% 42%,var(--paper),var(--stone))} .pdp .gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12%} .pdp .badge-organic{position:absolute;top:20px;right:20px;background:var(--forest);color:var(--cream);font-size:12px;letter-spacing:.12em;padding:7px 14px;border-radius:2px} .pdp .info .cat-l{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .pdp .info h1{font-weight:500;font-size:clamp(30px,3.6vw,46px);margin:10px 0 14px;line-height:1.1} .pdp .specs{display:flex;gap:30px;margin:18px 0;padding:18px 0;border-block:1px solid var(--line)} .pdp .specs .s small{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .pdp .specs .s b{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:19px} .pdp .desc{color:var(--ink-soft);font-size:17px;margin:6px 0 28px} .qtyrow{display:flex;align-items:center;gap:18px;margin-bottom:24px} .stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;background:var(--paper)} .stepper button{width:44px;height:46px;border:0;background:none;font-size:20px;cursor:pointer;color:var(--ink)} .stepper input{width:56px;height:46px;border:0;text-align:center;background:none;font-family:inherit;font-size:16px;outline:0} .note{font-size:13px;color:var(--ink-soft);margin-top:18px;display:flex;gap:8px;align-items:flex-start} .note svg{width:16px;height:16px;stroke:var(--forest);fill:none;stroke-width:2;flex:none;margin-top:3px} /* ===== request list ===== */ .reqwrap{padding:50px 0 90px;display:grid;grid-template-columns:1.4fr .9fr;gap:46px;align-items:start} .reqlist{border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden} .reqitem{display:grid;grid-template-columns:84px 1fr auto auto;gap:18px;align-items:center;padding:20px;border-bottom:1px solid var(--line)} .reqitem:last-child{border-bottom:0} .reqitem .th{width:84px;height:84px;border-radius:4px;background:radial-gradient(circle at 50% 42%,var(--paper),var(--stone));display:grid;place-items:center} .reqitem .th img{width:64px;height:64px;object-fit:contain} .reqitem h4{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:18px} .reqitem .cat-l{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .reqitem .rm{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:13px;border-bottom:1px solid var(--line)} .reqitem .rm:hover{color:#a23;} .reqform{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:30px} .reqform h3{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:24px;margin-bottom:6px} .reqform p.sub{color:var(--ink-soft);font-size:14px;margin-bottom:22px} .field{margin-bottom:16px} .field label{display:block;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:6px} .field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:2px;background:var(--cream); padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);outline:0;transition:border-color .3s} .field input:focus,.field textarea:focus{border-color:var(--forest)} .reqform .btn-solid{width:100%;text-align:center;margin-top:8px} .reqform .ok{font-size:13px;color:var(--ink-soft);margin-top:14px;text-align:center} @media(max-width:880px){ .headbar{height:70px} .mainnav,.req-link .lbl{display:none} .burger{display:block;order:-1} .split,.cta,.pdp,.reqwrap{grid-template-columns:1fr} .split .media{height:340px} .split .text{padding:60px 34px} .cats,.prods{grid-template-columns:repeat(2,1fr)} .fgrid{grid-template-columns:1fr 1fr} .pdp .gallery{max-width:480px;margin:0 auto} .arts{grid-template-columns:1fr} .contact-info{grid-template-columns:1fr} } /* ===== production additions ===== */ .ph.noimg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px} .noimg-t{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:16px;color:var(--ink-soft);line-height:1.3} .ph.noimg small{font-size:12px;letter-spacing:.1em;color:var(--gold)} .noimg-big{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14%} .noimg-big span{font-family:"Frank Ruhl Libre",serif;font-size:24px;color:var(--ink-soft)} .noimg-big small{letter-spacing:.12em;color:var(--gold)} .added{background:var(--forest)!important;color:var(--cream)!important;border-color:var(--forest)!important} .subgroup{margin-bottom:64px} .subhead{font-weight:500;font-size:26px;margin-bottom:30px;padding-bottom:12px;border-bottom:1px solid var(--line)} .subhead span{color:var(--ink-soft);font-size:17px;font-weight:400} .prose{padding:80px 0 100px} .prose p{font-size:18px;color:#403c33;margin-bottom:18px} .arts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .art{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .art:hover{transform:translateY(-6px);box-shadow:0 30px 50px -34px rgba(80,60,20,.4)} .art .art-top{height:150px} .art .body{padding:24px} .art .body h3{font-weight:500;font-size:20px;line-height:1.3;margin-bottom:8px} .art .body p{color:var(--ink-soft);font-size:14px;margin-bottom:16px} .contact-info{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-content:start} .ci{border:1px solid var(--line);border-radius:6px;background:var(--paper);padding:22px} .ci small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .ci b{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:20px} /* ===== production additions #2 (feedback round) ===== */ /* header: centered cluster (not stretched end-to-end), larger nav */ .headbar{justify-content:center;gap:44px} .brand img{height:56px} .mainnav{font-size:17px;gap:32px} /* white product cards — removes the white-square-on-tan look */ .pcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px; transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .pcard:hover{transform:translateY(-5px);box-shadow:0 26px 46px -30px rgba(80,60,20,.45)} .pcard a.ph,.pcard .ph{background:#fff;margin-bottom:14px;border-radius:4px} .pcard .ph img{padding:16px} .prods{gap:26px} .pdp .gallery{background:#fff;border:1px solid var(--line)} .reqitem .th{background:#fff;border:1px solid var(--line)} /* category photo tiles (replace the disc section) */ .ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ctile{position:relative;display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden; background-size:cover;background-position:center;transition:transform .55s var(--ease),box-shadow .55s var(--ease)} .ctile:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(40,30,10,.6)} .ctile-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,16,.10),rgba(20,25,16,.74))} .ctile-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff;z-index:2} .ctile-in b{font-size:26px;font-weight:500;line-height:1.1} .ctile-in span{font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.85);margin-top:4px} .ctile-in::after{content:"לעיון ←";margin-top:12px;font-size:13px;letter-spacing:.08em;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .ctile:hover .ctile-in::after{opacity:.95;transform:none} /* category + article hero band */ .cat-hero{position:relative;height:380px;display:flex;align-items:flex-end;background-size:cover;background-position:center;overflow:hidden} .cat-hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,16,.26),rgba(20,25,16,.74))} .cat-hero-in{position:relative;z-index:2;color:#fff;max-width:1200px;margin:0 auto;width:100%;padding:0 34px 44px} .cat-hero-in h1{font-weight:500;font-size:clamp(36px,5vw,64px);margin-top:8px} .cat-hero-in p{color:rgba(255,255,255,.88);margin-top:8px;font-size:17px;font-weight:300;max-width:40em} /* article card images */ .art .art-top{background-size:cover;background-position:center} @media(max-width:880px){ .burger{order:0} .ctiles{grid-template-columns:1fr 1fr;gap:12px} .cat-hero{height:300px} } @media(max-width:560px){ .ctiles{grid-template-columns:1fr} } /* ===== production additions #3 (feedback round 3) ===== */ /* refined category filter bar (was plain/Excel-like) */ .toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; margin:8px 0 30px;padding:0 0 22px;border-bottom:1px solid var(--line)} .chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .chips-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-inline-end:6px} .chip{font-size:15px;padding:9px 22px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink); cursor:pointer;transition:background .3s,color .3s,border-color .3s} .chip.active,.chip:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)} .searchbox{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px; padding:11px 20px;min-width:280px;transition:border-color .3s,box-shadow .3s} .searchbox:focus-within{border-color:var(--forest);box-shadow:0 0 0 3px rgba(51,82,58,.08)} .search-ic{width:18px;height:18px;stroke:var(--ink-soft);stroke-width:2;flex:none} .searchbox input{border:0;background:none;outline:0;font-family:inherit;font-size:15px;color:var(--ink);width:100%} /* homepage CTA — fuller content */ .cta-points{list-style:none;margin:8px 0 32px;display:grid;gap:13px} .cta-points li{position:relative;padding-inline-start:28px;color:rgba(247,243,234,.9);font-size:16px;line-height:1.4} .cta-points li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:#cdbb8a;font-weight:700} .cta-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .cta-tel{color:rgba(247,243,234,.85);font-size:15px;border-bottom:1px solid rgba(247,243,234,.4);padding-bottom:2px;transition:opacity .3s} .cta-tel:hover{opacity:.7} /* mobile header: keep logo right + burger left (not centered) */ @media(max-width:880px){ .headbar{justify-content:space-between;gap:10px} } /* ===== production additions #4 ===== */ /* category hero "viewing organic" marker */ .cat-hero-tags{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .cat-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.04em;color:#fff; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);padding:7px 16px;border-radius:999px;backdrop-filter:blur(4px)} .cat-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#8ec06a;box-shadow:0 0 0 3px rgba(142,192,106,.35)} /* contact page */ .contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;padding:54px 34px 100px;align-items:start} .contact-lead{font-size:20px;color:#403c33;margin-bottom:30px;max-width:30em;line-height:1.6} .contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ccard{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s} a.ccard:hover{transform:translateY(-3px);box-shadow:0 22px 42px -28px rgba(80,60,20,.45);border-color:var(--forest)} .cic{width:48px;height:48px;flex:none;border-radius:12px;background:rgba(51,82,58,.08);display:grid;place-items:center} .cic svg{width:23px;height:23px;stroke:var(--forest);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ccard small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px} .ccard b{font-size:16px;font-weight:500;color:var(--ink)} .serve{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)} .serve p{font-size:18px;color:var(--ink);margin-top:8px} @media(max-width:880px){ .contact-wrap{grid-template-columns:1fr;gap:40px} } @media(max-width:520px){ .contact-cards{grid-template-columns:1fr} } /* ===== production additions #5 (post-review fixes) ===== */ /* sticky sub-category jump-nav (long shelf page) */ .subnav{position:sticky;top:84px;z-index:30;display:flex;align-items:center;gap:14px;margin:0 0 30px; padding:12px 0;background:var(--cream);border-bottom:1px solid var(--line)} .subnav-lbl{flex:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .subnav-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px} .subnav-chips a{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink);white-space:nowrap; background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:background .25s,color .25s,border-color .25s} .subnav-chips a:hover{background:var(--forest);color:var(--cream);border-color:var(--forest)} .subnav-chips a i{font-style:normal;font-size:12px;color:var(--ink-soft)} .subnav-chips a:hover i{color:rgba(255,255,255,.8)} .subgroup{scroll-margin-top:150px} @media(max-width:880px){ .subnav{top:70px} .subgroup{scroll-margin-top:128px} .subnav-lbl{display:none} } /* prose: headings + "term — explanation" lists (articles + about) */ .prose-h{font-size:26px;margin:34px 0 12px} .prose-list{list-style:none;margin:6px 0 24px;display:grid;gap:14px} .prose-list li{position:relative;padding-inline-start:24px;font-size:18px;color:#403c33;line-height:1.6} .prose-list li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:8px;height:8px;border-radius:50%;background:var(--gold)} .prose-list li b{font-weight:700;color:var(--ink)} .prose-list li b::after{content:" — ";color:var(--ink-soft);font-weight:400} /* about: lead + pull-quote + figure */ .about-intro{padding:60px 0 6px} .about-lead{font-size:22px;line-height:1.65;color:var(--ink);max-width:34em} .pull{margin:38px 0 6px;padding-inline-start:24px;border-inline-start:3px solid var(--gold); font-size:26px;line-height:1.5;color:var(--forest);font-weight:500;max-width:24em} .about-figure{margin:48px auto;max-width:1100px;padding:0 34px} .about-figure img{width:100%;height:360px;object-fit:cover;border-radius:8px;display:block} .about-figure figcaption{margin-top:12px;text-align:center;font-size:14px;letter-spacing:.04em;color:var(--ink-soft)} /* mobile: stack the product add-to-request button above the stepper (no 3-line wrap) */ @media(max-width:560px){ .qtyrow{flex-direction:column;align-items:stretch;gap:14px} .qtyrow .btn-solid{order:-1;width:100%;text-align:center} .qtyrow .stepper{align-self:flex-start} } /* form success state */ .form-done{text-align:center;padding:34px 12px} .form-done .fd-ic{width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:var(--forest);color:var(--cream); display:grid;place-items:center;font-size:26px} .form-done h3{font-family:"Frank Ruhl Libre",serif;font-weight:500;font-size:26px;margin-bottom:8px} .form-done p{color:var(--ink-soft);font-size:15px} /* ===== production additions #6 (feedback round R2) ===== */ /* catalog page: hero band + stat strip (was an empty text header) */ .catalog-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0} .cstat{text-align:center} .cstat b{display:block;font-size:30px;font-weight:500;color:var(--forest);line-height:1.1} .cstat span{font-size:13px;letter-spacing:.04em;color:var(--ink-soft)} @media(max-width:680px){ .catalog-strip{grid-template-columns:1fr 1fr;gap:18px} } /* contact: wide address card + feature band */ .ccard-wide{grid-column:1/-1} .contact-band{margin-top:8px} /* about: stats strip + "what we do" feature cards */ .about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:8px 0 6px; border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0} .about-stats .stat{text-align:center} .about-stats .stat b{display:block;font-size:40px;font-weight:500;color:var(--forest);line-height:1} .about-stats .stat span{font-size:14px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px;display:block} .about-feats-wrap{padding:20px 34px 100px} .about-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px} .afeat{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:32px 28px;text-align:center; transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .afeat:hover{transform:translateY(-5px);box-shadow:0 28px 50px -34px rgba(80,60,20,.42)} .afeat-ic{width:60px;height:60px;margin:0 auto 18px;border-radius:14px;background:rgba(51,82,58,.08);display:grid;place-items:center} .afeat-ic svg{width:30px;height:30px;stroke:var(--forest);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .afeat h3{font-weight:500;font-size:21px;margin-bottom:10px} .afeat p{color:var(--ink-soft);font-size:15px;line-height:1.6} @media(max-width:780px){ .about-stats{grid-template-columns:1fr 1fr;gap:26px} .about-feats{grid-template-columns:1fr;gap:16px} } /* ===== production additions #7 (homepage certifications band) ===== */ .certs{background:var(--forest);padding:62px 0} .certs-in{text-align:center} .certs .label{color:#e7d4a6} .certs h2{color:#fff;font-weight:500;font-size:clamp(24px,3.2vw,34px);margin:12px 0 34px} .cert-row{display:flex;gap:32px;justify-content:center;align-items:center;flex-wrap:wrap} .cert-row img{width:124px;height:124px;border-radius:50%;object-fit:contain; filter:drop-shadow(0 16px 30px rgba(0,0,0,.32));transition:transform .5s var(--ease)} .cert-row img:hover{transform:translateY(-6px)} @media(max-width:640px){ .cert-row{gap:18px} .cert-row img{width:92px;height:92px} } /* ========================================================================= PHONE PASS — 2026-08-04 The stylesheet had exactly ONE breakpoint (880px), so a 390px phone was being served the tablet layout. Everything below is additive and scoped to small screens. Desktop and tablet are untouched. ========================================================================= */ /* --- 1. BUG FIX: the product-page photo rendered at 0x0 on every phone. ----- `.pdp .gallery{margin:0 auto}` (line ~199) makes the grid item shrink-to-fit instead of stretching to the column. Its only child is position:absolute, so there was no in-flow content to give it width — the box collapsed to 2px (just its borders) and the product image was invisible. */ @media(max-width:880px){ .pdp .gallery{width:100%} } /* --- 2. Hero legibility. The overlay gradient falls to 12% opacity at 38% height — exactly where the headline sits on a tall phone screen — so white text landed on bright sky. Deepen the overlay and size the type for a narrow viewport. */ @media(max-width:700px){ .hero{height:76vh;min-height:500px} .hero::after{background:linear-gradient(rgba(22,28,18,.50) 0%,rgba(22,28,18,.46) 45%,rgba(22,28,18,.88) 100%)} .hero-in{padding-bottom:7vh;padding-inline:8px} .hero .label{font-size:11px;letter-spacing:.22em} .hero h1{font-size:clamp(31px,8.4vw,42px);line-height:1.14;margin-top:16px} .hero p{font-size:16px;margin:16px auto 26px} .hero-cta{flex-direction:column;gap:14px} .hero-cta>*{width:100%;max-width:264px;text-align:center} } /* --- 3. Product grid. 2-up on a 390px screen gave 141px cards whose names wrapped to four lines. One horizontal card per row instead: bigger photo, readable name, and a full-width tap target. Explicit grid placement so no HTML change is needed. */ @media(max-width:560px){ .prods{grid-template-columns:1fr;gap:14px} .pcard{display:grid;grid-template-columns:104px minmax(0,1fr); grid-template-rows:auto auto auto auto;column-gap:14px; text-align:right;padding:12px;align-content:center} .pcard a.ph,.pcard .ph{grid-column:1;grid-row:1/5;width:104px;margin:0;align-self:center} .pcard .ph img{padding:8px} .pcard .cat-l{grid-column:2;grid-row:1;font-size:10px;letter-spacing:.12em;align-self:end} .pcard h3{grid-column:2;grid-row:2;font-size:16px;margin:3px 0;line-height:1.25} .pcard .pack{grid-column:2;grid-row:3;font-size:12px} .pcard .add{grid-column:2;grid-row:4;width:100%;margin-top:10px;padding:9px 0; text-align:center;border:1px solid var(--line);border-radius:4px;font-size:13px} .pcard:hover{transform:none;box-shadow:none} } /* --- 4. Sub-category jump-nav: chips were clipped mid-word behind a visible scrollbar. Hide the bar, shrink the chips. */ @media(max-width:700px){ .subnav-chips{scrollbar-width:none} .subnav-chips::-webkit-scrollbar{display:none} .subnav-chips a{font-size:13px;padding:7px 12px} .subhead{font-size:21px;margin-bottom:20px} .subgroup{margin-bottom:40px} } /* --- 5. Product page: the 3-column spec row (flex, 30px gap) wrapped values mid-word on a narrow screen. */ @media(max-width:560px){ .pdp{gap:24px;padding:20px 0 60px} .pdp .specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0} .pdp .specs .s small{font-size:10px;letter-spacing:.06em} .pdp .specs .s b{font-size:16px} .pdp .info h1{font-size:clamp(24px,6.6vw,31px)} .pdp .desc{font-size:16px} } /* --- 6. Gutters: 34px a side spends 17% of a 390px screen on empty margin. */ @media(max-width:560px){ .wrap{padding-inline:18px} .cats-sec{padding:60px 0} .prose{padding:50px 0 60px} .prose p{font-size:16px} } /* --- 7. Motion safety net. `.reveal` is opacity:0 until JS adds `.in`. Anyone browsing with reduced motion turned on (common on phones) should get the content immediately, not a fade. */ @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* --- 8. Hero: trim dead sky above the headline on phones. */ @media(max-width:700px){ .hero{height:70vh;min-height:470px} } /* --- 9. Mobile hero image (2026-08-04). The