/* Linked as styles.css?v=. /assets/* is cached immutable for a year, so an edit here is invisible to returning visitors until that token changes. Bump it in all seven index.html files whenever this file changes. */ /* QOVALX — approved identity. FD-028 palette, FD-032 emblem, IBM Plex typography. */ @font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Light.woff2')format('woff2');font-weight:300;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Regular.woff2')format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Medium.woff2')format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-SemiBold.woff2')format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-Regular.woff2')format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Sans Arabic';src:url('fonts/IBMPlexSansArabic-SemiBold.woff2')format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'IBM Plex Sans SC';src:url('fonts/IBMPlexSansSC-Regular.woff2')format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'IBM Plex Sans Devanagari';src:url('fonts/IBMPlexSansDevanagari-Regular.woff2')format('woff2');font-weight:400;font-display:swap} :root{ --navy:#011230; --gold:#D7A347; --ivory:#F1E3D8; --white:#FFF9F2; --surface:#071C3F; --elevated:#132D54; --gold-hi:#F5CD7B; --gold-shadow:#A37027; --text:var(--ivory); --text-strong:var(--white); --text-on-light:var(--navy); --emphasis:var(--gold); --font:'IBM Plex Sans',system-ui,sans-serif; --max:1200px; --scale:1; } html[lang="ar"]{--font:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;--scale:.95} html[lang="zh-Hans"]{--font:'IBM Plex Sans SC','IBM Plex Sans',system-ui,sans-serif;--scale:.95} html[lang="hi"]{--font:'IBM Plex Sans Devanagari','IBM Plex Sans',system-ui,sans-serif;--scale:.95} html[lang="ar"] *,html[lang="hi"] *{letter-spacing:normal!important} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} body{background:var(--navy);color:var(--text);font-family:var(--font);font-weight:400; font-size:calc(1rem*var(--scale));line-height:1.65;-webkit-font-smoothing:antialiased} .skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--gold);color:var(--navy); padding:.75rem 1.25rem;z-index:100;text-decoration:none} .skip:focus{inset-inline-start:0} .wrap{max-width:var(--max);margin:0 auto;padding-inline:1.5rem} .nowrap{white-space:nowrap} /* Header */ header{position:sticky;top:0;z-index:50;background:rgba(1,18,48,.92);backdrop-filter:blur(12px); border-bottom:1px solid rgba(215,163,71,.2)} .hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem} .logo{font-weight:600;letter-spacing:.22em;font-size:1.05rem;color:var(--text-strong);text-decoration:none} .hdr-r{display:flex;align-items:center;gap:.75rem} /* Eight items now, and the longest labels are Russian and French. Measured at the old 960px breakpoint the row needed more width than the header had, at any gap, so it wrapped over the logo. The gap gives way first and keeps its original value on wide screens; below the breakpoint the burger and drawer take over, and the drawer already holds every link. */ nav.desk{display:none;gap:clamp(.75rem,1.4vw,1.75rem)} nav.desk a{color:var(--text);text-decoration:none;font-size:.92rem;font-weight:500;opacity:.85} nav.desk a:hover,nav.desk a:focus{opacity:1;color:var(--gold-hi)} select.lang{background:transparent;color:var(--text);border:1px solid rgba(215,163,71,.45); border-radius:4px;padding:.5rem .75rem;font-family:inherit;font-size:.9rem;cursor:pointer} select.lang option{background:var(--surface);color:var(--text)} .burger{display:grid;place-items:center;width:44px;height:44px;background:transparent; border:1px solid rgba(215,163,71,.45);border-radius:4px;cursor:pointer} .burger span{display:block;width:18px;height:2px;background:var(--gold);margin:2px 0} @media(min-width:1100px){nav.desk{display:flex}.burger{display:none}} /* Drawer */ .overlay{position:fixed;inset:0;background:rgba(1,18,48,.88);backdrop-filter:blur(4px);z-index:60;display:none} .overlay[data-open]{display:block} .drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(88vw,360px);background:var(--surface); border-inline-start:1px solid rgba(215,163,71,.3);z-index:70;padding:1.5rem;overflow-y:auto; display:none;flex-direction:column} .drawer[data-open]{display:flex} /* Each link is its own row. An is inline by default, so without this the nine links ran together as one wrapped paragraph: the vertical padding did not advance the line, the rows overlapped, and taps landed on whichever box happened to be on top. Scoped to nav so it cannot reach the .btn below, whose padding it would otherwise override. */ .drawer nav{display:flex;flex-direction:column} .drawer nav a{display:block;color:var(--text);text-decoration:none;padding:.85rem 0; min-height:44px;font-size:1.05rem;font-weight:500; border-bottom:1px solid rgba(215,163,71,.15)} .drawer nav a:hover,.drawer nav a:focus{color:var(--gold-hi)} .drawer-actions{margin-top:1.75rem} .drawer-actions .btn{display:block;text-align:center} .close{align-self:flex-end;background:none;border:1px solid rgba(215,163,71,.45);color:var(--gold); border-radius:4px;padding:.5rem .9rem;cursor:pointer;margin-bottom:1rem;font-family:inherit} html[dir="rtl"] .close{align-self:flex-start} html[dir="rtl"] .drawer{border-inline-start:none;border-inline-end:1px solid rgba(215,163,71,.3)} /* Buttons */ .btn{display:inline-block;padding:.9rem 1.75rem;border-radius:4px;text-decoration:none; font-weight:500;font-size:.98rem;transition:opacity .2s} .btn-p{background:var(--gold);color:var(--text-on-light)} .btn-p:hover{background:var(--gold-hi)} .btn-s{border:1px solid rgba(215,163,71,.6);color:var(--text)} .btn-s:hover{border-color:var(--gold);color:var(--gold-hi)} /* Hero */ .hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden; padding-block:5rem 3rem} .hero-grid{display:grid;gap:3rem;align-items:center} @media(min-width:960px){.hero-grid{grid-template-columns:1fr 1fr;gap:4rem}} /* Launch countdown. Read as a line of typography, not a timer widget: units are separated by space rather than rules, and nothing moves except the digits. Hidden until the script has a real value, so no flash of zeros — and if the script never runs, the block simply is not there. */ .countdown{margin-bottom:1.75rem} .countdown[hidden]{display:none} .cd-hd{color:var(--emphasis);font-size:.72rem;letter-spacing:.2em;font-weight:500; text-transform:uppercase;margin-bottom:.7rem} .cd-units{display:flex;flex-wrap:wrap;gap:.75rem 2rem;list-style:none} .cd-units[hidden]{display:none} .cd-unit{display:flex;flex-direction:column;gap:.35rem} /* Tabular figures hold every digit to one width, and the two-digit padding in the script means the row never reflows as it ticks. */ .cd-num{color:#D7A347;font-size:1.5rem;font-weight:300;line-height:1; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .cd-lab{color:#9FB0C8;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; font-weight:500;line-height:1;white-space:nowrap} .cd-done{color:#9FB0C8;font-size:.85rem;letter-spacing:.06em} @media(min-width:600px){.cd-num{font-size:1.75rem}.cd-units{gap:.75rem 2.5rem}} .eyebrow{color:var(--emphasis);font-size:.82rem;letter-spacing:.18em;font-weight:500; margin-bottom:1.25rem;text-wrap:balance} h1{font-weight:300;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.1;color:var(--text-strong); margin-bottom:1.5rem;letter-spacing:-.01em} .lede{font-size:clamp(1.02rem,2vw,1.18rem);max-width:52ch;opacity:.88;margin-bottom:2.25rem} .actions{display:flex;gap:1rem;flex-wrap:wrap} /* الكرة الدوّارة: طبقة ثابتة للرمز فوق مشهد ثلاثي الأبعاد */ .globe-wrap{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:1} .globe-wrap::before{content:'';position:absolute;inset:-12%;border-radius:50%; background:radial-gradient(circle,rgba(215,163,71,.10),transparent 62%);pointer-events:none} #globe{position:absolute;inset:0} #globe canvas{width:100%!important;height:100%!important;display:block} /* بديل ثابت يظهر قبل تحميل المشهد ومع الأجهزة غير المدعومة */ .globe-fallback{position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle at 38% 32%,#12356b,#071C3F 58%,#02132e 100%); box-shadow:0 0 90px rgba(46,95,168,.28) inset;transition:opacity .6s ease} #globe.is-live + .globe-fallback{opacity:0} .globe-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:30%;pointer-events:none;z-index:3;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))} .globe-mark img{width:100%;height:auto;display:block} /* Sections */ section{padding-block:5.5rem} h2{font-weight:600;font-size:clamp(1.85rem,4vw,2.7rem);color:var(--text-strong); margin-bottom:1rem;line-height:1.2} .sec-lede{max-width:60ch;opacity:.85;margin-bottom:3rem} /* Find Matching */ /* Deliberately identical chrome to .card below: same fill, border, radius, padding, column gap and media slot. The audience cards are the reference, so if that block changes, change this with it. Everything here is written out rather than shared with .card because this card carries different content — a heading row, a badge, a field and a status line, not a heading, a paragraph and a link. */ .match{background:rgba(255,255,255,.025);border:1px solid rgba(215,163,71,.45);border-radius:4px; padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden} .match .card-media{aspect-ratio:16/9;border-bottom:1px solid rgba(215,163,71,.45); margin:-2.5rem -2rem .5rem} .match .card-media img{object-position:48% 56%} /* The column gap sets the rhythm, so the children carry no margins of their own. */ .match-hd{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:0} .match-hd h2{margin:0} .badge{border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:.35rem 1rem; font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;white-space:nowrap} /* A heading with a status marker beside it. Flex, so the marker follows the heading in reading order and mirrors under dir="rtl" with no direction rule of its own; it wraps beneath on a narrow card rather than squeezing the text. .card h3 already carries margin-bottom:0, so only h2 needs resetting. */ .hd-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} /* Inside an audience card the marker always sits under the heading rather than beside it. The three cards share one markup; what differed was the heading length, so Agencies and Developers kept the marker on the line while Investors and Buyers wrapped it. Stacking makes the layout the same whatever the heading says, in every language. flex-start reads as the right edge under dir="rtl", so Arabic needs no rule of its own. */ .cards .hd-row{flex-direction:column;align-items:flex-start;gap:.6rem} .hd-row h2{margin-bottom:0} /* An empty navy field behind a thin gold rule, not a light panel. The disabled overrides are load bearing: browsers grey out a disabled input's text and placeholder, and -webkit-text-fill-color is the only thing that holds ivory in WebKit. Without them the placeholder falls back to an unapproved grey. */ .field{width:100%;background:var(--navy);color:var(--ivory);border:1px solid rgba(215,163,71,.45); border-radius:4px;padding:1rem 1.25rem;margin-block:0;font-family:inherit;font-size:1rem} .field::placeholder{color:var(--ivory);opacity:.65} .field:disabled{background:var(--navy);color:var(--ivory);opacity:1;-webkit-text-fill-color:var(--ivory)} .field:disabled::placeholder{color:var(--ivory);opacity:.65;-webkit-text-fill-color:var(--ivory)} .status{color:var(--text);opacity:.55;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase} /* Audience cards. Two columns, so the four cards read as a 2x2 block instead of leaving the fourth alone on a second row. There is no breakpoint here and there never was: auto-fit derives the column count from the 270px floor, which used to allow a third column once the container passed 866px. Flooring each track at half the container instead (less half the gap) means three tracks can never fit, while the 270px keeps its old job of dropping to one column — max() takes whichever is larger, and the two are equal at exactly the width where the single column began before, so the mobile collapse point is unmoved. */ .cards{display:grid;gap:1.75rem; grid-template-columns:repeat(auto-fit,minmax(max(270px,calc(50% - 0.875rem)),1fr)); grid-auto-rows:1fr} .card{background:rgba(255,255,255,.025);border:1px solid rgba(215,163,71,.45);border-radius:4px; padding:2.5rem 2rem;min-height:18rem;display:flex;flex-direction:column;gap:1rem; overflow:hidden;transition:border-color .2s,transform .2s} .card:hover,.card:focus-within{border-color:#D7A347;transform:translateY(-2px)} @media(prefers-reduced-motion:reduce){.card:hover,.card:focus-within{transform:none}} /* Image slot. Empty until an is dropped in, so it collapses and a missing file can never print text inside the card. */ .card-media{aspect-ratio:16/9;overflow:hidden;position:relative;isolation:isolate; margin:-2.5rem -2rem .5rem;border-bottom:1px solid rgba(215,163,71,.45)} /* Shared finish over the four card images. It can only move every card by the same amount, so it does not carry the differences between them — black point, brightness and white balance are normalised per image in the assets instead. That is what lets saturate() sit this high without the set falling apart. */ .card-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block; filter:saturate(.88) contrast(1.06) brightness(1.03)} /* Navy tint. Blended on colour, not painted flat, so it moves hue toward the brand palette while leaving luminance — and therefore detail — untouched. Without mix-blend-mode support this degrades to a plain navy veil. */ .card-media::after{content:'';position:absolute;inset:0;background:rgba(1,18,48,.18); mix-blend-mode:color;pointer-events:none} .card-media:empty{display:none} .card h3{color:#FFFFFF;font-weight:600;font-size:1.5rem;margin-bottom:0} .card p{color:#C6CEDC;line-height:1.65} .card a{color:#D7A347;font-weight:500;align-self:flex-start;margin-top:auto;text-decoration:underline; text-decoration-color:#D7A347;text-decoration-thickness:1px;text-underline-offset:4px} .card a:hover{color:var(--gold-hi)} /* Two routes out of one card. .card a carries margin-top:auto to sit at the bottom of the column; that job moves to the row, and the links inside it give it up, or the second one would be pushed away from the first. */ /* The three coming soon cards lost their disabled link, and the professionals card, which still carries two, went on setting the row height: the others ended well above their own padding. The picture takes the slack instead, so all four bottoms line up. The slot grows, the image still covers it, and no image file, ratio or crop origin changed. Scoped to .cards so the Find Matching block, which borrows .card-media, keeps its fixed ratio. */ .cards .card-media{flex:1 1 auto;min-height:0} .card-links{display:flex;flex-wrap:wrap;gap:1.25rem;margin-top:auto;align-items:baseline} .card-links a{margin-top:0} /* Ecosystem */ .eco{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .eco div{border-inline-start:2px solid var(--gold);padding-inline-start:1.25rem} .eco h3{color:var(--text-strong);font-weight:600;font-size:1.1rem;margin-bottom:.5rem} .eco p{opacity:.82;font-size:.96rem} /* Abu Dhabi */ /* One surface, not two. The section used to be a faint full-bleed band with the heading, lede and founder line loose on it and only the image wearing a border, so the image read as a card floating on the page. The card is now the .wrap, taking its chrome from the audience cards, which are the reference. */ .ad{background:none;border-block:0} /* The card takes the place of .wrap, so it also has to reproduce the 1.5rem gutter that .wrap's padding-inline gives every other section — otherwise it runs edge to edge on a phone. Subtracting the same 3rem from the max-width lands its outer edge exactly where the audience card row starts. */ .ad .wrap{width:calc(100% - 3rem);max-width:calc(var(--max) - 3rem); background:rgba(255,255,255,.025);border:1px solid rgba(215,163,71,.45);border-radius:4px; padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1rem;overflow:hidden} /* Bleeds to the card edges with a hairline on both sides, since here the image sits between two blocks of text rather than at the top. */ .ad-media{margin-inline:-2rem;border-block:1px solid rgba(215,163,71,.45)} /* The column gap sets the rhythm, so the children carry no margins of their own. */ .ad .sec-lede{margin-bottom:0} /* Hero image. Deliberately outside the .card-media treatment — it keeps its own golden-hour tone, with no normalisation filter and no navy tint. The source is 16:9 in a 16:9 box, so nothing is cropped and object-position does not bite; the upward bias is the safe direction if that ever diverges, since the subject — heritage structure and skyline — sits in the upper half. */ /* No border, radius or placeholder fill of its own any more — the card supplies the surface. The image is otherwise untouched: still no normalisation filter and no navy tint, so it keeps its golden-hour tone. */ .ad-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 40%; display:block} .founder{margin-top:0;font-size:.95rem;display:flex;align-items:baseline; gap:.6rem;flex-wrap:wrap} .founder .founder-label{color:rgba(241,227,216,.62);font-weight:400} .founder .founder-name{color:#F1E3D8;font-weight:600} /* Pricing page. Built from the existing tokens: surface navy panels, hairline gold borders, gold reserved for figures and rules. No heading or paragraph is set entirely in gold — the amounts are gold spans inside mixed lines. */ .page-head{padding-bottom:0} .page-head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.75rem} /* Audience pages. The global reset zeroes margins, so prose spacing is set here rather than inherited. Body sections sit at a readable measure. */ .doc section{padding-block:3rem} .doc section:first-child{padding-top:2.5rem} .doc h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1rem} .doc section p{max-width:70ch;color:var(--text)} .doc section p + p{margin-top:1rem} .doc .lede-p{font-size:1.08rem;color:var(--text-strong)} .doc .panel p + p{margin-top:1rem} .doc .btn{margin-top:.5rem} /* Page hero. Same treatment as the audience card images so the set still reads as one family; widens in steps so it never becomes a half-page photo. */ .page-hero{aspect-ratio:16/9;overflow:hidden;position:relative;isolation:isolate; border:1px solid rgba(215,163,71,.35);border-radius:4px;margin-bottom:2rem} .page-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block; filter:saturate(.88) contrast(1.06) brightness(1.03)} .page-hero::after{content:'';position:absolute;inset:0;background:rgba(1,18,48,.18); mix-blend-mode:color;pointer-events:none} @media(min-width:600px){.page-hero{aspect-ratio:21/9}} @media(min-width:900px){.page-hero{aspect-ratio:3/1}} .notice{border-inline-start:2px solid var(--gold);padding-inline-start:1.25rem; color:var(--text-strong);max-width:62ch;margin-bottom:1.25rem} .prelaunch{color:#9FB0C8;font-size:.9rem;max-width:62ch} .price-grid{display:grid;gap:1.75rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); grid-auto-rows:1fr} .price-card{background:var(--surface);border:1px solid rgba(215,163,71,.45);border-radius:4px; padding:2rem;display:flex;flex-direction:column;gap:.65rem} .price-card h3{color:var(--text-strong);font-weight:600;font-size:1.35rem;margin-bottom:.4rem} .price-line{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap} .price-amt{color:var(--emphasis);font-size:1.75rem;font-weight:300;line-height:1.15; font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .price-per{color:#9FB0C8;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500} .price-keep{color:var(--text);font-size:.95rem;margin-top:auto;padding-top:.75rem} .price-free{color:var(--text-strong);font-size:1.35rem;font-weight:300} .price-note{color:var(--text);opacity:.85;max-width:70ch;margin-top:1.5rem} /* The discount is the column that matters, so the table is sized to fit a 390px screen with cells wrapping rather than pushing that column behind a horizontal scroll. The overflow stays as a safety net for larger text. */ .table-wrap{overflow-x:auto} .tiers{width:100%;border-collapse:collapse;min-width:18rem} .tiers th,.tiers td{text-align:start;padding:.9rem .6rem;vertical-align:top; border-bottom:1px solid rgba(215,163,71,.2)} @media(min-width:600px){.tiers th,.tiers td{padding:.9rem 1rem}} .tiers th{color:var(--emphasis);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; font-weight:500} .tiers td{color:var(--text);font-size:.98rem} .tiers .tier-name{color:var(--text-strong);font-weight:500} .tiers tbody tr:last-child td{border-bottom:none} .panel{background:var(--surface);border:1px solid rgba(215,163,71,.45);border-radius:10px; padding:clamp(1.75rem,4vw,3rem)} .panel h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:.75rem} .panel p{color:var(--text);max-width:70ch} /* Closing */ /* The closing call to action carried the full 5.5rem a section opens and ends with, on top of the lede's own 3rem, for three short lines and a button row. Trimmed so the heading, the sentence and the buttons read as one screen on a phone. Only this section: .close-cta exists nowhere else. */ .close-cta{text-align:center;padding-block:3.5rem} .close-cta .sec-lede{margin-bottom:2rem} .close-cta .actions{justify-content:center} /* Individual professional page */ /* One bilingual page rather than one per locale: the record carries both languages, so each column sets its own lang and dir and the page needs no locale of its own. Chrome is the existing card, badge and tag styles. */ .pf-head{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;padding-bottom:0} .pf-photo{flex:0 0 clamp(160px,22vw,240px);border:1px solid rgba(215,163,71,.45); border-radius:4px;overflow:hidden;aspect-ratio:4/3} .pf-photo img{width:100%;height:100%;object-fit:cover;display:block} .pf-id{flex:1 1 18rem;min-width:0;display:flex;flex-direction:column;gap:.75rem} .pf-id h1{margin-bottom:0} .pf-name-alt{color:var(--text-strong);font-size:clamp(1.3rem,3vw,1.8rem);font-weight:300;margin:0} .pf-title{color:var(--text);opacity:.85;margin:0} .pf-sep{color:var(--emphasis);opacity:.7} .pf-cols{display:grid;gap:3rem;align-items:start} @media(min-width:900px){.pf-cols{grid-template-columns:1fr 1fr;gap:4rem}} .pf-col{display:flex;flex-direction:column;gap:1.5rem;min-width:0} .pf-h{font-size:1.35rem;margin-bottom:0} .pf-bio{color:var(--text);opacity:.88;margin:0;max-width:60ch} .pf-actions{margin:0} /* Founding places */ /* Prose, a terms table and one action. The table is the existing .tiers with a single column, so each term sits on its own ruled row; nothing here restyles .tiers itself. The closing line is the only emphasis on the page. */ .join-prose p{max-width:66ch;margin-bottom:1.25rem} .join-prose p:last-child{margin-bottom:0} .join-close{color:var(--text-strong);margin-top:2rem} .join-terms{max-width:44rem} .join-cta{margin-top:.5rem} /* A card whose route is not open yet: the call to action keeps its words and its place in the card, but is no longer a link and no longer invites a click. .card a sets align-self and margin-top:auto, so both are repeated here. */ .qx-latest-list{margin-bottom:0} .qx-latest-more{margin-top:2rem} /* Professionals directory */ /* The filters have to be reachable on a phone without scrolling. Between the lede and the first field sat 163px: the lede's 3rem margin plus the 5.5rem any section opens with. Both are cut here, on two classes that exist only on this page, so no other page's rhythm moves. Only the top of the section is touched; the space before the footer is unchanged. */ .qx-dir-head{padding-block-start:2.5rem} .qx-dir-head .sec-lede{margin-bottom:1rem} .qx-dir-body{padding-block-start:2rem} /* Chrome comes from .card and .field, so a directory card is the same object as an audience card. Everything below is layout plus the tag list; gold appears only on borders and rules, never on a heading or a paragraph. Logical properties throughout, so the Arabic page needs no rules of its own. */ .qx-dir-controls{display:grid;gap:1.25rem;align-items:end;margin-bottom:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} /* On a narrow screen the four controls and the clear button stacked into five full width rows, which pushed the last of them below the fold on a shorter phone. Two to a row halves that without touching any type size; the search field keeps the full width, since a search box narrowed to half is worse than a select narrowed to half. */ @media(max-width:600px){ .qx-dir-controls{grid-template-columns:1fr 1fr} .qx-dir-controls > .qx-dir-field:first-child{grid-column:1 / -1} } .qx-dir-field{display:flex;flex-direction:column;gap:.5rem;min-width:0} .qx-dir-label{color:var(--text);opacity:.72;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} /* .btn and .btn-s were written for anchors, which are transparent by default. This is the first