/* ========================================================================== Zareh Smart Solutions Fonts are self-hosted, not loaded from Google. A French business embedding Google Fonts transmits visitor IP addresses to a third country on every page load, which German and French rulings have treated as a GDPR breach. Self-hosting removes the issue and the need for a cookie banner. ========================================================================== */ @font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("../fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } :root{ --ink:#0F2140; --ink-80:#3A4C6B; --accent:#4A90D9; --accent-lt:#6BA5E3; --slate:#5A6675; --mist:#F4F6F9; --line:#DDE3EC; --paper:#FFFFFF; /* the identity's one constant: every angled cut in the mark runs at this slope. Reused here for corner cuts and underlines. */ --slant:0.9286; --cut:34px; /* vertical run of a corner cut */ --cut-x:31.6px; /* 34 * 0.9286 */ --track-wide:0.34em; /* the wordmark's signature spacing, for eyebrows */ --track-mid:0.14em; --measure:1180px; --pad:clamp(20px,5vw,48px); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; font-family:"Montserrat",-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.72; color:var(--slate); background:var(--paper); -webkit-font-smoothing:antialiased; } /* ---------- bilingual: driven entirely by , no JS text swapping, so both languages sit in the source and neither depends on scripting --- */ [data-l],[data-lb]{display:none} html[lang="en"] [data-l="en"], html[lang="fr"] [data-l="fr"]{display:inline} html[lang="en"] [data-lb="en"], html[lang="fr"] [data-lb="fr"]{display:block} /* ---------- shared ---------- */ .wrap{max-width:var(--measure); margin:0 auto; padding-inline:var(--pad)} .eyebrow{ font-size:11px; font-weight:600; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent); margin:0 0 18px; } h1,h2,h3{color:var(--ink); font-weight:600; line-height:1.18; margin:0 0 20px} h1{font-size:clamp(30px,4.6vw,52px); letter-spacing:-0.01em} h2{font-size:clamp(24px,3.2vw,36px)} h3{font-size:19px; margin-bottom:10px} p{margin:0 0 18px; max-width:66ch} a{color:var(--accent)} .lede{font-size:clamp(18px,2vw,21px); line-height:1.65; color:var(--ink-80)} section{padding:clamp(64px,9vw,116px) 0} .mist{background:var(--mist)} .btn{ display:inline-block; padding:15px 30px; background:var(--ink); color:#fff; text-decoration:none; font-size:12px; font-weight:600; letter-spacing:var(--track-mid); text-transform:uppercase; clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 14.9px) 100%,0 100%); transition:background .18s ease; } .btn:hover,.btn:focus-visible{background:var(--accent)} .btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)} .btn.ghost:hover,.btn.ghost:focus-visible{background:var(--ink); color:#fff; box-shadow:none} .btn.light{background:#fff; color:var(--ink)} .btn.light:hover,.btn.light:focus-visible{background:var(--accent); color:#fff} :focus-visible{outline:2px solid var(--accent); outline-offset:3px} /* ---------- header ---------- */ .site-head{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); } .head-in{display:flex; align-items:center; gap:26px; height:76px} .head-in .logo{display:block; margin-right:auto} .head-in .logo img{display:block; height:38px; width:auto} .nav{display:flex; gap:26px; align-items:center} .nav a{ position:relative; color:var(--ink); text-decoration:none; font-size:12px; font-weight:600; letter-spacing:var(--track-mid); text-transform:uppercase; padding:6px 0; } /* the underline is skewed to the identity's angle */ .nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0) skewX(-42.9deg); transform-origin:left; transition:transform .2s ease; } .nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{ transform:scaleX(1) skewX(-42.9deg); } .lang{display:flex; gap:2px; align-items:center; font-size:11px; font-weight:600; letter-spacing:.08em} .lang button{ border:0; background:none; cursor:pointer; padding:7px 9px; color:var(--slate); font:inherit; letter-spacing:inherit; } .lang button[aria-pressed="true"]{color:var(--ink); background:var(--mist)} .lang span{color:var(--line)} .burger{display:none; border:0; background:none; cursor:pointer; padding:10px; margin-right:-10px} .burger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0} @media (max-width:860px){ .burger{display:block; order:3} .nav{ display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px var(--pad) 22px; } .nav.open{display:flex} .nav a{padding:13px 0; width:100%} } /* ---------- hero ---------- */ .hero{ position:relative; overflow:hidden; background:var(--ink); color:#fff; padding:clamp(70px,10vw,120px) 0 clamp(60px,8vw,96px); } .hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 78% 18%, var(--wash,rgba(74,144,217,.30)), transparent 62%); transition:background .7s ease; } .hero .wrap{position:relative} .hero h1{color:#fff; max-width:16ch} .hero .eyebrow{color:var(--accent-lt)} .hero p{color:#C3CEDE; max-width:52ch} .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,72px); align-items:center} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} } /* keypad — the signature element. An engraved scene keypad, the object he programmes for a living, used as the page's own control. */ .keypad{ background:linear-gradient(#16294B,#101F3B); border:1px solid rgba(255,255,255,.10); border-radius:3px; padding:14px; width:100%; max-width:310px; box-shadow:0 26px 60px -28px rgba(0,0,0,.85); } .keypad-label{ font-size:9px; letter-spacing:.30em; text-transform:uppercase; color:rgba(255,255,255,.34); padding:4px 8px 12px; } .keypad button{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:rgba(255,255,255,.035); border:0; border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.80); font:inherit; font-size:12px; font-weight:600; letter-spacing:.20em; text-transform:uppercase; padding:16px 14px; cursor:pointer; transition:background .18s ease,color .18s ease; } .keypad button:first-of-type{border-top:0} .keypad button:hover{background:rgba(255,255,255,.07); color:#fff} .keypad button[aria-pressed="true"]{color:#fff; background:rgba(74,144,217,.16)} .led{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.16); flex:0 0 6px; transition:background .18s ease,box-shadow .18s ease; } .keypad button[aria-pressed="true"] .led{ background:var(--accent-lt); box-shadow:0 0 10px 1px var(--accent); } .scene-note{ min-height:3.4em; margin-top:22px; font-size:14px; line-height:1.7; color:#9FB2CC; border-left:2px solid rgba(74,144,217,.45); padding-left:16px; } /* ---------- cards with a corner cut at the identity's angle ---------- */ .grid{display:grid; gap:22px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} @media (max-width:880px){ .grid-3,.grid-2{grid-template-columns:1fr} } .card{ background:#fff; border:1px solid var(--line); padding:34px 30px 32px; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)), calc(100% - var(--cut-x)) 100%,0 100%); } .card.on-white{background:var(--mist); border-color:transparent} .card p:last-child{margin-bottom:0} .card .num{ font-size:11px; font-weight:600; letter-spacing:var(--track-mid); color:var(--accent); display:block; margin-bottom:14px; } /* ---------- plain lists ---------- */ .ticks{list-style:none; margin:0; padding:0} .ticks li{position:relative; padding:9px 0 9px 24px; border-bottom:1px solid var(--line)} .ticks li::before{ content:""; position:absolute; left:0; top:19px; width:9px; height:2px; background:var(--accent); transform:skewX(-42.9deg); } .ticks li:last-child{border-bottom:0} .platforms{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; list-style:none} .platforms li{ font-size:12px; font-weight:600; letter-spacing:var(--track-mid); text-transform:uppercase; color:var(--ink); background:#fff; border:1px solid var(--line); padding:11px 18px; } .langs{display:flex; flex-wrap:wrap; gap:0; margin:0; padding:0; list-style:none} .langs li{ font-size:clamp(15px,2vw,19px); font-weight:600; color:var(--ink); letter-spacing:.02em; padding:8px 0; } .langs li:not(:last-child)::after{content:"·"; color:var(--accent); margin:0 14px} /* ---------- contact ---------- */ .contact-list{list-style:none; margin:0; padding:0} .contact-list li{padding:16px 0; border-bottom:1px solid var(--line)} .contact-list .k{ display:block; font-size:10px; font-weight:600; letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--accent); margin-bottom:5px; } .contact-list .v{font-size:18px; color:var(--ink); text-decoration:none; font-weight:500} .contact-list a.v:hover{color:var(--accent)} /* ---------- cta band ---------- */ .band{background:var(--ink); color:#fff} .band h2{color:#fff} .band p{color:#C3CEDE} /* ---------- footer ---------- */ .site-foot{background:var(--ink); color:#8FA2BC; padding:64px 0 40px; font-size:13px} .site-foot a{color:#C3CEDE; text-decoration:none} .site-foot a:hover{color:#fff} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start} @media (max-width:800px){ .foot-grid{grid-template-columns:1fr; gap:30px} } .site-foot img{height:44px; width:auto; display:block; margin-bottom:18px} .foot-h{ font-size:10px; letter-spacing:var(--track-wide); text-transform:uppercase; color:#5F7391; margin:0 0 14px; } .foot-links{list-style:none; margin:0; padding:0} .foot-links li{padding:5px 0} .rule{border-top:1px solid rgba(255,255,255,.10); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:12px} /* ---------- legal page ---------- */ .legal h2{font-size:20px; margin-top:44px} .legal p{font-size:15px; line-height:1.75} .todo{background:#FFF6E5; border-left:3px solid #E0A431; padding:16px 20px; font-size:14px; color:#6B5321}