/* ============================================================================= Mainstream Media — msmedia.co.il Single stylesheet. Mobile-first: base = <768px, @media (min-width:768px) = up. Direction: is kept (Hebrew locale + legal pages). The visible marketing copy is English, so LTR is set per component. The brands and team grids deliberately inherit RTL — that is what lets one DOM order serve both breakpoints (first item lands top-right; mobile shows the first N). ========================================================================== */ /* ---------------------------------------------------------------- tokens --- */ :root { --red: #ed003b; --orange: #ff6833; --accent: #ff9333; --ink: #1a1a1a; --ink-soft: #444; --muted: #6a6a6a; --burger: #5a6784; --grad-hero: linear-gradient(var(--red) 12%, var(--orange) 100%); --grad-section: linear-gradient(var(--red) 0%, var(--orange) 100%); --grad-footer: linear-gradient(#000 0%, var(--red) 100%); --grad-cta: linear-gradient(90deg, #f5a623, #ff7a29, #ff4d4d, #e6002d); --font: 'Rubik', 'Segoe UI', Arial, sans-serif; --font-nav: 'Poppins', 'Rubik', sans-serif; /* Full-screen panel height. Scroll is locked while snapping, so dvh never shifts mid-gesture — it just tracks the actually-visible area. */ --vh: 100vh; --ease-ovl: cubic-bezier(0.22, 0.9, 0.2, 1); } @supports (height: 100dvh) { :root { --vh: 100dvh; } } /* ------------------------------------------------------------------ base --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); /* Every vertical rhythm on this site is built on a 1.5 base. */ line-height: 1.5; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; } /* height:auto is load-bearing — width/height attributes are presentational hints, so without it a CSS-set width leaves the attribute height in force and the image stretches. */ img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; } a { color: inherit; } h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; } ul { padding: 0; list-style: none; } /* Screen-reader only, zero layout impact (also used for the form honeypot). */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } video::-webkit-media-controls-enclosure, video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /* ------------------------------------------------------------------ snap --- */ /* One full-screen panel. main.js discovers these and animates between them. */ .snap { position: relative; height: var(--vh); display: flex; flex-direction: column; overflow: hidden; } /* Set by main.js once it owns the scroll; without JS the page scrolls natively. */ html.is-snapping, html.is-snapping body { overflow: hidden; overscroll-behavior: none; } /* ---------------------------------------------------------------- loader --- */ #loader { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: #000; transition: opacity 0.55s ease, visibility 0.55s ease; } #loader video { width: 80vw; max-width: 900px; pointer-events: none; } #loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } /* Already seen this session — never paint it. Class is set by an inline head script so there is no flash before the stylesheet applies. */ html.no-loader #loader { display: none; } body.is-loading { overflow: hidden; } @media (min-width: 1024px) { #loader video { width: 60vw; max-width: 1100px; } } /* ---------------------------------------------------------------- header --- */ .hdr { position: fixed; inset: 0 0 auto; z-index: 100; direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 12px 0 12px 10px; pointer-events: none; } .hdr > * { pointer-events: auto; } .hdr__logo { display: inline-flex; transition: opacity 0.25s ease; } .hdr__logo img { width: 47px; } /* Hidden over the panels whose own artwork owns the top-left corner. */ .hdr__logo.is-hidden, .hdr__logo.is-hidden-narrow { opacity: 0; pointer-events: none; } .burger { --line: 28px; --thick: 3px; --gap: 7px; position: relative; width: 56px; height: 56px; flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer; } .burger span { position: absolute; left: 50%; top: 50%; width: var(--line); height: var(--thick); border-radius: 999px; background: var(--burger); transform: translate(-50%, -50%); } .burger span:first-child { transform: translate(-50%, calc(-50% - var(--gap))); } .burger span:last-child { transform: translate(-50%, calc(-50% + var(--gap))); } @media (min-width: 768px) { .hdr { padding: 19px 35px; } .hdr__logo img { width: 78px; } /* The clients heading moves to a 150px gutter here, clear of the logo. */ .hdr__logo.is-hidden-narrow { opacity: 1; pointer-events: auto; } .burger { --line: 32px; --gap: 8px; width: 72px; height: 72px; } } /* --------------------------------------------------------------- overlay --- */ .ovl { position: fixed; inset: 0; z-index: 200; direction: ltr; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 3vw, 56px) clamp(20px, 5vw, 72px) 44px; background: #000; color: #f5f7fb; opacity: 0; transform: translateX(100%); pointer-events: none; transition: transform 0.7s var(--ease-ovl), opacity 0.22s ease; } .ovl.is-open { opacity: 1; transform: translateX(0); pointer-events: auto; } .ovl__top { display: flex; align-items: center; justify-content: space-between; } .ovl__top img { width: 48px; } .ovl__close { position: relative; width: 38px; height: 38px; flex-shrink: 0; padding: 0; border: 0; background: none; cursor: pointer; } .ovl__close span { position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: currentColor; } .ovl__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .ovl__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .ovl__nav { margin: auto; width: min(260px, 90%); display: flex; flex-direction: column; align-items: center; gap: clamp(34px, 5.2vh, 72px); transform: translateY(-60px); font-family: var(--font-nav); } .ovl__nav a { font-size: 20px; font-weight: 600; letter-spacing: 0.2px; text-decoration: none; opacity: 0.92; transform: translateX(34px); transition: opacity 0.45s ease, transform 0.45s ease; } .ovl.is-open .ovl__nav a { opacity: 1; transform: translateX(0); } .ovl.is-open .ovl__nav a:nth-child(1) { transition-delay: 0.16s; } .ovl.is-open .ovl__nav a:nth-child(2) { transition-delay: 0.24s; } .ovl.is-open .ovl__nav a:nth-child(3) { transition-delay: 0.32s; } .ovl.is-open .ovl__nav a:nth-child(4) { transition-delay: 0.40s; } .ovl.is-open .ovl__nav a:nth-child(5) { transition-delay: 0.48s; } .ovl__social { display: flex; justify-content: center; gap: clamp(22px, 3vw, 34px); margin-top: 20px; } .ovl__social a { display: inline-flex; width: 28px; height: 28px; opacity: 0.75; transition: opacity 0.3s ease, transform 0.3s ease; } .ovl__social a:hover { opacity: 1; transform: translateY(-2px); } .ovl__social svg { width: 100%; height: 100%; fill: currentColor; } body.is-locked { overflow: hidden; } @media (min-width: 768px) { .ovl__top img { width: 120px; } .ovl__close { width: 44px; height: 44px; } .ovl__close span { width: 26px; } .ovl__nav a { font-size: 16px; } } /* ------------------------------------------------------------------ hero --- */ .hero { direction: ltr; align-items: center; justify-content: center; padding-inline: 20px; background: var(--grad-hero); color: #fff; text-align: center; } .rotator { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 14px); font-size: clamp(30px, 4.5vw, 64px); line-height: 1.05; white-space: nowrap; } .rotator__pill { display: inline-flex; align-items: center; justify-content: center; padding: clamp(4px, 1vw, 10px) clamp(10px, 2vw, 22px); border: 1px solid rgb(255 255 255 / 0.14); border-radius: 10px; background: rgb(255 255 255 / 0.18); overflow: hidden; /* Width is measured and set per word by main.js so the pill glides. */ transition: width 420ms ease; } .rotator__word { display: inline-block; font-weight: 800; white-space: nowrap; transition: opacity 240ms ease, transform 240ms ease, filter 240ms ease; } .rotator__word.is-out { opacity: 0; transform: translateY(-8px); filter: blur(1px); } .rotator__word.is-in { opacity: 0; transform: translateY(8px); filter: blur(1px); } .hero__sub { margin: 21px 0 40px; font-size: clamp(30px, 3.5vw, 50px); font-weight: 300; line-height: 1; } /* Spinning star with "Let's talk" held upright in the middle. */ .badge { position: relative; display: grid; place-items: center; width: 200px; height: 200px; text-decoration: none; } .badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: spin 8s linear infinite; } .badge span { position: relative; font-size: 20px; font-weight: 800; color: #000; transition: transform 0.25s ease; } .badge:hover span { transform: scale(1.12); } @keyframes spin { to { transform: rotate(360deg); } } /* Phones get the smallest badge, tablets the largest, desktop settles at 150. */ @media (max-width: 480px) { .badge { width: 160px; height: 160px; } } @media (min-width: 768px) { .badge { width: 150px; height: 150px; } .badge span { font-size: 30px; } } /* --------------------------------------------------------------- clients --- */ /* Logo grids run edge to edge on mobile, so the gutter is per-element. */ .clients { justify-content: center; padding-bottom: 31px; } .clients__head { margin: 0 0 45px 20px; text-align: left; } .clients__head h2 { font-size: 30px; font-weight: 700; line-height: 1; } .clients__head p { margin-top: 15px; font-size: 15px; font-weight: 300; line-height: 1; } .clients__cols { display: flex; flex-direction: column; } .clients__squiggle { width: 100%; } .clients__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px) clamp(22px, 2.5vw, 34px); place-items: center; width: min(820px, 100%); margin-inline: auto; padding: clamp(24px, 3.5vw, 42px) clamp(16px, 2.2vw, 30px); } /* The cell fills its grid track and centres the mark, so every logo is scaled against the same box regardless of its own aspect ratio. */ .clients__grid figure { display: grid; place-items: center; width: 100%; height: 100%; } .clients__grid img { width: 100%; max-height: 50px; object-fit: contain; } /* Mobile stacks the groups; the single squiggle divides them. */ .clients__col:first-child .clients__squiggle { display: none; } .whoelse { position: relative; z-index: 2; align-self: center; margin-top: 8px; padding: 0; border: 0; background: none; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* White pad so the label stays readable once the wall is behind it. */ .whoelse::before { content: ''; position: absolute; inset: -26px -44px; z-index: -1; border-radius: 14px; background: #fff; opacity: 0; transition: opacity 60ms linear; } .whoelse.is-active::before { opacity: 1; } .whoelse__arrow { position: absolute; left: 100%; top: 50%; width: 106px; height: 24px; margin-left: 14px; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateY(-50%) translateX(-16px); transition: opacity 280ms ease, transform 280ms ease; pointer-events: none; } .whoelse:hover .whoelse__arrow, .whoelse:focus-visible .whoelse__arrow { opacity: 1; transform: translateY(-50%) translateX(0); } /* Full-viewport logo wall revealed on hover/focus of "Who else ?". */ .wall { position: fixed; inset: 0; z-index: 90; padding: 40px; background: #fff; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; } .wall.is-open { opacity: 1; visibility: visible; transition-delay: 0s, 0s; } .wall__grid { display: grid; width: 100%; height: 100%; } .wall__item { display: grid; place-items: center; min-height: 0; } /* Cleared where it would collide with the button. */ .wall__item.is-masked { visibility: hidden; } .wall__item img { width: 100%; height: 100%; padding: clamp(8px, 1.1vw, 20px); object-fit: contain; } @media (min-width: 768px) { /* Centred, not offset from the top: the live section is a flex box with align-items:center and zero padding, so every y moves by half the change in viewport height. A fixed padding-top is only correct at one window height. */ .clients { padding-block: 0; } /* Two full-bleed columns, no max-width — the squiggles are meant to reach the viewport edges at any width. A fixed column width happens to be right at 1440 (620 + 200 + 620) and wrong everywhere else; 1fr keeps it right. Each .clients__grid centres inside its column via the base margin-inline. */ .clients__cols { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 200px; } .clients__col:first-child .clients__squiggle { display: block; } .clients__head { margin: 0 0 57px 150px; } .clients__head h2 { font-size: 45px; font-weight: 600; } .clients__head p { margin-top: 20px; font-size: 19px; font-weight: 400; } .clients__grid { grid-template-columns: repeat(3, 170px); grid-auto-rows: 74px; gap: 0; place-items: stretch; width: fit-content; padding: clamp(4px, 0.7vw, 10px) clamp(2px, 0.4vw, 6px); } .clients__grid img { width: 150px; } .whoelse { margin-top: 22px; } } /* ------------------------------------------------------------- structure --- */ .structure { align-items: center; justify-content: center; padding-inline: 10px; background: var(--grad-section); color: #fff; text-align: center; } .structure h2 { font-size: 35px; font-weight: 600; line-height: 1; } .structure img { width: 100%; margin-top: 40px; } @media (min-width: 768px) { .structure h2 { font-size: 60px; } .structure img { width: 800px; margin-top: 60px; } } /* ------------------------------------------------------------------ team --- */ .team { justify-content: center; padding-inline: 50px; padding-bottom: 20px; } .team__head { text-align: left; } .team__head h2 { font-size: 30px; font-weight: 700; line-height: 1.05; color: #111; } .team__head p { margin-top: 11px; font-size: 15px; font-weight: 300; line-height: 1.2; color: #111; } .team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vh, 32px) clamp(14px, 1.3vw, 24px); margin-top: 28px; } /* Mobile home shows four; .team--all (the /team page) shows everyone. */ .team__grid > :nth-child(n + 5) { display: none; } .team--all .team__grid > :nth-child(n + 5) { display: block; } .member { text-align: center; } .member img { width: 100%; max-width: 128px; margin: 0 auto 10px; aspect-ratio: 1; border-radius: 999px; object-fit: cover; background: #ddd; } .member h3 { font-size: 16px; font-weight: 700; line-height: 1.15; color: #2f2f2f; } .member p { margin-top: 2px; font-size: 14px; line-height: 1.2; color: var(--muted); } /* "See everyone" — rule + chevron drawn in CSS, nudged on a loop. */ .team__cta { position: relative; display: flex; align-items: center; width: fit-content; margin: 28px auto 0; padding-right: 130px; font-size: 16px; font-weight: 700; color: var(--accent); text-decoration: none; } .team__cta::before, .team__cta::after { content: ''; position: absolute; top: 50%; animation: nudge 1.6s ease-in-out infinite; } .team__cta::before { right: 18px; width: 100px; height: 6px; border-radius: 999px; background: currentColor; transform: translateY(-50%); } .team__cta::after { right: 2px; width: 20px; height: 20px; border-top: 6px solid currentColor; border-right: 6px solid currentColor; transform: translateY(-50%) rotate(45deg); } @keyframes nudge { 0%, 100% { margin-right: 0; } 50% { margin-right: -10px; } } .team__star, .marker { display: none; } @media (min-width: 768px) { .team { padding-inline: 0; } .team { justify-content: flex-start; } /* The three columns run left-to-right (heading · members · People rail) while the member grid inside stays RTL so it fills from the right. */ .team__layout { direction: ltr; display: grid; grid-template-columns: 541px 541px 1fr; align-items: start; column-gap: 20px; padding: 199px 10px 0 169px; } .team__grid { direction: rtl; } .team__head h2 { font-size: 45px; font-weight: 600; color: #000; } .team__head p { margin-top: 20px; font-size: 19px; font-weight: 400; color: #000; } .team__star { display: block; width: 320px; height: 320px; margin: 24px 0 0 10px; animation: spin 10s linear infinite; } .team__panel { display: flex; flex-direction: column; } .team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 18px; align-content: start; height: 525px; margin-top: 0; } .team__grid > :nth-child(n + 5) { display: block; } .member img { max-width: 95px; margin-bottom: 6px; } .team__cta { align-self: flex-end; margin: 28px 0 0; } .marker { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 90px; height: 360px; /* Pushed to the right edge of the flexible third column. */ margin: 71px 0 0 auto; } .marker__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 18px; line-height: 1; color: #5a5a5a; } .marker__line { width: 2px; flex: 1; border-radius: 999px; background: #000; } .marker img { width: 36px; } } /* --------------------------------------------------------------- contact --- */ .contact { direction: ltr; justify-content: center; /* Gutter lives on the section so .contact__wrap's 1200px is content width, which is what sets the two column widths. */ padding: 0 12px 30px; } .contact__wrap { display: grid; gap: clamp(6px, 1.1svh, 10px); width: min(1200px, 100%); margin-inline: auto; } .contact__tag { display: inline-block; margin-bottom: clamp(5px, 0.8svh, 8px); font-size: clamp(13px, 3.2vw, 14px); font-weight: 600; background: var(--grad-cta); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .contact__wrap h2 { margin-bottom: clamp(7px, 1svh, 10px); font-size: clamp(22px, 6vw, 28px); font-weight: 500; line-height: 1.14; } /* Hidden on small screens — the panel is height-constrained. */ .contact__points { display: none; } .contact__points li { position: relative; margin-bottom: 10px; padding-left: 24px; color: var(--ink-soft); } .contact__points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad-cta); } .contact__chips { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vw, 10px); } .contact__chips a { padding: clamp(7px, 0.9svh, 10px) 11px; border: 1px solid #ddd; border-radius: 14px; font-size: clamp(12px, 3.3vw, 14px); font-weight: 500; line-height: 1.22; color: #333; text-decoration: none; transition: 0.3s; } .contact__chips a:hover { border-color: var(--orange); color: #e6002d; } .contact__addresses { margin-top: clamp(8px, 1.2svh, 12px); } .contact__addresses li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: clamp(5px, 0.7svh, 8px); font-size: clamp(12px, 3.3vw, 14px); line-height: 1.3; color: var(--ink-soft); } .contact__addresses li:last-child { margin-bottom: 0; } .contact__addresses svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; fill: #ff7a29; } .contact__card { padding: clamp(8px, 1.2svh, 12px) 10px; border-radius: 16px; background: #fff; box-shadow: 0 25px 70px rgb(0 0 0 / 0.08); } .field { display: flex; flex-direction: column; margin-bottom: clamp(3px, 0.6svh, 6px); } .field label { margin-bottom: 2px; font-size: clamp(12px, 3.2vw, 13px); line-height: 1; color: #555; } .field input, .field textarea { padding: clamp(5px, 0.7svh, 8px) 0; border: 0; border-bottom: 1px solid #ddd; background: none; font: inherit; font-size: clamp(13px, 3.6vw, 15px); line-height: 1.28; outline: none; transition: border-color 0.3s; } .field input:focus, .field textarea:focus { border-bottom-color: var(--orange); } .field textarea { min-height: clamp(36px, 6.2svh, 50px); resize: none; } .field__error { min-height: clamp(10px, 1.3svh, 13px); font-size: clamp(11px, 1.6vw, 12px); line-height: 1.15; color: #e6002d; } .consent { margin-bottom: clamp(5px, 0.8svh, 8px); } .consent label { display: flex; align-items: flex-start; gap: 7px; font-size: clamp(11px, 2.9vw, 12px); line-height: 1.32; color: var(--ink-soft); } .consent input { flex-shrink: 0; width: 13px; height: 13px; margin-top: 1px; } .consent a { color: #ff7a29; text-decoration: underline; } .consent a:hover { color: #e6002d; } .btn-send { width: 100%; margin-top: clamp(3px, 0.6svh, 6px); padding: clamp(9px, 1.2svh, 12px); border: 0; border-radius: 12px; font-size: clamp(14px, 4vw, 16px); font-weight: 600; line-height: 1.14; color: #fff; background: var(--grad-cta); cursor: pointer; transition: 0.3s; } .btn-send:hover { opacity: 0.9; } .btn-send[disabled] { opacity: 0.7; cursor: not-allowed; } .form__status { min-height: clamp(12px, 1.7svh, 15px); margin-top: clamp(4px, 0.7svh, 8px); font-size: clamp(11px, 1.7vw, 12px); line-height: 1.2; color: var(--ink-soft); } @media (min-width: 768px) { .contact { padding: clamp(24px, 4vh, 56px) 20px; } .contact__wrap { grid-template-columns: 1fr 1fr; align-items: stretch; gap: clamp(32px, 4vw, 72px); } .contact__col { align-self: start; } /* 23px, not 14 — the reference renders the tag as an inline-block whose line box adds ~9px of leading below it. */ .contact__tag { margin-bottom: 23px; font-size: 16px; } .contact__wrap h2 { margin-bottom: 22px; font-size: clamp(36px, 3.2vw, 46px); line-height: 1.12; } .contact__points { display: block; margin-bottom: 26px; } .contact__chips a { padding: 14px 24px; border-radius: 16px; font-size: 16px; line-height: 1.5; } .contact__addresses { margin-top: 24px; } .contact__addresses li { margin-bottom: 12px; font-size: 15px; line-height: 1.4; } .contact__card { max-height: calc(var(--vh) - clamp(48px, 8vh, 112px)); padding: clamp(24px, 3.6vh, 42px) clamp(24px, 2.6vw, 42px); border-radius: 24px; overflow: auto; scrollbar-gutter: stable; } .field { margin-bottom: 18px; } .field label { margin-bottom: 4px; font-size: 14px; } .field input, .field textarea { padding: 9px 0; font-size: 15px; line-height: 1.5; } .field textarea { min-height: 88px; } .field__error { min-height: 14px; font-size: 12px; } .consent { margin-bottom: 18px; } .consent label { gap: 10px; font-size: 13px; line-height: 1.5; } .consent input { width: 16px; height: 16px; margin-top: 3px; } .btn-send { margin-top: 2px; padding: 14px; border-radius: 14px; font-size: 16px; line-height: 1.5; } .form__status { min-height: 16px; margin-top: 8px; font-size: 13px; } } /* ---------------------------------------------------------------- footer --- */ .foot { direction: ltr; align-items: center; justify-content: flex-end; background: var(--grad-footer); color: #fff; text-align: center; } /* The auto top margin absorbs the leftover height, seating the smiley directly above the nav block — which is what pins the nav block to the bottom. */ .foot__smiley { width: 234px; margin-top: auto; } .foot__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(1200px, 100%); padding: 30px 20px; } .foot__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 60px); } .foot__nav a { font-size: 14px; font-weight: 600; text-decoration: none; } .foot__social { display: flex; justify-content: center; gap: 28px; } .foot__social a { display: flex; width: 22px; height: 22px; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease; } .foot__social a:hover { opacity: 1; transform: translateY(-2px); } .foot__social svg { width: 22px; height: 22px; fill: currentColor; } .foot__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 13px; } .foot__legal a { text-decoration: none; } /* Credit strip — mobile-only on the home page, always on inner pages. */ .credit { direction: ltr; display: flex; align-items: center; justify-content: center; /* stretch, because .foot centres its children and would otherwise shrink this strip to its text width instead of letting it bleed full width. */ align-self: stretch; gap: 6px; padding: 12px 20px; background: #000; color: #fff; } .credit span { font-size: 15px; line-height: 1; } .credit img { width: min(115px, 75vw); } @media (min-width: 768px) { .foot__smiley { width: 420px; } .foot__inner { gap: 28px; padding: 40px 48px; } .credit { gap: 10px; padding: 34px 20px; } .credit span { font-size: 22px; } .credit img { width: min(170px, 90vw); } } /* The home page hides the credit strip above mobile (matches the live site). */ @media (min-width: 768px) { .credit--home { display: none; } } /* ------------------------------------------------------ inner-page shell --- */ /* contact / team / legal: ordinary document flow, no snap, static footer. */ .foot--page { height: auto; display: block; padding: 0; background: var(--grad-section); } .foot--page .foot__inner { margin-inline: auto; } .page { display: flex; flex-direction: column; justify-content: center; min-height: var(--vh); padding-block: 110px 40px; } /* Keeps the shell's 110px top gap: the heading is the first thing on the page, so nothing else clears the fixed header for it. */ .page.team { justify-content: flex-start; } @media (min-width: 768px) { /* Above 768 the offset belongs to .team__layout, which sets its own 199px. */ .page.team { padding-block: 0 40px; } } .page--legal { direction: rtl; display: block; max-width: 860px; margin-inline: auto; padding: 140px 20px 80px; line-height: 1.7; color: var(--ink-soft); text-align: right; } .page--legal :is(h1, h2, h3) { margin: 36px 0 14px; font-weight: 600; color: var(--ink); } .page--legal h1 { margin-top: 0; font-size: clamp(28px, 5vw, 40px); } .page--legal h2 { font-size: clamp(20px, 3vw, 26px); } .page--legal h3 { margin-top: 24px; font-size: clamp(17px, 2.2vw, 20px); } .page--legal p { margin-bottom: 14px; } .page--legal ul { margin-bottom: 18px; padding-inline-start: 22px; list-style: disc; } .page--legal li { margin-bottom: 8px; } .page--legal dl { margin-bottom: 18px; } .page--legal dt { font-weight: 600; color: var(--ink); } .page--legal dd { margin-bottom: 8px; } .page--legal a { color: #e6002d; } /* ---------------------------------------------------------------- cookie --- */ .cookie { position: fixed; z-index: 300; inset: auto 12px 12px; direction: rtl; display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px 20px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 20px; background: var(--ink); box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); text-align: center; animation: cookie-in 0.4s ease both; } .cookie[hidden] { display: none; } @keyframes cookie-in { from { opacity: 0; transform: translateY(20px); } } .cookie.is-out { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .cookie__icon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; margin-inline: auto; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 14px; background: rgb(255 255 255 / 0.05); } .cookie__icon svg { width: 24px; height: 24px; fill: none; stroke: #ff7a29; stroke-width: 1.8; stroke-linejoin: round; } .cookie__text { flex: 1; min-width: 0; } .cookie h2 { margin-bottom: 6px; font-size: 17px; font-weight: 600; line-height: 1.2; color: #fff; } .cookie p { font-size: 14px; line-height: 1.5; color: #b8b8b8; } .cookie a { font-weight: 600; color: #ff7a29; text-decoration: underline; text-decoration-color: rgb(255 122 41 / 0.5); } .cookie button { flex-shrink: 0; width: 100%; padding: 14px; border: 0; border-radius: 12px; font-size: 15px; font-weight: 600; color: #fff; background: var(--grad-cta); cursor: pointer; transition: 0.3s; } .cookie button:hover { opacity: 0.9; transform: translateY(-1px); } @media (min-width: 601px) { .cookie { inset: auto 0 24px; flex-direction: row; align-items: center; gap: 20px; width: calc(100% - 48px); max-width: 560px; margin-inline: auto; padding: 22px 26px; text-align: right; } .cookie__icon { width: 48px; height: 48px; margin-inline: 0; } .cookie button { width: auto; padding: 13px 30px; } } /* ------------------------------------------------------------------ a11y --- */ @media (prefers-reduced-motion: reduce) { .badge img, .team__star, .team__cta::before, .team__cta::after { animation: none; } .rotator__pill, .rotator__word, .ovl, .ovl__nav a { transition: none; } }