/* ========================================================================== AXYROS CONSULTING — one stylesheet, three languages. Editorial register: the type is the subject. Extreme scale contrast between a high-contrast display serif and small letterspaced capitals, generous emptiness, hairlines instead of boxes, and exactly one accent colour used sparingly. No cards, no shadows, no rounded corners. Written in CSS logical properties throughout. There is no RTL override block and there must never be one: dir="rtl" on is the only thing that flips the layout. The section rail accent border is the canary — if it sits on the correct side in /ar/, the properties are right. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { --ink: #111111; --ink-deep: #0a0a0a; --paper: #ffffff; --accent: #07986d; --muted: #6b6b6b; --rule: #e2e0db; --rule-dark: #2a2a2a; --ochre: #b8863b; /* Playfair Display for display type: the brand note calls for a marked, Didot-like serif, and the scale contrast it gives against Archivo is what carries the editorial register. */ --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --lh-body: 1.6; --display-weight: 500; --display-tracking: -0.035em; --caps-tracking: 0.2em; --header-block-size: 4.25rem; --gutter: clamp(1.25rem, 4vw, 5rem); --measure: 32rem; --section-gap: clamp(4.5rem, 11vw, 9rem); } /* Arabic gets one family for everything: the serif/sans contrast that structures the Latin pages has no equivalent, so hierarchy comes from weight and size instead, and the body needs more leading at the same size. */ :root:lang(ar) { --font-display: "IBM Plex Sans Arabic", system-ui, sans-serif; --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif; --lh-body: 1.85; --display-weight: 600; --display-tracking: 0; --caps-tracking: 0; } /* ------------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: var(--lh-body); -webkit-font-smoothing: antialiased; /* `anywhere`, not `break-word`: only this value also shrinks the min-content size, which is what stops one long unbreakable string (a placeholder token, a URL, an email) from widening a grid track and forcing the whole page to scroll sideways on a narrow screen. */ overflow-wrap: anywhere; } h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } img { display: block; max-inline-size: 100%; block-size: auto; } svg { display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } a:hover { text-decoration-color: var(--accent); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* -------------------------------------------------------------- primitives */ .wrap { inline-size: 100%; max-inline-size: 88rem; margin-inline: auto; padding-inline: var(--gutter); } .skip { position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-120%); z-index: 10; } .skip:focus { transform: translateY(0); } /* The small letterspaced capital is the counterweight to the display serif; it appears as eyebrow, section kicker, meta line and label. */ .caps { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--caps-tracking); text-transform: uppercase; line-height: 1.4; } .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: 0.98; text-wrap: balance; } :lang(ar) .display { line-height: 1.3; } .lede { font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem); line-height: 1.6; max-inline-size: var(--measure); } :lang(ar) .lede { line-height: 1.85; } .rule { border: 0; border-block-start: 1px solid var(--rule); margin: 0; } .btn { display: inline-block; padding: 0.8rem 1.4rem; background: var(--ink); color: var(--paper); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn:hover { background: var(--accent); border-color: var(--accent); } :lang(ar) .btn { letter-spacing: 0; text-transform: none; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* The one emerald button on the site: the submit. Everything else that looks like a button is ink, so this one reads as the action. */ .btn--go { background: var(--accent); border-color: var(--accent); inline-size: 100%; padding-block: 1rem; font-size: 0.875rem; } .btn--go:hover { background: var(--ink); border-color: var(--ink); } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; inset-block-start: 0; z-index: 5; background: var(--paper); border-block-end: 1px solid var(--rule); } .site-header__inner { min-block-size: var(--header-block-size); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap; } .logo { display: flex; align-items: baseline; gap: 0.28em; text-decoration: none; margin-inline-end: auto; } .logo__bracket { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; color: var(--accent); line-height: 1; } .logo__word { font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1; } .nav { display: flex; gap: clamp(0.9rem, 2vw, 2rem); flex-wrap: wrap; } .nav a { font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--caps-tracking); text-transform: uppercase; color: var(--muted); text-decoration: none; } .nav a:hover { color: var(--ink); } .langs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.1em; } .langs li { display: flex; align-items: center; gap: 0.5rem; } .langs li + li::before { content: "\002F"; color: var(--rule); } .langs a { color: var(--muted); text-decoration: none; } .langs a:hover { color: var(--ink); } .langs [aria-current="page"] { color: var(--accent); font-weight: 600; } /* -------------------------------------------------------------------- hero */ .hero { padding-block: clamp(3.5rem, 9vw, 8rem) 0; } .hero__eyebrow { color: var(--muted); margin-block-end: clamp(1.5rem, 4vw, 3rem); } /* The headline runs the full measure of the page: at the top of the scale it is the page. */ .hero__headline { font-size: clamp(2.75rem, 9.2vw, 8.5rem); margin-block-end: clamp(2rem, 5vw, 3.5rem); } .hero__headline em { font-style: italic; font-weight: 400; color: var(--accent); } .hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 5vw, 5rem); align-items: end; padding-block-end: clamp(2.5rem, 6vw, 4.5rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.75rem; } /* ----------------------------------------------------------- photographic */ /* Full-bleed band. The figure only renders when the content file carries a src, so the page is complete and composed before any photography exists. */ .shot { position: relative; background: var(--ink-deep); overflow: hidden; } .shot img { inline-size: 100%; object-fit: cover; } .shot--band img { block-size: clamp(16rem, 42vw, 34rem); } .shot--tall img { block-size: 100%; min-block-size: clamp(20rem, 46vw, 36rem); } .shot__caption { display: flex; gap: 1rem; padding-block: 0.85rem; color: var(--muted); } .bleed { margin-inline: calc(var(--gutter) * -1); } /* ------------------------------------------------------------------- chart */ .chart { inline-size: 100%; } .chart svg { inline-size: 100%; block-size: auto; } .chart__axis { stroke: var(--rule); stroke-width: 1; } .chart__origin { fill: var(--ink); } .chart__line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 720; stroke-dashoffset: 720; animation: chart-draw 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .chart__line--spend { stroke: var(--ochre); } .chart__line--return { stroke: var(--accent); animation-delay: 0.25s; } .chart__label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; animation: chart-fade 0.6s ease-out 1.6s forwards; } .chart__label--spend { fill: var(--ochre); } .chart__label--return { fill: var(--accent); } .chart__caption { color: var(--muted); margin-block-start: 0.9rem; } @keyframes chart-draw { to { stroke-dashoffset: 0; } } @keyframes chart-fade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .chart__line { animation: none; stroke-dashoffset: 0; } .chart__label { animation: none; opacity: 1; } } @media (max-width: 46rem) { /* SVG text scales with the viewBox, so the desktop 13 renders near 8px on a phone and is unreadable. These are user units, not pixels. */ .chart__label { font-size: 20px; letter-spacing: 0.08em; } } /* ------------------------------------------------------------ entity strip */ .entity { border-block: 1px solid var(--rule); padding-block: 1.5rem; } .entity__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem clamp(1.5rem, 4vw, 3rem); } .entity__label { color: var(--muted); } .entity__value { font-size: 0.9375rem; margin-block-start: 0.4rem; } /* ---------------------------------------------------------------- sections */ .section { padding-block: var(--section-gap); scroll-margin-block-start: calc(var(--header-block-size) + 1rem); } .section + .section { border-block-start: 1px solid var(--rule); } .section__grid { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4.5rem); align-items: start; } .section__rail { position: sticky; inset-block-start: calc(var(--header-block-size) + 2rem); border-inline-start: 1px solid var(--accent); padding-inline-start: 0.9rem; color: var(--accent); } .section__index { color: var(--muted); display: block; margin-block-start: 0.4rem; } .section__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); max-inline-size: 22ch; margin-block-end: 1.25rem; } .section__note { color: var(--muted); font-size: 0.9375rem; max-inline-size: var(--measure); } /* ------------------------------------------------------- services (ladder) */ .ladder { margin-block-start: clamp(2.5rem, 6vw, 4.5rem); } .tier { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) minmax(0, 11rem); gap: 0.5rem clamp(1rem, 3vw, 2.5rem); padding-block: clamp(1.75rem, 4vw, 2.75rem); border-block-start: 1px solid var(--rule); align-items: start; } .tier:last-child { border-block-end: 1px solid var(--rule); } /* The ghost numeral is the editorial device that makes the ladder read as a sequence rather than a price list. */ .tier__num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.25rem); font-weight: 400; line-height: 0.85; color: var(--rule); font-variant-numeric: tabular-nums; transition: color 0.25s ease; } .tier:hover .tier__num { color: var(--accent); } .tier__name { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.15; } .tier__for { font-size: 0.875rem; color: var(--muted); margin-block-start: 0.4rem; } .tier__delivers { font-size: 0.9375rem; margin-block-start: 0.9rem; max-inline-size: 44ch; } .tier__price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; text-align: end; line-height: 1.1; } .tier__terms { color: var(--muted); text-align: end; margin-block-start: 0.5rem; } /* --------------------------------------------------- process (inverted) --- */ /* One dark section breaks the vertical rhythm of an otherwise white page and gives the method the weight it deserves. */ .section--invert { background: var(--ink-deep); color: var(--paper); border-block-start: 0; } .section--invert .section__rail { border-inline-start-color: var(--accent); } .section--invert .section__note { color: #9a9a9a; } .section--invert .section__index { color: #6f6f6f; } /* Four explicit columns, not auto-fit: auto-fit resolved to three and left the fourth step orphaned on a row of its own. */ .steps { margin-block-start: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem); } .step { border-block-start: 1px solid var(--rule-dark); padding-block-start: 1.1rem; } .step__num { color: var(--accent); font-variant-numeric: tabular-nums; } .step__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-block: 0.6rem 0.65rem; } .step__body { font-size: 0.9375rem; color: #9a9a9a; } /* -------------------------------------------------------------------- work */ .cases { margin-block-start: clamp(2.5rem, 6vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 4rem); } .case { min-inline-size: 0; border-block-start: 1px solid var(--rule); padding-block-start: 1.5rem; } .case__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--muted); } .case__headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; margin-block: 0.9rem 0.7rem; max-inline-size: 30ch; } .case__body { font-size: 0.9375rem; color: var(--muted); max-inline-size: var(--measure); } .case__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1.25rem 2rem; margin-block-start: 1.75rem; max-inline-size: 42rem; } .case__value { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.25rem); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; } .case__label { color: var(--muted); margin-block-start: 0.5rem; } /* ------------------------------------------------------------------- about */ .about__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .about__body { display: grid; gap: 1.1rem; max-inline-size: var(--measure); margin-block-start: 1.5rem; } .background { margin-block-start: clamp(2rem, 5vw, 3rem); } .background__item { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; padding-block: 1rem; border-block-start: 1px solid var(--rule); font-size: 0.9375rem; } .background__label { color: var(--muted); } /* ----------------------------------------------------------------- contact */ .contact__cta { font-family: var(--font-display); font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); font-weight: 500; letter-spacing: var(--display-tracking); line-height: 1.1; margin-block: 1.5rem 2rem; display: inline-block; text-decoration: none; border-block-end: 2px solid var(--accent); padding-block-end: 0.1em; } .contact__cta:hover { color: var(--accent); } :lang(ar) .contact__cta { letter-spacing: 0; line-height: 1.5; } /* ------------------------------------------------------------------- tools */ .tools { margin-block-start: clamp(2.5rem, 6vw, 4rem); display: grid; gap: clamp(2rem, 4vw, 3rem); } .tools__label { color: var(--muted); padding-block-end: 0.9rem; border-block-end: 1px solid var(--rule); } .tools__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1.1rem 1.5rem; margin-block-start: 1.25rem; } .tools__item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.875rem; } /* Each mark carries its own brand colour, set on the symbol in the sprite. The marks are the one place on the site where colour is not ours; everywhere else the emerald still stands alone. */ .tools__mark { flex: 0 0 auto; } /* ------------------------------------------------------------------- reach */ /* Email, phone and availability before the form: some people will never fill one in, and the fastest route must not be buried under nine fields. */ .reach { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); padding-block: clamp(1.5rem, 3vw, 2rem); border-block: 1px solid var(--rule); display: grid; gap: 0.6rem; justify-items: start; } .reach__primary { font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.9vw, 2.35rem); font-weight: 500; letter-spacing: var(--display-tracking); line-height: 1.15; text-decoration: none; border-block-end: 2px solid var(--accent); padding-block-end: 0.05em; overflow-wrap: anywhere; } .reach__primary:hover { color: var(--accent); } :lang(ar) .reach__primary { letter-spacing: 0; } .reach__badge { margin-block-start: 0.5rem; color: var(--accent); border: 1px solid var(--accent); padding: 0.4rem 0.7rem; } .reach__note { font-size: 0.875rem; color: var(--muted); } /* ----------------------------------------------------------------- capture */ /* The panel is the only enclosed object on a page made of hairlines, and that is deliberate: on a page where nothing else is boxed, the one box is where the eye goes. The emerald rule sits on the block-start edge, so it lands on top in every writing direction. */ .capture { margin-block-start: clamp(2rem, 5vw, 3.5rem); padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--ink); border-block-start: 4px solid var(--accent); max-inline-size: 42rem; } .capture__eyebrow { color: var(--accent); } .capture__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); margin-block: 0.6rem 1.25rem; max-inline-size: 18ch; } .capture__benefits { display: grid; gap: 0.7rem; padding-block-end: clamp(1.5rem, 3vw, 2rem); margin-block-end: clamp(1.5rem, 3vw, 2rem); border-block-end: 1px solid var(--rule); } /* The marker is a pseudo-element rather than a list-style so it can be emerald and sized independently of the text. */ .capture__benefit { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.75rem; font-size: 0.9375rem; line-height: 1.5; } .capture__benefit::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; margin-block-start: 0.45em; background: var(--accent); } .capture .form { margin-block-start: 0; max-inline-size: none; } /* -------------------------------------------------------------------- form */ /* Underlines, not boxes: a bordered input would be the only rounded, enclosed object on a page built from hairlines. */ .form { margin-block-start: clamp(1.5rem, 4vw, 2.5rem); max-inline-size: 34rem; } .form__row { display: grid; gap: 0.4rem; margin-block-end: 1.5rem; } .form__label { color: var(--muted); } .form__input { inline-size: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: transparent; border: 0; border-block-end: 1px solid var(--ink); padding-block: 0.6rem; padding-inline: 0; border-radius: 0; } .form__input:focus-visible { outline: 0; border-block-end-color: var(--accent); border-block-end-width: 2px; } .form__input--area { resize: vertical; min-block-size: 7rem; line-height: 1.6; } /* The honeypot must be reachable by a bot and invisible to everyone else, so it is moved out of view rather than display:none. */ .form__honey { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form__legend { color: var(--muted); margin-block-end: 1.75rem; } .form__req { color: var(--accent); } /* Two fields per row where they pair naturally, one column on a phone. */ .form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; } /* The arrow lives on a wrapper, not on the select: a select cannot carry a pseudo-element, and background-position has no logical values - using it would have forced a [dir="rtl"] override, which this stylesheet does not have and must not acquire. */ .form__select { position: relative; display: block; } .form__select::after { content: ""; position: absolute; inset-inline-end: 0.15rem; inset-block-start: 1.15rem; inline-size: 0.5rem; block-size: 0.5rem; border-inline-end: 1px solid var(--ink); border-block-end: 1px solid var(--ink); transform: rotate(45deg); pointer-events: none; } select.form__input { appearance: none; cursor: pointer; padding-inline-end: 1.75rem; } .form__fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; } .form__choices { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-block-start: 0.75rem; } .form__choice { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; cursor: pointer; } .form__choice input { accent-color: var(--accent); inline-size: 1rem; block-size: 1rem; } .form__send { margin-block-start: 0.5rem; cursor: pointer; font-family: inherit; } .form__note { font-size: 0.8125rem; color: var(--muted); margin-block-start: 1.25rem; max-inline-size: 34rem; } /* ----------------------------------------------------------------- contact */ .contact__list { margin-block-start: clamp(2.5rem, 5vw, 3.5rem); } .contact__row { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.3rem 1.5rem; padding-block: 1rem; border-block-start: 1px solid var(--rule); } .contact__label { color: var(--muted); padding-block-start: 0.2rem; } .contact__value { font-size: 0.9375rem; } /* ------------------------------------------------------------------ footer */ .site-footer { border-block-start: 1px solid var(--rule); padding-block: 2.5rem 3.5rem; font-size: 0.8125rem; color: var(--muted); } .site-footer p + p { margin-block-start: 0.5rem; } /* -------------------------------------------------------------- responsive */ @media (max-width: 62rem) { :root { --header-block-size: 3.25rem; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero__foot, .about__layout, .section__grid { grid-template-columns: minmax(0, 1fr); } .section__rail { position: static; } /* Row one keeps the logo and the CTA, row two the nav and the language switcher. Assigning the rows explicitly is what keeps the header the same height in all three languages: left to wrap freely it was 104px in English and 148px in French and Arabic, where the CTA label is longer. */ .site-header__inner { flex-wrap: wrap; column-gap: 0.75rem; row-gap: 0; padding-block: 0.4rem; } .site-header__inner::after { content: ""; order: 2; flex-basis: 100%; block-size: 0; } .logo__word { font-size: 1.15rem; } .logo__bracket { font-size: 1.3rem; } .nav { order: 3; flex: 1 1 0; min-inline-size: 0; flex-wrap: nowrap; gap: 1.1rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; padding-block: 0.25rem; } .langs { order: 4; gap: 0.4rem; } .langs li { gap: 0.4rem; } .langs a { padding-block: 0.7rem; padding-inline: 0.15rem; } .site-header .btn { padding: 0.6rem 0.9rem; font-size: 0.6875rem; } .section { scroll-margin-block-start: 8rem; } } @media (max-width: 46rem) { :root { --section-gap: clamp(3rem, 10vw, 5rem); } .steps { grid-template-columns: minmax(0, 1fr); } /* Two 152px columns is too narrow to type into on a phone. */ .form__pair { grid-template-columns: minmax(0, 1fr); } .tools__grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); } .hero__actions .btn { flex: 1 1 auto; text-align: center; } .tier { grid-template-columns: minmax(0, 3.5rem) minmax(0, 1fr); } .tier__price, .tier__terms { grid-column: 2; text-align: start; } .tier__price { margin-block-start: 1rem; } .tier__num { font-size: 2.25rem; } .entity__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .background__item, .contact__row { grid-template-columns: minmax(0, 1fr); } .contact__row { padding-block: 0.5rem; } .shot--band img { block-size: clamp(12rem, 52vw, 18rem); } } @media (max-width: 23.5rem) { :root { --gutter: 1rem; } .entity__list { grid-template-columns: minmax(0, 1fr); } .site-header .btn { padding-inline: 0.7rem; } } /* Touch input, at any width: every control gets a real 44px target. */ @media (pointer: coarse) { .btn { min-block-size: 44px; display: inline-flex; align-items: center; justify-content: center; } .nav a, .langs a, .logo { min-block-size: 44px; display: inline-flex; align-items: center; } /* inline-block, not inline-flex: these carry a long email and a URL that must still be able to break mid-string on a narrow screen. */ .contact__value a { display: inline-block; padding-block: 0.875rem; } } /* ---------------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }