/* contact.css - the "צרו קשר" page. Auto-loaded by the SDK for ?content=contact only (css/.css convention),which is what makes the reskin below safe:none of it reaches any other page. Sliced from pages_png/צור קשר.png. Comp canvas 2666px,so the same fluid rule as the rest of the site:a comp px N becomes clamp(MOBILE_MIN,(N/26.66)vw,Npx). Tokens,.wrap, .title--underline and .reveal come from css.css. Measurements this file is built on,in comp px: hero band y 0-747,full-bleed photo (no veil - see below) title ink y 253-356,x 932-1397 (466 wide incl. the tan full stop) lead 3 lines,ink tops 403 / 489 / 576 (pitch 86.5),right edge 1399 form band y 748-1783,white title ink y 837-913,812 wide,centred underline y 937-940,x 1251-1415 -> 166x4,#cea763,centred sub 2 lines,ink tops 1015 / 1082 (pitch 67),995 and 768 wide fields 3 x 537 wide,gap 26,y 1175-1252 (78 tall) textarea y 1274-1568 (295 tall),full 1666 width button y 1614-1692 (79 tall),383 wide,centred,#cea763 fill leaf art left x 0-498 y 872-1783 ; right x 2168-2665 y 1249-1783 */ /* ---- k1 hero ---- Unlike /articles,there is NO veil here. That was tested rather than assumed:the comp's hero band differs from the raw source photograph by a mean absolute 0.8 at the inline-end edge,so the soft cream the title sits on is the photograph's own sunlit wall,not a gradient laid over it. One flat background image,as on /about. contact-hero.webp is pre-cropped to the sub-rect of the source that lands inside the comp's 2666x747 band; the offset was found by cross-correlation against the comp (mean absolute difference 10.80 -> 4.03),so plain `cover` reproduces the placement. */ .hero--contact{aspect-ratio:2666/747; background:#ece2d8 url(../../../design/default/css/../files/contact-hero.webp) center/cover no-repeat; color:var(--c-navy)} /* The nav is white-on-dark everywhere else; here it crosses a cream-lit room,so every piece of it flips to navy. The wordmark itself is a separate asset (parts/nav.php reads $GLOBALS['nav_logo']) because it is two-tone and no filter recolours it correctly. */ .hero--contact .nav__links li + li::before{color:rgba(31,56,101,.45)} .hero--contact .nav__toggle span{background:var(--c-navy)} /* The caption's inline-start edge sits at comp x=1400. Measured from the wrap's BORDER box (420..2246),not its content edge:this padding REPLACES the wrap's own gutter rather than adding to it,so it is 2246 - 1400 = 846 in principle and 843 as rendered. Padding rather than max-width,because .hero__caption is also .wrap - shrinking .wrap would fight its own margin-inline:auto and re-centre the block. Text stays start-aligned: flush right,ragged left. The inline-END padding is halved. Nothing is anchored to that edge - the copy is ragged there - so the only thing it controls is where lines wrap,and at the full gutter the box came out 903px against the 904 the comp's third line needs,breaking a 3-line lead onto 4. Probing the live text (a Range walked over each character,which is the only measurement that survived:canvas measureText silently fell back to another face,and .hero__lead carries overflow-wrap:anywhere,so no word-greedy model predicts these breaks) the 3-line result holds from 904px to about 1025px. Half a gutter puts the box at 943,near the middle of that plateau rather than one pixel inside its edge. */ .hero--contact .hero__caption{padding-inline-start:clamp(var(--gutter),31.62vw,843px); padding-inline-end:calc(var(--gutter) / 2); padding-block:0; margin-block-start:-1.238vw; text-align:start} .hero--contact .hero__title{color:var(--c-navy); font-size:clamp(32px,5.064vw,135px); font-weight:700; line-height:1.1; margin-block-end:clamp(10px,1.163vw,31px)} /* Tan,not the gold the /articles hero uses - measured off the glyph at #cea763. */ .hero--contact .hero__dot{color:var(--c-tan)} .hero--contact .hero__lead{max-width:none; color:var(--c-navy); font-weight:300; font-size:clamp(20px,2.689vw,71.7px); line-height:1.206} /* ---- s4 the contact section,reskinned ---- Same component as every other page ends with (parts/contact.php); only the surface changes. Everything below overrides a rule in css.css and nothing else - the layout,the field order,the honeypot and the labels all stay where they are. The leaf line-art is painted as two background images rather than shipped as elements: it is decorative,it bleeds off both edges,and both pieces are anchored to the section's bottom corners exactly as the comp clips them. Physical left/right keywords are correct here (unlike the rest of the sheet's logical properties) because the art is drawn for those physical corners,not for the reading direction. */ .contact{background: url(../../../design/default/css/../files/contact-leaf-left.webp) left bottom / 18.72vw auto no-repeat, url(../../../design/default/css/../files/contact-leaf-right.webp) right bottom / 18.68vw auto no-repeat, #fff; color:var(--c-navy); padding-block:clamp(36px,2.81vw,75px) clamp(40px,3.41vw,91px)} /* css.css sets the underline 90px wide and gold; this comp draws it 166 and tan,the same rule the other inner pages use. Centred here,so the global margin-inline:auto stands. */ .contact__title{color:var(--c-navy); padding-bottom:clamp(12px,1.28vw,34px); margin-bottom:clamp(22px,2.251vw,60px)} .contact__title.title--underline::after{width:clamp(60px,6.23vw,166px); background:var(--c-tan)} /* 1.34,not the global 1.4:the comp sets these two lines 67px apart at 50px type. */ .contact__sub{color:var(--c-navy); opacity:1; line-height:1.34; margin-block-end:clamp(18px,1.575vw,42px)} /* Fields:outlined and transparent instead of filled white. The border reads as rgba(31,56,101,.69) against white in the comp - solving the blend per channel gave 0.692 / 0.693 / 0.695,consistent enough to be that one colour. */ .contact__form{gap:clamp(10px,.83vw,22px)} .contact__row{gap:clamp(10px,.98vw,26px)} .contact__form input, .contact__form textarea{background:transparent; border:1px solid rgba(31,56,101,.69); color:var(--c-navy); padding-inline:clamp(12px,.83vw,22px)} .contact__form input::placeholder, .contact__form textarea::placeholder{color:var(--c-navy); opacity:.85} /* Explicit block-size rather than padding + line-height,for two reasons the comp made visible. Chrome sizes an 's content box from the font's NORMAL line box (54.6px at this type size) and ignores the line-height:1 css.css sets,so padding-derived height came out 91 against the comp's 78 - and the amount of the error is a browser detail,not a design one. And the textarea carries rows="5" from the shared markup,whose intrinsic height (309) beats any min-height,so min-height could not pull it to the comp's 295. Fixing the box directly is both exact and browser-independent. */ .contact__form input{block-size:clamp(46px,2.926vw,78px)} .contact__form textarea{block-size:clamp(150px,11.07vw,295px); min-height:0} .contact__form input:focus-visible, .contact__form textarea:focus-visible{outline:3px solid var(--c-tan); outline-offset:2px} /* The button is tan-on-white here rather than the shared gold. 385x79 in the comp; the label measures 268.8 wide at 32px,so 58 of inline padding lands it on 385. */ .contact .btn-cta{background:var(--c-tan); color:#fff; margin-block-start:clamp(8px,.90vw,24px); font-size:clamp(16px,1.20vw,32px); padding:clamp(11px,.79vw,21px) clamp(22px,2.176vw,58px)} .contact .btn-cta:hover{background:#bd9455} /* ---- narrow screens ---- The base is fluid,so only genuine layout shifts belong here. */ @media (max-width:900px){ /* The 3.57 hero ratio collapses to ~105px at phone width,far too short for the nav plus a title and a three-line lead. Release it and let the content set the height. The photo is pinned to the block-start so the sunlit wall - the only part light enough to carry navy text - stays behind the caption. NOT display:flex:the