/* =========================== RAM HOUSE - Designed (sharp, no border-radius) Font: FUP Galil, weights 300-800, self-hosted in assets/fonts/ Brand: - Ink (deep navy): #0F1E3D - Accent (orange): #FF9501 - Canvas (off-white): #F4F1EB =========================== */ /* ===== FUP Galil - brand font (all weights) ===== Filenames here must match the files on disk exactly, lowercase and all. Windows resolves a mismatched case, the Linux server does not - a CamelCase reference here 404s live while looking perfect locally. */ @font-face{font-family:'FUP Galil';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/fupgalil-light.woff2') format('woff2')} @font-face{font-family:'FUP Galil';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/fupgalil-regular.woff2') format('woff2')} @font-face{font-family:'FUP Galil';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/fupgalil-medium.woff2') format('woff2')} @font-face{font-family:'FUP Galil';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/fupgalil-semibold.woff2') format('woff2')} @font-face{font-family:'FUP Galil';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/fupgalil-bold.woff2') format('woff2')} @font-face{font-family:'FUP Galil';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/fupgalil-extrabold.woff2') format('woff2')} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ direction:rtl; font-family:'FUP Galil','Open Sans Hebrew','Helvetica Neue',Arial,sans-serif; font-weight:400; font-size:16px; line-height:1.6; color:#161229; background:#FFFFFF; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color .2s, opacity .2s, background .2s} button{font-family:inherit;cursor:pointer;border:0;background:none} strong,b,h1,h2,h3,h4,h5,h6,th{font-weight:500} /* NO BOLD */ /* Skip link. Every page opens with the same header, and tabbing through it costs 20 stops before the first content link, because focusing a menu parent opens its submenu into the tab order. This is the way past it. Hidden by clipping rather than by display:none or an off-screen offset: display:none would take it out of the tab order and defeat the point, and a negative offset can produce a horizontal scrollbar - which on an RTL layout is the wrong edge and easy to miss. */ .skip-link{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } .skip-link:focus{ position:fixed;top:12px;right:12px;z-index:200; width:auto;height:auto;margin:0;padding:12px 20px; overflow:visible;clip:auto;clip-path:none;white-space:normal; background:var(--ink);color:#fff;font-size:14px;letter-spacing:.02em; } /* main carries tabindex="-1" so that following the skip link actually moves focus. Without it the browser scrolls and leaves focus on , so the next Tab returns to the top of the nav and the link achieves nothing - which is how most broken skip links behave. Measured here before the attribute was added, so this is not a precaution. No focus ring on it: the focus is programmatic and lands on a whole page region rather than a control, so an outline around the entire content area reads as a rendering fault. 2.4.7 governs keyboard-operable components, which this is not - it is never reached by tabbing. */ main[tabindex="-1"]:focus{outline:none} /* Available to assistive technology, absent from the screen. Used for the section headings that give the tab panels on /offices and /campus a parent in the document outline - those pages ran 18 and 11

s with no

