/* ═══════════════════════════════════════════════════════════════════════ BENAA v2 — DESIGN DNA One stylesheet every page inherits. The v1 site carried its header in 42 separate files; changing the nav meant 42 edits, which is how the parity bugs got in. Everything shared lives here, once. The DNA, in one line: plum ground, gold light, Playfair over Inter, white headline with a gold italic line beneath it, frameless content, and one liquid-glass capsule for chrome. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ---- brand ---- */ --plum:#3F093D; --plum-deep:#1A0C1E; --plum-mid:#5C1259; --gold:#F4B651; --gold-dark:#C8860A; --gold-pale:#FFD68C; --gold-ink:#8A5A00; /* gold as TEXT on cream: C8860A only reaches 2.88:1 there, under the 3:1 minimum */ --cream:#FAF8F5; --cream-mid:#F0ECE6; --cream-dark:#E0D8CE; --ink:#080610; --text:#1A0C1A; --text-mid:#4A3045; --text-light:#8A7085; /* ---- type ---- */ --display:'Playfair Display',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,system-ui,sans-serif; --arabic:'Cairo','Noto Kufi Arabic',var(--sans); /* ---- rhythm ---- */ --gutter:clamp(1.25rem,4.5vw,5rem); --navh:92px; --section:clamp(4.5rem,11vh,8.5rem); --maxw:min(92rem,92vw); /* ---- layers: one scale, declared once, never guessed ---- */ --z-bg:0; --z-canvas:10; --z-grade:11; --z-bloom:12; --z-copy:20; --z-chrome:30; --z-nav:40; --z-drawer:45; --z-load:60; /* ---- motion ---- */ --ease:cubic-bezier(.22,.61,.36,1); --t-fast:200ms; --t-mid:320ms; --t-slow:640ms; } *,*::before,*::after{ box-sizing:border-box } html,body{ margin:0; padding:0 } /* v1's style.css applies `html{zoom:1.33}` above 1024px, because that site was built entirely in px and rendered small on a large monitor. v2 is built in rem/clamp/vw and already scales, so inheriting that zoom does two bad things: it renders every v2 page 1.33x larger than designed, and it breaks any JS that measures in CSS pixels — the nav fitter sized the capsule to 1408px and the browser drew it 1873px wide, hanging 224px off the left edge of every Arabic page. v2.css loads after style.css, so this wins on order. */ @media (min-width:1024px){ html{ zoom:1 } } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% } /* Horizontal overflow is contained on , NEVER on . v1 sets `html{overflow-x:clip}` AND `body{overflow-x:hidden}`. Because is then not `visible`, the body's overflow stops propagating to the viewport and BODY BECOMES ITS OWN SCROLL CONTAINER - which silently kills `position:sticky` for every descendant. That is what stopped the homepage hero pinning: the whole scroll-scrub stage just scrolled away. Measured before this fix: body computed `overflow: hidden auto`. */ html{ overflow-x:clip } body{ background:var(--cream); color:var(--text); font-family:var(--sans); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:visible; overflow-y:visible; } img,video,canvas,svg{ max-width:100%; display:block } a{ color:inherit } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px } .sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0 } /* Arabic pages swap the sans, keep the display serif for numerals only */ [lang="ar"] body, body[dir="rtl"]{ font-family:var(--arabic) } /* ═══════════════════════════════════════════════════════════ 1 · CHROME — one liquid-glass capsule Glass reads as glass only with all three of: a blur that SATURATES what is behind it, a specular top edge, and a bright inner ring at the rim. Two out of three looks like grey plastic. ═══════════════════════════════════════════════════════════ */ .nav{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:var(--z-nav); display:flex; align-items:center; width:auto; max-width:calc(100vw - 26px); padding:.4rem .45rem; border-radius:999px; background:rgba(255,255,255,.075); -webkit-backdrop-filter:blur(30px) saturate(200%); backdrop-filter:blur(30px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.13), inset 0 -8px 20px rgba(255,255,255,.05), 0 10px 36px rgba(10,4,14,.34), 0 2px 8px rgba(10,4,14,.22); transition:background var(--t-slow) ease, box-shadow var(--t-slow) ease; } .nav::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(177deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 58%, rgba(255,255,255,.035) 100%); } .nav.solid{ background:rgba(26,12,30,.46); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(244,182,81,.16), 0 12px 40px rgba(10,4,14,.46), 0 2px 8px rgba(10,4,14,.28); } /* Pages with a light hero need the dark capsule from the start */ .nav.on-light{ background:rgba(26,12,30,.52) } .brandmark{ order:2; flex:none; position:relative; z-index:2; display:block; line-height:0; text-decoration:none; margin:0 clamp(.9rem,2.2vw,2.4rem); transition:transform var(--t-mid) var(--ease); } .brandmark img{ height:clamp(52px,5vw,74px); width:auto; display:block; filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(10,4,14,.7)) drop-shadow(0 0 22px rgba(244,182,81,.28)); } .brandmark:hover{ transform:scale(1.04) } /* Both flanks share an equal basis so the mark lands on the true centre. `min-width:max-content` is load-bearing: without it a flank can shrink BELOW its content and the nowrap links overflow across the logo. */ .navlead{ order:1; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-start; min-width:max-content } .navpill{ display:flex; background:none; border:0; padding:0 } .navtools{ order:3; flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:.35rem; min-width:max-content } .links{ display:flex; align-items:center; gap:clamp(.15rem,.9vw,.9rem); list-style:none; margin:0; padding:0 } .links a{ display:block; font-size:.82rem; font-weight:400; color:rgba(255,255,255,.88); text-decoration:none; letter-spacing:.02em; padding:.68rem .72rem; border-radius:999px; cursor:pointer; white-space:nowrap; transition:color var(--t-fast) ease, background var(--t-fast) ease; } .links a:hover,.links a[aria-current="page"]{ color:#fff; background:rgba(255,255,255,.13) } .links a[aria-current="page"]{ color:var(--gold) } .circle{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:999px; color:rgba(255,255,255,.9); text-decoration:none; cursor:pointer; transition:color var(--t-fast) ease, background var(--t-fast) ease; } .circle:hover{ color:var(--gold); background:rgba(255,255,255,.15) } .circle svg{ width:18px; height:18px } .lang{ font-family:var(--display); font-size:1rem; width:auto; min-width:48px; padding:0 .7rem } .quote{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:.7rem 1.35rem; border-radius:999px; background:rgba(244,182,81,.94); color:var(--plum-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.22), 0 6px 22px rgba(244,182,81,.28); font-size:.73rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background 220ms ease, color 220ms ease, box-shadow 220ms ease; } .quote:hover{ background:#fff; color:var(--plum) } /* The bars are anchored to one centre point rather than stacked and then nudged toward each other. Stacked, they sat 9.6px apart while the open state moved them 5px, so they stopped short and drew a chevron instead of a cross. Converging on a shared centre is exact whatever the spacing computes to. */ .burger{ background:none; border:0; padding:0; display:none; position:relative } .burger span{ position:absolute; left:50%; top:50%; width:18px; height:1.5px; margin:-.75px 0 0 -9px; background:#fff; border-radius:1px; transition:transform 250ms ease, opacity 250ms ease; } .burger span:nth-child(1){ transform:translateY(-6px) } .burger span:nth-child(2){ transform:translateY(0) } .burger span:nth-child(3){ transform:translateY(6px) } .burger[aria-expanded="true"] span:nth-child(1){ transform:rotate(45deg) } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(.25) } .burger[aria-expanded="true"] span:nth-child(3){ transform:rotate(-45deg) } .nav.compact .navpill{ display:none } .nav.compact .burger{ display:inline-grid } .drawer{ position:fixed; top:calc(var(--navh) + 22px); left:50%; transform:translateX(-50%); width:min(30rem,calc(100vw - 28px)); z-index:var(--z-drawer); border-radius:28px; padding:.4rem 1.4rem 1.1rem; background:rgba(26,12,30,.74); -webkit-backdrop-filter:blur(30px) saturate(190%); backdrop-filter:blur(30px) saturate(190%); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.12), 0 22px 54px rgba(10,4,14,.5); display:none; max-height:68vh; overflow-y:auto; } .drawer.open{ display:block } .drawer ul{ list-style:none; margin:0; padding:0 } .drawer a{ display:block; padding:.95rem .2rem; font-family:var(--display); font-size:1.3rem; color:#fff; text-decoration:none; cursor:pointer; border-top:1px solid rgba(244,182,81,.18); } .drawer li:first-child a{ border-top:0 } .drawer a:hover{ color:var(--gold) } @media (max-width:900px){ .circle.wa,.circle.call{ display:none } .quote{ padding:.6rem .95rem; font-size:.66rem } .brandmark img{ height:46px } .brandmark{ margin:0 .7rem } } @media (max-width:560px){ .quote{ padding:.55rem .75rem; font-size:.6rem; letter-spacing:.08em } .lang{ min-width:38px; padding:0 .45rem; font-size:.92rem } .navtools{ gap:.2rem } .brandmark{ margin:0 .5rem } } @media (max-width:760px){ /* no-JS fallback; the fitter owns this */ .navpill{ display:none } .burger{ display:inline-grid } } /* ═══════════════════════════════════════════════════════════ 2 · TYPOGRAPHY — white headline, gold italic line beneath ═══════════════════════════════════════════════════════════ */ .kicker{ font-size:.76rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:500; margin:0 0 1.5rem; } .h-xl,.h-lg,.h-md{ font-family:var(--display); font-weight:400; letter-spacing:-.03em; margin:0 0 1.4rem; text-wrap:balance; } .h-xl{ font-size:clamp(2.8rem,10vw,9rem); line-height:.95; letter-spacing:-.035em } .h-lg{ font-size:clamp(2rem,6.2vw,5rem); line-height:1.04 } .h-md{ font-size:clamp(1.6rem,4vw,3rem); line-height:1.1 } .h-xl em,.h-lg em,.h-md em{ font-style:italic; color:var(--gold); display:block } .lede{ font-size:clamp(1.08rem,1.75vw,1.5rem); line-height:1.58; margin:0; max-width:46rem } /* On dark grounds the type carries its own light */ .on-dark{ color:#fff } .on-dark .h-xl,.on-dark .h-lg,.on-dark .h-md{ color:#fff; text-shadow: 0 0 1px rgba(255,255,255,.45), 0 0 11px rgba(255,255,255,.16), 0 0 27px rgba(244,182,81,.32), 0 0 66px rgba(244,182,81,.18), 0 2px 34px rgba(26,12,30,.74); } .on-dark .h-xl em,.on-dark .h-lg em,.on-dark .h-md em{ text-shadow:0 0 14px rgba(255,255,255,.14), 0 0 30px rgba(244,182,81,.58), 0 0 74px rgba(244,182,81,.30), 0 2px 34px rgba(26,12,30,.70); } .on-dark .lede{ color:rgba(255,255,255,.95); text-shadow:0 1px 16px rgba(26,12,30,.92), 0 0 3px rgba(26,12,30,.6) } .on-dark .kicker{ text-shadow:0 0 14px rgba(244,182,81,.30), 0 1px 12px rgba(26,12,30,.85) } /* On cream the plum does the work and no glow is needed */ .on-light .h-xl,.on-light .h-lg,.on-light .h-md{ color:var(--plum) } .on-light .lede{ color:var(--text-mid) } /* ═══════════════════════════════════════════════════════════ 3 · PAGE HERO — inner pages Same grammar as the homepage: an image, a plum grade, a gold bloom behind the copy. No page starts with a bare band of colour. ═══════════════════════════════════════════════════════════ */ .phero{ position:relative; min-height:clamp(30rem,62vh,46rem); display:grid; align-content:center; padding:calc(var(--navh) + 3rem) var(--gutter) clamp(3rem,7vh,5rem); background:var(--plum-deep); overflow:hidden; isolation:isolate; } .phero-bg{ position:absolute; inset:0; z-index:var(--z-bg); width:100%; height:100%; object-fit:cover; } .phero-grade{ position:absolute; inset:0; z-index:var(--z-grade); pointer-events:none; background: linear-gradient(104deg, rgba(26,12,30,.72) 0%, rgba(26,12,30,.34) 52%, rgba(26,12,30,.12) 82%), linear-gradient(180deg, rgba(26,12,30,.78) 0%, rgba(26,12,30,.30) 30%, rgba(26,12,30,.42) 68%, rgba(26,12,30,.92) 100%); } .phero-bloom{ position:absolute; inset:0; z-index:var(--z-bloom); pointer-events:none; background:radial-gradient(58% 52% at var(--bx,30%) 52%, rgba(244,182,81,.26) 0%, rgba(244,182,81,.13) 32%, rgba(255,214,140,.05) 52%, rgba(244,182,81,0) 70%); mix-blend-mode:screen; filter:blur(26px); } .phero-in{ position:relative; z-index:var(--z-copy); width:100%; max-width:var(--maxw); margin:0 auto } /* the thin gold rule that hands a hero over to the page */ .phero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:var(--z-copy); background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent); } /* ═══════════════════════════════════════════════════════════ 4 · SECTIONS ═══════════════════════════════════════════════════════════ */ .sec{ padding:var(--section) var(--gutter) } .sec-in{ max-width:var(--maxw); margin:0 auto } .sec--cream{ background:var(--cream) } .sec--mid{ background:var(--cream-mid) } .sec--plum{ background:var(--plum-deep); color:#fff } .sec--ink{ background:var(--ink); color:#fff } .hair{ width:64px; height:1px; background:var(--gold); margin:0 0 2.6rem } /* ═══════════════════════════════════════════════════════════ 5 · FRAMELESS ITEMS — the house rule: no cards, no borders, no shadows. A gold hairline above, and nothing else. ═══════════════════════════════════════════════════════════ */ .grid{ display:grid; gap:0 clamp(2rem,4.5vw,4.5rem); grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); margin-top:2.8rem } @media (min-width:1024px){ .grid.three{ grid-template-columns:repeat(3,1fr) } } @media (min-width:1024px){ .grid.two{ grid-template-columns:repeat(2,1fr) } } .item{ padding:1.9rem 0 2.1rem; border-top:1px solid rgba(244,182,81,.55) } .item .n{ font-size:.74rem; letter-spacing:.26em; color:var(--gold-dark); display:block; margin-bottom:.6rem } .item h3{ font-family:var(--display); font-weight:400; font-size:clamp(1.45rem,2.5vw,2.15rem); line-height:1.12; color:var(--plum); margin:0 0 .5rem } .item p{ font-size:clamp(1rem,1.15vw,1.18rem); line-height:1.58; color:var(--text-mid); margin:0 } .on-dark .item .n{ color:var(--gold) } .on-dark .item h3{ color:#fff; text-shadow:0 0 18px rgba(244,182,81,.24), 0 2px 20px rgba(26,12,30,.8) } .on-dark .item p{ color:rgba(255,255,255,.92); text-shadow:0 1px 14px rgba(26,12,30,.95) } /* pressable — the affordance is the rule drawing itself, never a box */ a.item{ position:relative; display:block; text-decoration:none; cursor:pointer; padding-right:1.6rem; transition:transform 260ms var(--ease) } a.item::after{ content:''; position:absolute; left:0; top:-1px; height:1px; width:0; background:var(--gold); box-shadow:0 0 12px rgba(244,182,81,.75); transition:width 420ms var(--ease) } a.item:hover::after,a.item:focus-visible::after{ width:100% } a.item:hover h3,a.item:focus-visible h3{ color:var(--gold-dark) } .on-dark a.item:hover h3,.on-dark a.item:focus-visible h3{ color:var(--gold) } a.item:hover{ transform:translateY(-3px) } a.item:active{ transform:translateY(0) } a.item h3,a.item p{ transition:color 220ms ease } .go{ width:15px; height:15px; margin-left:.45rem; vertical-align:baseline; opacity:0; transform:translateX(-7px); transition:opacity 260ms ease, transform 360ms var(--ease) } a.item:hover .go,a.item:focus-visible .go{ opacity:1; transform:translateX(0) } @media (hover:none){ .go{ opacity:.55; transform:none } a.item::after{ width:100%; opacity:.5 } } /* ---- Phosphor glyphs: bare, never in a tile or a circle ---- */ .ico{ width:clamp(34px,3.2vw,46px); height:clamp(34px,3.2vw,46px); display:block; margin:0 0 1.15rem; fill:currentColor; /* a Phosphor path has no fill of its own */ color:var(--plum); flex:none; transition:filter 280ms ease, transform 320ms var(--ease), color 220ms ease; } .on-dark .ico{ color:#fff; filter:drop-shadow(0 0 11px rgba(244,182,81,.60)) drop-shadow(0 0 30px rgba(244,182,81,.34)) } a.item:hover .ico,a.item:focus-visible .ico{ color:var(--gold); transform:translateY(-3px) scale(1.06) } @media (max-width:620px){ .ico{ width:32px; height:32px; margin-bottom:.9rem } } /* ═══════════════════════════════════════════════════════════ 6 · ACTIONS ═══════════════════════════════════════════════════════════ */ .cta{ display:inline-flex; align-items:center; gap:.7rem; min-height:50px; margin-top:2.4rem; padding:.95rem 2.1rem; border-radius:999px; background:var(--gold); color:var(--plum-deep); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 8px 26px rgba(244,182,81,.26); transition:background 200ms ease, color 200ms ease, transform 260ms var(--ease); } .cta:hover{ background:#fff; color:var(--plum); transform:translateY(-2px) } .cta svg{ width:16px; height:16px; flex:none } .cta--ghost{ background:none; color:var(--plum); box-shadow:inset 0 0 0 1px rgba(63,9,61,.3); } .on-dark .cta--ghost{ color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.34) } .cta--ghost:hover{ background:var(--plum); color:#fff } /* ═══════════════════════════════════════════════════════════ 7 · REVEAL — content arrives, it does not just appear ═══════════════════════════════════════════════════════════ */ /* Content is VISIBLE by default and only hidden once we know scripting is alive (the inline head script adds .js before first paint). Parking .rv at opacity:0 unconditionally means one script failure renders a whole page blank — and on the quote form that is lost revenue. */ .rv{ opacity:1; transform:none } html.js .rv{ opacity:0; transform:translate3d(0,26px,0); transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--ease) } html.js .rv.in{ opacity:1; transform:none } .rv:nth-child(2){ transition-delay:80ms } .rv:nth-child(3){ transition-delay:160ms } .rv:nth-child(4){ transition-delay:240ms } .rv:nth-child(5){ transition-delay:320ms } .rv:nth-child(6){ transition-delay:400ms } /* ═══════════════════════════════════════════════════════════ 8 · FOOTER ═══════════════════════════════════════════════════════════ */ .foot{ position:relative; background:var(--ink); color:#fff; padding:clamp(3.5rem,9vh,6rem) var(--gutter) 2.5rem } .foot::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent) } .foot-in{ max-width:var(--maxw); margin:0 auto } .foot h2{ font-family:var(--display); font-weight:400; font-size:clamp(1.8rem,4vw,2.8rem); color:#fff; margin:0 0 .8rem; letter-spacing:-.02em; text-shadow:0 0 22px rgba(244,182,81,.20), 0 0 56px rgba(244,182,81,.10) } .foot h2 em{ font-style:italic; color:var(--gold); display:block } .foot .sub{ color:rgba(255,255,255,.62); margin:0 0 2.5rem; max-width:34rem } .foot-top{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)) } .fcol h4{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 .9rem; font-weight:600 } .fcol p{ margin:0 0 .45rem; color:rgba(255,255,255,.62); font-size:.95rem } .fcol a{ margin:0; color:rgba(255,255,255,.62); font-size:.95rem; text-decoration:none; display:flex; align-items:center; min-height:44px; /* real touch target */ cursor:pointer; transition:color var(--t-fast) ease; } .fcol a:hover{ color:#fff } .foot-bot{ margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(244,182,81,.18); display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.38) } /* ═══════════════════════════════════════════════════════════ 9 · RTL — the Arabic mirror is 21 of the 42 pages, so it is part of the DNA, not an afterthought. ═══════════════════════════════════════════════════════════ */ [dir="rtl"] .item{ padding-right:0 } [dir="rtl"] a.item{ padding-right:0; padding-left:1.6rem } [dir="rtl"] a.item::after{ left:auto; right:0 } [dir="rtl"] .go{ margin-left:0; margin-right:.45rem; transform:translateX(7px) scaleX(-1) } [dir="rtl"] a.item:hover .go{ transform:translateX(0) scaleX(-1) } [dir="rtl"] .hair{ margin-left:auto; margin-right:0 } [dir="rtl"] .cta svg{ transform:scaleX(-1) } [dir="rtl"] .phero-grade{ background: linear-gradient(256deg, rgba(26,12,30,.72) 0%, rgba(26,12,30,.34) 52%, rgba(26,12,30,.12) 82%), linear-gradient(180deg, rgba(26,12,30,.78) 0%, rgba(26,12,30,.30) 30%, rgba(26,12,30,.42) 68%, rgba(26,12,30,.92) 100%); } [dir="rtl"] .phero-bloom{ --bx:70% } /* A number, range or measurement inside Arabic prose must be isolated from the paragraph's direction, or it renders REVERSED - "3-5 days" reads as "5-3". Measured on a live page before this fix: the first digit sat 17px to the RIGHT of the second. */ /* `isolate` alone is NOT enough, and this is the trap: it makes the span its own bidi run, but the content inside still inherits the paragraph's RTL direction, so "8:00 - 17:00" still lays out right-to-left. Measured after isolate-only: 3 of 4 ranges still reversed. It needs the direction set too. `display:inline-block` would also work but breaks line-wrapping. */ .num{ unicode-bidi:isolate; direction:ltr } [dir="rtl"] bdi,[dir="rtl"] .num,[dir="rtl"] time, [dir="rtl"] [data-num]{ unicode-bidi:isolate; direction:ltr } /* Arabic script is cursive: letter-spacing breaks the joins. v1 shipped this bug across 33 classes before it was caught. */ [dir="rtl"] .kicker,[dir="rtl"] .item .n,[dir="rtl"] .cta, [dir="rtl"] .quote,[dir="rtl"] .fcol h4{ letter-spacing:0 } /* ═══════════════════════════════════════════════════════════ 10 · REDUCED MOTION ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } .rv{ opacity:1 !important; transform:none !important; transition:none } .brandmark:hover,a.item:hover,.cta:hover{ transform:none } .phero-bloom{ display:none } } /* ═══════════════════════════════════════════════════════════ 11 · PRINT — cost guides get printed by clients ═══════════════════════════════════════════════════════════ */ @media print{ /* Keep the footer contact details: a printed cost guide with no phone number on it is the one failure that matters on paper. Only the navigational column is dropped. */ .nav,.drawer,.phero-bloom{ display:none !important } .foot{ background:#fff !important; color:#000 !important; padding-top:1rem } .foot::before{ display:none } .foot h2,.foot .sub,.fcol:nth-child(4){ display:none } .fcol h4{ color:#000 !important } .fcol a,.fcol p{ color:#000 !important; min-height:0 } body{ background:#fff; color:#000 } .phero{ min-height:0; padding:1rem 0 } .phero-bg,.phero-grade{ display:none } .on-dark *{ color:#000 !important; text-shadow:none !important } a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; color:#555 } } /* ═══════════════════════════════════════════════════════════ 12 · STAGE TIMELINE The ten stages of a villa build, as one gold line across the full width with milestones alternating above and below it. This is the spine of the cost-guide set: a reader should see the whole journey at once and pick their stage off it. ═══════════════════════════════════════════════════════════ */ .tl{ position:relative; padding:clamp(3rem,7vh,4.5rem) 0 } .tl-scroll{ overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; -webkit-overflow-scrolling:touch; padding:0 var(--gutter) } .tl-scroll::-webkit-scrollbar{ height:3px } .tl-scroll::-webkit-scrollbar-thumb{ background:rgba(244,182,81,.4); border-radius:3px } .tl-track{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(6.5rem,1fr); min-width:min(100%, 58rem); min-height:clamp(15rem,26vh,19rem); max-width:var(--maxw); margin:0 auto; } /* the rail itself — drawn left to right when the block arrives */ .tl-line{ position:absolute; left:0; right:0; top:50%; height:2px; border-radius:2px; background:linear-gradient(90deg, rgba(244,182,81,0) 0%, var(--gold) 6%, var(--gold) 94%, rgba(244,182,81,0) 100%); box-shadow:0 0 10px rgba(244,182,81,.55), 0 0 30px rgba(244,182,81,.28); transform:scaleX(0); transform-origin:left center; transition:transform 1500ms var(--ease); } [dir="rtl"] .tl-line{ transform-origin:right center } .tl.in .tl-line{ transform:scaleX(1) } /* one milestone */ .tl-s{ position:relative; display:block } /* the node sitting ON the rail */ .tl-dot{ position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(26,12,30,.85), 0 0 12px rgba(244,182,81,.9), 0 0 30px rgba(244,182,81,.45); opacity:0; transform:scale(.3); transition:opacity 420ms ease, transform 520ms var(--ease), box-shadow 300ms ease; } .tl.in .tl-s .tl-dot{ opacity:1; transform:scale(1) } /* the stem lifting the label off the rail — up on odds, down on evens */ .tl-stem{ position:absolute; left:50%; width:1px; margin-left:-.5px; background:linear-gradient(var(--gold), rgba(244,182,81,.15)); box-shadow:0 0 8px rgba(244,182,81,.45); transform:scaleY(0); transition:transform 560ms var(--ease); } .tl-s:nth-of-type(odd) .tl-stem{ bottom:50%; height:clamp(2.6rem,5vh,3.6rem); transform-origin:bottom } .tl-s:nth-of-type(even) .tl-stem{ top:50%; height:clamp(2.6rem,5vh,3.6rem); transform-origin:top; background:linear-gradient(rgba(244,182,81,.15), var(--gold)) } .tl.in .tl-s .tl-stem{ transform:scaleY(1) } /* the label block */ .tl-c{ position:absolute; left:50%; transform:translateX(-50%) translateY(10px); width:max-content; max-width:9.5rem; text-align:center; text-decoration:none; display:block; padding:.35rem .4rem; border-radius:10px; opacity:0; transition:opacity 480ms ease, transform 560ms var(--ease), background 200ms ease; } .tl-s:nth-of-type(odd) .tl-c{ bottom:calc(50% + clamp(2.6rem,5vh,3.6rem)) } .tl-s:nth-of-type(even) .tl-c{ top:calc(50% + clamp(2.6rem,5vh,3.6rem)) } .tl.in .tl-s .tl-c{ opacity:1; transform:translateX(-50%) translateY(0) } .tl-n{ display:block; font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; color:var(--gold); margin-bottom:.35rem; text-shadow:0 0 16px rgba(244,182,81,.5), 0 0 40px rgba(244,182,81,.25); } .tl-l{ display:block; font-family:var(--sans); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.88); line-height:1.35; text-shadow:0 1px 10px rgba(10,4,14,.9); } [dir="rtl"] .tl-l{ letter-spacing:0; font-size:.82rem } /* a stage with a guide behind it is pressable; the rest are markers */ a.tl-c{ cursor:pointer; min-height:44px } a.tl-c:hover,a.tl-c:focus-visible{ background:rgba(244,182,81,.10) } a.tl-c:hover .tl-n,a.tl-c:focus-visible .tl-n{ color:#fff; text-shadow:0 0 20px rgba(244,182,81,.85), 0 0 48px rgba(244,182,81,.4) } a.tl-c:hover ~ .tl-dot{ transform:scale(1.5); box-shadow:0 0 0 4px rgba(26,12,30,.85), 0 0 18px rgba(244,182,81,1), 0 0 44px rgba(244,182,81,.6) } .tl-s:has(a.tl-c) .tl-dot{ width:13px; height:13px; margin:-6.5px 0 0 -6.5px } span.tl-c .tl-n{ color:rgba(244,182,81,.55); text-shadow:0 0 12px rgba(244,182,81,.22) } span.tl-c .tl-l{ color:rgba(255,255,255,.55) } .tl-s:has(span.tl-c) .tl-dot{ background:rgba(244,182,81,.5); box-shadow:0 0 0 4px rgba(26,12,30,.85), 0 0 8px rgba(244,182,81,.4) } /* stagger: each milestone lands after the one before it */ .tl-s:nth-of-type(1) .tl-dot,.tl-s:nth-of-type(1) .tl-stem,.tl-s:nth-of-type(1) .tl-c{ transition-delay:180ms } .tl-s:nth-of-type(2) .tl-dot,.tl-s:nth-of-type(2) .tl-stem,.tl-s:nth-of-type(2) .tl-c{ transition-delay:300ms } .tl-s:nth-of-type(3) .tl-dot,.tl-s:nth-of-type(3) .tl-stem,.tl-s:nth-of-type(3) .tl-c{ transition-delay:420ms } .tl-s:nth-of-type(4) .tl-dot,.tl-s:nth-of-type(4) .tl-stem,.tl-s:nth-of-type(4) .tl-c{ transition-delay:540ms } .tl-s:nth-of-type(5) .tl-dot,.tl-s:nth-of-type(5) .tl-stem,.tl-s:nth-of-type(5) .tl-c{ transition-delay:660ms } .tl-s:nth-of-type(6) .tl-dot,.tl-s:nth-of-type(6) .tl-stem,.tl-s:nth-of-type(6) .tl-c{ transition-delay:780ms } .tl-s:nth-of-type(7) .tl-dot,.tl-s:nth-of-type(7) .tl-stem,.tl-s:nth-of-type(7) .tl-c{ transition-delay:900ms } .tl-s:nth-of-type(8) .tl-dot,.tl-s:nth-of-type(8) .tl-stem,.tl-s:nth-of-type(8) .tl-c{ transition-delay:1020ms } .tl-s:nth-of-type(9) .tl-dot,.tl-s:nth-of-type(9) .tl-stem,.tl-s:nth-of-type(9) .tl-c{ transition-delay:1140ms } .tl-s:nth-of-type(10) .tl-dot,.tl-s:nth-of-type(10) .tl-stem,.tl-s:nth-of-type(10) .tl-c{ transition-delay:1260ms } /* Never hide the stages behind an animation that cannot run. */ @media (prefers-reduced-motion: reduce){ .tl-line{ transform:scaleX(1) } .tl-s .tl-dot,.tl-s .tl-stem,.tl-s .tl-c{ opacity:1; transform:none; transition:none } .tl-s .tl-stem{ transform:scaleY(1) } .tl-s:nth-of-type(odd) .tl-c{ transform:translateX(-50%) } .tl-s:nth-of-type(even) .tl-c{ transform:translateX(-50%) } } html:not(.js) .tl-line{ transform:scaleX(1) } html:not(.js) .tl-dot,html:not(.js) .tl-c{ opacity:1 } html:not(.js) .tl-stem{ transform:scaleY(1) } /* Where the reader actually is. The rail carried this state and it is the most useful thing on the timeline — losing it would make ten guides feel like a list instead of a journey. */ .tl-s.is-now .tl-dot{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px; background:#fff; box-shadow:0 0 0 4px rgba(26,12,30,.9), 0 0 0 7px rgba(244,182,81,.75), 0 0 18px rgba(244,182,81,1), 0 0 48px rgba(244,182,81,.55); } .tl-s.is-now .tl-n{ color:#fff; text-shadow:0 0 18px rgba(244,182,81,.9), 0 0 46px rgba(244,182,81,.45) } .tl-s.is-now .tl-l{ color:#fff; font-weight:600 } .tl-s.is-now .tl-stem{ width:2px; margin-left:-1px } .tl-s.is-done .tl-n{ color:var(--gold) } .tl-s.is-done .tl-l{ color:rgba(255,255,255,.82) } /* ── Process variant: the same rail, carrying a full stage ────────────── Service pages have five stages with an icon, a title and a sentence, so the milestones are cards rather than labels. Three of the six sit on cream, so this has to work on a light ground as well as a dark one. */ .tl--proc .tl-track{ grid-auto-columns:minmax(11.5rem,1fr); min-height:clamp(26rem,46vh,32rem); min-width:min(100%, 62rem); } .tl--proc .tl-s:nth-of-type(odd) .tl-stem, .tl--proc .tl-s:nth-of-type(even) .tl-stem{ height:clamp(3rem,6vh,4.5rem) } .tl--proc .tl-s:nth-of-type(odd) .tl-c{ bottom:calc(50% + clamp(3rem,6vh,4.5rem)) } .tl--proc .tl-s:nth-of-type(even) .tl-c{ top:calc(50% + clamp(3rem,6vh,4.5rem)) } .tl--proc .tl-c{ max-width:15rem; padding:.5rem .6rem } .tl--proc .tl-n{ font-size:clamp(1.15rem,1.9vw,1.6rem); margin-bottom:.5rem } .tl--proc .ico{ width:clamp(28px,2.4vw,36px); height:clamp(28px,2.4vw,36px); margin:0 auto .6rem } .tl-t{ display:block; font-family:var(--display); font-weight:400; font-size:clamp(1.02rem,1.5vw,1.3rem); line-height:1.2; margin:0 0 .4rem } .tl-p{ display:block; font-family:var(--sans); font-size:.86rem; line-height:1.5; margin:0 } /* on a dark ground */ .on-dark .tl-t{ color:#fff; text-shadow:0 0 16px rgba(244,182,81,.22), 0 2px 18px rgba(10,4,14,.85) } .on-dark .tl-p{ color:rgba(255,255,255,.86); text-shadow:0 1px 12px rgba(10,4,14,.9) } .on-dark .tl--proc .ico{ color:#fff } /* on cream — gold still carries the rail, but the type turns plum and the neon comes right down or it just looks smudged on a light field */ .on-light .tl-line{ box-shadow:0 0 8px rgba(244,182,81,.45) } .on-light .tl-n{ color:var(--gold-dark); text-shadow:none } .on-light .tl-l{ color:var(--text-mid); text-shadow:none } .on-light .tl-t{ color:var(--plum); text-shadow:none } .on-light .tl-p{ color:var(--text-mid); text-shadow:none } .on-light .tl--proc .ico{ color:var(--plum); filter:none } .on-light .tl-dot{ box-shadow:0 0 0 4px var(--cream), 0 0 10px rgba(244,182,81,.75) } .on-light .tl-s.is-now .tl-dot{ background:var(--plum); box-shadow:0 0 0 4px var(--cream), 0 0 0 7px rgba(244,182,81,.8), 0 0 16px rgba(244,182,81,.8) } .on-light a.tl-c:hover{ background:rgba(244,182,81,.14) } .on-light a.tl-c:hover .tl-n{ color:var(--plum); text-shadow:none } /* the cyclical one: maintenance ends where the next year begins, so the rail returns instead of stopping */ .tl--cycle .tl-line{ background:linear-gradient(90deg, rgba(244,182,81,0) 0%, var(--gold) 6%, var(--gold) 86%, rgba(244,182,81,.35) 96%, rgba(244,182,81,0) 100%); } .tl-return{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:.45rem; font-family:var(--sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); white-space:nowrap; opacity:0; transition:opacity 500ms ease 1400ms; } .tl.in .tl-return{ opacity:.85 } .tl-return svg{ width:16px; height:16px } [dir="rtl"] .tl-return{ right:auto; left:0 } [dir="rtl"] .tl-return svg{ transform:scaleX(-1) } [dir="rtl"] .tl-return{ letter-spacing:0 } /* On the GUIDES rail a non-link means "no guide exists yet", so it is dimmed. On a PROCESS timeline nothing is a link and every stage is equally real — inheriting that dimming made all five numbers look unavailable. */ .tl--proc span.tl-c .tl-n{ color:var(--gold); text-shadow:0 0 16px rgba(244,182,81,.5) } .tl--proc span.tl-c .tl-l{ color:inherit } .on-light .tl--proc span.tl-c .tl-n{ color:var(--gold-dark); text-shadow:none } .tl--proc .tl-s .tl-dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(26,12,30,.85), 0 0 12px rgba(244,182,81,.9), 0 0 30px rgba(244,182,81,.45) } .on-light .tl--proc .tl-s .tl-dot{ box-shadow:0 0 0 4px var(--cream), 0 0 10px rgba(244,182,81,.75) } /* Numerals on a light ground use the ink gold; the bright gold is kept for the rail and dots, where it is decoration rather than information. */ .on-light .tl-n,.on-light .tl--proc span.tl-c .tl-n{ color:var(--gold-ink); text-shadow:none } /* `:has()` on the guides rail out-specifies the plain process rule, which left every process dot at half opacity. */ .tl--proc .tl-s .tl-dot, .tl--proc .tl-s:has(span.tl-c) .tl-dot{ background:var(--gold); box-shadow:0 0 0 4px rgba(26,12,30,.85), 0 0 12px rgba(244,182,81,.9), 0 0 30px rgba(244,182,81,.45); } .on-light .tl--proc .tl-s .tl-dot, .on-light .tl--proc .tl-s:has(span.tl-c) .tl-dot{ background:var(--gold-dark); box-shadow:0 0 0 4px var(--cream), 0 0 10px rgba(244,182,81,.7); } /* ═══════════════════════════════════════════════════════════ 13 · MOBILE — the timeline turns vertical Below 760px the horizontal rail cannot work: ten stages in 360px is 36px per stage, so the old build forced an 832px track into a 335px box and two thirds of the journey sat off-screen where nobody would ever swipe to it. Same spine, rotated: one gold rail down the side, milestones hanging off it, drawn top-to-bottom as the block arrives. ═══════════════════════════════════════════════════════════ */ @media (max-width:760px){ .tl{ padding:2.4rem 0 } .tl-scroll{ overflow:visible; padding:0 var(--gutter) } /* The indent lives on each step, not on the track: an absolutely positioned dot resolves against its step's padding box, so if the track carried the indent the dots landed 38px clear of the rail. */ .tl .tl-track{ display:block; min-width:0; min-height:0; padding-inline-start:0; padding-block:.35rem; } .tl--proc .tl-track{ min-height:0 } /* the rail, now running down the page */ .tl .tl-line{ inset-inline-start:7px; inset-inline-end:auto; top:0; bottom:0; width:2px; height:auto; background:linear-gradient(180deg, rgba(244,182,81,0) 0%, var(--gold) 4%, var(--gold) 96%, rgba(244,182,81,0) 100%); transform:scaleY(0); transform-origin:top center; transition:transform 1400ms var(--ease); } .tl.in .tl-line{ transform:scaleY(1) } .tl--cycle .tl-line{ background:linear-gradient(180deg, rgba(244,182,81,0) 0%, var(--gold) 5%, var(--gold) 84%, rgba(244,182,81,.35) 94%, rgba(244,182,81,0) 100%); } /* one milestone = one row */ .tl .tl-s{ position:relative; padding:0 0 1.9rem; padding-inline-start:2.35rem } .tl .tl-s:last-of-type{ padding-bottom:.2rem } /* node on the rail, level with the first line of type */ .tl .tl-s .tl-dot, .tl .tl-s.is-now .tl-dot, .tl .tl-s:has(a.tl-c) .tl-dot, .tl .tl-s:has(span.tl-c) .tl-dot{ left:auto; right:auto; inset-inline-start:7px; top:.62rem; margin:0; transform:translate(-50%,-50%) scale(.3); } [dir="rtl"] .tl .tl-s .tl-dot, [dir="rtl"] .tl .tl-s.is-now .tl-dot, [dir="rtl"] .tl .tl-s:has(a.tl-c) .tl-dot, [dir="rtl"] .tl .tl-s:has(span.tl-c) .tl-dot{ transform:translate(50%,-50%) scale(.3) } .tl.in .tl-s .tl-dot{ transform:translate(-50%,-50%) scale(1) } [dir="rtl"] .tl.in .tl-s .tl-dot{ transform:translate(50%,-50%) scale(1) } /* stem reaches sideways from the rail to the type */ .tl .tl-s:nth-of-type(odd) .tl-stem, .tl .tl-s:nth-of-type(even) .tl-stem{ left:auto; right:auto; inset-inline-start:8px; top:.62rem; bottom:auto; width:1.2rem; height:1px; margin:0; background:linear-gradient(90deg,var(--gold),rgba(244,182,81,.12)); transform:scaleX(0); transform-origin:left center; } [dir="rtl"] .tl .tl-s:nth-of-type(odd) .tl-stem, [dir="rtl"] .tl .tl-s:nth-of-type(even) .tl-stem{ background:linear-gradient(270deg,var(--gold),rgba(244,182,81,.12)); transform-origin:right center; } .tl.in .tl-s .tl-stem{ transform:scaleX(1) } /* the label block sits in normal flow, aligned to the reading edge */ .tl .tl-c, .tl .tl-s:nth-of-type(odd) .tl-c, .tl .tl-s:nth-of-type(even) .tl-c{ position:static; top:auto; bottom:auto; left:auto; right:auto; width:auto; max-width:none; text-align:start; padding:0 0 .1rem; border-radius:8px; transform:translateX(12px); } [dir="rtl"] .tl .tl-s:nth-of-type(odd) .tl-c, [dir="rtl"] .tl .tl-s:nth-of-type(even) .tl-c{ transform:translateX(-12px) } .tl.in .tl-s .tl-c{ transform:none } /* type sizes: readable rather than decorative */ .tl .tl-n{ font-size:1.5rem; margin-bottom:.15rem } .tl .tl-l{ font-size:.72rem; letter-spacing:.13em } [dir="rtl"] .tl .tl-l{ font-size:.86rem; letter-spacing:0 } .tl--proc .tl-n{ font-size:1.35rem; margin-bottom:.3rem } .tl--proc .tl-t{ font-size:1.2rem } .tl .tl-p{ font-size:.9rem; line-height:1.55 } .tl--proc .ico{ width:30px; height:30px; margin:0 0 .5rem } /* a pressable stage needs the whole row, not a 44px sliver */ .tl a.tl-c{ padding:.35rem .5rem .45rem; margin-inline-start:-.5rem } .tl a.tl-c:hover ~ .tl-dot{ transform:translate(-50%,-50%) scale(1.5) } /* maintenance returns to 01 — the note belongs under the rail's tail */ .tl-return{ position:static; transform:none; margin-top:1.1rem; margin-inline-start:-1.15rem; } } /* With motion off, everything is simply already in place. */ @media (max-width:760px) and (prefers-reduced-motion:reduce){ .tl .tl-line,.tl.in .tl-line{ transform:scaleY(1) } .tl .tl-s .tl-dot{ transform:translate(-50%,-50%) scale(1) } [dir="rtl"] .tl .tl-s .tl-dot{ transform:translate(50%,-50%) scale(1) } .tl .tl-s:nth-of-type(odd) .tl-stem, .tl .tl-s:nth-of-type(even) .tl-stem{ transform:scaleX(1) } .tl .tl-s:nth-of-type(odd) .tl-c, .tl .tl-s:nth-of-type(even) .tl-c{ transform:none } } /* ── the top bar on a phone ───────────────────────────────────────────── A content-sized capsule cannot hold burger + mark + quote + language switch at 375px, so the bar goes full-width and carries three zones: burger at the reading edge, mark dead centre, actions at the far edge. Equal flex flanks are what keeps the mark centred — it is the one thing about this bar that is not negotiable. */ @media (max-width:760px){ .nav{ width:auto !important; left:10px; right:10px; transform:none; max-width:none; padding:.34rem .4rem; justify-content:space-between; } .navlead,.navtools{ flex:1 1 0 !important; min-width:0 !important; max-width:none !important; } .navlead{ justify-content:flex-start } .navtools{ justify-content:flex-end; gap:.25rem } .brandmark{ flex:0 0 auto; margin:0 .45rem } .brandmark img{ height:44px } .burger{ display:inline-grid } .navpill{ display:none } .quote{ padding:.55rem .72rem; font-size:.6rem; letter-spacing:.06em; white-space:nowrap } .lang{ min-width:40px; padding:0 .5rem; font-size:.95rem } } /* Equal flanks keep the mark centred, but a flank that is narrower than its own contents pushes them out of its start edge and straight under the mark. Measured at 360px - the width of the phone this is most likely to be read on - the quote button ran to 298.8 with the mark ending at 202: a 0.4px overlap of exactly the kind that has to be caught by measuring, not by looking. The actions shrink instead. */ @media (max-width:399px){ .quote{ padding:.5rem .56rem; font-size:.56rem; letter-spacing:.04em } .lang{ min-width:36px; padding:0 .38rem; font-size:.9rem } .brandmark{ margin:0 .4rem } } /* The narrowest phones cannot hold both actions beside a centred mark. The language switch is the one that has a home in the drawer, so it is the one that goes — the quote button is the page's whole purpose. */ @media (max-width:359px){ .nav .navtools > .lang{ display:none } .quote{ padding:.5rem .62rem; font-size:.56rem } } /* ── the drawer on a phone ────────────────────────────────────────────── It is the whole navigation on mobile, so it gets the room to be one: taller, momentum-scrolled, and with the language switch set apart as a mode change rather than a fourteenth page link. */ @media (max-width:760px){ .drawer{ top:calc(var(--navh) + 18px); width:calc(100vw - 20px); max-height:calc(100svh - var(--navh) - 34px); -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .drawer a{ padding:.85rem .2rem; font-size:1.18rem } .drawer .d-lang a{ margin-top:.5rem; border-top:1px solid rgba(244,182,81,.4); color:var(--gold); font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase; } [dir="rtl"] .drawer .d-lang a{ letter-spacing:0; text-transform:none } } /* The guide breadcrumb is a 19px-tall line of text. As a reading element that is right; as the only way back up the hierarchy on a phone it is a 19px tap target. The padding buys the 44px, the negative margin gives back the space, so nothing moves. */ @media (max-width:760px){ .g-crumb a{ display:inline-block; padding:.78rem .3rem; margin:-.78rem -.3rem; } } /* Comparison tables on a phone. Three columns will not honestly fit 320px, and squashing them to make the overflow go away costs more than the scroll does — so the table keeps enough size to be read, gives back what padding it can, and shows a gold scrollbar so it is clear it moves. */ /* The guide pages carry their own