/* site.css -- GulfArabic, "Desert Pop" skin. GENERATED by build/build_css.py. Do not edit this file by hand: edit build/10-tokens.css or build/30-overrides.css and run the script again. Composed from assets/lesson.css (the heritage skin), with its font and token blocks replaced and a structural layer appended. lesson.css is still the stylesheet for the members' area and for the five translated trees, so it must keep working -- nothing here edits it. */ /* =========================================================================== Desert Pop — fonts and tokens. =========================================================================== This replaces the @font-face block and the :root block at the top of lesson.css. Everything below those two blocks in lesson.css is reused unchanged, which is the point: the old stylesheet is fully tokenised, so most of this redesign is a palette and two typefaces, not a rewrite. The structural deltas live in 30-overrides.css. FONT FILES. Two are new, three stop being used: NEW bricolage-grotesque-v9-latin-700.woff2 display NEW jetbrains-mono-v24-latin-700.woff2 labels, transliteration KEEP ibm-plex-sans-v23-latin-regular.woff2 body KEEP ibm-plex-sans-v23-latin-600.woff2 body bold KEEP noto-naskh-arabic-v44-arabic_latin-regular.woff2 DROP fraunces-v38-latin-500 / -600 / -500italic (59 KB, now unused) DROP ibm-plex-sans-v23-latin-500 (24 KB, now unused) That is six faces where there were seven, and Bricolage is VARIABLE, so one file covers every display weight the design uses. Both new files want font-display:swap and both fall back to a face every machine already has, so the site is correct before they are uploaded -- the display face falls back to Plex, and the label face to the system monospace, which is the right shape anyway. The transliteration is set in a monospace face on purpose. It is a notation, not prose: ^ is ayn, S is the emphatic s, x is kh. Monospacing it keeps those characters distinct and signals that the system is a system. ========================================================================= */ /* format('woff2'), NOT format('woff2-variations'). The latter was never standardised and current Chrome and Safari treat it as an invalid format string, which drops the whole @font-face rule -- the page then renders in the fallback and looks almost right, which is the worst way to fail. A variable font is declared as plain woff2 with a RANGE in font-weight. font-stretch:100% matches what Google serves: the file carries opsz, wdth and wght axes but only the 100% width instance is published, and without this line a browser may pick a different wdth default. Filenames follow the convention already in /fonts -- family, Google's version number, subset, weight -- because that is what is on the server and the version doubles as a cache-buster when Google bumps the file. */ /* ONE STATIC WEIGHT, not the variable file. Bricolage's variable woff2 is 76,888 bytes because it carries three axes (opsz, wdth, wght). The single static 700 is 22,384 -- 54 KB less on every page. Measured, not assumed: with the variable file the homepage's fonts came to 145,636 bytes against the 128,000 it served before the redesign, so the change I justified as trimming the font payload was making it heavier. The skin can afford one weight because its display type is all headline weight. Everything that was 500 or 600 in the inherited rules is set to 700 in 30-overrides.css, explicitly, rather than left to the browser's closest-match. */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal;font-weight:700;font-stretch:100%;font-display:swap; src:url('../fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2'); } @font-face{ font-family:'JetBrains Mono'; font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2'); } @font-face{ font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-v23-latin-600.woff2') format('woff2'); } @font-face{ font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/noto-naskh-arabic-v44-arabic_latin-regular.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-FEFF; } :root{ /* ---- grounds --------------------------------------------------------- Warm near-white rather than the old sand. --surface is pure white so a card lifts off the page; the heritage skin had them the other way round (tinted card on a darker ground), which is why it read as paper. */ --paper:#FFFCF7; --paper-2:#F6F0E6; --surface:#FFFFFF; /* ---- text ------------------------------------------------------------ Every one of these is checked against --paper: --ink #16111F on #FFFCF7 16.9:1 --ink-soft #3B3447 on #FFFCF7 9.8:1 --ink-faint #5B5368 on #FFFCF7 6.4:1 (the old value failed at 11px) */ --ink:#16111F; --ink-soft:#3B3447; --ink-faint:#5B5368; /* ---- coral, where the old skin had terracotta ------------------------ --trail is the bright graphic value and is NEVER used for text or for a fill behind white text. --trail-text is the darkened one that passes: --trail-text #C62A1C on #FFFCF7 5.1:1 white on --trail-btn #C62A1C 5.1:1 */ --trail:#FF5A4D; --trail-btn:#C62A1C; --trail-text:#C62A1C; --trail-dim:#A82114; /* ---- teal, the primary action ---------------------------------------- --moss-dark #00665C on #FFFCF7 5.9:1 white on --moss-dark 5.9:1 --moss and --cta-bright are graphic values: dark ink sits on them, never white. #0ED0BC with white text is 1.9:1, which is why nothing does that. */ --moss:#00A99A; --moss-dark:#00665C; /* ---- amber ----------------------------------------------------------- --gold is the highlighter and the chip fill, always under dark ink. --gold-text is the readable one: #8A5A00 on #FFFCF7 is 5.5:1. */ --gold:#FFC247; --gold-text:#8A5A00; --line:#EDE6DC; --rule-strong:#DDD4C8; /* Longer and softer than the heritage shadow, because a white card on a near-white ground needs the shadow to do the separating. */ --card-shadow:0 22px 44px -30px rgba(22,17,31,.30); --radius:18px; --font-display:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif; --font-body:'IBM Plex Sans',system-ui,sans-serif; /* --font-label drives every eyebrow, breadcrumb, rail heading, pager label and plan term in the old stylesheet. Pointing it at the monospace face is a one-line change that puts the whole labelling layer into mono. */ --font-label:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --font-arabic:'Noto Naskh Arabic','Amiri','Geeza Pro',serif; /* ---- ornaments ------------------------------------------------------- The heritage skin carried a fixed girih lattice behind every page and a rub-el-hizb diamond on each vocabulary card. Desert Pop is a flat ground: both are switched off in 30-overrides.css rather than deleted here, so the heritage skin keeps working from the same source file. The padlock survives -- the rail genuinely needs it -- recoloured from the old #52604F to --ink-faint. */ --orn-rub:none; --orn-rub-solid:none; --orn-rub-solid-gold:none; --orn-girih:none; --orn-areesh:none; --orn-padlock:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.6%207.2V5.1a3.4%203.4%200%20016.8%200v2.1%22%20fill%3D%22none%22%20stroke%3D%22%235B5368%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%222.4%22%20y%3D%227.2%22%20width%3D%2211.2%22%20height%3D%227.4%22%20rx%3D%222%22%20fill%3D%22%235B5368%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210.2%22%20r%3D%221.3%22%20fill%3D%22%23FFFCF7%22%2F%3E%3Crect%20x%3D%227.3%22%20y%3D%2210.2%22%20width%3D%221.4%22%20height%3D%222.6%22%20rx%3D%22.7%22%20fill%3D%22%23FFFCF7%22%2F%3E%3C%2Fsvg%3E"); /* Arabic in ink rather than the old teal-blue: in Desert Pop the teal is the action colour, and Arabic script competing with buttons for the same hue made the lesson pages read as a field of links. Transliteration carries the teal instead, which is also where the mono lands. */ --arabic:#16111F; --translit:#00665C; /* Used once, by the opt-in modal's input focus ring, and only ever as var(--accent,#8a5a2b) -- so it was never broken, it just quietly fell back to the heritage brown on the one form that collects email addresses. Defined here so that ring matches every other focus ring. */ --accent:#16111F; --cta:#00665C; --cta-hover:#004F47; --cta-text:#00665C; --cta-bright:#0ED0BC; --cta-bright-hover:#3BE0CE; --footer-bg:#16111F; --footer-ink:#FFFCF7; --footer-ink-soft:#B4ACC2; --footer-line:rgba(255,252,247,.14); --footer-link-hover:#0ED0BC; --measure:42rem; --header-h:5.4rem; } /* ==== inherited from lesson.css, unchanged ==== */ *,*::before,*::after{box-sizing:border-box;} html{font-size:100%;-webkit-text-size-adjust:100%;} html[data-textsize="l"]{font-size:112.5%;} html[data-textsize="xl"]{font-size:125%;} html{background:var(--paper);} body{ margin:0; background:transparent; color:var(--ink); font-family:var(--font-body); font-size:1.25rem; line-height:1.66; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:var(--orn-girih); background-size:64px 64px; background-attachment:fixed; opacity:.18; } a{color:var(--trail-text);text-underline-offset:.18em;} a:hover{color:var(--trail-dim);} img{max-width:100%;height:auto;} :focus-visible{outline:2px solid var(--trail);outline-offset:3px;border-radius:4px;} .skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100;} .skip:focus{left:.5rem;top:.5rem;} .site-header{ position:sticky;top:0;z-index:50; background:rgba(227,219,199,.96); backdrop-filter:saturate(1.25) blur(8px); border-bottom:1px solid var(--line); } .site-header::after{ content:"";display:block;height:2px; background:var(--rule-strong); } .site-header__inner{ max-width:1080px;margin:0 auto;padding:.8rem 1.5rem; display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap; } .wordmark{ font-family:var(--font-display);font-weight:600; font-size:1.95rem;line-height:1;letter-spacing:-.02em; color:var(--ink);text-decoration:none;margin-right:auto; white-space:nowrap; } .wordmark span{font-style:italic;font-weight:500;color:var(--moss-dark);} @media(max-width:64rem){.wordmark{font-size:1.7rem;}} @media(max-width:34rem){.wordmark{font-size:1.5rem;}} .site-nav{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;row-gap:.6rem;} .site-nav a{ font-family:var(--font-body);font-weight:500;font-size:.95rem;white-space:nowrap; letter-spacing:.005em;color:var(--ink);text-decoration:none; padding:.2rem 0;border-bottom:2px solid transparent; transition:color .18s ease,border-color .18s ease; } .site-nav a:hover{border-bottom-color:var(--trail);} .site-nav a:hover{color:var(--trail-dim);} .site-nav a.free{display:inline-flex;align-items:center;gap:.4rem;} .site-nav a.btn{border:1px solid var(--cta);} .site-nav a.btn:hover{border:1px solid var(--cta-hover);} .site-nav a.btn--outline{border:1px solid var(--cta);} .site-nav a.btn--outline:hover{border:1px solid var(--cta);} .nav-toggle{ display:none;align-items:center;gap:.5rem; font-family:var(--font-body);font-weight:600;font-size:.95rem; color:var(--ink);background:transparent; border:1px solid var(--line);border-radius:8px; padding:.5rem .8rem;cursor:pointer;line-height:1; } .nav-toggle .bars{display:grid;gap:3px;} .nav-toggle .bars i{display:block;width:16px;height:2px;background:var(--ink);border-radius:1px;} @media(max-width:64rem){ .site-header[data-nav] .nav-toggle{display:inline-flex;} .site-header[data-nav] .site-nav{ display:none; position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:stretch;gap:0; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1.25rem 1.5rem 1.25rem; box-shadow:var(--card-shadow); } .site-header[data-nav="open"] .site-nav{display:flex;} .site-header[data-nav] .site-nav a:first-of-type{padding-top:0;} .site-header[data-nav] .site-nav a{ font-size:1.05rem;padding:.8rem 0; border-bottom:1px solid var(--line);border-top:0; } .site-header[data-nav] .site-nav a:last-of-type{border-bottom:0;} .site-header[data-nav] .site-nav .btn{ margin-top:.75rem;text-align:center;font-size:1rem;padding:.75rem 1rem; border:1px solid var(--cta); } .site-header[data-nav] .site-nav .btn--outline{border:1px solid var(--cta);} .site-header[data-nav] .site-nav a.free{justify-content:center;} .site-header[data-nav] .textsize{margin-top:.9rem;align-self:flex-start;} .site-header__inner{position:relative;} } .btn{ display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.92rem; padding:.7rem 1.15rem;border-radius:8px;text-decoration:none;cursor:pointer; background:var(--cta);border:1px solid var(--cta);color:#fff !important; transition:background .2s ease,border-color .2s ease,color .2s ease; } .btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);} .btn--outline{ background:transparent;border-color:var(--cta);color:var(--cta-text) !important; } .btn--outline:hover{background:var(--cta);border-color:var(--cta);color:#fff !important;} .paywall .btn, .site-footer .btn, .btn--on-dark{ background:var(--cta-bright);border-color:var(--cta-bright);color:var(--ink) !important; } .paywall .btn:hover, .site-footer .btn:hover, .btn--on-dark:hover{background:var(--cta-bright-hover);border-color:var(--cta-bright-hover);} .site-header .btn{ font-size:.92rem;font-weight:600;letter-spacing:.005em; padding:.58rem .9rem;white-space:nowrap;line-height:1.2; } .btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink) !important;} .btn--ghost:hover{background:var(--ink);color:var(--paper) !important;} .textsize{ position:relative;display:inline-flex;flex:none; background:var(--paper-2);border:1px solid var(--line); border-radius:999px;padding:4px;font-family:var(--font-label); } .textsize__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);} .textsize button{ position:relative;z-index:2;border:0;background:transparent;cursor:pointer; padding:.45rem .85rem;border-radius:999px;color:var(--ink-soft); font-family:inherit;font-weight:500;line-height:1; min-width:2.9rem;min-height:2.4rem; transition:color .25s ease; } .textsize button[aria-pressed="true"]{color:#fff;} .textsize__thumb{ position:absolute;top:4px;left:4px; height:calc(100% - 8px);width:calc(33.333% - 2.7px); background:var(--ink);border-radius:999px; transition:transform .28s cubic-bezier(.65,0,.35,1); } html[data-textsize="l"] .textsize__thumb{transform:translateX(100%);} html[data-textsize="xl"] .textsize__thumb{transform:translateX(200%);} .textsize .s1{font-size:.8rem;} .textsize .s2{font-size:.95rem;} .textsize .s3{font-size:1.1rem;} .page{ max-width:1080px;margin:0 auto;padding:2.5rem 1.5rem 5rem; display:grid;gap:3rem;grid-template-columns:minmax(0,1fr); } @media(min-width:64rem){ .page{grid-template-columns:minmax(0,1fr) 17rem;align-items:start;} .lesson{grid-column:1;grid-row:1;} .rail{ grid-column:2;grid-row:1; position:sticky;top:calc(var(--header-h) + 1rem); max-height:calc(100vh - var(--header-h) - 2rem); overflow-y:auto; overscroll-behavior:contain; } .rail::-webkit-scrollbar{width:8px;} .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;} .rail::-webkit-scrollbar-track{background:transparent;} } .crumbs{font-family:var(--font-label);font-size:.8rem;color:var(--ink-soft);margin:0 0 1.5rem;} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;} .crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--ink-faint);} .crumbs a{color:var(--ink-soft);text-decoration:none;} .crumbs a:hover{color:var(--trail-text);text-decoration:underline;} .eyebrow{ font-family:var(--font-label);font-size:.78rem;letter-spacing:.18em; text-transform:uppercase;color:var(--trail-text); display:flex;align-items:center;gap:10px;margin:0 0 1rem; } .eyebrow::before{content:"";width:20px;height:1px;background:var(--trail-text);} h1{ font-family:var(--font-display);font-weight:500; font-size:clamp(2.2rem,1.5rem+3vw,3.4rem); line-height:1.06;letter-spacing:-.01em;margin:0 0 1rem; } h1 em{font-style:italic;font-weight:500;color:var(--moss);} .lesson>h1{padding-bottom:1.9rem;position:relative;} .lesson>h1::after{ content:"";position:absolute;left:0;bottom:0; width:min(100%, var(--measure));height:1.7rem; background: linear-gradient(var(--line),var(--line)) left center / calc(50% - 1.3rem) 1px no-repeat, linear-gradient(var(--line),var(--line)) right center / calc(50% - 1.3rem) 1px no-repeat, var(--orn-rub) center center / 1.5rem 1.5rem no-repeat; } h2{ font-family:var(--font-display);font-weight:500; font-size:clamp(1.5rem,1.2rem+1vw,1.9rem); line-height:1.2;margin:2.75rem 0 1rem; } h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin:2rem 0 .6rem;} .standfirst{max-width:var(--measure);color:var(--ink-soft);font-size:1.1rem;margin:0 0 2rem;} .legacy,.lesson p{max-width:var(--measure);} .legacy p{max-width:none;} .entries,.legacy{position:relative;} .entry{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem 1.3rem 2.6rem; margin:0 0 .85rem; } .entry::before{ content:"";position:absolute;left:.85rem;top:1.5rem; width:1.15rem;height:1.15rem; background:var(--orn-rub-solid) center / contain no-repeat; } .entry:hover{border-color:var(--gold);} .legacy .nsh,.entry .nsh{ font-family:var(--font-arabic);font-weight:400;font-size:1.6em;line-height:2; direction:rtl;unicode-bidi:isolate; color:var(--arabic); margin-left:.2em;margin-right:.35em; } .legacy .prose .nsh, .legacy .note .nsh{font-size:1.3em;line-height:1.85;} .legacy b,.legacy .substantive{color:var(--translit);font-weight:600;} .legacy .gloss{color:var(--ink);font-weight:400;} .legacy .substantive{ display:inline-block;font-size:1.05em; border-bottom:2px solid var(--gold);padding-bottom:.08em; } .legacy .green{color:var(--trail-text);font-weight:600;} .legacy .green:has(.nsh), .legacy .green:has(button){color:var(--ink);font-weight:400;} .legacy .trq, .legacy .note{ display:block;position:relative;clear:both; background:var(--paper-2); border:1px solid var(--line);border-radius:var(--radius); padding:1rem 1.15rem 1rem 2.9rem;margin:1.4rem 0;font-size:.95em; } .legacy .note>.figure--side{ float:right;margin:.15rem 0 .8rem 1.2rem;max-width:min(45%, 13rem); } .legacy .note>.figure--side img{border-radius:10px;} .legacy .trq::before, .legacy .note::before{ content:"";position:absolute;left:1rem;top:1.1rem;width:1.1rem;height:1.1rem; background:var(--orn-areesh) center / contain no-repeat;opacity:.85; } .table-wrap{ overflow-x:auto; margin:1.8rem 0; border:1px solid var(--line);border-radius:var(--radius); background:var(--surface); -webkit-overflow-scrolling:touch; } .legacy table{ border-collapse:collapse;width:100%; font-size:.95em; min-width:34rem; } .legacy th,.legacy td{ padding:.7rem .9rem;text-align:left;vertical-align:middle; border-bottom:1px solid var(--line); } .legacy thead th{ position:sticky;top:0;z-index:1; background:var(--paper-2); font-family:var(--font-label);font-size:.72rem;font-weight:500; letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft); border-bottom:1px solid var(--rule-strong); white-space:nowrap; } .legacy tbody tr:nth-child(even){background:rgba(193,101,47,.045);} .legacy tbody tr:last-child td{border-bottom:none;} .legacy tbody tr:hover{background:rgba(184,146,63,.10);} .legacy td .nsh,.legacy th .nsh{font-size:1.35em;line-height:1.6;} .legacy .bullets{list-style:none;margin:1.6rem 0;padding-left:1.9rem;display:grid;gap:.85rem;} .legacy .bullets li{position:relative;line-height:1.6;} .legacy .bullets li::before{ content:"";position:absolute;left:-1.6rem;top:.45em; width:.85rem;height:.85rem; background:var(--orn-rub-solid-gold) center / contain no-repeat; } .legacy .lede{font-size:1.08em;line-height:1.65;color:var(--ink);} .legacy .prose{margin:0 0 1.35rem;line-height:1.7;} .legacy .prose:last-child{margin-bottom:0;} .legacy .grouplabel{ font-family:var(--font-label);font-size:.76rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft); margin:1.6rem 0 .7rem; } .legacy .sound{ display:inline-block;min-width:2.1rem;text-align:center; font-family:var(--font-label);font-weight:600;font-size:1.05em; color:#fff;background:var(--trail-btn); border-radius:6px;padding:.1em .45em;margin-right:.15em; } .legacy ul{list-style:none;padding-left:1.7rem;} .legacy ul li{position:relative;} .legacy ul li::before{ content:"";position:absolute;left:-1.5rem;top:.5em;width:.8rem;height:.8rem; background:var(--orn-rub-solid-gold) center / contain no-repeat; } .legacy br+br{line-height:2.1;} .legacy iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius);margin:1.5rem 0;} hr,.ornament-rule{ border:0;height:1.7rem;margin:2.5rem 0; background: linear-gradient(var(--line),var(--line)) left center / calc(50% - 1.3rem) 1px no-repeat, linear-gradient(var(--line),var(--line)) right center / calc(50% - 1.3rem) 1px no-repeat, var(--orn-rub) center center / 1.5rem 1.5rem no-repeat; } .say{ --size:2.15rem;position:relative; width:var(--size);height:var(--size);flex:none; display:inline-grid;place-items:center;vertical-align:middle;margin:0 .15rem; padding:0;cursor:pointer;border-radius:50%; border:1px solid var(--line);background:var(--surface);color:var(--trail-text); transition:background .18s ease,border-color .18s ease,transform .1s ease; } .say:hover{background:var(--trail);border-color:var(--trail);color:#fff;} .say:active{transform:scale(.94);} .say svg{width:.85rem;height:.85rem;fill:currentColor;} .say .ico-stop{display:none;} .say[aria-pressed="true"]{background:var(--trail);border-color:var(--trail);color:#fff;} .say[aria-pressed="true"] .ico-play{display:none;} .say[aria-pressed="true"] .ico-stop{display:block;} .say[aria-pressed="true"]::after{ content:"";position:absolute;inset:0;border-radius:50%; border:1px solid var(--trail);animation:pulse 1.1s ease-out infinite;pointer-events:none; } @keyframes pulse{from{transform:scale(1);opacity:.7;}to{transform:scale(1.7);opacity:0;}} .say--none{cursor:default;border-style:dashed;color:var(--ink-faint);} .say--none:hover{background:var(--surface);border-color:var(--line);color:var(--ink-faint);} figure{margin:2rem 0;} figure img{border-radius:var(--radius);display:block;width:100%;border:1px solid var(--line);} figcaption{ font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink-soft); margin-top:.65rem;padding-left:.8rem;border-left:2px solid var(--gold);line-height:1.45; } .figure--side{margin:1.6rem 0;} @media(min-width:48rem){ .figure--side{ float:right;margin:.3rem 0 1.2rem 1.75rem; max-width:min(45%, 15rem); } .figure--left{float:left;margin:.3rem 1.75rem 1.2rem 0;} .figure--side:has(+ .table-wrap){float:none;margin:1.8rem auto;} } .figure--fit{margin:1.8rem 0;} .figure--side img,.figure--fit img{border-radius:var(--radius);} .figure--side figcaption,.figure--fit figcaption{text-align:left;} .paywall{ position:relative;margin:3.5rem 0 0; background:var(--ink);color:var(--paper); border:1px solid var(--ink);border-radius:var(--radius); padding:2.4rem 1.9rem 2rem;text-align:center;box-shadow:var(--card-shadow); overflow:hidden; } .paywall::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:var(--gold); } .paywall h2{margin:.6rem 0 .5rem;color:var(--paper);} .paywall p{max-width:32rem;margin:0 auto 1.6rem;color:#C7CFC5;} .paywall__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} .paywall .btn--ghost{border-color:var(--paper);color:var(--paper) !important;} .paywall .btn--ghost:hover{background:var(--paper);color:var(--ink) !important;} .pager{ display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap; margin-top:2.5rem;padding-top:1.5rem; border-top:1px solid var(--line); font-family:var(--font-body);font-size:.95rem; } .pager a{ display:inline-block;font-weight:600;font-size:.92rem;line-height:1.2; padding:.7rem 1.15rem;border-radius:8px;text-decoration:none;cursor:pointer; background:transparent;border:1px solid var(--cta);color:var(--cta-text); transition:background .2s ease,border-color .2s ease,color .2s ease; } .pager a:hover{background:var(--cta);border-color:var(--cta);color:#fff;} .pager a[href*="subscr"], .pager a[href*="monstercampaigns"], .pager a[href*="amzn."]{ background:var(--cta);border-color:var(--cta);color:#fff; } .pager a[href*="subscr"]:hover, .pager a[href*="monstercampaigns"]:hover, .pager a[href*="amzn."]:hover{background:var(--cta-hover);border-color:var(--cta-hover);} .pager span{display:block;font-family:var(--font-label);font-size:.72rem; color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;} .rail{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);overflow:hidden; } .rail h2{ font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft);font-weight:500; margin:0;padding:1.1rem 1.2rem .85rem;border-bottom:1px solid var(--line); line-height:1.5; position:sticky;top:0;background:var(--surface);z-index:1; } .rail h2 .unit{ display:block; color:var(--trail-text);font-weight:500;letter-spacing:.1em; } .rail ol{list-style:none;margin:0;padding:0;} .rail li{ display:flex;gap:.6rem;align-items:baseline; padding:.6rem 1.2rem;border-bottom:1px solid var(--line);font-size:.95rem; } .rail li:last-child{border-bottom:none;} .rail .ref{font-family:var(--font-label);font-size:.76rem;color:var(--ink-faint); flex:none;width:3rem;font-variant-numeric:tabular-nums;} .rail a{color:var(--ink);text-decoration:none;} .rail a:hover{color:var(--trail-text);text-decoration:underline;} .rail .locked{color:var(--ink-soft);} .rail .locked::after{content:"";display:inline-block;vertical-align:-.15em; width:1em;height:1em;margin-left:.4em; background:var(--orn-padlock) center / contain no-repeat;} .rail [aria-current="page"]{font-weight:600;color:var(--trail-text);} .rail .btn{display:block;margin:1rem 1.2rem 1.2rem;text-align:center;} .index-list{list-style:none;margin:1rem 0 2.5rem;padding:0; border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;} .index-list li{display:flex;gap:.8rem;align-items:baseline; padding:.7rem 1.2rem;border-bottom:1px solid var(--line);} .index-list li:last-child{border-bottom:none;} .index-list .ref{font-family:var(--font-label);font-size:.8rem;color:var(--ink-faint); flex:none;width:3.4rem;font-variant-numeric:tabular-nums;} .index-list a{text-decoration:none;} .index-list a:hover{text-decoration:underline;} .index-list .locked{color:var(--ink-soft);} .index-list .locked::after{content:"";display:inline-block;vertical-align:-.15em; width:1em;height:1em;margin-left:.4em; background:var(--orn-padlock) center / contain no-repeat;} .site-footer{ border-top:3px solid var(--gold); background:var(--footer-bg);color:var(--footer-ink); padding:3rem 1.5rem 2.5rem;font-size:.95rem; } .site-footer__inner{max-width:1080px;margin:0 auto;display:grid;gap:2rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));} .site-footer h2{font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--footer-ink-soft);margin:0 0 .7rem;font-weight:500;} .site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;} .site-footer a{color:var(--footer-ink);text-decoration:none;} .site-footer a:hover{color:var(--footer-link-hover);text-decoration:underline;} .colophon{max-width:1080px;margin:2rem auto 0;padding-top:1.5rem; border-top:1px solid var(--footer-line);font-size:.82rem;color:var(--footer-ink-soft);} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;} body::before{background-attachment:scroll;} } @media(prefers-contrast:more){ body::before{display:none;} .entry::before{display:none;} } .page--narrow{grid-template-columns:minmax(0,1fr);max-width:44rem;} @media(min-width:64rem){.page--narrow{grid-template-columns:minmax(0,1fr);}} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;} .quiz__q{font-size:clamp(1.6rem,1.2rem+1.6vw,2.3rem);padding-bottom:1.9rem;} .options{border:0;margin:0 0 1.75rem;padding:0;display:grid;gap:.6rem;} .option{ display:flex;align-items:center;gap:.85rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.15rem; font-size:1.05rem;cursor:pointer; transition:border-color .15s ease,background .15s ease; } .option:hover{border-color:var(--trail);background:var(--paper);} .option:focus-within{outline:2px solid var(--trail);outline-offset:2px;} .option input{width:1.15rem;height:1.15rem;accent-color:var(--trail-btn);flex:none;margin:0;} .option__text{font-family:var(--font-body);} .option.is-picked{border-color:var(--trail);background:var(--paper);} .submit{border:0;font-family:var(--font-body);cursor:pointer;} .verdict{ display:flex;align-items:center;gap:1rem;flex-wrap:wrap; border-radius:var(--radius);padding:1rem 1.2rem;margin:1.5rem 0 0; font-weight:600; } .verdict--right{background:rgba(76,107,84,.14);border:1px solid var(--moss);color:var(--moss-dark);} .verdict--wrong{background:rgba(193,101,47,.10);border:1px solid var(--trail);color:var(--trail-text);} .entry,.legacy .trq,.legacy p{display:flow-root;} .legacy::after{content:"";display:block;clear:both;} .legacy img{max-width:100%;height:auto;} .figure--side img{display:block;} .legacy .pager{margin-bottom:2.5rem;} .legacy .table-wrap + *{margin-top:1.8rem;} .legacy figure + .entry, .legacy figure + p{margin-top:1.4rem;} .hero{padding:3.5rem 1.5rem 2.5rem;} .hero__inner{ max-width:1080px;margin:0 auto; display:grid;gap:2.5rem;align-items:center; grid-template-columns:1fr; } .hero__inner>*{min-width:0;} @media(min-width:56rem){ .hero__inner{grid-template-columns:1.05fr .95fr;gap:3.5rem;} } .hero h1{ font-family:var(--font-display);font-weight:600; font-size:clamp(2.1rem,1.4rem+2.6vw,3.35rem); line-height:1.1;letter-spacing:-.02em;margin:.35rem 0 0; } .hero h1 em{font-style:italic;font-weight:500;color:var(--moss-dark);} .hero__lede{ max-width:34rem;margin:1.15rem 0 0; font-size:1.12rem;line-height:1.6;color:var(--ink-soft); } .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem;} .hero__actions .btn{font-size:1rem;padding:.85rem 1.35rem;} .hero__facts{ list-style:none;margin:2rem 0 0;padding:0; display:grid;gap:.55rem;font-size:.97rem;color:var(--ink-soft); } .hero__facts li{position:relative;padding-left:1.6rem;} .hero__facts li::before{ content:"";position:absolute;left:0;top:.35em;width:.85rem;height:.85rem; background:var(--orn-rub-solid-gold) center / contain no-repeat; } .hero__facts strong{color:var(--ink);font-weight:600;} .hero__figure{margin:0;} .hero__figure img{ display:block;width:100%;height:auto; border-radius:var(--radius);box-shadow:var(--card-shadow); } .band{padding:3.25rem 1.5rem;} .band--tint{background:var(--surface);border-block:1px solid var(--line);} .band__inner{max-width:1080px;margin:0 auto;} .band h2{margin-top:0;} .measure{max-width:var(--measure);} .cols{display:grid;gap:2.5rem;grid-template-columns:1fr;} @media(min-width:56rem){.cols{grid-template-columns:1fr 1fr;gap:3rem;}} .cols h2{font-size:clamp(1.4rem,1.2rem+.7vw,1.75rem);} .places{ list-style:none;margin:1.5rem 0 0;padding:0; display:flex;flex-wrap:wrap;gap:.6rem; } .places li{ font-family:var(--font-label);font-size:.82rem;letter-spacing:.02em; border:1px solid var(--line);border-radius:999px; padding:.4rem .95rem;background:var(--surface);color:var(--ink-soft); } .band--tint .places li{background:var(--paper);} .compare{display:grid;gap:1.25rem;margin:2rem 0 2.25rem;grid-template-columns:1fr;} @media(min-width:48rem){.compare{grid-template-columns:1fr 1fr;}} .compare__col{ border:1px solid var(--line);border-radius:var(--radius); padding:1.4rem 1.5rem;background:var(--surface); } .compare__col h3{ margin:0 0 .6rem;font-size:1.05rem;font-weight:600; font-family:var(--font-body);color:var(--ink-soft); } .compare__col p{margin:0;} .compare__col--ours{ background:var(--paper);border-color:var(--cta); box-shadow:inset 0 0 0 1px var(--cta); } .compare__col--ours h3{color:var(--cta-text);} .pullquote{ margin:2.5rem 0 0;padding:1.6rem 1.75rem 1.4rem 3.2rem; position:relative;max-width:46rem; border:1px solid var(--line);border-radius:var(--radius); background:var(--paper-2); } .pullquote::before{ content:"";position:absolute;left:1.25rem;top:1.75rem; width:1.25rem;height:1.25rem; background:var(--orn-areesh) center / contain no-repeat;opacity:.85; } .pullquote p{ margin:0;font-family:var(--font-display);font-style:italic;font-weight:500; font-size:clamp(1.1rem,1rem+.5vw,1.35rem);line-height:1.5; } .pullquote cite{ display:block;margin-top:.9rem;font-style:normal; font-family:var(--font-label);font-size:.75rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-faint); } .logos{ list-style:none;margin:1.75rem 0 2.75rem;padding:0; display:flex;flex-wrap:wrap;align-items:center;gap:2.25rem; } .logos img{ display:block;height:2.2rem;width:auto; filter:grayscale(1);opacity:.65; transition:filter .2s ease,opacity .2s ease; } .logos li:hover img{filter:grayscale(0);opacity:1;} .closer{ padding:3.5rem 1.5rem;text-align:center; background:var(--ink);color:var(--paper); border-top:3px solid var(--gold); } .closer__inner{max-width:44rem;margin:0 auto;} .closer h2{color:var(--paper);margin:0 0 1.5rem;} .closer .hero__actions{justify-content:center;margin-top:0;} .closer .btn--outline{border-color:var(--paper);color:var(--paper) !important;} .closer .btn--outline:hover{background:var(--paper);color:var(--ink) !important;} .linklist{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1.1rem;} .linklist li{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);padding:1.1rem 1.3rem; } .linklist li>a{ font-family:var(--font-display);font-weight:500;font-size:1.2rem; color:var(--ink);text-decoration:none; } .linklist li>a:hover{color:var(--cta-text);text-decoration:underline;} .linklist li>a::after{ content:"";display:inline-block;vertical-align:-.05em;margin-left:.45em; width:.62em;height:.62em; background:var(--orn-rub-solid-gold) center / contain no-repeat; } .linklist p{margin:.45rem 0 0;color:var(--ink-soft);font-size:.97rem;line-height:1.55;} .plans{display:grid;gap:1.25rem;margin:2rem 0 2.5rem;grid-template-columns:1fr;} @media(min-width:44rem){.plans{grid-template-columns:1fr 1fr;}} .plan{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);padding:1.6rem 1.5rem; display:flex;flex-direction:column; } .plan--featured{ background:var(--paper);border-color:var(--cta); box-shadow:inset 0 0 0 1px var(--cta); } .plan__name{ font-family:var(--font-display);font-weight:500; font-size:1.15rem;line-height:1.35;margin:0 0 .4rem; } .plan__local{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-soft);line-height:1.5;} .plan form{margin:0 0 .9rem;} .plan__buy{display:block;width:100%;text-align:center;font-size:1rem;padding:.85rem 1rem;} .plan__terms{margin:auto 0 0;font-size:.82rem;color:var(--ink-faint);} .smallprint{font-size:.88rem;color:var(--ink-soft);} .rail__blurb{ margin:0;padding:1.1rem 1.2rem 0; font-size:.93rem;line-height:1.55;color:var(--ink-soft); } .rail .btn+.btn{margin-top:0;} .articles{list-style:none;margin:2rem 0;padding:0;display:grid;gap:.75rem;} .articles li{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface); transition:border-color .18s ease,background .18s ease; } .articles li:hover{border-color:var(--cta);background:var(--paper);} .articles a{ display:flex;gap:.7rem;align-items:baseline; padding:1rem 1.25rem;text-decoration:none; font-family:var(--font-display);font-weight:500;font-size:1.1rem; line-height:1.35;color:var(--ink); } .articles a::before{ content:"";flex:none;width:.7rem;height:.7rem;align-self:center; background:var(--orn-rub-solid) center / contain no-repeat; } .articles li:hover a{color:var(--cta-text);} .articles a [lang="ar"]{font-family:var(--font-arabic);font-size:1.1em;} .contactform{margin:2rem 0 0;max-width:var(--measure);} .field{margin:0 0 1.25rem;} .field label{ display:block;margin:0 0 .4rem; font-family:var(--font-label);font-size:.8rem;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-soft);font-weight:500; } .field input,.field textarea{ width:100%;font:inherit;font-size:1rem;color:var(--ink); background:var(--surface); border:1px solid var(--line);border-radius:8px; padding:.7rem .85rem; } .field textarea{line-height:1.6;resize:vertical;} .field input:focus,.field textarea:focus{ outline:2px solid var(--cta);outline-offset:1px; border-color:var(--cta);background:var(--paper); } .field--verify img{display:block;margin-top:.6rem;border:1px solid var(--line);border-radius:4px;} .formactions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem;} .formerror{ margin:1.5rem 0 0;padding:.85rem 1.1rem; border:1px solid var(--trail);border-left-width:4px;border-radius:8px; background:rgba(193,101,47,.08);color:var(--trail-text);font-weight:600; } .formok{ margin:1.75rem 0;padding:1.1rem 1.3rem; border:1px solid var(--moss);border-left-width:4px;border-radius:8px; background:rgba(76,107,84,.10);color:var(--moss-dark); font-size:1.05rem;line-height:1.6; } .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .account{ border:1px solid var(--line);border-radius:var(--radius); background:var(--surface);padding:1.2rem 1.4rem;margin:1.75rem 0 2rem; display:grid;gap:.6rem; } .account__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;} .account__label{ font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft);min-width:8rem; } .account__actions{margin-top:.4rem;} .quizbar{ height:6px;border-radius:999px;background:var(--paper-2); overflow:hidden;margin:.9rem 0 0;max-width:22rem; } .quizbar__fill{ display:block;height:100%;background:var(--cta); border-radius:999px;transition:width .3s ease; } .quiz .verdict a.btn{margin-left:auto;} .quizcard{ position:relative;margin:3.5rem 0 0; background:var(--ink);color:var(--paper); border:1px solid var(--ink);border-radius:var(--radius); padding:2.4rem 1.9rem 2rem;text-align:center;box-shadow:var(--card-shadow); overflow:hidden; } .quizcard::before{ content:"";position:absolute;left:0;right:0;top:0;height:3px; background:var(--cta-bright); } .quizcard h2{margin:.6rem 0 .5rem;color:var(--paper);} .quizcard p{max-width:32rem;margin:0 auto 1.6rem;color:#C7CFC5;} .quizcard__actions, .quizcard .paywall__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} .quizcard .btn{background:var(--cta-bright);border-color:var(--cta-bright);color:var(--ink) !important;} .quizcard .btn:hover{background:var(--cta-bright-hover);border-color:var(--cta-bright-hover);} [id]{scroll-margin-top:calc(var(--header-h) + 1.5rem);} html{scroll-behavior:smooth;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} .account__actions--spaced{margin-top:1.9rem;} .offer{text-align:center;} .offer .plans{grid-template-columns:1fr;max-width:32rem;margin-left:auto;margin-right:auto;} .plan__terms + .plan__terms{margin-top:.5rem;} .optin::backdrop{ background:rgba(20,16,12,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); } .optin{ border:0; padding:0; max-width:34rem; width:calc(100% - 2rem); background:transparent; color:var(--ink); max-height:calc(100vh - 2rem); } .optin__inner{ position:relative; background:var(--paper,#fbf9f6); border:1px solid var(--line,#e3ddd5); border-radius:10px; padding:2rem 1.75rem 1.5rem; box-shadow:0 1.5rem 3rem rgba(0,0,0,.35); text-align:center; } .optin__x{ position:absolute; top:.35rem; right:.5rem; background:none; border:0; cursor:pointer; font-size:1.6rem; line-height:1; color:var(--ink-soft,#5c554e); padding:.4rem .6rem; min-width:2.75rem; min-height:2.75rem; } .optin__x:hover{color:var(--ink,#1d1a17);} .optin__title{ margin:0 0 1.25rem; font-size:1.5rem; line-height:1.2; } .optin__now{display:block; font-size:2.1rem; letter-spacing:.02em;} .optin__field{margin:0 0 .85rem; text-align:left;} .optin__field label{ display:block; font-size:.82rem; margin-bottom:.2rem; color:var(--ink-soft,#5c554e); } .optin__field input{ width:100%; font:inherit; font-size:1rem; padding:.6rem .7rem; color:var(--ink,#1d1a17); background:#fff; border:1px solid var(--line,#e3ddd5); border-radius:6px; } .optin__field input:focus-visible{ outline:2px solid var(--accent,#8a5a2b); outline-offset:1px; } .optin__actions{margin:1.1rem 0 .6rem;} .optin__go{width:100%; font-size:1.05rem; padding:.7rem 1rem;} .optin__go[disabled]{opacity:.6; cursor:progress;} .optin__small{ margin:0; font-size:.76rem; color:var(--ink-soft,#5c554e); line-height:1.4; } .optin__err{ margin:.5rem 0 0; padding:.5rem .7rem; border-radius:6px; background:#fbeaea; border:1px solid #8c2020; color:#8c2020; font-size:.85rem; text-align:left; } .optin__no{margin:1.1rem 0 0;} .optin__decline{ background:none; border:0; padding:.3rem; cursor:pointer; font:inherit; font-size:.8rem; color:var(--ink-soft,#5c554e); text-decoration:underline; line-height:1.4; } .optin__decline:hover{color:var(--ink,#1d1a17);} .optin__hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; } @media (max-width:30rem){ .optin__inner{padding:1.6rem 1.1rem 1.2rem;} .optin__title{font-size:1.25rem;} .optin__now{font-size:1.7rem;} } @media (prefers-reduced-motion: no-preference){ .optin[open] .optin__inner{animation:optin-in .18s ease-out;} @keyframes optin-in{ from{opacity:0; transform:translateY(.75rem) scale(.98);} to {opacity:1; transform:none;} } } .optin-page{max-width:30rem; margin:0 auto; text-align:center;} .optin-page .optin__form{text-align:left;} :root{ --buy:#BF4E16; --buy-hover:#A8431A; } .btn--buy{ background:var(--buy); border-color:var(--buy); font-size:1.05rem; padding:.95rem 1.6rem; line-height:1.3; } .btn--buy:hover{background:var(--buy-hover); border-color:var(--buy-hover);} .buybox{margin:2.25rem 0; text-align:center;} .buybox form{margin:0;} .buybox__note{ margin:.6rem 0 0; font-size:.82rem; color:var(--ink-faint); } .sales h2{margin-top:2.75rem;} .sales h3{margin-top:1.9rem; font-size:1.35rem; line-height:1.3;} .sales p{max-width:var(--measure);} .sales .testimonial{ margin:1.5rem 0; padding:1.1rem 1.3rem; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--trail); border-radius:var(--radius); } .sales .testimonial p{margin:0 0 .6rem;} .sales .testimonial p:last-of-type{margin-bottom:.6rem;} .sales .testimonial footer{ font-size:.82rem; color:var(--ink-faint); font-style:normal; } .sales .testimonial footer::before{content:"— ";} .sales .ticks{list-style:none; padding:0; margin:1rem 0; max-width:var(--measure);} .sales .ticks li{ position:relative; padding-left:1.6rem; margin:0 0 .55rem; } .sales .ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--moss-dark); font-weight:700; } .sales .guarantee{ margin:2.25rem 0; padding:1.25rem 1.4rem; background:var(--surface); border:2px solid var(--moss); border-radius:var(--radius); } .sales .guarantee h3{margin:0 0 .5rem; color:var(--moss-dark);} .sales .guarantee p{margin:0;} @media (max-width:30rem){ .btn--buy{font-size:.98rem; padding:.85rem 1rem; width:100%;} } .sales .plans{grid-template-columns:1fr !important; max-width:none;} .sales .plan{text-align:center; padding:2rem 1.75rem;} .sales .plan__name{font-size:1.6rem;} .sales .plan__local{font-size:1rem; max-width:34rem; margin-left:auto; margin-right:auto;} .sales .plan__local:first-child{font-size:.95rem;} .sales .plan__terms{margin-top:1.25rem;} .sales .plan .buybox{margin:1.5rem 0 0;} .offerbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--buy,#BF4E16); color:#fff; box-shadow:0 -2px 14px rgba(0,0,0,.22); } .offerbar[hidden]{display:none;} .offerbar__inner{ max-width:64rem; margin:0 auto; padding:.6rem 2.6rem .6rem 16px; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; position:relative; } .offerbar__text{margin:0; font-size:.92rem; line-height:1.35; margin-right:auto;} .offerbar__sub{display:block; font-size:.8rem; opacity:.85;} .offerbar__clock{ margin:0; font-variant-numeric:tabular-nums; font-weight:700; font-size:1rem; letter-spacing:.01em; } .offerbar__go{margin-right:auto; background:#fff !important; color:var(--buy,#BF4E16) !important; border-color:#fff !important; font-size:.85rem; padding:.4rem .9rem; white-space:nowrap; } .offerbar__go:hover{background:#fff !important; filter:brightness(.94);} .offerbar__x{ position:absolute; top:50%; right:4px; transform:translateY(-50%); background:none; border:0; color:#fff; cursor:pointer; font-size:1.5rem; line-height:1; min-width:2.5rem; min-height:2.5rem; } .offerbar__x:hover{opacity:.75;} @media (max-width:40rem){ .offerbar__inner{padding-right:2.4rem;} .offerbar__text{font-size:.85rem; width:100%;} .offerbar__go{width:100%; text-align:center;} } .clockline{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; margin:0 0 1.5rem; padding:.6rem .9rem; background:var(--surface); border:1px solid var(--buy,#BF4E16); border-radius:8px; } .clockline[hidden]{display:none;} .clockline__label{font-size:.85rem; color:var(--ink-soft);} .clockline__time{ font-weight:700; font-size:1.15rem; color:var(--buy,#BF4E16); font-variant-numeric:tabular-nums; } .buybox--arrow{position:relative;padding-top:4.6rem;} .buyarrow{ position:absolute; top:0; width:132px; height:92px; fill:none; stroke:#D32F13; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; overflow:visible; pointer-events:none; } .buyarrow--l{left:50%; margin-left:-252px;} .buyarrow--r{left:50%; margin-left:120px; transform:scaleX(-1);} @media (prefers-reduced-motion: no-preference){ .buyarrow--l{animation:swish-l 1.3s ease-in-out 3;} .buyarrow--r{animation:swish-r 1.3s ease-in-out 3;} @keyframes swish-l{ 0%,100%{transform:translate(0,0);} 50% {transform:translate(6px,6px);} } @keyframes swish-r{ 0%,100%{transform:scaleX(-1) translate(0,0);} 50% {transform:scaleX(-1) translate(6px,6px);} } } @media (max-width:46rem){ .buybox--arrow{padding-top:3.4rem;} .buyarrow--r{display:none;} .buyarrow--l{ left:50%; margin-left:-56px; width:104px; height:72px; stroke-width:8; } @media (prefers-reduced-motion: no-preference){ .buyarrow--l{animation:swish-l 1.3s ease-in-out 3;} } } /* =========================================================================== Desert Pop — the structural layer. =========================================================================== Appended after the whole of lesson.css, so these rules win on order at equal specificity. Where a heritage rule is more specific than a plain class (the nav drawer, the paywall buttons), the selector here matches its specificity rather than reaching for !important. This file is the part that is NOT a palette swap: the shapes that make the skin Desert Pop rather than the heritage skin in new colours -- pills instead of soft rectangles, a flat header instead of blurred paper, white cards lifted on shadow, and the transliteration moved into monospace. Three ornaments were switched off in 10-tokens.css. Two of them were doing real work as bullets, so they are replaced here rather than simply lost. ========================================================================= */ /* ---- 1. the page ground ------------------------------------------------- The girih lattice was a fixed, full-viewport background layer. Desert Pop is a flat warm ground, so the layer goes entirely -- not just its image, which would leave a fixed pseudo-element painting nothing. */ body::before{content:none;display:none;} /* ---- 2. display type --------------------------------------------------- Bricolage is a grotesque, so it wants weight and negative tracking where Fraunces wanted neither. The heritage rules set font-weight:500 and letter-spacing:-.01em explicitly, so the family token alone is not enough. */ h1,h2,h3,.wordmark,.plan__name,.quiz__q{ font-family:var(--font-display); font-weight:700; letter-spacing:-.025em; } h1{font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance;} h2{font-weight:700;letter-spacing:-.025em;text-wrap:balance;} /* .hero h1 sets its own weight:600 and is more specific than the group above, so the homepage headline rendered a notch lighter than every other h1 until this matched its specificity. */ .hero h1{font-weight:700;letter-spacing:-.03em;} h1 em,h2 em,.hero h1 em{ font-style:normal; font-weight:700; color:var(--moss-dark); } p{text-wrap:pretty;} /* The wordmark was a serif with an italic second half. Desert Pop sets it as one grotesque word and colours the second half instead. */ .wordmark{font-size:1.55rem;letter-spacing:-.04em;} /* :not(.wordmark__mark) matters. The mark is a too, so a bare `.wordmark span` also coloured it --moss-dark -- which is #00665C, exactly the teal its own tile is filled with, so the letter rendered invisible on its own background. */ .wordmark span:not(.wordmark__mark){ font-style:normal; font-weight:700; color:var(--moss-dark); } /* ---- 3. the header ----------------------------------------------------- Flat, warm, one hairline. The heritage header was translucent sand over a blurred page with a 2px rule under it; against a flat ground the blur has nothing to do and the double rule reads as a seam. */ .site-header{ background:var(--paper); backdrop-filter:none; border-bottom:1px solid var(--line); } .site-header::after{content:none;display:none;} .site-nav a{ font-weight:500; font-size:.95rem; color:var(--ink-soft); border-bottom:0; } .site-nav a:hover{color:var(--ink);border-bottom-color:transparent;} /* ---- 4. buttons -------------------------------------------------------- Pills, and never under 44px tall. The heritage button was 8px-cornered and .7rem tall, which at 16px root is a 38px target. */ .btn,.pager a,.submit,.plan__buy{ border-radius:999px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-body); font-weight:700; letter-spacing:0; padding:.72rem 1.4rem; line-height:1.2; } .btn{background:var(--cta);border:1px solid var(--cta);color:#fff;} .btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);} /* The outline button is the secondary action, so it takes the ink border Desert Pop uses throughout rather than a tinted teal one. */ .btn--outline{ background:var(--surface); border:2px solid var(--ink); color:var(--ink) !important; } .btn--outline:hover{background:var(--ink);color:var(--paper) !important;} .site-nav a.btn--outline,.site-header[data-nav] .site-nav .btn--outline{ border:2px solid var(--ink); } .site-nav a.btn--outline:hover{background:var(--ink);color:var(--paper) !important;} /* On a dark panel the bright teal is the fill and the ink is the text -- never white on bright teal, which is 1.9:1. */ .paywall .btn,.site-footer .btn,.btn--on-dark,.closer .btn{ background:var(--cta-bright); border-color:var(--cta-bright); color:#0A3832 !important; } .paywall .btn:hover,.site-footer .btn:hover,.btn--on-dark:hover,.closer .btn:hover{ background:var(--cta-bright-hover); border-color:var(--cta-bright-hover); } .site-header .btn{padding:.6rem 1.15rem;font-size:.92rem;min-height:44px;} .site-nav a.btn{border:1px solid var(--cta);} .site-nav a.btn:hover{border:1px solid var(--cta-hover);} /* A single visible focus ring everywhere, in ink so it reads on every tint. */ a:focus-visible,button:focus-visible,input:focus-visible, summary:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--ink); outline-offset:2px; border-radius:4px; } /* ---- 5. the labelling layer ------------------------------------------- --font-label is now monospace, so eyebrows, breadcrumbs, rail headings, pager labels and plan terms are already mono. What changes here is the eyebrow's shape: the heritage version was uppercase text preceded by a 20px dash. Desert Pop makes it a chip. */ .eyebrow{ display:inline-flex; align-items:center; gap:0; background:var(--gold); color:#4A3200; font-size:.7rem; letter-spacing:.14em; font-weight:700; padding:.4rem .8rem; border-radius:999px; } .eyebrow::before{content:none;display:none;} .crumbs{font-size:.74rem;letter-spacing:.06em;} .crumbs a:hover{color:var(--cta-text);} /* ---- 6. the audio button ---------------------------------------------- 815 of these across the public English pages, so it is the most repeated object on the site. Round terracotta becomes a rounded-square teal: the same shape language as every other control in the skin, and the teal says "this is the thing to press". */ /* 44px, not 40px, and not 40px-plus-a-clever-pseudo-element. The first version here kept the button at 40 and pushed the hit area out to 48 with an absolutely positioned ::before. Measured with elementFromPoint, a point 3px outside the button still resolved to the parent div, so the extra 8px was decorative. Rather than ship a comment claiming a target the page does not have, the button is simply 44px, with a small negative vertical margin so sitting inline with 20px transliteration does not open up the line. */ .say{ --size:2.75rem; margin:-.2rem .15rem; border-radius:13px; background:#F0FCFA; border:1.5px solid #93E6DA; color:var(--cta-text); } .say:hover{background:var(--cta);border-color:var(--cta);color:#fff;} .say[aria-pressed="true"]{background:var(--cta);border-color:var(--cta);color:#fff;} .say[aria-pressed="true"]::after{ border-radius:13px; border:1.5px solid var(--cta-bright); } /* ---- 7. Arabic and transliteration ------------------------------------ The signature move. .substantive is the transliteration carrier and there are 338 of them; putting it in the monospace face is what makes the notation look like notation. inside a vocabulary entry carries it too on the older pages, so both are named. */ .nsh{ font-family:var(--font-arabic); color:var(--arabic); font-size:1.18em; line-height:1.75; } /* Two different things, which the first version of this file wrongly treated as one. inside a vocabulary entry is the ordinary transliteration carrier -- 27 of them on the greetings lesson alone. .substantive is the KEY WORD highlight, and there are four. Giving both the same treatment put an amber underline under mono teal text and made the highlight read as a rendering fault. */ .entry b,.trq b{ font-family:var(--font-label); font-weight:700; color:var(--translit); letter-spacing:-.01em; } /* The highlight keeps its amber, but as a highlighter stroke behind the word rather than a rule under it -- the same device as the homepage headline, so the two read as one idea. SELECTOR. lesson.css styles this as `.legacy .substantive`, specificity (0,2,0), and every lesson page carries class="legacy" on the article. A plain `.substantive` here lost silently: the amber border-bottom stayed and sat under the new highlighter, which is precisely the kind of half-overridden state that looks like a bug rather than a design. Both selectors are named so the rule holds on lesson pages and on the few non-legacy pages that use the class. */ .substantive, .legacy .substantive{ font-family:var(--font-label); font-weight:700; color:var(--translit); letter-spacing:-.01em; font-size:1em; border-bottom:0; padding:.02em .14em; background-image:linear-gradient(to top,#FFE2A0 0,#FFE2A0 40%,transparent 40%); } /* ---- 8. the vocabulary card ------------------------------------------- White, lifted, and the 2.6rem of left padding goes with the diamond that used to sit in it. */ .entry{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem 1.3rem; box-shadow:var(--card-shadow); } .entry::before{content:none;display:none;} .entry:hover{border-color:var(--cta-bright);} /* ---- 9. panels on dark ------------------------------------------------- The paywall was ink with a gold hairline on top. Desert Pop keeps the dark panel -- it should feel different from the page -- and switches the hairline to bright teal so the paid thing and the primary action share a colour. */ .paywall{ background:var(--ink); border-color:var(--ink); border-radius:var(--radius); } .paywall::before{background:var(--cta-bright);height:4px;} .paywall p{color:#C4BCD2;} .paywall .btn--ghost{border-color:var(--paper);color:var(--paper) !important;} .paywall .btn--ghost:hover{background:var(--paper);color:var(--ink) !important;} .closer{background:var(--ink);border-top:4px solid var(--cta-bright);} .closer .btn--outline{border-color:var(--paper);color:var(--paper) !important;} .closer .btn--outline:hover{background:var(--paper);color:var(--ink) !important;} /* ---- 10. the rail ------------------------------------------------------ */ .rail{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--card-shadow); } .rail h2{ font-size:.72rem; letter-spacing:.14em; font-weight:700; color:var(--ink-faint); } .rail h2 .unit{color:var(--cta-text);font-weight:700;} .rail a:hover{color:var(--cta-text);} .rail [aria-current="page"]{font-weight:700;color:var(--cta-text);} .rail .ref{font-size:.7rem;} /* ---- 11. the footer ---------------------------------------------------- */ .site-footer{ border-top:4px solid var(--cta-bright); background:var(--footer-bg); } .site-footer h2{font-size:.72rem;letter-spacing:.14em;font-weight:700;} /* ---- 12. the pager ----------------------------------------------------- */ .pager{border-top:1px solid var(--line);} .pager a{ background:var(--surface); border:1px solid var(--rule-strong); color:var(--ink); } .pager a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);} .pager a[href*="subscr"],.pager a[href*="monster"]{ background:var(--cta);border-color:var(--cta);color:#fff; } .pager a[href*="subscr"]:hover,.pager a[href*="monster"]:hover{ background:var(--cta-hover);border-color:var(--cta-hover); } .pager span{font-size:.66rem;letter-spacing:.12em;font-weight:700;} /* ---- 13. the quiz ------------------------------------------------------ Bigger targets and a teal progress bar. The option row was 1rem padding on a tinted card; Desert Pop makes it a white card with a 56px row, because on a phone this is the single most tapped control in the members' area. */ .quizbar{height:9px;background:var(--line);max-width:26rem;} .quizbar__fill{background:var(--cta-bright);} .options{gap:.65rem;} .option{ background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:1.05rem 1.2rem; min-height:56px; box-shadow:0 10px 22px -20px rgba(22,17,31,.28); } .option:hover{border-color:var(--cta-bright);background:var(--surface);} .option:focus-within{outline:3px solid var(--ink);outline-offset:2px;} .option.is-picked{background:#F0FCFA;border:2px solid var(--cta-bright);} .option input{accent-color:var(--cta);width:1.25rem;height:1.25rem;} .option__text{font-family:var(--font-label);font-weight:700;color:var(--ink);} .verdict{border-radius:var(--radius);padding:1.15rem 1.35rem;} .verdict--right{ background:#F0FCFA; border:2px solid var(--cta-bright); color:#0A3832; } .verdict--wrong{ background:#FFF5F3; border:2px solid var(--trail); color:var(--trail-text); } /* ---- 14. bullets that lost their ornament ------------------------------ .hero__facts used the gold rub-el-hizb as a bullet and .pullquote used the areesh lattice as a quote mark. Both tokens are none now, so both are replaced -- a teal check for the facts, which is what the list means, and a real oversized quote mark for the pullquote. */ .hero__facts li::before{ background:none; content:""; position:absolute;left:0;top:.42em; width:.95rem;height:.95rem; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%2300665C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-size:contain; background-repeat:no-repeat; } .hero__facts li{padding-left:1.7rem;} .hero__facts strong{color:var(--ink);font-weight:700;} .pullquote{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:1.7rem 1.9rem 1.5rem; box-shadow:var(--card-shadow); } .pullquote::before{ content:"\201C"; background:none; position:absolute; left:1.4rem;top:.35rem; width:auto;height:auto; font-family:var(--font-display); font-weight:700; font-size:4.5rem; line-height:1; color:var(--cta-bright); } .pullquote p{ font-family:var(--font-display); font-style:normal; font-weight:700; letter-spacing:-.02em; padding-top:1.6rem; } /* Two inherited rules set the display face at weight 500 and were not in the group at the top of this file -- the articles index and the link lists. With one static weight shipped they would have been matched to 700 by the browser anyway; declaring it means the stylesheet says what the page does instead of depending on font-matching to be kind. */ .linklist li>a, .articles a{font-weight:700;} .pullquote cite{font-size:.72rem;letter-spacing:.12em;font-weight:700;color:var(--ink-faint);} /* ---- 15. the rest of the homepage furniture ---------------------------- */ .band--tint{background:var(--surface);border-block:1px solid var(--line);} .places li{ font-size:.78rem; letter-spacing:.02em; font-weight:700; border:1px solid var(--line); background:var(--paper-2); color:var(--ink-soft); } .band--tint .places li{background:var(--paper);} .compare__col{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--card-shadow); } .compare__col h3{ font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; color:var(--ink); font-size:1.2rem; } /* The course's own column is the one being argued for, so it is the one that gets the teal border -- the heritage skin gave both columns the same frame and the comparison read as neutral. */ .compare__col--ours{border:2px solid var(--cta-bright);background:#F7FEFD;} .logos img{filter:grayscale(1);opacity:.55;} .logos li:hover img{filter:grayscale(0);opacity:1;} .hero__figure img{border-radius:var(--radius);box-shadow:var(--card-shadow);} /* ---- 16. pricing ------------------------------------------------------- */ .plan{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem 1.6rem; box-shadow:var(--card-shadow); } .plan__name{font-size:1.2rem;} .plan__local{color:var(--ink-soft);} .plan__terms{font-size:.74rem;letter-spacing:.04em;color:var(--ink-faint);} .plan__buy{width:100%;font-size:1rem;padding:.85rem 1rem;} /* ---- 17. prose --------------------------------------------------------- */ .prose a,.measure a{color:var(--cta-text);text-underline-offset:.15em;} .prose a:hover,.measure a:hover{color:var(--ink);} .green{color:var(--cta-text);} /* ---- 18. the nav drawer ------------------------------------------------ Matching the heritage selectors' specificity so the drawer follows the new ground instead of the old sand. */ .site-header[data-nav] .site-nav{ background:var(--paper); border-bottom:1px solid var(--line); } .site-header[data-nav] .site-nav a{ border-bottom:1px solid var(--line); color:var(--ink-soft); } .site-header[data-nav] .site-nav .btn{ margin-top:.85rem; border-radius:999px; border:1px solid var(--cta); } /* ---- 18b. the retired ornaments, replaced ------------------------------ 10-tokens.css sets every --orn-* token to none, and six inherited rules draw with them. The build script now refuses to pass silently on this; it found all six, of which I had noticed one. Two of them -- the rule under a lesson h1 and
-- are multi-layer backgrounds whose two hairlines still painted, so they were rendering as a rule with a gap in the middle where the ornament used to be. The other four simply vanished. Geometry is preserved in each case so nothing reflows: same box, same position, same reserved space. Solid colour and border-radius rather than another data URI, because a dot does not need to be a picture. */ /* The rule under a lesson title: one short teal bar instead of a full-width ornamental rule. Height kept at 1.7rem so the heading spacing is unchanged. */ .lesson>h1::after{ background:var(--cta-bright); width:2.75rem; height:4px; border-radius:2px; bottom:.5rem; } /* Quote and note blocks. */ .legacy .trq::before, .legacy .note::before{ background:var(--cta-bright); width:.55rem; height:.55rem; border-radius:2px; top:1.45rem; left:1.2rem; opacity:1; } /* Generic bulleted lists in legacy prose -- a dot, not a check: these are ordinary prose lists, and a tick would read as a claim. */ .legacy ul li::before{ background:var(--cta-text); width:.42rem; height:.42rem; border-radius:50%; left:-1.25rem; top:.72em; } /*
becomes a plain hairline. It was 1.7rem tall and carried its spacing in that height, so the margin grows to keep the same gap in the flow. */ hr, .ornament-rule{ background:var(--line); height:1px; margin:3.4rem 0; } /* Link lists: a chevron, which is what the link means. */ .linklist li>a::after{ background:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%206l6%206-6%206%22%20fill%3D%22none%22%20stroke%3D%22%2300665C%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-size:contain; background-repeat:no-repeat; background-position:center; } /* The articles index. */ .articles a::before{ background:var(--cta-bright); width:.5rem; height:.5rem; border-radius:50%; } /* ---- 19. reduced motion ------------------------------------------------ The audio button's pulse ring is the only looping animation in the skin, and it loops for as long as a clip plays. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* =========================================================================== Desert Pop — the homepage layout, and one fix that belongs everywhere. =========================================================================== The skin in 30-overrides.css restyles the existing structures. This file is the homepage's own layout: the devices from the design that the old page had no classes for. Nothing here adds copy. Where the design showed a numeral -- the two pitch cards, the six tips -- it comes from a CSS counter, because putting "01" into the markup would be adding text to a page whose text is not to change. ========================================================================= */ /* ---- 0. a marker that went missing ------------------------------------ NOT a homepage rule, and not optional. `.legacy .bullets li::before` draws its marker from --orn-rub-solid-gold, and 10-tokens.css sets every ornament token to none. The token is still DEFINED, so the build script's "every var() is defined" check passed -- and the markers vanished anyway, leaving 1.9rem of indent reserved for nothing on the homepage tips and on a13_arabic_alphabet_handwriting_workbook.php. This shipped. The same mistake was caught in .hero__facts and missed here. The replacement is the teal check already used for the hero facts, so the two lists agree, and it is scoped to .legacy .bullets to match the rule it replaces -- the homepage's own list is restyled further down. */ .legacy .bullets li::before{ background:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%2300665C%22%20stroke-width%3D%223.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-size:contain; background-repeat:no-repeat; background-position:center; } /* ---- 1. the hero ------------------------------------------------------ Two soft tinted discs behind the copy, the way the design had them. They are the only decoration on the page and they sit under everything, so the section clips them rather than letting them widen the document. */ .hero--pop{position:relative;overflow:hidden;} .hero--pop::before, .hero--pop::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0; } .hero--pop::before{ inset-inline-end:-9rem;top:-8rem; width:32rem;height:32rem; background:#FFE9B0; opacity:.5; } .hero--pop::after{ inset-inline-start:-6rem;bottom:-12rem; width:22rem;height:22rem; background:#CFF7F1; opacity:.65; } .hero--pop .hero__inner{position:relative;z-index:1;} /* Bigger and tighter than the inherited hero: this headline is three short lines, not one long one, so it can take the extra size. */ .hero--pop h1{ font-size:clamp(2.4rem,1.5rem+3.6vw,4.3rem); line-height:1.02; letter-spacing:-.035em; margin:.6rem 0 0; } /* The highlighter. A gradient rather than an absolutely positioned bar: it wraps correctly if the phrase ever breaks across lines, which a positioned bar does not. 34% is the height of the stroke, measured from the baseline up, so it clears the descenders in "actually speak". */ .mark{ display:inline-block; padding:0 .08em; background-image:linear-gradient(to top,#FFC247 0,#FFC247 34%,transparent 34%); } .hero--pop .hero__lede{ font-size:clamp(1.05rem,1rem+.4vw,1.2rem); max-width:33rem; } /* ---- 2. what is Gulf Arabic ------------------------------------------- The answer on the left, the places as a chip cloud on the right. Collapses to one column under 56rem, where the chips sit under the paragraph. */ .split{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:start; } @media (min-width:56rem){ .split{grid-template-columns:1.05fr .95fr;gap:3.5rem;} } .split__lead h2{margin-top:0;} /* The seven chips rotate through the three accents. Each tint carries its own darkened ink rather than one grey for all three: #4A3200 on amber is 8.4:1, #0A3832 on mint is 11.6:1, #5C1A12 on coral is 9.1:1. A single ink colour would have failed on at least one of them. */ .places--pop{margin:0;} .places--pop li{ font-size:.82rem; letter-spacing:.01em; font-weight:700; border:0; padding:.55rem 1.05rem; } .places--pop li:nth-child(3n+1){background:#CFF7F1;color:#0A3832;} .places--pop li:nth-child(3n+2){background:#FFE9B0;color:#4A3200;} .places--pop li:nth-child(3n+3){background:#FFD9D4;color:#5C1A12;} .band--tint .places--pop li:nth-child(3n+1){background:#CFF7F1;} /* ---- 3. the pitch, on dark -------------------------------------------- Desert Pop puts its one dark beat on the pitch, which is what this section is. Contrast against #16111F: body #C4BCD2 is 7.6:1, headings and are near-white. */ .band--dark{ background:var(--ink); color:#C4BCD2; border-block:1px solid var(--ink); } .band--dark h2{color:var(--paper);} .band--dark strong{color:#FFFFFF;font-weight:600;} .band--dark a{color:var(--cta-bright);} .band--dark a:hover{color:var(--paper);} /* The two pitch cards, numbered by counter. The numeral is generated, so the markup carries no "01". */ .cols--cards{counter-reset:pitch;} .cols--cards article{ counter-increment:pitch; background:#221A2E; border:1px solid #2E2639; border-radius:var(--radius); padding:2rem 1.9rem; } .cols--cards article::before{ content:counter(pitch,decimal-leading-zero); display:block; font-family:var(--font-label); font-size:.75rem; letter-spacing:.14em; font-weight:700; color:var(--cta-bright); margin-bottom:1rem; } .cols--cards article:nth-child(2)::before{color:var(--gold);} .cols--cards h2{margin-top:0;} /* ---- 4. the logos, in a card ------------------------------------------ */ .logos--card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--card-shadow); padding:1.6rem 1.9rem; gap:1.5rem 2.5rem; margin:1.75rem 0 2.75rem; } .logos--card img{opacity:.7;} .logos--card li:hover img{opacity:1;} /* ---- 5. the tips, as numbered cards ----------------------------------- One hairline-separated stack rather than six bulleted paragraphs. The indent and the marker from .legacy .bullets are both unwound here, because the number replaces the marker. */ .bullets--cards{ counter-reset:tip; list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .legacy .bullets--cards{padding-left:0;} /* The numeral is absolutely positioned and the sentence stays in normal flow. The first version of this made the li a flex row with the numeral as the first item -- but each li is a mix of and bare text nodes, and a flex container turns every one of those runs into its own flex item, so each sentence would have broken into three or four stacked fragments. The marker this replaces was positioned for the same reason. */ .bullets--cards li{ counter-increment:tip; position:relative; background:var(--surface); padding:1.6rem clamp(1.1rem,3vw,1.9rem) 1.6rem clamp(3.6rem,7vw,4.6rem); line-height:1.62; } .legacy .bullets--cards li::before{ content:counter(tip,decimal-leading-zero); position:absolute; left:clamp(1.1rem,3vw,1.9rem); top:1.75rem; width:auto; height:auto; background:none; font-family:var(--font-label); font-size:.75rem; letter-spacing:.1em; font-weight:700; color:var(--cta-text); } /* =========================================================================== Desert Pop — the lesson studio, and the wordmark's Arabic letter. =========================================================================== Built by assets/studio.js from the vocabulary cards the server already sent. Everything here is scoped to .studio, so a page where the script never runs — or where no run of cards was long enough — is untouched and keeps the card list. ========================================================================= */ /* ---- the kh, beside the wordmark -------------------------------------- خ is the first letter of خليجي, Khaleeji, and it is also the sound the site's own transliteration writes as x -- which is the one piece of the notation that most confuses a newcomer. It is decoration here, marked aria-hidden in the markup, so the wordmark still reads "GulfArabic" to a screen reader rather than "kha GulfArabic". */ .wordmark{display:inline-flex;align-items:center;gap:.55rem;} /* `.wordmark span.wordmark__mark`, not `.wordmark__mark`. lesson.css carries its own `.wordmark span { color: var(--moss-dark) }` at (0,2,0), and it is inherited unchanged -- adding :not(.wordmark__mark) to the OVERRIDE copy of that rule in 30-overrides.css did nothing about the original, which went on matching and winning against a single-class selector. The letter rendered #00665C on a #00665C tile: present, correctly sized, and invisible. */ .wordmark span.wordmark__mark{ flex:none; width:2rem;height:2rem; border-radius:.65rem; background:var(--cta); color:var(--cta-bright); font-family:var(--font-arabic); font-size:1.25rem; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding-bottom:.1em; /* Naskh sits high in its em box */ } .site-footer .wordmark span.wordmark__mark{background:var(--cta-bright);color:#0A3832;} /* ---- the studio ------------------------------------------------------- A side-by-side at desk width that stacks under 56rem. The list is NOT sticky: on a short viewport a sticky list and a long focus panel fight each other, and the rail on these pages is already sticky. */ .studio{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; margin:1.75rem 0 2.25rem; } /* The flex bases are sized to the space a LESSON page actually has, not to the window. .page is a grid of content plus a 17rem rail inside a 1080px max-width, so once the rail, the grid gap and the page padding are taken the content column is about 712px. The first version used 20rem and 24rem bases with a 27rem cap, totalling 832px, so the two panels wrapped on every desktop lesson page and the studio was never actually side by side. */ .studio__panel{ flex:1 1 15rem; min-width:0; max-width:21rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--card-shadow); overflow:hidden; } .studio__count{ margin:0; padding:.85rem 1.1rem; border-bottom:1px solid var(--line); font-family:var(--font-label); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--ink-faint); } .studio__list{ list-style:none; margin:0; padding:.35rem; display:flex; flex-direction:column; gap:.1rem; max-height:32rem; overflow-y:auto; } .studio__list::-webkit-scrollbar{width:9px;} .studio__list::-webkit-scrollbar-track{background:var(--paper);} .studio__list::-webkit-scrollbar-thumb{background:var(--rule-strong);border-radius:99px;} .studio__item{ display:flex; align-items:center; gap:.4rem; padding:0 .3rem; border-radius:.75rem; } /* The selector and the play button are siblings, never nested: a