/* Tarkib site styles. Written with CSS logical properties (inline-start / inline-end) so the whole layout mirrors automatically when is set for Arabic. No separate RTL stylesheet needed. */ :root{ --paper:#f6f6fa; --surface:#ffffff; --sunk:#ecedf5; --ink:#16181f; --body:#3d4150; --muted:#676c7e; --faint:#979cb0; --rule:#e3e4ee; --rule-hard:#c8cadb; --accent:#3f4d99; --accent-ink:#2f3a75; --accent-soft:#e8eaf8; --gold:#b07d24; --gold-soft:#f7efdd; --shadow:0 1px 2px rgba(22,24,31,.05), 0 8px 24px rgba(22,24,31,.045); --radius:10px; --wrap:68rem; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#0f121f; --surface:#151827; --sunk:#1b1f31; --ink:#eceef5; --body:#c2c7d5; --muted:#939ab0; --faint:#6e7590; --rule:#262b3f; --rule-hard:#39405a; --accent:#a8b4ff; --accent-ink:#c3cbff; --accent-soft:#1e2650; --gold:#d8a94f; --gold-soft:#2b2415; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); } } :root[data-theme="dark"]{ --paper:#0f121f; --surface:#151827; --sunk:#1b1f31; --ink:#eceef5; --body:#c2c7d5; --muted:#939ab0; --faint:#6e7590; --rule:#262b3f; --rule-hard:#39405a; --accent:#a8b4ff; --accent-ink:#c3cbff; --accent-soft:#1e2650; --gold:#d8a94f; --gold-soft:#2b2415; --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--body); font-family:"IBM Plex Sans","IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased; } html[dir="rtl"] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif; line-height:1.9} h1,h2,h3,h4{color:var(--ink); margin:0; font-weight:600; line-height:1.2; text-wrap:balance} h1,h2{font-family:"IBM Plex Serif","IBM Plex Sans Arabic",Georgia,serif} html[dir="rtl"] h1, html[dir="rtl"] h2{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:700} p{margin:0} a{color:var(--accent-ink); text-underline-offset:3px} a:hover{color:var(--accent)} img{max-width:100%; height:auto} /* the header is sticky: keep a #anchor's heading below it, not under it */ html{scroll-padding-top:4.5rem} @media (max-width:46rem){html{scroll-padding-top:7rem}} code{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.86em; background:var(--sunk); padding:.12em .38em; border-radius:4px; color:var(--ink); word-break:break-word; /* a filename is Latin text: without this the bidi algorithm reorders it inside an Arabic sentence */ direction:ltr; unicode-bidi:isolate; display:inline-block} /* German example text stays left to right wherever it appears */ .mock,[dir="ltr"]{direction:ltr} strong{color:var(--ink); font-weight:600} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)} .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)} html[dir="rtl"] .eyebrow{letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif} /* ── skip link + header ─────────────────────────────────────────── */ /* Hidden until focused. Do NOT park it off screen with a negative inset: inset-inline-start becomes `right` in RTL, which pushed the link 9999px past the right edge and dragged the whole Arabic page sideways. Clipping to a single pixel takes it out of view without moving it. */ .skip{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0} .skip:focus{position:fixed; width:auto; height:auto; margin:0; clip-path:none; inset-inline-start:1rem; top:1rem; z-index:100; background:var(--surface); color:var(--ink); padding:.6rem 1rem; border-radius:6px; box-shadow:var(--shadow)} header.site{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--rule)} header.site .bar{display:flex; align-items:center; gap:1rem; min-height:60px} .brand{display:flex; align-items:center; gap:.55rem; font-weight:600; color:var(--ink); text-decoration:none; font-size:1.02rem; white-space:nowrap} /* The Tarkib mark itself, as a background image so it needs no markup beyond an empty span and no per-page path (url() resolves against this stylesheet, not the page). Two files rather than one tinted shape, because the mark is two-tone: the card follows the theme, the piece never does. */ .brand .mark{width:30px; height:26px; flex:none; background:url(../img/mark-color.svg) center/contain no-repeat} :root[data-theme="dark"] .brand .mark, :root:not([data-theme="light"]) .brand .mark{ background-image:url(../img/mark-white.svg)} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .brand .mark{ background-image:url(../img/mark-color.svg)}} nav.main{display:flex; align-items:center; gap:.2rem; margin-inline-start:auto; flex-wrap:wrap} nav.main a{color:var(--body); text-decoration:none; font-size:.93rem; padding:.4rem .7rem; border-radius:6px} nav.main a:hover{background:var(--sunk); color:var(--ink)} nav.main a.current{color:var(--ink); font-weight:600} .langpick{display:flex; gap:.15rem; background:var(--sunk); border-radius:99px; padding:.2rem} .langpick button, .langpick a{font:inherit; font-size:.82rem; border:0; background:transparent; color:var(--muted); padding:.26rem .7rem; border-radius:99px; cursor:pointer; text-decoration:none; line-height:inherit} .langpick a:hover{color:var(--ink)} .langpick button[aria-pressed="true"], .langpick a[aria-current="true"]{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:var(--shadow)} /* ── buttons ────────────────────────────────────────────────────── */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.72rem 1.3rem; border-radius:8px; font-weight:600; font-size:.97rem; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap} .btn.primary{background:var(--accent); color:#fff} :root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary{color:#0f121f} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn.primary{color:#fff}} .btn.primary:hover{background:var(--accent-ink)} .btn.ghost{border-color:var(--rule-hard); color:var(--ink); background:var(--surface)} .btn.ghost:hover{border-color:var(--accent); color:var(--accent-ink)} .btn.wide{width:100%} /* A button whose address is not filled in yet. site.js strips the href, which already makes it unclickable and unfocusable; this is so it also looks that way rather than looking live. */ .btn[aria-disabled="true"]{opacity:.5; cursor:default; pointer-events:none} .btnrow{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0} .btnrow .btn{flex:1 1 14rem} .soonnote{font-size:.88rem; color:var(--muted); margin:.5rem 0 0} /* one wrapper per seller detail: invisible to the grid, and gone when the detail is empty */ .seller-block > div{display:contents} .seller-block > div[hidden], .seller-block[hidden]{display:none} /* legal.html has no sidebar, so it takes the doc typography without the docs grid */ .solo{display:block} .solo article.doc{margin-inline:auto} article.doc ul.legal-toc{display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem 1.1rem; margin:0 0 1.8rem; padding:0; list-style:none} article.doc ul.legal-toc li{padding:0} .legal-toc a{font-size:.9rem} .updated{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--faint); margin-bottom:1.4rem} /* the hyphens in an ISO date are bidi neutral, so in Arabic the parts get reordered and 2026-09-11 reads back as 11-09-2026. Isolating the date keeps it as written. */ .updated time{direction:ltr; unicode-bidi:isolate} .seller-block{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1.2rem; margin:0 0 1.2rem; padding:1rem 1.1rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); font-size:.95rem} .seller-block dt{color:var(--muted); font-size:.85rem} .seller-block dd{margin:0; color:var(--ink)} @media (max-width:32rem){.seller-block{grid-template-columns:1fr; gap:.1rem .0rem} .seller-block dd{margin-bottom:.6rem}} /* ── hero ───────────────────────────────────────────────────────── */ .hero{padding-block:clamp(2.6rem,7vw,4.6rem) clamp(2rem,5vw,3.2rem)} .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem); align-items:center} @media (max-width:60rem){.hero-grid{grid-template-columns:1fr}} .hero h1{font-size:clamp(2.1rem,5.2vw,3.25rem); letter-spacing:-.02em; margin-bottom:.7rem} html[dir="rtl"] .hero h1{letter-spacing:0} .hero .lede{font-size:clamp(1.03rem,2.1vw,1.18rem); color:var(--body); max-width:34rem} .hero .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.5rem} .hero .note{margin-top:.9rem; font-size:.88rem; color:var(--muted)} .badge{display:inline-flex; align-items:center; gap:.4rem; background:var(--gold-soft); color:var(--gold); padding:.28rem .7rem; border-radius:99px; font-size:.78rem; font-weight:600; margin-bottom:1rem} /* card preview mock */ .mock{background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); padding:1.3rem; display:flex; flex-direction:column; gap:.8rem} .mock .word{font-family:"IBM Plex Serif",Georgia,serif; font-size:1.7rem; color:var(--ink); font-weight:600} html[dir="rtl"] .mock .word{font-family:"IBM Plex Sans Arabic",sans-serif} .mock .tr{color:var(--accent-ink); font-weight:600} .mock .row{display:flex; gap:.55rem; align-items:flex-start; font-size:.93rem} .mock .row .k{flex:none; font-size:1rem} .mock .grammar{border-top:1px dashed var(--rule); padding-top:.7rem; font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.5rem} html[dir="rtl"] .mock .grammar{font-family:"IBM Plex Sans Arabic",sans-serif} /* ── generic sections ───────────────────────────────────────────── */ section.band{padding-block:clamp(2.4rem,6vw,4rem); border-top:1px solid var(--rule)} section.band.tint{background:var(--surface)} .sec-head{max-width:44rem; margin-bottom:2rem; display:flex; flex-direction:column; gap:.5rem} .sec-head h2{font-size:clamp(1.5rem,3.3vw,2rem)} .sec-head p{color:var(--muted)} .grid{display:grid; gap:1rem} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c2{grid-template-columns:repeat(2,1fr)} @media (max-width:56rem){.grid.c3,.grid.c2{grid-template-columns:1fr}} .feat{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:1.2rem 1.25rem; display:flex; flex-direction:column; gap:.45rem} section.band.tint .feat{background:var(--paper)} .feat .ic{font-size:1.35rem; line-height:1} .feat h3{font-size:1.02rem} .feat p{font-size:.93rem; color:var(--muted)} /* levels table */ .levels{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden} .levels th,.levels td{text-align:start; padding:.7rem .9rem; border-bottom:1px solid var(--rule); font-size:.93rem} .levels th{background:var(--sunk); color:var(--ink); font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; font-family:"IBM Plex Mono",monospace} html[dir="rtl"] .levels th{letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif} .levels tbody tr:last-child td{border-bottom:0} .levels .free{color:var(--accent-ink); font-weight:600} .tablewrap{overflow-x:auto} /* price panel */ .prices{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:stretch} @media (max-width:56rem){.prices{grid-template-columns:1fr}} .price{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:1.5rem; display:flex; flex-direction:column; gap:.7rem} .price.hi{border-color:var(--accent); box-shadow:var(--shadow)} .price .amt{font-family:"IBM Plex Serif",Georgia,serif; font-size:2rem; color:var(--ink); font-weight:600} /* the qualifier beside the number: "once, not per month". Sits on the baseline of the big figure without competing with it. */ .price .amt{display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem} .price .amt .once{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif; font-size:.85rem; font-weight:400; color:var(--muted); letter-spacing:0} html[dir="rtl"] .price .amt{font-family:"IBM Plex Sans Arabic",sans-serif} .price ul{margin:0; padding-inline-start:1.1rem; display:flex; flex-direction:column; gap:.35rem; font-size:.93rem; color:var(--muted)} .price .btn{margin-top:auto} .aw-link{margin:.8rem 0 0; font-size:.88rem; color:var(--muted)} .price .aw-link{margin:0} /* the anchor: the real total of the single levels, struck through, and what the set saves */ .price .deal{display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-top:-.35rem} .price .deal s{color:var(--muted); font-size:.95rem} .price .deal .was{color:var(--muted); font-size:.85rem} .price .save{display:inline-flex; background:var(--gold-soft); color:var(--gold); font-weight:600; font-size:.78rem; letter-spacing:.02em; padding:.22rem .65rem; border-radius:99px} /* level previews above the prices: one overview picture per level, a pill per level to jump, and a caption that carries the counts, the price and the button. Scroll snapping does the sliding, so it also works with a trackpad, a swipe and the arrow keys. */ .levelshow{margin:0 0 1.8rem} .ls-top{display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.8rem} .ls-top .lvlbar{margin-bottom:0} .ls-nav{display:flex; gap:.4rem} .ls-nav button{width:2.3rem; height:2.3rem; border-radius:50%; border:1px solid var(--rule-hard); background:var(--surface); color:var(--ink); font-size:1.3rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center} .ls-nav button:hover:not([aria-disabled="true"]){border-color:var(--accent); color:var(--accent-ink)} .ls-nav button[aria-disabled="true"]{opacity:.35; cursor:default} /* right to left: next sits on the left, so its arrow must point left (Chrome does not mirror the angle quotes inside a button on its own) */ html[dir="rtl"] .ls-nav button{transform:scaleX(-1)} .ls-track{display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; border-radius:var(--radius)} .ls-track::-webkit-scrollbar{display:none} .ls-track:focus-visible{outline:2px solid var(--accent); outline-offset:3px} @media (prefers-reduced-motion:reduce){.ls-track{scroll-behavior:auto}} .ls-slide{flex:0 0 100%; scroll-snap-align:start; margin:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden} .ls-slide img{display:block; width:100%; height:auto; aspect-ratio:2/1; background:#0f121f} .ls-slide figcaption{display:flex; justify-content:space-between; align-items:center; gap:.8rem 1.2rem; flex-wrap:wrap; padding:1rem 1.25rem} .ls-cap{display:flex; flex-direction:column; gap:.2rem; flex:1 1 20rem} .ls-cap strong{color:var(--ink); font-size:1.05rem} .ls-cap span{color:var(--muted); font-size:.92rem} @media (max-width:32rem){.ls-slide figcaption .btn{width:100%} .ls-nav{display:none}} /* faq */ details.faq{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:0 1rem} details.faq + details.faq{margin-top:.6rem} details.faq summary{cursor:pointer; padding:.95rem 0; font-weight:600; color:var(--ink); font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center} details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+"; color:var(--accent); font-weight:400; font-size:1.3rem; line-height:1} details.faq[open] summary::after{content:"\2212"} details.faq .a{padding:0 0 1rem; color:var(--muted); font-size:.95rem} /* ── docs layout ────────────────────────────────────────────────── */ .docs{display:grid; grid-template-columns:16rem 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; padding-block:clamp(1.5rem,4vw,2.6rem) 4rem} @media (max-width:60rem){.docs{grid-template-columns:1fr}} aside.side{position:sticky; top:76px; align-self:start} @media (max-width:60rem){aside.side{position:static}} aside.side nav{display:flex; flex-direction:column; gap:1.3rem} .sidegroup{display:flex; flex-direction:column; gap:.15rem} .sidegroup .t{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:.3rem .6rem} html[dir="rtl"] .sidegroup .t{letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif} .sidegroup a{color:var(--body); text-decoration:none; font-size:.93rem; padding:.42rem .6rem; border-radius:6px; border-inline-start:2px solid transparent} .sidegroup a:hover{background:var(--sunk); color:var(--ink)} .sidegroup a.current{background:var(--accent-soft); color:var(--accent-ink); font-weight:600; border-inline-start-color:var(--accent)} .sidegroup a .soon{font-size:.68rem; color:var(--faint); margin-inline-start:.35rem} article.doc{min-width:0; max-width:44rem} article.doc h1{font-size:clamp(1.7rem,4vw,2.3rem); margin-bottom:.5rem} article.doc > .intro{color:var(--muted); font-size:1.02rem; margin-bottom:2rem} article.doc h2{font-size:1.3rem; margin-top:2.4rem; margin-bottom:.7rem; padding-top:1.2rem; border-top:1px solid var(--rule)} article.doc h2:first-of-type{border-top:0; padding-top:0; margin-top:1.6rem} article.doc h3{font-size:1.03rem; margin-top:1.6rem; margin-bottom:.4rem} article.doc p{margin-bottom:.9rem} article.doc ul,article.doc ol{margin:0 0 1rem; padding-inline-start:1.4rem; display:flex; flex-direction:column; gap:.42rem} article.doc li{padding-inline-start:.2rem} /* platform tabs */ .tabs{margin:1.2rem 0 1.4rem} .tabbar{display:flex; gap:.3rem; flex-wrap:wrap; border-bottom:1px solid var(--rule); padding-bottom:.6rem} .tabbar button{font:inherit; font-size:.88rem; border:1px solid var(--rule); background:var(--surface); color:var(--muted); padding:.4rem .85rem; border-radius:7px; cursor:pointer} .tabbar button[aria-selected="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600} .tabpanel{padding-top:1.1rem} .tabpanel[hidden]{display:none} /* callouts */ .note-box{border-inline-start:3px solid var(--accent); background:var(--accent-soft); padding:.9rem 1.1rem; border-radius:0 var(--radius) var(--radius) 0; margin:1.2rem 0; font-size:.95rem} html[dir="rtl"] .note-box{border-radius:var(--radius) 0 0 var(--radius)} .note-box.warn{border-inline-start-color:var(--gold); background:var(--gold-soft)} .note-box .lbl{display:block; font-weight:600; color:var(--ink); margin-bottom:.2rem; font-size:.88rem} /* steps */ ol.steps{counter-reset:s; list-style:none; padding:0; margin:1.2rem 0; display:flex; flex-direction:column; gap:1.1rem} ol.steps > li{counter-increment:s; position:relative; padding-inline-start:2.6rem} ol.steps > li::before{content:counter(s); position:absolute; inset-inline-start:0; top:0; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-size:.82rem; font-weight:600; font-family:"IBM Plex Mono",monospace} html[dir="rtl"] ol.steps > li::before{font-family:"IBM Plex Sans Arabic",sans-serif} ol.steps > li > strong{display:block; color:var(--ink); margin-bottom:.2rem} /* screenshot placeholder: a real that falls back to a labelled box when the file is absent, so dropping the picture in later needs no edit to any page */ figure.shot{margin:1.2rem 0; display:flex; flex-direction:column; gap:.5rem} figure.shot img{display:block; width:100%; border:1px solid var(--rule); border-radius:var(--radius); background:var(--sunk)} figure.shot figcaption{font-size:.85rem; color:var(--muted)} .shot-missing{border:2px dashed var(--rule-hard); border-radius:var(--radius); background:var(--sunk); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; padding:2.4rem 1rem; text-align:center; min-height:150px} .shot-missing .fn{font-family:"IBM Plex Mono",monospace; font-size:.82rem; color:var(--ink); word-break:break-all} .shot-missing .sz{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--faint)} .shot-missing .hint{font-size:.78rem; color:var(--muted)} /* annotated add-on screenshots (img/guide/, written by brand/build_guide_shots.py --web): transparent pictures with their own rounded corners and shadow, so no frame here. The numbered list under each one repeats its badges in the same colours. */ figure.guide{margin:.3rem 0 1.2rem} /* each picture has an 18 px transparent margin (2.56 % of its 740 px canvas): pull it out so the screenshot itself spans the text column, at any width */ figure.guide img{display:block; max-width:105.12%; height:auto; margin-inline-start:-2.56%} /* scoped to article.doc so it beats the general article.doc ol rule */ article.doc ol.callouts{counter-reset:c; list-style:none; padding:0; margin:-.9rem 0 0; display:flex; flex-direction:column; gap:.6rem} article.doc ol.callouts > li{counter-increment:c; position:relative; padding-inline-start:2.3rem; font-size:.95rem} article.doc ol.callouts > li::before{content:counter(c); position:absolute; inset-inline-start:0; top:.05rem; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; font:600 .78rem/1 "IBM Plex Sans",sans-serif; color:#0b0f1d; background:linear-gradient(135deg,#a78bfa,#38bdf8)} article.doc ol.callouts > li > strong{display:block; color:var(--ink); margin-bottom:.05rem} /* the next step starts clearly apart from the list above it */ article.doc ol.callouts + h3, article.doc ol.callouts + p + h3, article.doc ol.callouts + h2{margin-top:2.6rem} article.doc ol.callouts + p{margin-top:1rem} /* next/prev */ .pager{display:flex; gap:1rem; justify-content:space-between; margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--rule); flex-wrap:wrap} .pager a{text-decoration:none; color:var(--body); font-size:.93rem; display:flex; flex-direction:column; gap:.1rem} .pager a span{font-size:.72rem; color:var(--faint); font-family:"IBM Plex Mono",monospace} html[dir="rtl"] .pager a span{font-family:"IBM Plex Sans Arabic",sans-serif} .pager a strong{color:var(--ink)} .pager a:hover strong{color:var(--accent-ink)} /* ── footer ─────────────────────────────────────────────────────── */ footer.site{border-top:1px solid var(--rule); background:var(--surface); padding-block:2.4rem 3rem; margin-top:3rem} footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem} @media (max-width:56rem){footer.site .cols{grid-template-columns:1fr 1fr}} @media (max-width:34rem){footer.site .cols{grid-template-columns:1fr}} footer.site h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); font-family:"IBM Plex Mono",monospace; margin-bottom:.7rem; font-weight:500} html[dir="rtl"] footer.site h4{letter-spacing:0; font-family:"IBM Plex Sans Arabic",sans-serif} footer.site ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem} footer.site a{color:var(--muted); text-decoration:none; font-size:.92rem} footer.site a:hover{color:var(--accent-ink)} footer.site .fine{margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--rule); font-size:.85rem; color:var(--faint); display:flex; gap:1rem; flex-wrap:wrap; justify-content:space-between} @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto}} /* ── card preview: a phone holding the real card ───────────────── */ .phone{width:340px; max-width:100%; background:#111; border-radius:34px; padding:10px; box-shadow:0 2px 6px rgba(0,0,0,.2), 0 24px 60px rgba(0,0,0,.22); flex:none; border:1px solid rgba(255,255,255,.08)} .phone .notch{height:18px; display:flex; align-items:center; justify-content:center} .phone .notch::before{content:""; width:80px; height:5px; border-radius:99px; background:#2a2a2a} .phone .screenwrap{background:#fff; --screenbg:#fff; border-radius:26px; overflow:hidden; position:relative} :root[data-theme="dark"] .phone .screenwrap, :root:not([data-theme="light"]) .phone .screenwrap{background:#1c1c1e; --screenbg:#1c1c1e} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .phone .screenwrap{background:#fff; --screenbg:#fff}} .phone .topbar{display:flex; align-items:center; justify-content:space-between; padding:.5rem .8rem; font-size:.72rem; color:var(--faint); border-bottom:1px solid var(--rule); font-family:"IBM Plex Mono",monospace} html[dir="rtl"] .phone .topbar{font-family:"IBM Plex Sans Arabic",sans-serif} .ankiscreen{height:430px; overflow-y:auto; -webkit-overflow-scrolling:touch; cursor:pointer; direction:ltr; text-align:center} /* The card back is longer than any phone screen, in Anki as well. Rather than squeeze it, say so: a fade and a chevron while there is more below, gone the moment the reader reaches the end. */ .screenarea{position:relative} .screenarea .fade{position:absolute; inset-inline:0; bottom:0; height:60px; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; padding-bottom:.3rem; background:linear-gradient(to bottom, transparent, var(--screenbg) 80%); opacity:0; transition:opacity .18s ease} .screenarea.more .fade{opacity:1} .screenarea .fade span{font-size:1.15rem; line-height:1; color:var(--faint); animation:nudge 1.7s ease-in-out infinite} @keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}} @media (prefers-reduced-motion:reduce){.screenarea .fade span{animation:none}} .phone .footbar{display:flex; gap:.4rem; padding:.55rem; border-top:1px solid var(--rule)} .phone .footbar .flip{flex:1; padding:.6rem; border-radius:8px; border:0; cursor:pointer; background:var(--accent); color:#fff; font:inherit; font-size:.9rem; font-weight:600} :root[data-theme="dark"] .phone .footbar .flip, :root:not([data-theme="light"]) .phone .footbar .flip{color:#0f121f} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .phone .footbar .flip{color:#fff}} .phone .footbar .nav{width:42px; border-radius:8px; border:1px solid var(--rule); background:var(--surface); color:var(--ink); cursor:pointer; font-size:1rem} .phone .footbar .nav:disabled{opacity:.35; cursor:default} .lvlbar,.modebar{display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:.8rem} .lvlbar button,.modebar button{font:inherit; font-size:.85rem; padding:.4rem .85rem; border-radius:99px; border:1px solid var(--rule); background:var(--surface); color:var(--muted); cursor:pointer} .lvlbar button[aria-pressed="true"],.modebar button[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); font-weight:600} .dots{display:flex; gap:.3rem; margin-bottom:.9rem} .dots .dot{width:7px; height:7px; border-radius:50%; background:var(--rule-hard)} .dots .dot.on{background:var(--accent); width:18px; border-radius:99px} /* the play button that replaces Anki's [sound:...] markup */ .ankiscreen .ank-play{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; margin:.2rem; background:#4a56b8; color:#fff; font-size:.8rem} .ankiscreen .ank-play:hover{background:#3c47a0} .ankiscreen .cloze-blank{background:#fde68a; color:#78350f; padding:.05em .5em; border-radius:5px; font-weight:600} .ankiscreen .cloze-answer{background:#bbf7d0; color:#14532d; padding:.05em .5em; border-radius:5px; font-weight:700} .ankiscreen .text{font-size:1.15rem; margin-bottom:.8rem} .ankiscreen .translation{color:#4a56b8; font-weight:600; margin:.6rem 0} /* the phone screen carries its own light/dark ground, so the cloze translation needs its own pair */ :root[data-theme="dark"] .ankiscreen .translation, :root:not([data-theme="light"]) .ankiscreen .translation{color:#a8b4ff} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ankiscreen .translation{color:#4a56b8}} .ankiscreen .hint{font-size:.8rem; color:#666; margin-top:.6rem} .ankiscreen img{max-width:100%; border-radius:8px} /* ── the live card sits in the hero ──────────────────────────────── */ .herophone{display:flex; flex-direction:column; align-items:center; gap:1rem} .herophone .phone{width:320px} .pcontrols{width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:.5rem} .pcontrols .lvlbar,.pcontrols .modebar{margin-bottom:0; justify-content:center} .pcontrols .lvlbar button{padding:.3rem .7rem; font-size:.8rem} .pcontrols .modebar button{padding:.3rem .75rem; font-size:.8rem} .pcontrols .dots{margin-bottom:0} .pcontrols .hero .note.live{color:var(--accent-ink); font-weight:500} /* the play button pulses while a clip is actually playing */ .ankiscreen .ank-play.playing{animation:ankpulse 1s ease-in-out infinite} @keyframes ankpulse{0%,100%{box-shadow:0 0 0 0 rgba(74,86,184,.55)}50%{box-shadow:0 0 0 9px rgba(74,86,184,0)}} /* Short cards sit in the middle of the screen, long ones scroll from the top. Using margin:auto on an inner wrapper rather than justify-content:center, which would clip the top when the content is taller than the box. */ .ankiscreen{display:flex} .ankiscreen > .cardinner{margin:auto; width:100%} /* ── phones ──────────────────────────────────────────────────────── */ @media (max-width:46rem){ body{font-size:16px} /* brand and language share the first row, the links scroll along a second one, so the header never wraps into the three ragged rows it used to */ header.site .bar{flex-wrap:wrap; gap:.4rem .6rem; padding-block:.55rem; min-height:0} .brand{order:1; font-size:.98rem} .langpick{order:2; margin-inline-start:auto} nav.main{order:3; width:100%; margin-inline-start:0; flex-wrap:nowrap; gap:.05rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch} nav.main::-webkit-scrollbar{display:none} nav.main a{white-space:nowrap; font-size:.87rem; padding:.3rem .5rem} /* a tighter hero, so the card is reachable without a long scroll */ .hero{padding-block:1.6rem 1.4rem} .hero h1{font-size:clamp(1.85rem,8vw,2.3rem); margin-bottom:.5rem} .hero .lede{font-size:1rem; line-height:1.55} .hero .cta{margin-top:1.1rem; gap:.55rem} .hero .cta .btn{flex:1 1 100%} /* equal full width, not one wide and one narrow */ .hero .note{margin-top:.7rem; font-size:.85rem} .hero .note.live{margin-top:.9rem} .badge{margin-bottom:.7rem} .hero-grid{gap:1.4rem} .herophone .phone{width:100%; max-width:330px} .pcontrols{max-width:330px} .ankiscreen{height:390px} section.band{padding-block:2rem} .sec-head{margin-bottom:1.3rem} article.doc h2{margin-top:1.8rem} .prices{gap:.8rem} .price{padding:1.2rem} } @media (max-width:23rem){ .herophone .phone{width:100%} .pcontrols .lvlbar button{padding:.28rem .55rem; font-size:.76rem} .ankiscreen{height:360px} } /* More screen, less phone. The bezel, the notch strip and the title bar were eating room the card actually needs, which mattered most on the cloze cards where the sentence sits alone. */ .phone{padding:7px; border-radius:30px} .phone .notch{height:11px} .phone .notch::before{width:64px; height:4px} .phone .screenwrap{border-radius:24px} .phone .topbar{padding:.32rem .7rem; font-size:.66rem} .phone .footbar{padding:.4rem} .phone .footbar .flip{padding:.52rem; font-size:.87rem} .ankiscreen{height:560px} @media (max-width:46rem){ .ankiscreen{height:500px} } @media (max-width:23rem){ .ankiscreen{height:440px} }