/* ========================================================================== Dirot.io homepage — candidate 2026-08-08 Static reimplementation of Yael's approved responsive design (Homepage_Design_2.zip sha256 1970d821… + approved PNG board sha256 31b9503b…). All numeric values below are taken from the design source (imports/index.tsx + src/index.css) and cross-checked against the approved PNG board at 1440/1454. LAYOUT DIRECTION NOTE — the document is dir="rtl" (Hebrew text, preserved from production). The approved board lays its ROWS out left-to-right (Shmuel card leftmost, footer logo leftmost, nav CTA leftmost). Those specific row containers are therefore direction:ltr with their Hebrew text nodes reset to rtl, exactly as the design source does. Flagged for owner confirmation. FONTS — loaded in index.html through the existing Dirot platform mechanism (the same fonts.googleapis.com/css2 + display=swap endpoint that /glilyam/index.html already uses for Heebo): Heebo 300-800 body copy, sub-heads, cards, form, footer Assistant 600/700/800 design display headings (hero H1, intro, sections) Playfair Display 400 the 01-04 service numerals only DM Sans and Cormorant Garamond are deliberately NOT loaded - see STOP-2-REPORT section on fonts for the exact visible-text evidence and the reasoning. ========================================================================== */ :root { --blue: #3A61F4; --blue-dark: #1a4db2; --navy: #12213F; --ink: #1f2231; --muted: #606680; --tint: #f5f7fe; --tint-faint: rgba(58, 97, 244, 0.05); --line: #e5e8ed; --white: #fff; --nav-h: 90px; --nav-h-tablet: 70px; --nav-h-mobile: 64px; --shell: 1440px; --gut: 80px; --font-body: 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Assistant', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-num: 'Playfair Display', Georgia, 'Times New Roman', serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); color: var(--navy); background: var(--white); direction: rtl; line-height: 1.5; overflow-x: hidden; /* RTL safety net; verified unnecessary at every breakpoint */ } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } svg { display: block; } #projects, #services, #about, #contact { scroll-margin-top: 110px; } @media (max-width: 768px) { #projects, #services, #about, #contact { scroll-margin-top: 112px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ========================================================================== SCROLL BUILD — progressive reveal Progressive enhancement: the hidden state applies ONLY under .reveal-on, which JS adds to before observing. With JS disabled or broken every element stays at its normal opacity/position, so content is never dependent on script execution. Only opacity and transform animate — no property here affects layout, so the initial and final states occupy identical space (no CLS). ========================================================================== */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--reveal-delay, 0ms); } .reveal-on [data-reveal].is-revealed { opacity: 1; transform: none; } /* Keyboard focus must never land on something still fading in: a focus-triggered reveal skips both the stagger delay and the transition entirely. */ .reveal-on [data-reveal].is-focus-revealed { transition-delay: 0ms !important; transition-duration: 0ms !important; } /* Cards get an extra, very small settle on the image only. */ .reveal-on .card[data-reveal] .card-media img { transform: scale(1.015); transition: transform .9s cubic-bezier(.22, 1, .36, 1); } .reveal-on .card[data-reveal].is-revealed .card-media img { transform: scale(1); } @media (max-width: 768px) { /* Shorter travel and a quicker settle so mobile never feels like waiting. */ .reveal-on [data-reveal] { transform: translateY(18px); transition-duration: .56s; } } @media (prefers-reduced-motion: reduce) { /* Everything visible immediately: no opacity ramp, no transform, no delay. */ .reveal-on [data-reveal], .reveal-on [data-reveal].is-revealed, .reveal-on .card[data-reveal] .card-media img { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0ms !important; } } /* arrow-right glyph, mirrored to point left (design: -scale-y-100 rotate-180) */ .arrow { width: 23.335px; height: 23.335px; transform: scaleX(-1); flex: 0 0 auto; } /* ============================== LOGO ============================== */ .logo { display: inline-flex; align-items: center; gap: 11.325px; direction: ltr; } .logo-tag { font-size: 9px; font-weight: 600; letter-spacing: 2px; line-height: 1.35; text-transform: uppercase; color: #555; white-space: nowrap; text-align: left; } /* Footer lockup is the same mark at 1.884x (design DirotLogo1 / LogoTextContainer1): tag 16.956px tracking 3.768px, mark 93.638x112, gap 21.336px. */ .logo-tag--blue { color: var(--blue); font-size: 16.956px; letter-spacing: 3.768px; } .foot-logo { gap: 21.336px; } .foot-logo .logo-mark { width: 93.638px; height: 112px; } .foot-logo .logo-bldg { left: 20.59px; width: 50.872px; height: 75.357px; } .foot-logo .logo-word { top: 88.91px; width: 93.638px; height: 23.089px; } .logo-mark { position: relative; display: block; width: 49.702px; height: 59.445px; flex: 0 0 auto; } .logo-bldg { position: absolute; left: 10.93px; top: 0; width: 27.001px; height: 39.998px; } .logo-word { position: absolute; left: 0; top: 47.19px; width: 49.702px; height: 12.255px; } /* ============================== NAVIGATION ============================== */ .nav { position: sticky; top: 0; z-index: 50; background: var(--white); height: var(--nav-h); width: 100%; border-bottom: 1px solid var(--line); } .nav-inner { direction: ltr; /* board order: CTA · menu · logo */ position: relative; display: flex; align-items: center; height: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 50px; } .nav-cta { order: 1; margin-right: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 131px; padding: 14px 28px; border: 2px solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; direction: rtl; transition: background .15s, color .15s; } .nav-cta:hover { background: var(--blue); color: var(--white); } .nav-menu { order: 2; direction: rtl; display: flex; align-items: center; gap: 32px; } .nav-link { font-size: 16px; font-weight: 500; letter-spacing: .5px; color: #000; white-space: nowrap; padding-bottom: 10px; border-bottom: 5px solid transparent; } .nav-link:hover { color: var(--blue); } .nav-link.is-active { color: var(--blue); font-weight: 700; border-bottom-color: var(--blue); } .nav-logo { order: 3; margin-left: 56px; } .mobile-menu-wrapper { display: none; } .nav-burger { order: 4; background: none; border: 0; cursor: pointer; /* 44x44 hit area (accessible touch target); the drawn glyph stays 26x22 */ width: 44px; height: 44px; padding: 11px 9px; display: flex; flex-direction: column; justify-content: space-between; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--navy); border-radius: 2px; } .mobile-menu { display: none; position: absolute; inset-inline: 0; top: var(--nav-h-mobile); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 12px 28px rgba(18, 33, 63, .10); padding: 8px 20px 16px; flex-direction: column; } .mobile-menu[hidden] { display: none; } .mobile-link { min-height: 48px; display: flex; align-items: center; padding: 14px 0; font-size: 16px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--line); } .mobile-link:last-child { border-bottom: 0; } .mobile-link.is-active { color: var(--blue); } /* ================================= HERO ================================= */ /* design: HeroSection 780x640 (image, left) + HeroContent 674 wide (right) */ .hero { direction: ltr; display: flex; align-items: stretch; width: 100%; max-width: var(--shell); margin-inline: auto; } .hero-media { flex: 0 0 53.65%; height: 640px; overflow: hidden; } /* 780 / 1454 */ .hero-media img { width: 123.08%; max-width: none; height: 100%; object-fit: cover; object-position: left center; } .hero-content { direction: rtl; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; text-align: right; color: var(--navy); /* design px-53. The RIGHT (inline-start) padding is design-critical - it sets the text edge at 53px, matching the board. The LEFT padding is empty space, so it is reduced to give the design's own 72px line the room it needs below the board's 1454px canvas. Nothing visible moves. */ padding-block: 9px; padding-inline-start: 53px; padding-inline-end: 20px; } /* design: Assistant Bold 72px / 1.05 (imports/index.tsx HeroContent). Measured: that line is exactly 568.0px in Assistant 700 @72px - identical to the design's own inner box (674 - 2x53) at the board's 1454px canvas. It therefore renders on the design's two lines from 1383px up. Below that the box is genuinely too narrow for 72px, so one step keeps the two-line composition. */ /* Fluid desktop ramp replacing the old abrupt 54px -> 72px step at 1382px. Derived from the hero box: available inner width = 0.4635*vw - 73px, and the line "Dirot.io שיווק נדל״ן" needs 7.889 x font-size in Assistant 700. The clamp is calibrated to 54px at 1101px and the design's 72px at 1440px, so the line stays on the design's TWO lines across the whole desktop range with headroom at both ends. */ .hero-content h1 { font-family: var(--font-display); font-size: clamp(54px, calc(5.31vw - 4.46px), 72px); font-weight: 700; line-height: 1.05; } .hero-sub { font-size: 26px; font-weight: 700; line-height: 1.58; } /* ================================ INTRO ================================= */ .intro { background: var(--white); padding: 32px var(--gut) 54px; } .intro-inner { max-width: 1280px; margin: 0 auto; text-align: center; } .eyebrow { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); } .eyebrow-en { font-size: 24px; } .intro-title { font-family: var(--font-display); font-size: 60px; font-weight: 800; line-height: 1.15; color: var(--navy); margin-top: 16px; } .intro-body { font-size: 20px; font-weight: 500; line-height: 1.58; color: var(--ink); margin-top: 8px; } /* =============================== PROJECTS =============================== */ .projects { background: var(--tint-faint); padding: 32px var(--gut) 120px; } .projects-inner { max-width: 1280px; margin: 0 auto; } /* board: "פרוייקטים נוספים" on the left, section title on the right */ .projects-head { direction: ltr; display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; } .projects-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); white-space: nowrap; } .projects-more:hover { color: var(--blue-dark); } .projects-title-wrap { direction: rtl; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .section-title { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1.15; color: var(--navy); text-align: right; } .title-rule { display: block; width: 98.934px; height: 5px; background: var(--blue); } /* Four-project editorial grid: 2 equal columns, LTR so DOM order = physical order (Shmuel, Hadassah, Galil Yam, Ben Yehuda 47 read top-left -> bottom-right). One uniform height keeps the 2x2 balanced; a four-card masonry reads as broken rather than deliberate, and the imagery stays large at ~624px per card. */ .cards { direction: ltr; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; } .card { position: relative; min-width: 0; overflow: hidden; display: block; background: var(--white); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18, 33, 63, .14); } /* one height for the whole grid; (0,2,0) beats the per-project modifiers */ .cards > .card { height: 430px; } .card--galil { border: 1px solid rgba(18, 33, 63, .08); } .card-media { position: absolute; inset: 0; display: block; overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; } /* Design gradient, ramp started earlier. The 2x2 cards are wider and shorter than the old 3-across ones, so the crop puts the "הרצליה" kicker over bright sky on some photos and it lost contrast. The endpoint is unchanged (solid #000 at 88.197%, the design's black bar); only the fade begins higher so the whole text block sits on a scrim. */ .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(102, 102, 102, 0) 56%, rgba(0, 0, 0, .34) 70%, rgba(0, 0, 0, .70) 82%, #000 88.197%); } .tag { position: absolute; left: 16px; top: 16px; /* physical left, per design */ background: var(--blue); color: var(--white); font-size: 17.509px; font-weight: 700; letter-spacing: .7959px; line-height: 1; padding: 9.55px 19.101px; direction: rtl; } .card-text { direction: ltr; /* block hugs the card's left edge */ position: absolute; left: 0; bottom: 8px; width: 353px; max-width: 100%; height: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 23px 22px; color: var(--white); text-shadow: 0 16px 4px rgba(0, 0, 0, .25); } .card-region { font-size: 28px; font-weight: 700; white-space: nowrap; } .card-title { font-size: 24px; font-weight: 400; white-space: nowrap; } /* =============================== SERVICES =============================== */ .services { background: var(--white); padding: 64px var(--gut) 72px; } .services-inner { max-width: 1296px; margin: 0 auto; } .services-title { font-family: var(--font-display); font-size: 48px; font-weight: 800; line-height: 1.15; color: var(--navy); text-align: center; margin-bottom: 56px; } /* Source order is semantic 01->04. direction:rtl places the first child (01) at the RIGHT, which reproduces the approved desktop appearance (reading 01,02,03,04 from the right) without reversing the DOM. The column layout below is unaffected by direction, so mobile stacks 01..04 top-to-bottom from the same source order. */ .steps { direction: rtl; display: flex; justify-content: center; gap: 32px; list-style: none; } .step { direction: rtl; width: 300px; flex: 0 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; padding: 32px; text-align: right; } /* design: Playfair Display Regular 67px, rgba(58,97,244,.5) */ .step-num { font-family: var(--font-num); font-size: 67px; font-weight: 400; line-height: 1; color: rgba(58, 97, 244, .5); } .step-title { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); } .step-body { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--muted); white-space: pre-wrap; } .step-icon { align-self: center; display: block; width: 97.793px; height: 95.999px; } .step-icon img { width: 100%; height: 100%; object-fit: contain; } /* ================================ ABOUT ================================= */ .about { background: var(--tint); padding: 64px var(--gut) 56px; } .about-inner { max-width: 1280px; margin: 0 auto; } .about-title { font-family: var(--font-display); font-size: 48px; font-weight: 600; line-height: 1.25; color: var(--navy); text-align: center; margin-bottom: 13px; } .about-body { font-size: 24px; font-weight: 400; line-height: 1.4; color: var(--navy); text-align: right; padding: 48px; } /* =============================== CONTACT ================================ */ .contact { background: var(--white); padding: 42px var(--gut); } .contact-card { width: 978px; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 23px; padding: 25px 48px; border: 1px solid var(--blue); background: var(--white); } .contact-head { display: flex; flex-direction: column; align-items: center; gap: 8px; } .contact-title { font-size: 26px; font-weight: 700; line-height: 1.58; color: var(--blue); text-align: center; } .contact-sub { font-size: 15px; font-weight: 400; color: var(--ink); text-align: center; } .field { position: relative; } .field-row { direction: ltr; display: flex; gap: 20px; } /* email left, phone right */ .field-row .field { flex: 1 1 0; min-width: 0; } .field input, .field select, .field textarea { width: 100%; height: 48px; padding: 0 16px; border: 0; border-bottom: 2px solid rgba(18, 33, 63, .33); background: var(--white); border-radius: 0; font: inherit; font-size: 14px; font-weight: 400; color: var(--navy); direction: rtl; text-align: right; } .field textarea { height: 118px; padding: 14px 16px; resize: vertical; line-height: 1.6; } .field select { appearance: none; cursor: pointer; } .field ::placeholder { color: var(--navy); opacity: 1; } .field--area ::placeholder { color: #96a6be; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); } .field--select .chev { position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; pointer-events: none; } .consent { direction: ltr; /* text left, checkbox right */ display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px; } .consent-text { direction: rtl; flex: 1 1 auto; cursor: pointer; font-size: 12px; line-height: 1.55; color: var(--navy); text-align: right; } .consent-text a { color: var(--blue); text-decoration: underline; } .consent-text a:hover { color: var(--blue-dark); } .consent input { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue); border-radius: 3px; } .submit-row { display: flex; justify-content: center; } .submit { width: 169px; height: 52px; padding: 14px; background: var(--blue); color: var(--white); border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; transition: background .15s; } .submit:hover { background: var(--blue-dark); } .submit[disabled] { opacity: .6; cursor: default; } .form-status { text-align: center; font-size: 14px; min-height: 18px; } .form-status.ok { color: #15803d; } .form-status.err { color: #b91c1c; } /* ================================ FOOTER ================================ */ .foot { background: var(--tint); } .foot-inner { max-width: var(--shell); margin: 0 auto; display: flex; flex-direction: column; gap: 23px; padding: 96px var(--gut) 48px; } .foot-cols { direction: ltr; display: flex; gap: 49px; align-items: flex-start; } .foot-contact { width: 296px; } .foot-nav { width: 187px; } .foot-col { display: flex; flex-direction: column; gap: 20px; } .foot-h { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); } .foot-mail { direction: ltr; display: flex; align-items: center; gap: 12px; } .foot-mail svg { width: 16px; height: 16px; flex: 0 0 auto; } .foot-mail a { font-size: 14px; color: var(--blue-dark); } .foot-mail a:hover { color: var(--blue); } .foot-nav a { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); white-space: nowrap; } .foot-nav a:hover { color: var(--blue-dark); } .foot-rule { height: 3px; width: 100%; background: var(--blue); } .foot-bottom { direction: ltr; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .foot-legal { direction: rtl; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--navy); } .foot-legal-links { display: inline; } .foot-legal-links a { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); text-decoration: underline; margin-inline-start: 12px; } .foot-legal-links a:hover { color: var(--blue); } .foot-social { direction: ltr; display: flex; gap: 24px; list-style: none; } .foot-social li { font-size: 13px; color: var(--navy); } /* ========================================================================== TABLET 769 – 1100px (breakpoint + values from the design's index.css) ========================================================================== */ @media (min-width: 769px) and (max-width: 1100px) { :root { --gut: 32px; } .nav { height: var(--nav-h-tablet); } .nav-inner { padding: 0 24px; } .nav-menu { gap: 16px; } .nav-link { font-size: 13px; padding-bottom: 6px; border-bottom-width: 3px; } .nav-cta { min-width: 0; padding: 10px 18px; font-size: 13px; } .nav-logo { margin-left: 24px; } .hero { flex-direction: column; } .hero-media { flex: 0 0 auto; width: 100%; height: 340px; } .hero-media img { width: 100%; object-position: center; } .hero-content { width: 100%; padding: 28px 32px; padding-inline-end: 32px; } .hero-content h1 { font-size: 44px; } .hero-sub { font-size: 20px; } .intro { padding: 28px var(--gut) 40px; } .eyebrow { font-size: 20px; } .eyebrow-en { font-size: 19px; } .intro-title { font-size: 40px; } .intro-body { font-size: 17px; } .projects { padding: 28px var(--gut) 72px; } .projects-head { margin-bottom: 40px; } .projects-more { font-size: 20px; } .section-title, .services-title, .about-title { font-size: 34px; } .cards { gap: 20px; } .cards > .card { height: 340px; } .card-text { height: 116px; padding: 18px 16px; } .card-region { font-size: 21px; } .card-title { font-size: 17px; white-space: normal; } .tag { font-size: 14px; padding: 7px 14px; } .services { padding: 48px var(--gut) 56px; } .services-title { margin-bottom: 36px; } .steps { gap: 8px; } .step { padding: 16px 8px; flex: 1 1 0; width: auto; } .step-num { font-size: 48px; } .step-title { font-size: 19px; } .step-icon { width: 74px; height: 73px; } .about { padding: 48px var(--gut) 44px; } .about-body { font-size: 17px; } .contact { padding: 32px var(--gut); } .contact-card { width: 100%; padding: 24px 28px; } .foot-inner { padding: 64px var(--gut) 40px; } .foot-cols { gap: 32px; } .foot-contact { width: auto; } .foot-nav { width: auto; } } /* ========================================================================== MOBILE <= 768px (breakpoint + values from the design's index.css) ========================================================================== */ @media (max-width: 768px) { :root { --gut: 20px; } .nav { height: var(--nav-h-mobile); } .nav-inner { padding: 0 16px; } .nav-logo { display: none; } /* design hides the desktop logo on mobile */ .nav-menu { display: none; } /* design hides the desktop menu on mobile */ /* 11px block padding gives the CTA a 44px-tall touch target inside the 64px nav */ .nav-cta { order: 1; margin-right: auto; min-width: 0; padding: 11px 16px; font-size: 13px; border-width: 1px; } .mobile-menu-wrapper { display: contents; } .mobile-menu { display: flex; } .hero { flex-direction: column; } .hero-media { flex: 0 0 auto; width: 100%; height: 240px; } .hero-media img { width: 100%; object-position: center; } .hero-content { width: 100%; padding: 24px 20px; padding-inline-end: 20px; background: var(--white); gap: 16px; } .hero-content h1 { font-size: 30px; line-height: 1.15; } .hero-sub { font-size: 16px; line-height: 1.5; } .intro { padding: 32px var(--gut) 36px; } .eyebrow { font-size: 17px; } .eyebrow-en { font-size: 16px; } .intro-title { font-size: 27px; margin-top: 10px; } .intro-body { font-size: 15px; } .projects { padding: 32px var(--gut) 44px; } .projects-head { margin-bottom: 24px; gap: 10px; } .projects-more { font-size: 17px; } .projects-more .arrow { width: 18px; height: 18px; } .section-title, .services-title, .about-title { font-size: 26px; } .title-rule { width: 62px; height: 4px; } /* single full-width column on phones */ .cards { grid-template-columns: minmax(0, 1fr); gap: 18px; } .cards > .card { height: 280px; width: 100%; } .card-text { width: 100%; height: 112px; padding: 16px; bottom: 4px; } .card-region { font-size: 20px; } .card-title { font-size: 16px; white-space: normal; } .tag { font-size: 13px; padding: 6px 12px; } .services { padding: 40px var(--gut) 44px; } .services-title { margin-bottom: 28px; } .steps { flex-direction: column; gap: 26px; } .step { width: 100%; flex: 0 0 auto; padding: 0; } .step-num { font-size: 44px; } .step-title { font-size: 20px; } .step-body { font-size: 14px; } .about { padding: 40px var(--gut) 40px; } .about-body { font-size: 15.5px; line-height: 1.75; } .contact { padding: 24px var(--gut) 40px; } .contact-card { width: 100%; padding: 20px 16px; gap: 18px; } .contact-title { font-size: 21px; } .contact-sub { font-size: 13px; } .field-row { flex-direction: column; gap: 18px; } .submit { width: 100%; } .foot-inner { padding: 44px var(--gut) 32px; } /* scale the footer lockup down on small phones so it never crowds the gutter */ .logo-tag--blue { font-size: 13px; letter-spacing: 2.6px; } .foot-logo { gap: 14px; } .foot-logo .logo-mark { width: 66px; height: 79px; } .foot-logo .logo-bldg { left: 14.5px; width: 35.9px; height: 53.1px; } .foot-logo .logo-word { top: 62.7px; width: 66px; height: 16.3px; } .foot-cols { flex-direction: column; gap: 26px; } .foot-contact, .foot-nav { width: auto; } .foot-nav { flex-direction: row; flex-wrap: wrap; gap: 14px 20px; } .foot-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; } .foot-legal { line-height: 1.9; } .foot-legal-links { display: block; margin-top: 6px; } .foot-legal-links a { margin: 0 0 0 14px; } } @media (max-width: 360px) { .hero-content h1 { font-size: 26px; } .intro-title { font-size: 24px; } .contact-card { padding: 18px 12px; } }