above them, so the outline claimed the listings were children of nothing. A visible heading would duplicate the tab label sitting right above it, so the heading exists only for the outline. Same clipping technique as the skip link, and for the same reason: display:none would hide it from screen readers too, which is the entire point of having it. / .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%); white-space:nowrap;border:0; } :root{ --ink:#0F1E3D; --ink-2:#1E3563; --ink-3:#4C5E88; --text:#161229; --muted:#6B6585; --accent:#FF9501; --accent-dark:#E07F00; --canvas:#F4F1EB; --canvas-2:#EDE8DD; --surface:#FFFFFF; --hairline:#0F1E3D; --hairline-soft:rgba(15,30,61,.14); --hairline-softer:rgba(15,30,61,.08); --max:1240px; --gutter:24px; } .container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)} / ========================= HEADER / NAV ========================= / .header{ background:#fff; border-bottom:1px solid var(--hairline-softer); position:sticky;top:0;z-index:50; } .nav{ display:flex;align-items:center;justify-content:space-between; max-width:var(--max);margin:0 auto;padding:18px var(--gutter);gap:24px; } .logo{ display:inline-flex;align-items:center; height:56px; transition:opacity .2s; } .logo:hover{opacity:.8} / has to be sized too, not just the . It sits between .logo and the image, so without a height of its own the img's height:100% resolves against an auto-height box and the logo renders at its full 671px. / .logo picture{display:block;height:100%} .logo img{height:100%;width:auto;display:block} / Footer logo (dark background) - keep colours, just resize / .footer .logo{ height:64px;border:0;padding:0;background:transparent; } .footer .logo img{filter:brightness(0) invert(1)} .nav-menu{ display:flex;align-items:center;gap:28px;list-style:none;flex:1;justify-content:center; } .nav-menu > li{position:relative} .nav-menu > li > a{ font-size:15px; padding:10px 0; color:var(--text); display:inline-flex;align-items:center;gap:6px; border-bottom:2px solid transparent; } .nav-menu > li > a:hover{color:var(--ink);border-bottom-color:var(--accent)} .nav-menu > li.active > a{color:var(--ink);border-bottom-color:var(--ink)} .caret{font-size:10px;opacity:.6} .nav-menu .dropdown-menu{ position:absolute;top:100%;right:0; min-width:240px; background:#fff; border:1px solid var(--hairline-soft); list-style:none;padding:8px 0; z-index:60; box-shadow:0 8px 30px rgba(15,30,61,.10); / animated rather than display-toggled; visibility keeps it out of the tab order while closed, and is delayed so the fade-out can finish / opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s; } .nav-menu > li:hover .dropdown-menu, .nav-menu > li:focus-within .dropdown-menu{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .2s ease,transform .2s ease,visibility 0s; } / Escape closes an open submenu - WCAG 1.4.13 asks that anything revealed on hover or focus can be dismissed without moving the pointer or focus away, and an open panel here covers page content. This has to sit AFTER the :hover and :focus-within rules above: all three selectors carry identical specificity, so source order is what decides. nav.js adds the class and removes it again on mouseleave or focusout, so the menu is dismissed rather than disabled. / .nav-menu > li.is-dismissed .dropdown-menu{ opacity:0;visibility:hidden;transform:translateY(-8px); } .dropdown-menu li a{ display:block;padding:11px 22px;font-size:14px;color:var(--text);white-space:nowrap; border-right:3px solid transparent; } .dropdown-menu li a:hover{background:var(--canvas);border-right-color:var(--accent);color:var(--ink)} / ========================= BUTTONS (SHARP - no radius) ========================= / .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;font-size:15px;letter-spacing:.02em; background:var(--ink);color:#fff; border:2px solid var(--ink); transition:transform .15s ease, background .2s, color .2s, border-color .2s; cursor:pointer; } .btn:hover{background:var(--accent);border-color:var(--accent);color:#1A0F00;transform:translateY(-1px)} .btn-accent{background:var(--accent);border-color:var(--accent);color:#1A0F00} .btn-accent:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn-outline{background:#fff;color:var(--ink);border-color:var(--ink)} .btn-outline:hover{background:var(--ink);color:#fff} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .btn-block{width:100%;text-align:center} .btn-sm{padding:10px 18px;font-size:13px} / ========================= PAGE SCAFFOLDING ========================= / .crumbs{ font-size:13px;color:var(--muted); padding:24px 0 8px; letter-spacing:.04em; } .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ink)} .page-title{ display:inline-block; font-size:clamp(34px,4.4vw,52px); line-height:1.05;letter-spacing:-.01em; color:var(--ink); border-bottom:4px solid var(--accent); padding-bottom:14px;padding-left:40px; } .subtitle{color:var(--muted);font-size:17px;margin:14px 0 0;max-width:60ch} .section{padding:80px 0} .section-head{ font-size:clamp(28px,3.4vw,42px); line-height:1.1;color:var(--ink); display:flex;align-items:flex-end;gap:16px; padding-bottom:14px; border-bottom:3px solid var(--ink); margin-bottom:14px;letter-spacing:-.005em; } .section-head::before{ content:"";display:inline-block;width:14px;height:14px;background:var(--accent); margin-bottom:8px;flex-shrink:0; } .section-sub{color:var(--muted);font-size:16px;margin-bottom:36px;max-width:64ch} .eyebrow{ display:inline-flex;align-items:center;gap:10px; font-size:12px;letter-spacing:.18em;color:var(--ink); text-transform:uppercase;margin-bottom:14px; } .eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)} / The home hero carries the address on its own, with no accent rule before it. A modifier, not a change to .eyebrow, which is the shared treatment on 25 other call sites including the services hero. Two classes in the selector so it beats .eyebrow::before on specificity rather than on source order, which is what the .is-dismissed rule in the nav has to rely on. / .eyebrow.eyebrow-bare::before{content:none} / ========================= GRID UTILITIES ========================= / .grid{display:grid;gap:24px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} / ========================= CARDS (services / generic) ========================= / .card{ background:#fff; border:1px solid var(--hairline-soft); padding:30px; transition:transform .2s, border-color .2s; text-align:right; } .card:hover{transform:translateY(-4px);border-color:var(--ink)} .card .icon-tile{ width:54px;height:54px; background:var(--ink);color:var(--accent); display:flex;align-items:center;justify-content:center; font-size:24px;margin-bottom:18px; } .card .icon-tile.accent{background:var(--accent);color:var(--ink)} .card h3{font-size:19px;color:var(--ink);margin-bottom:8px} .card p{font-size:14px;color:var(--muted);line-height:1.65} .card .ph{ background:linear-gradient(135deg,#1B2C50,#0F1E3D); height:180px;display:flex;align-items:center;justify-content:center; color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.2em;margin-bottom:16px; } / ========================= STATS BAND ========================= / .stats{ background:var(--ink); color:#fff; position:relative;overflow:hidden; } .stats::before{ content:"";position:absolute;inset:0;z-index:0; background: linear-gradient(135deg, rgba(255,149,1,.10) 0%, transparent 40%), linear-gradient(225deg, rgba(255,149,1,.06) 0%, transparent 50%); } .stats .grid{position:relative;z-index:1;gap:0} .stat{ text-align:center;padding:54px 18px; border-left:1px solid rgba(255,255,255,.10); } .stat:last-child{border-left:0} .stat .num{ font-size:clamp(40px,5vw,64px); color:var(--accent); line-height:1;letter-spacing:-.02em; margin-bottom:10px; } .stat .lbl{font-size:14px;color:#CFD8EC;letter-spacing:.04em} / ========================= GALLERY (image cards) ========================= / .gallery .ph{ height:280px;background-position:center;background-size:cover; border:1px solid var(--hairline-soft); position:relative;overflow:hidden; } .gallery .ph::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 50%, rgba(15,30,61,.7)); } .gallery .ph .cap{ position:absolute;left:18px;bottom:18px;color:#fff; z-index:2;font-size:15px;letter-spacing:.05em; } .gallery .ph::before{ content:"";position:absolute;left:18px;top:18px;width:32px;height:32px; background:var(--accent);z-index:2; } / ========================= TABS ========================= / .tabs{ display:flex;gap:0;flex-wrap:wrap; border-bottom:2px solid var(--ink); margin-bottom:30px;justify-content:flex-end; } .tab{ background:transparent;color:var(--ink); border:0;border-bottom:3px solid transparent; padding:14px 22px;font-size:15px; margin-bottom:-2px; transition:color .2s, border-color .2s, background .2s; } .tab:hover{color:var(--accent)} .tab.active{ background:var(--ink);color:#fff; border-bottom-color:var(--accent); } .tab-panel{display:none} .tab-panel.active{display:block} / ========================= LISTING CARDS (property/room) ========================= / .listing{ background:#fff; border:1px solid var(--hairline-soft); display:flex;flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s; } .listing:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 14px 38px -22px rgba(15,30,61,.35); } .listing .ph{ height:200px;background-size:cover;background-position:center; border-bottom:1px solid var(--hairline-soft);position:relative; background-color:#1B2C50; } .listing .tag{ position:absolute;top:0;right:0; background:var(--ink);color:#fff; font-size:12px;letter-spacing:.06em; padding:8px 14px; } .listing .tag.accent{background:var(--accent);color:#1A0F00} .listing .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .listing h3{font-size:20px;color:var(--ink);margin-bottom:6px;letter-spacing:-.005em} .listing > .body > p{font-size:14px;color:var(--muted);margin-bottom:18px} .spec-row{display:flex;gap:0;margin-bottom:20px;border:1px solid var(--hairline-soft)} .spec{ flex:1;padding:12px 8px;text-align:center;font-size:12px;color:var(--muted); border-left:1px solid var(--hairline-soft); } .spec:last-child{border-left:0} .spec b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px} .spec b.ok{color:#0E7A2F} .spec b.no{color:#B92E2E} .spec b.soon{color:var(--accent-dark)} .listing .body .btn{margin-top:auto} / ========================= TABLE ========================= / table.wf{ width:100%;border-collapse:collapse;font-size:14px; background:#fff;border:1px solid var(--hairline-soft); } table.wf thead th{ background:var(--ink);color:#fff; padding:14px 18px;text-align:right;letter-spacing:.04em;font-size:14px; } table.wf td{ padding:14px 18px;text-align:right; border-bottom:1px solid var(--hairline-softer); color:var(--text); } table.wf tbody tr:nth-child(even){background:#FAF8F2} table.wf tbody tr:last-child td{border-bottom:0} .pill{ display:inline-block;font-size:12px; padding:5px 10px;border:1px solid var(--ink);background:#fff; letter-spacing:.04em; } .pill.ok{color:#0E7A2F;border-color:#0E7A2F} .pill.no{color:#B92E2E;border-color:#B92E2E} .pill.soon{color:var(--accent-dark);border-color:var(--accent-dark)} .price-amt{color:var(--ink)} / ========================= FORMS ========================= / .form-card{ background:#fff; border:1px solid var(--hairline-soft); padding:36px; border-top:6px solid var(--accent); } .form-card h2{ font-size:22px;color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:14px;margin-bottom:24px; } .field{margin-bottom:16px;text-align:right} .field label{ display:block;font-size:13px;color:var(--ink); margin-bottom:6px;letter-spacing:.04em; } .field input,.field textarea,.field select{ width:100%;background:#FBFAF6; border:1px solid var(--hairline-soft); padding:12px 14px;font-size:14px;font-family:inherit;color:var(--text); transition:border-color .15s, background .15s; } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--ink);background:#fff; } .field textarea{min-height:110px;resize:vertical} / ========================= INFO CARD ========================= / .info-card{ background:var(--ink);color:#fff; padding:32px; } .info-card h3{ font-size:20px;color:#fff;letter-spacing:-.005em; padding-bottom:14px;margin-bottom:18px; border-bottom:2px solid var(--accent); } .info-card.light{background:#fff;color:var(--text);border:1px solid var(--hairline-soft)} .info-card.light h3{color:var(--ink);border-bottom-color:var(--ink)} .info-row{ display:flex;align-items:flex-start;gap:14px; padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10); font-size:14px; } .info-row:last-child{border:0} .info-card.light .info-row{border-bottom-color:var(--hairline-softer);color:var(--text)} .info-row .ic{ width:38px;height:38px; background:rgba(255,149,1,.15);color:var(--accent); display:flex;align-items:center;justify-content:center; flex:0 0 38px; } .info-card.light .info-row .ic{background:var(--canvas);color:var(--ink)} / ========================= MAP placeholder ========================= / .map-ph{ position:relative; background: linear-gradient(180deg,#0F1E3D 0%, #1B2E5E 100%); min-height:380px; border:1px solid var(--hairline-soft); color:#fff; overflow:hidden; } .map-ph::before{ content:"";position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:40px 40px; opacity:.5; } / ========================= CTA STRIP - minimal, no orange ========================= / .cta-strip{ background:#081226;color:#fff;text-align:center; padding:80px 16px;position:relative;overflow:hidden; } .cta-strip::before{ content:"";position:absolute;inset:0; background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.06) 0%, transparent 70%); pointer-events:none; } .cta-strip::after{ content:"";position:absolute;left:50%;top:0;width:80px;height:2px; background:#fff;opacity:.5;transform:translateX(-50%); } .cta-strip .eyebrow-cta{ display:inline-block;font-size:12px;color:#fff;opacity:.55; letter-spacing:.22em;text-transform:uppercase;margin-bottom:18px; position:relative;z-index:1; } .cta-strip h2{ font-size:clamp(28px,3.4vw,44px);margin-bottom:16px;color:#fff; letter-spacing:-.015em;line-height:1.15;position:relative;z-index:1; } .cta-strip p{ font-size:17px;color:#CFD8EC;max-width:60ch;margin:0 auto 32px; line-height:1.6;position:relative;z-index:1; } .cta-strip .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1} .cta-strip .row .btn{ background:#fff;border-color:#fff;color:var(--ink); } .cta-strip .row .btn:hover{ background:transparent;color:#fff;border-color:#fff; } .cta-strip .row .btn-outline{ background:transparent;border-color:rgba(255,255,255,.4);color:#fff; } .cta-strip .row .btn-outline:hover{ background:rgba(255,255,255,.08);border-color:#fff;color:#fff; } / ========================= FOOTER ========================= / .footer{ background:#081226;color:#CFD8EC; padding:70px 0 0; } .footer .cols{ max-width:var(--max);margin:0 auto;padding:0 var(--gutter); display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:42px; padding-bottom:48px; } .footer .logo-line{display:flex;align-items:center;gap:12px;margin-bottom:18px} .footer .logo{border-color:#fff;color:#fff;padding:10px 16px;font-size:15px} .footer h3{ font-size:14px;color:#fff;letter-spacing:.14em; margin-bottom:18px;padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.10); } .footer p,.footer a{font-size:14px;color:#9FA9CE;line-height:1.9} .footer a:hover{color:var(--accent)} .footer .socials{display:flex;gap:10px;margin-top:14px} .footer .socials a{ width:38px;height:38px;border:1px solid rgba(255,255,255,.20); display:inline-flex;align-items:center;justify-content:center;color:#fff; } .footer .socials a:hover{background:var(--accent);border-color:var(--accent);color:#1A0F00} .footer .bottom{ border-top:1px solid rgba(255,255,255,.10); padding:18px var(--gutter);font-size:12px;color:#7683A6; text-align:center;letter-spacing:.04em; } / ========================= GENERIC HERO (inner pages) Background: office corridor photo + dark navy overlay ========================= / .page-hero{ background: linear-gradient(180deg, rgba(15,30,61,.78) 0%, rgba(15,30,61,.88) 100%), url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1800&q=80') center/cover no-repeat; color:#fff; position:relative;overflow:hidden; padding:110px 0 90px; } .page-hero::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(15,30,61,.45) 0%, transparent 60%); pointer-events:none; } .page-hero .container{position:relative;z-index:1} .page-hero .crumbs{color:#CFD8EC;padding:0 0 18px} .page-hero .crumbs a{color:#fff;opacity:.85} .page-hero .crumbs a:hover{opacity:1} .page-hero .eyebrow{color:#fff !important;opacity:.7;letter-spacing:.18em} .page-hero .page-title{ color:#fff;border-bottom-color:rgba(255,255,255,.25);padding-left:60px; font-size:clamp(40px,5.4vw,64px); } .page-hero .subtitle{color:#E2E7F5;font-size:18px;max-width:62ch} / ========================= RESPONSIVE ========================= / @media (max-width:1080px){ .grid-4{grid-template-columns:repeat(2,1fr)} .nav-menu{display:none} .nav{padding:14px var(--gutter)} .stat{border-left:0;border-bottom:1px solid rgba(255,255,255,.10)} .footer .cols{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .grid-3,.grid-2{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr} .tabs{justify-content:flex-start} .footer .cols{grid-template-columns:1fr} .section{padding:60px 0} } / ========================================================= RICH REDESIGN v2 - magazine / catalog · grey accents (orange neutralised → soft grey; kept only as thin heading/accent lines; larger type; bigger imagery; richer hover motion) ========================================================= / :root{ --stone:#E7E4DE; / warm light grey fill / --stone-2:#D9D5CD; / Big display numerals. Do not lighten: this is content, and the accessibility statement declares WCAG 2.1 AA. Three call sites - .vstep .n on --canvas (4.60:1), .svc-list .n and .rampark-stats .splitstat .n on white (5.19:1). #AEB4C1 gave 1.84 and 2.08 and failed all three. Resolve the real background from the cascade before trusting any number here. / --num:#666D7D; } / ---- Typography: larger, more editorial ---- / body{font-size:17px;line-height:1.7} .section{padding:96px 0} .grid{gap:30px} .section-head{font-size:clamp(32px,3.8vw,50px)} .section-sub{font-size:17px;max-width:66ch;margin-bottom:44px} .eyebrow{font-size:12.5px;letter-spacing:.2em} .page-title{font-size:clamp(42px,5.2vw,62px);padding-bottom:16px} .page-hero{padding:130px 0 104px} .page-hero .page-title{font-size:clamp(48px,6vw,74px)} .subtitle,.page-hero .subtitle{font-size:19px} .listing h3{font-size:23px} .listing > .body > p{font-size:15px} .listing .body{padding:26px 28px 28px} .card{padding:34px} .card h3{font-size:21px} .card p{font-size:15px} .spec{font-size:12.5px;padding:14px 8px} .spec b{font-size:15px} / ---- Colour: neutralise orange, keep thin accent lines ---- / / buttons → navy (no orange fills) / .btn:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff;transform:translateY(-2px)} .btn-accent{background:var(--ink);border-color:var(--ink);color:#fff} .btn-accent:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff} / icon tiles → stone / navy / .card .icon-tile{background:var(--stone);color:var(--ink)} .card .icon-tile.accent{background:var(--ink);color:#fff} .stat .num{color:#fff} .stats::before{background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 45%)} / tabs / tags / badges → neutral (thin accent underline kept on active tab) / .tab:hover{color:var(--ink)} .listing .tag.accent{background:var(--ink);color:#fff} .info-row .ic{background:var(--stone);color:var(--ink)} .info-card.light .info-row .ic{background:var(--canvas);color:var(--ink)} .spec b.soon{color:var(--muted)} .pill.soon{color:var(--muted);border-color:var(--muted)} / nav + footer + topbar hovers → light, not orange / .nav-menu > li > a:hover{border-bottom-color:var(--ink)} .dropdown-menu li a:hover{border-right-color:var(--ink)} .footer a:hover{color:#fff} .footer .socials a:hover{background:var(--ink-2);border-color:var(--ink-2);color:#fff} / ---- Magazine imagery: bigger photos + refined hover zoom ---- / .listing{overflow:hidden} .listing .ph{height:300px;transition:transform .7s cubic-bezier(.19,.7,.2,1)} .listing:hover .ph{transform:scale(1.06)} .listing:hover{box-shadow:0 28px 64px -32px rgba(15,30,61,.5)} .card:hover{box-shadow:0 22px 52px -30px rgba(15,30,61,.38)} .gallery .ph{height:440px;transition:transform .8s cubic-bezier(.19,.7,.2,1)} .gallery .ph:hover{transform:scale(1.04)} .gallery .ph .cap{transition:transform .45s ease;font-size:17px} .gallery .ph:hover .cap{transform:translateY(-4px)} .gallery .ph::before{transition:transform .45s ease} .gallery .ph:hover::before{transform:rotate(90deg)} / smoother global lift easing / .card,.listing{ transition:transform .3s cubic-bezier(.19,.7,.2,1), border-color .3s, box-shadow .3s; } .card:hover,.listing:hover{transform:translateY(-6px)} / ========================================================= ARCHITECA LAYER - full-bleed cinematic · catalog · editorial ========================================================= / .full{max-width:100%!important;padding:0!important} / Cinematic full-bleed hero / .ahero{position:relative;min-height:94vh;min-height:94svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden} .aherobg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.02)} .ahero::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(11,18,38,.30) 0%,rgba(11,18,38,.28) 42%,rgba(11,18,38,.88) 100%)} .aheroinner{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(60px,9vh,110px);width:100%} .ahero .eyebrow{color:#fff;opacity:.9;margin-bottom:22px} .ahero h1{font-size:clamp(46px,7vw,104px);line-height:1.0;letter-spacing:-.025em;color:#fff;margin:0 0 24px;max-width:15ch} .ahero .lead{font-size:clamp(17px,1.5vw,22px);color:#E2E7F5;max-width:54ch;margin-bottom:34px;line-height:1.6} .ahero .cta-row{display:flex;gap:14px;flex-wrap:wrap} .aheroscroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2; font-size:11px;letter-spacing:.25em;color:#fff;opacity:.7;writing-mode:vertical-rl;text-transform:uppercase} / The letters light one after another, top to bottom. Deliberately no display change on .l: in a vertical writing mode an inline-block would establish its own box and can shift the glyph, and opacity needs no such thing. The dimmed value is the animated one and 1 is the base, so removing the animation restores the cue rather than leaving it faded. / @keyframes ahero-cue{0%,55%,100%{opacity:.35}22%{opacity:1}} .aheroscroll .l{animation:ahero-cue 1.9s ease-in-out infinite;animation-delay:calc(var(--i) .11s)} /* Architectural split band / .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .split.rev .splitmedia{order:2} .splitmedia{min-height:560px;background-size:cover;background-position:center} .splitbody{padding:clamp(44px,6vw,104px);display:flex;flex-direction:column;justify-content:center;background:var(--canvas)} .splitbody h2{font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.015em;margin:16px 0 22px;color:var(--ink)} .splitbody p{font-size:17px;line-height:1.85;color:var(--muted);margin-bottom:16px;max-width:54ch} .splitstats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px; border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft)} .splitstat{padding:26px 12px;text-align:center;border-left:1px solid var(--hairline-soft); display:flex;flex-direction:column;align-items:center} .splitstat:last-child{border-left:0} .splitstat .n{font-size:clamp(28px,2.5vw,42px);color:var(--ink);line-height:1;letter-spacing:-.02em} .splitstat .l{font-size:13px;color:var(--muted);letter-spacing:.03em;margin:12px auto 0;max-width:15ch;line-height:1.45} .splitstats{border-color:var(--hairline-soft)} / Catalog / portfolio - big imagery, edge-to-edge / .folio{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .folioitem{position:relative;height:clamp(440px,30vw,560px);overflow:hidden;display:block;color:#fff} .folioitem .im{position:absolute;inset:0;background-size:cover;background-position:center; transition:transform 1.2s cubic-bezier(.19,.7,.2,1)} .folioitem::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,18,38,0) 38%,rgba(11,18,38,.86) 100%);transition:background .45s} .folioitem:hover .im{transform:scale(1.08)} .folioitem:hover::after{background:linear-gradient(180deg,rgba(11,18,38,.2) 15%,rgba(11,18,38,.92) 100%)} .folionum{position:absolute;top:30px;right:34px;z-index:2;font-size:15px;color:#fff;opacity:.85;letter-spacing:.12em} .foliocap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,1.8vw,30px)} .foliocap .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.8} .foliocap h3{font-size:clamp(21px,1.7vw,28px);color:#fff;margin:10px 0 8px;letter-spacing:-.01em} .foliocap p{font-size:15px;color:#E2E7F5;max-width:46ch;line-height:1.5} .foliocap .go{display:inline-flex;align-items:center;gap:10px;margin-top:18px; font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff; border-bottom:2px solid var(--accent);padding-bottom:5px;transition:gap .3s} .folioitem:hover .go{gap:18px} / Full-bleed statement band (parallax) / .band{position:relative;min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden} .bandbg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center} .band::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,18,38,.66)} .bandinner{max-width:960px;padding:96px var(--gutter)} .band .eyebrow{justify-content:center;color:#fff;opacity:.85;margin-bottom:22px} .band h1,.band h2{font-size:clamp(26px,3.2vw,46px);line-height:1.3;color:#fff;letter-spacing:-.005em;font-weight:300} .band h1 b,.band h2 b{font-weight:500} @media(max-width:1080px){.folio{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){ .split{grid-template-columns:1fr} .split.rev .splitmedia{order:0} .splitmedia{min-height:320px} .ahero{min-height:86vh;min-height:86svh} } @media(max-width:600px){.folio{grid-template-columns:1fr}} / Inner-page hero uses real architectural photo. Declared twice on purpose: a browser that cannot parse image-set drops the second declaration and keeps the JPEG. Same pattern as ram_bg() and the login logo. / .page-hero{ background: linear-gradient(180deg, rgba(11,18,38,.62) 0%, rgba(11,18,38,.82) 100%), url('assets/photos/building/corridor.jpg') center/cover no-repeat!important; background: linear-gradient(180deg, rgba(11,18,38,.62) 0%, rgba(11,18,38,.82) 100%), image-set(url('assets/photos/building/corridor.webp') type('image/webp'), url('assets/photos/building/corridor.jpg') type('image/jpeg')) center/cover no-repeat!important; } / BookASP booking bar (campus) / .booking{padding:40px 0 0} .booking .eyebrow{margin-bottom:14px} .bookingframe{width:100%;background:#fff;border:0;box-shadow:none} .bookingframe iframe{width:100%;min-height:640px;border:0;display:block;transition:height .3s ease} / Vertical process steps inside split body / .vsteps{margin-top:28px;display:flex;flex-direction:column} .vstep{display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--hairline-soft);align-items:flex-start} .vstep:last-child{border-bottom:1px solid var(--hairline-soft)} .vstep .n{font-size:32px;color:var(--num);line-height:1;min-width:56px;letter-spacing:-.02em;flex-shrink:0} .vstep h3{font-size:19px;color:var(--ink);margin:2px 0 5px;letter-spacing:-.005em} .vstep p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0} / ===== Home refinements ===== / / Hero: centered text + buttons / .aheroinner{text-align:center} .ahero .eyebrow{justify-content:center} .ahero h1{margin-left:auto;margin-right:auto} .ahero .lead{margin-left:auto;margin-right:auto} .ahero .cta-row{justify-content:center} / Catalog cards: caption centered over the image / .foliocap{top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .foliocap p{margin-left:auto;margin-right:auto} .folioitem::after{background:linear-gradient(180deg,rgba(11,18,38,.42) 0%,rgba(11,18,38,.62) 100%)} .folioitem:hover::after{background:linear-gradient(180deg,rgba(11,18,38,.55) 0%,rgba(11,18,38,.78) 100%)} / About: paragraphs span full title width / .split.rev .splitbody p{max-width:none} / Hero video background / video.aherobg{width:100%;height:100%;object-fit:cover;background:#0b1226} / ===== Frosted-glass top menu (translucent over hero video) ===== / .header{ position:fixed;top:0;left:0;right:0;z-index:50; background:rgba(255,255,255,.60); -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5); border-bottom:1px solid rgba(255,255,255,.40); box-shadow:0 6px 34px rgba(15,30,61,.09); } / pages whose first element is a plain container (e.g. property) clear the fixed header / .header + .container{padding-top:120px} / Hero: content vertically centered / .ahero{align-items:center} .aheroinner{padding-top:0;padding-bottom:0} / white strip between hero and catalog cubes (same as gap between cubes) / .folio{margin-top:8px} / Services section: centered header + no navy divider line / .svc-center{text-align:center} .svc-center .eyebrow{justify-content:center} .svc-center .section-head{border-bottom:none;padding-bottom:0;justify-content:center} .svc-center .section-head::before{display:none} .svc-center .section-sub{max-width:70ch;margin-left:auto;margin-right:auto;margin-bottom:44px} .svc-center .card{text-align:right} / Light-grey button variant (home hero CTA) / .btn-light{background:#E7E9ED;border-color:#E7E9ED;color:var(--ink)} .btn-light:hover{background:#D4D8E0;border-color:#D4D8E0;color:var(--ink);transform:translateY(-2px)} / ===== Mobile hamburger (frosted milky glass) ===== / .nav{position:relative} .nav-toggle{ display:none; width:46px;height:42px;padding:0; align-items:center;justify-content:center; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); border:1px solid rgba(255,255,255,.55); border-radius:10px;cursor:pointer; box-shadow:0 4px 18px rgba(15,30,61,.10); } .nav-toggle span{position:relative;display:block;width:20px;height:2px;background:var(--ink);border-radius:2px} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s} .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .nav.nav-open .nav-toggle span{background:transparent} .nav.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)} .nav.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:1080px){ / hide the "לתיאום פגישה" button on mobile, show hamburger / .nav > .btn-accent.btn-sm{display:none} .nav-toggle{display:inline-flex} / frosted milky glass dropdown panel / .nav.nav-open .nav-menu{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:absolute;top:calc(100% + 8px);left:0;right:0; background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6); border:1px solid rgba(255,255,255,.45); border-radius:14px; box-shadow:0 24px 50px rgba(15,30,61,.16); padding:8px 0;overflow:hidden; } .nav.nav-open .nav-menu > li{width:100%} .nav.nav-open .nav-menu > li > a{ padding:15px 22px;width:100%;font-size:16px; border-bottom:1px solid rgba(15,30,61,.06); } .nav.nav-open .nav-menu > li:last-child > a{border-bottom:0} .nav.nav-open .nav-menu .dropdown-menu{display:none !important} .nav.nav-open .nav-menu .caret{display:none} } / Hero overlay: black instead of navy-blue / .ahero::after{ background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.30) 42%,rgba(0,0,0,.90) 100%) } / ============================================================ Convert ALL translucent BLUE (navy) overlays over images to BLACK ============================================================ / / Inner-page hero (photo + overlay) - see the note on the earlier .page-hero rule for why the background is declared twice. / .page-hero{ background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.82) 100%), url('assets/photos/building/corridor.jpg') center/cover no-repeat!important; background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.82) 100%), image-set(url('assets/photos/building/corridor.webp') type('image/webp'), url('assets/photos/building/corridor.jpg') type('image/jpeg')) center/cover no-repeat!important; } .page-hero::before{background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, transparent 60%)} / Catalog / portfolio cards / .folioitem::after{background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.62) 100%)} .folioitem:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.78) 100%)} / Full-bleed statement band / .band::after{background:rgba(0,0,0,.66)} / Gallery photos / .gallery .ph::after{background:linear-gradient(180deg,transparent 50%, rgba(0,0,0,.7))} / ============================================================ Mobile: keep hero CTA buttons two-in-a-row (not stacked) ============================================================ / @media (max-width:600px){ .ahero .cta-row{flex-wrap:nowrap;gap:10px;width:100%} .ahero .cta-row .btn{ flex:1 1 0;min-width:0;white-space:nowrap; padding:13px 12px;font-size:14px; } } / ============================================================ Campus (קמפוס רם): wider, larger listing cards - still 3 per row ============================================================ / .campus-listings{max-width:1560px} .campus-listings .grid-3{gap:34px} .campus-listings .listing .ph{height:380px} .campus-listings .listing .body{padding:30px 32px 32px} .campus-listings .listing .body h3{font-size:24px} / ============================================================ Home folio: big outlined number above each cube title ============================================================ / .foliobig{ display:block; font-size:clamp(44px,4.6vw,78px); font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.78); text-stroke:1px rgba(255,255,255,.78); margin-bottom:8px;letter-spacing:.01em; } / hide small corner number where the big number is shown / .folioitem:has(.foliobig) .folionum{display:none} / ============================================================ Home page: footer + CTA strip in black (instead of navy) ============================================================ / .home .cta-strip{background:#000} .home .footer{background:#000} / Header "לתיאום פגישה" button in black / .header .btn.btn-accent{background:#000;border-color:#000;color:#fff} .header .btn.btn-accent:hover{background:#1c1c1c;border-color:#1c1c1c;color:#fff} / Footer: black on ALL pages (match home) / .footer{background:#000} / ===== Video background for inner-page heroes (offices, campus) ===== / .page-hero.has-video{background:#0b1226 !important} .page-herovideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .page-hero.has-video::before{z-index:1} .page-hero.has-video::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.72) 100%);pointer-events:none} .page-hero.has-video .container{position:relative;z-index:2} / ===== Mobile: stack the 3-up stat blocks vertically ===== / @media (max-width:720px){ .splitstats{grid-template-columns:1fr} .splitstat{border-left:0;border-top:1px solid var(--hairline-soft);padding:20px 12px} .splitstat:first-child{border-top:0} } / ===== Mobile side menu: larger + darker ===== / @media (max-width:1080px){ .nav.nav-open .nav-menu{ background:rgba(13,20,40,.93); -webkit-backdrop-filter:blur(22px) saturate(1.4); backdrop-filter:blur(22px) saturate(1.4); border:1px solid rgba(255,255,255,.12); box-shadow:0 26px 60px rgba(0,0,0,.38); padding:12px 0; } .nav.nav-open .nav-menu > li > a{ color:#fff; font-size:18px; padding:19px 26px; border-bottom:1px solid rgba(255,255,255,.10); } .nav.nav-open .nav-menu > li.active > a{color:#fff} } / ===== רם פארק: text (right) + stats (left), no image ===== / .rampark-section{padding:20px 0} .rampark-2col{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:70px 0} .rampark-text h2{margin:14px 0 18px} .rampark-text p{color:var(--muted);line-height:1.7;margin:0 0 14px;max-width:56ch} .rampark-stats{display:flex;flex-direction:column;border-inline-start:1px solid var(--hairline-soft);padding-inline-start:44px} .rampark-stats .splitstat{border:0;border-bottom:1px solid var(--hairline-soft);padding:24px 0;text-align:start} .rampark-stats .splitstat:first-child{padding-top:0} .rampark-stats .splitstat:last-child{border-bottom:0;padding-bottom:0} .rampark-stats .splitstat .n{font-size:clamp(34px,3vw,48px);color:var(--num,var(--ink))} .rampark-stats .splitstat .l{margin-top:8px;max-width:none} @media(max-width:720px){ .rampark-2col{grid-template-columns:1fr;gap:28px;padding:48px 0} .rampark-stats{border-inline-start:0;padding-inline-start:0;border-top:1px solid var(--hairline-soft);padding-top:8px} } / ===== Client logos marquee (continuous, seamless) ===== / .logos-strip{padding:64px 0 72px;background:#fff;border-top:1px solid var(--hairline-soft)} .logos-title{text-align:center;font-size:clamp(21px,2.3vw,30px);color:var(--ink);line-height:1.35;margin:0 auto 40px;max-width:26ch;letter-spacing:-.01em} .logos-marquee{position:relative;overflow:hidden;direction:ltr; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)} .logos-track{display:flex;align-items:center;width:max-content;direction:ltr; animation:logos-scroll 90s linear infinite} .logos-track img{height:70px;width:auto;object-fit:contain;flex:0 0 auto;margin:0 36px; / always full colour; they are images, not links, so nothing to click / -webkit-user-drag:none;user-select:none; transition:opacity .4s ease} / Pointing at one simply lets the others recede - no scaling, no shadow. Speed is eased down in JS rather than hard-paused. / .logos-marquee:hover .logos-track img{opacity:.45} .logos-marquee .logos-track img:hover{opacity:1} @keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(max-width:720px){.logos-track img{height:58px;margin:0 24px}} / Paused by the visitor. Carried as a class as well as a Web Animations call so it still works where that API is missing - see nav.js. / .logos-track.is-paused{animation-play-state:paused} / ===== Pause controls (WCAG 2.2.2, Level A) ===== Always visible rather than revealed on hover: a control that only appears to a mouse does not exist on a touch screen, which is most of this traffic, so it would fail the criterion it is there to satisfy. 44px because that is a comfortable touch target, and the icon is small inside it so the control stays quiet. / .ram-motion-toggle{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;padding:0; border-radius:50%;cursor:pointer; font:inherit;-webkit-appearance:none;appearance:none; transition:background .15s ease, border-color .15s ease, color .15s ease; } .ram-motion-toggle svg{width:15px;height:15px;fill:currentColor;display:block} / currentColor gives white on the heroes and slate under the logo strip, both of which clear 3:1 against what sits behind them. / .ram-motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px} / On the heroes, bottom left, which is empty in practice because the hero centres its content on both axes and leaves this corner alone. The scroll cue is centred too, so the two never meet. Do not reason about this from the first .ahero rules in this file. Three later rules override them: .aheroinner is centred, not right-aligned, and its padding-bottom is reset to 0, while .ahero resolves to align-items :center rather than the flex-end declared higher up. Measured clearance from the copy is 154px at the worst case tried, not the ~60px those first declarations suggest. / .ram-motion-toggle--dark{ position:absolute;left:16px;bottom:12px;z-index:3; color:#fff;border:1px solid rgba(255,255,255,.75); background:rgba(11,18,38,.55); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); } .ram-motion-toggle--dark:hover{background:rgba(11,18,38,.82);border-color:#fff} / Under the logo strip. #666D7D is the token already measured for this job elsewhere in the file: 5.19:1 on white, 4.60:1 on canvas, so it clears the 3:1 that a control's boundary needs on either background. / .ram-motion-toggle--light{ display:flex;margin:20px auto 0; color:#666D7D;border:1px solid #666D7D;background:transparent; } .ram-motion-toggle--light:hover{color:var(--ink);border-color:var(--ink)} / Contact form notices + honeypot / .form-notice{padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:14px;font-weight:600} .form-notice.ok{background:#e8f7ee;color:#166534;border:1px solid #bbe5c8} .form-notice.bad{background:#fdecec;color:#991b1b;border:1px solid #f5c6c6} .hp-field{position:absolute !important;left:-9999px !important;top:-9999px !important;height:1px;width:1px;overflow:hidden} / Mobile: let wide pricing tables scroll inside their card instead of stretching the page / @media(max-width:720px){ table.wf{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} } / Legal / generic content pages / .legal-content{max-width:760px;margin:0 auto;font-size:16px;line-height:1.9;color:var(--text)} .legal-content h2{font-size:24px;margin:36px 0 12px;color:var(--ink)} .legal-content h3{font-size:19px;margin:26px 0 10px;color:var(--ink)} .legal-content p{margin:0 0 14px} .legal-content ul,.legal-content ol{margin:0 0 16px;padding-right:22px} .legal-content li{margin-bottom:8px} .legal-content a{color:var(--ink);text-decoration:underline} .legal-content .doc-updated{font-size:13px;color:var(--muted);margin-bottom:28px} .footer .bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px} / Respect a reduced-motion preference: no marquee, no menu movement / @media (prefers-reduced-motion: reduce){ / Stopping the scroll is not enough by itself. The track is four copies of the logo list, about 7500px wide, inside an overflow:hidden window with a fade at each edge - all of which exists only to make the loop seamless. Held still it shows roughly seven logos trailing into a fade, which reads as a stalled carousel rather than a deliberate layout. So when the motion goes, the machinery goes with it: one copy of the list, wrapped, centred, no edge fade. n+12 is the 11 logos in ram_client_logos() plus one. Add a logo and this needs the same bump - worst case until then is the fallback showing one fewer, which is cosmetic and only in this branch. / .logos-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:28px} .logos-track > :nth-child(n+12){display:none} .logos-marquee{-webkit-mask-image:none;mask-image:none} .logos-track img,.nav-menu .dropdown-menu{transition-duration:.01ms} .nav-menu .dropdown-menu{transform:none} .ahero__scroll .l{animation:none} } / Three per row on a phone. Two per row left the band about 636px tall, which is a lot of page for something decorative. The logos are all 120px tall but their widths run from 126 to 259, so laying them out on intrinsic width gives ragged rows and the widest alone is most of a 375px screen. Each cell therefore gets a fixed third instead, and the image is fitted inside it: max-width keeps the wide ones in their cell, max-height keeps the narrow ones from towering over them. The track already centres, so the last row of two sits in the middle rather than hanging off one edge. / @media (prefers-reduced-motion: reduce) and (max-width:720px){ .logos-track{column-gap:10px;row-gap:22px} .logos-track > {flex:0 0 calc(33.333% - 7px);display:flex;align-items:center;justify-content:center} /* A definite box plus object-fit, not auto sizing: the width and height attributes on these images are only presentational hints, so height:auto would override them and a lazy image would occupy nothing until it decoded - reintroducing exactly the load-time jitter the attributes are there to prevent. This way the row keeps its height from the first paint, and contain does the fitting without distorting anything. / .logos-track img{margin:0;width:100%;height:52px;object-fit:contain} } / The same still state again, this time for Shakuf's "stop animations" toggle. It cannot make prefers-reduced-motion match - nothing on a page can - so the two blocks above never fire on that path, and the visitor got the animation stopped while the track kept its 7500px width, its nowrap and its edge fade: precisely the stalled carousel those blocks exist to avoid. Duplicated rather than shared because a media query and an attribute selector cannot be folded into one rule. If the still state above changes, change it here in the same commit - that is the whole risk of this approach and the reason it is written down. / html[data-shakuf-motion="off"] .logos-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;row-gap:28px} html[data-shakuf-motion="off"] .logos-track > :nth-child(n+12){display:none} html[data-shakuf-motion="off"] .logos-marquee{-webkit-mask-image:none;mask-image:none} @media(max-width:720px){ html[data-shakuf-motion="off"] .logos-track{column-gap:10px;row-gap:22px} html[data-shakuf-motion="off"] .logos-track > {flex:0 0 calc(33.333% - 7px);display:flex;align-items:center;justify-content:center} html[data-shakuf-motion="off"] .logos-track img{margin:0;width:100%;height:52px;object-fit:contain} } /* Services list: numerals rather than boxed cards, using the same treatment as the vsteps further down the page so the homepage reads as one design. Two columns give the very uneven copy lengths room, instead of equal-height boxes that left a void under the short ones. / .svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 60px;text-align:right} .svc-list .it{display:flex;gap:20px;align-items:flex-start; padding-bottom:26px;border-bottom:1px solid var(--hairline-softer)} .svc-list .n{font-size:32px;color:var(--num);line-height:1;letter-spacing:-.02em;flex:0 0 46px} .svc-list h3{font-size:19px;color:var(--ink);margin:0 0 6px;letter-spacing:-.005em} .svc-list p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0} / last row carries no rule, so the section ends cleanly / .svc-list .it:nth-last-child(-n+2){border-bottom:0;padding-bottom:0} @media(max-width:820px){ .svc-list{grid-template-columns:1fr;gap:22px} / single column, so only the very last item loses its rule. Matching the nth-last-child specificity above, or that rule would win here too and leave item 5 without a separator. */ .svc-list .it:nth-last-child(-n+2){padding-bottom:22px;border-bottom:1px solid var(--hairline-softer)} .svc-list .it:last-child{border-bottom:0;padding-bottom:0} .svc-list .n{font-size:28px;flex-basis:40px} }