/* ========================================================================== Rahyabe — the marketing site. One stylesheet, no build step. THE SYSTEM IS THE OWNER'S APPROVED HOME PAGE and nothing here invents a second one: every colour, size, radius, easing and component below is carried from `site/reference/home.html`. What changed, and only this: 1. MOTION IS GATED ON `html.js`. The reference hides every heading at `opacity:0` and reveals it with a class JavaScript adds — so with JavaScript off the page was blank, and the brief requires it to be "fully readable with JavaScript disabled". The script sets `.js` on as its first act; every hiding rule sits behind that class, so no-JS gets the whole page at once, unanimated. 2. DIRECTION-AWARE PROPERTIES. `margin-left` becomes `margin-inline- start`, `left` becomes `inset-inline-start`, and so on — because Dari and Pashto are right-to-left and the brief asks for a layout that mirrors rather than a stylesheet that flips the text and leaves the furniture where it was. 3. SELF-HOSTED FONTS. The reference asks Google for Inter Tight. The brief forbids any runtime request off our own domain, and gives the reason: the audience includes Afghan connections. @font-face below, files in `site/fonts/`. 4. `figure.shot[data-ratio]` — the image slot the brief specifies, with the ratio held in CSS so dropping a real photograph in later changes nothing about the layout. Everything else is the reference, rule for rule. ========================================================================== */ /* ---------------------------------------------------------------- fonts --- INTER TIGHT IS NOT IN THE REPOSITORY YET. The @font-face rules are written so the site is correct the moment the files land in `site/fonts/`; until then every one of them fails quietly and the stack falls through to Plus Jakarta Sans, which IS here. Nothing breaks, and nothing is requested off this domain either way. `site/fonts/README.md` is the shopping list. ARABIC SCRIPT IS A SEPARATE FACE, not a preference: Inter Tight has no Arabic coverage at all, so Dari and Pashto would fall back to whatever the device happened to have. Noto Sans Arabic carries 400 and 600 only, so the right-to-left pages map 300 onto 400 and 600/700 onto 600 — stated here rather than discovered by someone wondering why a heading looks light. */ @font-face{font-family:"Inter Tight";font-style:normal;font-weight:300;font-display:swap; src:url("../fonts/inter-tight-300.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/inter-tight-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/inter-tight-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/inter-tight-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap; src:url("../fonts/inter-tight-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215} @font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/noto-sans-arabic-400.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} @font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/noto-sans-arabic-600.woff2") format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC} /* --------------------------------------------------------------- tokens --- */ :root{ --deep:#050c18; --navy:#081627; --navy-up:#0f2544; --surface:#f8fafc; --white:#ffffff; --ink:#0b1220; --ink-soft:#475569; --ink-mute:#94a3b8; --gold-hi:#f7e096; --gold:#d4af37; --gold-dk:#b68925; --gold-line:rgba(212,175,55,.35); --gold-line-soft:rgba(212,175,55,.18); --hair:#e2e8f0; --r:1.5rem; --r-lg:2rem; --pill:9999px; --sans:"Inter Tight","Plus Jakarta Sans",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace; } /* The right-to-left pages lead with the Arabic face. The Latin faces stay in the stack behind it for the Western digits and the occasional English word, which is exactly the split the unicode-ranges above draw. */ :root:lang(fa),:root:lang(ps){ --sans:"Noto Sans Arabic","Inter Tight","Plus Jakarta Sans",system-ui,sans-serif; --mono:"Noto Sans Arabic","JetBrains Mono",ui-monospace,monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} /* THE ADAPTIVE REM GRID, base 1920, exactly as the reference. Above 1920 the script takes over (see site.js). */ @media (max-width:1920px){html{font-size:.833333vw}} @media (max-width:1440px){html{font-size:1.111111vw}} @media (max-width:1024px){html{font-size:1.5625vw}} @media (max-width:640px){html{font-size:4.444444vw}} body{font-family:var(--sans);color:var(--ink);background:var(--white); -webkit-font-smoothing:antialiased} ::selection{background:rgba(212,175,55,.3)} img{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} main{width:100%;padding:.5rem;overflow-x:clip;display:flex;flex-direction:column;gap:.75rem} @media (min-width:640px){main{padding:.75rem}} .mono{font-family:var(--mono)} /* The skip link the brief requires: first thing in the tab order, invisible until it has focus, and it lands on
. */ .skip{position:absolute;inset-inline-start:.5rem;inset-block-start:-4rem;z-index:300; background:var(--gold);color:var(--deep);padding:.75rem 1.25rem;border-radius:var(--pill); font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; transition:inset-block-start .2s} .skip:focus{inset-block-start:.5rem} /* ----------------------------------------------------- motion primitives --- EVERY HIDING RULE IS BEHIND `html.js`. Without the class — JavaScript off, or still loading — headings and blocks are simply visible. */ .clip{display:block;overflow:hidden;padding-bottom:.14em} .js .clip>span{display:block;transform:translateY(115%);opacity:0;will-change:transform,opacity} .js .clip.in>span{transform:none;opacity:1; transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .9s cubic-bezier(.16,1,.3,1)} .js .rise{opacity:0;transform:translateY(1.75rem)} .js .rise.in{opacity:1;transform:none; transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .8s ease} /* --------------------------------------------------------------- chrome --- */ .tag{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .875rem; border-radius:var(--pill);font-size:.6875rem;font-weight:500;letter-spacing:.2em; text-transform:uppercase} .tag.gold{background:rgba(255,255,255,.05);border:1px solid var(--gold-line);color:var(--gold-hi)} .tag i{width:.375rem;height:.375rem;border-radius:50%;background:var(--gold);flex:none} .tag.gold i{animation:beacon 2.4s infinite cubic-bezier(.4,0,.6,1)} @keyframes beacon{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.7)} 50%{box-shadow:0 0 0 6px rgba(212,175,55,0)}} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)} .eyebrow::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--gold-dk)} .eyebrow.light{color:var(--gold-hi)} .eyebrow.light::before{background:var(--gold)} .btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--pill); padding:.875rem 1.75rem;font-size:.6875rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;white-space:nowrap; transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .3s,color .3s,border-color .3s} .btn svg{width:.875rem;height:.875rem;transition:transform .3s cubic-bezier(.16,1,.3,1)} /* The arrow points the way the language reads, and moves the way it points. */ .btn:hover svg{transform:translateX(4px)} [dir="rtl"] .btn svg.arrow{transform:scaleX(-1)} [dir="rtl"] .btn:hover svg.arrow{transform:scaleX(-1) translateX(4px)} .btn-gold{background:linear-gradient(135deg,#f7e096,#d4af37 50%,#b68925);color:var(--deep); box-shadow:0 4px 20px rgba(212,175,55,.28)} .btn-gold:hover{box-shadow:0 8px 30px rgba(212,175,55,.45);transform:translateY(-2px)} .btn-line{background:rgba(255,255,255,.03);border:1px solid var(--gold-line);color:#fff; font-weight:600} .btn-line:hover{background:rgba(212,175,55,.1);border-color:var(--gold);color:var(--gold-hi)} .btn-dark{background:var(--navy);color:#fff;border:1px solid var(--gold-line);width:100%; justify-content:center;padding:.9rem} .btn-dark:hover{background:var(--deep)} /* ----------------------------------------------------------------- hero --- */ .hero{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);color:#fff; border:1px solid rgba(255,255,255,.06);border-radius:var(--r-lg); min-height:42rem;height:calc(100svh - 1.5rem);display:flex;flex-direction:column} .field{position:absolute;inset:0;width:100%;height:100%;opacity:.45;z-index:0; pointer-events:none} .hero .veil{position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(to bottom,rgba(5,12,24,.8),transparent 35%,rgba(5,12,24,.95))} /* A shorter hero for the pages that are not the home page: they are read, not entered, and a full viewport of chrome before the first sentence is a cost the reader pays on every one of them. */ .hero.inner{min-height:0;height:auto} .hdr{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.06)} @media (min-width:640px){.hdr{padding:2rem 2.5rem}} .hdr nav{display:none;gap:2rem;font-size:.6875rem;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.7)} @media (min-width:1024px){.hdr nav{display:flex}} .hdr nav a:hover{color:var(--gold-hi)} .hdr nav a[aria-current="page"]{color:var(--gold-hi)} .brand{display:flex;align-items:center;gap:.625rem} .brand svg{width:1.25rem;height:1.25rem;color:var(--gold);flex:none} .brand b{font-size:1rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase} .brand em{font-style:normal;font-size:.75rem;color:rgba(247,224,150,.8); margin-inline-start:.25rem} .hdr .right{display:flex;align-items:center;gap:1rem} .hdr .live{display:none} @media (min-width:640px){.hdr .live{display:inline-flex}} .hdr .live i{background:#34d399;animation:none} .hdr .desk{display:none;font-size:.6875rem;font-weight:600;letter-spacing:.15em; text-transform:uppercase} @media (min-width:640px){.hdr .desk{display:inline}} .hdr .desk:hover{color:var(--gold-hi)} .burger{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.375rem;backdrop-filter:blur(8px);flex:none} .burger:hover{background:rgba(255,255,255,.2)} .burger i{width:1rem;height:1.5px;background:#fff;display:block} .hero-mid{position:relative;z-index:2;margin-block:auto;padding:2rem 1.5rem;max-width:64rem} @media (min-width:640px){.hero-mid{padding:2rem 3rem}} .hero.inner .hero-mid{padding-block:4rem 3rem} h1{font-size:clamp(2.25rem,6vw,4.5rem);font-weight:600;line-height:1.02;letter-spacing:-.03em; margin-top:1.5rem} .hero.inner h1{font-size:clamp(2rem,4.6vw,3.5rem)} h1 .grad{background:linear-gradient(to right,#fff,rgba(255,255,255,.9) 45%,var(--gold-hi)); -webkit-background-clip:text;background-clip:text;color:transparent} [dir="rtl"] h1 .grad{background:linear-gradient(to left,#fff,rgba(255,255,255,.9) 45%,var(--gold-hi)); -webkit-background-clip:text;background-clip:text} .hero-mid p{margin-top:1.5rem;max-width:38rem;font-size:1.0625rem;font-weight:300; line-height:1.65;color:#cbd5e1} .hero-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem} .hero-foot{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:1rem; align-items:center;justify-content:space-between;padding:1rem 1.5rem; border-top:1px solid rgba(255,255,255,.06);font-size:.6875rem;letter-spacing:.12em; text-transform:uppercase;color:#94a3b8} @media (min-width:640px){.hero-foot{padding:1.25rem 3rem}} .hero-foot .l{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap} .hero-foot .r{display:flex;align-items:center;gap:.5rem;color:var(--gold-hi)} .hero-foot .r svg{width:.875rem;height:.875rem;animation:bob 1.8s infinite} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} /* ------------------------------------------------------------- sections --- */ .sec{border-radius:var(--r-lg);padding:5rem 1.5rem} @media (min-width:640px){.sec{padding:6rem 3rem}} .s-pale{background:var(--surface);border:1px solid rgba(226,232,240,.8)} .s-white{background:var(--white);border:1px solid rgba(226,232,240,.8)} .s-navy{background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.06)} .s-deep{background:var(--deep);color:#fff;border:1px solid rgba(255,255,255,.06)} h2{font-size:clamp(1.875rem,3.6vw,3.25rem);font-weight:600;line-height:1.05; letter-spacing:-.025em;margin-top:.875rem} .lead{margin-top:1.25rem;max-width:44rem;font-size:1rem;line-height:1.7;color:var(--ink-soft)} .s-navy .lead,.s-deep .lead{color:#cbd5e1} /* Body prose inside a section, for the pages that argue rather than list. */ .prose{margin-top:1.25rem;max-width:44rem;font-size:.9375rem;line-height:1.75;color:var(--ink-soft)} .s-navy .prose,.s-deep .prose{color:#cbd5e1} .prose+.prose{margin-top:1rem} /* -------------------------------------------------------- problem cards --- */ .grid3{display:grid;gap:1.5rem;margin-top:3.5rem} @media (min-width:768px){.grid3{grid-template-columns:repeat(3,1fr)}} .pcard{background:#fff;padding:2rem;border-radius:var(--r);border:1px solid var(--gold-line); box-shadow:0 1px 2px rgba(0,0,0,.03); transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s} .pcard:hover{transform:translateY(-4px);border-color:var(--gold); box-shadow:0 18px 40px -18px rgba(11,18,32,.28)} .pcard .top{display:flex;justify-content:space-between;align-items:flex-start} .pcard .num{font-size:3rem;font-weight:600;color:#e2e8f0;line-height:1} .pcard .ic{padding:.5rem;border-radius:.625rem;background:#fef9e7;color:var(--gold-dk)} .pcard .ic svg{width:1.125rem;height:1.125rem} .pcard h3{font-size:1.1875rem;font-weight:600;margin-top:1.5rem;line-height:1.25} .pcard p{font-size:.8125rem;color:var(--ink-soft);margin-top:.75rem;line-height:1.7} .pcard .meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f1f5f9; display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ink-mute); letter-spacing:.06em} /* ------------------------------------------------------------- solution --- */ .ghost{margin-top:3.5rem;display:flex;justify-content:space-between;user-select:none; pointer-events:none;font-size:clamp(2.5rem,8.5vw,8rem);font-weight:700; letter-spacing:-.05em;color:rgba(255,255,255,.08);line-height:1} .ghost .clip{display:inline-block;padding-bottom:.1em} /* ------------------------------------------------------------- audience --- */ .grid2{display:grid;gap:1.5rem;margin-top:3.5rem} @media (min-width:1024px){.grid2{grid-template-columns:1fr 1fr}} .acard{padding:2rem;border-radius:1.75rem;border:1px solid var(--gold-line); display:flex;flex-direction:column} @media (min-width:640px){.acard{padding:2.5rem}} .acard.dark{background:var(--deep);color:#fff;box-shadow:0 20px 50px -30px rgba(0,0,0,.8)} .acard.pale{background:var(--surface);color:var(--ink)} /* ----------------------------------------------------------- image slot --- THE SLOT IS THE COMPONENT. Every photograph on this site is a framed box with a faint gold grid and a label naming what belongs there, and the RATIO is fixed in CSS — so dropping the real photograph in later changes nothing about the layout. `data-ratio` carries it declaratively; no script reads it. Add a ratio here when a page needs one that is not listed. */ .shot{position:relative;border-radius:.875rem;overflow:hidden; background:linear-gradient(135deg,#0f2544,#050c18);border:1px solid rgba(255,255,255,.1)} .acard .shot{margin-bottom:2rem} .acard.pale .shot,.s-pale .shot,.s-white .shot{ background:linear-gradient(135deg,#e2e8f0,#cbd5e1);border-color:var(--hair)} .shot[data-ratio="16/10"]{aspect-ratio:16/10} .shot[data-ratio="16/9"]{aspect-ratio:16/9} .shot[data-ratio="4/3"]{aspect-ratio:4/3} .shot[data-ratio="3/2"]{aspect-ratio:3/2} .shot[data-ratio="1/1"]{aspect-ratio:1/1} .shot[data-ratio="21/9"]{aspect-ratio:21/9} .shot img{width:100%;height:100%;object-fit:cover} .shot .grid-bg{position:absolute;inset:0;opacity:.5; background-image:linear-gradient(rgba(212,175,55,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(212,175,55,.12) 1px,transparent 1px); background-size:2rem 2rem} .shot .badge{position:absolute;inset-inline-start:1rem;inset-block-end:1rem; display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .75rem; border-radius:var(--pill);background:rgba(0,0,0,.6);backdrop-filter:blur(8px); border:1px solid var(--gold-line);color:var(--gold-hi); font-size:.625rem;letter-spacing:.14em;text-transform:uppercase} .shot .badge i{width:.375rem;height:.375rem;border-radius:50%;background:#34d399} .shot .slot{position:absolute;inset:0;display:grid;place-items:center;text-align:center; padding:1rem;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.3)} .acard.pale .shot .slot,.s-pale .shot .slot,.s-white .shot .slot{color:rgba(11,18,32,.3)} .acard .kicker{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)} .acard.pale .kicker{color:var(--gold-dk)} .acard h3{font-size:1.75rem;font-weight:600;margin-top:.5rem;letter-spacing:-.015em} .acard>div>p{font-size:.875rem;margin-top:.75rem;line-height:1.7} .acard.dark>div>p{color:#cbd5e1} .acard.pale>div>p{color:var(--ink-soft)} .acard ul,.ticks{list-style:none;margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem} .acard li,.ticks li{display:flex;gap:.75rem;font-size:.875rem;line-height:1.55} .acard li::before,.ticks li::before{content:"";flex:none;width:.375rem;height:.375rem; border-radius:50%;margin-top:.5rem;background:var(--gold)} .acard.dark li{color:#cbd5e1} .acard.pale li::before,.s-pale .ticks li::before,.s-white .ticks li::before{background:var(--gold-dk)} .s-pale .ticks li,.s-white .ticks li{color:var(--ink-soft)} .s-navy .ticks li,.s-deep .ticks li{color:#cbd5e1} .acard .foot{margin-top:2.5rem;padding-top:1.5rem;display:flex;align-items:center; justify-content:space-between;gap:1rem;flex-wrap:wrap} .acard.dark .foot{border-top:1px solid rgba(255,255,255,.1)} .acard.pale .foot{border-top:1px solid var(--hair)} .acard .foot a{font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.5rem} .acard.dark .foot a{color:var(--gold-hi)} .acard.dark .foot a:hover{color:#fff} .acard.pale .foot a:hover{color:var(--gold-dk)} .acard .foot span{font-size:.625rem;color:var(--ink-mute);letter-spacing:.08em} .acard.dark .foot span{color:#64748b} .acard .foot a svg{width:.875rem;height:.875rem;transition:transform .3s} .acard .foot a:hover svg{transform:translateX(4px)} [dir="rtl"] .acard .foot a svg.arrow{transform:scaleX(-1)} [dir="rtl"] .acard .foot a:hover svg.arrow{transform:scaleX(-1) translateX(4px)} /* ---------------------------------------------------------------- steps --- */ .steps{margin-top:3rem;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)} .step{display:flex;gap:1rem;align-items:flex-start;justify-content:space-between; padding:1.75rem 1rem;border-radius:.875rem;transition:background .3s;flex-wrap:wrap} .step+.step{border-top:1px solid var(--hair)} .step:hover{background:rgba(255,255,255,.6)} .step .l{display:flex;gap:1.5rem;align-items:flex-start;flex:1;min-width:16rem} .step .n{font-size:.6875rem;font-weight:700;color:var(--gold-dk);width:2rem;flex:none; padding-top:.35rem;letter-spacing:.08em} .step h3{font-size:1.1875rem;font-weight:600} .step p{font-size:.8125rem;color:var(--ink-soft);margin-top:.35rem;max-width:40rem;line-height:1.7} .step .ic{flex:none;width:2.75rem;height:2.75rem;border-radius:50%; border:1px solid var(--gold-line);display:grid;place-items:center;color:var(--gold-dk); transition:background .3s,transform .3s cubic-bezier(.16,1,.3,1),border-color .3s} .step .ic svg{width:1.125rem;height:1.125rem} .step:hover .ic{background:rgba(254,249,231,.7);transform:scale(1.08);border-color:var(--gold)} /* ------------------------------------------------------------------ cta --- */ .cta{text-align:center} .cta .in{max-width:44rem;margin-inline:auto} .cta h2{font-size:clamp(1.875rem,4vw,3.25rem)} .cta .row{margin-top:2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .cta .lead{margin-inline:auto} /* -------------------------------------------------------------- contact --- */ .cgrid{display:grid;gap:3rem} @media (min-width:1024px){.cgrid{grid-template-columns:5fr 7fr;align-items:start}} .facts{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem;font-size:.6875rem; color:var(--ink-soft);letter-spacing:.06em} .facts div{display:flex;align-items:center;gap:.625rem} .facts i{width:.5rem;height:.5rem;border-radius:50%;flex:none} form{background:var(--surface);padding:2rem;border-radius:var(--r); border:1px solid var(--gold-line);display:flex;flex-direction:column;gap:1rem} @media (min-width:640px){form{padding:2.5rem}} .f2{display:grid;gap:1rem} @media (min-width:640px){.f2{grid-template-columns:1fr 1fr}} label{display:block;font-size:.625rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem} input,textarea,select{width:100%;padding:.8rem 1rem;border-radius:.75rem; border:1px solid var(--hair);background:#fff;font:inherit;font-size:.875rem;color:var(--ink)} input::placeholder,textarea::placeholder{color:#cbd5e1} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.18)} textarea{resize:vertical} .done{background:var(--surface);padding:2.5rem;border-radius:var(--r); border:1px solid var(--gold);text-align:center} .done .tick{width:3rem;height:3rem;border-radius:50%;background:#fef9e7;color:var(--gold-dk); display:grid;place-items:center;margin:0 auto 1rem} .done .tick svg{width:1.375rem;height:1.375rem} .done h3{font-size:1.125rem;font-weight:600} .done p{font-size:.875rem;color:var(--ink-soft);margin-top:.5rem} /* ------------------------------------------------------------ the mailto --- What stands where the contact form stood. The address is the control: big enough to read on a phone, and a real link rather than text somebody has to copy. No form, because there is nowhere for a form to post to yet and a form that pretends otherwise is worse than none. */ .mailto{background:var(--surface);padding:2rem;border-radius:var(--r); border:1px solid var(--gold-line);display:flex;flex-direction:column;gap:1rem} @media (min-width:640px){.mailto{padding:2.5rem}} .mailto .addr{display:inline-flex;align-items:center;gap:.75rem;font-size:1.25rem; font-weight:600;letter-spacing:-.01em;color:var(--ink);word-break:break-all} @media (min-width:640px){.mailto .addr{font-size:1.5rem}} .mailto .addr:hover{color:var(--gold-dk)} .mailto .addr svg{width:1.25rem;height:1.25rem;flex:none;color:var(--gold-dk)} .mailto p{font-size:.875rem;line-height:1.7;color:var(--ink-soft)} .mailto .hint{font-size:.6875rem;letter-spacing:.06em;color:var(--ink-mute)} /* ------------------------------------------------------------ utilities --- THE PAGES CARRY NO INLINE `style=` ATTRIBUTE, and that is a security decision rather than a style one: the content-security policy in `site/_headers` says `style-src 'self'`, which blocks inline styles outright. Anything that would have been an inline style is a class here. A page that needs a one-off is a page that needs a class. */ .wide{max-width:56rem} .mt2{margin-top:2rem} .limits{margin-top:2.5rem;max-width:44rem} .u{text-decoration:underline;text-underline-offset:.2em} .dot-a{background:#34d399} .dot-b{background:#f59e0b} .dot-c{background:#60a5fa} /* A problem card on a dark section. Same card, inverted — used by the "what we ask of you" block, where the three demands sit on navy. */ .pcard.on-dark{background:rgba(255,255,255,.03);border-color:var(--gold-line);box-shadow:none} .pcard.on-dark:hover{border-color:var(--gold);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)} .pcard.on-dark .num{color:rgba(255,255,255,.14)} .pcard.on-dark .ic{background:rgba(212,175,55,.12);color:var(--gold-hi)} .pcard.on-dark h3{color:#fff} .pcard.on-dark p{color:#cbd5e1} .pcard.on-dark .meta{border-top-color:rgba(255,255,255,.1);color:#64748b} /* --------------------------------------------------------------- footer --- */ .site-foot{background:var(--deep);color:#fff;border-radius:var(--r-lg);padding:3.5rem 1.5rem; border:1px solid rgba(255,255,255,.06)} @media (min-width:640px){.site-foot{padding:3.5rem 3rem}} .f-top{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-start; padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)} .f-top p{font-size:.75rem;color:#94a3b8;margin-top:.75rem;max-width:30rem;line-height:1.7} .f-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2.5rem 0;font-size:.75rem} @media (min-width:640px){.f-cols{grid-template-columns:repeat(4,1fr)}} /* A label, not a heading: the document outline runs h1 → h2 → h3, and a footer column title is furniture. Styled exactly as the reference's h5. */ .f-cols .t{font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:#94a3b8; margin-bottom:.875rem;font-weight:500} .f-cols ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;color:#cbd5e1} .f-cols a:hover{color:var(--gold-hi)} .f-cols .note{color:#94a3b8;line-height:1.7} .f-bar{padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap; gap:1rem;justify-content:space-between;align-items:center;font-size:.75rem;color:#94a3b8} .langs{display:flex;gap:.75rem;color:var(--gold-hi);font-weight:500;align-items:center} .langs a:hover{color:#fff} .langs a[aria-current="true"]{color:#fff;text-decoration:underline;text-underline-offset:.25em} /* ----------------------------------------------------------------- menu --- `visibility:hidden` when closed, not merely `pointer-events:none`: without it every link inside stays in the tab order and a keyboard reaches an invisible menu, which the brief's "keyboard reachable throughout" makes a defect rather than a detail. */ .menu{position:fixed;inset:0;z-index:80;pointer-events:none;visibility:hidden; display:flex;flex-direction:column} .menu.open{pointer-events:auto;visibility:visible} .menu .bd{position:absolute;inset:0;background:var(--deep);opacity:0;transition:opacity .5s} .menu.open .bd{opacity:.98} .menu .pn{position:relative;flex:1;display:flex;flex-direction:column;color:#fff; padding:1.5rem;opacity:0;transform:translateY(-1.5rem); transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)} @media (min-width:640px){.menu .pn{padding:2rem 3rem}} .menu.open .pn{opacity:1;transform:none} .menu .top{display:flex;align-items:center;justify-content:space-between} .menu .x{width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);display:grid;place-items:center} .menu .x svg{width:1.1rem;height:1.1rem;transition:transform .4s cubic-bezier(.22,1,.36,1)} .menu .x:hover svg{transform:rotate(90deg)} .menu .nav{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.25rem} .menu .nav a{font-size:clamp(2rem,5vw,4rem);font-weight:600;letter-spacing:-.025em; line-height:1.1} .js .menu .nav a{opacity:0;transform:translateY(1.5rem)} .js .menu.open .nav a{opacity:1;transform:none; transition:opacity .6s,transform .8s cubic-bezier(.22,1,.36,1)} .menu .nav a:hover{color:var(--gold-hi)} .menu .bot{padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);display:flex; flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center} /* --------------------------------------------------------------- loader --- HIDDEN UNLESS JAVASCRIPT ASKS FOR IT. The reference painted it over the page from the first byte, so with JavaScript off it never left and the site was a blank navy rectangle. Now `.js` is what makes it exist at all. */ .ld{display:none} .js .ld{position:fixed;inset:0;z-index:200;background:var(--deep);color:#fff;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:1.5rem; transition:transform .85s cubic-bezier(.65,0,.35,1)} .js .ld.up{transform:translateY(-105%)} .ld .m{display:flex;align-items:center;gap:.625rem;opacity:0;transform:translateY(1rem); transition:opacity .7s,transform .8s cubic-bezier(.22,1,.36,1)} .ld .m svg{width:1.75rem;height:1.75rem;color:var(--gold)} .ld .m b{font-size:1.375rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase} .ld.go .m{opacity:1;transform:none} .ld .fa{font-size:.6875rem;letter-spacing:.22em;color:rgba(247,224,150,.7)} .ld .tr{width:10rem;height:1px;background:rgba(255,255,255,.2);overflow:hidden; border-radius:var(--pill)} .ld .tr i{display:block;height:100%;transform:scaleX(0);transform-origin:inline-start; background:linear-gradient(to right,var(--gold-hi),var(--gold)); transition:transform 1.28s cubic-bezier(.65,0,.35,1) .12s} .ld.go .tr i{transform:scaleX(1)} body.lock{overflow:hidden} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .clip>span,.rise,.menu .nav a{opacity:1!important;transform:none!important} html{scroll-behavior:auto} } /* ------------------------------------------------------- feature blocks --- A section that argues one point beside one picture. Used by the funders, companies and services pages, alternating sides down the page. Same breakpoint as `.grid2` — a second one would be a second grid system. */ .feature{display:grid;gap:2.5rem;align-items:center;margin-top:3.5rem} @media (min-width:1024px){ .feature{grid-template-columns:1fr 1fr;gap:4rem} .feature.flip .fig{order:2} } .feature+.feature{margin-top:4.5rem} .feature h3{font-size:1.5rem;font-weight:600;letter-spacing:-.015em;margin-top:.625rem} .feature p{font-size:.9375rem;line-height:1.75;color:var(--ink-soft);margin-top:.875rem} .s-navy .feature p,.s-deep .feature p{color:#cbd5e1} .feature .fig{min-width:0} /* A NEGATIVE LIST. The dot becomes a rule: these are the things we do NOT do, and a reader skimming the bullets should be able to tell which kind of list they are looking at without reading the heading again. */ .ticks.no li::before{width:.75rem;height:1px;border-radius:0;margin-top:.7rem} /* --------------------------------------------------------- the diagrams --- INLINE SVG, AND DELIBERATELY WORDLESS. Text inside SVG does not lay out right-to-left without fighting it, and a diagram whose labels are baked in needs redrawing per language. So every diagram here is shapes only and its legend is ordinary HTML beneath it — one drawing, three languages, and the legend mirrors with everything else. */ .dia{display:block;width:100%;height:auto;border-radius:.875rem; background:linear-gradient(135deg,#0f2544,#050c18);border:1px solid var(--gold-line-soft)} .dia-legend{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem; font-size:.6875rem;letter-spacing:.06em;color:var(--ink-mute)} .s-navy .dia-legend,.s-deep .dia-legend{color:#94a3b8} .dia-legend span{display:inline-flex;align-items:center;gap:.5rem} .dia-legend i{width:.625rem;height:.625rem;border-radius:.1875rem;flex:none} .dia-legend i.g{background:var(--gold)} .dia-legend i.q{background:#334155;border:1px solid #475569} .dia-legend i.l{width:1rem;height:1px;border-radius:0;background:var(--gold);opacity:.7} /* ---------------------------------------------------------- the namecard --- The name is the most memorable thing on the About page, so it is given a panel of its own rather than a heading. The Arabic-script word is always `dir="rtl"` and `lang="fa"` in the markup — on the English page too, where it is a foreign word inside a left-to-right sentence and the browser must be told, or the bidi algorithm guesses (D-158's rule, one page over). */ .namecard{margin-top:2rem;padding:3rem 1.5rem;border-radius:var(--r-lg);text-align:center; background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(212,175,55,.02)); border:1px solid var(--gold-line)} @media (min-width:640px){.namecard{padding:4rem 3rem}} .namecard__word{font-size:clamp(3.5rem,12vw,8rem);line-height:1.15;font-weight:600; letter-spacing:-.01em; background:linear-gradient(to bottom,var(--gold-hi),var(--gold) 55%,var(--gold-dk)); -webkit-background-clip:text;background-clip:text;color:transparent} .namecard__roman{margin-top:1rem;font-size:.75rem;letter-spacing:.42em;text-transform:uppercase; color:var(--gold-hi)} /* ------------------------------------------------- filters and tab strips --- BOTH ARE ENHANCEMENTS, AND BOTH ARE HIDDEN UNTIL JAVASCRIPT SAYS SO. A filter bar that does nothing, or a tab that cannot be switched, is a control that cannot work — and D-251 says a control that cannot work is not offered. So with JavaScript off the strip is absent and EVERY card and EVERY panel is visible, which is the honest fallback: more content, not a broken interface. */ .strip-tabs{display:none} .js .strip-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem} .strip-tabs button{padding:.5rem 1.125rem;border-radius:var(--pill);font-size:.6875rem; font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--hair); background:#fff;color:var(--ink-soft);transition:background .25s,color .25s,border-color .25s} .strip-tabs button:hover{border-color:var(--gold);color:var(--gold-dk)} .strip-tabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .s-navy .strip-tabs button,.s-deep .strip-tabs button{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14);color:#cbd5e1} .s-navy .strip-tabs button[aria-selected="true"],.s-deep .strip-tabs button[aria-selected="true"]{ background:var(--gold);border-color:var(--gold);color:var(--deep)} /* A panel the tab strip switches. Without JavaScript every one is shown, and each keeps its own heading so the stack still reads as a document. */ .js .panel[hidden]{display:none} /* ------------------------------------------------------ the company grid --- */ .cards{display:grid;gap:1.25rem;margin-top:2rem} @media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}} @media (min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}} .ccard{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:1.5rem; display:flex;flex-direction:column;gap:1rem; transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s} .ccard:hover{transform:translateY(-4px);border-color:var(--gold); box-shadow:0 18px 40px -18px rgba(11,18,32,.28)} .ccard__logo{width:3.5rem;height:3.5rem;border-radius:.875rem;flex:none;display:grid; place-items:center;background:linear-gradient(135deg,#e2e8f0,#cbd5e1); border:1px solid var(--gold-line-soft);font-size:.5rem;letter-spacing:.14em; text-transform:uppercase;color:rgba(11,18,32,.35);text-align:center;padding:.25rem} .ccard h3{font-size:1.0625rem;font-weight:600;line-height:1.3} .ccard .sector{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk)} .ccard p{font-size:.8125rem;line-height:1.65;color:var(--ink-soft)} .ccard .go{margin-top:auto;padding-top:1rem;border-top:1px solid var(--hair); font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.5rem;color:var(--ink)} .ccard .go:hover{color:var(--gold-dk)} .ccard .go svg{width:.875rem;height:.875rem;transition:transform .3s} .ccard .go:hover svg{transform:translateX(4px)} [dir="rtl"] .ccard .go svg{transform:scaleX(-1)} [dir="rtl"] .ccard .go:hover svg{transform:scaleX(-1) translateX(4px)} /* ----------------------------------------------------------- the example --- A BANNER, NOT A FOOTNOTE. These pages carry an invented company so the layout can be judged, and a reader must not be able to mistake it for a real one. It is the first thing on the page and it says so in plain words. */ .example{display:flex;align-items:flex-start;gap:.875rem;padding:1.125rem 1.25rem; border-radius:var(--r);background:#fef9e7;border:1px solid var(--gold); font-size:.8125rem;line-height:1.6;color:var(--ink)} .example svg{width:1.125rem;height:1.125rem;flex:none;margin-top:.1rem;color:var(--gold-dk)} .s-navy .example,.s-deep .example{background:rgba(212,175,55,.12);color:#fff} /* A profile's facts: a plain two-column list that stacks on a phone. */ .facts-grid{display:grid;gap:1rem 2rem;margin-top:1.5rem} @media (min-width:640px){.facts-grid{grid-template-columns:repeat(2,1fr)}} .facts-grid div{padding-bottom:1rem;border-bottom:1px solid var(--hair)} .facts-grid dt,.facts-grid .k{font-size:.625rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-mute)} .facts-grid dd,.facts-grid .v{font-size:.9375rem;margin-top:.35rem;color:var(--ink)}