/* ════════════════════════════════════════════════════════════════ ARETA — Service cards (Liquid-Glass bento). DROP-IN, ADDITIVE. ---------------------------------------------------------------- • Scoped to .areta-bento / .cap only — NO global resets, NO body, NO `*`, and it does NOT touch your existing `.reveal` system. • Every colour token has a built-in fallback, so it works even if a custom property is missing. If your site already defines these, they win automatically: --em-gradient --muted --ink --glass-bg-light --ease-apple --font-display --font-body --font-mono • Each service section supplies one `--c` family. Original service glyphs stay bare: no tile, circle, border or decorative container around them. • Entrance animation is handled by the existing `.reveal` system. ════════════════════════════════════════════════════════════════ */ .areta-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;} /* ─── Liquid-Glass tile ─── */ .areta-bento .cap{ --c:#2563EB;grid-column:span 2;position:relative;border-radius:22px;padding:22px;overflow:hidden;isolation:isolate; display:flex;flex-direction:column; /* Frosted SOLID glass — no backdrop-filter. The original had blur(18px) on 20 cards + blur(6px) on 60 tag pills = 80 live backdrop layers, each re-sampling + repainting every scroll frame (the lag/stutter). Over a light section a near-opaque white tint reads identically and paints once. */ background: linear-gradient(90deg,var(--c),color-mix(in oklab,var(--c) 58%,#ffffff),transparent) top right/72px 3px no-repeat, radial-gradient(130% 90% at 100% 0%,color-mix(in oklab,var(--c) 13%,transparent),transparent 58%), var(--glass-bg-light-solid,rgba(255,255,255,.88)); border:1px solid color-mix(in oklab,var(--c) 13%,rgba(255,255,255,.72)); box-shadow:0 1px 0 rgba(255,255,255,.96) inset,0 -1px 0 rgba(20,29,54,.035) inset, 0 24px 54px -38px rgba(16,20,36,.62),0 8px 20px -18px color-mix(in oklab,var(--c) 42%,transparent); transform:translateZ(0); /* own GPU layer → hover/scroll composite, not repaint */ transition:transform .42s var(--ease-apple,cubic-bezier(.22,1,.36,1)),box-shadow .42s,border-color .42s; } .areta-bento .cap.w3{grid-column:span 3;padding:26px;} /* glass rim — bright top-left fading into the accent */ .areta-bento .cap::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3; background:linear-gradient(140deg,rgba(255,255,255,.95),rgba(255,255,255,0) 36%,color-mix(in oklab,var(--c) 40%,transparent)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;} /* sheen sweep on hover — animates transform only (GPU), not inset-inline-start (reflow each frame) */ .areta-bento .cap::after{content:"";position:absolute;top:0;inset-inline-start:-60%;width:55%;height:100%;z-index:4;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-16deg) translateX(0);opacity:0;} .areta-bento .cap:hover::after{opacity:1;will-change:transform,opacity;animation:aretaSheen 1.05s var(--ease-apple,cubic-bezier(.22,1,.36,1));} @keyframes aretaSheen{from{transform:skewX(-16deg) translateX(0);}to{transform:skewX(-16deg) translateX(340%);}} .areta-bento .cap:hover{transform:translateY(-5px);border-color:color-mix(in oklab,var(--c) 30%,rgba(255,255,255,.55)); box-shadow:0 1px 0 rgba(255,255,255,.98) inset,0 -1px 0 rgba(20,29,54,.035) inset, 0 36px 70px -34px color-mix(in oklab,var(--c) 55%,transparent),0 16px 30px -24px rgba(16,20,36,.55);} .areta-bento .cap:focus-within{border-color:color-mix(in oklab,var(--c) 38%,#fff);box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 18%,transparent),0 26px 58px -38px rgba(16,20,36,.6)} /* Original service icon, deliberately unframed. */ .areta-bento .cap .ic{ width:42px;height:42px;display:grid;place-items:center;margin:0 0 17px;padding:0; color:var(--c);background:none;border:0;box-shadow:none;border-radius:0; } .areta-bento .cap .ic svg{display:block;width:38px;height:38px;overflow:visible;stroke:currentColor} .areta-bento .cap.w3 .ic{width:46px;height:46px} .areta-bento .cap.w3 .ic svg{width:42px;height:42px} .areta-bento .cap h3{font-family:var(--font-ui,"Rubik",system-ui,sans-serif);font-weight:700;font-size:clamp(18px,1.55vw,21px);line-height:1.22;margin:0 0 9px;letter-spacing:-.022em;color:var(--ink,#16161a);text-wrap:balance;unicode-bidi:plaintext;} .areta-bento .cap.w3 h3{font-size:clamp(20px,1.7vw,23px);} .areta-bento .cap p{font-family:var(--font-body,"Heebo",system-ui,sans-serif);font-weight:400;color:var(--muted,#6b6b73);font-size:15px;line-height:1.7;letter-spacing:-.008em;margin:0 0 18px;text-wrap:pretty;unicode-bidi:plaintext;} .areta-bento .cap.w3 p{font-size:15.5px;} /* glass keyword chips */ .areta-bento .cap .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;} .areta-bento .cap .tags span{font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-size:11px;letter-spacing:.01em;padding:5px 10px;border-radius:8px; direction:ltr;unicode-bidi:isolate; color:color-mix(in oklab,var(--c) 72%,#000); background:color-mix(in oklab,var(--c) 14%,rgba(255,255,255,.82)); border:1px solid color-mix(in oklab,var(--c) 22%,transparent);} /* ─── responsive ─── */ @media (max-width:900px){.areta-bento{grid-template-columns:repeat(2,1fr);}.areta-bento .cap,.areta-bento .cap.w3{grid-column:span 1;}} /* phones: keep a 2-up GRID (not a stacked list) — compact tiles that read like the desktop bento. Tighter padding/icon/type so two fit cleanly at ~360px. */ @media (max-width:560px){ .areta-bento{grid-template-columns:repeat(2,1fr);gap:12px;} .areta-bento .cap,.areta-bento .cap.w3{grid-column:span 1;padding:15px;border-radius:18px;} .areta-bento .cap .ic,.areta-bento .cap.w3 .ic{width:34px;height:34px;margin-bottom:12px;} .areta-bento .cap .ic svg,.areta-bento .cap.w3 .ic svg{width:32px;height:32px;} .areta-bento .cap h3,.areta-bento .cap.w3 h3{font-size:15.5px;line-height:1.28;} .areta-bento .cap p,.areta-bento .cap.w3 p{font-size:13px;line-height:1.58;margin-bottom:12px;} .areta-bento .cap .tags{gap:5px;} .areta-bento .cap .tags span{font-size:10px;padding:4px 7px;} } @media (max-width:360px){ .areta-bento{grid-template-columns:1fr;} } /* ─── reduced motion ─── */ @media (prefers-reduced-motion:reduce){ .areta-bento .cap,.areta-bento .cap::after{transition:none!important;animation:none!important;} } .deep-section .areta-bento .cap .tags span{ color:color-mix(in oklab,var(--c) 70%,#111827); background:color-mix(in oklab,var(--c) 9%,rgba(255,255,255,.94)); border-color:color-mix(in oklab,var(--c) 24%,rgba(255,255,255,.5)); box-shadow:inset 0 1px 0 rgba(255,255,255,.78) } .areta-bento .cap-demo:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:6px} /* ── Pillar skins (owner, 2026-07-21) ───────────────────────────────────── Each group's cards wear the SAME gradient as its homepage services card (.gsv-build/-growth/-systems/-secure in styles.css) so both pages read as one system. Anatomy cloned from the gsv family: glass rim, top highlight, darkened floor under the body copy, white-alpha tag pills, white glyphs. KEEP the gradient stops in lockstep with styles.css .gsv-*. */ .deep-section .areta-bento .cap{ color:#fff; border-color:rgba(255,255,255,.34); box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.10), 0 24px 54px -38px rgba(16,20,36,.7),0 8px 20px -18px color-mix(in oklab,var(--c) 55%,transparent); } /* The gouache feel of the homepage cards ("צבע שנמרח") is NOT the gradient — it's the fractal-noise grain layered over it (gsv-card::after, overlay blend). The gsv element spends ::after on it; here ::after is the hover sheen, so the same SVG noise rides as the FIRST background layer with background-blend-mode overlay — identical painterly result, no new element. */ #build .areta-bento .cap{--c:#2563EB;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%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)' opacity='.42'/%3E%3C/svg%3E") 0 0/180px, radial-gradient(96% 78% at 84% -8%,rgba(255,255,255,.32),transparent 56%), linear-gradient(180deg,rgba(10,12,38,0) 42%,rgba(10,12,38,.28) 100%), linear-gradient(150deg,#4f8bff 0%,#2563EB 45%,#1436a6 100%); background-blend-mode:overlay,normal,normal,normal} #growth .areta-bento .cap{--c:#fb7a3c;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%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)' opacity='.42'/%3E%3C/svg%3E") 0 0/180px, radial-gradient(96% 78% at 84% -8%,rgba(255,255,255,.32),transparent 56%), linear-gradient(180deg,rgba(58,25,7,0) 38%,rgba(58,25,7,.30) 100%), linear-gradient(150deg,#ffb457 0%,#fb7a3c 46%,#ef4d6b 100%); background-blend-mode:overlay,normal,normal,normal} #systems .areta-bento .cap{--c:#8b5cf6;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%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)' opacity='.42'/%3E%3C/svg%3E") 0 0/180px, radial-gradient(96% 78% at 84% -8%,rgba(255,255,255,.32),transparent 56%), linear-gradient(180deg,rgba(20,10,46,0) 42%,rgba(20,10,46,.28) 100%), linear-gradient(150deg,#b98cff 0%,#8b5cf6 46%,#6d28c9 100%); background-blend-mode:overlay,normal,normal,normal} #secure .areta-bento .cap{--c:#12b981;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%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)' opacity='.42'/%3E%3C/svg%3E") 0 0/180px, radial-gradient(96% 78% at 84% -8%,rgba(255,255,255,.32),transparent 56%), linear-gradient(180deg,rgba(8,43,34,0) 42%,rgba(8,43,34,.30) 100%), linear-gradient(150deg,#37e0a3 0%,#12b981 46%,#0a8f66 100%); background-blend-mode:overlay,normal,normal,normal} /* rim goes white-alpha on gradient (the accent-tinted rim vanished into it) */ .deep-section .areta-bento .cap::before{ background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(255,255,255,.05) 40%,rgba(255,255,255,.28)); } .deep-section .areta-bento .cap h3{color:#fff;text-shadow:0 1px 14px rgba(6,10,24,.35)} .deep-section .areta-bento .cap p{color:rgba(255,255,255,.93);text-shadow:0 1px 10px rgba(6,10,24,.28)} .deep-section .areta-bento .cap .ic{color:#fff} .deep-section .areta-bento .cap .ic svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))} .deep-section .areta-bento .cap .tags span{ color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.20); } .deep-section .areta-bento .cap:hover{border-color:rgba(255,255,255,.5)} .deep-section .areta-bento .cap-demo{color:#fff;text-decoration:underline;text-underline-offset:3px} .deep-section .areta-bento .cap-demo:focus-visible{outline-color:#fff}