/* ظلّ — black and white, hand-made, geometric art. */ /* Adhkar text: KFGQPC Uthman Taha Naskh (King Fahd Complex, used unmodified as its licence asks). Notes and explanations: NT Panorama Naskh. */ @font-face { font-family: "Uthman Taha"; font-weight: 400 700; font-display: swap; src: url("../fonts/naskh/UthmanTNB_v2-0.ttf") format("truetype"); } @font-face { font-family: "Panorama Naskh"; font-weight: 400 700; font-display: swap; src: url("../fonts/naskh/NTPanoramaNaskh-Regular.ttf") format("truetype"); } @font-face { font-family: "Noto Naskh Arabic"; font-weight: 400 700; font-display: swap; src: url("../fonts/naskh/noto-naskh-arabic-400-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "Amiri"; font-weight: 400; font-display: swap; src: url(../fonts/amiri-400-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "Amiri"; font-weight: 400; font-display: swap; src: url(../fonts/amiri-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: "Amiri"; font-weight: 700; font-display: swap; src: url(../fonts/amiri-700-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "Amiri"; font-weight: 700; font-display: swap; src: url(../fonts/amiri-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } @font-face { font-family: "Readex"; font-weight: 300 700; font-display: swap; src: url(../fonts/readex-300-700-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "Readex"; font-weight: 300 700; font-display: swap; src: url(../fonts/readex-300-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; } :root { --bg: #050505; /* a true black, no warmth in it */ --bg-2: #0a0a0a; --surface: #101011; --surface-2: #161617; --surface-3: #212123; --line: rgb(255 255 255 / .075); --line-2: rgb(255 255 255 / .14); --ink: #f3f3f3; --muted: #a4a4a6; --faint: #7d7d80; --gold: #e2e2e2; /* the accent; named before the palette lost its gold */ --gold-2: #ffffff; --gold-ink: #050505; --glow: #a9adb0; /* tinted by the hour in app.js, always neutral */ --text: "Uthman Taha", "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif; --prose: "Amiri", "Noto Naskh Arabic", serif; /* tafsir and notes: Panorama Naskh was unclear at this size */ --ui: "Readex", "Segoe UI", Tahoma, sans-serif; --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --gutter: clamp(16px, 4vw, 48px); --max: 1180px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --shadow: 0 1px 0 rgb(var(--hi) / .04) inset, 0 24px 48px -24px rgb(0 0 0 / .7), 0 8px 16px -8px rgb(0 0 0 / .5); --read: 1; /* reading size multiplier, set by the A-/A+ control */ --hi: 255 255 255; /* base of translucent overlays */ --glass: 21 21 21; /* base of frosted bars and panels */ color-scheme: dark; } /* ---------- themes (black, the default, is :root above) ---------- */ :root[data-theme="white"] { --bg: #ffffff; --bg-2: #f7f7f7; --surface: #f6f6f7; --surface-2: #efeff1; --surface-3: #e4e4e7; /* a plain white page; panels a breath of grey to stand apart */ --line: rgb(0 0 0 / .08); --line-2: rgb(0 0 0 / .15); --ink: #0e0e10; --muted: #48484d; --faint: #6c6c72; --gold: #111113; --gold-2: #000000; --gold-ink: #ffffff; --hi: 0 0 0; --glass: 255 255 255; --shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 1px 2px rgb(0 0 0 / .05), 0 16px 34px -22px rgb(0 0 0 / .2); color-scheme: light; } /* light themes: the page-wide lattice and glow are drawn in ink, not light */ :root[data-tone="light"] body::before { filter: invert(1); opacity: .7; } :root[data-tone="light"] .glow { opacity: .35; } html { transition: background-color .5s var(--ease); } /* ---------- theme picker ---------- */ .theme-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgb(var(--hi) / .05); transition: background .2s, color .2s; } .theme-btn:hover { background: rgb(var(--hi) / .1); color: var(--gold-2); } .theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .themes[hidden] { display: none; } .themes { pointer-events: auto; width: min(100%, 720px); margin-top: 10px; padding: 14px; border-radius: var(--r-lg); background: rgb(var(--glass) / .94); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -20px rgb(0 0 0 / .5); display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; animation: drop .45s var(--ease); } .themes h3 { grid-column: 1 / -1; margin: 0 4px 2px; font-size: .84rem; font-weight: 500; color: var(--gold); } /* each theme is shown as a small page of itself: its ground, a panel with two lines of text, and its accent */ .swatch { display: grid; gap: 8px; padding: 8px; border-radius: var(--r-md); font-size: .86rem; color: var(--ink); text-align: start; transition: background .2s; } .swatch:hover { background: rgb(var(--hi) / .06); } .swatch i { position: relative; display: block; height: 64px; border-radius: 12px; background: var(--a); box-shadow: 0 0 0 1px var(--line-2); overflow: hidden; } .swatch i::before { content: ""; position: absolute; inset: 12px 12px 12px 30%; border-radius: 7px; background: var(--c); background-image: linear-gradient(var(--d), var(--d)), linear-gradient(var(--d), var(--d)); background-repeat: no-repeat; background-size: 62% 4px, 40% 4px; background-position: right 9px top 11px, right 9px top 21px; } .swatch i::after { content: ""; position: absolute; left: 12px; bottom: 12px; width: 18%; height: 10px; border-radius: 4px; background: var(--b); } .swatch span { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 0 4px; } .swatch small { font-size: .72rem; color: var(--faint); } .swatch[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; scrollbar-color: var(--surface-3) var(--bg); scroll-padding-top: 110px; } body { margin: 0; min-height: 100svh; background: var(--bg); color: var(--ink); font: 400 1rem/1.75 var(--ui); caret-color: var(--gold); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; } svg { shape-rendering: geometricPrecision; } body::before { /* faint khatam lattice over the whole page */ content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23aebdb3' stroke-opacity='.06' stroke-width='.8'%3E%3Cpath d='M60 16.8l17.9 25.3 25.3 17.9-25.3 17.9L60 103.2 42.1 77.9 16.8 60l25.3-17.9z M60 26l12 22 22 12-22 12-12 22-12-22-22-12 22-12z'/%3E%3Cpath d='M0 0l17.9 17.9M120 0l-17.9 17.9M0 120l17.9-17.9M120 120l-17.9-17.9M60 0v16.8M60 120v-16.8M0 60h16.8M120 60h-16.8'/%3E%3C/g%3E%3C/svg%3E"); mask-image: linear-gradient(to bottom, #000 0, #000 60%, transparent 100%); } .glow { /* the light of the hour, pooled at the top of the page */ position: fixed; inset: -20vh -10vw auto; height: 90vh; z-index: -1; pointer-events: none; background: radial-gradient(60% 55% at 50% 0%, color-mix(in oklab, var(--glow) 22%, transparent), transparent 70%); transition: background 1.5s var(--ease); } ::selection { background: var(--gold); color: var(--gold-ink); } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input { font: inherit; color: inherit; } img, svg { display: block; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: fixed; inset-inline-start: 16px; top: -80px; background: var(--gold); color: var(--gold-ink); padding: 10px 16px; border-radius: 999px; z-index: 50; } .skip:focus { top: 12px; } .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; } /* outlined thmanyah headings */ .t { display: inline-block; line-height: 0; } .t svg { height: 100%; width: auto; fill: currentColor; overflow: visible; } /* ---------- floating nav ---------- */ .nav { position: fixed; top: 14px; inset-inline: 0; z-index: 30; display: grid; justify-items: center; padding-inline: 12px; pointer-events: none; } .nav-pill { pointer-events: auto; width: min(100%, 720px); display: flex; align-items: center; gap: 10px; padding: 7px; padding-inline-start: 14px; border-radius: 999px; background: rgb(var(--glass) / .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 0 0 1px var(--line-2) inset, 0 18px 40px -18px rgb(0 0 0 / .8); transition: transform .5s var(--ease), background .3s; } .nav.hide .nav-pill { transform: translateY(-130%); } .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); flex: none; } .logo svg { width: 30px; height: 30px; fill: var(--gold); } .logo svg circle { fill: var(--bg); } .logo .t { height: 30px; color: var(--ink); } .search { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; height: 42px; padding-inline: 14px; border-radius: 999px; background: rgb(var(--hi) / .05); transition: background .3s; } .search:focus-within { background: rgb(var(--hi) / .09); box-shadow: 0 0 0 1px var(--gold) inset; } .search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; } .search input { flex: 1 1 0; width: 100%; min-width: 0; background: none; border: 0; outline: 0; font-size: .95rem; } .search input::placeholder { color: var(--muted); } .search input::-webkit-search-cancel-button { filter: invert(.7); } .snd-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgb(var(--hi) / .05); transition: background .2s, color .2s; } .snd-btn:hover { background: rgb(var(--hi) / .1); color: var(--gold-2); } .snd-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .snd-btn .x { display: none; } .snd-btn[aria-pressed="false"] .w { display: none; } .snd-btn[aria-pressed="false"] .x { display: inline; } .snd-btn[aria-pressed="true"] { color: var(--gold); } .menu-btn { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding-inline: 16px 12px; border-radius: 999px; font-size: .92rem; font-weight: 500; background: var(--ink); color: var(--bg); flex: none; transition: transform .3s var(--ease); } .menu-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .4s var(--ease); } .menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .menu-btn:active { transform: scale(.96); } .results, .sheet { pointer-events: auto; width: min(100%, 720px); margin-top: 10px; max-height: min(70vh, 560px); overflow: auto; overscroll-behavior: contain; border-radius: var(--r-lg); background: rgb(var(--glass) / .92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -20px rgb(0 0 0 / .85); padding: 8px; transform-origin: top center; animation: drop .45s var(--ease); } @keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } } .results a { display: block; padding: 12px 14px; border-radius: var(--r-md); transition: background .2s; } .results a:hover, .results a.on { background: rgb(var(--hi) / .06); } .results .r-cat { font-size: .84rem; color: var(--gold); } .results .r-text { font: 1.15rem/1.8 var(--text); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .results mark { background: rgb(174 189 179 / .25); color: var(--gold-2); border-radius: 4px; } .results .empty { padding: 18px; color: var(--muted); text-align: center; } .results[hidden], .sheet[hidden] { display: none; } .sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; } .sheet h3 { grid-column: 1 / -1; margin: 10px 12px 2px; font-size: .84rem; font-weight: 500; color: var(--gold); } .sheet a { padding: 10px 12px; border-radius: 12px; font-size: .95rem; transition: background .2s, color .2s; } .sheet a:hover { background: rgb(var(--hi) / .06); color: var(--gold-2); } /* ---------- hero ---------- */ main { outline: none; display: block; } .hero { padding-top: clamp(110px, 16vh, 150px); text-align: center; } .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); margin-bottom: clamp(28px, 5vh, 48px); } .marquee-track { display: flex; gap: 10px; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(50%); } } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; color: var(--muted); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .hero h1 { margin: 0; display: grid; justify-items: center; gap: clamp(2px, 1vw, 10px); color: var(--ink); } .hero h1 .t { height: clamp(58px, 9.5vw, 118px); } .hero h1 .t:last-child { color: var(--gold); } .hero .lede { margin: clamp(18px, 3vh, 28px) auto 0; max-width: 46ch; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); } .cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: clamp(24px, 4vh, 34px); } .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 26px; border-radius: 999px; font-weight: 500; font-size: 1rem; transition: transform .35s var(--ease), background .3s, box-shadow .3s; } .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .35s var(--ease); } .btn:hover svg { transform: translateX(-4px); } .btn:active { transform: scale(.97); } .btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--gold-ink); box-shadow: 0 10px 30px -10px rgb(174 189 179 / .55), 0 1px 0 rgb(255 255 255 / .5) inset; } .btn-gold:hover { box-shadow: 0 14px 36px -10px rgb(174 189 179 / .7), 0 1px 0 rgb(255 255 255 / .5) inset; } .btn-ghost { background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line-2) inset; } .btn-ghost:hover { background: rgb(var(--hi) / .09); } /* ---------- showcase (infinite) ---------- */ .showcase { margin-top: clamp(44px, 8vh, 72px); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding-block: 12px 28px; } .showcase-track { display: flex; gap: clamp(14px, 2vw, 22px); width: max-content; animation: marquee 70s linear infinite; } .art { position: relative; flex: none; width: clamp(200px, 22vw, 268px); aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; transition: transform .6s var(--ease), box-shadow .6s var(--ease); } .art svg { width: 100%; height: 100%; } .art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px rgb(var(--hi) / .06) inset; pointer-events: none; } .art:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow), 0 30px 60px -20px rgb(0 0 0 / .9); } .art .art-cap { position: absolute; inset: auto 12px 12px; padding: 8px 12px; border-radius: 999px; font-size: .84rem; text-align: center; color: var(--ink); background: rgb(var(--glass) / .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(8px); transition: .4s var(--ease); } .art:hover .art-cap, .art:focus-visible .art-cap { opacity: 1; transform: none; } /* ---------- sections ---------- */ .section { padding-block: clamp(64px, 11vh, 120px) 0; } .sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(22px, 4vh, 36px); } .sec-head h2 { margin: 0; } .sec-head h2 .t { height: clamp(44px, 6vw, 72px); } .sec-head p { margin: 6px 0 0; color: var(--muted); max-width: 46ch; } /* ---------- now card ---------- */ .now { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(22px, 4vw, 48px); border-radius: var(--r-xl); background: linear-gradient(160deg, var(--surface-2), var(--surface) 60%); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; } .now::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 90% at 20% 30%, color-mix(in oklab, var(--glow) 18%, transparent), transparent 60%); transition: background 1.2s var(--ease); } .now-label { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--gold); } .now-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 var(--gold); animation: pulse 2.4s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .now h2 { margin: 14px 0 0; } .now h2 .t { height: clamp(54px, 7.5vw, 96px); max-width: 100%; } .now h2 .t svg { max-width: 100%; } .now .moment { margin: 10px 0 0; font: clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.7 var(--text); color: var(--muted); } .now .clock { font-variant-numeric: tabular-nums; color: var(--faint); font-size: .9rem; margin: 6px 0 0; } .meter { margin-top: 22px; height: 6px; border-radius: 99px; background: rgb(var(--hi) / .07); overflow: hidden; } .meter span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .8s var(--ease); } .now .cta { justify-content: flex-start; } .now-near { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: .88rem; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background .25s, color .25s; } .chip:hover { background: rgb(var(--hi) / .09); color: var(--gold-2); } .chip[aria-pressed="true"] { background: var(--gold); color: var(--gold-ink); box-shadow: none; } .dial-wrap { position: relative; } .dial { width: 100%; height: auto; touch-action: none; user-select: none; cursor: grab; overflow: visible; } .dial:active { cursor: grabbing; } .dial:focus { outline: none; } .dial:focus-visible .rim { stroke: var(--gold-2); stroke-width: 3; } .dial .face { fill: rgb(0 0 0 / .25); } .dial .rim { fill: none; stroke: var(--gold); stroke-opacity: .7; stroke-width: 1.5; } .dial .ring2 { fill: none; stroke: var(--line-2); } .dial .night { fill: rgb(0 0 0 / .35); } .dial .tick { stroke: var(--gold); stroke-opacity: .55; stroke-width: 1.5; } .dial .tick.minor { stroke-opacity: .25; } .dial .hour { font: 400 30px var(--ui); fill: var(--faint); text-anchor: middle; dominant-baseline: central; } .dial .mark text { font: 500 34px var(--ui); fill: var(--muted); text-anchor: middle; dominant-baseline: central; transition: fill .3s; } .dial .mark a:hover text { fill: var(--gold-2); } .dial .mark.active text { fill: var(--gold-2); font-weight: 700; } .dial .mark .dot { fill: var(--surface-3); stroke: var(--gold); stroke-opacity: .6; } .dial .mark.active .dot { fill: var(--gold); } .dial .rose { fill: none; stroke: var(--gold); stroke-opacity: .16; } .dial .shadow { fill: rgb(0 0 0 / .55); } .dial .hand { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; } .dial .sun { fill: var(--gold-2); filter: drop-shadow(0 0 14px var(--gold)); } .dial .pin { fill: var(--gold); } .dial-help { margin: 6px 0 0; text-align: center; font-size: .82rem; color: var(--faint); } .scrubbed { font-size: .9rem; color: var(--muted); display: flex; gap: 10px; align-items: center; margin-top: 12px; } .scrubbed[hidden] { display: none; } .scrubbed button { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; } /* ---------- segmented control ---------- */ .seg { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .seg button { position: relative; z-index: 1; height: 38px; padding-inline: 18px; border-radius: 999px; font-size: .92rem; color: var(--muted); transition: color .35s; } .seg button[aria-selected="true"] { color: var(--gold-ink); font-weight: 500; } .seg .thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); transition: inset-inline-start .5s var(--ease), width .5s var(--ease); } /* ---------- chapter cards ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 2vw, 22px); } .card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; transition: transform .5s var(--ease), box-shadow .6s var(--ease); } .card::after { /* a soft lamp that follows the pointer */ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: radial-gradient(420px circle at var(--mx) var(--my), rgb(225 231 226 / .09), transparent 45%); opacity: 0; transition: opacity .4s; } .card:hover::after { opacity: 1; } .card:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: var(--shadow), 0 0 0 1px var(--line-2) inset, 0 40px 70px -30px rgb(0 0 0 / .9); } .card .band { position: relative; aspect-ratio: 600 / 260; overflow: hidden; } .card .band svg { width: 100%; height: 100%; transition: transform 1.2s var(--ease); } .card:hover .band svg { transform: none; } .card .medal-art { transform-box: view-box; transform-origin: 504px 104px; transition: transform 1.4s var(--ease); } .card:hover .medal-art { transform: rotate(45deg) scale(1.06); } .card .medal-art .ic { transform-box: view-box; transform-origin: 504px 104px; transition: transform 1.4s var(--ease); } .card:hover .medal-art .ic { transform: rotate(-45deg); } @media (min-width: 760px) { .card.feat { grid-column: span 2; } .card.feat .band { aspect-ratio: 600 / 200; } .card.feat .what { font-size: 1.4rem; } } .card .band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--surface) 0, transparent 32%); } .card-body { position: relative; z-index: 1; padding: 0 22px 22px; margin-top: -14px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card .when { font-size: .82rem; color: var(--gold); font-variant-numeric: tabular-nums; } .card .what { margin: 0; font: 1.2rem/1.6 var(--text); color: var(--muted); } .card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card .stat { font-size: .85rem; color: var(--faint); font-variant-numeric: tabular-nums; } .card .meter { margin-top: 2px; height: 4px; } .open { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-inline: 18px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .9rem; font-weight: 500; transition: background .3s, transform .35s var(--ease); } .open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .35s var(--ease); } .card:hover .open { background: var(--gold-2); } .card:hover .open svg { transform: translateX(-3px); } .card .is-now { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3; padding: 4px 12px; border-radius: 999px; font-size: .82rem; background: var(--gold); color: var(--gold-ink); } .cards[data-anim] .card { animation: rise .7s var(--ease) backwards; animation-delay: calc(var(--i) * 45ms); } @keyframes rise { from { opacity: 0; transform: translateY(18px); } } /* ---------- misbaha ---------- */ .misbaha { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(22px, 4vw, 48px); border-radius: var(--r-xl); background: radial-gradient(80% 90% at 75% 40%, rgb(var(--hi) / .05), transparent 60%), var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; } /* the same page-like frame as the dhikr cards */ .ornate::after { content: ""; position: absolute; inset: 9px; border-radius: calc(var(--r-xl) - 9px); box-shadow: 0 0 0 1px var(--line) inset; pointer-events: none; } .ornate::before { content: ""; position: absolute; inset: 15px; pointer-events: none; background: var(--gold); opacity: .6; --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.2 3.8L10 5 6.2 6.2 5 10 3.8 6.2 0 5l3.8-1.2z'/%3E%3C/svg%3E"); -webkit-mask: var(--s) no-repeat 0 0 / 10px, var(--s) no-repeat 100% 0 / 10px, var(--s) no-repeat 0 100% / 10px, var(--s) no-repeat 100% 100% / 10px; mask: var(--s) no-repeat 0 0 / 10px, var(--s) no-repeat 100% 0 / 10px, var(--s) no-repeat 0 100% / 10px, var(--s) no-repeat 100% 100% / 10px; } .beads-wrap { position: relative; width: min(100%, 470px); justify-self: center; aspect-ratio: 430 / 500; } .beads { width: 100%; height: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; overflow: visible; } .beads:focus { outline: none; } .beads:focus-visible .halo { stroke: var(--gold); stroke-opacity: .6; } .beads .halo { fill: rgb(var(--hi) / .025); stroke: var(--line); stroke-width: 34; } .beads .ring-g { transition: transform .5s cubic-bezier(.34, 1.3, .64, 1); transform-origin: 0 0; } .beads .thread { fill: none; stroke: var(--gold); stroke-opacity: .4; stroke-width: 1.4; } .beads .bead { fill: url(#beadOff); stroke: rgb(0 0 0 / .25); stroke-width: .8; transition: fill .35s var(--ease); } .beads .bead.on { fill: url(#beadOn); } .beads .bead.cur { stroke: var(--gold-2); stroke-width: 1.6; } .beads .spacer, .beads .imam { fill: url(#beadOn); stroke: rgb(0 0 0 / .25); stroke-width: .8; } .beads .tassel path { fill: none; stroke: var(--gold); stroke-opacity: .7; stroke-width: 1.2; stroke-linecap: round; } .beads:active .ring-g { transition-duration: .3s; } .bead-count { position: absolute; left: 0; right: 0; top: 0; height: calc(100% * 430 / 500); display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; pointer-events: none; } .bead-count .phrase-in { font: 1.15rem/1.6 var(--text); color: var(--muted); } .bead-count b { font: 600 clamp(3.2rem, 2rem + 4.5vw, 5.4rem)/1.05 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); } .bead-count small { font-size: .9rem; color: var(--faint); } .rounds { display: flex; gap: 7px; margin-top: 8px; min-height: 9px; } .rounds i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: rgb(var(--hi) / .12); } .rounds i.on { background: var(--gold); } .rounds i.cur { box-shadow: 0 0 0 1.5px var(--gold) inset; background: transparent; } .misbaha.complete .bead-count b { color: var(--gold-2); } .mis-side { position: relative; z-index: 1; } .misbaha .phrase { margin: 0; font: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem)/1.7 var(--text); color: var(--gold-2); min-height: 1.7em; } .misbaha .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .misbaha .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; } .target { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .target button { height: 34px; min-width: 44px; padding-inline: 10px; border-radius: 999px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; } .target button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); } .total { margin: 16px 0 0; font-size: .9rem; color: var(--faint); } /* ---------- faq ---------- */ .faq { display: grid; gap: 10px; max-width: 860px; } .faq details { border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s; } .faq details[open] { background: var(--surface-2); } .faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; font-weight: 500; } .faq summary::-webkit-details-marker { display: none; } .faq summary i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--hi) / .06); transition: transform .45s var(--ease), background .3s; } .faq summary i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; } .faq details[open] summary i { transform: rotate(45deg); background: var(--gold); color: var(--gold-ink); } .faq .ans { padding: 0 22px 20px; color: var(--muted); } .faq .ans p { margin: 0; } .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; } .faq details[open]::details-content { block-size: auto; } :root { interpolate-size: allow-keywords; } /* ---------- footer ---------- */ .foot { margin-top: clamp(80px, 14vh, 140px); padding: 44px var(--gutter) calc(44px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .foot-in { width: min(100%, 62ch); margin: 0 auto; display: grid; gap: 14px; text-align: center; } .foot p, .foot ul { margin: 0; } .foot-priv { color: var(--muted); line-height: 1.9; } .foot-ask { color: var(--ink); font-size: .95rem; } .foot-ask a { color: var(--ink); font-weight: 600; } .foot .credits { margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: .8rem; line-height: 1.9; color: var(--faint); } .foot ul.credits { list-style: none; display: grid; gap: 6px; } .foot .credits a { color: var(--muted); } .noscript { padding: 120px var(--gutter); text-align: center; } /* ---------- reading page ---------- */ .read-head { padding-top: clamp(100px, 14vh, 130px); text-align: center; } .crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); } .crumbs a { color: var(--muted); transition: color .2s; } .crumbs a:hover { color: var(--gold-2); } .crumbs svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .cartouche { margin: 14px auto 0; width: min(100%, 600px); } /* the border channel: progress fills it, a glint travels round it */ /* the border channel: blue water running all the way round, in two currents */ .cart .stream { animation: fadeIn 1.2s var(--ease) .2s both; } .cart .flow { stroke-dasharray: .008 .016; animation: flow 26s linear infinite; } .cart .flow.slow { stroke-dasharray: .02 .03; animation-duration: 40s; } @keyframes flow { to { stroke-dashoffset: -1; } } .cart .arab { animation: arabIn 1.2s var(--ease) .45s backwards; transform-box: fill-box; transform-origin: center; } @keyframes arabIn { from { opacity: 0; transform: scale(.7) rotate(-12deg); } } .cart .lat { animation: fadeIn 1.6s var(--ease) .35s both; } .cart .ins { animation: insIn 1.1s var(--ease) .5s backwards; } .cart .inlay { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease-io) .7s forwards; } .cart .ripple { fill: none; stroke: #cfd9d2; transform-box: fill-box; transform-origin: center; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } } @keyframes insIn { from { opacity: 0; transform: translateY(8px); } } .cartouche svg { width: 100%; height: auto; overflow: visible; shape-rendering: geometricPrecision; } .cart .s { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease-io) .15s forwards; } .cart .ttl > path { stroke: rgb(8 6 3 / .5); stroke-width: 22; stroke-linejoin: round; paint-order: stroke; } .cart .sheen { opacity: .55; pointer-events: none; } .cart .ttl { animation: ttlIn 1s var(--ease) .55s backwards; } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes ttlIn { from { opacity: 0; transform: translateY(8px); } } .read-head .moment { margin: 10px 0 0; font: clamp(1.15rem, 1rem + .5vw, 1.4rem)/1.7 var(--text); color: var(--muted); } .read-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .tool { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding-inline: 14px; border-radius: 999px; font-size: .88rem; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background .2s, color .2s; } .tool:hover { background: rgb(var(--hi) / .09); color: var(--gold-2); } .tool svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .size { display: inline-flex; align-items: center; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .size button { height: 38px; width: 42px; border-radius: 999px; font-family: var(--text); font-size: 1.1rem; } .size button:hover { color: var(--gold-2); } .size span { font-size: .84rem; color: var(--faint); min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; } .list { list-style: none; margin: clamp(28px, 5vh, 44px) auto 0; padding: 0; display: grid; gap: clamp(12px, 1.6vw, 18px); width: min(100% - 2 * var(--gutter), 900px); } .z { --p: 0; position: relative; overflow: hidden; isolation: isolate; padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 34px) clamp(16px, 2.2vw, 24px); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .25s var(--ease), opacity .5s; scroll-margin-top: 110px; } .z:active { transform: scale(.995); } .z.focus { box-shadow: var(--shadow), 0 0 0 1.5px var(--gold) inset; } /* the next dhikr to read is lifted a little and labelled */ .z.next { background: var(--surface-2); box-shadow: var(--shadow), 0 0 0 1px var(--line-2) inset, 0 0 0 6px rgb(var(--hi) / .025); } /* head: number, repetitions, actions */ .z-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .medal { position: relative; width: 42px; height: 42px; color: var(--gold); flex: none; } .medal svg { width: 100%; height: 100%; transition: opacity .4s, transform .5s var(--ease); } .medal text { font: 500 15px var(--ui); fill: var(--ink); } .medal .tick { position: absolute; inset: 9px; width: auto; height: auto; fill: none; stroke: var(--gold-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); } .medal::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(.4); transition: opacity .4s, transform .5s var(--ease); } .z.done .medal > svg:first-child { opacity: 0; transform: rotate(45deg) scale(.6); } .z.done .medal::before, .z.done .medal .tick { opacity: 1; transform: none; } .reps { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 11px; border-radius: 999px; font-size: .84rem; color: var(--muted); background: rgb(var(--hi) / .05); font-variant-numeric: tabular-nums; } .reps svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .next-tag { display: none; height: 28px; padding-inline: 11px; border-radius: 999px; align-items: center; font-size: .82rem; font-weight: 500; background: var(--gold); color: var(--gold-ink); animation: tagIn .5s var(--ease); } .z.next .next-tag { display: inline-flex; } @keyframes tagIn { from { opacity: 0; transform: translateY(-4px); } } .z-actions { display: flex; gap: 6px; margin-inline-start: auto; } .icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgb(var(--hi) / .04); transition: background .2s, color .2s; } .icon-btn:hover { background: rgb(var(--hi) / .09); color: var(--gold-2); } .icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-btn.ok { color: var(--gold); } /* the text itself */ .z-text { margin: 0; font: 400 calc(clamp(1.45rem, 1.15rem + 1.1vw, 2rem) * var(--read))/2.1 var(--text); white-space: pre-line; text-wrap: pretty; transition: opacity .5s var(--ease); } .z-text .q { color: var(--gold-2); } .z-text .basmala { display: block; text-align: center; font-size: .82em; color: var(--muted); margin-bottom: .2em; } .z-text .ay { display: inline-block; font-size: .8em; color: var(--gold); margin-inline: .15em; } /* virtue: a quiet panel with its own label */ .z-fadl { margin: 16px 0 0; padding: 12px 16px 14px; border-radius: var(--r-md); background: rgb(var(--hi) / .035); box-shadow: 0 0 0 1px var(--line) inset; } .z-fadl .lab { display: inline-flex; align-items: center; gap: 6px; font: 500 .78rem var(--ui); color: var(--gold); } .z-fadl .lab svg { width: 13px; height: 13px; fill: currentColor; } .z-fadl p { margin: 4px 0 0; font: calc(1.12rem * var(--read))/1.85 var(--prose); color: var(--muted); } .z-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .src { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--faint); } .src svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; } /* the counter: the round ring that fills, in a pill */ .counter { position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding-inline: 8px 20px; border-radius: 999px; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-2) inset; font-variant-numeric: tabular-nums; transition: background .4s, transform .2s var(--ease); } .counter:active { transform: scale(.95); } .counter .ring { width: 36px; height: 36px; flex: none; transform: rotate(-90deg); } .counter .ring circle { fill: none; stroke-width: 3; } .counter .ring .bg { stroke: rgb(var(--hi) / .1); } .counter .ring .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease); } .counter b { font-weight: 600; font-size: 1.1rem; } .counter small { color: var(--muted); font-size: .85rem; } .z.done .counter { background: var(--gold); color: var(--gold-ink); box-shadow: none; } .z.done .counter small { color: var(--gold-ink); opacity: .7; } .z.done .counter .ring .bg { stroke: rgb(0 0 0 / .15); } .z.done .counter .ring .fg { stroke: var(--gold-ink); } .z.done { background: color-mix(in oklab, var(--surface) 70%, var(--bg)); } .z.done .z-text, .z.done .z-fadl { opacity: .55; } /* the card as a page: a soft light in one corner, an inner hairline frame, small stars in its corners */ .z { background: radial-gradient(120% 90% at 100% 0%, rgb(var(--hi) / .04), transparent 55%), var(--surface); } .z::after { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r-xl) - 8px); box-shadow: 0 0 0 1px var(--line) inset; pointer-events: none; transition: box-shadow .5s; } .z::before { content: ""; position: absolute; inset: 14px; pointer-events: none; background: var(--gold); opacity: .55; --s: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1.2 3.8L10 5 6.2 6.2 5 10 3.8 6.2 0 5l3.8-1.2z'/%3E%3C/svg%3E"); -webkit-mask: var(--s) no-repeat 0 0 / 9px, var(--s) no-repeat 100% 0 / 9px, var(--s) no-repeat 0 100% / 9px, var(--s) no-repeat 100% 100% / 9px; mask: var(--s) no-repeat 0 0 / 9px, var(--s) no-repeat 100% 0 / 9px, var(--s) no-repeat 0 100% / 9px, var(--s) no-repeat 100% 100% / 9px; } .z.next::after { box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent) inset; } .z.next::before { opacity: 1; } .z.done::before { opacity: .25; } /* a small ornament between the words and what follows them */ .z-sep { display: flex; align-items: center; gap: 10px; margin: 16px auto 0; width: min(100%, 300px); color: var(--gold); opacity: .7; } .z-sep span { flex: 1; height: 1px; background: linear-gradient(to left, transparent, currentColor); } .z-sep span:last-child { background: linear-gradient(to right, transparent, currentColor); } .z-sep i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); flex: none; } .ripple { position: absolute; border-radius: 50%; background: rgb(var(--hi) / .14); transform: scale(0); animation: ripple .7s var(--ease) forwards; pointer-events: none; z-index: -1; } @keyframes ripple { to { transform: scale(1); opacity: 0; } } @media (max-width: 560px) { .z-foot { flex-direction: row-reverse; } .src { width: 100%; order: 2; } .reps { display: none; } .z.next .reps { display: none; } } .complete { width: min(100% - 2 * var(--gutter), 900px); margin: 18px auto 0; padding: 34px 24px; border-radius: var(--r-xl); text-align: center; background: radial-gradient(70% 100% at 50% 0%, rgb(174 189 179 / .18), transparent 70%), var(--surface); box-shadow: 0 0 0 1px var(--gold) inset; } .complete[hidden] { display: none; } .complete svg { width: 54px; height: 54px; margin: 0 auto 10px; fill: var(--gold); animation: spin 18s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .complete p { margin: 0; font: 1.5rem/1.7 var(--text); color: var(--gold-2); } .complete small { display: block; margin-top: 4px; color: var(--muted); } .next-ch { width: min(100% - 2 * var(--gutter), 900px); margin: 18px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .next-ch a { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, transform .4s var(--ease); } .next-ch a:hover { background: var(--surface-2); transform: translateY(-3px); } .next-ch a:last-child { text-align: left; align-items: flex-end; } .next-ch small { color: var(--faint); font-size: .82rem; } .next-ch .t { height: 38px; color: var(--ink); } .dock { position: fixed; z-index: 25; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgb(var(--glass) / .78); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 0 0 1px var(--line-2) inset, 0 18px 40px -14px rgb(0 0 0 / .85); animation: dockIn .6s var(--ease) both .2s; } @keyframes dockIn { from { opacity: 0; transform: translate(-50%, 24px); } } .dock a, .dock button { height: 42px; padding-inline: 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--muted); transition: background .2s, color .2s; } .dock a:hover, .dock button:hover { background: rgb(var(--hi) / .07); color: var(--ink); } .dock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .dock .prog { display: flex; align-items: center; gap: 10px; padding-inline: 10px; font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .dock .prog .meter { margin: 0; width: clamp(60px, 14vw, 120px); height: 5px; } .toast { position: fixed; z-index: 40; bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 10px); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .9rem; opacity: 0; pointer-events: none; transition: .35s var(--ease); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- reveal on scroll (content stays visible without JS) ---------- */ .reveal { transition: transform .9s var(--ease), opacity .9s var(--ease); } .js .reveal:not(.in) { opacity: .001; transform: translateY(26px); } /* ---------- view transitions ---------- */ ::view-transition-old(root) { animation: .35s var(--ease) both vtOut; } ::view-transition-new(root) { animation: .5s var(--ease) both vtIn; } @keyframes vtOut { to { opacity: 0; transform: translateX(32px); } } @keyframes vtIn { from { opacity: 0; transform: translateX(-32px); } } /* ---------- small screens ---------- */ @media (max-width: 860px) { .now, .misbaha { grid-template-columns: 1fr; } .dial-wrap { width: min(100%, 420px); justify-self: center; } .misbaha .beads-wrap { order: -1; } } @media (max-width: 560px) { .nav { top: 10px; } .menu-btn span { display: none; } .menu-btn { width: 42px; padding: 0; justify-content: center; } .logo .t { display: none; } .next-ch { grid-template-columns: 1fr; } .next-ch a:last-child { text-align: right; align-items: flex-start; } .dock a span { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } .marquee-track, .showcase-track { animation: none !important; } .js .reveal:not(.in) { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* light themes: beads are solid ink, the gradient bead is made for dark grounds */ :root[data-tone="light"] .beads .bead.on, :root[data-tone="light"] .beads .imam, :root[data-tone="light"] .beads .spacer { fill: var(--gold); } /* ---------- chapter cards, refined ---------- */ .card::before { content: ""; position: absolute; inset: 7px; z-index: 3; border-radius: calc(var(--r-xl) - 7px); box-shadow: 0 0 0 1px var(--line) inset; pointer-events: none; transition: box-shadow .5s; } .card:hover::before { box-shadow: 0 0 0 1px var(--line-2) inset; } .card.feat::before { box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 50%, transparent) inset; } .card-body { gap: 12px; padding: 0 24px 24px; } .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card .when { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px 12px; border-radius: 999px; font-size: .84rem; color: var(--gold-2); background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .card .when svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .card .count { font-size: .84rem; color: var(--faint); font-variant-numeric: tabular-nums; } .card .what { font-size: 1.25rem; line-height: 1.55; color: var(--ink); opacity: .85; } /* one small diamond per dhikr: lit when it is done today */ .dots { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; } .dots i { width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1.5px; background: rgb(var(--hi) / .1); box-shadow: 0 0 0 1px var(--line) inset; transition: background .4s, transform .4s var(--ease); } .dots i.on { background: var(--gold); box-shadow: none; } .card:hover .dots i.on { transform: rotate(45deg) scale(1.15); } .card-foot { padding-top: 14px; border-top: 1px solid var(--line); } .card .stat { font-size: .85rem; color: var(--muted); } .card .open { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; } .card .open svg { width: 18px; height: 18px; } /* ---------- floating misbaha ---------- */ .mis-fab { position: fixed; z-index: 28; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--glass) / .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 16px 34px -14px rgb(0 0 0 / .7); transition: transform .4s var(--ease), bottom .4s var(--ease), box-shadow .3s; animation: fabIn .7s var(--ease) .6s backwards; } .mis-fab:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--gold) inset, 0 20px 40px -14px rgb(0 0 0 / .75); } .mis-fab:active { transform: scale(.94); } .mis-fab svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s var(--ease); } .mis-fab:hover svg { transform: rotate(-26deg); } .mis-fab .fb { fill: rgb(var(--hi) / .16); transition: fill .35s; } .mis-fab .fb.on { fill: var(--gold); } .mis-fab b { position: relative; font: 600 .95rem/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); } .mis-fab.bump svg { animation: fabTurn .45s var(--ease); } @keyframes fabTurn { from { transform: rotate(18deg); } } @keyframes fabIn { from { opacity: 0; transform: translateY(20px) scale(.8); } } body.reading .mis-fab { bottom: calc(86px + env(safe-area-inset-bottom)); } @media (min-width: 861px) { body.reading .mis-fab { bottom: calc(18px + env(safe-area-inset-bottom)); } } .mis-sheet { position: fixed; inset: 0; z-index: 45; display: grid; align-items: end; justify-items: center; } .mis-sheet[hidden] { display: none; } .mis-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fadeIn .35s var(--ease); } .mis-panel { position: relative; width: min(100%, 1000px); max-height: 94svh; overflow: auto; overscroll-behavior: contain; padding: 16px clamp(12px, 3vw, 26px) calc(18px + env(safe-area-inset-bottom)); border-radius: 30px 30px 0 0; background: var(--bg-2); box-shadow: 0 0 0 1px var(--line-2) inset, 0 -30px 60px -20px rgb(0 0 0 / .6); animation: sheetUp .55s var(--ease); } .mis-panel::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 99px; background: rgb(var(--hi) / .18); } .mis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 4px 12px; } .mis-head h2 { margin: 0; } .mis-head h2 .t { height: 42px; } .mis-sheet.closing .mis-panel { animation: sheetDown .28s var(--ease-io) forwards; } .mis-sheet.closing .mis-backdrop { animation: fadeOut .28s forwards; } @keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } } @keyframes sheetDown { to { transform: translateY(60px); opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } } @media (min-width: 861px) { .mis-sheet { align-items: center; } .mis-panel { border-radius: 32px; margin: 24px; } .mis-panel::before { display: none; } } /* ---------- "this hour" card, plainer ---------- */ .now-label { gap: 10px; } .now-time { padding: 3px 10px; border-radius: 999px; background: rgb(var(--hi) / .06); color: var(--muted); font-variant-numeric: tabular-nums; } .now-progress { display: flex; align-items: center; gap: 14px; margin-top: 20px; } .now-progress .meter { flex: 1; margin: 0; } .now-progress > span:last-child { flex: none; font-size: .88rem; color: var(--muted); } .now-near { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; } .now-near .near-lab { font-size: .84rem; color: var(--faint); } .now-near #near { display: contents; } .dial .sky-ico circle, .dial .sky-ico path { fill: var(--gold); fill-opacity: .55; } .dial .sky-ico line { stroke: var(--gold); stroke-opacity: .55; stroke-width: 5; stroke-linecap: round; } .dial .mark text { font-size: 40px; } .dial-help { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: .9rem; color: var(--muted); } .dial-help svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ---------- this hour + the line of the day ---------- */ .now2 { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--surface-2), var(--surface) 60%); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; } .now2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 18% 30%, color-mix(in oklab, var(--glow) 16%, transparent), transparent 65%); transition: background 1.2s var(--ease); } .now-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 44px) clamp(22px, 4vw, 44px) clamp(18px, 3vw, 28px); } .now-text h2 { margin: 14px 0 0; } .now-text h2 .t { height: clamp(54px, 7vw, 92px); max-width: 100%; } .now-text h2 .t svg { max-width: 100%; } .now-text .moment { margin: 8px 0 0; font: clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.7 var(--text); color: var(--muted); } .now-text .cta { justify-content: flex-start; margin-top: 22px; } .now-time[hidden] { display: none; } .now-emblem { width: clamp(120px, 16vw, 190px); aspect-ratio: 1; color: var(--gold); } .now-emblem svg { width: 100%; height: 100%; display: block; } .now-emblem .em-star { fill: rgb(var(--hi) / .04); stroke: currentColor; stroke-width: 1.4; stroke-opacity: .7; } .now-emblem .em-ring { fill: none; stroke: currentColor; stroke-opacity: .35; stroke-dasharray: 1.5 5; stroke-linecap: round; } .day { padding: 18px clamp(16px, 3vw, 36px) clamp(18px, 3vw, 28px); border-top: 1px solid var(--line); background: rgb(var(--hi) / .02); } .day-lab { margin: 0 4px 14px; font-size: .88rem; color: var(--muted); } .day-scroll { overflow-x: auto; scrollbar-width: none; margin-inline: -6px; padding: 54px 6px 2px; margin-top: -40px; } .btn[hidden] { display: none; } .day-scroll::-webkit-scrollbar { display: none; } .day-line { --inset: calc(100% / (var(--n) * 2)); position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(76px, 1fr)); min-width: 560px; } .day-track { position: absolute; top: 24px; height: 3px; inset-inline: var(--inset); border-radius: 3px; background: rgb(var(--hi) / .1); } .day-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--f, 0) * 100%); border-radius: inherit; background: var(--gold); opacity: .55; transition: width 1s var(--ease); } .day-now { position: absolute; top: -50px; inset-inline-start: calc(var(--f, 0) * 100%); transform: translateX(50%); padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 500; white-space: nowrap; background: var(--gold); color: var(--gold-ink); transition: inset-inline-start 1s var(--ease); } .day-now::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 30px; margin-left: -1px; background: var(--gold); } .stop { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 0 2px 4px; border-radius: 14px; color: var(--muted); transition: color .3s; } .stop-ico { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2) inset, 0 0 0 5px var(--surface); transition: background .35s, color .35s, box-shadow .35s, transform .4s var(--ease); } .stop-ico svg { width: 22px; height: 22px; } .stop-nm { margin-top: 4px; font-size: .88rem; font-weight: 500; color: var(--ink); } .stop-tm { font-size: .78rem; color: var(--faint); font-variant-numeric: tabular-nums; } .stop:hover .stop-ico { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold) inset, 0 0 0 5px var(--surface); } .stop.past .stop-ico { color: var(--faint); } .stop.is-now .stop-ico { color: var(--gold); box-shadow: 0 0 0 1.5px var(--gold) inset, 0 0 0 5px var(--surface); } .stop.done .stop-ico::after { content: "✓"; position: absolute; top: -2px; inset-inline-end: calc(50% - 30px); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: var(--gold); color: var(--gold-ink); } .stop[aria-selected="true"] .stop-ico { background: var(--gold); color: var(--gold-ink); box-shadow: 0 0 0 5px var(--surface), 0 8px 20px -8px rgb(0 0 0 / .6); transform: scale(1.08); } .stop[aria-selected="true"] .stop-nm { color: var(--gold-2); } @media (max-width: 640px) { .now-main { grid-template-columns: 1fr; } .now-emblem { display: none; } } /* ---------- almanac ---------- */ .almanac { position: relative; display: flex; justify-content: center; margin-bottom: clamp(20px, 3.5vh, 34px); } .alm-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding-inline: 8px 16px; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; font-size: .9rem; color: var(--muted); transition: background .3s, box-shadow .3s; } .alm-pill:hover, .alm-pill[aria-expanded="true"] { background: rgb(var(--hi) / .09); box-shadow: 0 0 0 1px var(--line-2) inset; } .alm-pill .moon { width: 30px; height: 30px; } .alm-h { color: var(--ink); font-weight: 500; } .alm-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); } .moon .m-dark { fill: rgb(var(--hi) / .08); } .moon .m-lit { fill: var(--gold-2); } .moon .m-cr { fill: rgb(0 0 0 / .12); } .moon .m-rim { fill: none; stroke: var(--line-2); } .alm-card { position: absolute; top: calc(100% + 10px); z-index: 20; width: min(92vw, 420px); text-align: right; padding: 20px; border-radius: var(--r-lg); background: rgb(var(--glass) / .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -24px rgb(0 0 0 / .7); animation: drop .45s var(--ease); } .alm-card[hidden] { display: none; } .alm-top { display: flex; align-items: center; gap: 16px; } .alm-moon .moon { width: 96px; height: 96px; filter: drop-shadow(0 0 18px color-mix(in oklab, var(--gold-2) 30%, transparent)); } .alm-phase { margin: 0; font-size: .82rem; color: var(--gold); } .alm-hijri { margin: 4px 0 0; font: 1.5rem/1.5 var(--text); color: var(--ink); } .alm-greg { margin: 0; font-size: .9rem; color: var(--muted); } .alm-days { display: grid; grid-template-columns: repeat(15, 1fr); gap: 6px; margin: 18px 0 4px; } .alm-days i { aspect-ratio: 1; border-radius: 50%; background: rgb(var(--hi) / .08); } .alm-days i.past { background: rgb(var(--hi) / .2); } .alm-days i.white { box-shadow: 0 0 0 1.5px var(--gold) inset; } .alm-days i.today { background: var(--gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 30%, transparent); } .alm-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; } .alm-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: .9rem; } .alm-list span { color: var(--muted); } .alm-list b { font-weight: 500; color: var(--ink); text-align: left; } .alm-note { margin: 10px 0 0; font-size: .78rem; color: var(--faint); } /* ---------- Quran button and its "soon" panel ---------- */ .quran-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding-inline: 12px 14px; border-radius: 999px; color: var(--gold-2); background: color-mix(in oklab, var(--gold) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent) inset; font-size: .9rem; font-weight: 500; transition: background .25s, transform .3s var(--ease); } .quran-btn:hover { background: color-mix(in oklab, var(--gold) 24%, transparent); } .quran-btn:active { transform: scale(.96); } .quran-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; } .soon[hidden] { display: none; } .soon { pointer-events: auto; width: min(100%, 420px); margin-top: 10px; padding: 18px 20px; display: flex; align-items: center; gap: 16px; border-radius: var(--r-lg); background: rgb(var(--glass) / .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -24px rgb(0 0 0 / .6); animation: drop .45s var(--ease); } .soon .rahl { width: 92px; flex: none; color: var(--gold); } .soon .rahl .pg { fill: color-mix(in oklab, var(--gold) 12%, transparent); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .soon .rahl .sp, .soon .rahl .st { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .soon .rahl .ln { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: 1.2; stroke-linecap: round; } .soon b { font-size: 1.05rem; } .soon p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; } @media (max-width: 560px) { .quran-btn span { display: none; } .quran-btn { width: 42px; padding: 0; justify-content: center; } } /* ---------- square-kufic background: hollow straps on a regular grid ---------- */ body::before { display: none; } .kufic { position: fixed; inset: 0; z-index: -1; pointer-events: none; color: var(--gold); overflow: hidden; /* quiet behind the reading column, clearer toward the edges */ -webkit-mask: radial-gradient(120% 90% at 50% 45%, rgb(0 0 0 / .25) 25%, #000 75%); mask: radial-gradient(120% 90% at 50% 45%, rgb(0 0 0 / .25) 25%, #000 75%); } .kufic .kf { position: absolute; inset: 0; } .kufic .kf path { fill: none; stroke-linecap: square; stroke-linejoin: miter; } .kufic .kf .b { stroke: currentColor; stroke-opacity: .16; stroke-width: .62; } .kufic .kf .h { stroke: var(--bg); stroke-width: .26; } .kufic .kf .j { fill: currentColor; fill-opacity: .14; stroke: none; } :root[data-tone="light"] .kufic .kf .b { stroke-opacity: .12; } /* ---------- chapter scenes: objects from the chapter's world ---------- */ .scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; color: var(--gold); overflow: hidden; } .scene .sc { position: absolute; height: auto; opacity: .3; transform: translate(-50%, -50%) rotate(var(--r)); } .scene .sc.in { opacity: .14; } .scene .sc path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: penDraw 1.8s cubic-bezier(.65,0,.35,1) var(--d) forwards; } .scene .sc { animation: floaty var(--f) ease-in-out var(--o) infinite alternate; } @keyframes penDraw { to { stroke-dashoffset: 0; } } @keyframes floaty { from { transform: translate(-50%, -50%) rotate(var(--r)); } to { transform: translate(-50%, calc(-50% - 10px)) rotate(calc(var(--r) + 4deg)); } } .scene.still .sc, .scene.still .sc path { animation: none; stroke-dashoffset: 0; } body.reading .kufic .kf .b { stroke-opacity: .11; } @media (max-width: 640px) { .scene .sc { opacity: .16; } .scene .sc.in { display: none; } } /* ---------- the calm stage ---------- */ .calm { position: relative; width: min(100% - 2 * var(--gutter), 520px); aspect-ratio: 400 / 300; margin: clamp(30px, 6vh, 56px) auto 0; } .calm-halo { position: absolute; inset: -12% -18% -4%; background: radial-gradient(50% 50% at 50% 55%, color-mix(in oklab, var(--gold) 16%, transparent), transparent 70%); animation: halo 9s ease-in-out infinite alternate; } @keyframes halo { from { opacity: .7; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } } /* two quiet ornamental rules above and below the words, no frame */ .calm-rule { position: absolute; left: 12%; right: 12%; display: flex; align-items: center; gap: 12px; color: var(--gold); opacity: .55; } .calm-rule.top { top: 8%; } .calm-rule.bot { bottom: 4%; } .calm-rule i { flex: 1; height: 1px; background: linear-gradient(to left, currentColor, transparent); } .calm-rule i:last-child { background: linear-gradient(to right, currentColor, transparent); } .calm-rule b { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid currentColor; } .calm-word { position: absolute; left: 6%; right: 6%; top: 14%; bottom: 10%; color: var(--gold-2); } .calm-word .cw { position: absolute; inset: 0; display: block; } .calm-word svg { width: 100%; height: 100%; } .calm-dots { display: flex; justify-content: center; gap: 10px; margin-top: 10px; } .calm-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: rgb(var(--hi) / .18); transition: background .5s, transform .5s var(--ease); } .calm-dots button.on { background: var(--gold); transform: scale(1.3); } .calm-dots button::after { content: ""; display: block; margin: -12px; width: 32px; height: 32px; } .drum-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 4px; max-width: 760px; } .dc-body { text-align: center; min-height: 128px; } .dc-text { margin: 0; font: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem)/1.6 var(--text); color: var(--gold-2); } .dc-fadl { margin: 4px auto 0; max-width: 48ch; font: 1.08rem/1.8 var(--text); color: var(--muted); } .dc-fadl span { font-family: var(--ui); font-size: .82rem; color: var(--faint); } .dc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .9rem; color: var(--gold-2); } .dc-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .drum-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background .2s, color .2s; } .drum-nav:hover { background: rgb(var(--hi) / .1); color: var(--gold-2); } .drum-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } /* ---------- the caption, read out slowly ---------- */ .dc-body { min-height: 170px; } .dc-band { display: flex; align-items: center; gap: 16px; justify-content: center; } .dc-band i { flex: 1; max-width: 120px; height: 7px; position: relative; background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat; opacity: .5; } .dc-band i::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--gold); } .dc-band i:first-child::after { left: 0; } .dc-band i:last-child::after { right: 0; } .dc-band i:first-child { background-image: linear-gradient(to left, var(--gold), transparent); } .dc-band i:last-child { background-image: linear-gradient(to right, var(--gold), transparent); } .dc-text { margin: 0; } .dc-body .w { display: inline-block; animation: wordIn 1s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--k) * 110ms + 150ms); } @keyframes wordIn { from { opacity: 0; filter: blur(5px); transform: translateY(5px); } } .dc-fadl { margin-top: 8px; } .dc-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; animation: wordIn 1s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(var(--k) * 110ms + 150ms); } .dc-seal { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 10px 12px; border-radius: 999px; font-size: .8rem; color: var(--muted); box-shadow: 0 0 0 1px var(--line-2) inset; } .dc-seal svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; } .dc-foot .dc-go { margin-top: 0; } .drum-nav { background: transparent; box-shadow: none; opacity: .7; } .drum-nav:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .dc-body .w, .dc-foot { animation: none; } } /* ---------- light adhkar, counted in place ---------- */ .quick { margin-top: clamp(40px, 7vh, 64px); text-align: right; } .quick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .quick-head h2 { margin: 0; font: 600 1.25rem var(--ui); } .quick-head p { margin: 0; font-size: .88rem; color: var(--faint); } .quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; } .qk { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; text-align: right; padding: 18px 20px 16px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 100% 0%, rgb(var(--hi) / .04), transparent 55%), var(--surface); box-shadow: var(--shadow), 0 0 0 1px var(--line) inset; transition: background .4s, transform .2s var(--ease); -webkit-tap-highlight-color: transparent; } .qk::after { content: ""; position: absolute; inset: 6px; border-radius: calc(var(--r-lg) - 6px); box-shadow: 0 0 0 1px var(--line) inset; pointer-events: none; } .qk:hover { background: radial-gradient(120% 90% at 100% 0%, rgb(var(--hi) / .07), transparent 55%), var(--surface-2); } .qk:active { transform: scale(.98); } .qk-top { display: flex; align-items: center; justify-content: space-between; } .qk-ring { width: 34px; height: 34px; transform: rotate(-90deg); } .qk-ring circle { fill: none; stroke-width: 3; } .qk-ring .bg { stroke: rgb(var(--hi) / .1); } .qk-ring .fg { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset .45s var(--ease); } .qk-num { font-variant-numeric: tabular-nums; } .qk-num b { display: inline-block; font-weight: 600; font-size: 1.05rem; } .qk-num small { color: var(--faint); font-size: .82rem; margin-inline-start: 3px; } .qk-text { margin-top: 6px; font: 1.6rem/1.6 var(--text); color: var(--gold-2); } .qk-fadl { font: .98rem/1.7 var(--text); color: var(--muted); } .qk-src { margin-top: auto; padding-top: 6px; font-size: .78rem; color: var(--faint); } .qk.done { background: color-mix(in oklab, var(--surface) 70%, var(--bg)); } .qk.done .qk-text, .qk.done .qk-fadl { opacity: .55; } .qk.done .qk-ring .fg { stroke: var(--gold-2); } /* ---------- the misbaha, simple ---------- */ .misbaha.simple { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; padding: clamp(18px, 3vw, 30px) clamp(14px, 3vw, 28px); background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; } .misbaha.simple::before, .misbaha.simple::after { display: none; } .misbaha.simple .phrase { margin: 0; min-height: 0; font: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem)/1.6 var(--text); color: var(--gold-2); } .misbaha.simple .beads-wrap { width: min(100%, 340px); aspect-ratio: 1; margin-top: 6px; } .misbaha.simple .beads { overflow: visible; } .misbaha.simple .thread { fill: none; stroke: var(--line-2); stroke-width: 1; } .misbaha.simple .bead { fill: rgb(var(--hi) / .12); stroke: none; transition: fill .35s var(--ease), r .35s var(--ease); } .misbaha.simple .bead.on { fill: var(--gold); } .misbaha.simple .bead.cur { r: 11.5; fill: var(--gold-2); } .misbaha.simple .mark { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; opacity: .6; } .misbaha.simple .bead-count { height: 100%; } .misbaha.simple .bead-count b { font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); font-weight: 500; } .misbaha.simple .bead-count small { font-size: .9rem; } .misbaha.simple .chips { justify-content: center; margin-top: 18px; } .misbaha.simple .chip { height: 34px; padding-inline: 12px; font-size: .86rem; } .misbaha.simple .row { justify-content: center; margin-top: 14px; } .misbaha.simple .total { margin-top: 10px; font-size: .84rem; } :root[data-tone="light"] .misbaha.simple .bead.on { fill: var(--gold); } .misbaha.simple .beads-wrap { order: 0; } /* ---------- smaller, quieter misbaha sheet ---------- */ @media (min-width: 861px) { .mis-panel { width: min(100% - 48px, 440px); } } .mis-panel { padding-top: 14px; } .mis-head h2 .t { height: 34px; } .misbaha.simple { background: none; box-shadow: none; padding: 0 0 4px; border-radius: 0; } .misbaha.simple .phrase { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.75rem); } .misbaha.simple .beads-wrap { position: relative; width: min(100%, 250px); margin-top: 2px; } .misbaha.simple .beads-wrap::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 12%, transparent), transparent); pointer-events: none; } .misbaha.simple .bead { r: 8; } .misbaha.simple .bead.cur { r: 10.5; } .misbaha.simple .bead-count b { font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); } /* the phrases as one quiet row that scrolls sideways */ .misbaha.simple .chips { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin-top: 14px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .misbaha.simple .chips::-webkit-scrollbar { display: none; } .misbaha.simple .chip { flex: none; height: 32px; font-size: .84rem; } .misbaha.simple .row { margin-top: 10px; gap: 8px; } .misbaha.simple .target button { height: 30px; min-width: 40px; font-size: .84rem; } .misbaha.simple .icon-btn { width: 36px; height: 36px; } .misbaha.simple .total { margin-top: 8px; font-size: .8rem; } /* ---------- misbaha: phrase selector and tidy footer ---------- */ .ph-sel { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 6px; width: 100%; } .ph-sel .phrase { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph-arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; } .ph-arrow:hover { background: rgb(var(--hi) / .07); color: var(--gold-2); } .ph-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; } .ph-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; } .ph-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--hi) / .18); transition: background .3s, transform .3s var(--ease); } .ph-dots i.on { background: var(--gold); transform: scale(1.4); } .misbaha.simple .row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); width: 100%; justify-content: center; } .misbaha.simple .target { background: none; box-shadow: none; gap: 2px; } .misbaha.simple .target button { border-radius: 999px; } .misbaha.simple .target button[aria-pressed="true"] { background: rgb(var(--hi) / .08); box-shadow: 0 0 0 1px var(--line-2) inset; } .misbaha.simple .icon-btn { background: none; } .misbaha.simple .icon-btn:hover { background: rgb(var(--hi) / .07); } /* ---------- misbaha motion and a softer sheet ---------- */ .misbaha.simple .bead { transform-box: fill-box; transform-origin: center; } .misbaha.simple .wave { fill: none; stroke: var(--gold); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; pointer-events: none; } .misbaha.simple .beads { transition: transform .25s var(--ease); } .misbaha.simple .beads:active { transform: scale(.975); } .misbaha.simple .ring-g { transition: transform .6s cubic-bezier(.34, 1.3, .64, 1); } .misbaha.simple .bead-count b { transition: color .4s; } .ph-sel { touch-action: pan-y; user-select: none; } /* the sheet itself: a soft gradient of the theme, a faint light behind the beads, a lighter veil behind */ .mis-panel { background: radial-gradient(70% 55% at 50% 42%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--bg-2) 85%); box-shadow: 0 0 0 1px var(--line) inset, 0 40px 80px -30px rgb(0 0 0 / .55); } .mis-backdrop { background: rgb(var(--glass) / .35); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } /* ---------- the hanging misbaha ---------- */ .misbaha.hang { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 18px; padding: 4px 0 2px; background: none; box-shadow: none; border-radius: 0; text-align: center; } .misbaha.hang::before, .misbaha.hang::after { display: none; } .hang-beads { width: 104px; justify-self: center; } .misbaha.hang .beads { display: block; width: 100%; height: auto; cursor: default; pointer-events: none; overflow: visible; } .misbaha.hang .beads:active { cursor: grabbing; } .misbaha.hang .thread { fill: none; stroke: var(--gold); stroke-opacity: .4; stroke-width: 1.2; } .misbaha.hang .head, .misbaha.hang .tail { fill: url(#hbG); stroke: var(--gold); stroke-opacity: .6; stroke-width: 1; } .misbaha.hang .tail { fill: none; stroke-linecap: round; } .misbaha.hang .hb { fill: rgb(var(--hi) / .2); stroke: rgb(var(--hi) / .16); transition: transform .45s cubic-bezier(.22,1,.36,1), fill .4s; } .misbaha.hang .hb.on { fill: url(#hbG); stroke: none; } .misbaha.hang .hb.cur { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--gold) 70%, transparent)); } .hang-side { display: flex; flex-direction: column; align-items: center; min-width: 0; } .misbaha.hang .phrase { margin: 0; padding-top: .35em; line-height: 2; white-space: normal; overflow: visible; font: clamp(1.4rem, 1.15rem + .8vw, 1.7rem)/2 var(--text); color: var(--gold-2); } .misbaha.hang .ph-sel { grid-template-columns: 32px 1fr 32px; } .hang-count { display: grid; justify-items: center; margin-top: 18px; } .hang-count b { font: 500 clamp(3.4rem, 2.6rem + 3vw, 4.6rem)/1 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); } .hang-count small { margin-top: 6px; font-size: .9rem; color: var(--faint); } .misbaha.hang.is-done .hang-count b { color: var(--gold-2); } .misbaha.hang .rounds { justify-content: center; margin-top: 10px; } .hang-hint { margin: 16px 0 0; font: .8rem/1.6 var(--ui); color: var(--faint); } .misbaha.hang .row { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; justify-content: center; gap: 6px; } .misbaha.hang .target { background: none; box-shadow: none; gap: 2px; } .misbaha.hang .target button { height: 30px; min-width: 38px; font-size: .84rem; } .misbaha.hang .target button[aria-pressed="true"] { background: rgb(var(--hi) / .08); box-shadow: 0 0 0 1px var(--line-2) inset; } .misbaha.hang .icon-btn { width: 34px; height: 34px; background: none; } .misbaha.hang .total { margin-top: 8px; font-size: .8rem; color: var(--faint); } @media (max-width: 420px) { .hang-beads { width: 92px; } } .misbaha.hang .head { fill: url(#hbG); stroke: var(--gold); stroke-opacity: .5; } .misbaha.hang .hb { transition: transform .5s cubic-bezier(.22,1,.36,1), fill .4s; } @media (max-width: 420px) { .hang-beads { width: 100px; } } /* ---------- the hanging misbaha, vertical ---------- */ .misbaha.hang .hb { fill: url(#hbO); stroke: rgb(var(--hi) / .14); stroke-width: .6; } .misbaha.hang .hb.on { fill: url(#hbG); stroke: rgb(0 0 0 / .18); } .misbaha.hang .head { fill: url(#hbG); stroke: rgb(0 0 0 / .2); stroke-width: .6; } .misbaha.hang .knot { fill: url(#hbG); } .misbaha.hang .tail { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1; stroke-linecap: round; } .misbaha.hang .thread { stroke-opacity: .35; stroke-width: 1; } @media (max-width: 420px) { .hang-beads { width: 88px; } } /* the count button: a quiet disc whose ring fills as the round goes on */ .tasbih { position: relative; margin-top: 20px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, rgb(var(--hi) / .09), rgb(var(--hi) / .02) 70%); box-shadow: inset 0 1px 0 rgb(var(--hi) / .08), inset 0 -10px 20px rgb(0 0 0 / .18), 0 12px 28px -14px rgb(0 0 0 / .7); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: transform .25s var(--ease), background .3s; } .tasbih svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .tasbih .tr { fill: none; stroke: var(--line-2); stroke-width: 1.5; } .tasbih .arc { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: 289.03; transition: stroke-dashoffset .5s cubic-bezier(.22,1,.36,1); } .tasbih span { font: 1.3rem/1 var(--text); color: var(--gold-2); padding-top: .2em; } .tasbih:hover { background: radial-gradient(circle at 50% 35%, rgb(var(--hi) / .13), rgb(var(--hi) / .03) 70%); } .tasbih:active { transform: scale(.95); } .tasbih:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 6px; } /* ---------- flat buttons: crisp edges, no gloss, no glow, no swelling ---------- */ .btn { height: 46px; padding-inline: 22px; border-radius: 12px; } .btn:active, .menu-btn:active, .quran-btn:active, .mis-fab:active { transform: none; opacity: .85; } .btn-gold { background: var(--gold); box-shadow: none; } .btn-gold:hover { background: var(--gold-2); box-shadow: none; } .btn-ghost { background: transparent; box-shadow: 0 0 0 1px var(--line-2) inset; } .btn-ghost:hover { background: rgb(var(--hi) / .05); } .menu-btn, .quran-btn { border-radius: 11px; height: 40px; } .quran-btn { background: transparent; box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent) inset; } .quran-btn:hover { background: color-mix(in oklab, var(--gold) 10%, transparent); } .tool, .chip, .dock a, .dock button { border-radius: 10px; } .tool, .chip { background: transparent; } .target { border-radius: 11px; background: transparent; } .target button { border-radius: 8px; } .icon-btn { background: transparent; } .mis-fab { box-shadow: 0 0 0 1px var(--line-2) inset, 0 8px 20px -12px rgb(0 0 0 / .6); } .mis-fab:hover { transform: none; box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 20px -12px rgb(0 0 0 / .6); } /* the tasbih button: a thin ring and the round's progress, nothing raised */ .tasbih { background: transparent; box-shadow: none; } .tasbih:hover { background: rgb(var(--hi) / .04); } .tasbih:active { transform: none; background: rgb(var(--hi) / .07); } .tasbih .tr { stroke: var(--line); stroke-width: 1; } .tasbih .arc { stroke-width: 2; } @media (max-width: 560px) { .quran-btn { width: 40px; } } .search { border-radius: 11px; height: 40px; } .nav-pill { border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2) inset, 0 10px 24px -16px rgb(0 0 0 / .7); } .seg { border-radius: 12px; padding: 4px; background: transparent; } .seg button { border-radius: 9px; height: 36px; } .seg .thumb { top: 4px; bottom: 4px; border-radius: 9px; background: var(--gold); box-shadow: none; } /* the current stop and the card arrows, flat like the rest */ .stop[aria-selected="true"] .stop-ico { box-shadow: 0 0 0 5px var(--surface); transform: none; } .stop:hover .stop-ico { transform: none; } .card .open { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; } .card:hover .open { background: transparent; color: var(--gold-2); box-shadow: 0 0 0 1px var(--gold) inset; } .card .is-now { border-radius: 8px; } /* the card for this hour: a thin line of the theme colour round it */ /* ---------- the card for this hour: a fine frame with a slow light travelling round it ---------- */ @property --fa { syntax: ""; inherits: false; initial-value: 0deg; } .card.feat::before { inset: 7px; padding: 1px; box-shadow: none; background: conic-gradient(from var(--fa), color-mix(in oklab, var(--gold) 22%, transparent) 0deg, var(--gold-2) 40deg, color-mix(in oklab, var(--gold) 22%, transparent) 110deg, color-mix(in oklab, var(--gold) 22%, transparent) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: featRound 9s linear infinite; } .card.feat:hover::before { box-shadow: none; } @keyframes featRound { to { --fa: 360deg; } } @media (prefers-reduced-motion: reduce) { .card.feat::before { animation: none; } } /* ---------- the card arrow: on hover the ring warms and the arrow slips out and comes back ---------- */ .card .open { overflow: hidden; transition: background .35s, color .35s, box-shadow .35s; } .card .open svg { transition: none; } .card:hover .open { background: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 70%, transparent) inset; } .card:hover .open svg { transform: none; animation: arrowSlip .7s cubic-bezier(.65,0,.35,1); } @keyframes arrowSlip { 0% { transform: none; opacity: 1; } 45% { transform: translateX(-22px); opacity: 0; } 46% { transform: translateX(22px); opacity: 0; } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .card:hover .open svg { animation: none; } } /* ---------- the card arrow, take two: on hover it opens into a small "ابدأ ←" ---------- */ .card .open { width: auto; min-width: 40px; padding: 0 11px; border-radius: 20px; gap: 0; justify-content: center; transition: background .4s var(--ease), color .4s, box-shadow .4s, padding .45s var(--ease), gap .45s var(--ease); } .card .open b { max-width: 0; overflow: hidden; white-space: nowrap; font: 500 .88rem/1 var(--ui); opacity: 0; transition: max-width .45s var(--ease), opacity .3s .05s; } .card:hover .open { background: var(--gold); color: var(--gold-ink); box-shadow: none; padding: 0 16px; gap: 8px; } .card:hover .open b { max-width: 7em; opacity: 1; } .card:hover .open svg { animation: none; transform: translateX(-2px); transition: transform .45s var(--ease); } /* the card arrow, flatter: a low tab with a thin line, not a filled capsule */ .card .open { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 10px; } .card:hover .open { background: color-mix(in oklab, var(--gold) 12%, transparent); color: var(--gold-2); box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 60%, transparent) inset; padding: 0 14px; gap: 10px; } .card .open b { font-weight: 500; font-size: .86rem; letter-spacing: 0; } .card .open b { line-height: 36px; height: 36px; padding-bottom: 0; } /* ---------- see-through dhikr cards: a thin lit edge, a whisper of blur, soft lights behind ---------- */ .z { background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .01) 60%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), inset 0 0 0 1px rgb(255 255 255 / .09); } .z::after { display: none; } .z .z-fadl { background: rgb(var(--hi) / .03); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07); } body.reading { background: radial-gradient(40vw 40vw at 92% 18%, color-mix(in oklab, var(--glow) 10%, transparent), transparent 70%), radial-gradient(36vw 36vw at 6% 82%, rgb(var(--hi) / .03), transparent 70%), var(--bg); background-attachment: fixed; } /* the light themes: a dark edge instead of a light one */ :root[data-tone="light"] .z { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px rgb(0 0 0 / .08); } :root[data-tone="light"] .z .z-fadl { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .07); } /* the next card: a touch brighter edge; a finished card: a touch dimmer, both still see-through */ .z.next { background: linear-gradient(160deg, rgb(var(--hi) / .08), rgb(var(--hi) / .02) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent); } .z.done { background: rgb(var(--hi) / .015); } :root[data-tone="light"] .z.next { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent); } /* ---------- chapter cards in the light themes ---------- */ /* the dark banner ends on a clean edge instead of fading through grey into the white card */ :root[data-tone="light"] .card .band::after { display: none; } :root[data-tone="light"] .card-body { margin-top: 0; padding-top: 16px; } /* a soft shadow on hover, not a black one */ :root[data-tone="light"] .card:hover { box-shadow: var(--shadow), 0 0 0 1px var(--line-2) inset, 0 30px 50px -28px rgb(30 40 35 / .35); } /* the card button: a dark tab with light words, easy to read on white */ :root[data-tone="light"] .card:hover .open { background: var(--gold); color: var(--gold-ink); box-shadow: none; } /* search: the chapters found come first, as plain rows */ .results .r-head { margin: 10px 14px 4px; font-size: .78rem; font-weight: 500; color: var(--gold); } .results .r-head:first-child { margin-top: 4px; } .results .r-chap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .results .r-chap b { font-weight: 500; color: var(--ink); } .results .r-chap small { font-size: .8rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- «كيف حالك؟» ---------- */ @font-face { font-family: "Hafs"; font-display: swap; src: url(../fonts/kfgqpc-hafs.woff2) format("woff2"); } .hal-title { margin: 0; font: 700 clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem)/1.3 var(--ui); color: var(--ink); } .hal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; margin-top: 22px; } .hal { position: relative; display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .08); transition: box-shadow .35s, transform .45s var(--ease), background .35s; animation: halIn .6s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * 35ms); } @keyframes halIn { from { opacity: 0; transform: translateY(8px); } } .hal::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--gold) 18%, transparent), transparent); opacity: 0; transition: opacity .5s; pointer-events: none; } .hal:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); } .hal:hover::after { opacity: 1; } .hal b { font: 600 1rem/1.4 var(--ui); color: var(--ink); } .hal small { font-size: .78rem; color: var(--faint); } .hal-ic { width: 34px; height: 34px; margin-bottom: 6px; display: grid; place-items: center; border-radius: 10px; color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 35%, transparent); transition: transform .5s var(--ease); } .hal:hover .hal-ic { transform: rotate(-8deg) scale(1.06); } .hal-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hal-ic.big { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 10px; } .hal-ic.big svg { width: 30px; height: 30px; } /* the page of a state */ .hal-page { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding: clamp(96px, 14vh, 130px) 0 80px; } .crumb-back { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; color: var(--muted); } .crumb-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .crumb-back:hover { color: var(--gold-2); } .hal-head { text-align: center; margin: 18px 0 8px; } .hal-head h1 { margin: 0; font: 700 clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem)/1.3 var(--ui); color: var(--ink); } .hal-head p { margin: 6px 0 0; color: var(--muted); } .hal-h { display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font: 500 .9rem/1.4 var(--ui); color: var(--gold); } .hal-h i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--gold) 40%, transparent)); } .hal-h i:last-child { transform: scaleX(-1); } .hal-verses, .hal-adhkar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .hal-v, .hal-d { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgb(var(--hi) / .05), rgb(var(--hi) / .012) 60%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), inset 0 0 0 1px rgb(var(--hi) / .08); transition: box-shadow .3s, transform .4s var(--ease); } .hal-v:hover, .hal-d:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 55%, transparent); transform: translateY(-2px); } .hal-v { text-align: center; background: radial-gradient(120% 140% at 50% 0%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 70%); } .hal-v p { margin: 0; font: clamp(1.35rem, 1.2rem + .7vw, 1.7rem)/2.1 "Hafs", var(--text); color: var(--ink); } .hal-v span, .hal-d span { font-size: .8rem; color: var(--gold); } .hal-d p { margin: 0; font: 1.2rem/1.95 var(--text); color: var(--ink); } .hal-d span { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; color: var(--faint); } .hal-d em { font-style: normal; color: var(--gold); } /* hadith: no card, just text and one quiet line for its source, so the page stays light */ .hal-hadith { list-style: none; margin: 0; padding: 0 6px; } .hal-hadith li { padding: 14px 0; } .hal-hadith li + li { border-top: 1px solid rgb(var(--hi) / .07); } .hal-hadith p { margin: 0; font: 1.12rem/1.9 var(--text); color: var(--ink); } .hal-hadith span { display: block; margin-top: 6px; font: .76rem/1.6 var(--ui); color: var(--faint); } .hal-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; } /* ---------- search: a fine line runs under the field while typing ---------- */ .search { position: relative; } .search::after { content: ""; position: absolute; inset-inline: 14px; bottom: 5px; height: 1.5px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); background-size: 50% 100%; background-repeat: no-repeat; } .search.typing::after { opacity: 1; animation: typeRun 1s ease-in-out infinite; } @keyframes typeRun { from { background-position: -60% 0; } to { background-position: 160% 0; } } .results a { animation: resIn .35s cubic-bezier(.2, .9, .3, 1) both; } .results a:nth-child(2) { animation-delay: .03s; } .results a:nth-child(3) { animation-delay: .06s; } .results a:nth-child(4) { animation-delay: .09s; } .results a:nth-child(n+5) { animation-delay: .12s; } @keyframes resIn { from { opacity: 0; transform: translateY(4px); } } /* nothing found: a quiet geometric mark and a kind word */ .empty-art { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; text-align: center; color: var(--muted); } .empty-art svg { width: 64px; height: 64px; fill: none; stroke: color-mix(in oklab, var(--gold) 55%, transparent); stroke-width: 1.2; animation: emptyTurn 14s linear infinite; } .empty-art b { font: 500 .98rem var(--ui); color: var(--ink); } .empty-art small { font-size: .82rem; color: var(--faint); } @keyframes emptyTurn { to { transform: rotate(360deg); } } /* ---------- finer type: steadier rhythm and figures ---------- */ body { text-rendering: optimizeLegibility; font-kerning: normal; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } .sec-head p, .lede { line-height: 1.85; } .z-text { word-spacing: .04em; } [class*="count"], .q-pg, .stat, .clock { font-variant-numeric: tabular-nums; } /* ---------- «كيف حالك؟» as one quiet band: a question on one side, the states in a row ---------- */ .hal-bar { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 20px; border-radius: var(--r-xl); background: linear-gradient(160deg, rgb(var(--hi) / .045), rgb(var(--hi) / .01) 60%); box-shadow: inset 0 0 0 1px rgb(var(--hi) / .08); } .hal-q h2 { margin: 0; font: 700 1.35rem/1.3 var(--ui); color: var(--ink); } .hal-q p { margin: 6px 0 0; font-size: .82rem; line-height: 1.7; color: var(--faint); } .hal-row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .hal-row .hal { flex: none; display: grid; justify-items: center; gap: 6px; width: 104px; padding: 12px 8px 11px; scroll-snap-align: start; text-align: center; } .hal-row .hal-ic { margin: 0; } .hal-row .hal b { font-size: .82rem; line-height: 1.35; } @media (max-width: 720px) { .hal-bar { grid-template-columns: 1fr; gap: 12px; padding: 16px 14px; } } /* ================================================================================================= LIFE TOUCHES ================================================================================================= */ /* 5 · a single sheen passes over a dhikr card the first time it comes into view */ .z.shine::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .07) 48%, transparent 60%) no-repeat; background-size: 250% 100%; animation: zShine 1.4s cubic-bezier(.3, 0, .2, 1) both; } @keyframes zShine { from { background-position: 130% 0; } to { background-position: -30% 0; } } /* 6 · links draw their underline from the right as the pointer arrives */ .foot a, .crumbs a, .crumb-back, .q-hit-ref, .r-cat { background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px; transition: background-size .45s cubic-bezier(.2, .9, .3, 1), color .3s; } .foot a:hover, .crumbs a:hover, .crumb-back:hover { background-size: 100% 1px; } /* 4 · the close of a chapter: a small figure that draws itself, and a word once everything is done */ .z-end { display: grid; justify-items: center; gap: 10px; margin: 46px auto 10px; text-align: center; } .z-end svg { width: 70px; height: 70px; fill: none; stroke: color-mix(in oklab, var(--gold) 65%, transparent); stroke-width: 1.1; } .z-end svg path { stroke-dasharray: 320; stroke-dashoffset: 320; } .z-end.seen svg path { animation: zDraw 2.2s cubic-bezier(.4, 0, .2, 1) forwards; } .z-end.seen svg path:nth-child(2) { animation-delay: .35s; } .z-end.seen svg path:nth-child(3) { animation-delay: .7s; } @keyframes zDraw { to { stroke-dashoffset: 0; } } .z-end p { margin: 0; font: 500 .95rem var(--ui); color: var(--faint); opacity: 0; transition: opacity .8s .9s; } .z-end.seen p { opacity: 1; } .z-end.all p { color: var(--gold-2); } /* 10 · the chapter title shrinks into the bar as you read down */ .mini-title { position: fixed; z-index: 29; top: 76px; left: 50%; transform: translate(-50%, -8px); padding: 6px 14px; border-radius: 10px; pointer-events: none; font: 600 .86rem var(--ui); color: var(--gold-2); background: rgb(var(--glass) / .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1); } .mini-title.on { opacity: 1; transform: translate(-50%, 0); } .nav.hide ~ .mini-title, .mini-title.up { top: 14px; } /* 7 · the marker of now glides along the day as the minutes pass */ .day-now { transition: inset-inline-start 1.2s linear, left 1.2s linear, right 1.2s linear; } @media (prefers-reduced-motion: reduce) { .z.shine::before, .z-end.seen svg path { animation: none; stroke-dashoffset: 0; } } /* ---------- the seasons of the Hijri year ---------- */ .season { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: clamp(18px, 3vh, 26px) auto 0; max-width: 620px; padding: 12px 16px; border-radius: 16px; text-align: start; background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 10%, transparent), color-mix(in oklab, var(--gold) 3%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent); transition: box-shadow .3s, transform .4s var(--ease); } .season:hover { box-shadow: inset 0 0 0 1px var(--gold); transform: translateY(-2px); } .season-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent); } .season-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .season-t { display: grid; gap: 1px; } .season-t small { font-size: .72rem; color: var(--gold); } .season-t b { font: 600 .98rem/1.4 var(--ui); color: var(--ink); } .season-t span { font-size: .78rem; color: var(--faint); } .season-go { font-size: .8rem; color: var(--gold-2); white-space: nowrap; } /* ---------- «كيف حالك اليوم؟»: an invitation in the hero ---------- */ .hal-invite { display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: clamp(20px, 3vh, 28px) auto 0; padding: 10px 14px 10px 16px; border-radius: 18px; text-align: start; background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 9%, transparent), color-mix(in oklab, var(--gold) 2%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 30%, transparent); transition: box-shadow .35s, transform .45s var(--ease), background .35s; } .hal-invite:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--gold); background: linear-gradient(160deg, color-mix(in oklab, var(--gold) 14%, transparent), color-mix(in oklab, var(--gold) 4%, transparent)); } .hal-faces { display: flex; } .hal-faces i { width: 34px; height: 34px; display: grid; place-items: center; margin-inline-start: -9px; border-radius: 50%; color: var(--gold-2); background: var(--surface); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent); transition: transform .45s var(--ease); } .hal-faces i:first-child { margin-inline-start: 0; } .hal-faces i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .hal-invite:hover .hal-faces i { transform: translateY(-2px); } .hal-invite:hover .hal-faces i:nth-child(2) { transition-delay: .04s; } .hal-invite:hover .hal-faces i:nth-child(3) { transition-delay: .08s; } .hal-invite:hover .hal-faces i:nth-child(4) { transition-delay: .12s; } .hal-inv-t { display: grid; gap: 1px; } .hal-inv-t b { font: 700 1.02rem/1.35 var(--ui); color: var(--ink); } .hal-inv-t small { font-size: .78rem; color: var(--faint); } .hal-inv-go { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--gold-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 40%, transparent); transition: background .3s, color .3s; } .hal-inv-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .hal-invite:hover .hal-inv-go { background: var(--gold); color: var(--gold-ink); box-shadow: none; } .hero .hal-invite { display: grid; width: fit-content; max-width: 100%; } /* the window of states */ .hal-modal { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; padding: 16px; } .hal-modal[hidden] { display: none; } .hal-modal-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: qFade .3s ease both; } :root[data-tone="light"] .hal-modal-bg { background: rgb(40 35 25 / .22); } .hal-modal-box { position: relative; width: min(100%, 760px); max-height: 86vh; overflow: auto; padding: 22px; border-radius: 24px; background: rgb(var(--glass) / .95); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), inset 0 0 0 1px color-mix(in oklab, var(--gold) 22%, transparent), 0 50px 100px -40px rgb(0 0 0 / .8); animation: qPop .34s cubic-bezier(.2, .9, .3, 1.05) both; } .hal-modal.closing .hal-modal-box { animation: qPopOut .2s ease forwards; } .hal-modal.closing .hal-modal-bg { animation: qFadeOut .22s ease forwards; } .hal-modal-box header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .hal-modal-box h2 { margin: 0; font: 700 1.5rem/1.3 var(--ui); color: var(--ink); } .hal-modal-box header p { margin: 6px 0 0; font-size: .86rem; color: var(--faint); } .hal-modal-box .hal-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); } @keyframes qPop { from { transform: translateY(10px) scale(.96); opacity: 0; } } @keyframes qPopOut { to { transform: scale(.97); opacity: 0; } } @keyframes qFade { from { opacity: 0; } } @keyframes qFadeOut { to { opacity: 0; } } /* ---------- chapter cards, refined: the art runs to the card's edges and melts into it through a long, eased fade; one hairline round the whole card; even corners; the card lifts straight up ---------- */ .card { border-radius: 24px; box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 20px 44px -30px rgb(0 0 0 / .85); } .card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgb(0 0 0 / .25), 0 30px 60px -32px rgb(0 0 0 / .95); } .card::before { display: block; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(255 255 255 / .06); } .card:hover::before { box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgb(255 255 255 / .08); } .card.feat::before { inset: 0; border-radius: inherit; } .card .band::after { display: block; background: linear-gradient(to top, var(--surface) 0%, color-mix(in oklab, var(--surface) 82%, transparent) 8%, color-mix(in oklab, var(--surface) 52%, transparent) 17%, color-mix(in oklab, var(--surface) 24%, transparent) 27%, color-mix(in oklab, var(--surface) 7%, transparent) 36%, transparent 44%); } .card-body { margin-top: -12px; padding: 0 22px 20px; gap: 10px; } .card .what { font-size: 1.18rem; line-height: 1.6; opacity: 1; color: var(--muted); } .card.feat .what { color: var(--ink); } .card-foot { padding-top: 12px; } :root[data-tone="light"] .card { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 16px 34px -26px rgb(0 0 0 / .28); } :root[data-tone="light"] .card:hover { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 26px 50px -30px rgb(0 0 0 / .34); } :root[data-tone="light"] .card::before { box-shadow: inset 0 0 0 1px var(--line); } /* on white the band is drawn light (art.js cardPal), so it melts into the card the same way */ :root[data-tone="light"] .card .band::after { display: block; } :root[data-tone="light"] .card-body { margin-top: -12px; padding-top: 0; } /* ---------- chapter cards in motion ---------- - the band opens on arrival: the art settles from a slight zoom as the card rises; - the night sky drifts slowly on every card, and the ring of the medallion turns once in a long while; - sky, medallion and title sit at three depths and part with the pointer; - a single band of light crosses the whole card once each time the pointer comes in. Nothing pulses. */ .card .band svg .pl-bg, .card .band svg .pl-md, .card .band svg .pl-tt { transition: transform 1.8s var(--ease); } .card:hover .band svg .pl-bg { transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px)); } .card:hover .band svg .pl-md { transform: translate(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px)); } .card:hover .band svg .pl-tt { transform: translate(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 9px)); } .card .band .sky { animation: skyDrift 34s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.7s); } @keyframes skyDrift { to { transform: translate(-36px, 10px); } } .card .band .petals { transform-box: view-box; transform-origin: 504px 104px; animation: petalsTurn 60s linear infinite; } @keyframes petalsTurn { to { transform: rotate(360deg); } } .card .sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .11) 48%, rgb(255 255 255 / .04) 54%, transparent 64%); transform: translateX(110%); } .card:hover .sheen { transform: translateX(-110%); transition: transform 1.4s var(--ease-io); } .cards[data-anim] .card .band .pl-bg { transform-box: view-box; transform-origin: 50% 50%; animation: bandIn 1.2s var(--ease) backwards; animation-delay: calc(var(--i) * 45ms + 80ms); } @keyframes bandIn { from { transform: scale(1.1); opacity: .4; } } /* the body follows: the description brightens and the progress diamonds light one after another */ .card .what { transition: color .5s; } .card:hover .what { color: var(--ink); } .card .dots i { transition: background .4s, transform .5s var(--ease); } .card:hover .dots i { transform: rotate(45deg) translateY(-2px); } .card:hover .dots i:nth-child(2) { transition-delay: 30ms; } .card:hover .dots i:nth-child(3) { transition-delay: 60ms; } .card:hover .dots i:nth-child(4) { transition-delay: 90ms; } .card:hover .dots i:nth-child(5) { transition-delay: 120ms; } .card:hover .dots i:nth-child(6) { transition-delay: 150ms; } .card:hover .dots i:nth-child(n+7) { transition-delay: 180ms; } @media (prefers-reduced-motion: reduce) { .card .band .sky, .card .band .petals, .cards[data-anim] .card .band .pl-bg { animation: none; } .card .sheen { display: none; } .card:hover .band svg .pl-bg, .card:hover .band svg .pl-md, .card:hover .band svg .pl-tt, .card:hover .dots i { transform: none; } } /* ---------- chapter card text: one quiet line of facts, then the moment in the text face ---------- */ .card-meta { justify-content: flex-start; gap: 0; font-size: .8rem; color: var(--faint); } .card .when { height: auto; padding: 0; background: none; box-shadow: none; color: var(--muted); font-size: .8rem; gap: 6px; } .card .when svg { width: 13px; height: 13px; opacity: .8; } .card .count { font-size: .8rem; } .card .count::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .7; } .card .what { font-size: 1.28rem; line-height: 1.55; color: var(--ink); opacity: .82; text-wrap: balance; } .card:hover .what { opacity: 1; } .card.feat .what { font-size: 1.45rem; opacity: .95; } .card .stat { font-size: .82rem; color: var(--faint); } /* ---------- chapter card shapes (chosen in the colours panel; app.js sets .cards[data-shape]) ---------- */ .card .stub, .card .tally, .card .vtitle { display: none; } /* switching shape: every card travels and reshapes into its new place */ ::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation-duration: 0s; } } /* the ticket: a stub at the end, cut off by a dashed line between two notches, carrying the hour */ .cards[data-shape="ticket"] .card { display: grid; grid-template-columns: 1fr 88px; grid-template-rows: auto 1fr; } .cards[data-shape="ticket"] .card .band { grid-area: 1 / 1; } .cards[data-shape="ticket"] .card .card-body { grid-area: 2 / 1; } .cards[data-shape="ticket"] .card .stub { display: grid; grid-area: 1 / 2 / 3 / 3; place-content: center; justify-items: center; gap: 4px; text-align: center; position: relative; z-index: 3; border-inline-start: 2px dashed var(--line-2); } .cards[data-shape="ticket"] .stub b { font: 600 1.25rem var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; } .cards[data-shape="ticket"] .stub small { font-size: .72rem; color: var(--faint); } .cards[data-shape="ticket"] .stub::before, .cards[data-shape="ticket"] .stub::after { content: ""; position: absolute; inset-inline-start: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); } .cards[data-shape="ticket"] .stub::before { top: -12px; } .cards[data-shape="ticket"] .stub::after { bottom: -12px; } /* the poster, the floating glass and the strip carry the band's own colour down the whole card */ .cards:is([data-shape="glass"], [data-shape="strip"]) .card { --surface: var(--deep); --ink: var(--fg); --gold: var(--fg); --gold-2: var(--fg); --gold-ink: var(--deep); --muted: color-mix(in oklab, var(--fg) 78%, transparent); --faint: color-mix(in oklab, var(--fg) 60%, transparent); --line: color-mix(in oklab, var(--fg) 14%, transparent); --line-2: color-mix(in oklab, var(--fg) 26%, transparent); background: var(--deep); } /* the floating glass: the sky fills the card and the details float on a frosted pane over it */ .cards[data-shape="glass"] .card { aspect-ratio: 600 / 470; } .cards[data-shape="glass"] .card.feat { aspect-ratio: auto; min-height: 340px; } .cards[data-shape="glass"] .card .band { position: absolute; inset: 0 0 auto; } .cards[data-shape="glass"] .card .card-body { position: absolute; inset: auto 12px 12px; margin: 0; padding: 14px 16px; gap: 8px; border-radius: 16px; background: rgb(var(--glass) / .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line-2) inset; } .cards[data-shape="glass"] .card .dots { display: none; } .cards[data-shape="glass"] .card-foot { padding-top: 10px; } /* the manuscript: a double ruled frame, the sky set in it like an illumination, the line written on rules */ .cards[data-shape="manuscript"] .card { border-radius: 8px; outline: 3px double var(--line-2); outline-offset: -10px; } .cards[data-shape="manuscript"] .card .band { margin: 18px 18px 0; border-radius: 2px; } .cards[data-shape="manuscript"] .card .band::after { display: none; } .cards[data-shape="manuscript"] .card .card-body { margin-top: 0; padding: 12px 26px 26px; } .cards[data-shape="manuscript"] .card .what { line-height: 1.7em; background: repeating-linear-gradient(transparent 0 calc(1.7em - 1px), var(--line-2) calc(1.7em - 1px) 1.7em); } .cards[data-shape="manuscript"] .card .is-now { top: 26px; inset-inline-start: 26px; } /* the folded corner: the lower corner turned over like a page, the count on the fold */ .cards[data-shape="dogear"] .card { clip-path: polygon(0 0, 100% 0, 100% 100%, 58px 100%, 0 calc(100% - 58px)); } .cards[data-shape="dogear"] .card .tally { display: flex; position: absolute; z-index: 3; left: 0; bottom: 0; width: 58px; height: 58px; direction: ltr; justify-content: flex-end; padding: 9px 10px; font: 600 .78rem var(--ui); color: var(--ink); background: linear-gradient(45deg, transparent 50%, var(--surface-3) 50%); box-shadow: 3px -3px 8px -5px rgb(0 0 0 / .4); } /* the strip: tall cards in one row that slides sideways, the medallion high and the name below it */ .cards[data-shape="strip"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 230px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px 4px 18px; scrollbar-width: thin; } .cards[data-shape="strip"] .card { grid-column: auto !important; height: 400px; scroll-snap-align: start; } .cards[data-shape="strip"] .card .band, .cards[data-shape="strip"] .card.feat .band { position: absolute; inset: 0; aspect-ratio: auto; } .cards[data-shape="strip"] .card .band svg { position: absolute; top: -20px; left: -465px; width: auto; height: 297px; } .cards[data-shape="strip"] .card .vtitle { display: block; position: absolute; z-index: 2; inset: 150px 14px auto; color: var(--ink); } .cards[data-shape="strip"] .card .vtitle svg { position: static; display: block; width: 100%; height: auto; margin: -34px 0 -40px; } .cards[data-shape="strip"] .card .card-body { flex: none; margin-top: auto; padding: 0 16px 16px; gap: 8px; } .cards[data-shape="strip"] .card .dots { display: none; } .cards[data-shape="strip"] .card .what { font-size: 1.08rem; } /* the picker */ .themes .shape { display: grid; gap: 7px; padding: 8px; border-radius: var(--r-md); font-size: .82rem; color: var(--ink); text-align: center; transition: background .2s; } .themes .shape:hover { background: rgb(var(--hi) / .06); } .themes .shape i { position: relative; display: block; height: 46px; border-radius: 8px; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2); } .themes .shape i::before { content: ""; position: absolute; inset: 0 0 52%; background: color-mix(in oklab, var(--gold) 42%, transparent); } .themes .shape[aria-pressed="true"] i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); } .themes .sh-ticket::after { content: ""; position: absolute; inset: 0 auto 0 24%; border-inline-start: 1.5px dashed var(--line-2); } .themes .sh-poster { background: color-mix(in oklab, var(--gold) 26%, var(--surface-2)); } .themes .sh-glass::before { inset: 0; } .themes .sh-glass::after { content: ""; position: absolute; inset: auto 6px 5px; height: 15px; border-radius: 5px; background: rgb(var(--glass) / .85); box-shadow: 0 0 0 1px var(--line-2); } .themes .sh-manuscript { border-radius: 3px; outline: 3px double var(--line-2); outline-offset: -5px; } .themes .sh-manuscript::before { inset: 9px 9px 50%; } .themes .sh-dogear { clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .themes .sh-slant::before { inset: 0 0 34%; clip-path: polygon(0 0, 100% 0, 100% 64%, 0 100%); } .themes .sh-strip { background: none; box-shadow: none; } .themes .shape[aria-pressed="true"] .sh-strip { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); } .themes .sh-strip::before { inset: 0; background: repeating-linear-gradient(to left, color-mix(in oklab, var(--gold) 42%, transparent) 0 27%, transparent 27% 36.5%); } .cards[data-shape="dogear"] .card .card-foot { padding-inline-end: 50px; } :root[data-tone="light"] .card .sheen { background: linear-gradient(105deg, transparent 36%, rgb(0 0 0 / .035) 42%, rgb(255 255 255 / .55) 48%, rgb(0 0 0 / .03) 55%, transparent 62%); } /* ---------- the cards alive: the sky in layers that drift at their own pace, its eight-pointed stars turning slowly, a shooting star crossing now and then, the medallion's star and ring turning against each other. The cards themselves stay still (moving them by fractions of a pixel blurs them). Nothing flashes or pulses. ---------- */ .card .band .dots { animation: dotsDrift 46s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -3.1s); } @keyframes dotsDrift { to { transform: translate(22px, -8px); } } .card .band .bigs path { transform-box: fill-box; transform-origin: center; animation: petalsTurn 26s linear infinite; } .card .band .bigs path:nth-child(even) { animation-direction: reverse; animation-duration: 34s; } .card .band .mstar { transform-box: view-box; transform-origin: 504px 104px; animation: petalsTurn 110s linear infinite reverse; } .card .band .meteor { opacity: 0; animation: meteor 14s linear infinite; animation-delay: var(--md, 0s); } @keyframes meteor { 0% { opacity: 0; transform: translate(0, 0); } 2% { opacity: 1; } 8% { opacity: 0; transform: translate(-210px, 78px); } 100% { opacity: 0; transform: translate(-210px, 78px); } } @media (prefers-reduced-motion: reduce) { .card .band .dots, .card .band .bigs path, .card .band .mstar, .card .band .meteor { animation: none; } } /* ---------- the strip: dragged with the mouse, turned by the wheel, its edges fading out ---------- */ .cards[data-shape="strip"] { cursor: grab; user-select: none; -webkit-user-select: none; scrollbar-width: none; --mr: transparent; --ml: transparent; -webkit-mask-image: linear-gradient(to left, var(--mr) 0, #000 36px, #000 calc(100% - 36px), var(--ml) 100%); mask-image: linear-gradient(to left, var(--mr) 0, #000 36px, #000 calc(100% - 36px), var(--ml) 100%); } .cards[data-shape="strip"][data-edge~="start"] { --mr: #000; } .cards[data-shape="strip"][data-edge~="end"] { --ml: #000; } .cards[data-shape="strip"]::-webkit-scrollbar { display: none; } .cards[data-shape="strip"].dragging { cursor: grabbing; scroll-snap-type: none; } .cards[data-shape="strip"] .card { -webkit-user-drag: none; } .cards[data-shape="strip"] .card svg { pointer-events: none; } /* ---------- the panel of this hour, dressed like the cards: the chapter's night sky behind it, its living medallion, and the stops of the day each in its chapter's colour. app.js sets --deep and --fg. ---------- */ .now-label i { animation: none; box-shadow: none; } .now-main { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); --ink: var(--fg); --gold: var(--fg); --gold-2: var(--fg); --gold-ink: var(--deep); --muted: color-mix(in oklab, var(--fg) 80%, transparent); --faint: color-mix(in oklab, var(--fg) 62%, transparent); --line: color-mix(in oklab, var(--fg) 14%, transparent); --line-2: color-mix(in oklab, var(--fg) 26%, transparent); } .now-sky { position: absolute; inset: 0; z-index: -1; background: var(--deep); } .now-sky-l { position: absolute; inset: 0; } .now-sky-l svg { display: block; width: 100%; height: 100%; } /* a shade behind the words, so they read over the stars */ .now-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, color-mix(in oklab, var(--deep) 78%, transparent) 0%, color-mix(in oklab, var(--deep) 40%, transparent) 45%, transparent 75%); } .now-text .meter { background: color-mix(in oklab, var(--fg) 16%, transparent); } .now-emblem { color: inherit; } .now-emblem .petals, .now-emblem .mstar { transform-box: fill-box; transform-origin: center; } .now-emblem .petals { animation: petalsTurn 60s linear infinite; } .now-emblem .mstar { animation: petalsTurn 110s linear infinite reverse; } .now-sky .sky { animation: skyDrift 34s ease-in-out infinite alternate; } .now-sky .dots { animation: dotsDrift 46s ease-in-out infinite alternate; } .now-sky .bigs path { transform-box: fill-box; transform-origin: center; animation: petalsTurn 26s linear infinite; } .now-sky .bigs path:nth-child(even) { animation-direction: reverse; animation-duration: 34s; } .now-sky .meteor { opacity: 0; animation: meteor 14s linear infinite; animation-delay: var(--md, 0s); } /* the stops of the day, each ringed in its chapter's colour; the chosen one filled with that chapter's sky */ .stop .stop-ico { color: color-mix(in oklab, var(--c) 72%, var(--ink)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent) inset, 0 0 0 5px var(--surface); } .stop:hover .stop-ico { box-shadow: 0 0 0 1.5px var(--c) inset, 0 0 0 5px var(--surface); } .stop.past .stop-ico { color: color-mix(in oklab, var(--c) 45%, var(--faint)); } .stop.is-now .stop-ico { color: var(--c); box-shadow: 0 0 0 2px var(--c) inset, 0 0 0 5px var(--surface); } .stop[aria-selected="true"] .stop-ico { background: var(--cd); color: var(--cf); box-shadow: 0 0 0 1.5px var(--c) inset, 0 0 0 5px var(--surface), 0 10px 22px -10px var(--c); } .stop[aria-selected="true"] .stop-nm { color: var(--ink); } .stop .stop-ico svg { transition: transform .6s var(--ease); } .stop[aria-selected="true"] .stop-ico svg { transform: scale(1.12); } @media (prefers-reduced-motion: reduce) { .now-emblem .petals, .now-emblem .mstar, .now-sky .sky, .now-sky .dots, .now-sky .bigs path, .now-sky .meteor { animation: none; } } /* the invitation: its four signs each in a chapter's colour, fanning apart when the pointer comes */ .hal-faces i { background: var(--cd); color: var(--c); box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px color-mix(in oklab, var(--c) 45%, transparent); transition: transform .5s var(--ease), margin .5s var(--ease); } .hal-invite:hover .hal-faces i { margin-inline-start: -3px; transform: translateY(-2px) rotate(-6deg); } .hal-invite:hover .hal-faces i:first-child { margin-inline-start: 0; } /* ---------- «كيف حالك؟»: each state a small night sky of its own colour ---------- */ .hal-modal-box { width: min(100%, 900px); } .hal-modal-box .hal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 152px), 1fr)); gap: 12px; } .hal-modal-box .hal { isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-height: 156px; padding: 14px 14px 13px; background: var(--deep); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg) 14%, transparent); } .hal-modal-box .hal::after { display: none; } .hal-modal-box .hal:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 70%, transparent), 0 16px 30px -18px rgb(0 0 0 / .7); } .hal-modal-box .hal b { color: var(--fg); } .hal-modal-box .hal small { color: color-mix(in oklab, var(--fg) 68%, transparent); } .hal-sky { position: absolute; inset: 0; z-index: -1; } .hal-sky svg { display: block; width: 100%; height: 100%; } .hal-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--deep) 22%, color-mix(in oklab, var(--deep) 35%, transparent) 62%, transparent); } .hal-sky svg { will-change: transform; transform: scale(1.14); animation: halGlide 26s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2s); } @keyframes halGlide { from { transform: scale(1.14) translate(-10px, 3px); } to { transform: scale(1.14) translate(10px, -3px); } } .hal-sky .meteor { opacity: 0; animation: meteor 16s linear infinite; animation-delay: var(--md, 0s); } .hal-em { position: relative; width: 46px; height: 46px; margin-bottom: auto; display: grid; place-items: center; color: var(--c); } .hal-em .hs { position: absolute; inset: 0; width: 100%; height: 100%; fill: color-mix(in oklab, var(--deep) 70%, transparent); stroke: currentColor; stroke-width: 1.2; stroke-opacity: .8; transition: transform 1.2s var(--ease); } .hal-modal-box .hal:hover .hal-em .hs { transform: rotate(45deg); } .hal-em > svg:not(.hs) { position: relative; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); } .hal-modal-box .hal:hover .hal-em > svg:not(.hs) { transform: scale(1.12); } .hal-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .12) 48%, rgb(255 255 255 / .04) 54%, transparent 64%); transform: translateX(110%); } .hal-modal-box .hal:hover .hal-sheen { transform: translateX(-110%); transition: transform 1.2s var(--ease-io); } :root[data-tone="light"] .hal-sheen { background: linear-gradient(105deg, transparent 36%, rgb(0 0 0 / .035) 42%, rgb(255 255 255 / .55) 48%, rgb(0 0 0 / .03) 55%, transparent 62%); } @media (prefers-reduced-motion: reduce) { .hal-sky svg, .hal-sky .meteor { animation: none; } .hal-sheen { display: none; } } /* the last row of states sits centred instead of leaving a hole */ .hal-modal-box .hal-grid { display: flex; flex-wrap: wrap; justify-content: center; } .hal-modal-box .hal { flex: 0 1 calc((100% - 3 * 12px) / 4); } @media (max-width: 720px) { .hal-modal-box .hal { flex-basis: calc((100% - 2 * 12px) / 3); } } @media (max-width: 520px) { .hal-modal-box .hal { flex-basis: calc((100% - 12px) / 2); min-height: 140px; } } /* the day's completion: one card, one «تقبّل الله منك» (the ornament above steps aside once all is done) */ .z-end.all { display: none; } .complete { position: relative; overflow: hidden; padding: 42px 24px 36px; display: grid; justify-items: center; gap: 4px; background: radial-gradient(60% 90% at 50% 0%, rgb(var(--hi) / .07), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); } .complete::before { content: ""; position: absolute; top: 0; inset-inline: 0; margin-inline: auto; width: 72px; height: 2px; border-radius: 0 0 2px 2px; background: var(--gold); } .complete svg { width: 46px; height: 46px; margin: 0 0 12px; fill: none; stroke: var(--gold-2); stroke-width: 1.1; stroke-linejoin: round; animation: none; stroke-dasharray: 400; stroke-dashoffset: 400; } .complete:not([hidden]) { animation: cRise .7s cubic-bezier(.2, 1.15, .3, 1) both; } .complete:not([hidden]) svg { animation: cDraw 1.8s .2s cubic-bezier(.4, 0, .2, 1) forwards; } .complete p { font: 1.6rem/1.6 var(--text); color: var(--ink); } .complete small { margin-top: 2px; font: 500 .9rem var(--ui); color: var(--gold-2); } @keyframes cRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes cDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .complete:not([hidden]), .complete:not([hidden]) svg { animation: none; stroke-dashoffset: 0; } } /* a section inside a chapter: who the words are for, or the moment they belong to */ .z-sec { list-style: none; display: flex; align-items: center; gap: 14px; margin: 34px 4px 4px; font: 500 .86rem var(--ui); color: var(--gold-2); } .z-sec:first-child { margin-top: 6px; } .z-sec::before, .z-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, color-mix(in oklab, var(--gold) 55%, transparent), transparent); } .z-sec::after { background: linear-gradient(to left, color-mix(in oklab, var(--gold) 55%, transparent), transparent); } .z-sec span { display: inline-flex; align-items: center; gap: 8px; } .z-sec span::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); border: 1px solid currentColor; } /* the reading dock: what was said today, not how much is left */ .dock .prog { gap: 8px; } .prog-dots { display: inline-flex; gap: 4px; } .prog-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: dotIn .5s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes dotIn { from { transform: scale(0); } } @media (prefers-reduced-motion: reduce) { .prog-dots i { animation: none; } } /* ================================================================================================= MOTION: one physical language for the whole site. Things have weight: they rise and settle on a spring (a small overshoot, then rest), slide with momentum, and give a little when pressed. Nothing pulses or floats on a loop; motion answers the reader, then stops. ================================================================================================= */ :root { --spring: linear(0, .013 1%, .052 2.1%, .2 4.5%, .43 7.6%, .7 11.5%, .87 14.6%, 1 18%, 1.07 21.5%, 1.09 24.5%, 1.08 28%, 1.04 33%, 1 39%, .985 46%, .99 58%, 1); --glide: cubic-bezier(.2, .9, .25, 1); --give: cubic-bezier(.3, 1.6, .5, 1); } .btn, .tool, .icon-btn, .chip, .q-side-btn, .q-side-open, .dock a, .dock button { transition-timing-function: var(--glide); } .btn:active, .tool:active, .icon-btn:active, .chip:active, .q-side-btn:active, .q-side-open:active, .dock a:active, .dock button:active { transform: scale(.96); transition: transform .12s ease-out; } .btn, .tool, .icon-btn, .chip, .q-side-btn, .q-side-open { transition: transform .5s var(--spring), background .25s, color .25s, box-shadow .25s; } /* ================================================================================================= INSIDE A CHAPTER: the chapter's own colour runs through its page (--ch line, --chw wash), so the reader is somewhere, not in a grey room. The start edge of each card fills as it is counted. ================================================================================================= */ .list .z { position: relative; overflow: hidden; } .list .z .z-top::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(to bottom, var(--ch) calc(var(--p, 0) * 100%), color-mix(in oklab, var(--ch) 22%, transparent) 0); transition: background .6s var(--glide); } .list .z.next { box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklab, var(--ch) 60%, transparent) inset; } .list .z.done { background: linear-gradient(160deg, color-mix(in oklab, var(--chw) 55%, transparent), transparent 70%), var(--surface); } .list .counter .ring .fg { stroke: var(--ch); } .list .z.done .counter { background: var(--ch); color: #fff; } :root[data-tone="light"] .list .z.done .counter { color: #fff; } .list .z.done .counter small { color: #fff; } .list .z.done .counter .ring .fg { stroke: #fff; } .list .z .medal svg { color: var(--ch); } .list .z-fadl { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--ch) 70%, transparent), inset 0 0 0 1px rgb(var(--hi) / .06); } .list .z-fadl .lab { color: color-mix(in oklab, var(--ch) 55%, var(--ink)); } .list .z-sec { color: color-mix(in oklab, var(--ch) 50%, var(--ink)); } .list .z-sec::before { background: linear-gradient(to right, color-mix(in oklab, var(--ch) 70%, transparent), transparent); } .list .z-sec::after { background: linear-gradient(to left, color-mix(in oklab, var(--ch) 70%, transparent), transparent); } .list .z-sec span::before { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 35%, transparent); } .list::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 50% 0%, color-mix(in oklab, var(--ch) 16%, transparent), transparent 70%); } @media (prefers-reduced-motion: no-preference) { .to-rise { opacity: 0; transform: translateY(28px); } .to-rise.risen { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .9s var(--spring); } .z.done .z-text { transition: opacity .6s ease-out; } } .z-read { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .z-read-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 14px; border-radius: 12px; font: 500 .86rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--ch, var(--gold)) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch, var(--gold)) 45%, transparent); transition: background .25s, transform .5s var(--spring); } .z-read-btn:hover { background: color-mix(in oklab, var(--ch, var(--gold)) 24%, transparent); } .z-read-btn:active { transform: scale(.96); } .z-read-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* no arrows in the reading dock: the next chapter offers itself only once this one is done */ .dock .dock-next { gap: 8px; color: var(--gold-ink); background: var(--gold); animation: cRise .6s var(--spring) both; } .dock .dock-next[hidden] { display: none; } .dock .dock-next:hover { background: var(--gold-2); color: var(--gold-ink); } .dock .dock-next small { font-size: .7rem; opacity: .75; } .dock .dock-next b { font-weight: 600; } /* the chapter's colour stays on the small things (edge, counter, section names), not washed over the page */ .list::before { display: none; } .list .z.done { background: color-mix(in oklab, var(--surface) 75%, var(--bg)); } .list .z-fadl { box-shadow: inset 0 0 0 1px var(--line); } /* the white theme: the background lattice is a whisper, not a pattern */ :root[data-tone="light"] body::before { opacity: .35; } :root[data-tone="light"] .kufic .kf .b { stroke-opacity: .06; } :root[data-tone="light"] .kufic .kf .j { fill-opacity: .05; } /* ================================================================================================= FLAT: a true black, and no gradients on the page or its surfaces. Every panel is one plain colour; only the chapters' own night-sky art keeps its shading. ================================================================================================= */ :root { --bg: #000; --bg-2: #050505; --surface: #0c0c0c; --surface-2: #131313; --surface-3: #1e1e1e; --gold-ink: #000; } body, body.reading { background: var(--bg) !important; } .glow, .now::before, .now2::before, .hal::after, .calm-halo { display: none !important; } .btn-gold { background: var(--gold); box-shadow: none; } .now, .now2, .misbaha, .qk, .qk:hover, .hal, .hal-v, .hal-d, .hal-bar, .season, .hal-invite, .hal-invite:hover, .complete, .z, .z.next, .list .z.done, .mis-panel, .tasbih, .tasbih:hover { background: var(--surface) !important; } .z.next, .hal-invite:hover, .qk:hover { background: var(--surface-2) !important; } .seg .thumb { background: var(--gold); } .meter span { background: var(--gold); } /* ================================================================================================= A plain black behind every page: the lattice and the scattered drawings are gone (the moving field of shadows was tried and rejected as dizzying). ================================================================================================= */ .kufic, .scene { display: none !important; } body::before { display: none !important; } /* ================================================================================================= THE DHIKR SHEET, simplified: the words lead. A small quiet line above them (number, how many times, copy), the text larger with room to breathe, no ornament under it, the virtue as plain text, and one clean line at the foot with the source and the counter. ================================================================================================= */ .list .z { padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 34px); border-radius: 22px; } .list .z-top { margin-bottom: 6px; gap: 8px; } .list .medal { width: 30px; height: 30px; opacity: .75; } .list .medal text { font-size: 17px; } .list .reps { height: auto; padding: 0; background: none !important; box-shadow: none !important; font-size: .8rem; color: var(--faint); } .list .z-actions .icon-btn { background: none; color: var(--faint); } .list .z-actions .icon-btn:hover { background: rgb(var(--hi) / .06); color: var(--ink); } .list .z-text { margin: 10px 0 0; font-size: calc(clamp(1.55rem, 1.2rem + 1.2vw, 2.15rem) * var(--read)); line-height: 2.15; color: var(--ink); } .list .z-sep { display: none; } .list .z-fadl { margin: 14px 0 0; padding: 0; background: none !important; box-shadow: none !important; } .list .z-fadl .lab { font-size: .74rem; color: var(--faint); } .list .z-fadl p { margin-top: 2px; color: var(--muted); } .list .z-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); align-items: center; } .list .z-foot .src { font-size: .78rem; color: var(--faint); } .list .counter { height: 46px; padding-inline: 8px 16px; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line-2); } .list .counter:hover { box-shadow: inset 0 0 0 1px var(--ink); } .list .z.done .z-text { opacity: .45; } .list .z.done .z-fadl { opacity: .6; } .list .z-foot { flex-wrap: nowrap; flex-direction: row; } .list .z-foot .src { min-width: 0; flex: 1; } /* ================================================================================================= PHONE SIZE: a lighter top bar and menus, and dhikr sheets that fit more on the screen. ================================================================================================= */ @media (max-width: 560px) { .nav { padding-top: 8px; } .nav-pill { gap: 6px; padding: 5px; padding-inline-start: 10px; border-radius: 14px; } .nav-pill .logo svg { width: 24px; height: 24px; } .nav-pill .logo .t { height: 22px; } .search { height: 34px; padding-inline: 10px; gap: 6px; border-radius: 10px; } .search input { font-size: .84rem; } .search svg { width: 15px; height: 15px; } .theme-btn, .snd-btn, .menu-btn, .quran-btn { width: 34px !important; height: 34px !important; border-radius: 10px; } .theme-btn svg, .snd-btn svg, .menu-btn svg, .quran-btn svg { width: 16px; height: 16px; } /* the chapters menu and the colours panel */ .themes { padding: 10px; margin-top: 6px; border-radius: 16px; } .sheet { grid-template-columns: repeat(2, 1fr); gap: 2px; } .sheet h3 { margin: 6px 8px 0; font-size: .74rem; } .sheet a { padding: 7px 9px; font-size: .84rem; border-radius: 9px; } /* the dhikr sheets */ .list { gap: 12px; width: calc(100% - 20px); } .list .z { padding: 16px 16px 14px; border-radius: 18px; } .list .z-top { margin-bottom: 2px; } .list .medal { width: 24px; height: 24px; } .list .z-actions .icon-btn { width: 30px; height: 30px; } .list .z-text { font-size: calc(1.3rem * var(--read)); line-height: 2; margin-top: 6px; } .list .z-fadl { margin-top: 8px; } .list .z-fadl p { font-size: calc(.95rem * var(--read)); line-height: 1.75; } .list .z-foot { margin-top: 12px; padding-top: 10px; } .list .counter { height: 38px; padding-inline: 6px 12px; } .list .counter .ring { width: 26px; height: 26px; } } @media (max-width: 560px) { .sheet a { line-height: 1.35; padding: 8px 10px; } } /* the chapters menu: groups of small chips instead of a dense grid of names */ .sheet { display: block !important; max-height: min(72vh, 560px); overflow: auto; overscroll-behavior: contain; padding: 14px !important; } .sh-g + .sh-g { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .sheet .sh-g h3 { margin: 0 4px 8px; font: 500 .74rem var(--ui); color: var(--faint); } .sh-list { display: flex; flex-wrap: wrap; gap: 6px; } .sheet a.sh-c { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 11px; border-radius: 999px; line-height: 1; font: 500 .86rem var(--ui); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; } .sheet a.sh-c:hover { background: rgb(var(--hi) / .06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); } .sheet a.sh-c[aria-current] { background: var(--gold); color: var(--gold-ink); box-shadow: none; } .sh-c i { display: grid; } .sh-c svg { width: 15px; height: 15px; fill: none; stroke: var(--c, currentColor); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sh-c[aria-current] svg { stroke: currentColor; } @media (max-width: 560px) { .sheet a.sh-c { height: 32px; padding: 0 11px 0 9px; font-size: .8rem; gap: 6px; } .sh-c svg { width: 13px; height: 13px; } .sh-list { gap: 5px; } } /* ================================================================================================= THE DHIKR SHEET, dressed: a page in a fine double frame with a small star set in its top edge, the words centred like a written page, an ornament of the chapter's colour under them, the virtue set off by a coloured rule, and a round counter whose ring fills as you count. ================================================================================================= */ .list .z { position: relative; overflow: visible; padding: clamp(30px, 3.4vw, 42px) clamp(24px, 3.6vw, 44px) clamp(22px, 2.6vw, 30px); border-radius: 24px; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; } .list .z .z-top::before { display: none; } /* the inner rule of the frame */ .list .z::after { content: "" !important; display: block !important; position: absolute; inset: 9px; border-radius: 17px; pointer-events: none; border: 1px solid color-mix(in oklab, var(--ch, var(--gold)) 26%, transparent); background: none !important; opacity: 1 !important; animation: none !important; } /* the small star set into the top of the frame */ .list .z::before { content: "" !important; display: block !important; position: absolute; top: 2px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; background: var(--ch, var(--gold)) !important; opacity: .9 !important; animation: none !important; transform: none !important; clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); } .list .z.next { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 70%, transparent) !important; } .list .z.next::after { border-color: color-mix(in oklab, var(--ch) 45%, transparent); } /* the line above the words */ .list .z-top { margin-bottom: 4px; } .list .medal { width: 34px; height: 34px; opacity: 1; color: var(--ch); } .list .reps { padding: 3px 11px; height: auto; border-radius: 999px; font-size: .78rem; color: color-mix(in oklab, var(--ch) 45%, var(--ink)); background: color-mix(in oklab, var(--ch) 14%, transparent) !important; box-shadow: none !important; } /* the words */ .list .z-text { margin: 14px 0 0; text-align: center; font-size: calc(clamp(1.6rem, 1.25rem + 1.2vw, 2.2rem) * var(--read)); line-height: 2.2; color: var(--ink); } .list .z-text .basmala { color: color-mix(in oklab, var(--ch) 40%, var(--muted)); } /* the ornament under them */ .list .z-sep { display: flex !important; align-items: center; justify-content: center; gap: 10px; margin: 18px auto 0; width: min(70%, 320px); color: var(--ch); } .list .z-sep span { flex: 1; height: 1px; opacity: .6; } .list .z-sep i { width: 9px; height: 9px; background: var(--ch); transform: none; border: 0; clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); } /* the virtue */ .list .z-fadl { margin: 18px 0 0; padding: 4px 0 4px; padding-inline-start: 14px; border-inline-start: 2px solid var(--ch); border-radius: 0; background: none !important; box-shadow: none !important; } .list .z-fadl .lab { font-size: .76rem; color: color-mix(in oklab, var(--ch) 50%, var(--ink)); } .list .z-fadl .lab svg { fill: var(--ch); } .list .z-fadl p { margin-top: 4px; color: var(--muted); } /* the foot: source, and a round counter */ .list .z-foot { margin-top: 22px; padding-top: 0; border-top: 0; align-items: center; } .list .z-foot .src { font-size: .78rem; color: var(--faint); } .list .counter { position: relative; width: 66px; height: 66px; padding: 0; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; background: color-mix(in oklab, var(--ch) 10%, transparent); box-shadow: none; } .list .counter .ring { position: absolute; inset: 0; width: 100%; height: 100%; } .list .counter .ring circle { stroke-width: 2; } .list .counter .ring .bg { stroke: color-mix(in oklab, var(--ch) 22%, transparent); } .list .counter .ring .fg { stroke: var(--ch); } .list .counter b { position: relative; font-size: 1.15rem; line-height: 1; } .list .counter small { position: relative; font-size: .62rem; line-height: 1.4; color: var(--faint); } .list .counter:hover { background: color-mix(in oklab, var(--ch) 18%, transparent); box-shadow: none; } .list .z.done .counter { background: var(--ch); color: #fff; } .list .z.done .counter small { color: rgb(255 255 255 / .8); } .list .z.done .counter .ring .fg, .list .z.done .counter .ring .bg { stroke: rgb(255 255 255 / .6); } .list .z.done .z-text { opacity: .55; } @media (max-width: 560px) { .list .z { padding: 26px 18px 18px; border-radius: 20px; } .list .z::after { inset: 7px; border-radius: 14px; } .list .z-text { font-size: calc(1.32rem * var(--read)); line-height: 2.05; margin-top: 8px; } .list .z-sep { margin-top: 12px; } .list .z-fadl { margin-top: 12px; } .list .z-foot { margin-top: 14px; } .list .counter { width: 56px; height: 56px; } .list .medal { width: 28px; height: 28px; } } .list .z::before { right: auto !important; inset-inline-end: auto; bottom: auto !important; } .sheet[hidden] { display: none !important; } /* the floating glass: the wide card takes the proportions of its sky, so no dark band is left under it */ .cards[data-shape="glass"] .card.feat { aspect-ratio: 600 / 260; min-height: 0; } .list .z::before { inset: 2px auto auto 50% !important; } /* ================================================================================================= THE DHIKR SHEET, refined (keeps the framed sheet; the counter returns to its pill) ================================================================================================= */ /* sizes inside a chapter: a smaller title plate, a narrower column, words sized to read, not to shout */ .cartouche { width: min(100%, 500px); } .read-head .moment { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); margin-top: 8px; } .read-tools { margin-top: 14px; } .list { width: min(100% - 2 * var(--gutter), 820px); gap: 22px; } .list .z-text { font-size: calc(clamp(1.42rem, 1.12rem + 1vw, 1.92rem) * var(--read)); line-height: 2.1; } .list .z-fadl p { font-size: calc(1.02rem * var(--read)); } /* the counter: the pill it was, a ring and the count side by side, in the chapter colour */ .list .counter { position: relative; width: auto; height: 48px; padding: 0 16px 0 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; place-items: initial; background: color-mix(in oklab, var(--ch) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 30%, transparent); transition: background .3s, box-shadow .3s, transform .5s var(--spring); } .list .counter .ring { position: static; inset: auto; width: 34px; height: 34px; } .list .counter .ring circle { stroke-width: 3; } .list .counter .ring .fg { transition: stroke-dashoffset .7s var(--spring); } .list .counter b { font-size: 1.12rem; line-height: 1; display: inline-block; } .list .counter small { font-size: .8rem; line-height: 1; color: var(--muted); } .list .counter:hover { background: color-mix(in oklab, var(--ch) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 55%, transparent); } .list .counter:active { transform: scale(.95); } .list .z.done .counter { background: var(--ch); box-shadow: none; color: #fff; } .list .z.done .counter small { color: rgb(255 255 255 / .85); } @media (max-width: 560px) { .list .counter { width: auto; height: 42px; padding: 0 13px 0 6px; } .list .counter .ring { width: 28px; height: 28px; } } /* ================================================================================================= SOFT INTERACTIONS. Each answers something you do, once, and settles; nothing loops or pulses. ================================================================================================= */ /* the sheet notices you: its inner frame brightens and draws in, the star turns an eighth */ .list .z::after { transition: border-color .5s ease, inset .5s var(--spring); } .list .z::before { transition: rotate .8s var(--spring), opacity .4s; } @media (hover: hover) { .list .z:hover::after { border-color: color-mix(in oklab, var(--ch, var(--gold)) 55%, transparent); inset: 7px; } .list .z:hover::before { rotate: 45deg; } } /* a finished sheet: its inner frame turns to a dashed line */ .list .z.done { transition: background .6s ease; } .list .z.done::after { border-style: dashed; } @media (prefers-reduced-motion: no-preference) { /* the ornament draws out and the virtue rule appears when the sheet comes into view */ .list .z.to-rise .z-sep span { transform: scaleX(0); transition: transform 1s .25s var(--glide); } .list .z.to-rise .z-sep span:first-child { transform-origin: left; } .list .z.to-rise .z-sep span:last-child { transform-origin: right; } .list .z.risen .z-sep span { transform: none; } .list .z.to-rise .z-fadl { border-inline-start-color: transparent; transition: border-color .8s .4s ease; } .list .z.risen .z-fadl { border-inline-start-color: var(--ch); } /* the small line above the words arrives just after the sheet */ .list .z.to-rise .z-top > * { opacity: 0; transition: opacity .6s .2s ease; } .list .z.risen .z-top > * { opacity: 1; } } /* the copy button answers with a small turn */ .list .icon-btn { transition: background .2s, color .2s, transform .45s var(--spring); } .list .icon-btn:active { transform: scale(.88) rotate(-8deg); } /* the medal tick of a finished sheet springs in */ .list .z.done .medal .tick { animation: tickIn .6s var(--spring) both; } @keyframes tickIn { from { transform: scale(.4); opacity: 0; } } @media (prefers-reduced-motion: no-preference) { /* chips of the chapters menu arrive one after another */ .sheet:not([hidden]) .sh-c { animation: chipIn .5s var(--spring) both; } .sheet:not([hidden]) .sh-g:nth-child(2) .sh-c { animation-delay: .06s; } .sheet:not([hidden]) .sh-g:nth-child(3) .sh-c { animation-delay: .12s; } .sheet:not([hidden]) .sh-c:nth-child(2) { animation-delay: .02s; } .sheet:not([hidden]) .sh-c:nth-child(3) { animation-delay: .04s; } .sheet:not([hidden]) .sh-c:nth-child(4) { animation-delay: .06s; } .sheet:not([hidden]) .sh-c:nth-child(5) { animation-delay: .08s; } .sheet:not([hidden]) .sh-c:nth-child(n+6) { animation-delay: .1s; } /* the colours panel opens the same way */ .themes:not([hidden]) > * { animation: chipIn .5s var(--spring) both; } .themes:not([hidden]) > :nth-child(2) { animation-delay: .03s; } .themes:not([hidden]) > :nth-child(n+3) { animation-delay: .06s; } /* the menus themselves drop in with weight */ .sheet:not([hidden]), .themes:not([hidden]), .results:not([hidden]) { animation: dropIn .45s var(--spring) both; transform-origin: top center; } } @keyframes chipIn { from { opacity: 0; transform: translateY(6px); } } @keyframes dropIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } } /* chips and tools lift a pixel under the pointer */ @media (hover: hover) { .sheet a.sh-c, .tool, .btn, .chip, .q-chip, .q-side-btn, .q-side-open { transition: transform .4s var(--spring), background .2s, box-shadow .2s, color .2s; } .sheet a.sh-c:hover, .tool:hover, .btn:hover, .chip:hover, .q-chip:hover, .q-side-btn:hover, .q-side-open:hover { transform: translateY(-1px); } } /* a message slides up on a spring */ .toast { transition: opacity .3s ease, transform .55s var(--spring); } /* focus is a soft ring */ :focus-visible { outline: 2px solid color-mix(in oklab, var(--gold) 70%, transparent); outline-offset: 3px; transition: outline-offset .3s var(--spring); } /* ================================================================================================= MOVING BETWEEN PAGES: only the content moves; the bar above stays still. It fades out lifting a little, and the new page rises into place. ================================================================================================= */ #app { view-transition-name: page; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-old(page) { animation: pgOut .24s cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(page) { animation: pgIn .6s cubic-bezier(.2, .9, .25, 1) both; } @keyframes pgOut { to { opacity: 0; transform: translateY(-6px); } } @keyframes pgIn { from { opacity: 0; transform: translateY(14px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(page), ::view-transition-new(page) { animation: none; } } .list .z .counter { display: inline-flex !important; align-items: center !important; justify-content: center; } /* ================================================================================================= THE DHIKR SHEET, second pass: one axis for everything (the middle), long passages set like a printed page, the virtue under a short rule instead of a side bar, one frame line not two, and a star large enough to read as a jewel set in the frame. ================================================================================================= */ /* long passages: justified lines with the last line centred, as in a printed book; short ones stay centred */ .list .z-text { text-align: justify; text-align-last: center; text-justify: inter-word; hyphens: none; } .list .z-text .basmala { text-align: center; text-align-last: center; } /* the virtue: centred on the same axis, opened by a short rule and its label, readable size */ .list .z-fadl { margin: 20px auto 0; max-width: 60ch; padding: 0 !important; border: 0 !important; text-align: center; } .list .z-fadl .lab { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .74rem; letter-spacing: .02em; } .list .z-fadl .lab::before, .list .z-fadl .lab::after { content: ""; width: 26px; height: 1px; background: color-mix(in oklab, var(--ch) 60%, transparent); } .list .z-fadl .lab svg { display: none; } .list .z-fadl p { margin-top: 6px; font-size: calc(1.08rem * var(--read)); line-height: 1.9; color: color-mix(in oklab, var(--ink) 72%, var(--bg)); } /* the ornament: a little more air, matching the virtue rule */ .list .z-sep { margin-top: 16px; width: min(46%, 220px); } /* the frame: the outer edge stays a quiet line; the "next" sheet speaks through its inner rule only */ .list .z, .list .z.next { box-shadow: inset 0 0 0 1px var(--line) !important; } .list .z::after { border-color: color-mix(in oklab, var(--ch, var(--gold)) 30%, transparent); } .list .z.next::after { border-color: color-mix(in oklab, var(--ch) 75%, transparent); border-width: 1px; } /* the star: larger, set across the gap between the two lines */ .list .z::before { width: 18px !important; height: 18px !important; margin-left: -9px !important; top: 0 !important; inset: 0 auto auto 50% !important; } .list .z.next::before { opacity: 1 !important; } /* short sheets do not stand tall and empty */ .list .z { padding-block: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 24px); } .list .z-text { margin-top: 8px; } /* the foot sits a little apart, on the same quiet line as the frame */ .list .z-foot { margin-top: 18px; } .list .z-foot .src { display: inline-flex; align-items: center; gap: 6px; } /* the next tag and reps read as one small group */ .list .next-tag { height: 24px; padding-inline: 10px; font-size: .74rem; border-radius: 999px; background: var(--ch) !important; color: #fff !important; } @media (max-width: 560px) { .list .z-text { text-align: justify; text-align-last: center; } .list .z-fadl { margin-top: 14px; } .list .z-fadl p { font-size: calc(.98rem * var(--read)); } .list .z::before { width: 15px !important; height: 15px !important; margin-left: -7.5px !important; } } .list .z::before { width: 20px !important; height: 20px !important; margin-left: -10px !important; background: color-mix(in oklab, var(--ch, var(--gold)) 65%, var(--ink)) !important; opacity: 1 !important; } /* the two small stars (top of the frame, middle of the ornament): a solid eight-point star of two squares, crisp at any size */ .list .z::before, .list .z-sep i { clip-path: none !important; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%20transform%3D%22rotate(45%2010%2010)%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%20transform%3D%22rotate(45%2010%2010)%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; } .list .z::before { width: 18px !important; height: 18px !important; margin-left: -9px !important; top: 1px !important; inset: 1px auto auto 50% !important; } .list .z-sep i { width: 11px; height: 11px; } /* phones: justified lines open wide gaps between words, so the text keeps to its starting edge */ @media (max-width: 560px) { .list .z-text { text-align: start; text-align-last: auto; } } /* ================================================================================================= MORE SOFT INTERACTIONS (each happens once, in answer to you, then settles) ================================================================================================= */ @media (prefers-reduced-motion: no-preference) { /* a section name opens out when it comes into view: its lines extend from the label */ .z-sec.to-rise::before, .z-sec.to-rise::after { transform: scaleX(0); transition: transform 1s .15s var(--glide); } .z-sec.to-rise::before { transform-origin: right; } .z-sec.to-rise::after { transform-origin: left; } .z-sec.risen::before, .z-sec.risen::after { transform: none; } /* the diamond of a section name turns into place */ .z-sec.to-rise span::before { rotate: -45deg; transition: rotate .9s .2s var(--spring); } .z-sec.risen span::before { rotate: 0deg; } /* the virtue's two short rules draw out from its label */ .list .z.to-rise .z-fadl .lab::before, .list .z.to-rise .z-fadl .lab::after { transform: scaleX(0); transition: transform .8s .45s var(--glide); } .list .z.to-rise .z-fadl .lab::before { transform-origin: left; } .list .z.to-rise .z-fadl .lab::after { transform-origin: right; } .list .z.risen .z-fadl .lab::before, .list .z.risen .z-fadl .lab::after { transform: none; } /* the star in the ornament turns once into place */ .list .z.to-rise .z-sep i { rotate: -90deg; transition: rotate 1.1s .3s var(--spring); } .list .z.risen .z-sep i { rotate: 0deg; } /* the verse window's tafsir text crossfades when the tafsir is changed */ .q-tafsir p { animation: tfIn .45s ease both; } } @keyframes tfIn { from { opacity: 0; } } /* buttons of the verse window and reading tools give a little under the finger */ .qv-act, .qv-nav, .tool, .size button, .q-turn, .q-play { transition: transform .45s var(--spring), background .2s, color .2s, box-shadow .2s; } .qv-act:active, .qv-nav:active, .tool:active, .size button:active, .q-turn:active, .q-play:active { transform: scale(.9); } /* the chapter cards tilt a breath forward under a press */ .cards .card:active { transform: scale(.985); transition: transform .15s ease-out; } /* hovering a stop of the day lifts its icon a pixel */ @media (hover: hover) { .stop:hover .stop-ico { transform: translateY(-2px); } .stop-ico { transition: transform .45s var(--spring); } } /* the theme swatches answer a press */ .swatch, .themes .shape { transition: transform .45s var(--spring); } .swatch:active, .themes .shape:active { transform: scale(.94); } /* ================================================================================================= CALMER SHEET: fewer things on it. The ornament line goes, the repeated count at the top goes (the counter says it), the virtue becomes one soft tinted note, and the counter reads cleanly. ================================================================================================= */ .list .z-sep { display: none !important; } .list .z-top .reps { display: none; } /* the virtue: one soft note in the chapter's tint, its name leading the sentence */ .list .z-fadl { margin: 18px auto 0; max-width: 62ch; padding: 12px 18px !important; border-radius: 14px; text-align: center; background: color-mix(in oklab, var(--ch) 8%, transparent) !important; } .list .z-fadl .lab { display: none; } .list .z-fadl p { margin: 0; font-size: calc(1.04rem * var(--read)); line-height: 1.85; color: color-mix(in oklab, var(--ink) 78%, var(--bg)); } .list .z-fadl p::before { content: "فضله: "; font-family: var(--ui); font-size: .82em; font-weight: 600; color: color-mix(in oklab, var(--ch) 60%, var(--ink)); } /* the counter: the number sits inside its ring, the words beside it on one line with it */ .list .z .counter { gap: 10px; padding: 0 16px 0 6px; font-family: var(--ui); } .list .counter .ring { flex: none; } .list .counter b { position: absolute; inset-inline-start: 6px; width: 34px; text-align: center; font: 600 .95rem/34px var(--ui); top: 50%; margin-top: -17px; } .list .counter small { font: 500 .84rem/1 var(--ui); color: var(--ink); } .list .counter.one b { display: none; } .list .z.done .counter small { color: #fff; } .list .z.done .counter b { color: #fff; } @media (max-width: 560px) { .list .z .counter { padding: 0 13px 0 6px; } .list .counter b { width: 28px; font-size: .85rem; line-height: 28px; margin-top: -14px; } .list .z-fadl { padding: 10px 14px !important; margin-top: 12px; } } /* the press ripple stays inside its sheet (it is larger than the sheet, so the sheet must clip it) */ .list .z { overflow: hidden !important; } .list .z .ripple { background: color-mix(in oklab, var(--ch, var(--gold)) 16%, transparent); } /* ================================================================================================= THE COUNTER, finished: ring and count share one centre, the words sit beside them on the same line, the ring begins at the top and fills clockwise in the chapter's colour, and when the dhikr is complete the pill fills, the ring turns into a tick and the word says «تمّ». ================================================================================================= */ .list .z .counter { padding-block: 0; padding-inline: 6px 18px; gap: 10px; height: 46px; min-width: 104px; justify-content: flex-start; background: color-mix(in oklab, var(--ch) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 32%, transparent); } .list .counter .ring { width: 34px; height: 34px; transform: rotate(-90deg) scaleY(-1); } /* starts at the top and runs clockwise for a right-to-left reader */ .list .counter .ring circle { stroke-width: 2.6; } .list .counter .ring .bg { stroke: color-mix(in oklab, var(--ch) 22%, transparent); } .list .counter b { inset-inline-start: 6px; width: 34px; height: 34px; top: 50%; margin-top: -17px; line-height: 34px; text-align: center; font: 600 .98rem/34px var(--ui); color: var(--ink); } .list .counter small { font: 500 .86rem/1 var(--ui); color: var(--ink); white-space: nowrap; } /* done: a filled pill, a white tick where the ring was */ .list .z.done .counter { background: var(--ch); box-shadow: none; } .list .z.done .counter .ring { opacity: 0; } .list .z.done .counter b { font-size: 0; } .list .z.done .counter b::before { content: ""; position: absolute; inset: 9px; border: solid #fff; border-width: 0 0 2.4px 2.4px; width: 13px; height: 7px; margin: auto; inset: 0; transform: translateY(-2px) rotate(-45deg); animation: tickIn .5s var(--spring) both; } .list .z.done .counter small { color: #fff; font-weight: 600; } @media (max-width: 560px) { .list .z .counter { height: 40px; min-width: 92px; padding-inline: 5px 14px; } .list .counter .ring { width: 30px; height: 30px; } .list .counter b { inset-inline-start: 5px; width: 30px; height: 30px; margin-top: -15px; line-height: 30px; font-size: .9rem; } } .list .z.done .counter.one b { display: block; } /* ================================================================================================= ONE LINE, NOT TWO: the inner frame is gone. The sheet has a single edge; the star crowns it, and the chapter's colour lives in that edge: faint at rest, clearer for the next dhikr. Hover no longer moves anything: the edge warms to the chapter's colour and the star turns. ================================================================================================= */ .list .z::after { display: none !important; } .list .z { box-shadow: inset 0 0 0 1px var(--line-2) !important; transition: box-shadow .5s ease, background .6s ease; } .list .z.next { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 70%, transparent) !important; } .list .z.done { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 30%, transparent) !important; } @media (hover: hover) { .list .z:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 55%, transparent) !important; } } /* the star sits on the edge itself */ .list .z::before { top: -9px !important; inset: -9px auto auto 50% !important; } .list .z { overflow: visible !important; } /* with the edge open, the press ripple is held by a clip on the sheet's own layer instead */ .list .z .ripple { display: none; } .list .z:active { background: color-mix(in oklab, var(--ch) 6%, var(--surface)) !important; transition: background .1s; } /* ================================================================================================= A RING OF BEADS in place of the second line: fine dots along the inside of the edge, like the beads of a misbaha, in the chapter's colour; they brighten when you come near, nothing moves. ================================================================================================= */ .list .z::after { content: "" !important; display: block !important; position: absolute; inset: 8px !important; border-radius: 16px; pointer-events: none; border: 2px dotted color-mix(in oklab, var(--ch, var(--gold)) 32%, transparent) !important; background: none !important; transition: border-color .6s ease; } .list .z.next::after { border-color: color-mix(in oklab, var(--ch) 70%, transparent) !important; } .list .z.done::after { border-color: color-mix(in oklab, var(--ch) 20%, transparent) !important; border-style: dotted !important; } @media (hover: hover) { .list .z:hover::after { border-color: color-mix(in oklab, var(--ch) 60%, transparent) !important; } } @media (max-width: 560px) { .list .z::after { inset: 6px !important; border-radius: 14px; border-width: 1.5px !important; } } /* the press ripple, gentler: a faint wash of the chapter's colour that opens slowly and fades */ .z-ink { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; } .list .z > :not(.z-ink) { position: relative; z-index: 1; } .list .z .ripple { display: block !important; position: absolute; border-radius: 50%; background: color-mix(in oklab, var(--ch, var(--gold)) 12%, transparent); transform: scale(0); opacity: 1; animation: rippleSoft 1.25s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes rippleSoft { 60% { opacity: .9; } to { transform: scale(1); opacity: 0; } } .list .z:active { background: var(--surface) !important; } .list .z::after { border-width: 3px !important; inset: 7px !important; border-color: color-mix(in oklab, var(--ch, var(--gold)) 26%, transparent) !important; } .list .z.next::after { border-color: color-mix(in oklab, var(--ch) 55%, transparent) !important; } @media (max-width: 560px) { .list .z::after { border-width: 2.5px !important; inset: 6px !important; } } /* no inner line at all: in its place the chapter's own emblem, large and very faint, rests in the sheet's lower corner like a watermark (each chapter its own mark) */ .list .z::after { content: "" !important; display: block !important; position: absolute; inset: auto auto 14px 14px !important; width: 120px; height: 120px; border: 0 !important; border-radius: 0; pointer-events: none; background: var(--ch, var(--gold)) !important; opacity: .07; -webkit-mask: var(--emb) center / contain no-repeat; mask: var(--emb) center / contain no-repeat; transition: opacity .6s ease; } .list .z.next::after { opacity: .12; } .list .z.done::after { opacity: .05; } @media (hover: hover) { .list .z:hover::after { opacity: .13; } } @media (max-width: 560px) { .list .z::after { width: 84px; height: 84px; inset: auto auto 10px 10px !important; } } .list .z::after { opacity: .07 !important; inset: auto 16px 14px auto !important; } .list .z.next::after { opacity: .11 !important; } .list .z.done::after { opacity: .05 !important; } @media (hover: hover) { .list .z:hover::after { opacity: .12 !important; } } @media (max-width: 560px) { .list .z::after { inset: auto 10px 10px auto !important; } } /* no watermark: the corner stays clear */ .list .z::after { display: none !important; } /* the press ripple, calmer still: fainter, smaller, opening slowly from a soft start and fading before it reaches the edges */ .list .z .ripple { background: color-mix(in oklab, var(--ch, var(--gold)) 9%, transparent); animation: rippleCalm 1.6s cubic-bezier(.16, .8, .3, 1) forwards; } @keyframes rippleCalm { 0% { transform: scale(.15); opacity: 0; } 18% { opacity: 1; } 100% { transform: scale(.85); opacity: 0; } } /* the press ripple, redrawn: a soft glow of the chapter's colour opens from the finger, and one fine ring travels a little ahead of it; both ease out and fade together */ .list .z .ripple { background: radial-gradient(circle closest-side, color-mix(in oklab, var(--ch, var(--gold)) 26%, transparent), color-mix(in oklab, var(--ch, var(--gold)) 8%, transparent) 60%, transparent); animation: glowOpen 1.4s cubic-bezier(.2, .8, .2, 1) forwards; } .list .z .ripple-ring { position: absolute; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ch, var(--gold)) 55%, transparent); transform: scale(.1); opacity: 0; animation: ringOpen 1.1s cubic-bezier(.2, .8, .2, 1) forwards; } @keyframes glowOpen { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(.9); opacity: 0; } } @keyframes ringOpen { 0% { transform: scale(.1); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .list .z .ripple, .list .z .ripple-ring { display: none !important; } } /* the press ripple, as it was, made gentle: a plain wash of the chapter's colour spreads from the finger over the whole sheet, eases to a stop, and fades away */ .list .z .ripple { background: color-mix(in oklab, var(--ch, var(--gold)) 14%, transparent); animation: washOver 1.4s cubic-bezier(.22, .7, .25, 1) forwards; } @keyframes washOver { 0% { transform: scale(0); opacity: 1; } 55% { opacity: .85; } 100% { transform: scale(1); opacity: 0; } } /* the press ripple as it first was (a light wash from the finger), only quicker and softer */ .list .z .ripple { background: rgb(var(--hi) / .09); animation: rippleBack .6s cubic-bezier(.2, .8, .3, 1) forwards; } @keyframes rippleBack { from { transform: scale(0); opacity: 1; } to { transform: scale(1); opacity: 0; } } /* the press ripple: back to the slow, calm one (a faint wash of the chapter's colour opening from the finger) */ .list .z .ripple { background: color-mix(in oklab, var(--ch, var(--gold)) 9%, transparent); animation: rippleCalm 1.6s cubic-bezier(.16, .8, .3, 1) forwards; } /* the same calm wash, now reaching the whole sheet before it fades */ .list .z .ripple { animation: rippleWhole 1.6s cubic-bezier(.16, .8, .3, 1) forwards; } @keyframes rippleWhole { 0% { transform: scale(.06); opacity: 0; } 12% { opacity: 1; } 70% { opacity: .8; } 100% { transform: scale(1); opacity: 0; } } :root { --star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2212%22%20height%3D%2212%22%20transform%3D%22rotate(45%2010%2010)%22%2F%3E%3C%2Fsvg%3E"); } /* ================================================================================================= THE TITLE PLATE: made like the dhikr sheets below it. One flat surface, one quiet edge that warms to the chapter colour, the title written large in the middle, the same small star on its top edge, and the same press wash. ================================================================================================= */ .read-head { text-align: center; } .read-plate { position: relative; display: inline-grid; place-items: center; margin: 26px auto 0; max-width: min(100%, 560px); padding: clamp(18px, 2.4vw, 26px) clamp(30px, 5vw, 64px); border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 45%, var(--line-2)); transition: box-shadow .5s ease; } .read-plate::before { content: ""; position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; background: color-mix(in oklab, var(--ch) 65%, var(--ink)); transition: rotate .9s var(--spring); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; } .read-plate .t { display: block; color: var(--ink); } .read-plate .t svg { display: block; height: clamp(50px, 5.5vw + 24px, 86px); width: auto; max-width: 100%; fill: currentColor; } @media (hover: hover) { .read-plate:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 75%, transparent); } .read-plate:hover::before { rotate: 45deg; } } @media (prefers-reduced-motion: no-preference) { .read-plate { animation: plateIn .7s var(--spring) both; } .read-plate::before { animation: starIn 1.1s .15s var(--spring) both; } } @keyframes plateIn { from { opacity: 0; transform: translateY(10px) scale(.98); } } @keyframes starIn { from { rotate: -90deg; opacity: 0; } } @media (max-width: 560px) { .read-plate { padding: 16px 24px; border-radius: 20px; } .read-plate .t svg { height: 46px; } } .read-plate { display: grid; width: fit-content; min-width: min(100%, 420px); margin-inline: auto; } /* ================================================================================================= THE CHAPTER TITLE: in the cards' language but its own form. No box: a small medallion (an eight-point star holding the chapter's emblem, in its colour) above the title written large, and a short bar of the same colour beneath it. ================================================================================================= */ .read-emb { width: 60px; height: 60px; margin: 22px auto 0; color: color-mix(in oklab, var(--ch) 55%, var(--ink)); } .read-emb svg { width: 100%; height: 100%; overflow: visible; } .read-emb .st { fill: color-mix(in oklab, var(--ch) 16%, transparent); stroke: color-mix(in oklab, var(--ch) 70%, var(--ink)); stroke-width: 1.2; stroke-linejoin: round; transform-origin: 28px 28px; transition: rotate 1s var(--spring); } .read-emb .ic path { fill: none; stroke: currentColor; } .read-head:hover .read-emb .st { rotate: 22.5deg; } .read-title { margin: 12px auto 0; width: fit-content; max-width: 100%; color: var(--ink); } .read-title .t { display: block; } .read-title .t svg { display: block; height: clamp(54px, 6vw + 26px, 96px); width: auto; max-width: 100%; fill: currentColor; } .read-title::after { content: ""; display: block; width: 46px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: var(--ch); } .read-head .moment { margin-top: 12px; } @media (prefers-reduced-motion: no-preference) { .read-emb { animation: plateIn .7s var(--spring) both; } .read-emb .st { animation: starIn 1.2s .1s var(--spring) both; } .read-title { animation: plateIn .8s .08s var(--spring) both; } .read-title::after { animation: barIn .9s .35s var(--glide) both; } } @keyframes barIn { from { transform: scaleX(0); } } @media (max-width: 560px) { .read-emb { width: 48px; height: 48px; margin-top: 14px; } .read-title .t svg { height: 50px; } } /* the accent follows the theme's own (neutral) accent, as before the yellow palette */ :root { --accent: var(--gold); --accent-2: var(--gold-2); --accent-ink: var(--gold-ink); } /* ================================================================================================= THE TOP BAR AND THE READING TOOLS, in the site's language: one flat surface with a single quiet edge, flat round buttons that warm on hover, the search a soft well, the main button in yellow. ================================================================================================= */ .nav-pill { background: color-mix(in oklab, var(--surface) 88%, transparent) !important; border-radius: 20px !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -20px rgb(0 0 0 / .6) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .theme-btn, .snd-btn { background: none !important; box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--muted) !important; transition: background .25s, color .25s, box-shadow .25s, transform .45s var(--spring); } .theme-btn:hover, .snd-btn:hover, .theme-btn[aria-expanded="true"] { background: color-mix(in oklab, var(--accent) 12%, transparent) !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent) !important; } .quran-btn { background: none !important; color: var(--ink) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; transition: background .25s, box-shadow .25s, transform .45s var(--spring); } .quran-btn:hover { background: color-mix(in oklab, var(--accent) 12%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent) !important; } .search { background: color-mix(in oklab, var(--ink) 5%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line) !important; } .search:focus-within { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, transparent) !important; background: color-mix(in oklab, var(--accent) 6%, transparent) !important; } .theme-btn:active, .snd-btn:active, .quran-btn:active, .menu-btn:active { transform: scale(.92); } /* the reading tools: two calm pills with a single edge; the size buttons answer softly */ .read-tools .size, .read-tools .tool { height: 40px; border-radius: 14px; background: none !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; color: var(--ink); } .read-tools .size { padding: 3px; gap: 2px; } .read-tools .size button { width: 36px; height: 34px; border-radius: 10px; color: var(--ink); transition: background .2s, transform .45s var(--spring); } .read-tools .size button:hover, .read-tools .tool:hover { background: color-mix(in oklab, var(--accent) 12%, transparent) !important; } .read-tools .size button:active { transform: scale(.88); } .read-tools #sizeVal { min-width: 42px; text-align: center; font: 500 .8rem var(--ui); color: var(--faint); } .read-tools .tool { padding-inline: 14px; gap: 7px; font: 500 .85rem var(--ui); } .read-tools .tool svg { transition: rotate .6s var(--spring); } .read-tools .tool:hover svg { rotate: -180deg; } /* the end ornament («تقبّل الله منك» under the octagon) goes: the completion card already says it */ .z-end { display: none !important; } /* the emblem above a chapter title glides between its two states: its entry animation no longer holds the turn, so hover is a smooth rotation, not a jump between two fixed shapes */ .read-emb, .read-emb .st, .read-title, .read-title::after { animation-fill-mode: backwards !important; } .read-emb .st { transition: rotate 1.2s cubic-bezier(.2, .8, .2, 1) !important; } /* reading and sound settings in the colours panel */ .prefs { display: grid; gap: 8px; grid-column: 1 / -1; } .pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); font: 500 .84rem var(--ui); color: var(--ink); cursor: pointer; } .pref input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .pref i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--surface-3); transition: background .3s; } .pref i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: translate .45s var(--spring), background .3s; } .pref input:checked + i { background: var(--accent); } .pref input:checked + i::after { translate: -16px 0; background: var(--accent-ink); } .pref input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; } .pref.vol input { flex: 0 1 160px; accent-color: var(--accent); } /* the level of the sound effects: a small button beside the speaker and the slider it opens */ .vol-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, box-shadow .25s, transform .45s var(--spring); } .vol-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .vol-btn svg circle { fill: var(--surface); } .vol-btn:hover, .vol-btn[aria-expanded="true"] { background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); } .vol-btn:active { transform: scale(.92); } .vol-pop[hidden] { display: none; } .vol-pop { pointer-events: auto; width: min(100%, 360px); margin-top: 10px; padding: 12px 14px 8px; border-radius: 18px; display: grid; gap: 2px; background: color-mix(in oklab, var(--surface) 96%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -24px rgb(0 0 0 / .35); } .vol-pop label { font: 500 .84rem var(--ui); color: var(--ink); } .vol-row { display: flex; align-items: center; gap: 12px; min-height: 44px; } .vol-row output { flex: none; min-width: 3.2em; text-align: center; font: 500 .86rem var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; } .vol-range { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } .vol-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to left, var(--ink) var(--p, 60%), var(--line-2) var(--p, 60%)); } .vol-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line-2); } .vol-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--ink); } .vol-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--surface), 0 2px 8px rgb(0 0 0 / .4); transition: transform .3s var(--spring); } .vol-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--surface); } .vol-range:active::-webkit-slider-thumb { transform: scale(1.12); } .vol-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } @media (prefers-reduced-motion: no-preference) { .vol-pop:not([hidden]) { animation: dropIn .4s var(--spring) both; transform-origin: top center; } } @media (prefers-reduced-motion: reduce) { .vol-btn, .vol-range::-webkit-slider-thumb { transition: none; } } @media (max-width: 560px) { .nav .vol-btn { width: 34px; height: 34px; border-radius: 10px; } .nav .vol-btn svg { width: 16px; height: 16px; } .vol-pop { margin-top: 6px; } } /* in the misbaha's header it sits beside the close button, and its slider opens under the header */ .mis-head .vol-btn { margin-inline-start: auto; width: 44px; height: 44px; } .mis-head + .vol-pop { width: auto; margin: -4px 4px 12px; } /* moving between pages without the two overlapping: the old one is gone before the new one rises */ ::view-transition-old(page) { animation: pgOut .14s ease-in both !important; } ::view-transition-new(page) { animation: pgIn .5s .1s cubic-bezier(.2, .9, .25, 1) both !important; } /* the stops of the day: a fine ring round each icon fills with today's progress in that chapter */ .stop-ico { overflow: visible; } .stop-ring { position: absolute; inset: -4px; width: calc(100% + 8px) !important; height: calc(100% + 8px) !important; transform: rotate(-90deg); pointer-events: none; } .stop-ring circle { fill: none; stroke: var(--c, var(--accent)); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sp, 0) * 100); opacity: calc(var(--sp, 0) * 100); transition: stroke-dashoffset .9s var(--spring); } .stop.done .stop-ring circle { stroke: var(--accent); } /* what comes next, under the button: a quiet line that opens that chapter */ .now-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px; border-radius: 12px; width: fit-content; font: 500 .84rem var(--ui); color: var(--fg, var(--ink)); background: color-mix(in oklab, var(--fg, var(--ink)) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fg, var(--ink)) 14%, transparent); transition: background .25s, transform .45s var(--spring); } .now-next[hidden] { display: none; } .now-next span { opacity: .65; } .now-next small { font-size: .78rem; opacity: .7; } .now-next svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: translate .45s var(--spring); } .now-next:hover { background: color-mix(in oklab, var(--fg, var(--ink)) 12%, transparent); } .now-next:hover svg { translate: -3px 0; } .now-next:active { transform: scale(.97); } @media (max-width: 560px) { .now-next { font-size: .78rem; padding: 7px 12px; flex-wrap: wrap; } } /* the colours panel takes the theme surface (it was pure white on the cream theme) */ .themes { background: color-mix(in oklab, var(--surface) 96%, transparent) !important; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -24px rgb(0 0 0 / .35) !important; } /* ================================================================================================= MOVING BETWEEN THINGS: each change animates only what belongs to it. - the chapter cards travel on their own only while their shape or group changes; otherwise they are part of the page (they no longer linger as ghosts over a chapter that has just opened) - the page fades and rises only on a move between pages; a theme change is one soft crossfade of the whole screen, with nothing dropping or rising - the mushaf leaf slides on its own only while a page turns ================================================================================================= */ html:not(.vt-cards) .card { view-transition-name: none !important; } html:not([data-flip]) .q-page { view-transition-name: none !important; } html:not(.vt-route):not([data-flip])::view-transition-old(page), html:not(.vt-route):not([data-flip])::view-transition-old(root) { animation: none !important; } html:not(.vt-route):not([data-flip])::view-transition-new(page), html:not(.vt-route):not([data-flip])::view-transition-new(root) { animation: vtSoft .35s ease both !important; } @keyframes vtSoft { from { opacity: 0; } } /* ================================================================================================= MOTION, after claude.com: one calm vocabulary for the whole site - curves: expo-out for things that arrive, quart-out for long rises, a quick ease-in for leaving - moving between pages: the old page simply fades; the new page's own lines rise 16px one after another (nothing slides sideways, nothing bounces) - the bar settles down from the top once, on the first visit - the chapters sheet opens like a blind (clip-path) and its links rise in turn - presses are short (scale .98), arrows slide on the expo curve Everything here lives inside no-preference: with reduced motion the site stays as it was. ================================================================================================= */ :root { --out-expo: cubic-bezier(.19, 1, .22, 1); --out-quart: cubic-bezier(.25, 1, .5, 1); --out-ui: cubic-bezier(.165, .84, .44, 1); } @keyframes raise { from { opacity: 0; transform: translateY(16px); } } @keyframes navDown { from { opacity: 0; transform: translateY(-20px); } } @keyframes blindOpen { from { clip-path: inset(0 0 100% 0 round var(--r-lg)); } to { clip-path: inset(0 0 0 0 round var(--r-lg)); } } @media (prefers-reduced-motion: no-preference) { /* page change: a plain crossfade of the frame; the rising is done by the page itself */ ::view-transition-old(page) { animation: pgFadeOut .2s ease-in both; } ::view-transition-new(page) { animation: pgFadeIn .3s ease-out both; } /* the first lines of every page rise in sequence */ .hero .wrap > *, .read-head > .crumbs, .read-head > .moment, .read-head > .read-tools, .hal-page > .crumb-back, .hal-head > * { animation: raise .9s var(--out-quart) backwards; } .hero .wrap > :nth-child(1) { animation-delay: .05s; } .hero .wrap > :nth-child(2) { animation-delay: .12s; } .hero .wrap > :nth-child(3) { animation-delay: .2s; } .hero .wrap > :nth-child(4) { animation-delay: .28s; } .hero .wrap > :nth-child(n+5) { animation-delay: .36s; } .read-head > .crumbs { animation-delay: .02s; } .read-head > .moment { animation-delay: .22s; } .read-head > .read-tools { animation-delay: .3s; } .hal-head > :nth-child(2) { animation-delay: .08s; } .hal-head > :nth-child(3) { animation-delay: .16s; } /* the bar arrives once */ .nav-pill { animation: navDown 1s var(--out-quart) backwards; } /* the chapters sheet: a blind that opens, then its links */ .sheet:not([hidden]) { animation: blindOpen .5s var(--out-expo) backwards; } .themes:not([hidden]), .results:not([hidden]) { animation: dropIn .4s var(--out-expo) both; } .sheet > * { animation: raise .6s var(--out-quart) backwards; } .sheet > :nth-child(-n+4) { animation-delay: .06s; } .sheet > :nth-child(n+5):nth-child(-n+10) { animation-delay: .1s; } .sheet > :nth-child(n+11):nth-child(-n+18) { animation-delay: .14s; } .sheet > :nth-child(n+19) { animation-delay: .18s; } /* scroll reveals use the same long, soft curve */ .reveal { transition: transform 1s var(--out-quart), opacity 1s var(--out-quart); } .js .reveal:not(.in) { transform: translateY(24px); } /* hover and press: colour in .2s, a short press, arrows slide on the expo curve */ .btn, .tool, .dock a, .dock button, .sheet a, .results a { transition-timing-function: var(--out-ui); } .btn svg, .now-next svg, .hal-inv-go svg { transition: transform .5s var(--out-expo), translate .5s var(--out-expo); } .btn:active, .tool:active, .menu-btn:active, .hal-invite:active { transform: scale(.98); transition-duration: .1s; } } @keyframes pgFadeOut { to { opacity: 0; } } @keyframes pgFadeIn { from { opacity: 0; } } /* ================================================================================================= 5 Nov 2026 — verses in the mushaf's hand, and a quieter phone. ================================================================================================= */ /* a quoted verse, once its page fonts have come (mushaf-verse.js): the Madinah mushaf's own words */ .qv { font-size: 1.06em; line-height: inherit; word-spacing: .04em; } .qv > span { white-space: normal; } .z-text .basmala.qv-on { font-size: .9em; } .z-text .basmala .qv { font-size: 1.15em; } .hal-v p.qv-on { font-size: clamp(1.45rem, 1.3rem + .7vw, 1.85rem); line-height: 2.05; } .hal-v p .qv { font-size: 1.06em; color: var(--ink); } .hal-v p .qv span { font-size: 1em; color: inherit; } /* «الإعدادات»: the colours button becomes the settings button; the speaker and the volume buttons leave the bar (their work is in the window, settings.js) */ .nav.has-settings #sndBtn, .nav.has-settings #volBtn, .nav.has-settings #volPop { display: none !important; } .nav.has-settings .theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; height: 40px; padding-inline: 12px; border-radius: 11px !important; } .nav.has-settings .theme-btn:hover, .nav.has-settings .theme-btn[aria-expanded="true"] { border-radius: 11px !important; } .nav.has-settings .theme-btn span { font: 500 .84rem var(--ui); } @media (max-width: 900px) { .nav.has-settings .theme-btn span { display: none; } .nav.has-settings .theme-btn { padding-inline: 0; width: 40px; } } /* on a phone every button says what it is: its sign with its name under it */ @media (max-width: 560px) { .nav.has-settings .nav-pill { gap: 4px; padding: 5px 8px; align-items: center; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) { display: inline-flex !important; flex-direction: column-reverse; align-items: center; justify-content: center; gap: 3px; width: 52px !important; min-width: 0; height: 48px !important; padding: 0 !important; border-radius: 11px !important; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) span { display: block !important; font: 500 .64rem/1 var(--ui); white-space: nowrap; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) svg { width: 18px !important; height: 18px !important; flex: none; } .nav.has-settings .menu-btn svg:not(.q-ic) { margin: 0; } .nav.has-settings .search { height: 40px !important; min-width: 0; } .nav.has-settings .logo svg { width: 26px; height: 26px; } } /* (hidden must still hide it: the grid below would otherwise keep it open) */ .themes.set-box[hidden] { display: none !important; } .themes.set-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: min(100%, 440px); max-height: min(78vh, 640px); overflow: hidden auto; overscroll-behavior: contain; padding: 0 14px 12px; border-radius: 16px; background: var(--surface-2, var(--surface)) !important; scrollbar-width: thin; } .set-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin: 0 -14px; padding: 10px 14px 8px; background: var(--surface-2, var(--surface)); border-bottom: 1px solid var(--line); } .set-head h2 { margin: 0; font: 600 .98rem var(--ui); color: var(--ink); } .set-x { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: background .2s, color .2s; } .set-x:hover { background: rgb(var(--hi) / .07); color: var(--ink); } .set-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .set-sec { display: grid; gap: 8px; padding: 12px 0 4px; } .set-sec + .set-sec { border-top: 1px solid var(--line); } .set-sec h3 { margin: 0 2px; font: 500 .76rem var(--ui); color: var(--faint); } .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .set-grid.set-shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .set-box .swatch i { height: 48px; } .set-box .shape { font-size: .72rem; padding: 6px; } .set-box .shape i { height: 36px; } .set-box .pref { font-size: .86rem; } .set-box .pref span small { display: block; margin-top: 2px; font-size: .72rem; color: var(--faint); font-weight: 400; } .set-box .pref.vol.off { opacity: .55; } @media (max-width: 420px) { .set-grid.set-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* the mark: the arch in the accent, its shade a faint tone of it */ .logo svg .lg-sh { opacity: .3; } /* the chapter for this hour: a small tab hanging from the card's top edge, clear of its words */ .card .is-now { top: 0 !important; inset-inline-start: 22px !important; padding: 3px 11px 4px; border-radius: 0 0 9px 9px !important; font-size: .74rem; line-height: 1.4; } @media (max-width: 560px) { /* the card skies keep their colour and a sprinkling of light, without the drawn stars, the lines joining them or the shooting star: on a small screen they crowded the words */ svg .sky .links, svg .sky .bigs, svg .sky .meteor { display: none; } svg .sky .dots { opacity: .5; } svg .sky, svg .sky .dots { animation: none !important; } /* the wide card for this hour is one column wide on a phone; at its wide proportions the frosted pane covered its title, so here it keeps the height of the others */ .cards[data-shape="glass"] .card.feat { aspect-ratio: 600 / 470; } } /* ---------- chapters said several times a day (after each prayer, at each meal) ---------- */ .stop-ct { margin-top: 1px; padding: 1px 8px; border-radius: 999px; font: 600 .7rem/1.5 var(--ui); font-variant-numeric: tabular-nums; color: var(--ink); background: color-mix(in oklab, var(--c, var(--gold)) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c, var(--gold)) 40%, transparent); } .stop-ct[hidden] { display: none; } .stop.done .stop-ct { background: var(--c, var(--gold)); color: var(--cd, var(--bg)); box-shadow: none; } .complete .again { margin-top: 14px; height: 44px; padding-inline: 20px; } .complete .again[hidden] { display: none; } /* ---------- the Quran button: said plainly, and not mistaken for a tool ---------- */ .nav .quran-btn { background: color-mix(in oklab, var(--accent, var(--gold)) 12%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent, var(--gold)) 50%, transparent) !important; color: var(--ink) !important; } .nav .quran-btn:hover { background: color-mix(in oklab, var(--accent, var(--gold)) 22%, transparent) !important; } .nav .quran-btn span { font-weight: 600; white-space: nowrap; } @media (max-width: 1100px) and (min-width: 561px) { .nav .quran-btn span { display: none; } .nav .quran-btn { width: 40px; padding: 0; justify-content: center; } } @media (max-width: 560px) { .nav .quran-btn span { display: block; } } .btn-quran { display: inline-flex; align-items: center; gap: 8px; } .btn-quran svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; } .nav .quran-btn span b { font-weight: inherit; } @media (max-width: 560px) { .nav .quran-btn span b { display: none; } } /* (no cross-document transition: it merged the two pages into each other for a moment) */ /* ================================================================================================= THE HOME HERO, lighter (5 Nov): one clear button, the other ways in as a quiet row under it, the question about the heart as a slim line, and less air between them ================================================================================================= */ .hero { padding-top: clamp(96px, 13vh, 130px); } .hero .almanac { margin-bottom: clamp(14px, 2.4vh, 22px); } .hero .lede { margin-top: clamp(14px, 2.4vh, 20px); max-width: 38ch; font-size: clamp(.98rem, .94rem + .25vw, 1.08rem); } .hero .cta { margin-top: clamp(20px, 3vh, 26px); } .quick { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin: 14px auto 0; } .quick a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 11px; font: 500 .88rem var(--ui); color: var(--muted); transition: background .35s ease, color .35s ease; } .quick a:hover, .quick a:focus-visible { background: rgb(var(--hi) / .06); color: var(--ink); outline: none; } .quick svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .quick a:nth-child(3) { color: var(--ink); } /* «كيف حالك اليوم؟» as a slim line: no frame, only its four small signs, the question, and an arrow */ .hero .hal-invite { margin-top: clamp(18px, 3vh, 26px); gap: 12px; padding: 8px 12px; border-radius: 14px; background: none; box-shadow: inset 0 0 0 1px var(--line); } .hero .hal-invite:hover { transform: none; background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line-2); } .hero .hal-faces i { width: 26px; height: 26px; margin-inline-start: -7px; } .hero .hal-faces i svg { width: 13px; height: 13px; } .hero .hal-inv-t b { font-size: .9rem; } .hero .hal-inv-t small { font-size: .72rem; } .hero .hal-inv-go { width: 26px; height: 26px; border-radius: 8px; box-shadow: none; } @media (max-width: 560px) { .hero { padding-top: 92px; } .hero .lede { max-width: 30ch; } .quick a { padding: 0 11px; font-size: .84rem; } .hero .hal-inv-t small { display: none; } } /* the two kinds of chapters: the old choice goes at once, only the cards move (the whole screen no longer fades, which showed the old choice a moment longer) */ html.vt-cards:not(.vt-route)::view-transition-old(root) { animation: none !important; opacity: 0; } html.vt-cards:not(.vt-route)::view-transition-new(root) { animation: none !important; } .seg button { transition: color .25s ease; } .seg .thumb { transition: inset-inline-start .4s var(--ease), width .4s var(--ease); } html.vt-cards:not(.vt-route)::view-transition-old(page) { animation: none !important; opacity: 0; } html.vt-cards:not(.vt-route)::view-transition-new(page) { animation: none !important; } /* ================================================================================================= A CALMER WAY BETWEEN THINGS (5 Nov): nothing rises, drops, turns or grows on its way in. Moving between pages is one short crossfade of the content, the bar and the screen stay where they are, so it no longer feels like the site is being loaded again. Things come in by fading only. ================================================================================================= */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(page) { animation: pgFadeOut .14s ease both !important; } ::view-transition-new(page) { animation: pgFadeIn .24s ease both !important; } /* the first lines of a page: no rising in turn */ .hero .wrap > *, .read-head > .crumbs, .read-head > .moment, .read-head > .read-tools, .hal-page > .crumb-back, .hal-head > *, .cards[data-anim] .card, .read-plate, .read-plate::before, .read-emb, .read-emb .st, .read-title, .read-title::after, .sheet > *, .next-tag { animation: none !important; } /* what comes into view as you scroll: it fades, it does not climb */ .reveal { transition: opacity .6s ease; } .js .reveal:not(.in) { transform: none; } .to-rise { transform: none; } .to-rise.risen { transition: opacity .5s ease-out; } .list .z.to-rise .z-sep i, .z-sec.to-rise span::before { rotate: none; transition: none; } .list .z.to-rise .z-sep span, .z-sec.to-rise::before, .z-sec.to-rise::after, .list .z.to-rise .z-fadl .lab::before, .list .z.to-rise .z-fadl .lab::after { transform: none; transition: none; } .dock { animation: none; } .complete:not([hidden]), .dock .dock-next { animation: pgFadeIn .5s ease both; } } /* ---------- the ways in, set as one quiet tray under the button, and the question under it at the same width ---------- */ .quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: min(100%, 440px); margin: 22px auto 0; padding: 0; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; } .quick a { flex-direction: column; justify-content: center; gap: 7px; height: 76px; padding: 0 6px; border-radius: 0; font: 500 .82rem var(--ui); color: var(--muted); position: relative; } .quick a + a::before { content: ""; position: absolute; inset-block: 18px; inset-inline-end: 0; width: 1px; background: var(--line); } .quick a:nth-child(3) { color: var(--muted); } .quick a:hover, .quick a:focus-visible { background: rgb(var(--hi) / .05); color: var(--ink); } .quick svg { width: 22px; height: 22px; stroke-width: 1.6; } .hero .hal-invite { width: min(100%, 440px); margin-top: 10px; grid-template-columns: auto 1fr auto; border-radius: 16px; padding: 10px 14px; } .hero .hal-inv-t { justify-items: start; } @media (max-width: 560px) { .quick a { height: 70px; font-size: .8rem; } .hero .hal-inv-t small { display: block; } } .hero .lede { text-wrap: balance; max-width: 44ch; } /* the three ways in as three small mihrabs, the shape of the site's mark: an arch above, flat below */ .quick { display: flex; justify-content: center; gap: 12px; width: auto; margin: 26px auto 0; border-radius: 0; box-shadow: none; overflow: visible; } .quick a { flex: 0 0 auto; width: 104px; height: 116px; padding: 14px 8px 0; justify-content: flex-start; gap: 10px; border-radius: 52px 52px 16px 16px; text-align: center; box-shadow: inset 0 0 0 1px var(--line-2); transition: background .4s ease, box-shadow .4s ease, color .4s ease; } .quick a + a::before { display: none; } .quick a svg { width: 24px; height: 24px; margin-top: 16px; } .quick a span { font-size: .8rem; line-height: 1.35; } .quick a:hover, .quick a:focus-visible { background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 45%, transparent); } @media (max-width: 390px) { .quick { gap: 8px; } .quick a { width: 98px; } } /* ================================================================================================= 5 Nov (night): surfaces that stand apart from the ground, the shortcuts in a new shape, and a home hero that spreads across a wide screen instead of standing as one narrow column ================================================================================================= */ /* on the black and on the white, panels used to be a breath from the ground and their edges almost invisible; they are now a clear step above it, with an edge you can see */ :root { --surface: #0c0c0c; --surface-2: #131313; --surface-3: #1e1e1e; --line: rgb(255 255 255 / .1); --line-2: rgb(255 255 255 / .18); } :root[data-theme="white"] { --surface: #f6f6f7; --surface-2: #efeff1; --surface-3: #e4e4e7; --line: rgb(0 0 0 / .1); --line-2: rgb(0 0 0 / .18); } /* the old, deeper cards come back; they stand off the ground by a fine edge instead of a lighter fill */ .z, .complete, .now2, .q-page, .q-panel { outline: 1px solid var(--line-2); outline-offset: -1px; } /* the shortcuts: tablets with one corner cut, like a turned page; the edge is drawn by a second, inset shape so it follows the cut */ .quick { gap: 10px; } .quick a { --cut: 20px; position: relative; isolation: isolate; width: 108px; height: 98px; padding: 0 8px; justify-content: center; gap: 9px; border-radius: 0; box-shadow: none !important; background: var(--line-2) !important; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); } .quick a::before, .quick a + a::before { display: block; content: ""; position: absolute; z-index: -1; inset: 1px; width: auto; height: auto; background: var(--surface); clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, 0 100%); transition: background .4s ease; } .quick a:hover, .quick a:focus-visible { background: var(--ink) !important; } .quick a:hover::before, .quick a:focus-visible::before { background: var(--surface-2); } .quick a svg { margin-top: 0; } /* the hero on a wide screen: words on one side, the ways in on the other */ .hero-side { display: grid; justify-items: center; } @media (min-width: 1000px) { .hero { text-align: start; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "alm side" "h1 side" "lede side" "cta side" "season season"; column-gap: clamp(40px, 6vw, 88px); align-items: center; } .hero .almanac { grid-area: alm; justify-content: flex-start; } .hero h1 { grid-area: h1; justify-items: start; } .hero .lede { grid-area: lede; margin-inline: 0; text-align: start; max-width: 36ch; } .hero .cta { grid-area: cta; justify-content: flex-start; } .hero .season, .hero [class^="season"] { grid-area: season; } .hero-side { grid-area: side; align-self: center; gap: 14px; justify-items: stretch; } .hero-side .quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 0; } .hero-side .quick a { --cut: 26px; width: 100%; height: 138px; gap: 12px; font-size: .9rem; } .hero-side .quick a svg { width: 30px; height: 30px; } .hero-side .hal-invite { width: 100%; margin: 0; } } /* ---------- a phone: everything smaller and closer, and the chapters two to a row ---------- */ @media (max-width: 560px) { .nav.has-settings .nav-pill { padding: 4px 8px; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) { width: 46px !important; height: 42px !important; gap: 2px; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) span { font-size: .58rem; } .nav.has-settings :is(.theme-btn, .quran-btn, .menu-btn) svg { width: 16px !important; height: 16px !important; } .nav.has-settings .search { height: 38px !important; } .hero { padding-top: 84px; } .hero .almanac { margin-bottom: 12px; } .hero h1 .t { height: clamp(58px, 17vw, 80px); } .hero .lede { font-size: .96rem; margin-top: 14px; max-width: 36ch; } .hero .cta { margin-top: 16px; } .hero .cta .btn { height: 46px; padding-inline: 22px; font-size: .96rem; } .hero-side { margin-top: 18px; } /* the chapters: two to a row, each a small card (its sky and name, when it is, and where you stand); the chapter of this hour keeps the full row and its sentence */ .cards, .cards[data-shape] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; overflow: visible; padding: 0; scroll-snap-type: none; } .cards[data-shape] .card { display: flex; flex-direction: column; grid-column: auto; height: auto; min-height: 0; aspect-ratio: auto; border-radius: 18px; outline: 0; clip-path: none; } .cards[data-shape] .card.feat { grid-column: 1 / -1; } .cards[data-shape] .card .band { position: relative; inset: auto; aspect-ratio: 600 / 250; } .cards[data-shape] .card .band svg { position: static; width: 100%; height: 100%; left: auto; top: auto; } .cards[data-shape] .card .card-body { position: static; inset: auto; margin: 0; padding: 4px 12px 12px; gap: 3px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; } .cards[data-shape] .card .tally, .cards[data-shape] .card .dots, .cards[data-shape] .card .stub, .cards[data-shape] .card .vtitle { display: none; } .cards[data-shape] .card:not(.feat) .what, .cards[data-shape] .card:not(.feat) .open { display: none; } .cards[data-shape] .card .card-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: .72rem; } .cards[data-shape] .card .when, .cards[data-shape] .card .count { font-size: .72rem; } .cards[data-shape] .card .card-foot { padding-top: 2px; } .cards[data-shape] .card .stat { font-size: .72rem; } .cards[data-shape] .card.feat .what { font-size: 1.05rem; } .cards[data-shape] .card .is-now { top: 0; inset-inline-start: 14px; } } /* a chapter's colour glow behind its page comes in softly, rather than appearing at once */ @media (prefers-reduced-motion: no-preference) { .list::before { animation: pgFadeIn .9s ease both; } } /* ================================================================================================= THE HOME SIDE, fifth form: the day's prayers set on the sun's own path, three doors beneath, and the question about your day as a quiet line. Raised where it is read, sunken where it is held. ================================================================================================= */ .alm-card { background: rgb(var(--glass)); } .hero-side { display: grid; gap: 12px; width: min(100%, 460px); margin: 26px auto 0; text-align: start; justify-items: stretch; } @media (min-width: 1000px) { .hero-side { width: 100%; max-width: 440px; margin: 0; gap: 12px; } } /* the dial */ .dial { --raise: inset 0 1px 0 rgb(var(--hi) / .06), 0 1px 1px rgb(0 0 0 / .35), 0 22px 44px -24px rgb(0 0 0 / .85); position: relative; display: grid; gap: 6px; padding: 14px 18px 14px; border-radius: 26px; background: linear-gradient(180deg, var(--surface-2), var(--surface) 72%); box-shadow: inset 0 0 0 1px var(--line), var(--raise); } :root[data-tone="light"] .dial { --raise: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(0 0 0 / .05), 0 18px 36px -24px rgb(0 0 0 / .25); } .dial-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; } .dial-k { font: 500 .8rem var(--ui); color: var(--faint); } .dial-place { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; max-width: 60%; padding-inline: 10px 8px; border-radius: 999px; color: var(--muted); font: 500 .8rem var(--ui); background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s; } .dial-place::after { content: ""; position: absolute; inset: -5px -2px; } .dial-place:hover, .dial-place[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .08); } .dial-place[hidden] { display: none; } .dial-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dial-place svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dial-place .dial-chev { transition: transform .35s var(--ease); } .dial-place[aria-expanded="true"] .dial-chev { transform: rotate(180deg); } .dial-head { display: grid; gap: 2px; } .dial-next { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .dial-next b { font: 400 clamp(1.75rem, 1.45rem + 1vw, 2.15rem)/1.3 var(--text); color: var(--ink); } .dial-at { font: 500 1rem var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; } .dial-at small, .dial-times small { margin-inline-start: 3px; font-size: .72em; font-weight: 400; color: var(--faint); } .dial-in { margin: 0; font: 400 .88rem var(--ui); color: var(--muted); } .dial-note { margin: 2px 0 0; font: 400 .78rem var(--ui); color: var(--faint); } /* the sky: a dotted path ahead, an inked path behind, the ground a shade deeper than the air */ .dial-sky { display: block; width: calc(100% + 36px); height: auto; margin: 4px -18px 0; } .dial-ground { fill: rgb(var(--hi) / .025); } .dial-horizon { stroke: var(--line-2); stroke-width: 1; } .dial-path { fill: none; stroke: rgb(var(--hi) / .24); stroke-width: 1.4; stroke-dasharray: 1.5 4.5; stroke-linecap: round; } .dial-path.lived { stroke: var(--ink); stroke-opacity: .7; stroke-dasharray: none; stroke-width: 1.6; } .dial-mark { fill: var(--surface); stroke: rgb(var(--hi) / .45); stroke-width: 1.3; } .dial-mark.past { fill: var(--muted); stroke: none; } .dial-mark.rise { fill: rgb(var(--hi) / .3); stroke: none; } .dial-mark.next { fill: var(--surface-2); stroke: var(--ink); stroke-width: 1.6; } .dial-gnomon { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .dial-shadow { stroke: rgb(var(--hi) / .2); stroke-width: 3; stroke-linecap: round; } .dial-sun { fill: var(--ink); } .dial-sun.below { fill: var(--muted); } .dial-sun-halo { fill: none; stroke: rgb(var(--hi) / .14); stroke-width: 1; } /* the five times: a shallow tray, the coming prayer lifted out of it */ .dial-times { list-style: none; margin: 4px 0 0; padding: 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-radius: 18px; background: rgb(var(--hi) / .025); box-shadow: inset 0 1px 3px rgb(0 0 0 / .4), inset 0 0 0 1px var(--line); } .dial-times li { display: grid; justify-items: center; gap: 1px; padding: 8px 2px 9px; border-radius: 14px; text-align: center; transition: background .45s var(--ease), box-shadow .45s var(--ease); } .dial-times span { font: 400 .74rem var(--ui); color: var(--faint); } .dial-times b { font: 500 .9rem var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .dial-times li.is-past span, .dial-times li.is-past b { opacity: .5; } .dial-times li.is-next { background: var(--surface-3); box-shadow: inset 0 1px 0 rgb(var(--hi) / .08), 0 0 0 1px var(--line-2), 0 8px 16px -10px rgb(0 0 0 / .9); } .dial-times li.is-next span { color: var(--ink); } .dial-times li.is-next b { font-weight: 700; } :root[data-tone="light"] .dial-times { box-shadow: inset 0 1px 2px rgb(0 0 0 / .06), inset 0 0 0 1px var(--line); } :root[data-tone="light"] .dial-times li.is-next { background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgb(0 0 0 / .06), 0 8px 16px -10px rgb(0 0 0 / .22); } /* no place yet */ .dial-empty { display: grid; gap: 10px; padding-top: 6px; } .dial-ask { margin: 0; font: 400 1rem/1.7 var(--ui); color: var(--ink); text-wrap: balance; } .dial-acts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; } .dial-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding-inline: 16px; border-radius: 14px; font: 600 .9rem var(--ui); color: var(--bg); background: var(--ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 6px 16px -8px rgb(0 0 0 / .7); transition: transform .3s var(--ease), opacity .3s; } .dial-btn:active { transform: scale(.97); } .dial-btn:disabled { opacity: .55; } .dial-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .dial-btn.ghost { color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); } .dial-sel { width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 .9rem var(--ui); } .dial-sel option { background: var(--bg-2); color: var(--ink); } .dial-fine { margin: 0; font: 400 .74rem/1.75 var(--ui); color: var(--faint); } /* place and method, opened from the place */ .dial-set { position: absolute; inset-inline: 8px; top: 52px; z-index: 30; padding: 14px; border-radius: 20px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgb(var(--hi) / .06), 0 30px 60px -22px rgb(0 0 0 / .9); } :root[data-tone="light"] .dial-set { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 48px -24px rgb(0 0 0 / .3); } .dial-set[hidden] { display: none; } .dial-set-in { display: grid; gap: 10px; animation: dialSet .45s var(--ease); } @keyframes dialSet { from { opacity: 0; transform: translateY(-6px); } } .dial-set label { display: grid; gap: 5px; } .dial-set label span { font: 400 .74rem var(--ui); color: var(--faint); } /* three doors */ .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .way { display: grid; justify-items: start; align-content: start; gap: 1px; min-width: 0; padding: 13px 14px 12px; border-radius: 20px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgb(var(--hi) / .04); transition: transform .45s var(--ease), background .3s, box-shadow .45s var(--ease); } .way:hover, .way:focus-visible { transform: translateY(-2px); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 rgb(var(--hi) / .06), 0 14px 28px -18px rgb(0 0 0 / .8); outline: none; } .way-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 12px; background: rgb(var(--hi) / .03); box-shadow: inset 0 1px 2px rgb(0 0 0 / .45), inset 0 0 0 1px var(--line); color: var(--ink); } :root[data-tone="light"] .way-ic { box-shadow: inset 0 1px 2px rgb(0 0 0 / .08), inset 0 0 0 1px var(--line); } .way-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .way b, .way small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .way b { font: 600 .9rem/1.4 var(--ui); } .way small { font: 400 .74rem/1.5 var(--ui); color: var(--faint); } /* the question about your day */ .hal-line { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding-inline: 10px 8px; border-radius: 16px; color: var(--muted); text-align: start; transition: color .3s, background .3s; } .hal-line:hover, .hal-line:focus-visible { color: var(--ink); background: rgb(var(--hi) / .035); outline: none; } .hal-line .hal-faces i { width: 24px; height: 24px; margin-inline-start: -8px; } .hal-line .hal-faces i:first-child { margin-inline-start: 0; } .hal-line .hal-faces i svg { width: 12px; height: 12px; } .hal-line-t { font: 500 .9rem var(--ui); } .hal-line-go { flex: none; margin-inline-start: auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .45s var(--ease); } .hal-line:hover .hal-line-go { translate: -4px 0; } @media (max-width: 560px) { .hero-side { margin-top: 22px; gap: 10px; } .dial { padding: 12px 14px; border-radius: 22px; } .dial-sky { width: calc(100% + 28px); margin-inline: -14px; } .dial-times b { font-size: .84rem; } .ways { gap: 8px; } .way { padding: 11px 10px 10px; border-radius: 16px; } .way-ic { width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; } .way b { font-size: .82rem; } .way small { font-size: .68rem; } } @media (max-width: 400px) { .dial-times small { display: block; margin: 0; } .dial-acts { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .dial-set-in { animation: none; } .way:hover { transform: none; } } /* the side holds the day's prayers alone; the sunrise is named on the horizon; a phone keeps the card short */ .dial-rise-t { font: 400 9px var(--ui); fill: var(--faint); } @media (max-width: 560px) { .dial-sky { display: none; } .dial-head { padding-top: 2px; } } /* the dial's own choosers: a field, and a short list that opens in a shallow tray beneath it */ .pick { display: grid; gap: 5px; } .pick-k { font: 400 .74rem var(--ui); color: var(--faint); } .pick-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding-inline: 14px 12px; border-radius: 14px; background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 500 .92rem var(--ui); text-align: start; transition: background .25s; } .pick-btn b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pick-btn:hover, .pick-btn[aria-expanded="true"] { background: rgb(var(--hi) / .08); } .pick-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); } .pick-btn[aria-expanded="true"] svg { transform: rotate(180deg); } .pick-pop { display: grid; gap: 6px; padding: 6px; border-radius: 16px; background: rgb(var(--hi) / .03); box-shadow: inset 0 1px 3px rgb(0 0 0 / .35), inset 0 0 0 1px var(--line); animation: dialSet .35s var(--ease); } .pick-pop[hidden] { display: none; } .pick-q { min-height: 42px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 .9rem var(--ui); outline: none; } .pick-q:focus { box-shadow: inset 0 0 0 1.5px var(--muted); } .pick-list { list-style: none; margin: 0; padding: 0; max-height: 212px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; display: grid; gap: 2px; } .pick-list li[hidden] { display: none; } .pick-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 12px; border-radius: 11px; color: var(--muted); font: 400 .9rem var(--ui); text-align: start; transition: background .2s, color .2s; } .pick-list button:hover, .pick-list button:focus-visible { background: rgb(var(--hi) / .06); color: var(--ink); outline: none; } .pick-list button svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .pick-list button[aria-selected="true"] { color: var(--ink); font-weight: 600; background: rgb(var(--hi) / .07); } .pick-list button[aria-selected="true"] svg { opacity: 1; } .seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgb(var(--hi) / .03); box-shadow: inset 0 1px 3px rgb(0 0 0 / .35), inset 0 0 0 1px var(--line); } .seg2 button { display: grid; justify-items: center; gap: 1px; min-height: 50px; padding: 6px; border-radius: 11px; color: var(--muted); font: 600 .86rem var(--ui); transition: background .3s, color .3s, box-shadow .3s; } .seg2 small { font: 400 .68rem var(--ui); color: var(--faint); } .seg2 button[aria-pressed="true"] { background: var(--surface-3); color: var(--ink); box-shadow: inset 0 1px 0 rgb(var(--hi) / .08), 0 0 0 1px var(--line-2), 0 6px 12px -8px rgb(0 0 0 / .8); } :root[data-tone="light"] .pick-pop, :root[data-tone="light"] .seg2 { box-shadow: inset 0 1px 2px rgb(0 0 0 / .06), inset 0 0 0 1px var(--line); } :root[data-tone="light"] .seg2 button[aria-pressed="true"] { background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), 0 4px 10px -6px rgb(0 0 0 / .2); } /* ================================================================================================= ONE COLUMN: no side panel. The hero reads top to bottom, centred: date, words, button, then the prayers of the day in one plain card with a mark for each. ================================================================================================= */ @media (min-width: 1000px) { .hero { text-align: center; } .hero .wrap { display: block; } .hero .almanac { justify-content: center; } .hero h1 { justify-items: center; } .hero .lede { margin-inline: auto; text-align: center; max-width: 46ch; } .hero .cta { justify-content: center; } } .hero .dial { width: min(100%, 620px); margin: clamp(30px, 5vh, 46px) auto 0; text-align: start; gap: 12px; padding: 16px 18px 16px; } .dial-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; } .dial-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--surface-3); color: var(--ink); box-shadow: inset 0 1px 0 rgb(var(--hi) / .08), 0 0 0 1px var(--line-2), 0 8px 18px -10px rgb(0 0 0 / .8); } .dial-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } :root[data-tone="light"] .dial-ic { background: var(--bg); box-shadow: 0 0 0 1px var(--line-2), 0 6px 14px -8px rgb(0 0 0 / .2); } .dial-next b { font-size: clamp(1.6rem, 1.4rem + .8vw, 2rem); } .dial-times li { gap: 3px; padding: 10px 2px 10px; } .dial-times i { display: grid; place-items: center; height: 22px; color: var(--muted); } .dial-times i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .dial-times li.is-next i { color: var(--ink); } .dial-times li.is-past i { opacity: .45; } .dial-set { top: 56px; } @media (max-width: 560px) { .hero .dial { margin-top: 26px; padding: 14px; } .dial-ic { width: 44px; height: 44px; border-radius: 14px; } .dial-ic svg { width: 22px; height: 22px; } .dial-times li { padding: 8px 1px; } .dial-times i svg { width: 18px; height: 18px; } .dial-times span { font-size: .7rem; } } /* ================================================================================================= PRAYER BAR: drawn like the moon's bar at the top, the five times side by side, each prayer in its own colour of the sky (dawn, noon, afternoon, sunset, night). And the mushaf as a door of its own. ================================================================================================= */ :root { --pc-fajr: #7fd3c3; --pc-sunrise: #c9df7e; --pc-dhuhr: #6cc6f5; --pc-asr: #ffb27a; --pc-maghrib: #ff8c95; --pc-isha: #a6acff; } :root[data-tone="light"] { --pc-fajr: #138a76; --pc-sunrise: #5c7a12; --pc-dhuhr: #0a7fc0; --pc-asr: #c4610f; --pc-maghrib: #c93a4b; --pc-isha: #4d55d1; } .pbar { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 740px); margin: clamp(28px, 5vh, 44px) auto 0; } .pbar-list { list-style: none; margin: 0; padding: 5px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; width: 100%; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .pb { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; height: 52px; padding-inline: 6px; border-radius: 999px; transition: background .4s var(--ease), box-shadow .4s var(--ease); } .pb-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--pc); background: color-mix(in oklab, var(--pc) 15%, transparent); } .pb-ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pb-t { display: grid; min-width: 0; text-align: start; line-height: 1.3; } .pb-t small { font: 400 .7rem var(--ui); color: var(--faint); } .pb-t b { font: 600 .9rem var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .pb-t b small { margin-inline-start: 2px; font-size: .72em; font-weight: 400; color: var(--faint); } .pb.is-past { opacity: .5; } .pb.is-next { background: color-mix(in oklab, var(--pc) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--pc) 40%, transparent) inset; } .pb.is-next .pb-ic { color: var(--bg); background: var(--pc); } .pb.is-next .pb-t > small { color: var(--pc); font-weight: 600; } .pbar-meta { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: 12px 8px; border-radius: 999px; color: var(--muted); font: 400 .84rem var(--ui); transition: background .25s, color .25s; } .pbar-meta:hover, .pbar-meta[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .05); } .pbar-meta[hidden] { display: none; } .pbar-meta b { color: var(--ink); font-weight: 600; } .pbar-meta i { font-style: normal; margin-inline: 4px; color: var(--faint); } .pbar-meta svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); } .pbar-meta[aria-expanded="true"] svg { transform: rotate(180deg); } .pbar-ask { display: grid; justify-items: center; gap: 6px; } .pbar-go { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 8px 20px; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line-2) inset; color: var(--ink); font: 500 .95rem var(--ui); transition: background .3s; } .pbar-go:hover { background: rgb(var(--hi) / .09); } .pbar-go:disabled { opacity: .6; } .pbar-alt { min-height: 36px; padding-inline: 10px; color: var(--muted); font: 400 .84rem var(--ui); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-2); } .pbar-alt:hover { color: var(--ink); } /* the settings float under the bar, centred */ .pbar .dial-set { position: absolute; top: calc(100% + 8px); inset-inline: auto; left: 50%; translate: -50% 0; width: min(92vw, 380px); text-align: start; } /* the mushaf: a second door beside the first, plainly a book */ .btn-mushaf { height: auto; min-height: 52px; gap: 10px; padding: 6px 18px 6px 8px; background: rgb(var(--hi) / .05); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; } .btn-mushaf:hover { background: rgb(var(--hi) / .09); } .btn-mushaf .bm-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #8fd3a8; background: color-mix(in oklab, #8fd3a8 15%, transparent); } :root[data-tone="light"] .btn-mushaf .bm-ic { color: #1f7a45; background: color-mix(in oklab, #1f7a45 12%, transparent); } .btn-mushaf .bm-ic svg { width: 21px; height: 21px; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform: none !important; } .btn-mushaf .bm-t { display: grid; text-align: start; line-height: 1.3; } .btn-mushaf .bm-t b { font: 600 .95rem var(--ui); } .btn-mushaf .bm-t small { font: 400 .72rem var(--ui); color: var(--faint); } .hero .cta { align-items: center; } @media (max-width: 640px) { .pbar-list { border-radius: 24px; padding: 4px; } .pb { flex-direction: column; gap: 4px; height: auto; padding: 8px 2px; border-radius: 20px; } .pb-t { text-align: center; justify-items: center; } .pb-ic { width: 30px; height: 30px; } .pb-ic svg { width: 17px; height: 17px; } .pb-t b { font-size: .82rem; } .pb-t b small { display: block; margin: 0; } .pbar-meta { font-size: .8rem; text-align: center; } } .pbar-live { width: 100%; display: grid; justify-items: center; } /* ================================================================================================= THE BAR'S SETTINGS, in the bar's own hand: round fields, a coloured mark for each, and things that bloom open softly rather than appear. ================================================================================================= */ :root { --spring: cubic-bezier(.34, 1.4, .64, 1); } .pbar .dial-set { padding: 12px; border-radius: 28px; background: rgb(var(--glass)); box-shadow: 0 0 0 1px var(--line-2) inset, 0 1px 0 rgb(var(--hi) / .06) inset, 0 30px 60px -24px rgb(0 0 0 / .85); transform-origin: 50% 0; } :root[data-tone="light"] .pbar .dial-set { box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 48px -24px rgb(0 0 0 / .25); } .pbar .dial-set:not([hidden]) { animation: setBloom .5s var(--spring) both; } @keyframes setBloom { from { opacity: 0; transform: scale(.92) translateY(-8px); } } .pbar .dial-set-in { gap: 8px; animation: none; } .pbar .dial-set-in > * { animation: setRise .5s var(--ease) both; } .pbar .dial-set-in > :nth-child(2) { animation-delay: .04s; } .pbar .dial-set-in > :nth-child(3) { animation-delay: .08s; } .pbar .dial-set-in > :nth-child(4) { animation-delay: .12s; } .pbar .dial-set-in > :nth-child(5) { animation-delay: .16s; } @keyframes setRise { from { opacity: 0; transform: translateY(6px); } } .pk-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--pc); background: color-mix(in oklab, var(--pc) 15%, transparent); transition: transform .45s var(--spring); } .pk-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pbar .pick { gap: 4px; } .pbar .pick-k { padding-inline: 14px; } .pbar .pick-btn { justify-content: flex-start; gap: 10px; min-height: 48px; padding-inline: 8px 14px; border-radius: 999px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, box-shadow .3s; } .pbar .pick-btn b { flex: 1; } .pbar .pick-btn:hover, .pbar .pick-btn[aria-expanded="true"] { background: rgb(var(--hi) / .08); box-shadow: 0 0 0 1px var(--line-2) inset; } .pbar .pick-btn:hover .pk-ic, .set-geo:hover .pk-ic { transform: scale(1.08) rotate(-6deg); } .pbar .pick-pop { border-radius: 24px; padding: 6px; transform-origin: 50% 0; animation: setBloom .45s var(--spring) both; } .pbar .pick-q { border-radius: 999px; padding-inline: 16px; } .pbar .pick-list button { border-radius: 999px; padding-inline: 16px 12px; } .pbar .pick-list li { animation: setRise .4s var(--ease) both; } .pbar .pick-list li:nth-child(-n+8) { animation-delay: calc(var(--n, 0) * 1ms); } .set-geo { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 8px 16px; border-radius: 999px; color: var(--ink); font: 500 .9rem var(--ui); background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, box-shadow .3s; } .set-geo:hover { background: rgb(var(--hi) / .08); box-shadow: 0 0 0 1px var(--line-2) inset; } .set-geo:active, .pbar .pick-btn:active { transform: scale(.98); } .set-note { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 8px 14px 8px 8px; border-radius: 999px; background: color-mix(in oklab, var(--pc-asr) 8%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--pc-asr) 25%, transparent) inset; font: 400 .8rem/1.6 var(--ui); color: var(--ink); } .pbar .dial-fine { padding-inline: 14px; } /* the bar itself: the times bloom in one after another, and lift a little under the finger */ .pb { animation: pbIn .6s var(--spring) both; } .pb:nth-child(2) { animation-delay: .05s; } .pb:nth-child(3) { animation-delay: .1s; } .pb:nth-child(4) { animation-delay: .15s; } .pb:nth-child(5) { animation-delay: .2s; } @keyframes pbIn { from { opacity: 0; transform: translateY(8px) scale(.94); } } .pb .pb-ic { transition: transform .5s var(--spring), background .4s, color .4s; } .pb:hover .pb-ic { transform: translateY(-2px) scale(1.06); } .pb.is-next .pb-ic { box-shadow: 0 0 0 4px color-mix(in oklab, var(--pc) 18%, transparent); } .pb.is-past { animation-name: pbInPast; } @keyframes pbInPast { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: .5; } } .pbar-meta { transition: background .3s, color .3s, transform .4s var(--spring); } .pbar-meta:active { transform: scale(.97); } .pbar-go { transition: background .3s, transform .45s var(--spring); } .pbar-go:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .pb, .pbar .dial-set:not([hidden]), .pbar .dial-set-in > *, .pbar .pick-pop, .pbar .pick-list li { animation: none !important; } .pb.is-past { opacity: .5; } } .set-note { border-radius: 20px; } /* the mushaf door, second form: an open book with its ribbon, not another icon in a square */ .btn-mushaf { min-height: 52px; height: 52px; gap: 10px; padding: 0 20px 0 14px; border-radius: 999px; background: rgb(var(--hi) / .04); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; transition: background .35s, box-shadow .35s, transform .45s var(--spring, ease); } .btn-mushaf:hover { background: color-mix(in oklab, #8fd3a8 9%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, #8fd3a8 45%, transparent) inset; } .btn-mushaf b { font: 600 .98rem var(--ui); } .btn-mushaf svg.bm-book { width: 38px; height: 32px; margin-top: 4px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; transform: none; transition: transform .6s var(--spring, ease); } .btn-mushaf:hover svg.bm-book { transform: translateY(-2px) rotate(-4deg); } .bm-book .pg { stroke: var(--ink); stroke-width: 1.6; fill: rgb(var(--hi) / .06); } .bm-book .ln { stroke: var(--faint); stroke-width: 1.2; } .bm-book .rb { stroke: none; fill: var(--mushaf, #8fd3a8); transform-origin: 23.7px 24.6px; transition: transform .7s var(--spring, ease); } .btn-mushaf:hover .bm-book .rb { transform: rotate(8deg); } :root[data-tone="light"] .btn-mushaf { --mushaf: #1f8a4c; } :root[data-tone="light"] .btn-mushaf:hover { background: color-mix(in oklab, #1f8a4c 7%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, #1f8a4c 35%, transparent) inset; } .bm-chip { display: inline-grid; place-items: center; height: 24px; padding-inline: 9px; border-radius: 999px; font: 600 .72rem var(--ui); color: var(--bg); background: var(--mushaf, #8fd3a8); } .pbar.painted .pb, .pbar.painted .pb.is-past { animation: none; } /* ================================================================================================= READING DOCK, second form: three plain doors (back to the top, on to the dhikr not yet finished, the next chapter) around a track with one segment per dhikr, in reading order (right to left). ================================================================================================= */ :root { --dk: #7cc8e6; --dk-ink: #06202c; } :root[data-tone="light"] { --dk: #0f6f99; --dk-ink: #ffffff; } /* a fixed frame: four slots that cannot run into each other (top · the track · next dhikr · next chapter) */ .dock.dk { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px 44px; align-items: center; gap: 6px; width: min(calc(100vw - 24px), 400px); padding: 6px; border-radius: 999px; } .dk .dk-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; color: var(--muted); background: rgb(var(--hi) / .05); box-shadow: none; } .dk .dk-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* the words stay for screen readers only */ .dk .dk-btn:hover { background: rgb(var(--hi) / .1); color: var(--ink); } .dk .dk-btn svg { width: 18px; height: 18px; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dk .dk-btn[hidden] { visibility: hidden; display: inline-flex; } .dk .dk-go svg { rotate: 180deg; } .dk .dk-go { color: var(--dk); background: color-mix(in oklab, var(--dk) 13%, transparent); } .dk .dk-next.ready { color: var(--dk-ink); background: var(--dk); animation: cRise .6s var(--spring) both; } .dk .dk-next.ready:hover { background: color-mix(in oklab, var(--dk) 86%, var(--ink)); color: var(--dk-ink); } .dk-prog { min-width: 0; display: grid; justify-items: center; gap: 6px; padding-inline: 6px; } .dk-track { display: flex; gap: 2px; width: 100%; height: 5px; } .dk-track i { flex: 1 1 0; min-width: 2px; border-radius: 3px; background: rgb(var(--hi) / .12); transition: background .45s var(--ease); } .dk-track i.part { background: color-mix(in oklab, var(--dk) 40%, rgb(var(--hi) / .12)); } .dk-track i.on { background: var(--dk); } .dk-words { display: flex; justify-content: center; align-items: baseline; gap: 8px; min-width: 0; max-width: 100%; font: 400 .74rem/1 var(--ui); color: var(--muted); white-space: nowrap; } .dk-words b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .dk-words #dockText { min-width: 0; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .dk-words #dockText { display: none; } } @media (prefers-reduced-motion: reduce) { .dk .dk-next.ready { animation: none; } .dk-track i { transition: none; } } /* ================================================================================================= LED POINTS: a flat, crisp point where something is live: blue «here, now», green «finished», amber «soon». No bulb, no gradient: a solid dot cut out of its ground by a thin ring, and a ring that widens and fades. ================================================================================================= */ :root { --led-blue: #4aa8ff; --led-green: #3dd68c; --led-amber: #ffad33; } :root[data-tone="light"] { --led-blue: #1677e0; --led-green: #13a058; --led-amber: #d98306; } @keyframes ledPing { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--led) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--led) 0%, transparent); } } @keyframes ledPingCut { 0% { box-shadow: 0 0 0 2px var(--cut, var(--bg)), 0 0 0 2px color-mix(in oklab, var(--led) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 2px var(--cut, var(--bg)), 0 0 0 8px color-mix(in oklab, var(--led) 0%, transparent); } } /* the next prayer: the point sits on the line of its name, before it */ .pb.is-next .pb-t > small { display: inline-flex; align-items: center; gap: 5px; } .pb.is-next .pb-t > small::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; --led: var(--led-blue); background: var(--led); animation: ledPing 2.4s cubic-bezier(.2, .7, .3, 1) infinite; } .pb.is-next.is-soon .pb-t > small::before { --led: var(--led-amber); animation-duration: 1.4s; } /* the recitation playing: a point on the button's shoulder, cut out of the bar it sits in */ .q-play.on { position: relative; } .q-play.on::after { content: ""; position: absolute; top: 1px; inset-inline-end: 1px; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; --led: var(--led-blue); background: var(--led); animation: ledPingCut 2.4s cubic-bezier(.2, .7, .3, 1) infinite; } /* the reading dock: the dhikr you are on glows steadily in blue; a chapter said whole turns green */ @keyframes ledSeg { 50% { opacity: .5; } } .dk-track i.cur { background: var(--led-blue); animation: ledSeg 2.4s ease-in-out infinite; } .dk-track.all i { background: var(--led-green); } @media (prefers-reduced-motion: reduce) { .pb.is-next .pb-t > small::before, .q-play.on::after, .dk-track i.cur { animation: none; } } /* ================================================================================================= NOTES (ملاحظاتي), second form: notes and task lists. Tasks are ticked on the card itself; a note can be pinned, given a day, tagged, searched and copied. Calm colours; the window opens softly. ================================================================================================= */ .nt-page, .jm-page { width: min(100% - 2 * var(--gutter), 860px); margin: 0 auto; padding: clamp(96px, 14vh, 130px) 0 90px; } .nt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .nt-head h1, .jm-head h1 { margin: 0 0 6px; font: 700 clamp(1.6rem, 4vw, 2.1rem)/1.3 var(--ui); color: var(--ink); } .nt-head p, .jm-head p { margin: 0; font: 400 .92rem/1.8 var(--ui); color: var(--muted); } .nt-head p em { font-style: normal; color: var(--led-amber); } .nt-new { display: flex; gap: 8px; } .nt-add { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding-inline: 14px 18px; border-radius: 14px; font: 600 .9rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .06); box-shadow: 0 0 0 1px var(--line-2) inset; transition: background .3s, transform .45s var(--spring, ease); } .nt-add:first-child { color: var(--bg); background: var(--ink); box-shadow: none; } .nt-add svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nt-add:hover { background: rgb(var(--hi) / .1); } .nt-add:first-child:hover { background: color-mix(in oklab, var(--ink) 88%, var(--bg)); } .nt-add:active { transform: scale(.96); } .nt-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .nt-search { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 42px; padding-inline: 12px; border-radius: 12px; background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; } .nt-search svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; } .nt-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font: 400 .9rem var(--ui); color: var(--ink); } .nt-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; } .nt-v { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px; border-radius: 9px; font: 500 .82rem var(--ui); color: var(--muted); transition: background .3s, color .3s; } .nt-v b { font-weight: 600; font-size: .72rem; color: var(--faint); } .nt-v:hover { color: var(--ink); } .nt-v.on { color: var(--ink); background: rgb(var(--hi) / .1); } .nt-v.on b { color: var(--muted); } .nt-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .nt-filter:empty { display: none; } .nt-f { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-inline: 10px 12px; border-radius: 999px; font: 500 .78rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .03); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, color .3s, box-shadow .3s; } .nt-f:hover { color: var(--ink); } .nt-f.on { color: var(--ink); background: color-mix(in oklab, var(--tg) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tg) 50%, transparent) inset; } :root[data-tone="light"] .nt-f.on { background: color-mix(in oklab, var(--tgl) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tgl) 45%, transparent) inset; } .nt-mark { flex: none; width: 11px; height: 11px; fill: var(--tg); color: var(--tg); } :root[data-tone="light"] .nt-mark { fill: var(--tgl); color: var(--tgl); } .nt-list { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 14px; } .nt-note { break-inside: avoid; display: grid; gap: 10px; margin-bottom: 14px; padding: 14px 16px 10px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; transition: opacity .4s, box-shadow .3s; } .nt-note.is-pin { box-shadow: 0 0 0 1px var(--line-2) inset, 0 0 0 0 transparent; background: color-mix(in oklab, var(--surface) 92%, var(--ink)); } .nt-note.is-fin { opacity: .62; } .nt-top { display: flex; align-items: center; gap: 8px; min-height: 32px; } .nt-top h3 { flex: 1; min-width: 0; margin: 0; font: 700 .98rem/1.5 var(--ui); color: var(--ink); overflow-wrap: anywhere; } .nt-kindmark { flex: 1; display: flex; color: var(--faint); } .nt-kindmark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .nt-ratio { font: 600 .74rem var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; } .nt-text { margin: 0; font: 400 1rem/1.95 var(--prose, var(--ui)); color: var(--ink); overflow-wrap: anywhere; } .nt-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .nt-checks li { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; font: 400 .95rem/1.7 var(--ui); color: var(--ink); } .nt-checks li span { flex: 1; min-width: 0; overflow-wrap: anywhere; transition: color .3s; } .nt-checks li.is-done span { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--faint) 70%, transparent); } .nt-chk { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 2px; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--line-2) inset; transition: background .3s, box-shadow .3s; } .nt-chk::before { content: ""; position: absolute; inset: -10px; } .nt-chk { position: relative; } .nt-chk svg { width: 15px; height: 15px; fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s cubic-bezier(.2, .9, .3, 1); } .nt-chk[aria-pressed="true"] { background: var(--led-green); box-shadow: none; } .nt-chk[aria-pressed="true"] svg { stroke-dashoffset: 0; } .nt-prog { height: 4px; border-radius: 999px; background: rgb(var(--hi) / .08); overflow: hidden; } .nt-prog i { display: block; height: 100%; border-radius: inherit; background: var(--led-green); transition: width .5s cubic-bezier(.2, .9, .3, 1); } .nt-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); } .nt-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; } .nt-tag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding-inline: 7px 9px; border-radius: 999px; font: 500 .72rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--tg) 13%, transparent); } :root[data-tone="light"] .nt-tag { background: color-mix(in oklab, var(--tgl) 9%, transparent); } .nt-foot time { font: 400 .7rem var(--ui); color: var(--faint); } .nt-tools { display: inline-flex; } .nt-due-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 8px 10px; border-radius: 999px; font: 600 .72rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .06); } .nt-due-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); } .nt-due-chip.today::before { background: var(--led-blue); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-blue) 22%, transparent); } .nt-due-chip.soon::before { background: var(--led-blue); opacity: .6; } .nt-due-chip.late { color: var(--led-amber); background: color-mix(in oklab, var(--led-amber) 12%, transparent); } .nt-due-chip.late::before { background: var(--led-amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-amber) 22%, transparent); } .nt-due-chip.fin::before { background: var(--led-green); } .nt-ic { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--faint); transition: background .25s, color .25s; } .nt-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nt-ic:hover { color: var(--ink); background: rgb(var(--hi) / .06); } .nt-ic.ok { color: var(--led-green); } .nt-pin.on { color: var(--ink); } .nt-pin.on svg { fill: currentColor; } .nt-del.ask { color: #ff8c95; background: color-mix(in oklab, #ff8c95 14%, transparent); } :root[data-tone="light"] .nt-del.ask { color: #c93a4b; } .nt-empty { margin: 30px 0; text-align: center; font: 400 .95rem var(--ui); color: var(--muted); } .nt-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; } .nt-modal[hidden] { display: none; } .nt-modal-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .55); animation: ntFade .3s ease both; } .nt-box { position: relative; display: grid; gap: 12px; width: min(100%, 540px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; padding: 18px 20px 20px; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2) inset, 0 40px 90px -40px rgb(0 0 0 / .8); animation: ntBloom .5s cubic-bezier(.2, 1.2, .35, 1) both; transform-origin: 50% 100%; } .nt-modal.closing .nt-box { animation: ntWilt .22s cubic-bezier(.4, 0, 1, 1) forwards; } .nt-modal.closing .nt-modal-bg { animation: ntFade .22s ease reverse forwards; } @keyframes ntFade { from { opacity: 0; } } @keyframes ntBloom { from { opacity: 0; transform: translateY(18px) scale(.96); } } @keyframes ntWilt { to { opacity: 0; transform: translateY(12px) scale(.97); } } .nt-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nt-box-h h2 { margin: 0; font: 700 1.08rem var(--ui); color: var(--ink); } .nt-kind { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgb(var(--hi) / .05); } .nt-kind button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 10px 12px; border-radius: 8px; font: 500 .8rem var(--ui); color: var(--muted); transition: background .3s, color .3s; } .nt-kind button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nt-kind button[aria-pressed="true"] { color: var(--ink); background: rgb(var(--hi) / .12); } .nt-title { height: 44px; padding-inline: 14px; border: 0; border-radius: 12px; font: 600 1rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; outline: none; } .nt-title:focus, .nt-field textarea:focus, .nt-items input:focus { box-shadow: 0 0 0 1.5px var(--line-2) inset; } .nt-field { position: relative; display: block; } .nt-field[hidden], .nt-items[hidden] { display: none; } .nt-field textarea { width: 100%; min-height: 140px; resize: vertical; padding: 12px 14px 30px; border: 0; border-radius: 14px; font: 400 1rem/1.9 var(--prose, var(--ui)); color: var(--ink); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; outline: none; } .nt-count { position: absolute; inset-inline-start: 12px; bottom: 9px; font: 500 .72rem var(--ui); color: var(--faint); font-variant-numeric: tabular-nums; transition: color .3s; } .nt-count.near { color: var(--led-amber); } .nt-items { display: grid; gap: 6px; } .nt-items ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .nt-items li { display: flex; align-items: center; gap: 8px; } .nt-row-dot { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: 0 0 0 1.5px var(--line-2) inset; } .nt-items li[data-done="1"] .nt-row-dot { background: var(--led-green); box-shadow: none; } .nt-items input { flex: 1; min-width: 0; height: 40px; padding-inline: 12px; border: 0; border-radius: 10px; font: 400 .92rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; outline: none; } .nt-rowx { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--faint); } .nt-rowx:hover { color: var(--ink); background: rgb(var(--hi) / .06); } .nt-rowx svg, .nt-additem svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .nt-additem { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 10px 12px; border-radius: 10px; font: 500 .84rem var(--ui); color: var(--muted); } .nt-additem:hover { color: var(--ink); background: rgb(var(--hi) / .06); } .nt-opts { display: grid; gap: 8px; } .nt-due { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .nt-lab { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 4px; font: 500 .8rem var(--ui); color: var(--muted); } .nt-lab svg, .nt-pinopt svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nt-due button, .nt-date, .nt-pinopt { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 999px; font: 500 .8rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; transition: background .3s, color .3s, box-shadow .3s; } .nt-due button[aria-pressed="true"], .nt-date.on, .nt-pinopt[aria-pressed="true"] { color: var(--ink); background: color-mix(in oklab, var(--led-blue) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--led-blue) 50%, transparent) inset; } .nt-pinopt[aria-pressed="true"] svg { fill: currentColor; } .nt-pinopt { justify-self: start; } .nt-date { padding-inline: 8px; } .nt-date input { height: 30px; border: 0; background: none; color: inherit; font: inherit; color-scheme: dark; outline: none; } :root[data-tone="light"] .nt-date input { color-scheme: light; } .nt-pick { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; } .nt-pick legend { padding: 0; margin-bottom: 8px; font: 500 .8rem var(--ui); color: var(--muted); } .nt-pick > div:first-of-type { display: flex; flex-wrap: wrap; gap: 6px; } .nt-tog { height: 32px; padding-inline: 9px 11px; cursor: pointer; background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; color: var(--muted); transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--spring, ease); } .nt-tog[aria-pressed="true"] { color: var(--ink); background: color-mix(in oklab, var(--tg) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tg) 55%, transparent) inset; } :root[data-tone="light"] .nt-tog[aria-pressed="true"] { background: color-mix(in oklab, var(--tgl) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tgl) 45%, transparent) inset; } .nt-tog:active { transform: scale(.94); } .nt-newtag { display: flex; gap: 6px; } .nt-newtag input { flex: 1; min-width: 0; height: 38px; padding-inline: 12px; border: 0; border-radius: 10px; font: 400 .86rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .04); box-shadow: 0 0 0 1px var(--line) inset; outline: none; } .nt-newtag button { height: 38px; padding-inline: 14px; border-radius: 10px; font: 500 .84rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .07); } .nt-acts { display: flex; gap: 8px; padding-top: 4px; } .nt-save, .nt-cancel { height: 46px; padding-inline: 22px; border-radius: 14px; font: 600 .92rem var(--ui); } .nt-save { flex: 1; color: var(--bg); background: var(--ink); } .nt-cancel { color: var(--muted); background: rgb(var(--hi) / .05); } @media (max-width: 560px) { .nt-list { columns: 1; } .nt-new { width: 100%; } .nt-add { flex: 1; justify-content: center; } .nt-views { width: 100%; } .nt-v { flex: 1; justify-content: center; padding-inline: 6px; } .nt-modal { place-items: end center; padding: 8px; } .nt-box { border-radius: 24px 24px 18px 18px; padding: 16px; } } @media (prefers-reduced-motion: reduce) { .nt-box, .nt-modal-bg, .nt-modal.closing .nt-box { animation: none; } .nt-chk svg, .nt-prog i { transition: none; } } /* ================================================================================================= FRIDAY (سنن الجمعة): one card for each sunnah, each in its own colour, its own outline and its own sign. ================================================================================================= */ .jm-head { margin-bottom: 22px; } .jm-head p b { color: var(--ink); font-weight: 600; } .jm-meter { height: 6px; margin-top: 16px; border-radius: 999px; background: rgb(var(--hi) / .08); overflow: hidden; } .jm-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--led-green, #4fdc8c); transition: width .7s cubic-bezier(.2, .9, .3, 1); } .jm-sum { margin-top: 8px !important; font-size: .82rem !important; } .jm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; } .jm-card { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px 18px 16px; background: color-mix(in oklab, var(--jc) 9%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--jc) 28%, transparent) inset; transition: background .5s, box-shadow .5s; animation: jmIn .55s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i) * 45ms); } @keyframes jmIn { from { opacity: 0; transform: translateY(12px); } } :root[data-tone="light"] .jm-card { background: color-mix(in oklab, var(--jcl) 6%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--jcl) 25%, transparent) inset; } .jm-card.is-done { background: color-mix(in oklab, var(--jc) 16%, var(--surface)); } :root[data-tone="light"] .jm-card.is-done { background: color-mix(in oklab, var(--jcl) 11%, var(--bg)); } /* the outlines: no two alike */ .jm-arch { border-radius: 64px 64px 16px 16px; padding-top: 24px; } .jm-leaf { border-radius: 34px 8px 34px 8px; } .jm-notch { border-radius: 14px; clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px); } .jm-tab { border-radius: 4px 20px 20px 20px; margin-top: 10px; } .jm-tab::before { content: ""; position: absolute; top: -10px; inset-inline-start: 0; width: 38%; height: 12px; border-radius: 12px 12px 0 0; background: inherit; box-shadow: inherit; clip-path: inset(0 0 2px 0); } .jm-pill { border-radius: 44px; padding-inline: 22px; } .jm-cut { border-radius: 0; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); } .jm-scroll { border-radius: 8px; border-inline: 6px double color-mix(in oklab, var(--jc) 45%, transparent); } .jm-drop { border-radius: 44px 44px 44px 6px; } .jm-wave { border-radius: 22px 22px 0 0; padding-bottom: 26px; -webkit-mask: radial-gradient(10px 8px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 100% repeat-x; mask: radial-gradient(10px 8px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 100% repeat-x; } .jm-check { position: relative; align-self: start; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: var(--jc); background: color-mix(in oklab, var(--jc) 16%, transparent); transition: background .4s, color .4s; } :root[data-tone="light"] .jm-check { color: var(--jcl); background: color-mix(in oklab, var(--jcl) 11%, transparent); } .jm-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .jm-box { position: absolute; bottom: -5px; inset-inline-end: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--jc) 60%, transparent) inset; transition: background .35s, box-shadow .35s; } .jm-box svg { width: 14px; height: 14px; fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s cubic-bezier(.2, .9, .3, 1) .05s; } .jm-check[aria-pressed="true"] .jm-box { background: var(--led-green, #4fdc8c); box-shadow: 0 0 8px color-mix(in oklab, var(--led-green, #4fdc8c) 55%, transparent); } .jm-check[aria-pressed="true"] .jm-box svg { stroke-dashoffset: 0; } .jm-body { min-width: 0; } .jm-body h2 { margin: 2px 0 8px; font: 700 1.04rem/1.5 var(--ui); color: var(--ink); } .jm-t { margin: 0; font: 400 1.04rem/2 var(--prose, var(--ui)); color: color-mix(in oklab, var(--ink) 90%, var(--bg)); } .jm-src { margin: 8px 0 0; font: 400 .74rem/1.7 var(--ui); color: var(--faint); } .jm-link { display: inline-block; margin-top: 10px; font: 500 .82rem var(--ui); color: var(--jc); text-decoration: underline; text-underline-offset: 4px; } :root[data-tone="light"] .jm-link { color: var(--jcl); } @media (prefers-reduced-motion: reduce) { .jm-card { animation: none; } .jm-meter span, .jm-box svg { transition: none; } } /* ================================================================================================= HOME, sixth form: under the prayer bar, a row of doors (the heart's question, the notes) in one width with the bar above; on a Friday, the day's sunnahs come first across the whole row. ================================================================================================= */ .hero .hal-invite { display: none; } .doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(100%, 740px); margin: 18px auto 0; } .door { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 12px 12px 14px; border-radius: 18px; text-align: start; color: var(--ink); background: rgb(var(--hi) / .035); box-shadow: 0 0 0 1px var(--line) inset; transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .5s var(--spring, ease); } .door:hover { background: rgb(var(--hi) / .07); box-shadow: 0 0 0 1px var(--line-2) inset; } .door:active { transform: scale(.985); } .door-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--dc); background: color-mix(in oklab, var(--dc) 15%, transparent); } .door-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .door-hal { --dc: #f09ab4; } .door-notes { --dc: #8fc9e8; } :root[data-tone="light"] .door-hal { --dc: #b03a63; } :root[data-tone="light"] .door-notes { --dc: #1f6f9c; } .door-t { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.35; } .door-t b { font: 600 .95rem var(--ui); } .door-t small { font: 400 .76rem var(--ui); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .door-notes.is-late .door-t small { color: var(--led-amber); } .door-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--faint); transition: transform .45s var(--spring, ease), color .3s; } .door-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .door:hover .door-go { color: var(--ink); transform: translateX(-3px); } /* Friday: a band of its own, green for the day of gathering, its nine sunnahs as nine points */ .door-fri { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; min-height: 76px; padding: 14px 16px; background: color-mix(in oklab, var(--led-green) 9%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--led-green) 32%, transparent) inset; } .door-fri:hover { background: color-mix(in oklab, var(--led-green) 14%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--led-green) 50%, transparent) inset; } .door-fri-k { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding-inline: 10px 12px; border-radius: 999px; font: 600 .76rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--led-green) 16%, transparent); white-space: nowrap; } .door-fri-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--led-green); --led: var(--led-green); animation: ledPing 2.4s cubic-bezier(.2, .7, .3, 1) infinite; } .door-fri-dots { display: grid; grid-template-columns: repeat(9, 8px); gap: 5px; } .door-fri-dots i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--jc) 60%, transparent) inset; } .door-fri-dots i.on { background: var(--jc); box-shadow: none; } @media (max-width: 640px) { .doors { grid-template-columns: 1fr; gap: 8px; } .door-fri { grid-template-columns: 1fr auto; row-gap: 10px; } .door-fri-k { grid-column: 1 / -1; justify-self: start; } .door-fri .door-t { grid-column: 1; } .door-fri-dots { grid-column: 1; grid-row: 3; } .door-fri .door-go { grid-column: 2; grid-row: 2 / 4; } } @media (prefers-reduced-motion: reduce) { .door-fri-k::before { animation: none; } } /* ================================================================================================= TOP BAR, fifth form: one calm strip. The search takes the room it needs; the three doors (the Quran, the settings, the chapters) sit together as one quiet group, none of them shouting in white. ================================================================================================= */ .nav .nav-pill { gap: 6px; padding: 6px !important; border-radius: 18px !important; background: color-mix(in oklab, var(--surface) 82%, transparent) !important; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: 0 0 0 1px var(--line) inset, 0 14px 34px -20px rgb(0 0 0 / .85) !important; } .nav .logo { padding-inline: 6px 4px; } .nav .search { border-radius: 12px !important; background: rgb(var(--hi) / .05) !important; box-shadow: none !important; transition: background .3s, box-shadow .3s; } .nav .search:focus-within { background: rgb(var(--hi) / .08) !important; box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--led-blue) 55%, transparent) inset !important; } .nav :is(.quran-btn, .theme-btn, .menu-btn) { border-radius: 12px !important; color: var(--muted) !important; background: transparent !important; box-shadow: none !important; font-weight: 500; transition: background .3s, color .3s, transform .45s var(--spring, ease); } .nav :is(.quran-btn, .theme-btn, .menu-btn):hover, .nav :is(.theme-btn, .menu-btn)[aria-expanded="true"] { color: var(--ink) !important; background: rgb(var(--hi) / .07) !important; } .nav .quran-btn svg { color: #8fd3a8; } :root[data-tone="light"] .nav .quran-btn svg { color: #1f8a4c; } .nav .menu-btn { color: var(--ink) !important; background: rgb(var(--hi) / .08) !important; } .nav .menu-btn:hover { background: rgb(var(--hi) / .12) !important; } .nav .quran-btn { position: relative; margin-inline-start: 6px; } .nav .quran-btn::before { content: ""; position: absolute; inset-inline-start: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--line); } @media (min-width: 561px) { .nav :is(.quran-btn, .theme-btn, .menu-btn) { height: 44px; } .nav .search { height: 44px !important; } } /* ================================================================================================= READING DOCK, in the chapter's own colour (--dk is set from the chapter's palette). The count and the words sit under the track on their own line, never squeezed into it. ================================================================================================= */ .dock.dk { width: min(calc(100vw - 24px), 470px); padding: 7px; } .dk-prog { gap: 7px; padding-inline: 8px; } .dk-track { height: 6px; gap: 3px; } .dk-track i { border-radius: 4px; background: rgb(var(--hi) / .1); } .dk-track i.on, .dk-track.all i { background: var(--dk); } .dk-track i.part { background: color-mix(in oklab, var(--dk) 38%, rgb(var(--hi) / .1)); } .dk-track i.cur { background: var(--dk); animation: ledSeg 2.4s ease-in-out infinite; } .dk-words { flex-wrap: wrap; justify-content: center; row-gap: 2px; column-gap: 8px; text-align: center; white-space: normal; font: 400 .74rem/1.35 var(--ui); } .dk-words b { color: var(--dk); font-size: .8rem; } .dk-words #dockText { overflow: visible; text-overflow: clip; white-space: normal; color: var(--muted); } @media (max-width: 640px) { .dk-words #dockText { display: inline; font-size: .68rem; } .dock.dk { border-radius: 28px; } } /* ================================================================================================= A CHAPTER FINISHED, second form: a seal in the chapter's colour drawn round and ticked, the chapter's name, what was said, and the way on to the next chapter. ================================================================================================= */ .complete.cmp2 { position: relative; display: grid; justify-items: center; gap: 6px; width: min(100% - 2 * var(--gutter), 640px); margin: 22px auto 0; padding: 34px 22px 22px; border-radius: 28px; text-align: center; overflow: hidden; background: radial-gradient(110% 70% at 50% 0%, color-mix(in oklab, var(--ch) 16%, transparent), transparent 62%), var(--surface) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--ch) 30%, transparent) inset !important; outline: 0 !important; } .complete.cmp2[hidden] { display: none; } .complete.cmp2::before { display: none; } .complete.cmp2 svg { width: auto; height: auto; margin: 0; fill: none; stroke: none; animation: none; } .cmp-seal { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 6px; border-radius: 50%; background: color-mix(in oklab, var(--ch) 12%, transparent); } .complete.cmp2 .cmp-seal svg { width: 78px; height: 78px; } .cmp-seal .r { fill: none; stroke: var(--ch); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 170; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 32px 32px; } .cmp-seal .k { fill: none; stroke: var(--ch); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 0; } .complete.cmp2:not([hidden]) .cmp-seal .r { animation: cmpRing 1s cubic-bezier(.65, 0, .35, 1) both; } .complete.cmp2:not([hidden]) .cmp-seal .k { animation: cmpTick .45s .85s cubic-bezier(.2, .9, .3, 1) both; } .complete.cmp2:not([hidden]) .cmp-seal { animation: cmpPop .6s 1.15s cubic-bezier(.3, 1.6, .5, 1) both; } @keyframes cmpRing { from { stroke-dashoffset: 170; } } @keyframes cmpTick { from { stroke-dashoffset: 34; } } @keyframes cmpPop { 40% { transform: scale(1.08); } } .cmp-k { display: inline-flex; align-items: center; height: 26px; padding-inline: 12px; border-radius: 999px; font: 600 .76rem var(--ui); color: var(--ch); background: color-mix(in oklab, var(--ch) 13%, transparent); } .complete.cmp2 p { margin: 4px 0 0; font: 700 clamp(1.15rem, 1rem + .6vw, 1.4rem)/1.5 var(--ui); color: var(--ink); } .complete.cmp2 small { display: block; margin: 0; font: 400 .9rem var(--ui); color: var(--muted); } .cmp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; } .cmp-stats:empty { display: none; } .cmp-stats span { display: inline-flex; align-items: baseline; gap: 6px; height: 34px; padding: 0 14px; border-radius: 12px; font: 400 .8rem/34px var(--ui); color: var(--muted); background: rgb(var(--hi) / .05); } .cmp-stats b { font: 700 1rem var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; } .cmp-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; width: 100%; } .complete.cmp2 .cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; margin: 0; padding-inline: 18px 14px; border-radius: 16px; font: 600 .9rem var(--ui); transition: background .3s, transform .45s var(--spring, ease); } .complete.cmp2 .cmp-btn[hidden] { display: none; } .complete.cmp2 .cmp-again { padding-inline: 20px; color: var(--bg); background: var(--ink); box-shadow: none; } .complete.cmp2 .cmp-next { color: var(--ink); background: color-mix(in oklab, var(--nx) 13%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--nx) 40%, transparent) inset; } .complete.cmp2 .cmp-next:hover { background: color-mix(in oklab, var(--nx) 22%, transparent); } .cmp-next small { font: 400 .74rem var(--ui); color: var(--muted); } .cmp-next b { font-weight: 700; } .complete.cmp2 .cmp-next svg { width: 18px; height: 18px; stroke: var(--nx); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring, ease); } .complete.cmp2 .cmp-next:hover svg { transform: translateX(-3px); } .complete.cmp2 .cmp-btn:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .complete.cmp2:not([hidden]) .cmp-seal, .complete.cmp2:not([hidden]) .cmp-seal .r, .complete.cmp2:not([hidden]) .cmp-seal .k { animation: none; } } /* ================================================================================================= MISBAHA, second form. Outside: a quiet round button whose ring fills with the round of 33, the count in its middle. Inside: the beads in a calm sea-green, and one large round key that holds the count and is pressed to count. ================================================================================================= */ :root { --mb: #63cdb9; --mb-hi: #c8f2ea; } :root[data-tone="light"] { --mb: #12806e; --mb-hi: #5fc7b4; } .mis-fab.mf2 { width: 58px; height: 58px; border-radius: 50%; background: color-mix(in oklab, var(--surface) 84%, transparent) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 0 1px var(--line) inset, 0 14px 30px -16px rgb(0 0 0 / .85) !important; } .mis-fab.mf2:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 16px 34px -16px rgb(0 0 0 / .9) !important; } .mis-fab.mf2 svg, .mis-fab.mf2:hover svg { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); transform: rotate(-90deg); } .mis-fab.mf2 .fr { fill: none; stroke: rgb(var(--hi) / .1); stroke-width: 3; } .mis-fab.mf2 .fa { fill: none; stroke: var(--mb); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 157.08; stroke-dashoffset: 157.08; transition: stroke-dashoffset .5s cubic-bezier(.2, .9, .3, 1); } .mis-fab.mf2 b { font: 700 .92rem/1 var(--ui); color: var(--ink); } .mis-fab.mf2.bump svg { animation: none; } .mis-fab.mf2.bump b { animation: mfBump .4s cubic-bezier(.3, 1.6, .5, 1); } @keyframes mfBump { 40% { transform: scale(1.2); } } .mis-panel { background: var(--surface) !important; border-radius: 28px; box-shadow: 0 0 0 1px var(--line) inset, 0 50px 100px -40px rgb(0 0 0 / .9); } .misbaha.mb2 .thread { stroke: rgb(var(--hi) / .2); } .misbaha.mb2 .head, .misbaha.mb2 .knot { fill: var(--mb); } .misbaha.mb2 .tail { stroke: color-mix(in oklab, var(--mb) 70%, transparent); } .misbaha.mb2 .hb { fill: url(#hbO); stroke: rgb(var(--hi) / .14); stroke-width: .6; } .misbaha.mb2 .hb.on { fill: url(#hbG); stroke: rgb(0 0 0 / .15); } .misbaha.mb2 .hb.cur { filter: drop-shadow(0 0 5px color-mix(in oklab, var(--mb) 75%, transparent)); } .misbaha.mb2 .phrase { color: var(--ink); } .misbaha.mb2 .ph-dots i.on { background: var(--mb); } .misbaha.mb2 .ph-arrow { border-radius: 12px; } .misbaha.mb2 .tasbih { display: grid; place-content: center; justify-items: center; gap: 2px; width: clamp(168px, 46vw, 208px); height: clamp(168px, 46vw, 208px); margin-top: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 28%, color-mix(in oklab, var(--mb) 13%, var(--surface-2, var(--surface))), var(--surface) 72%) !important; box-shadow: 0 0 0 1px var(--line) inset, 0 22px 44px -26px rgb(0 0 0 / .9); transition: transform .4s var(--spring, ease), box-shadow .3s; } .misbaha.mb2 .tasbih:hover { box-shadow: 0 0 0 1px var(--line-2) inset, 0 22px 44px -26px rgb(0 0 0 / .9); } .misbaha.mb2 .tasbih:active { transform: scale(.965); } .misbaha.mb2 .tasbih svg { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); } .misbaha.mb2 .tasbih .tr { stroke: rgb(var(--hi) / .07); stroke-width: 3; } .misbaha.mb2 .tasbih .arc { stroke: var(--mb); stroke-width: 3.4; } .misbaha.mb2 .tasbih b { position: relative; font: 600 clamp(2.7rem, 2.2rem + 2vw, 3.5rem)/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums; } .misbaha.mb2 .tasbih small { position: relative; font: 400 .8rem var(--ui); color: var(--faint); } .misbaha.mb2 .tb-hint { position: relative; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font: 500 .7rem var(--ui); color: var(--mb); background: color-mix(in oklab, var(--mb) 12%, transparent); } .misbaha.mb2.is-done .tasbih b { color: var(--mb); } .misbaha.mb2.is-done .tb-hint { visibility: hidden; } .misbaha.mb2 .rounds { justify-content: center; gap: 6px; margin-top: 12px; } .misbaha.mb2 .rounds i { width: 7px; height: 7px; border-radius: 50%; transform: none; background: rgb(var(--hi) / .12); } .misbaha.mb2 .rounds i.on { background: var(--mb); } .misbaha.mb2 .rounds i.cur { background: transparent; box-shadow: 0 0 0 1.5px var(--mb) inset; } .misbaha.mb2 .row { justify-content: center; margin-top: 18px; } .misbaha.mb2 .target { gap: 2px; padding: 3px; border-radius: 12px; background: rgb(var(--hi) / .05); } .misbaha.mb2 .target button { height: 34px; min-width: 46px; border-radius: 9px; font: 600 .84rem var(--ui); } .misbaha.mb2 .target button[aria-pressed="true"] { color: var(--ink); background: color-mix(in oklab, var(--mb) 18%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--mb) 45%, transparent) inset; } .misbaha.mb2 .total { margin-top: 12px; padding: 5px 12px; border-radius: 999px; font: 400 .76rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .04); } /* the chapter colours are drawn for ink on a light leaf; on the dark page they are lifted so a bar, a seal or an arrow in them reads */ .dock.dk { --dk: color-mix(in oklab, var(--dkr) 62%, #fff); } .complete.cmp2 { --ch: color-mix(in oklab, var(--chr) 62%, #fff); } .cmp-next { --nx: color-mix(in oklab, var(--nxr) 62%, #fff); } :root[data-tone="light"] .dock.dk { --dk: var(--dkr); } :root[data-tone="light"] .complete.cmp2 { --ch: var(--chr); } :root[data-tone="light"] .cmp-next { --nx: var(--nxr); } /* no light gathered in the middle of a shape (it reads as puffed up): the key, the beads and the finished card are flat colour, with a thin ring or a soft wash from one edge at most */ .misbaha.mb2 .tasbih { background: var(--surface-2, var(--surface)) !important; box-shadow: 0 0 0 1px var(--line) inset !important; } .misbaha.mb2 .tasbih:hover { background: color-mix(in oklab, var(--mb) 6%, var(--surface-2, var(--surface))) !important; } .misbaha.mb2 .hb { fill: rgb(var(--hi) / .14); stroke: rgb(var(--hi) / .1); } .misbaha.mb2 .hb.on { fill: var(--mb); stroke: none; } .misbaha.mb2 .hb.cur { filter: none; stroke: color-mix(in oklab, var(--mb) 45%, transparent); stroke-width: 2.4; paint-order: stroke; } .complete.cmp2 { background: linear-gradient(180deg, color-mix(in oklab, var(--ch) 10%, transparent), transparent 55%), var(--surface) !important; } /* the notes are written in Noto Naskh Arabic (OFL, clear at small sizes): the text of a note, its tasks, and the fields where they are written */ .nt-text, .nt-checks li span, .nt-field textarea, .nt-items input { font-family: "Noto Naskh Arabic", var(--prose, var(--ui)); font-size: 1.04em; line-height: 1.9; } /* ================================================================================================= NOTES, third form (10 Nov): softer and alive. Nothing jumps from one state to the next: a ticked task fills its box with a spring, the tick is drawn, a fine ring opens from it, and a line runs through the words from where they begin; the bar grows, the count turns. The view switch has a thumb that slides; the cards glide to their new places (see flip in notes.js). Each card takes the colour of its first tag in its edge; the edge warms under the pointer. No gold, no glow. ================================================================================================= */ .nt-note { --tc: var(--tg, var(--ink)); position: relative; padding: 16px 18px 10px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); transition: opacity .6s ease, box-shadow .45s ease, background .45s ease; } :root[data-tone="light"] .nt-note { --tc: var(--tgl, var(--ink)); } .nt-note.has-tag { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 26%, var(--line)); } .nt-note.has-tag::before { content: ""; position: absolute; top: 16px; bottom: 16px; inset-inline-start: 0; width: 2px; border-radius: 2px; background: color-mix(in oklab, var(--tc) 70%, transparent); } @media (hover: hover) { .nt-note:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 48%, transparent); } } .nt-note.is-pin { background: color-mix(in oklab, var(--surface) 94%, var(--led-blue)); } .nt-note.is-fin { opacity: .6; } .nt-pin.on { color: var(--led-blue); } .nt-ic { transition: background .25s, color .25s, transform .4s var(--spring, ease); } .nt-ic:active { transform: scale(.88); } /* the tick */ .nt-chk { border-radius: 8px; transition: background .35s ease, box-shadow .35s ease, transform .5s var(--spring, cubic-bezier(.3,1.5,.5,1)); } .nt-chk:active { transform: scale(.86); } .nt-chk svg { transition: stroke-dashoffset .42s cubic-bezier(.3,.8,.3,1) .08s; } .nt-chk[aria-pressed="false"] svg { transition-delay: 0s; transition-duration: .2s; } .nt-chk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1.5px var(--led-green); opacity: 0; } .nt-chk.pop { animation: ntChkPop .55s cubic-bezier(.3,1.5,.5,1); } .nt-chk.pop::after { animation: ntRing .7s cubic-bezier(.2,.8,.3,1); } @keyframes ntChkPop { 0% { transform: scale(.82); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes ntRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } } .nt-checks li span { color: var(--ink); transition: color .5s ease .1s; } .nt-checks li.is-done span { text-decoration: none; color: var(--faint); } .nt-it { font-style: normal; background: linear-gradient(currentColor, currentColor) no-repeat right 58% / 0 1.5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .5s cubic-bezier(.4,.1,.2,1); } .nt-checks li.is-done .nt-it { background-size: 100% 1.5px; } .nt-checks li:not(.is-done) .nt-it { transition-duration: .3s; } /* the bar and the count */ .nt-prog { height: 4px; } .nt-prog i { transition: width .7s cubic-bezier(.2,.9,.25,1), background .5s; background: color-mix(in oklab, var(--led-green) 80%, transparent); } .nt-prog.full i { background: var(--led-green); } .nt-ratio { display: inline-block; transition: color .4s; } .nt-prog.full ~ * .nt-ratio, .nt-note.is-fin .nt-ratio { color: var(--led-green); } /* the views: a thumb that slides */ .nt-views { position: relative; } .nt-v { position: relative; z-index: 1; } .nt-v.on { background: none; } .nt-vthumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: rgb(var(--hi) / .1); pointer-events: none; } .nt-vthumb.go { transition: transform .5s cubic-bezier(.3,1.25,.5,1), width .5s cubic-bezier(.3,1.25,.5,1); } /* small things answer the touch */ .nt-f, .nt-v, .nt-due button, .nt-pinopt, .nt-kind button, .nt-additem, .nt-save, .nt-cancel, .nt-newtag button { transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--spring, ease); } .nt-f:active, .nt-v:active, .nt-due button:active, .nt-pinopt:active, .nt-kind button:active, .nt-additem:active, .nt-save:active, .nt-cancel:active, .nt-newtag button:active { transform: scale(.95); } .nt-search { transition: box-shadow .3s; } .nt-search:focus-within { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--led-blue) 60%, transparent) inset; } .nt-search:focus-within svg { stroke: var(--led-blue); } .nt-search svg { transition: stroke .3s; } .nt-title, .nt-field textarea, .nt-items input, .nt-newtag input { transition: box-shadow .3s; } .nt-title:focus, .nt-field textarea:focus, .nt-items input:focus, .nt-newtag input:focus { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--led-blue) 55%, transparent) inset; } .nt-del.ask { animation: ntAsk .45s cubic-bezier(.3,1.4,.5,1); } @keyframes ntAsk { 30% { transform: translateX(-2px); } 60% { transform: translateX(2px); } } @media (prefers-reduced-motion: reduce) { .nt-chk.pop, .nt-chk.pop::after, .nt-del.ask { animation: none; } .nt-it, .nt-vthumb.go, .nt-prog i, .nt-chk svg { transition: none; } } /* ================================================================================================= NOTES, the bar above the cards and the tick box, refined (10 Nov). Each view has its own calm colour, shown as a small LED point before its name; the sliding thumb takes the colour of the chosen view (a light wash and a hairline edge) and the count sits in a small round badge. The search field matches the bar's height and corners. The tick box is a soft rounded square with a faint fill; ticked, it fills green with a crisp halo ring and a bold drawn tick. No centre glow. ================================================================================================= */ .nt-bar { gap: 10px; margin-bottom: 12px; } .nt-search { height: 46px; border-radius: 15px; padding-inline: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; } .nt-views { --vc: var(--ink); gap: 2px; padding: 4px; border-radius: 15px; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset; } .nt-views[data-on="all"] { --vc: #a9b4c6; } .nt-views[data-on="tasks"] { --vc: var(--led-green); } .nt-views[data-on="today"] { --vc: var(--led-blue); } .nt-views[data-on="pinned"] { --vc: #b79cf2; } :root[data-tone="light"] .nt-views[data-on="all"] { --vc: #5b6678; } :root[data-tone="light"] .nt-views[data-on="pinned"] { --vc: #6b4fc4; } .nt-v { --dc: #a9b4c6; height: 38px; gap: 7px; padding-inline: 12px 13px; border-radius: 11px; font: 500 .82rem var(--ui); color: var(--muted); } .nt-v[data-v="tasks"] { --dc: var(--led-green); } .nt-v[data-v="today"] { --dc: var(--led-blue); } .nt-v[data-v="pinned"] { --dc: #b79cf2; } :root[data-tone="light"] .nt-v[data-v="all"] { --dc: #5b6678; } :root[data-tone="light"] .nt-v[data-v="pinned"] { --dc: #6b4fc4; } .nt-v::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dc); opacity: .55; transition: opacity .3s, box-shadow .3s; } .nt-v.on::before { opacity: 1; box-shadow: 0 0 0 3px color-mix(in oklab, var(--dc) 22%, transparent); } .nt-v.on { color: var(--ink); } .nt-v b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 999px; font: 600 .7rem/1 var(--ui); color: var(--muted); background: rgb(var(--hi) / .07); transition: background .3s, color .3s; } .nt-v.on b { color: var(--ink); background: color-mix(in oklab, var(--dc) 22%, transparent); } .nt-vthumb { top: 4px; bottom: 4px; border-radius: 11px; background: color-mix(in oklab, var(--vc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--vc) 38%, transparent); } .nt-vthumb.go { transition: transform .5s cubic-bezier(.3,1.25,.5,1), width .5s cubic-bezier(.3,1.25,.5,1), background .4s, box-shadow .4s; } .nt-filter { gap: 7px; } .nt-f { min-height: 32px; padding-inline: 10px 13px; background: var(--surface); } .nt-f .nt-mark { transition: transform .45s var(--spring, ease); } .nt-f.on .nt-mark { transform: rotate(45deg) scale(1.1); } @media (max-width: 560px) { .nt-v { padding-inline: 6px; gap: 5px; font-size: .78rem; } .nt-v b { min-width: 18px; height: 18px; } } /* the tick box */ .nt-chk { width: 23px; height: 23px; margin-top: 3px; border-radius: 7px; background: rgb(var(--hi) / .035); box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--ink) 26%, transparent) inset; } @media (hover: hover) { .nt-chk[aria-pressed="false"]:hover { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--led-green) 70%, transparent) inset; background: color-mix(in oklab, var(--led-green) 8%, transparent); } } .nt-chk svg { width: 14px; height: 14px; stroke-width: 3.2; stroke: #06210f; } :root[data-tone="light"] .nt-chk svg { stroke: #fff; } .nt-chk[aria-pressed="true"] { background: var(--led-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-green) 18%, transparent); } .nt-chk::after { border-radius: 9px; } /* NOTES, the head (10 Nov): the title with a short bar beneath it in three segments, the colours of the views below; the summary as small chips, each with its LED point; the two ways to begin as coloured buttons (a note in blue, a task list in green), each with its icon in a round chip and a small plus that turns when touched. */ .nt-head { align-items: center; margin-bottom: 22px; } .nt-head h1 { margin: 0; } .nt-head h1::after { content: ""; display: block; width: 54px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(to left, var(--led-blue) 0 33%, transparent 33% 37%, var(--led-green) 37% 66%, transparent 66% 70%, #b79cf2 70%); } :root[data-tone="light"] .nt-head h1::after { background: linear-gradient(to left, var(--led-blue) 0 33%, transparent 33% 37%, var(--led-green) 37% 66%, transparent 66% 70%, #6b4fc4 70%); } @media (prefers-reduced-motion: no-preference) { .nt-head h1::after { animation: barIn .9s .2s var(--glide, cubic-bezier(.2,.9,.3,1)) both; transform-origin: right; } } #ntSum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .nt-sc { --sc2: #a9b4c6; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding-inline: 10px 12px; border-radius: 999px; font: 500 .78rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--sc2) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc2) 24%, transparent); } .nt-sc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc2) 20%, transparent); } .nt-sc.todo { --sc2: var(--led-green); } .nt-sc.today { --sc2: var(--led-blue); } .nt-sc.late { --sc2: var(--led-amber); } :root[data-tone="light"] .nt-sc.rest { --sc2: #5b6678; } .nt-new { gap: 10px; } .nt-add.nt-add2 { --ac: var(--led-blue); position: relative; height: 50px; gap: 10px; padding-inline: 7px 18px; border-radius: 16px; font: 600 .92rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--ac) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ac) 32%, transparent); } .nt-add.nt-add2.is-list { --ac: var(--led-green); } .nt-add.nt-add2:hover { background: color-mix(in oklab, var(--ac) 17%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ac) 55%, transparent); } .nt-add.nt-add2:first-child, .nt-add.nt-add2:first-child:hover { color: var(--ink); } .nt-add-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: var(--ac); background: color-mix(in oklab, var(--ac) 16%, transparent); transition: transform .5s var(--spring, cubic-bezier(.3,1.4,.5,1)); } .nt-add-ic svg { width: 18px; height: 18px; } .nt-add.nt-add2:hover .nt-add-ic { transform: rotate(-8deg) scale(1.06); } .nt-plus { position: relative; width: 10px; height: 10px; margin-inline-start: 2px; opacity: .7; transition: transform .5s var(--spring, cubic-bezier(.3,1.4,.5,1)), opacity .3s; } .nt-plus::before, .nt-plus::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.8px; margin-top: -.9px; border-radius: 2px; background: var(--ac); } .nt-plus::after { transform: rotate(90deg); } .nt-add.nt-add2:hover .nt-plus { transform: rotate(90deg); opacity: 1; } .nt-add.nt-add2:active { transform: scale(.96); } @media (prefers-reduced-motion: no-preference) { .nt-head h1 { animation: plateIn .6s var(--spring, ease) both; } .nt-add.nt-add2 { animation: plateIn .6s var(--spring, ease) both; } .nt-add.nt-add2.is-list { animation-delay: .07s; } } @media (max-width: 560px) { .nt-add.nt-add2 { justify-content: flex-start; } .nt-plus { margin-inline-start: auto; } } /* NOTES head, second pass (owner): no bar under the title; the summary is plain words, each part led by a small coloured point (no pill); the two buttons lower and in colours not used elsewhere on the page: a note in soft rose, a task list in lilac. */ .nt-head h1::after { display: none !important; } #ntSum { gap: 14px; margin-top: 8px; } .nt-sc { height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; gap: 7px; font: 400 .9rem/1.6 var(--ui); color: var(--muted); } .nt-sc::before { width: 7px; height: 7px; box-shadow: none; } .nt-sc.todo { --sc2: #7ad3c7; } .nt-sc.today { --sc2: #8fb4ff; } .nt-sc.late { --sc2: #f2a7a0; } .nt-sc.rest { --sc2: #b8c0cc; } :root[data-tone="light"] .nt-sc.todo { --sc2: #1d8a7c; } :root[data-tone="light"] .nt-sc.today { --sc2: #3460c8; } :root[data-tone="light"] .nt-sc.late { --sc2: #c0453a; } :root[data-tone="light"] .nt-sc.rest { --sc2: #6b7484; } .nt-add.nt-add2 { --ac: #ee9cc0; height: 42px; gap: 8px; padding-inline: 5px 14px; border-radius: 14px; font-size: .88rem; } .nt-add.nt-add2.is-list { --ac: #b6a6f5; } :root[data-tone="light"] .nt-add.nt-add2 { --ac: #c0457c; } :root[data-tone="light"] .nt-add.nt-add2.is-list { --ac: #6650c8; } .nt-add-ic { width: 32px; height: 32px; border-radius: 10px; } .nt-add-ic svg { width: 17px; height: 17px; } /* NOTES head, third pass (owner): the buttons sit down level with the summary, not up by the title; they are plain calm surfaces and only the small icon chip carries colour (teal-blue for a note, sage for a task list). The notes page has no footer and no misbaha button. */ .nt-head { align-items: flex-end; } .nt-add.nt-add2 { height: 40px; background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line-2) !important; color: var(--ink) !important; } .nt-add.nt-add2 { --ac: #7ec3d3; } .nt-add.nt-add2.is-list { --ac: #a9c79c; } :root[data-tone="light"] .nt-add.nt-add2 { --ac: #2b7f92; } :root[data-tone="light"] .nt-add.nt-add2.is-list { --ac: #557a47; } .nt-add.nt-add2:hover { background: color-mix(in oklab, var(--ac) 7%, var(--surface)) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ac) 45%, var(--line-2)) !important; } .nt-add-ic { width: 30px; height: 30px; border-radius: 9px; background: color-mix(in oklab, var(--ac) 18%, transparent); } .nt-plus::before, .nt-plus::after { background: var(--muted); } .nt-add.nt-add2:hover .nt-plus::before, .nt-add.nt-add2:hover .nt-plus::after { background: var(--ac); } body.on-notes .foot, body.on-notes .mis-fab { display: none !important; } /* NOTES head: the summary never breaks into a narrow column (it kept its words together and takes the room it needs; when the buttons do not fit beside it they drop under it) */ .nt-head > div:first-child { flex: 1 1 auto; min-width: min(100%, 240px); } #ntSum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 0; margin-top: 8px; } .nt-sc { white-space: nowrap; } .nt-sc::before { flex: none; } /* ================================================================================================= «حسابي» in the settings window (10 Nov): signing in with Google to keep progress in an account. Signed out: a short line on what it is for, a plain Google button, a link to what is kept. Signed in: a letter in a dusk-blue round (no photo is fetched from Google), the name and address, a status line with an LED (blue while saving, green when kept, rose when it could not be), two quiet buttons. Flat, no glow. ================================================================================================= */ .ac-sec .ac { --acc: #9fb3d8; } :root[data-tone="light"] .ac-sec .ac { --acc: #3f5d93; } .ac-out, .ac-in { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: color-mix(in oklab, var(--acc) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 22%, var(--line)); } .ac-lead { margin: 0; font: 600 .92rem/1.5 var(--ui); color: var(--ink); } .ac-sub { margin: -4px 0 2px; font: 400 .78rem/1.8 var(--ui); color: var(--muted); } .ac-g { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border-radius: 13px; font: 600 .88rem var(--ui); color: #1f1f1f; background: #fff; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); transition: transform .4s var(--spring, ease), box-shadow .3s, opacity .3s; } .ac-g:hover { box-shadow: inset 0 0 0 1px rgb(0 0 0 / .22), 0 6px 18px -10px rgb(0 0 0 / .6); } .ac-g:active { transform: scale(.97); } .ac-g[disabled] { opacity: .7; pointer-events: none; } .ac-gl { width: 18px; height: 18px; flex: none; } .ac-priv { justify-self: center; font: 400 .74rem var(--ui); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--muted) 45%, transparent); } .ac-priv:hover { color: var(--ink); } .ac-err { margin: 0; font: 500 .76rem var(--ui); color: #f0a3b4; } :root[data-tone="light"] .ac-err { color: #b23a5a; } .ac-me { display: flex; align-items: center; gap: 11px; min-width: 0; } .ac-av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 700 1rem/1 var(--ui); color: var(--acc); background: color-mix(in oklab, var(--acc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 40%, transparent); } .ac-who { display: grid; min-width: 0; } .ac-who b { font: 600 .9rem/1.4 var(--ui); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-who small { font: 400 .74rem/1.4 var(--ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; } .ac-st { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 .78rem var(--ui); color: var(--muted); } .ac-st i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 18%, transparent); } .ac-st.is-ok { --c: #6fd3a0; } .ac-st.is-saving { --c: #8fb4ff; } .ac-st.is-err { --c: #f0a3b4; } :root[data-tone="light"] .ac-st.is-ok { --c: #1f8f5c; } :root[data-tone="light"] .ac-st.is-saving { --c: #3460c8; } :root[data-tone="light"] .ac-st.is-err { --c: #b23a5a; } .ac-st.is-saving i { animation: acPulse 1.2s ease-in-out infinite; } @keyframes acPulse { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--c) 8%, transparent); } } .ac-acts { display: flex; gap: 6px; } .ac-b { flex: 1; height: 38px; border-radius: 11px; font: 500 .82rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, transform .4s var(--spring, ease); } .ac-b:hover { background: rgb(var(--hi) / .09); } .ac-b:active { transform: scale(.96); } .ac-off { color: var(--muted); } @media (prefers-reduced-motion: reduce) { .ac-st.is-saving i { animation: none; } } .foot-priv a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* the signed-in face: in the top bar, in the account section, and in the welcome note */ .ac-av, .ac-top-f, .ac-toast-f { position: relative; overflow: hidden; } .ac-av img, .ac-top-f img, .ac-toast-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .ac-top { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: none; transition: transform .45s var(--spring, ease); } .ac-top:active { transform: scale(.92); } .ac-top-f { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 .9rem/1 var(--ui); color: #9fb3d8; background: color-mix(in oklab, #9fb3d8 18%, transparent); box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px color-mix(in oklab, #9fb3d8 45%, transparent); transition: box-shadow .35s; } .ac-top:hover .ac-top-f { box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 3px color-mix(in oklab, #9fb3d8 80%, transparent); } .ac-top-led { position: absolute; bottom: 3px; inset-inline-start: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--c, #6fd3a0); box-shadow: 0 0 0 2px var(--surface); } .ac-top[data-st="saving"] .ac-top-led { --c: #8fb4ff; } .ac-top[data-st="err"] .ac-top-led { --c: #f0a3b4; } :root[data-tone="light"] .ac-top-led { --c: #1f8f5c; } :root[data-tone="light"] .ac-top[data-st="saving"] .ac-top-led { --c: #3460c8; } :root[data-tone="light"] .ac-top[data-st="err"] .ac-top-led { --c: #b23a5a; } @media (prefers-reduced-motion: no-preference) { .ac-top { animation: plateIn .6s var(--spring, ease) both; } } @media (max-width: 560px) { .ac-top { width: 36px; height: 36px; } .ac-top-f { width: 30px; height: 30px; } } .ac-toast { position: fixed; z-index: 90; top: calc(84px + env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; padding-inline: 10px 18px; border-radius: 999px; background: var(--surface-2, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, #6fd3a0 40%, var(--line)), 0 20px 40px -20px rgb(0 0 0 / .8); opacity: 0; transform: translate(-50%, -10px) scale(.97); transition: opacity .45s ease, transform .6s var(--spring, cubic-bezier(.3,1.4,.5,1)); pointer-events: none; } .ac-toast.on { opacity: 1; transform: translate(-50%, 0); } .ac-toast-f { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 700 .95rem/1 var(--ui); color: #9fb3d8; background: color-mix(in oklab, #9fb3d8 18%, transparent); } .ac-toast span { display: grid; } .ac-toast b { font: 600 .9rem/1.4 var(--ui); color: var(--ink); } .ac-toast small { font: 400 .76rem/1.5 var(--ui); color: var(--muted); } /* ---------- a dhikr that rests at this hour (said after Fajr and Maghrib only) ---------- It stays in its place, quieter, with a line that says when it comes; it is never counted against anyone. */ .z.zl-rest { background: rgb(var(--hi) / .012); box-shadow: 0 0 0 1px rgb(var(--hi) / .05) inset; } .z.zl-rest .z-text, .z.zl-rest .z-fadl, .z.zl-rest .z-foot, .z.zl-rest .z-top { opacity: .5; transition: opacity .5s var(--ease, ease); } .z.zl-rest:hover .z-text, .z.zl-rest:hover .z-top, .z.zl-rest:hover .z-foot, .z.zl-rest:hover .z-fadl { opacity: .8; } .zl-when { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 12px 4px 10px; border-radius: 999px; font: 500 .76rem/1.5 var(--ui); color: color-mix(in oklab, var(--ch, #8fb3c9) 62%, var(--ink)); background: color-mix(in oklab, var(--ch, #8fb3c9) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ch, #8fb3c9) 22%, transparent) inset; } .zl-when::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; opacity: .75; animation: zlBreathe 3.6s ease-in-out infinite; } @keyframes zlBreathe { 50% { opacity: .25; } } .dk-track i.zl-rest { background: transparent; box-shadow: 0 0 0 1px rgb(var(--hi) / .08) inset; opacity: .6; } .dots i.zl-rest { opacity: .3; } @media (prefers-reduced-motion: reduce) { .zl-when::before { animation: none; } } /* ---------- the foot, in order: links, how to reach me, the privacy line, the credits ---------- */ .ft2-in { width: min(100%, 64ch); gap: 26px; } .ft2-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; } .ft2-links a { padding: 7px 15px; border-radius: 999px; font-size: .92rem; color: var(--muted); transition: color .3s, background-color .35s, transform .45s cubic-bezier(.2, .9, .3, 1); } .ft2-links a:hover { color: var(--ink); background-color: rgb(var(--hi) / .06); transform: translateY(-1px); } .ft2-ask { display: grid; gap: 14px; justify-items: center; } .ft2-ask p { color: var(--ink); font-size: .95rem; } .ft2-soc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .ft2-chip { --fc: #8fb8d6; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 18px; border-radius: 16px; background: color-mix(in oklab, var(--fc) 9%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fc) 24%, transparent) inset; color: var(--ink); font-size: .9rem; background-image: none !important; transition: transform .5s cubic-bezier(.2, .9, .3, 1), background-color .35s, box-shadow .35s; } .ft2-chip svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--fc); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s cubic-bezier(.2, .9, .3, 1); } .ft2-chip span { font-weight: 600; } .ft2-chip bdi { color: var(--muted); font-size: .84rem; letter-spacing: .01em; } .ft2-chip:hover { transform: translateY(-3px); background-color: color-mix(in oklab, var(--fc) 15%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--fc) 45%, transparent) inset; } .ft2-chip:hover svg { transform: rotate(-8deg) scale(1.1); } .ft2-chip:active { transform: translateY(-1px) scale(.98); } .ft2-ig { --fc: #b9a6e8; } .foot-priv { max-width: 52ch; margin-inline: auto; font-size: .88rem; } @media (max-width: 520px) { .ft2-chip { width: 100%; justify-content: center; } .ft2-soc { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ft2-chip, .ft2-chip svg, .ft2-links a { transition: none; } .ft2-chip:hover, .ft2-links a:hover { transform: none; } } /* the foot, quieter: one short privacy line, and the credits folded under «الخطوط والمصادر» */ .ft2-in { gap: 22px; } .ft2-priv { font-size: .84rem; line-height: 1.8; color: var(--faint); max-width: 46ch; } .ft2-src { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); } .ft2-src summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: .8rem; color: var(--faint); transition: color .3s, background-color .35s; } .ft2-src summary::-webkit-details-marker { display: none; } .ft2-src summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .45s cubic-bezier(.2, .9, .3, 1); } .ft2-src[open] summary::after { transform: translateY(1px) rotate(-135deg); } .ft2-src summary:hover { color: var(--ink); background-color: rgb(var(--hi) / .05); } .ft2-src dl { margin: 14px auto 0; display: grid; gap: 8px; max-width: 54ch; text-align: start; font-size: .8rem; line-height: 1.75; animation: ft2Open .5s cubic-bezier(.2, .9, .3, 1); } .ft2-src dl > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgb(var(--hi) / .04); } .ft2-src dl > div:last-child { border-bottom: 0; } .ft2-src dt { color: var(--muted); font-weight: 600; } .ft2-src dd { margin: 0; color: var(--faint); } .ft2-src dd a { color: var(--muted); } @keyframes ft2Open { from { opacity: 0; transform: translateY(-6px); } } @media (max-width: 520px) { .ft2-src dl > div { grid-template-columns: 1fr; gap: 0; } } @media (prefers-reduced-motion: reduce) { .ft2-src dl { animation: none; } } .foot .ft2-priv { margin-inline: auto; } /* ---------- the foot, third form: who we are in the middle, round account buttons, a tidy grid of links ---------- */ .foot:has(.ft3) { padding-top: 52px; background: linear-gradient(rgb(var(--hi) / .018), transparent 70%); } .ft3 { width: min(100%, 560px); gap: 0; } .ft3-id { display: grid; justify-items: center; gap: 8px; padding-bottom: 26px; } .ft3-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; margin-bottom: 4px; background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; } .ft3-mark svg { width: 28px; height: 28px; fill: var(--ink); } .ft3-mark svg circle { fill: var(--bg); } .ft3-mark svg .lg-sh { opacity: .3; } .ft3-name { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; color: var(--muted); } .ft3-name b { color: var(--ink); font-size: 1.2rem; } .ft3-name i { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); } .ft3-note { font-size: .8rem; color: var(--faint); } .ft3-top { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 999px; border: 0; cursor: pointer; font: 600 .84rem/1 var(--ui); color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: 0 0 0 1px var(--line) inset; transition: background-color .3s, transform .45s cubic-bezier(.2, .9, .3, 1); } .ft3-top svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.2, .9, .3, 1); } .ft3-top:hover { background: rgb(var(--hi) / .09); } .ft3-top:hover svg { transform: translateY(-2px); } .ft3-top:active { transform: scale(.96); } .ft3-soc { display: flex; justify-content: center; gap: 12px; padding: 24px 0 22px; border-top: 1px solid var(--line); } .ft3-ic { --fc: #6fb6e4; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--fc) 13%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--fc) 26%, transparent) inset; transition: transform .5s cubic-bezier(.2, .9, .3, 1), background-color .3s, box-shadow .3s; } .ft3-ic svg { width: 20px; height: 20px; fill: var(--fc); } .ft3-ic:hover { transform: translateY(-3px); background: color-mix(in oklab, var(--fc) 22%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--fc) 50%, transparent) inset, 0 8px 20px -10px var(--fc); } .ft3-ic:active { transform: scale(.94); } .ft3-ig { --fc: #c99ae6; } .ft3-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; } .ft3-links a, .ft3-links button { justify-self: center; padding: 8px 10px; border: 0; border-radius: 10px; background: none !important; cursor: pointer; font: 400 .84rem/1.4 var(--ui); color: var(--muted); transition: color .3s; } .ft3-links a:hover, .ft3-links button:hover, .ft3-links button[aria-expanded="true"] { color: var(--ink); } .ft3 .ft2-src { margin: 0; padding: 0; border: 0; } .ft3 .ft2-src summary { display: none; } .ft3 .ft2-src[open] { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); } @media (max-width: 420px) { .ft3-links { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .ft3-ic, .ft3-top, .ft3-top svg { transition: none; } .ft3-ic:hover { transform: none; } } /* ---------- the foot, our own form: the site's star on the edge, name and accounts face each other, links in one line, and the credits unfold softly, row after row ---------- */ .foot:has(.ft4) { position: relative; padding-top: 46px; } .ft4 { width: min(100%, 880px); margin: 0 auto; } .ft4-star { position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; translate: -50% 0; background: var(--faint); -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; filter: drop-shadow(0 0 0 var(--bg)); animation: ft4Turn 48s linear infinite; } .ft4-star::before { content: ""; } .foot:has(.ft4)::before { content: ""; position: absolute; top: -1px; left: 50%; width: 34px; height: 2px; translate: -50% 0; background: var(--bg); } @keyframes ft4Turn { to { rotate: 1turn; } } .ft4-main { display: flex; align-items: center; justify-content: space-between; gap: 22px 32px; flex-wrap: wrap; padding-bottom: 26px; } .ft4-id { display: flex; align-items: center; gap: 14px; } .ft4-mark svg { width: 38px; height: 38px; display: block; fill: var(--ink); } .ft4-mark svg circle { fill: var(--bg); } .ft4-mark svg .lg-sh { opacity: .3; } .ft4-id b { display: block; font-size: 1.3rem; line-height: 1.2; color: var(--ink); } .ft4-id small { display: block; margin-top: 3px; font-size: .82rem; color: var(--faint); } .ft4-reach { display: grid; justify-items: end; gap: 9px; } .ft4-lab { font-size: .8rem; color: var(--muted); } .ft4-acc { display: flex; gap: 8px; flex-wrap: wrap; } .ft4-a { --fc: #7cc0ea; display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 12px; border-radius: 12px; background: rgb(var(--hi) / .035) !important; box-shadow: 0 0 0 1px var(--line) inset; transition: background-color .4s, box-shadow .4s, transform .55s cubic-bezier(.2, .9, .3, 1); } .ft4-a svg { width: 17px; height: 17px; flex: none; fill: var(--fc); transition: transform .6s cubic-bezier(.2, .9, .3, 1); } .ft4-a bdi { font-size: .84rem; color: var(--ink); letter-spacing: .01em; } .ft4-a bdi::before { content: "@"; color: var(--faint); margin-inline-end: 1px; } .ft4-a:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--fc) 11%, transparent) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--fc) 38%, transparent) inset; } .ft4-a:hover svg { transform: scale(1.12) rotate(-6deg); } .ft4-a:active { transform: scale(.97); } .ft4-ig { --fc: #8fd1bd; } .ft4-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; padding: 16px 0; border-block: 1px solid var(--line); } .ft4-nav a { position: relative; padding: 2px 0; font-size: .88rem; color: var(--muted); transition: color .35s, background-size .45s cubic-bezier(.2, .9, .3, 1); } .ft4-nav a:hover { color: var(--ink); } .ft4-nav a + a { margin-inline-start: 34px; } .ft4-nav a + a::before { content: ""; position: absolute; inset-inline-start: -19px; top: 50%; width: 4px; height: 4px; translate: 0 -50%; rotate: 45deg; background: var(--faint); opacity: .55; pointer-events: none; } .ft4-base { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding-top: 16px; } .ft4-base p { margin: 0; font-size: .8rem; color: var(--faint); } .ft4-more { display: inline-flex; align-items: center; gap: 9px; padding: 6px 2px; border: 0; background: none; cursor: pointer; font: 400 .8rem/1.4 var(--ui); color: var(--muted); transition: color .3s; } .ft4-more:hover, .ft4-more[aria-expanded="true"] { color: var(--ink); } .ft4-more i { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; translate: 0 -2px; transition: rotate .55s cubic-bezier(.2, .9, .3, 1), translate .55s cubic-bezier(.2, .9, .3, 1); } .ft4-more[aria-expanded="true"] i { rotate: -135deg; translate: 0 2px; } /* the credits: the box grows to its height, then the rows rise in one after another */ .ft4-src { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s cubic-bezier(.2, .9, .3, 1); } .ft4-src.on { grid-template-rows: 1fr; } .ft4-src > div { overflow: hidden; min-height: 0; } .ft4-src ul { list-style: none; margin: 0; padding: 18px 0 4px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; } .ft4-src li { padding: 10px 0 0; border-top: 1px solid rgb(var(--hi) / .05); font-size: .8rem; line-height: 1.75; opacity: 0; translate: 0 10px; transition: opacity .35s ease, translate .35s ease; } .ft4-src.on li { opacity: 1; translate: 0 0; transition: opacity .55s ease calc(.12s + var(--i) * 55ms), translate .7s cubic-bezier(.2, .9, .3, 1) calc(.12s + var(--i) * 55ms); } .ft4-src li b { display: block; font-weight: 600; color: var(--muted); } .ft4-src li span { color: var(--faint); } .ft4-src li a { color: var(--muted); } @media (max-width: 640px) { .ft4-main { flex-direction: column; text-align: center; } .ft4-id { flex-direction: column; gap: 10px; } .ft4-reach { justify-items: center; } .ft4-acc { justify-content: center; } .ft4-nav { justify-content: center; } .ft4-nav a + a { margin-inline-start: 26px; } .ft4-nav a + a::before { inset-inline-start: -15px; } .ft4-base { flex-direction: column; text-align: center; } .ft4-src ul { grid-template-columns: 1fr; text-align: center; } } @media (prefers-reduced-motion: reduce) { .ft4-star { animation: none; } .ft4-src, .ft4-src li, .ft4-src.on li, .ft4-a, .ft4-a svg, .ft4-more i { transition: none; } } /* the mark: the star in the colour of the text, its shade in a soft blue behind it (no gold) */ .logo svg, .ft4-mark svg { fill: var(--ink); overflow: visible; } .logo svg .lg-sh, .ft4-mark svg .lg-sh { fill: #7fb4e8; opacity: .55; transition: transform .7s cubic-bezier(.2, .9, .3, 1), opacity .5s; } .logo svg .lg-st, .ft4-mark svg .lg-st { transform-origin: 21.5px 18.5px; transition: transform .9s cubic-bezier(.2, .9, .3, 1); } .logo:hover svg .lg-st { transform: rotate(45deg); } .logo:hover svg .lg-sh { transform: translate(-1px, 1px); opacity: .75; } :root[data-tone="light"] .logo svg .lg-sh, :root[data-tone="light"] .ft4-mark svg .lg-sh { fill: #3b78c4; opacity: .4; } @media (prefers-reduced-motion: reduce) { .logo svg .lg-st, .logo svg .lg-sh { transition: none; } } /* the leaf mark: the leaf in the colour of the text, its shade a soft blue; on hover it sways a little on its stem and its shade follows, then both settle back */ .logo svg .lg-st, .ft4-mark svg .lg-st { transform-box: view-box; transform-origin: 19.6px 38.6px; transition: transform 1.1s cubic-bezier(.3, 1.6, .4, 1); } .logo svg .lg-stem, .ft4-mark svg .lg-stem { stroke: var(--ink); } .logo:hover svg .lg-st { transform: rotate(-9deg); } .logo:hover svg .lg-sh { transform: translate(-3.4px, 2.6px); opacity: .7; } .logo svg .lg-sh, .ft4-mark svg .lg-sh { opacity: .5; } .logo svg .lg-sh, .ft4-mark svg .lg-sh { transform: translate(-4.2px, 2.2px); transition: transform 1.1s cubic-bezier(.3, 1.6, .4, 1), opacity .6s; } .logo:hover svg .lg-sh { transform: translate(-5.6px, 3.4px); opacity: .7; } /* the foot's edge carries a small leaf now, not the star, swaying slowly as if in a breeze */ .ft4-star { width: 16px; height: 16px; top: -8px; background: #7fb4e8; opacity: .8; animation: ft4Sway 6s ease-in-out infinite; transform-origin: 50% 100%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(36 20 20)' d='M20 3.6C24.8 7.4 28.9 13 29.2 19.6 29.5 26.6 25.6 31.8 20 35 14.6 31.9 10.8 27.2 10.9 20.6 11 13.6 15.2 7.8 20 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(36 20 20)' d='M20 3.6C24.8 7.4 28.9 13 29.2 19.6 29.5 26.6 25.6 31.8 20 35 14.6 31.9 10.8 27.2 10.9 20.6 11 13.6 15.2 7.8 20 3.6Z'/%3E%3C/svg%3E") center / contain no-repeat; } @keyframes ft4Sway { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } } @media (prefers-reduced-motion: reduce) { .ft4-star { animation: none; } } /* ---------- audit fixes (11 Nov) ---------- */ /* settings: the card-shape previews each in its own calm colour, so the shapes read at a glance */ .themes .shape i { --gold: #8fb8d6; } .themes .shape .sh-glass { --gold: #8fd1bd; } .themes .shape .sh-manuscript { --gold: #c9c19a; } .themes .shape .sh-dogear { --gold: #a7b4ea; } .themes .shape .sh-strip { --gold: #a9c79c; } .themes .shape .sh-stitch { --gold: #9fc6cf; } /* a switch that is on is plainly on: a calm green track and the knob across */ .pref input:checked + i { background: #6fbf9a; } .pref input:checked + i::after { background: #0c1a14; } :root[data-tone="light"] .pref input:checked + i { background: #2f9a6a; } :root[data-tone="light"] .pref input:checked + i::after { background: #fff; } /* the misbaha button steps aside while the page moves, and returns when it rests */ .mis-fab { transition: transform .5s var(--ease), bottom .4s var(--ease), box-shadow .3s, opacity .4s; } .mis-fab.fab-away { opacity: 0; transform: translateY(26px) scale(.86); pointer-events: none; } /* the floating chapter name is a solid little bar, so the words under it never show through it */ .mini-title { background: rgb(var(--glass) / .96); color: var(--ink); } /* the foot ends clear of the misbaha button and of the reading bar */ .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } body.reading .foot { padding-bottom: calc(118px + env(safe-area-inset-bottom)); } @media (prefers-reduced-motion: reduce) { .mis-fab.fab-away { transform: none; } } /* the card of this hour: its line of words sits on a small plate, so the lines of the stars behind never cross it */ .now-progress > span:last-child { padding: 3px 11px; border-radius: 999px; background: rgb(var(--glass) / .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* «now» on the line of the day: the label above, and one soft blue point on the line itself (no bent stick) */ .day-now::after { --led: var(--led-blue); left: 50%; top: 46px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--led-blue); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-blue) 25%, transparent); animation: ledPing 2.4s ease-out infinite; } .day-fill { background: color-mix(in oklab, var(--led-blue) 55%, transparent); opacity: .5; } .stop-nm { white-space: nowrap; } @media (max-width: 560px) { .stop-nm { font-size: .8rem; } } /* the featured chapter card is tall enough that its glass never covers the foot of the title */ @media (min-width: 700px) { .cards[data-shape="glass"] .card.feat { aspect-ratio: 600 / 282; } } @media (prefers-reduced-motion: reduce) { .day-now::after { animation: none; } } /* the Friday sunnahs: one calm card shape for all (each keeps its own colour), no stray tab on top */ .jm-card:is(.jm-arch, .jm-leaf, .jm-notch, .jm-tab, .jm-pill, .jm-cut, .jm-scroll, .jm-drop, .jm-wave) { border-radius: 22px; clip-path: none; -webkit-mask: none; mask: none; border-inline: 0; margin-top: 0; padding: 18px 18px 16px; } .jm-tab::before { content: none; } /* the tick is a round badge on the corner of the icon, cut from it by a ring of the card's own colour */ .jm-box { bottom: -7px; inset-inline-end: -7px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in oklab, var(--jc) 9%, var(--surface)), 0 0 0 1.5px color-mix(in oklab, var(--jc) 60%, transparent) inset; } .jm-card.is-done .jm-box { box-shadow: 0 0 0 3px color-mix(in oklab, var(--jc) 16%, var(--surface)); } :root[data-tone="light"] .jm-box { box-shadow: 0 0 0 3px color-mix(in oklab, var(--jcl) 6%, var(--bg)), 0 0 0 1.5px color-mix(in oklab, var(--jcl) 55%, transparent) inset; } /* «كيف حالك؟»: a fine scrollbar that stays inside the window's rounded edge */ .hal-modal-box { scrollbar-width: thin; scrollbar-color: rgb(var(--hi) / .18) transparent; scrollbar-gutter: stable; } .hal-modal-box::-webkit-scrollbar { width: 6px; } .hal-modal-box::-webkit-scrollbar-thumb { background: rgb(var(--hi) / .18); border-radius: 6px; } .hal-modal-box::-webkit-scrollbar-track { background: transparent; margin-block: 18px; } /* the foot's account buttons keep their colour on the white theme */ :root[data-tone="light"] .ft4-a { --fc: #2b7fb8; } :root[data-tone="light"] .ft4-ig { --fc: #2a8f73; } /* notes, when there is nothing to show: a small welcome that rises in softly */ .nt-empty:not([hidden]) { display: grid; justify-items: center; gap: 8px; margin: 46px auto; max-width: 34ch; animation: ntEmptyIn .6s cubic-bezier(.2, .9, .3, 1) both; } .nt-e-ic { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 18px; color: #7ec3d3; background: color-mix(in oklab, #7ec3d3 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, #7ec3d3 26%, transparent) inset; } .nt-e-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nt-empty b { font: 600 1.02rem/1.5 var(--ui); color: var(--ink); } .nt-empty small { font: 400 .86rem/1.8 var(--ui); color: var(--muted); } :root[data-tone="light"] .nt-e-ic { color: #2a8098; } @keyframes ntEmptyIn { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .nt-empty:not([hidden]) { animation: none; } } /* a note shown under the bar (the mushaf's first hint), clear of the last lines of the page */ .toast.at-top { top: calc(74px + env(safe-area-inset-top)); bottom: auto; transform: translate(-50%, -10px); } .toast.at-top.show { transform: translate(-50%, 0); } /* on a phone the foot's links and the mark in the bar are easy to touch */ @media (max-width: 640px) { .ft4-nav a { padding: 10px 2px; } .ft4-more { padding: 11px 4px; } .nav .logo { min-height: 40px; min-width: 40px; justify-content: center; } } /* the page itself takes focus after each move (for screen readers); it never shows a ring round the whole page */ #app:focus, #app:focus-visible { outline: none; } /* ================================================================================================= THE MUSHAF DOOR IN THE HERO, third form (.mf3): an open book in a sky-blue tile whose leaf turns under the pointer, the name, and under it a short track of the whole mushaf with a point where the reader stopped. Its own colour (--mf), not the misbaha's sea-green nor the notes' teal. ================================================================================================= */ .mf3 { --mf: #7cc4f0; } :root[data-tone="light"] .mf3 { --mf: #1b6fa8; } .hero .cta .btn.mf3 { height: auto; min-height: 46px; gap: 10px; padding: 3px 4px 3px 22px; border-radius: 999px; background: rgb(var(--hi) / .04); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; transition: background .35s, box-shadow .35s, transform .45s var(--spring, ease); } .hero .cta .btn.mf3:hover { background: color-mix(in oklab, var(--mf) 8%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--mf) 42%, transparent) inset; transform: translateY(-1px); } .hero .cta .btn.mf3:active { transform: scale(.97); transition-duration: .12s; } .mf3-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in oklab, var(--mf) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--mf) 30%, transparent) inset; transition: background .35s; } .mf3:hover .mf3-ic { background: color-mix(in oklab, var(--mf) 20%, transparent); } .mf3-ic svg { width: 26px; height: 22px; margin-top: 3px; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; } .mf3-ic .pg { stroke: var(--mf); stroke-width: 1.8; fill: color-mix(in oklab, var(--mf) 10%, transparent); } .mf3-ic .ln { stroke: color-mix(in oklab, var(--mf) 60%, transparent); stroke-width: 1.4; } .mf3-ic .sp { stroke: var(--mf); stroke-width: 1.6; } .mf3-ic .lf { fill: transparent; stroke: transparent; stroke-width: 1.4; transform-box: view-box; transform-origin: 20px 14px; } .mf3-ic .rb { stroke: none; fill: var(--mf); transform-box: view-box; transform-origin: 23.7px 24.6px; transition: transform .7s var(--spring, ease); } .mf3:hover .mf3-ic .rb { transform: rotate(10deg); } .mf3-t { display: grid; gap: 3px; text-align: start; line-height: 1.25; } .mf3-t b { font: 600 .98rem var(--ui); } .mf3-t small { display: inline-flex; align-items: center; gap: 7px; font: 500 .72rem var(--ui); color: var(--faint); font-variant-numeric: tabular-nums; } /* the whole mushaf as a short track: filled up to the page, a flat point on it */ .mf3-bar { position: relative; flex: none; width: 40px; height: 3px; border-radius: 3px; background: rgb(var(--hi) / .1); } .mf3-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in oklab, var(--mf) 75%, transparent); transform: scaleX(var(--q)); transform-origin: right; } .mf3-bar i { position: absolute; top: 50%; right: calc(var(--q) * 100%); width: 6px; height: 6px; margin: -3px -3px 0 0; border-radius: 50%; background: var(--mf); --led: var(--mf); } @media (prefers-reduced-motion: no-preference) { .mf3-bar::before { animation: mf3Fill 1s .5s cubic-bezier(.2, .9, .3, 1) both; } .mf3-bar i { animation: mf3Dot .5s 1.2s var(--spring, ease) both, ledPing 3.2s 1.7s cubic-bezier(.2, .7, .3, 1) infinite; } /* under the pointer a leaf turns from the right page onto the left one */ .mf3:hover .mf3-ic .lf { animation: mf3Leaf .9s cubic-bezier(.45, .05, .3, 1) both; } } @keyframes mf3Fill { from { transform: scaleX(0); } } @keyframes mf3Dot { from { opacity: 0; transform: scale(0); } } @keyframes mf3Leaf { 0% { transform: scaleX(1); fill: color-mix(in oklab, var(--mf) 0%, transparent); stroke: color-mix(in oklab, var(--mf) 0%, transparent); } 15% { fill: color-mix(in oklab, var(--mf) 32%, var(--bg)); stroke: var(--mf); } 85% { fill: color-mix(in oklab, var(--mf) 32%, var(--bg)); stroke: var(--mf); } 100% { transform: scaleX(-1); fill: color-mix(in oklab, var(--mf) 0%, transparent); stroke: color-mix(in oklab, var(--mf) 0%, transparent); } } @media (max-width: 560px) { .hero .cta .btn.mf3 { padding: 3px 4px 3px 18px; gap: 9px; } .mf3-t b { font-size: .92rem; } } /* ================================================================================================= THE HERO, lighter: the prayers leave the page's flow and become a pill beside the date's (.prp); it opens one card under the row with the six times, the place and the settings. Under the title: the words, the two buttons, then the two doors. ================================================================================================= */ .prp-row { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(16px, 2.6vh, 24px); } .prp-row .almanac { margin: 0; } .prp-btn { gap: 9px; padding-inline: 7px 16px; --pc: var(--pc-dhuhr); transition: background .3s, box-shadow .3s, transform .45s var(--spring, ease); } .prp-btn:active { transform: scale(.97); } .prp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--pc); background: color-mix(in oklab, var(--pc) 16%, transparent); transition: transform .5s var(--spring, ease); } .prp-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .prp-btn:hover .prp-ic, .prp-btn[aria-expanded="true"] .prp-ic { transform: rotate(-8deg) scale(1.06); } .prp-t { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .prp-t b { color: var(--pc); font-weight: 600; margin-inline-end: 3px; } .prp-t small { margin-inline-start: 2px; font-size: .8em; color: var(--faint); } /* the card: centred under the whole row, the times standing in six small columns */ .prp-card { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; z-index: 21; width: min(94vw, 540px); padding: 14px 12px 10px; text-align: start; border-radius: 28px; background: linear-gradient(rgb(var(--hi) / .035), rgb(var(--hi) / .035)), var(--bg); box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -24px rgb(0 0 0 / .8); transform-origin: 50% 0; } :root[data-tone="light"] .prp-card { box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 48px -24px rgb(0 0 0 / .25); } .prp-card[hidden] { display: none; } .prp-card .pbar { width: 100%; margin: 0; } .prp-card .pbar-list { border-radius: 22px; padding: 4px; } .prp-card .pb { flex-direction: column; gap: 5px; height: auto; padding: 9px 2px 8px; border-radius: 18px; } .prp-card .pb-t { text-align: center; justify-items: center; } .prp-card .pb-t b small { display: block; margin: 0; } .prp-card .pb-ic { width: 32px; height: 32px; } .prp-card .pbar .dial-set { position: static; translate: none; width: 100%; margin-top: 4px; padding: 6px 2px 2px; background: none; box-shadow: none; border-radius: 0; } .prp-card .pbar-meta { font-size: .82rem; text-align: center; } @media (prefers-reduced-motion: no-preference) { .prp-card:not([hidden]) { animation: prpIn .45s var(--spring, ease) both; } .prp-card.is-closing { animation: prpOut .2s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; } } @keyframes prpIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } } @keyframes prpOut { to { opacity: 0; transform: translateY(-6px) scale(.98); } } /* with the bar gone from the flow, the doors keep a calm distance under the buttons */ .hero .doors { margin-top: clamp(26px, 4.5vh, 40px); } @media (max-width: 560px) { .prp-row { gap: 6px; } .prp-row .alm-pill { height: 40px; font-size: .82rem; gap: 7px; padding-inline: 6px 12px; } .prp-row .alm-pill .moon, .prp-ic { width: 28px; height: 28px; } .prp-row .alm-sep, .prp-row .alm-g { display: none; } .prp-card { top: calc(100% + 8px); padding: 10px 8px 8px; border-radius: 24px; } .prp-card .pb-t b { font-size: .8rem; } .prp-card .pb-ic { width: 28px; height: 28px; } .hero .doors { margin-top: 24px; } } /* inside the card the settings are part of the same sheet: no frame of their own (the light theme's frame was winning), only a hairline above them; every field keeps the same round end */ :root .prp-card .pbar .dial-set, :root[data-tone="light"] .prp-card .pbar .dial-set { margin-top: 8px; padding: 12px 2px 2px; background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); } .prp-card .set-note { border-radius: 999px; } @media (max-width: 560px) { .prp-card .set-note { border-radius: 18px; } } /* ================================================================================================= THE DATE'S CARD, second form: a sister of the prayers' card. A solid sheet (no frosted glass), the moon drawn plainly in silver with a fine rim (no glow, no craters), the month as one track, and the coming days each in their own colour. ================================================================================================= */ :root { --mn: #d6e2f3; --mn-d: rgb(255 255 255 / .06); --ev-fri: var(--led-green); --ev-white: #b9c9e2; --ev-fast: #7cc4f0; } :root[data-tone="light"] { --mn: #7f95b8; --mn-d: rgb(0 0 0 / .05); --ev-white: #6a7fa3; --ev-fast: #1b6fa8; } .moon .m-lit { fill: var(--mn); } .moon .m-dark { fill: var(--mn-d); } .moon .m-cr { display: none; } .moon .m-rim { stroke: color-mix(in oklab, var(--mn) 55%, transparent); stroke-width: 1.2; } .prp-row .almanac { position: static; } .alm-card { left: 50%; translate: -50% 0; top: calc(100% + 10px); z-index: 22; width: min(94vw, 440px); padding: 18px 18px 14px; border-radius: 28px; background: linear-gradient(rgb(var(--hi) / .035), rgb(var(--hi) / .035)), var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 0 0 1px var(--line-2) inset, 0 30px 60px -24px rgb(0 0 0 / .8); animation: none; transform-origin: 50% 0; } :root[data-tone="light"] .alm-card { box-shadow: 0 0 0 1px var(--line-2) inset, 0 24px 48px -24px rgb(0 0 0 / .25); } @media (prefers-reduced-motion: no-preference) { .alm-card:not([hidden]) { animation: prpIn .45s var(--spring, ease) both; } .alm-card.is-closing { animation: prpOut .2s cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; } .alm-card:not([hidden]) .alm-mo i { animation: almBar .5s var(--spring, ease) both; animation-delay: calc(var(--d, 0) * 1ms); } } @keyframes almBar { from { transform: scaleY(.2); opacity: 0; } } .alm-top { gap: 16px; } .alm-moon .moon { width: 84px; height: 84px; filter: none; } .alm-phase { color: var(--mn); font-weight: 500; } .alm-hijri { font-size: 1.4rem; } .alm-near { margin: 6px 0 0; font-size: .76rem; color: var(--faint); } /* the month: thirty thin bars, the first day on the right */ .alm-mo { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); grid-template-rows: auto 16px 6px auto; column-gap: 3px; margin: 18px 0 2px; align-items: end; } .alm-mo > i { grid-row: 2; height: 10px; border-radius: 2px; background: rgb(var(--hi) / .1); transform-origin: 50% 100%; } .alm-mo > i.past { background: rgb(var(--hi) / .32); } .alm-mo > i.white { background: color-mix(in oklab, var(--ev-white) 38%, transparent); } .alm-mo > i.white.past { background: color-mix(in oklab, var(--ev-white) 70%, transparent); } .alm-mo > i.today { height: 16px; background: var(--led-blue); --led: var(--led-blue); border-radius: 3px; } .alm-mo-wh { grid-row: 1; justify-self: stretch; margin-bottom: 4px; padding-bottom: 3px; text-align: center; font: 500 .66rem var(--ui); color: var(--ev-white); border-bottom: 1px solid color-mix(in oklab, var(--ev-white) 50%, transparent); } .alm-mo-fr { grid-row: 3; justify-self: center; align-self: end; width: 4px; height: 4px; border-radius: 50%; background: var(--ev-fri); } .alm-mo small { grid-row: 4; justify-self: center; margin-top: 4px; font: 400 .64rem var(--ui); color: var(--faint); white-space: nowrap; } /* the coming days */ .alm-list { margin: 12px 0 0; gap: 4px; } .alm-list li.alm-ev { align-items: center; gap: 10px; padding: 8px 4px 8px 2px; border-top: 1px solid var(--line); } .alm-ev { --ev: var(--ev-fri); } .alm-ev.is-white { --ev: var(--ev-white); } .alm-ev.is-fast { --ev: var(--ev-fast); } .alm-ev-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ev); background: color-mix(in oklab, var(--ev) 15%, transparent); } .alm-ev-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .alm-list .alm-ev-t { flex: 1; display: grid; gap: 1px; color: var(--ink); font-weight: 500; } .alm-ev-t small { font: 400 .72rem var(--ui); color: var(--faint); } .alm-list b.alm-ev-v { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 11px; border-radius: 999px; font: 500 .8rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--ev) 12%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ev) 28%, transparent) inset; } .alm-ev-v.alm-lit::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ev); --led: var(--ev); animation: ledPing 2.4s cubic-bezier(.2, .7, .3, 1) infinite; } .alm-note { margin: 10px 2px 0; font-size: .7rem; line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .alm-ev-v.alm-lit::before { animation: none; } } @media (max-width: 560px) { .alm-card { top: calc(100% + 8px); padding: 14px 12px 12px; border-radius: 24px; } .alm-moon .moon { width: 68px; height: 68px; } .alm-hijri { font-size: 1.2rem; } .alm-mo { column-gap: 2px; } } /* ================================================================================================= THE HERO'S TWO DOORS, second form (.dr2): in the hero's own hand, round like the pills and the buttons above them, narrower, each in its colour: a ringed mark, the words, and a round arrow that fills with the door's colour under the finger. A point lights on the notes' mark when something is due today or late. ================================================================================================= */ .doors.dr2 { width: min(100%, 620px); gap: 10px; } .dr2 .door-notes { --dc: #a9b4f5; } :root[data-tone="light"] .dr2 .door-notes { --dc: #4a56b0; } .dr2 .door:not(.door-fri) { min-height: 60px; gap: 11px; padding: 7px 7px 7px 10px; border-radius: 999px; background: rgb(var(--hi) / .03); box-shadow: 0 0 0 1px var(--line) inset; transition: background .35s, box-shadow .35s, transform .45s var(--spring, ease); } .dr2 .door:not(.door-fri):hover { background: color-mix(in oklab, var(--dc) 7%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--dc) 38%, transparent) inset; transform: translateY(-1px); } .dr2 .door:not(.door-fri):active { transform: scale(.98); transition-duration: .12s; } .dr2 .door:not(.door-fri) .door-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in oklab, var(--dc) 30%, transparent) inset; transition: transform .55s var(--spring, ease), background .35s; } .dr2 .door:not(.door-fri):hover .door-ic { background: color-mix(in oklab, var(--dc) 22%, transparent); } .dr2 .door-hal:hover .door-ic svg { animation: dr2Beat 1.1s ease-in-out both; } .dr2 .door-notes:hover .door-ic { transform: rotate(-8deg); } @keyframes dr2Beat { 0%, 100% { transform: scale(1); } 18% { transform: scale(1.14); } 34% { transform: scale(.97); } 50% { transform: scale(1.08); } } .dr2 .door-t b { font-size: .94rem; } .dr2 .door-t small { font-size: .74rem; } .dr2 .door:not(.door-fri) .door-go { width: 34px; height: 34px; border-radius: 50%; color: var(--dc); background: color-mix(in oklab, var(--dc) 9%, transparent); transition: transform .45s var(--spring, ease), background .3s, color .3s; } .dr2 .door:not(.door-fri):hover .door-go { color: var(--bg); background: var(--dc); transform: translateX(-3px); } /* a flat point on the notes' mark, cut out of the ground */ .dr2-led { position: absolute; top: 1px; inset-inline-end: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--dc); --led: var(--dc); --cut: var(--bg); box-shadow: 0 0 0 2px var(--bg); animation: ledPingCut 2.4s cubic-bezier(.2, .7, .3, 1) infinite; } .dr2 .door-notes.is-late .dr2-led { background: var(--led-amber); --led: var(--led-amber); } .dr2 .door-fri { border-radius: 26px; } @media (prefers-reduced-motion: no-preference) { .dr2 > .door { animation: dr2In .6s var(--spring, ease) backwards; } .dr2 > .door:nth-child(2) { animation-delay: .07s; } .dr2 > .door:nth-child(3) { animation-delay: .14s; } } @keyframes dr2In { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .dr2-led, .dr2 .door-hal:hover .door-ic svg { animation: none; } } @media (max-width: 560px) { .doors.dr2 { gap: 8px; } .dr2 .door:not(.door-fri) { min-height: 56px; } .dr2 .door:not(.door-fri) .door-ic { width: 40px; height: 40px; } } /* ================================================================================================= NOTES, third form (11 Nov 2026), prefix nb-: a wide page. Cards flow in columns across the whole width (each card spans as many 2px rows as its height); a long card shows its start and «عرض المزيد». The editor is one calm window: title, a quiet formatting bar, words that grow, tasks inside the note, and a foot with tags, day and pin. Menus, confirmations and the undo word float small and close. Fresh calm hues for this part: link sky, focus periwinkle, quote lilac, trash rose, archive sage. ================================================================================================= */ :root { --nb-lk: #8cc8ea; --nb-fc: #a9b5f6; --nb-q: #c3b5f2; --nb-rose: #f2a7a0; --nb-sage: #a9c79c; --nb-teal: #93d4c8; } :root[data-tone="light"] { --nb-lk: #1c6894; --nb-fc: #4352b8; --nb-q: #6650c8; --nb-rose: #bd4236; --nb-sage: #4f7442; --nb-teal: #1d7a6c; } .nb-page [hidden], .nb-ed [hidden], .nb-lb[hidden], .nb-ed[hidden], .nb-pop [hidden] { display: none !important; } .nb-page svg, .nb-ed svg, .nb-pop svg, .nb-lb svg, .nb-toast svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nb-page svg .g, .nb-ed svg .g, .nb-pop svg .g { fill: currentColor; stroke: none; } .nb-page svg.nt-mark, .nb-ed svg.nt-mark, .nb-pop svg.nt-mark { stroke: none; } .nb-page :focus-visible, .nb-ed :focus-visible, .nb-pop :focus-visible, .nb-lb :focus-visible, .nb-toast :focus-visible { outline: 2px solid var(--nb-fc); outline-offset: 2px; } .nb-ed .nb-title:focus-visible, .nb-ed .nb-rt:focus-visible, .nb-ed .nb-rtx:focus-visible, .nb-pop input:focus-visible, .nb-ed input:focus-visible, .nb-page input:focus-visible { outline: none; } /* the page */ .nb-page { width: min(100% - 2 * var(--gutter), 1360px); margin: 0 auto; padding: clamp(96px, 14vh, 130px) 0 110px; } .nb-head { margin-bottom: 20px; } .nb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .nb-search { flex: 1 1 260px; max-width: 460px; } .nb-tools { display: flex; gap: 8px; margin-inline-start: auto; } .nb-tool { display: inline-flex; align-items: center; gap: 7px; height: 46px; padding-inline: 13px 15px; border-radius: 15px; font: 500 .84rem var(--ui); color: var(--muted); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: color .25s, background .25s, transform .4s var(--spring, ease); } .nb-tool svg { width: 17px; height: 17px; } .nb-tool:hover, .nb-tool[aria-expanded="true"] { color: var(--ink); background: color-mix(in oklab, var(--nb-fc) 8%, var(--surface)); } .nb-tool:active { transform: scale(.95); } .nb-tool-ic { width: 46px; padding: 0; justify-content: center; } .nb-tagrow { display: flex; align-items: center; gap: 8px; margin: 2px 0 20px; } .nb-tagscroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); } .nb-tagscroll::-webkit-scrollbar { display: none; } .nb-tagrow.is-empty .nb-tagscroll { display: none; } .nb-filter { display: flex; flex-wrap: nowrap; gap: 7px; padding: 2px 2px 2px 36px; } .nb-f { flex: none; white-space: nowrap; } .nb-tagman { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px 12px; border-radius: 999px; font: 500 .78rem var(--ui); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .25s, background .25s; } .nb-tagman svg { width: 15px; height: 15px; } .nb-tagman:hover { color: var(--ink); background: rgb(var(--hi) / .05); } .nb-place { --pc: var(--nb-sage); position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 14px; padding: 12px 16px; border-radius: 18px; background: color-mix(in oklab, var(--pc) 7%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pc) 24%, var(--line)); } .nb-place[data-k="trash"] { --pc: var(--nb-rose); } .nb-place > div { display: grid; gap: 2px; flex: 1 1 220px; } .nb-place b { font: 700 1rem var(--ui); color: var(--ink); } .nb-place small { font: 400 .82rem/1.7 var(--ui); color: var(--muted); } .nb-back { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding-inline: 8px 12px; border-radius: 11px; font: 600 .82rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .06); } .nb-back svg { width: 16px; height: 16px; } .nb-empty-tr { height: 36px; padding-inline: 14px; border-radius: 11px; font: 600 .8rem var(--ui); color: var(--nb-rose); background: color-mix(in oklab, var(--nb-rose) 12%, transparent); } /* the cards */ .nb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); column-gap: 14px; grid-auto-rows: 2px; align-items: start; } .nb-card { --tc: var(--tg, var(--ink)); position: relative; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 12px 16px 10px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s, background .3s, opacity .3s; } :root[data-tone="light"] .nb-card { --tc: var(--tgl, var(--ink)); box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / .04); } .nb-card.has-tag { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 24%, var(--line)); } .nb-card.has-tag::before { content: ""; position: absolute; top: 18px; height: 22px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: color-mix(in oklab, var(--tc) 80%, transparent); } @media (hover: hover) { .nb-card:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tc) 44%, var(--line-2)); } } .nb-card:has(.nb-open:focus-visible) { box-shadow: inset 0 0 0 2px var(--nb-fc); } .nb-card.is-pin { background: color-mix(in oklab, var(--surface) 93%, var(--led-blue)); } .nb-card.is-fin { opacity: .62; } .nb-card.is-trash { cursor: default; } .nb-card.is-trash .nb-c-body { opacity: .72; } .nb-card.is-src { opacity: .35; box-shadow: inset 0 0 0 1.5px var(--line-2); } .nb-open { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .nb-c-top { display: flex; align-items: center; gap: 4px; min-height: 32px; } .nb-c-t { flex: 1; min-width: 0; margin: 0; padding-inline-end: 4px; font: 700 1rem/1.5 var(--ui); color: var(--ink); overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; } .nb-c-k { flex: 1; display: flex; color: var(--faint); } .nb-c-k svg { width: 17px; height: 17px; } .nb-grip { flex: none; display: grid; place-items: center; width: 26px; height: 32px; margin-inline-start: -8px; border-radius: 8px; color: var(--faint); opacity: .5; cursor: grab; touch-action: none; transition: opacity .25s, background .25s; } .nb-grip svg { width: 16px; height: 16px; } .nb-card:hover .nb-grip, .nb-grip:focus-visible { opacity: 1; } .nb-grip:hover { background: rgb(var(--hi) / .06); } @media (hover: none) { .nb-grip { opacity: .8; width: 34px; } } .nb-ic { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--faint); transition: background .25s, color .25s, transform .4s var(--spring, ease); } .nb-ic svg { width: 17px; height: 17px; } .nb-ic:hover, .nb-ic[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-ic:active { transform: scale(.88); } .nb-pin.on { color: var(--led-blue); } .nb-pin.on svg { fill: currentColor; } .nb-card .nt-ratio { flex: none; font: 600 .74rem var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; } .nb-card.is-fin .nt-ratio { color: var(--led-green); } .nb-c-body { position: relative; display: grid; gap: 8px; max-height: 17.5rem; overflow: hidden; min-width: 0; } .nb-card.is-open .nb-c-body { max-height: none; } .nb-card.is-long .nb-c-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 3.4rem), transparent); } .nb-c-body:empty { display: none; } .nb-cut { margin: 0; font: 400 .76rem var(--ui); color: var(--faint); } .nb-morebtn { align-self: flex-start; display: inline-flex; align-items: center; height: 30px; padding-inline: 12px; border-radius: 999px; font: 600 .76rem var(--ui); color: var(--nb-lk); background: color-mix(in oklab, var(--nb-lk) 11%, transparent); transition: background .25s; } .nb-morebtn:hover { background: color-mix(in oklab, var(--nb-lk) 18%, transparent); } .nb-checks li span { unicode-bidi: plaintext; text-align: start; white-space: pre-wrap; } .nb-card .nt-prog { flex: none; } .nb-c-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 34px; padding-top: 8px; border-top: 1px solid var(--line); } .nb-c-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; } .nb-tag { max-width: 10em; } .nb-tag > span, .nb-tchip > span, .nb-f > span, .nb-tp-i > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nb-tag-more { display: inline-flex; align-items: center; height: 24px; padding-inline: 8px; border-radius: 999px; font: 600 .7rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .06); } .nb-c-time { margin-inline-start: auto; font: 400 .7rem var(--ui); color: var(--faint); white-space: nowrap; } .nb-tr-acts { display: flex; gap: 6px; margin-inline-start: auto; } /* rich words, on the card and in the editor alike */ .nb-rich, .nb-rt { font: 400 1rem/1.95 "Noto Naskh Arabic", var(--prose, var(--ui)); color: var(--ink); overflow-wrap: anywhere; min-width: 0; } .nb-rich > *, .nb-rt > * { margin: 0 0 .3em; } .nb-rich > :last-child { margin-bottom: 0; } .nb-rich :is(p, li, h3, blockquote), .nb-rt :is(p, div, li, h3, blockquote) { unicode-bidi: plaintext; text-align: start; } .nb-rich h3, .nb-rt h3 { margin: .35em 0 .15em; font: 700 1.08rem/1.6 var(--ui); color: var(--ink); } .nb-rich :is(ul, ol), .nb-rt :is(ul, ol) { margin: 0 0 .35em; padding-inline-start: 1.35em; } .nb-rich li::marker, .nb-rt li::marker { color: var(--faint); } .nb-rich blockquote, .nb-rt blockquote { margin: .25em 0 .45em; padding: .15em .9em; border-inline-start: 2px solid var(--nb-q); border-radius: 0 10px 10px 0; color: var(--muted); background: color-mix(in oklab, var(--nb-q) 7%, transparent); } .nb-rich b, .nb-rt b, .nb-rt strong { font-weight: 700; } .nb-rich a, .nb-rt a { color: var(--nb-lk); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--nb-lk) 45%, transparent); unicode-bidi: isolate; overflow-wrap: anywhere; word-break: break-word; transition: text-decoration-color .2s; } .nb-rich a:hover { text-decoration-color: currentColor; } /* the drag */ .nb-ghost { position: fixed; z-index: 95; margin: 0; pointer-events: none; list-style: none; opacity: .96; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -22px rgb(0 0 0 / .6); } :root[data-tone="light"] .nb-ghost { box-shadow: inset 0 0 0 1px var(--line-2), 0 26px 50px -24px rgb(0 0 0 / .3); } body.nb-dragging, body.nb-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; } /* small buttons used across the page */ .nb-mini { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 12px; border-radius: 10px; font: 600 .78rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .07); transition: background .25s, transform .35s var(--spring, ease); } .nb-mini svg { width: 15px; height: 15px; } .nb-mini:hover { background: rgb(var(--hi) / .12); } .nb-mini:active { transform: scale(.95); } .nb-mini.is-danger { color: var(--nb-rose); background: color-mix(in oklab, var(--nb-rose) 13%, transparent); } .nb-mini.is-danger:hover { background: color-mix(in oklab, var(--nb-rose) 20%, transparent); } .nb-mini.is-go { color: var(--bg); background: var(--ink); } .nb-mini.is-go:hover { background: color-mix(in oklab, var(--ink) 86%, var(--bg)); } /* floating menus */ .nb-pop { position: fixed; z-index: 96; min-width: 210px; max-width: min(330px, calc(100vw - 16px)); padding: 6px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -20px rgb(0 0 0 / .65); } :root[data-tone="light"] .nb-pop { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 44px -22px rgb(0 0 0 / .28); } .nb-pop [role="menu"] { display: grid; gap: 1px; } .nb-pop [data-m] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding-inline: 10px; border-radius: 10px; font: 500 .86rem var(--ui); color: var(--ink); text-align: start; transition: background .2s; } .nb-pop [data-m] svg { flex: none; width: 17px; height: 17px; color: var(--faint); } .nb-pop [data-m]:hover, .nb-pop [data-m]:focus-visible { background: rgb(var(--hi) / .07); outline: none; } .nb-pop [data-m] > span { flex: 1; } .nb-pop [data-m] b { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding-inline: 6px; border-radius: 999px; font: 600 .7rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .07); } .nb-pop [data-m].is-danger, .nb-pop [data-m].is-danger svg { color: var(--nb-rose); } .nb-pop [data-m][disabled] { opacity: .4; } .nb-radio { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .25s, background .25s; } .nb-pop [aria-checked="true"] .nb-radio { background: var(--nb-fc); box-shadow: inset 0 0 0 4px var(--surface-2); } :root[data-tone="light"] .nb-pop [aria-checked="true"] .nb-radio { box-shadow: inset 0 0 0 4px #fff; } .nb-pop-sep { display: block; height: 1px; margin: 5px 8px; background: var(--line); } .nb-pop-note { margin: 4px 10px 6px; font: 400 .74rem/1.7 var(--ui); color: var(--faint); } .nb-conf p { margin: 6px 8px 12px; max-width: 32ch; font: 400 .86rem/1.8 var(--ui); color: var(--ink); } .nb-conf div { display: flex; gap: 6px; padding: 0 6px 4px; } .nb-lk { display: grid; gap: 10px; width: min(310px, calc(100vw - 32px)); padding: 6px; } .nb-lk b { font: 700 .9rem var(--ui); color: var(--ink); overflow-wrap: anywhere; } .nb-lk label, .nb-date { display: grid; gap: 5px; font: 500 .74rem var(--ui); color: var(--muted); } .nb-lk input, .nb-tp input, .nb-date input, .nb-tg-list input, .nb-tg-new input { width: 100%; min-width: 0; height: 40px; padding-inline: 12px; border: 0; border-radius: 10px; font: 400 .9rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .05); box-shadow: inset 0 0 0 1px var(--line); outline: none; transition: box-shadow .25s; } .nb-lk input:focus, .nb-tp input:focus, .nb-date input:focus, .nb-tg-list input:focus, .nb-tg-new input:focus { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--nb-fc) 70%, transparent); } .nb-lk input[dir="ltr"] { text-align: left; } .nb-lk-err { margin: -4px 0 0; font: 500 .76rem var(--ui); color: var(--nb-rose); } .nb-lk > div { display: flex; gap: 6px; flex-wrap: wrap; } .nb-date { padding: 6px 10px 8px; } .nb-date input { color-scheme: dark; } :root[data-tone="light"] .nb-date input { color-scheme: light; } .nb-tp { display: grid; gap: 6px; width: min(290px, calc(100vw - 32px)); padding: 4px; } .nb-tp-l { display: grid; gap: 2px; max-height: 250px; overflow: auto; overscroll-behavior: contain; } .nb-tp-i, .nb-tp-new, .nb-tp-man { display: flex; align-items: center; gap: 9px; min-height: 38px; padding-inline: 10px; border-radius: 10px; font: 500 .86rem var(--ui); color: var(--ink); text-align: start; transition: background .2s; } .nb-tp-i:hover, .nb-tp-new:hover, .nb-tp-man:hover { background: rgb(var(--hi) / .07); } .nb-tp-i[aria-pressed="true"] { background: color-mix(in oklab, var(--tg) 14%, transparent); } :root[data-tone="light"] .nb-tp-i[aria-pressed="true"] { background: color-mix(in oklab, var(--tgl) 10%, transparent); } .nb-tp-i > span { flex: 1; } .nb-tp-i i { display: grid; width: 18px; height: 18px; opacity: 0; transition: opacity .2s; color: var(--tg); } :root[data-tone="light"] .nb-tp-i i { color: var(--tgl); } .nb-tp-i[aria-pressed="true"] i { opacity: 1; } .nb-tp-i i svg { width: 16px; height: 16px; stroke-width: 2.6; } .nb-tp-new { color: var(--nb-teal); } .nb-tp-new svg, .nb-tp-man svg { width: 16px; height: 16px; flex: none; } .nb-tp-man { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; } .nb-sw { display: grid; grid-template-columns: repeat(4, 34px); gap: 8px; padding: 8px; } .nb-sw button { width: 34px; height: 34px; border-radius: 50%; background: var(--tg); transition: box-shadow .25s, transform .35s var(--spring, ease); } :root[data-tone="light"] .nb-sw button { background: var(--tgl); } .nb-sw button:hover { transform: scale(1.08); } .nb-sw button[aria-checked="true"] { box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--tg); } :root[data-tone="light"] .nb-sw button[aria-checked="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--tgl); } /* the word at the foot, with its undo */ .nb-toast { position: fixed; z-index: 97; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 24px); padding-block: 6px; padding-inline: 16px 6px; border-radius: 14px; font: 500 .86rem/1.6 var(--ui); color: var(--bg); background: var(--ink); box-shadow: 0 18px 40px -16px rgb(0 0 0 / .5); opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s, transform .45s var(--spring, cubic-bezier(.2,.9,.3,1)); } .nb-toast.on { opacity: 1; transform: translate(-50%, 0); } .nb-toast > span { padding-block: 6px; } .nb-toast [data-act] { flex: none; height: 34px; padding-inline: 14px; border-radius: 10px; font: 700 .84rem var(--ui); color: var(--bg); background: color-mix(in oklab, var(--bg) 16%, transparent); } .nb-toast .nb-toast-x { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: color-mix(in oklab, var(--bg) 70%, transparent); } .nb-toast .nb-toast-x svg { width: 15px; height: 15px; } /* the editor */ .nb-ed { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 16px; } .nb-tagwin { z-index: 70; } .nb-ed-bg { position: absolute; inset: 0; background: rgb(0 0 0 / .55); animation: ntFade .3s ease both; } :root[data-tone="light"] .nb-ed-bg { background: rgb(28 30 40 / .26); } .nb-ed-box { position: relative; display: flex; flex-direction: column; width: min(100%, 780px); min-height: min(460px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px); border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -40px rgb(0 0 0 / .8); animation: ntBloom .45s cubic-bezier(.2, 1.1, .35, 1) both; transform-origin: 50% 100%; transition: width .45s var(--ease); } :root[data-tone="light"] .nb-ed-box { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 34px 80px -40px rgb(0 0 0 / .35); } .nb-ed.wide .nb-ed-box { width: min(100%, 1200px); height: calc(100dvh - 32px); } .nb-ed.wide .nb-ed-in { max-width: 76ch; margin-inline: auto; } .nb-ed.wide .nb-rt { font-size: 1.12rem; } .nb-ed.closing .nb-ed-box { animation: ntWilt .2s cubic-bezier(.4, 0, 1, 1) forwards; } .nb-ed.closing .nb-ed-bg { animation: ntFade .2s ease reverse forwards; } .nb-ed-h { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .nb-ed-h h2 { margin: 0 6px; font: 700 1.05rem var(--ui); color: var(--ink); } .nb-ed-sp { flex: 1; } .nb-done { flex: none; height: 38px; padding-inline: 18px; border-radius: 12px; font: 700 .88rem var(--ui); color: var(--bg); background: var(--ink); transition: transform .35s var(--spring, ease), background .25s; } .nb-done:hover { background: color-mix(in oklab, var(--ink) 86%, var(--bg)); } .nb-done:active { transform: scale(.95); } .nb-st { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font: 500 .78rem/1.5 var(--ui); color: var(--faint); } .nb-st i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background .3s; } .nb-st.is-ok i { background: var(--led-green); } .nb-st.is-wait i { background: var(--nb-fc); animation: nbBreathe 1.2s ease-in-out infinite; } .nb-st.is-err { color: var(--nb-rose); font-size: .76rem; } .nb-st.is-err i { background: var(--nb-rose); } @keyframes nbBreathe { 50% { opacity: .35; } } .nb-hic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--muted); transition: background .25s, color .25s; } .nb-hic svg { width: 18px; height: 18px; } .nb-hic:hover, .nb-hic[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-ed-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 24px 24px; scroll-padding-top: 60px; } .nb-ed-in { display: flex; flex-direction: column; gap: 4px; } .nb-title { width: 100%; margin-top: 14px; padding: 4px 0; border: 0; resize: none; overflow: hidden; background: none; outline: none; font: 700 1.35rem/1.5 var(--ui); color: var(--ink); unicode-bidi: plaintext; } .nb-title::placeholder { color: var(--faint); opacity: .8; } .nb-tb { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 2px; margin-inline: -8px; padding: 6px 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; background: var(--surface); } :root[data-tone="light"] .nb-tb { background: #fff; } .nb-tb::-webkit-scrollbar { display: none; } .nb-tb button { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); transition: background .2s, color .2s; } .nb-tb button svg { width: 18px; height: 18px; } .nb-tb button:hover { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-tb button.on { color: var(--nb-fc); background: color-mix(in oklab, var(--nb-fc) 15%, transparent); } .nb-tb-sep { flex: none; width: 1px; height: 20px; margin-inline: 5px; background: var(--line-2); } .nb-tb .nb-tb-tasks { display: inline-flex; gap: 6px; width: auto; padding-inline: 9px 11px; margin-inline-start: auto; font: 600 .8rem var(--ui); color: var(--nb-teal); } .nb-tb .nb-tb-tasks:hover { color: var(--nb-teal); background: color-mix(in oklab, var(--nb-teal) 12%, transparent); } .nb-rt { position: relative; min-height: 9rem; padding: 12px 2px 8px; font-size: 1.06rem; line-height: 2; outline: none; caret-color: var(--nb-fc); } .nb-rt.is-empty::before { content: attr(data-ph); position: absolute; inset-inline-start: 2px; top: 12px; color: var(--faint); pointer-events: none; } .nb-tasks { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .nb-tasks h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 .8rem var(--ui); color: var(--muted); } .nb-tasks h4 b { font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; } #nbRows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .nb-row { position: relative; display: flex; align-items: flex-start; gap: 4px; padding: 2px 2px 2px 4px; border-radius: 12px; background: var(--surface); transition: background .2s; } :root[data-tone="light"] .nb-row { background: #fff; } .nb-row:focus-within { background: color-mix(in oklab, var(--nb-fc) 5%, var(--surface)); } :root[data-tone="light"] .nb-row:focus-within { background: color-mix(in oklab, var(--nb-fc) 4%, #fff); } .nb-rgrip { flex: none; display: grid; place-items: center; width: 22px; height: 36px; color: var(--faint); opacity: .4; cursor: grab; touch-action: none; } .nb-rgrip svg { width: 15px; height: 15px; } .nb-row:hover .nb-rgrip { opacity: .9; } .nb-rchk { margin-top: 6px; } .nb-rtx { flex: 1; min-width: 0; padding: 5px 6px; border: 0; resize: none; overflow: hidden; background: none; outline: none; font: 400 1rem/1.8 "Noto Naskh Arabic", var(--prose, var(--ui)); color: var(--ink); unicode-bidi: plaintext; transition: color .3s; } .nb-row.is-done .nb-rtx { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--faint) 70%, transparent); } .nb-racts { flex: none; display: flex; opacity: 0; transition: opacity .2s; } .nb-row:hover .nb-racts, .nb-row:focus-within .nb-racts { opacity: 1; } .nb-racts button { display: grid; place-items: center; width: 30px; height: 36px; border-radius: 8px; color: var(--faint); } .nb-racts button:hover { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-racts button[data-rdel]:hover { color: var(--nb-rose); } .nb-racts svg { width: 15px; height: 15px; } .nb-row.is-drag { z-index: 3; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -14px rgb(0 0 0 / .55); } .nb-addrow { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 4px; padding-inline: 10px 12px; border-radius: 10px; font: 500 .84rem var(--ui); color: var(--muted); } .nb-addrow svg { width: 16px; height: 16px; } .nb-addrow:hover { color: var(--ink); background: rgb(var(--hi) / .06); } .nb-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; font: 500 .82rem/1.7 var(--ui); color: var(--ink); background: color-mix(in oklab, var(--nb-fc) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nb-fc) 32%, transparent); } .nb-restore span { flex: 1 1 220px; } .nb-restore button { height: 32px; padding-inline: 12px; border-radius: 9px; font: 600 .78rem var(--ui); color: var(--ink); background: rgb(var(--hi) / .08); } .nb-restore [data-keep] { color: var(--bg); background: var(--ink); } .nb-ed-f { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); } .nb-ed-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; } .nb-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 10px 12px; border-radius: 999px; font: 500 .8rem var(--ui); color: var(--muted); background: rgb(var(--hi) / .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--spring, ease); } .nb-chip svg { width: 15px; height: 15px; } .nb-chip:hover, .nb-chip[aria-expanded="true"] { color: var(--ink); background: rgb(var(--hi) / .08); } .nb-chip:active { transform: scale(.95); } .nb-chip.on { color: var(--ink); background: color-mix(in oklab, var(--led-blue) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--led-blue) 42%, transparent); } .nb-chip.on.is-late { background: color-mix(in oklab, var(--led-amber) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--led-amber) 42%, transparent); } #nbPin.on svg { fill: currentColor; color: var(--led-blue); } .nb-tmore { padding-inline: 10px; } .nb-tchip { display: inline-flex; align-items: center; gap: 5px; max-width: 12em; height: 30px; padding-inline: 9px 3px; border-radius: 999px; font: 500 .76rem var(--ui); color: var(--ink); background: color-mix(in oklab, var(--tg) 14%, transparent); } :root[data-tone="light"] .nb-tchip { background: color-mix(in oklab, var(--tgl) 10%, transparent); } .nb-tchip button { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); } .nb-tchip button:hover { color: var(--ink); background: rgb(var(--hi) / .1); } .nb-tchip button svg { width: 12px; height: 12px; stroke-width: 2.2; } /* the link bubble in the editor */ .nb-lb { position: fixed; z-index: 96; display: flex; align-items: center; gap: 2px; max-width: min(380px, calc(100vw - 16px)); padding: 4px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 34px -16px rgb(0 0 0 / .6); } :root[data-tone="light"] .nb-lb { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 30px -16px rgb(0 0 0 / .25); } .nb-lb-url { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 32px; padding-inline: 8px; border-radius: 8px; font: 500 .8rem var(--ui); color: var(--nb-lk); } .nb-lb-url:hover { background: color-mix(in oklab, var(--nb-lk) 10%, transparent); } .nb-lb-url svg { flex: none; width: 15px; height: 15px; } .nb-lb-url bdi { min-width: 0; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nb-lb button { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); } .nb-lb button:hover { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-lb button svg { width: 16px; height: 16px; } /* the tags window */ .nb-tg-box { width: min(100%, 540px); min-height: 0; } .nb-tg-lead { margin: 14px 0 10px; font: 400 .82rem/1.8 var(--ui); color: var(--muted); } .nb-tg-dup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; font: 500 .82rem/1.7 var(--ui); color: var(--ink); background: color-mix(in oklab, var(--nb-q) 11%, transparent); } .nb-tg-dup span { display: inline-flex; align-items: center; gap: 7px; flex: 1 1 200px; } .nb-tg-dup svg { width: 16px; height: 16px; flex: none; color: var(--nb-q); } .nb-tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .nb-tg-list li { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 12px; } .nb-tg-list li:focus-within { background: rgb(var(--hi) / .03); } .nb-tg-list input { flex: 1; } .nb-tg-list small { flex: none; font: 400 .74rem var(--ui); color: var(--faint); white-space: nowrap; } .nb-tg-col { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in oklab, var(--tg) 15%, transparent); transition: transform .35s var(--spring, ease); } :root[data-tone="light"] .nb-tg-col { background: color-mix(in oklab, var(--tgl) 11%, transparent); } .nb-tg-col:hover { transform: rotate(-8deg); } .nb-tg-col .nt-mark { width: 14px; height: 14px; } .nb-tg-del:hover { color: var(--nb-rose) !important; } .nb-tg-new { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .nb-tg-new .nb-mini { height: 40px; } @media (max-width: 760px) { .nb-tools { margin-inline-start: 0; } .nb-search { max-width: none; flex-basis: 100%; } } @media (max-width: 640px) { .nb-ed { padding: 0; place-items: stretch; } .nb-ed-box, .nb-ed.wide .nb-ed-box { width: 100%; height: 100dvh; max-height: 100dvh; min-height: 0; border-radius: 0; } #nbWide { display: none; } .nb-ed-scroll { padding: 0 16px 16px; } .nb-tagwin { place-items: end stretch; } .nb-tagwin .nb-ed-box { height: auto; max-height: 88dvh; border-radius: 22px 22px 0 0; } .nb-title { font-size: 1.2rem; } .nb-card { padding: 12px 14px 10px; } .nb-tools { width: 100%; justify-content: flex-end; } .nb-st span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } @media (hover: none) { .nb-racts { opacity: 0; } .nb-row:focus-within .nb-racts { opacity: 1; } .nb-rgrip { opacity: .7; width: 28px; } } @media (prefers-reduced-motion: reduce) { .nb-ed-box, .nb-ed-bg, .nb-ed.closing .nb-ed-box, .nb-st.is-wait i { animation: none; } .nb-toast { transition: opacity .2s; } } .nb-page svg.nt-mark, .nb-ed svg.nt-mark, .nb-pop svg.nt-mark { fill: var(--tg); stroke: none; color: var(--tg); } :root[data-tone="light"] :is(.nb-page, .nb-ed, .nb-pop) svg.nt-mark { fill: var(--tgl); color: var(--tgl); } :is(.nb-page, .nb-ed, .nb-pop) svg.nt-mark circle[fill="none"] { fill: none; stroke: currentColor; stroke-width: 2; } @media (max-width: 640px) { .nb-bar .nb-search { order: 1; flex: 1 1 0; min-width: 0; } .nb-bar .nb-tools { order: 2; width: auto; margin-inline-start: 0; } .nb-bar .nb-views { order: 3; } .nb-tool { width: 46px; padding: 0; justify-content: center; } .nb-tool #nbSortT { display: none; } } @media (max-width: 640px) { .nb-tb button { width: 34px; height: 36px; } .nb-tb .nb-tb-tasks span { display: none; } .nb-tb .nb-tb-tasks { padding-inline: 8px; } .nb-tb-sep { margin-inline: 3px; } } @media (hover: none) { .nb-row { flex-wrap: wrap; } .nb-racts { display: none; width: 100%; justify-content: flex-end; opacity: 1; } .nb-row:focus-within .nb-racts { display: flex; } } /* ================================================================================================= NOTES, the words (11 Nov 2026): headings in three sizes, strike, code, code blocks, rules, tables and task lists inside the words. A task's box: in the editor drawn beside the line (a click on it ticks it), on a card a real button. Tables scroll inside their own width, never the page. A small bar of tools floats at the foot of the editor while the caret is in a list or a table. ================================================================================================= */ :root { --nb-code: #b9c3d6; --nb-codebg: rgb(255 255 255 / .05); } :root[data-tone="light"] { --nb-code: #3c4a63; --nb-codebg: rgb(0 0 0 / .045); } .nb-rich h2, .nb-rt h2 { margin: .45em 0 .2em; font: 700 1.24rem/1.5 var(--ui); color: var(--ink); } .nb-rich h4, .nb-rt h4 { margin: .35em 0 .1em; font: 700 .98rem/1.6 var(--ui); color: var(--ink); } .nb-rich :is(p, li, h2, h3, h4, blockquote, td, th), .nb-rt :is(p, div, li, h2, h3, h4, blockquote, td, th) { unicode-bidi: plaintext; text-align: start; } .nb-rich s, .nb-rt s { text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in oklab, var(--ink) 55%, transparent); } .nb-rich code, .nb-rt code { padding: .05em .4em; border-radius: 6px; font: 500 .86em/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--nb-code); background: var(--nb-codebg); unicode-bidi: isolate; direction: ltr; overflow-wrap: anywhere; } .nb-rich pre, .nb-rt pre { direction: ltr; text-align: left; unicode-bidi: isolate; margin: .35em 0 .5em; padding: .7em .9em; border-radius: 12px; font: 400 .86rem/1.65 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--nb-code); background: var(--nb-codebg); box-shadow: inset 0 0 0 1px var(--line); white-space: pre; overflow-x: auto; max-width: 100%; tab-size: 4; } .nb-rich hr, .nb-rt hr { height: 1px; margin: .8em 0; border: 0; background: var(--line-2); } .nb-rich table, .nb-rt table { display: block; max-width: 100%; overflow-x: auto; margin: .35em 0 .6em; border-collapse: collapse; font: 400 .9rem/1.6 var(--ui); scrollbar-width: thin; } .nb-rich :is(td, th), .nb-rt :is(td, th) { min-width: 4.5em; max-width: 22em; padding: .35em .65em; vertical-align: top; border: 1px solid var(--line-2); overflow-wrap: anywhere; } .nb-rich th, .nb-rt th { font-weight: 700; background: rgb(var(--hi) / .04); } .nb-rt :is(td, th):focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--nb-fc) 65%, transparent); } .nb-rich ul ul, .nb-rich ol ol, .nb-rich ul ol, .nb-rich ol ul, .nb-rt ul ul, .nb-rt ol ol, .nb-rt ul ol, .nb-rt ol ul { margin: .1em 0 .15em; } /* task lists */ .nb-rich ul[data-cl], .nb-rt ul[data-cl] { list-style: none; padding-inline-start: 0; } .nb-rich ul[data-cl] ul[data-cl], .nb-rt ul[data-cl] ul[data-cl] { padding-inline-start: 1.6em; } .nb-rt ul[data-cl] > li { position: relative; padding-inline-start: 1.85em; min-height: 1.9em; } .nb-rt ul[data-cl] > li:not([data-nt])::before { content: ""; position: absolute; inset-inline-start: .15em; top: .42em; width: 1.12em; height: 1.12em; border-radius: .34em; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 30%, transparent); background: rgb(var(--hi) / .035); transition: background .3s, box-shadow .3s; cursor: pointer; } .nb-rt ul[data-cl] > li:not([data-nt])::after { content: ""; position: absolute; inset-inline-start: .52em; top: .6em; width: .32em; height: .6em; border: solid transparent; border-width: 0 .14em .14em 0; transform: rotate(45deg); transition: border-color .25s; pointer-events: none; } .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::before { background: var(--led-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-green) 18%, transparent); } .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::after { border-color: #06210f; } :root[data-tone="light"] .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::after { border-color: #fff; } .nb-rt ul[data-cl] > li:not([data-nt])[data-done], .nb-rich ul[data-cl] > li[data-done] { color: var(--faint); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--faint) 70%, transparent); } .nb-rich ul[data-cl] > li { position: relative; display: block; padding-inline-start: 2em; padding-block: 2px; } .nb-rich ul[data-cl] > li > .nb-cchk { position: absolute; inset-inline-start: 0; top: .32em; margin: 0; } .nb-rich ul[data-cl] > li[data-done] > .nb-cchk { text-decoration: none; } .nb-rich ul[data-cl] li ul, .nb-rich ul[data-cl] li ol { text-decoration: none; } .nb-rich.is-off .nb-cchk { pointer-events: none; opacity: .6; } /* a plain item inside a task list: a small dot where a box would be */ .nb-rt ul[data-cl] > li[data-nt]::before, .nb-rich ul[data-cl] > li[data-nt]::before { content: ""; position: absolute; inset-inline-start: .55em; top: .85em; width: .34em; height: .34em; border-radius: 50%; background: var(--faint); } .nb-rich ul[data-cl] > li[data-nt] { padding-inline-start: 2em; } /* the small bar of tools for a list or a table */ .nb-ctx { position: absolute; left: 50%; z-index: 4; display: flex; align-items: center; gap: 2px; max-width: calc(100% - 24px); padding: 4px; border-radius: 14px; transform: translateX(-50%); overflow-x: auto; scrollbar-width: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 32px -14px rgb(0 0 0 / .6); } :root[data-tone="light"] .nb-ctx { background: #fff; box-shadow: inset 0 0 0 1px var(--line-2), 0 12px 28px -14px rgb(0 0 0 / .25); } .nb-ctx[hidden] { display: none; } .nb-ctx > i { flex: none; width: 1px; height: 20px; margin-inline: 3px; background: var(--line-2); } .nb-ctx button { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 40px; height: 40px; padding-inline: 8px; border-radius: 10px; font: 600 .78rem var(--ui); color: var(--muted); transition: background .2s, color .2s; } .nb-ctx button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nb-ctx button:hover { color: var(--ink); background: rgb(var(--hi) / .07); } .nb-ctx button[disabled] { opacity: .35; pointer-events: none; } .nb-ctx button[data-x="task"] { color: var(--led-green); } .nb-ctx button[data-x^="del"]:hover { color: var(--nb-rose); } .nb-ctx button:focus-visible { outline: 2px solid var(--nb-fc); outline-offset: 1px; } .nb-ed-scroll { scroll-padding-bottom: 70px; } @media (prefers-reduced-motion: reduce) { .nb-rt ul[data-cl] > li::before, .nb-rt ul[data-cl] > li::after { transition: none; } } /* a sub-list under a done task is not itself done: as an inline block it does not take the line through */ :is(.nb-rt, .nb-rich) ul[data-cl] > li[data-done] > :is(ul, ol) { display: inline-block; width: 100%; color: var(--ink); vertical-align: top; } .nb-ed-scroll { padding-bottom: 72px; } /* ================= NOTES on a phone: two by two, or one short row each (nb-dense) ================= */ .nb-dense, .nb-c-line { display: none; } @media (max-width: 640px) { .nb-tools .nb-dense { display: inline-flex; } /* cards: two columns of short cards; a tap opens the whole note */ .nb-grid:not(.is-rows) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; } .nb-grid:not(.is-rows) .nb-card { gap: 7px; padding: 8px 10px 8px; border-radius: 16px; } .nb-grid:not(.is-rows) .nb-c-top { min-height: 30px; gap: 2px; } .nb-grid:not(.is-rows) .nb-c-t { font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nb-grid:not(.is-rows) .nb-grip { width: 26px; height: 30px; margin-inline-start: -6px; } .nb-grid:not(.is-rows) .nb-ic { width: 28px; height: 30px; } .nb-grid .nb-pin:not(.on) { display: none; } /* pinning stays in the card's menu */ .nb-grid:not(.is-rows) .nb-c-body { max-height: 9.6rem; font-size: .9em; gap: 6px; } .nb-grid:not(.is-rows) .nb-card.is-long .nb-c-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.4rem), transparent); } .nb-grid:not(.is-rows) .nb-card.is-open .nb-c-body { max-height: 9.6rem; } .nb-grid:not(.is-rows) .nb-morebtn, .nb-grid:not(.is-rows) .nb-cut { display: none; } .nb-grid:not(.is-rows) .nb-c-foot { min-height: 26px; padding-top: 6px; gap: 4px; } .nb-grid:not(.is-rows) .nb-c-tags .nb-tag:not(:first-child), .nb-grid:not(.is-rows) .nb-tag-more { display: none; } .nb-grid:not(.is-rows) .nb-c-time { font-size: .68rem; } .nb-grid:not(.is-rows) .nb-c-foot:has(.nt-due-chip) .nb-c-time { display: none; } /* rows: one line per note, for many notes and quick ordering */ .nb-grid.is-rows { grid-template-columns: minmax(0, 1fr); row-gap: 0; column-gap: 6px; } /* the layout takes this gap as the space between rows */ .nb-grid.is-rows .nb-card { gap: 0; padding: 4px 8px 4px 6px; border-radius: 14px; } .nb-grid.is-rows .nb-c-top { min-height: 44px; gap: 4px; } .nb-grid.is-rows :is(.nb-c-body, .nb-morebtn, .nb-c-foot, .nb-cut) { display: none; } .nb-grid.is-rows .nb-c-t { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-grid.is-rows .nb-c-k { flex: none; } .nb-grid.is-rows .nb-c-line { display: block; flex: 1; min-width: 0; font: 500 .9rem/1.5 var(--ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; } .nb-grid.is-rows .nb-card.has-tag::before { top: 50%; translate: 0 -50%; height: 18px; } .nb-grid.is-rows .nt-prog { position: absolute; inset-inline: 14px; bottom: 3px; height: 2px; margin: 0; } .nb-grid.is-rows .nb-card.is-fin .nb-c-t, .nb-grid.is-rows .nb-card.is-fin .nb-c-line { color: var(--muted); } } /* ================= NOTES, a card's width (nb-size): a corner grip on the side the card grows to, live preview ================= */ .nb-size { display: none; } .nb-grid.can-size .nb-size { position: absolute; z-index: 2; bottom: 4px; inset-inline-end: 4px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 7px 7px 7px 14px; color: var(--faint); cursor: nesw-resize; touch-action: none; opacity: .45; transition: opacity .25s, color .25s, background .25s, transform .4s var(--spring, ease); } .nb-size svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; } .nb-card:hover .nb-size, .nb-size:focus-visible { opacity: 1; } .nb-size:hover, .nb-size:focus-visible, .nb-card.is-sizing .nb-size { opacity: 1; color: var(--nb-fc, var(--ink)); background: color-mix(in oklab, var(--nb-fc, var(--ink)) 12%, transparent); } .nb-size:hover { transform: scale(1.08); } .nb-size:focus-visible { outline: 2px solid var(--nb-fc); outline-offset: 1px; } .nb-grid.can-size .nb-c-foot { padding-inline-end: 20px; } /* the time never sits under the corner */ @media (hover: none) { .nb-grid.can-size .nb-size { opacity: .7; width: 30px; height: 30px; bottom: 2px; inset-inline-end: 2px; } } .nb-card.is-sizing { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--nb-fc, var(--ink)) 70%, transparent); background: color-mix(in oklab, var(--nb-fc, var(--ink)) 5%, var(--surface)); } .nb-size-tip { position: absolute; z-index: 3; top: 10px; left: 50%; translate: -50% 0; padding: 4px 12px; border-radius: 999px; font: 600 .74rem var(--ui); color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nb-fc, var(--ink)) 50%, var(--line)), 0 4px 14px rgb(0 0 0 / .25); pointer-events: none; white-space: nowrap; } body.nb-sizing, body.nb-sizing * { cursor: nesw-resize !important; user-select: none; } /* wide screens: cards laid by notes.js, each with a width of its own (any width from one column to the row) */ .nb-grid.is-free { position: relative; } .nb-grid.is-free > .nb-card { position: absolute; margin: 0; } .nb-grid.is-live > .nb-card:not(.is-sizing) { transition: top .26s cubic-bezier(.2,.85,.25,1), right .26s cubic-bezier(.2,.85,.25,1), left .26s cubic-bezier(.2,.85,.25,1), box-shadow .3s, opacity .3s; } @media (prefers-reduced-motion: reduce) { .nb-grid.is-live > .nb-card { transition: none; } } /* ================= NOTES, a folded card (nb-fold): only its name stays ================= */ .nb-fold svg { width: 16px; height: 16px; transition: transform .35s var(--spring, cubic-bezier(.3,1.4,.5,1)); } .nb-card.is-fold .nb-fold svg { transform: rotate(90deg); } /* points along the line, as the page reads, when folded */ :dir(rtl) .nb-card.is-fold .nb-fold svg, [dir="rtl"] .nb-card.is-fold .nb-fold svg { transform: rotate(-90deg); } /* the fold sits right beside the name; the other tools keep to the far side */ .nb-c-top:has(.nb-fold) :is(.nb-c-t, .nb-c-k) { flex: 0 1 auto; } .nb-c-top .nb-fold { margin-inline-end: auto; } .nb-card.is-fold .nb-c-top:has(.nb-c-line) .nb-c-line { flex: 0 1 auto; } .nb-card.is-fold .nb-fold { color: var(--nb-fc, var(--ink)); background: color-mix(in oklab, var(--nb-fc, var(--ink)) 10%, transparent); } .nb-card.is-fold :is(.nb-c-body, .nb-morebtn, .nb-cut, .nt-prog, .nb-c-foot) { display: none; } .nb-card.is-fold { gap: 0; } .nb-card.is-fold:not(:has(.nb-c-t)) .nb-c-k { flex: none; } .nb-card.is-fold .nb-c-line { display: block; flex: 1; min-width: 0; font: 500 .92rem/1.5 var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: start; } .nb-card.is-fold .nb-c-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nb-grid.is-rows .nb-fold { display: none; } @media (prefers-reduced-motion: reduce) { .nb-fold svg { transition: none; } } /* ================= NOTES, the tick, fifth form: a calm tinted box with a drawn green tick (no solid block, no halo) ================= */ :root { --nb-ok: #8fdcae; --nb-ok-bg: rgb(143 220 174 / .14); --nb-ok-ed: rgb(143 220 174 / .55); } :root[data-tone="light"] { --nb-ok: #23804f; --nb-ok-bg: rgb(35 128 79 / .1); --nb-ok-ed: rgb(35 128 79 / .5); } .nt-chk { border-radius: 8px; } .nt-chk[aria-pressed="true"] { background: var(--nb-ok-bg); box-shadow: inset 0 0 0 1.5px var(--nb-ok-ed); } .nt-chk svg, :root[data-tone="light"] .nt-chk svg { stroke: var(--nb-ok); stroke-width: 2.6; } .nt-chk::after { box-shadow: 0 0 0 1.5px var(--nb-ok); } .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::before { background: var(--nb-ok-bg); box-shadow: inset 0 0 0 1.5px var(--nb-ok-ed); } .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::after, :root[data-tone="light"] .nb-rt ul[data-cl] > li:not([data-nt])[data-done]::after { border-color: var(--nb-ok); border-width: 0 .12em .12em 0; border-radius: 0 0 .06em 0; } .nb-grid.is-rows .nb-c-top :is(.nb-c-t, .nb-c-line) { flex: 1 1 auto; } /* ================= READING by kind (zr-): a supplication for a moment is read, not counted; back to the chapters, not on to the next ================= */ .z.z-free { cursor: auto; } .z.z-free .z-foot { justify-content: flex-start; } .dk-track[hidden], .read-tools #reset[hidden] { display: none !important; } .next-ch.is-one { grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), 520px); } .next-ch.is-one a, .next-ch.is-one a:last-child { align-items: center; text-align: center; } .dk .dk-next svg { width: 18px; height: 18px; } /* ================================================================================================= THE CHAPTER SCENES (js/card-art.js; prefix cs-). Each card's scene is drawn once, line by line, when it first comes into view (.cs-in); then it lives only while it is on screen (.cs-run). Every movement eases in and out of its rests (a sine curve between keyframes), so nothing starts or stops with a jolt; each scene has its own lengths and each card its own starting point (--dl), so they never move together. ================================================================================================= */ .cs .cs-d { stroke-dasharray: 1 1; stroke-dashoffset: 1.01; transition: stroke-dashoffset 2.6s cubic-bezier(.45, .05, .2, 1) var(--d, 0s); } .card.cs-in .cs .cs-d { stroke-dashoffset: 0; } .cs .cs-f { opacity: 0; transition: opacity 2.4s ease var(--d, 0s); } .card.cs-in .cs .cs-f { opacity: 1; } .cs .cs-mv { transform-box: view-box; animation-duration: 16s; animation-timing-function: cubic-bezier(.37, 0, .63, 1); animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--dl, 0s) + var(--o, 0s)); animation-play-state: paused; } .card.cs-run .cs .cs-mv { animation-play-state: running; } /* the tall shapes show the scene's lower part under the band, behind their glass */ @media (min-width: 561px) { .cards:is([data-shape="glass"], [data-shape="strip"]) .card .band.cs-band, .cards:is([data-shape="glass"], [data-shape="strip"]) .card .band.cs-band svg.cs { overflow: visible; } .cards[data-shape="glass"] .card .band.cs-band::after { display: none; } } /* lines that run (water, wind, rain, the reflection of a star): the dash pattern travels along them */ .cs .cs-mv.cs-flow, .cs .cs-mv.cs-rain { stroke-dasharray: .16 .09; animation-name: csFlow; animation-duration: 7s; animation-timing-function: linear; } .cs .cs-mv.cs-flow.cs-slow { stroke-dasharray: .2 .05; animation-duration: 26s; } .cs .cs-mv.cs-flow.cs-slow.cs-alt { animation-duration: 33s; } .cs .cs-mv.cs-flow.cs-fast { stroke-dasharray: .08 .045; animation-duration: 1.4s; } .cs .cs-mv.cs-flow.cs-fast.cs-alt { animation-duration: 1.75s; } .cs .cs-mv.cs-flow.cs-shim { stroke-dasharray: .06 .065; animation-duration: 5s; } .cs .cs-mv.cs-rain { stroke-dasharray: .08 .045; } .cs .cs-mv.cs-rev { animation-direction: reverse; } @keyframes csFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } } /* waves travel by exactly one wave length, so the loop has no seam */ .cs .cs-mv.cs-wave { animation-timing-function: linear; } .cs .cs-wl90 { animation-name: csWl90; animation-duration: 13s; } @keyframes csWl90 { to { transform: translateX(-90px); } } .cs .cs-wl76 { animation-name: csWl76; animation-duration: 11s; } @keyframes csWl76 { to { transform: translateX(-76px); } } .cs .cs-wl64 { animation-name: csWl64; animation-duration: 9s; } @keyframes csWl64 { to { transform: translateX(-64px); } } .cs .cs-wl80 { animation-name: csWl80; animation-duration: 18s; } @keyframes csWl80 { to { transform: translateX(-80px); } } .cs .cs-wl70 { animation-name: csWl70; animation-duration: 22s; } @keyframes csWl70 { to { transform: translateX(-70px); } } /* the air: clouds and bands of cloud drifting and resting, the light breathing, points of light coming and going */ .cs .cs-drift-a { animation-name: csDriftA; animation-duration: 19s; } @keyframes csDriftA { 0%, 12% { transform: translateX(0); } 50%, 62% { transform: translateX(26px); } 100% { transform: translateX(0); } } .cs .cs-drift-b { animation-name: csDriftB; animation-duration: 27s; } @keyframes csDriftB { 0%, 20% { transform: translateX(0); } 56%, 70% { transform: translateX(-20px); } 100% { transform: translateX(0); } } .cs .cs-drift-c { animation-name: csDriftC; animation-duration: 34s; } @keyframes csDriftC { 0%, 10% { transform: translateX(0); } 48%, 64% { transform: translateX(14px); } 100% { transform: translateX(0); } } .cs .cs-breath { animation-name: csBreath; animation-duration: 22s; } @keyframes csBreath { 0%, 100% { opacity: .72; } 45%, 60% { opacity: 1; } } .cs .cs-tw { animation-name: csTw; animation-duration: 9s; } @keyframes csTw { 0%, 100% { opacity: .35; } 40%, 55% { opacity: 1; } } .cs .cs-mist-a { animation-name: csMistA; animation-duration: 40s; } @keyframes csMistA { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-40px); } } .cs .cs-mist-b { animation-name: csMistB; animation-duration: 32s; } @keyframes csMistB { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(36px); } } /* sleep: the crescent rocks a little, a lit window goes out for a long while */ .cs .cs-rock { animation-name: csRock; animation-duration: 15s; } @keyframes csRock { 0%, 18% { transform: rotate(0); } 46%, 60% { transform: rotate(-6deg); } 88%, 100% { transform: rotate(0); } } .cs .cs-dim { animation-name: csDim; animation-duration: 36s; } @keyframes csDim { 0%, 30% { opacity: 1; } 45%, 85% { opacity: .12; } 100% { opacity: 1; } } /* evening, waking at sunset, morning: the sun going down or coming up, the palms in the wind */ .cs .cs-sink { animation-name: csSink; animation-duration: 24s; } @keyframes csSink { 0%, 16% { transform: translateY(0); } 52%, 68% { transform: translateY(9px); } 100% { transform: translateY(0); } } .cs .cs-rise { animation-name: csRise; animation-duration: 22s; } @keyframes csRise { 0%, 14% { transform: translateY(8px); } 50%, 66% { transform: translateY(-4px); } 100% { transform: translateY(8px); } } .cs .cs-sway { animation-name: csSway; animation-duration: 11s; } @keyframes csSway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(2.4deg); } 62% { transform: rotate(-1.2deg); } } .cs .cs-sway2 { animation-name: csSway2; animation-duration: 9s; } @keyframes csSway2 { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-2.6deg); } 75% { transform: rotate(1.2deg); } } /* waking: the white thread of dawn spreading as the last star fades; the day's sun; the night's lantern */ .cs .cs-thread { animation-name: csThread; animation-duration: 18s; } @keyframes csThread { 0%, 10% { transform: scaleX(.55); opacity: .55; } 50%, 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(.55); opacity: .55; } } .cs .cs-out { animation-name: csOut; animation-duration: 18s; } @keyframes csOut { 0%, 15% { opacity: 1; } 55%, 75% { opacity: .15; } 100% { opacity: 1; } } .cs .cs-sunday { animation-name: csSunDay; animation-duration: 26s; } @keyframes csSunDay { 0%, 15% { transform: translate(0, 0); } 50%, 65% { transform: translate(-6px, 4px); } 100% { transform: translate(0, 0); } } .cs .cs-swing { animation-name: csSwing; animation-duration: 8s; } @keyframes csSwing { 0%, 100% { transform: rotate(2.6deg); } 50% { transform: rotate(-2.6deg); } } .cs .cs-flame { animation-name: csFlame; animation-duration: 4.6s; } @keyframes csFlame { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.92, 1.07); } } /* wudu: a drop gathering and falling, rings opening on the water */ .cs .cs-drip { animation-name: csDrip; animation-duration: 5.2s; } @keyframes csDrip { 0%, 38% { transform: translateY(0) scale(.5); opacity: 0; } 50% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .5); } 70% { transform: translateY(58px) scale(1); opacity: .95; } 73%, 100% { transform: translateY(58px) scale(1); opacity: 0; } } .cs .cs-ripple { animation-name: csRipple; animation-duration: 3.2s; animation-timing-function: cubic-bezier(.2, .6, .35, 1); } @keyframes csRipple { 0% { transform: scale(.2); opacity: 0; } 12% { opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } .cs .cs-ripple.cs-late { animation-name: csRipLate; animation-duration: 5.2s; } @keyframes csRipLate { 0%, 70% { transform: scale(.2); opacity: 0; } 73% { opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } /* adhan: the call going out over the town, in waves with rests between them */ .cs .cs-mv.cs-call { stroke-dasharray: .14 .11; animation-name: csCall; animation-duration: 11s; } @keyframes csCall { 0% { opacity: 0; stroke-dashoffset: 0; } 12% { opacity: .9; } 50% { opacity: .7; } 72%, 100% { opacity: 0; stroke-dashoffset: -1; } } /* mosque and prayer: lamps lit one after another, a hanging lamp, the light in the niche */ .cs .cs-lamp { animation-name: csLamp; animation-duration: 14s; } @keyframes csLamp { 0%, 100% { opacity: .3; } 20%, 36% { opacity: 1; } 56% { opacity: .3; } } .cs .cs-lampsway { animation-name: csLampSway; animation-duration: 12s; } @keyframes csLampSway { 0%, 100% { transform: rotate(1.4deg); } 50% { transform: rotate(-1.4deg); } } .cs .cs-niche { animation-name: csNiche; animation-duration: 16s; } @keyframes csNiche { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* after prayer: the column's shadow turning slowly as the hours go */ .cs .cs-shadow { animation-name: csShadow; animation-duration: 30s; } @keyframes csShadow { 0%, 14% { transform: rotate(0); } 50%, 64% { transform: rotate(-9deg); } 100% { transform: rotate(0); } } /* home: the door opening a little and closing again, its light on the step with it */ .cs .cs-door { animation-name: csDoor; animation-duration: 20s; } @keyframes csDoor { 0%, 18% { transform: scaleX(1); } 42%, 72% { transform: scaleX(.7); } 92%, 100% { transform: scaleX(1); } } .cs .cs-wedge { animation-name: csWedge; animation-duration: 20s; } @keyframes csWedge { 0%, 18% { opacity: .35; } 42%, 72% { opacity: 1; } 92%, 100% { opacity: .35; } } /* clothes: the robe and the shawl in the wind, each on its own time */ .cs .cs-robe { animation-name: csRobe; animation-duration: 10s; } @keyframes csRobe { 0%, 100% { transform: rotate(0) skewX(0); } 35% { transform: rotate(1.8deg) skewX(-2deg); } 70% { transform: rotate(-1deg) skewX(1deg); } } .cs .cs-shawl { animation-name: csShawl; animation-duration: 8.5s; } @keyframes csShawl { 0%, 100% { transform: rotate(0) skewX(0); } 30% { transform: rotate(3deg) skewX(-3deg); } 65% { transform: rotate(-2deg) skewX(2deg); } } /* food: steam rising from the glass and thinning out */ .cs .cs-steam { animation-name: csSteam; animation-duration: 6.3s; animation-timing-function: ease-in-out; } @keyframes csSteam { 0% { opacity: 0; transform: translateY(8px) scaleY(.9); } 30% { opacity: 1; } 75% { opacity: .5; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.06); } } /* night and travel: reeds by the water, a boat rocking with its pennant */ .cs .cs-reed { animation-name: csReed; animation-duration: 9s; } @keyframes csReed { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-1.6deg); } 75% { transform: rotate(.8deg); } } .cs .cs-bob { animation-name: csBob; animation-duration: 7s; } @keyframes csBob { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(3px) rotate(1.6deg); } } .cs .cs-flag { animation-name: csFlag; animation-duration: 3.4s; } @keyframes csFlag { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(6deg) scaleX(.9); } } /* distress: the light beyond the pass opening, the mist lifting off the path */ .cs .cs-gap { animation-name: csGap; animation-duration: 20s; } @keyframes csGap { 0%, 15% { opacity: .6; } 50%, 72% { opacity: 1; } 100% { opacity: .6; } } .cs .cs-lift { animation-name: csLift; animation-duration: 24s; } .cs .cs-lift.cs-lift2 { animation-duration: 31s; } @keyframes csLift { 0%, 10% { transform: translate(0, 0); opacity: 1; } 50%, 62% { transform: translate(-24px, -8px); opacity: .45; } 100% { transform: translate(0, 0); opacity: 1; } } /* illness: the branch moving, each leaf stirring on its own, the water's face */ .cs .cs-branch { animation-name: csBranch; animation-duration: 13s; } @keyframes csBranch { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(1.4deg); } 72% { transform: rotate(-.6deg); } } .cs .cs-leaf { animation-name: csLeaf; animation-duration: 6.5s; } @keyframes csLeaf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } } .cs .cs-surface { animation-name: csSurface; animation-duration: 5s; } @keyframes csSurface { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.8); } } /* the gathering: the light from the windows moving over the cushions, a curtain stirring */ .cs .cs-patch { animation-name: csPatch; animation-duration: 28s; } @keyframes csPatch { 0%, 10% { transform: translateX(0); opacity: .8; } 50%, 62% { transform: translateX(-18px); opacity: 1; } 100% { transform: translateX(0); opacity: .8; } } .cs .cs-curtain { animation-name: csCurtain; animation-duration: 12s; } @keyframes csCurtain { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(2deg); } } /* funerals: the tree barely moving, a leaf now and then coming down */ .cs .cs-tree { animation-name: csTree; animation-duration: 14s; } @keyframes csTree { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(.8deg); } } .cs .cs-fall { animation-name: csFall; animation-duration: 20s; } @keyframes csFall { 0%, 20% { transform: translate(0, 0) rotate(0); opacity: 0; } 26% { opacity: 1; } 55% { transform: translate(-22px, 44px) rotate(120deg); } 80% { transform: translate(-10px, 86px) rotate(250deg); opacity: .9; } 88%, 100% { transform: translate(-14px, 92px) rotate(260deg); opacity: 0; } } /* tasbih: the hanging string swaying, the lying one counting a bead at a time */ .cs .cs-pend { animation-name: csPend; animation-duration: 10s; } @keyframes csPend { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } } .cs .cs-mv.cs-count { animation-name: csCount; animation-duration: 4.2s; } @keyframes csCount { 0%, 64% { stroke-dashoffset: 0; } 86%, 100% { stroke-dashoffset: -.033; } } /* dua: a page lifting and turning over now and then */ .cs .cs-page { animation-name: csPage; animation-duration: 17s; } @keyframes csPage { 0%, 58% { transform: translateY(0) scaleX(1); opacity: 1; } 66% { transform: translateY(-5px) scaleX(.02); opacity: 1; } 74% { transform: translateY(0) scaleX(-1); opacity: 1; } 84% { transform: translateY(0) scaleX(-1); opacity: 0; } 85% { transform: translateY(0) scaleX(1); opacity: 0; } 100% { transform: translateY(0) scaleX(1); opacity: 1; } } /* for those who prefer less motion: the finished drawing, still */ @media (prefers-reduced-motion: reduce) { .cs .cs-d { transition: none; stroke-dashoffset: 0; } .cs .cs-f { transition: none; opacity: 1; } .cs .cs-mv { animation: none !important; } } /* the wide card for this hour keeps most of its scene's height (a thin band cropped the sky off) */ @media (min-width: 760px) { .card.feat .band.cs-band { aspect-ratio: 600 / 236; } } /* the strip: the scene's own corner (its main drawing) sits higher and smaller, and the name below it, so the words never lie on the drawing */ @media (min-width: 561px) { .cards[data-shape="strip"] .card .band.cs-band svg.cs { top: -14px; left: -366px; height: 238px; } .cards[data-shape="strip"] .card .band.cs-band .vtitle { top: 196px; } } /* ---------- the chapter scenes, second pass: more life ---------- */ /* steam and vapour: one soft stroke going up its curl and thinning out */ .cs .cs-mv.cs-vapor { stroke-dasharray: .32 1; animation-name: csVapor; animation-duration: 7s; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } @keyframes csVapor { 0% { stroke-dashoffset: .32; opacity: 0; } 18% { opacity: 1; } 80% { opacity: .6; } 100% { stroke-dashoffset: -1; opacity: 0; } } /* a small light going along a road, resting between its walks */ .cs .cs-mv.cs-walk { stroke-dasharray: .06 1; animation-name: csWalk; animation-duration: 12s; } @keyframes csWalk { 0%, 48% { stroke-dashoffset: .06; opacity: 0; } 54% { opacity: 1; } 90% { opacity: .9; } 100% { stroke-dashoffset: -1; opacity: 0; } } /* light lying on water in pieces, each piece widening and narrowing on its own */ .cs .cs-glint { animation-name: csGlint; animation-duration: 3.6s; } @keyframes csGlint { 0%, 100% { transform: scaleX(.55); opacity: .35; } 50% { transform: scaleX(1.15); opacity: 1; } } /* the night's star, turning a little as it shines */ .cs .cs-star { animation-name: csStar; animation-duration: 9s; } @keyframes csStar { 0%, 100% { transform: scale(1) rotate(0); opacity: .85; } 50% { transform: scale(1.25) rotate(45deg); opacity: 1; } } /* a shooting star, once in a long while */ .cs .cs-meteor { animation-name: csMeteor; animation-duration: 17s; animation-timing-function: cubic-bezier(.3, 0, .7, 1); } @keyframes csMeteor { 0%, 82% { stroke-dashoffset: .3; opacity: 0; } 84% { opacity: 1; } 93%, 100% { stroke-dashoffset: -1; opacity: 0; } } /* a ring that opens on still water, then a long calm */ .cs .cs-ripple.cs-slowring { animation-name: csRingRest; animation-duration: 8s; } @keyframes csRingRest { 0%, 55% { transform: scale(.2); opacity: 0; } 60% { opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } } /* the strands of the tassel, each on its own time */ .cs .cs-strand { animation-name: csStrand; animation-duration: 4.6s; } @keyframes csStrand { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } } /* the beads counted one at a time, eleven to a round, so the marker beads come back to their places */ .cs .cs-mv.cs-count11 { animation-name: csCount11; animation-duration: 46s; } @keyframes csCount11 { 0.00%, 6.00% { stroke-dashoffset: 0.0000; } 9.09%, 15.09% { stroke-dashoffset: -0.0303; } 18.18%, 24.18% { stroke-dashoffset: -0.0606; } 27.27%, 33.27% { stroke-dashoffset: -0.0909; } 36.36%, 42.36% { stroke-dashoffset: -0.1212; } 45.45%, 51.45% { stroke-dashoffset: -0.1515; } 54.55%, 60.55% { stroke-dashoffset: -0.1818; } 63.64%, 69.64% { stroke-dashoffset: -0.2121; } 72.73%, 78.73% { stroke-dashoffset: -0.2424; } 81.82%, 87.82% { stroke-dashoffset: -0.2727; } 90.91%, 96.91% { stroke-dashoffset: -0.3030; } 100% { stroke-dashoffset: -0.3333; } } /* a drop running off a leaf into the glass, and the ring it makes */ .cs .cs-dew { animation-name: csDew; animation-duration: 8s; } @keyframes csDew { 0%, 30% { transform: translateY(0) scale(.4); opacity: 0; } 46% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, 1, .5); } 62% { transform: translateY(80px) scale(1); opacity: .95; } 64%, 100% { transform: translateY(80px) scale(1); opacity: 0; } } .cs .cs-dewring { animation-name: csDewRing; animation-duration: 8s; animation-timing-function: cubic-bezier(.2, .6, .35, 1); } @keyframes csDewRing { 0%, 62% { transform: scale(.2); opacity: 0; } 65% { opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } } /* ---------- the chapter scenes, third pass ---------- */ /* night street: the lamps' pools of light breathing one after another */ .cs .cs-pool { animation-name: csPool; animation-duration: 9s; } @keyframes csPool { 0%, 100% { opacity: .55; transform: scale(.94); } 45%, 60% { opacity: 1; transform: scale(1.06); } } /* the signpost's two boards stirring in the wind, each on its own time */ .cs .cs-board1 { animation-name: csBoard1; animation-duration: 9s; } @keyframes csBoard1 { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-1.8deg); } 75% { transform: rotate(.8deg); } } .cs .cs-board2 { animation-name: csBoard2; animation-duration: 11s; } @keyframes csBoard2 { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(1.6deg); } 70% { transform: rotate(-.9deg); } } /* the beads coiled in the bowl moving slowly round */ .cs .cs-mv.cs-coil { animation-name: csFlow; animation-duration: 40s; animation-timing-function: linear; } /* incense: the smoke drifting as it rises, the embers glowing and resting */ .cs .cs-drift-smoke { animation-name: csSmoke; animation-duration: 13s; } @keyframes csSmoke { 0%, 100% { transform: translateX(0) skewX(0); } 50% { transform: translateX(-10px) skewX(-4deg); } } .cs .cs-ember { animation-name: csEmber; animation-duration: 5s; } @keyframes csEmber { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } /* ---------- the chapter scenes, fourth pass ---------- */ /* the night street: its middle line sliding slowly sideways, from right to left, by one dash and gap */ .cs .cs-lane { animation-name: csLane; animation-duration: 11s; } @keyframes csLane { to { transform: translateX(-40px); } } /* the wide glass card for this hour, at every width: its whole scene first (the title never cropped), then the frosted pane, lifted over the scene's foot only. The lift is a share of the card's width, as the scene's height is, so the pane always stops below the title, however wide or narrow the card */ .cards[data-shape="glass"] .card.feat:has(.cs-band) { aspect-ratio: auto; min-height: 0; } .cards[data-shape="glass"] .card.feat:has(.cs-band) .band.cs-band { position: relative; inset: auto; aspect-ratio: 600 / 260; flex: none; } .cards[data-shape="glass"] .card.feat:has(.cs-band) .card-body { position: relative; inset: auto; margin: -13% 12px 12px; flex: none; } /* THE CHAPTER SCENES — clothes in one wind: the robe and the shawl hang from their pegs and the same light breeze leans their lower edges the same way (the top stays pinned to the line); the shawl, lighter, a little more and a moment later, as the gust reaches it */ .cs .cs-robe, .cs .cs-shawl { animation-name: csCloth; animation-duration: 12s; } .cs .cs-shawl { animation-name: csClothLight; --o: .6s; } @keyframes csCloth { 0%, 8% { transform: skewX(0); } 30% { transform: skewX(4deg); } 44% { transform: skewX(2.6deg); } 58% { transform: skewX(4.6deg); } 82% { transform: skewX(.8deg); } 100% { transform: skewX(0); } } @keyframes csClothLight { 0%, 8% { transform: skewX(0); } 30% { transform: skewX(6deg); } 44% { transform: skewX(3.6deg); } 58% { transform: skewX(6.8deg); } 82% { transform: skewX(1.2deg); } 100% { transform: skewX(0); } } /* THE CHAPTER SCENES — after the prayer: a page of the open mushaf lifting a little in the air of the room and lying down again; the remembrance: the count's light passing bead by bead round the misbaha, resting after the thirty-third before it begins again */ .cs .cs-leafturn { animation-name: csLeafTurn; animation-duration: 18s; } @keyframes csLeafTurn { 0%, 48% { transform: scaleX(1); } 62% { transform: scaleX(.34); } 72% { transform: scaleX(.46); } 88%, 100% { transform: scaleX(1); } } .cs .cs-bead { animation-name: csBead; animation-duration: 20s; animation-timing-function: ease-out; } @keyframes csBead { 0% { opacity: 0; } 1.6% { opacity: 1; } 8% { opacity: 0; } 100% { opacity: 0; } } /* THE CHAPTER SCENES — after the prayer: the folded end of the rug breathing as the cloth settles, its fringe stirring in the air of the room (the fringe hangs from the rug's edge, so it leans from there) */ .cs .cs-fold { animation-name: csFold; animation-duration: 15s; } @keyframes csFold { 0%, 20% { transform: scaleY(1); } 48%, 58% { transform: scaleY(.9); } 84%, 100% { transform: scaleY(1); } } .cs .cs-fringe { animation-name: csFringe; animation-duration: 9s; } @keyframes csFringe { 0%, 100% { transform: skewX(0); } 40% { transform: skewX(14deg); } 70% { transform: skewX(-6deg); } } /* ---------- THE CHAPTER SCENES — the card's lower part, take three: no box, no divider, no capsule ---------- The words sit under the scene the way a caption sits under a drawing. The foot is one thread that runs from the count to the action: the part already said today is lit (--p from app.js), the rest is a faint line. The action is a word with a hand-drawn arrow in the scenes' own line, not a button; on hover the thread brightens and the arrow draws itself again. The glass pane gets depth (a lit top edge, a soft shadow under it) instead of an outline. */ :root .cards .card .card-foot { border-top: 0; padding-top: 6px; gap: 12px; align-items: center; } :root .cards .card .card-foot .stat { order: 0; flex: none; } :root .cards .card .card-foot::before { content: ""; order: 1; flex: 1; min-width: 24px; height: 2px; border-radius: 2px; align-self: center; background: linear-gradient(to left, color-mix(in oklab, var(--gold) 85%, transparent) calc(var(--p, 0) * 100%), var(--line-2) calc(var(--p, 0) * 100%)); -webkit-mask: linear-gradient(to left, #000 70%, transparent); mask: linear-gradient(to left, #000 70%, transparent); transition: opacity .5s var(--ease), filter .5s; opacity: .8; } :root .cards .card:hover .card-foot::before { opacity: 1; filter: brightness(1.25); } :root .cards .card .open { order: 2; flex: none; width: auto; min-width: 0; height: auto; padding: 2px 0; gap: 8px; border-radius: 0; background: none; box-shadow: none; color: var(--ink); overflow: visible; } :root .cards .card .open b { max-width: none; opacity: .92; height: auto; line-height: 1.4; font: 500 .95rem/1.4 var(--ui); } :root .cards .card .open .zl-arw { width: 30px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; transition: transform .6s var(--ease); animation: none; } :root .cards .card .open .zl-arw path { stroke-dasharray: 1 1; stroke-dashoffset: 0; } :root .cards .card:hover .open, :root .cards .card:focus-visible .open { background: none; box-shadow: none; padding: 2px 0; gap: 8px; color: var(--gold-2); } :root .cards .card:hover .open b { opacity: 1; max-width: none; } :root .cards .card:hover .open .zl-arw { transform: translateX(-4px); } :root .cards .card:hover .open .zl-arw path { animation: zlArw .9s cubic-bezier(.45, .05, .2, 1) both; } :root .cards .card:hover .open .zl-arw path + path { animation-delay: .35s; } @keyframes zlArw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { :root .cards .card:hover .open .zl-arw path { animation: none; } } /* the floating glass: depth instead of an outline */ :root .cards[data-shape="glass"] .card .card-body { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 18px 34px -20px rgb(0 0 0 / .7); background: linear-gradient(180deg, rgb(var(--glass) / .5), rgb(var(--glass) / .72)); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); } :root[data-tone="light"] .cards[data-shape="glass"] .card .card-body { box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 16px 30px -20px rgb(0 0 0 / .28); } /* the words: the moment a touch larger and quieter, the facts above it set apart by spacing, not by lines */ :root .cards .card .card-meta { letter-spacing: .01em; } :root .cards .card .what { margin-bottom: 2px; } /* ---------- THE CHAPTER SCENES — the lower part in every shape ---------- The thread now says how much of the chapter is said, so the row of small diamonds under the words would say it twice: it goes. Each shape draws the thread in its own hand: ink dots on the manuscript, stitches on the stitched card. */ :root .cards .card .dots { display: none; } :root .cards[data-shape="manuscript"] .card .card-foot::before { height: 3px; background: radial-gradient(circle, color-mix(in oklab, var(--gold) 85%, transparent) 1.1px, transparent 1.4px) right / 7px 3px repeat-x; -webkit-mask: linear-gradient(to left, #000 calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) 70%, transparent); mask: linear-gradient(to left, #000 calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) 70%, transparent); } /* the stitched card: the scene is a patch of cloth sewn onto the card with a running stitch round it, the card's ground has the faint grain of woven cloth, and the thread at the foot is itself a line of stitches */ .cards[data-shape="stitch"] .card { background-image: repeating-linear-gradient(0deg, rgb(var(--hi) / .018) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgb(var(--hi) / .018) 0 1px, transparent 1px 3px); } .cards[data-shape="stitch"] .card .band { margin: 16px 16px 0; border-radius: 12px; overflow: hidden; outline: 1.6px dashed color-mix(in oklab, var(--gold) 55%, transparent); outline-offset: 5px; } .cards[data-shape="stitch"] .card .band::after { display: none; } .cards[data-shape="stitch"] .card .card-body { margin-top: 0; padding-top: 18px; } .cards[data-shape="stitch"] .card:hover .band { outline-color: color-mix(in oklab, var(--gold) 85%, transparent); } .cards[data-shape="stitch"] .card .band { transition: outline-color .5s var(--ease); } :root .cards[data-shape="stitch"] .card .card-foot::before { height: 2px; background: repeating-linear-gradient(to left, color-mix(in oklab, var(--gold) 85%, transparent) 0 7px, transparent 7px 12px); -webkit-mask: linear-gradient(to left, #000 calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) 70%, transparent); mask: linear-gradient(to left, #000 calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) calc(var(--p, 0) * 100%), rgb(0 0 0 / .35) 70%, transparent); } .cards[data-shape="stitch"] .card .is-now { top: 26px; inset-inline-start: 26px; } /* its picture in the shape picker: the patch and its stitches */ .themes .sh-stitch::before { inset: 7px 7px 46%; border-radius: 3px; } .themes .sh-stitch::after { content: ""; position: absolute; inset: 4px 4px calc(46% - 3px); border-radius: 5px; border: 1px dashed color-mix(in oklab, var(--gold) 70%, transparent); } /* the strip is narrow: the idle word gives the thread its room */ .cards[data-shape="strip"] .card .card-foot .stat:not(:empty) { font-size: .74rem; } /* ---------- the card arrow, drawn as with a reed pen: a tapering stroke that swells toward its point, a curved open head, the small blot where the pen first touched. On hover the stroke reaches a little further, the head moves on with it and the blot fades, as if the line had just been pulled. ---------- */ :root .cards .card .open .zl-arw { width: 38px; height: 18px; fill: currentColor; stroke: none; overflow: visible; transform: none; transition: none; } :root .cards .card .open .zl-arw path { animation: none; stroke-dasharray: none; } :root .cards .card .open .zl-arw-body { transform-box: view-box; transform-origin: 37px 10.5px; transition: transform .7s var(--ease); } :root .cards .card .open .zl-arw-head path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } :root .cards .card .open .zl-arw-head { transition: transform .7s var(--ease); } :root .cards .card .open .zl-arw-dot { opacity: .55; transition: opacity .5s, transform .7s var(--ease); transform-box: view-box; transform-origin: 39.4px 10.6px; } :root .cards .card:hover .open .zl-arw { transform: none; } :root .cards .card:hover .open .zl-arw path { animation: none; } :root .cards .card:hover .open .zl-arw-body { transform: scaleX(1.16); } :root .cards .card:hover .open .zl-arw-head { transform: translateX(-5px); } :root .cards .card:hover .open .zl-arw-dot { opacity: 0; transform: scale(.4); } @media (prefers-reduced-motion: reduce) { :root .cards .card .open .zl-arw * { transition: none; } } /* ================================================================================================= THE CHAPTER EMBLEM, take two: no star. The chapter's own sign in one line, standing on a thin horizon, its shadow (ظلّ, the site's name) lying under it, faint and fading. It draws itself in on arrival; then the sign rises a breath and settles while its shadow shortens and lengthens with it, slowly, as a shadow does when the light moves. On hover the horizon widens a little. ================================================================================================= */ .read-emb.zl-emb { width: 76px; height: 76px; margin: 18px auto -6px; color: color-mix(in oklab, var(--ch) 62%, var(--ink)); } .zl-emb svg { overflow: visible; } .zl-emb .emb-line { stroke-dasharray: 1 1; stroke-dashoffset: 0; } .zl-emb .emb-ic, .zl-emb .emb-sh, .zl-emb .emb-hz { transform-box: view-box; } .zl-emb .emb-ic { transform-origin: 40px 51px; } .zl-emb .emb-sh { transform-origin: 40px 51px; opacity: .3; } .zl-emb .emb-hz { transform-origin: 40px 51px; transition: transform 1.2s var(--ease), opacity .8s; opacity: .8; } .read-head:hover .zl-emb .emb-hz { transform: scaleX(1.22); opacity: 1; } @media (prefers-reduced-motion: no-preference) { .zl-emb .emb-line { animation: embDraw 1.8s .15s cubic-bezier(.45, .05, .2, 1) both; } .zl-emb .emb-hz { animation: embHz 1.4s .1s cubic-bezier(.2, .8, .2, 1) both; } .zl-emb .emb-sh { animation: embShIn 1.6s .9s ease both, embSh 11s 2.5s cubic-bezier(.37, 0, .63, 1) infinite; } .zl-emb .emb-ic { animation: embRise 11s 2.5s cubic-bezier(.37, 0, .63, 1) infinite; } } @keyframes embDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes embHz { from { transform: scaleX(0); opacity: 0; } } @keyframes embShIn { from { opacity: 0; } } @keyframes embRise { 0%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(-2.2px); } } @keyframes embSh { 0%, 100% { transform: scaleY(1) skewX(0); } 45%, 55% { transform: scaleY(.84) skewX(-6deg); } } @media (max-width: 560px) { .read-emb.zl-emb { width: 62px; height: 62px; margin-top: 12px; } } /* ================================================================================================= THE TEXT-SIZE CONTROL: the two ends say what they do by themselves (a small «أ» and a large «أ», each with a fine minus or plus beside it); between them the size in words and a short track whose dot shows where it stands between smallest and largest. An end that is reached rests (dimmed, not clickable). Roomy enough for a thumb on the phone; a clear ring when reached by the keyboard. ================================================================================================= */ .read-tools .size { height: 44px !important; padding: 3px; gap: 0; border-radius: 15px; } .read-tools .size button { position: relative; display: grid; place-items: center; width: 44px; height: 38px; border-radius: 12px; color: var(--ink); font: inherit; transition: background .25s, color .25s, opacity .3s, transform .45s var(--spring); } .read-tools .size .sz-a { font-family: var(--text); line-height: 1; translate: 0 1px; } .read-tools #smaller .sz-a { font-size: .98rem; } .read-tools #bigger .sz-a { font-size: 1.42rem; } .read-tools .size .sz-sign { position: absolute; top: 9px; inset-inline-end: 7px; width: 6px; height: 6px; } .read-tools .size .sz-sign::before, .read-tools #bigger .sz-sign::after { content: ""; position: absolute; inset: 2.5px 0 auto; height: 1.2px; border-radius: 1px; background: currentColor; opacity: .7; } .read-tools #bigger .sz-sign::after { inset: 0 auto 0 2.5px; width: 1.2px; height: auto; } .read-tools .size button:hover:not(:disabled) { background: color-mix(in oklab, var(--ch, var(--accent)) 16%, transparent) !important; color: var(--ink); } .read-tools .size button:active:not(:disabled) { transform: scale(.9); } .read-tools .size button:disabled { opacity: .32; cursor: default; } .read-tools .size button:focus-visible { outline: 2px solid color-mix(in oklab, var(--ch, var(--accent)) 80%, var(--ink)); outline-offset: 1px; } .read-tools .size .sz-mid { display: grid; justify-items: center; gap: 4px; min-width: 58px; padding-inline: 4px; } .read-tools #sizeVal { min-width: 0; font: 500 .78rem/1 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; } .read-tools .sz-track { position: relative; display: block; width: 40px; height: 2px; border-radius: 2px; background: var(--line-2); } .read-tools .sz-track b { position: absolute; top: 50%; inset-inline-start: calc(var(--sz, .25) * 100%); width: 6px; height: 6px; margin-inline-start: -3px; margin-top: -3px; border-radius: 50%; background: color-mix(in oklab, var(--ch, var(--accent)) 75%, var(--ink)); transition: inset-inline-start .45s var(--spring); } .read-tools .sz-track::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--sz, .25) * 100%); border-radius: inherit; background: color-mix(in oklab, var(--ch, var(--accent)) 55%, transparent); transition: width .45s var(--spring); } .read-tools .tool { height: 44px !important; border-radius: 15px; } @media (hover: none) { .read-tools .size button { width: 48px; } } /* the minus and plus sit close beside their letter, raised a little, like a mark written next to it */ .read-tools .size button { display: inline-flex; align-items: center; justify-content: center; gap: 1px; } .read-tools .size .sz-sign { position: relative; top: -6px; inset-inline-end: auto; flex: none; width: 6px; height: 6px; } /* the size letters, clearer: the interface face (its alef and hamza read cleanly at small sizes), firmer weight; the minus and plus drawn larger and steadier, centred on the letter's height beside it */ .read-tools .size .sz-a { font: 600 1rem/1 var(--ui); translate: 0 0; } .read-tools #smaller .sz-a { font-size: .9rem; } .read-tools #bigger .sz-a { font-size: 1.28rem; } .read-tools .size button { gap: 4px; } .read-tools .size .sz-sign { top: 0; width: 9px; height: 9px; } .read-tools .size .sz-sign::before, .read-tools #bigger .sz-sign::after { inset: 3.8px 0 auto; height: 1.6px; border-radius: 1px; opacity: .85; } .read-tools #bigger .sz-sign::after { inset: 0 auto 0 3.7px; width: 1.6px; height: auto; } .read-tools .size .sz-a { color: var(--ink); } /* the size buttons say minus and plus plainly: one clean drawn sign each, the same weight and size, centred */ .read-tools .size .sz-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .read-tools .size button { width: 42px; color: var(--ink); } /* the «من البداية» button: its own drawn turning arrow in the size control's line; it turns back once on hover; pressing it once arms it (the words become «اضغط للتأكيد» in the chapter's colour and a thin line runs out beneath them in three and a half seconds); a second press in that time begins again, otherwise it rests */ .read-tools .zl-reset { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding-inline: 14px 16px; font: 500 .86rem var(--ui); color: var(--ink); transition: background .25s, color .3s, box-shadow .3s, transform .45s var(--spring) !important; } .read-tools .zl-reset .rs-ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: rotate .8s var(--spring); rotate: 0deg; } .read-tools .zl-reset:hover .rs-ic { rotate: -300deg; } .read-tools .zl-reset:hover { background: color-mix(in oklab, var(--ch, var(--accent)) 14%, transparent) !important; } .read-tools .zl-reset:active { transform: scale(.95); } .read-tools .zl-reset:focus-visible { outline: 2px solid color-mix(in oklab, var(--ch, var(--accent)) 80%, var(--ink)); outline-offset: 2px; } .read-tools .zl-reset .rs-c { display: none; } .read-tools .zl-reset.arm { color: color-mix(in oklab, var(--ch, var(--accent)) 70%, var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch, var(--accent)) 60%, transparent) !important; background: color-mix(in oklab, var(--ch, var(--accent)) 10%, transparent) !important; } .read-tools .zl-reset.arm .rs-t { display: none; } .read-tools .zl-reset.arm .rs-c { display: inline; } .read-tools .zl-reset .rs-bar { position: absolute; inset-inline: 14px; bottom: 6px; height: 1.5px; border-radius: 2px; background: currentColor; opacity: 0; transform-origin: center; } .read-tools .zl-reset.arm .rs-bar { opacity: .7; animation: rsBar 3.5s linear forwards; } @keyframes rsBar { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* ================================================================================================= THE DHIKR SHEET, in the language of the cards and the chapter head: no frame inside a frame, no stars. Depth instead of outlines (a lit top edge, a soft shadow under the sheet); one thread of the chapter's colour along the top edge that brightens on the sheet that comes next; a short thread hanging between one sheet and the next, as if they were strung on it; the number written plainly over a small pen stroke, which becomes a drawn tick when the dhikr is said; «التالي» a word with a dot, not a capsule. ================================================================================================= */ :root .list .z { border-radius: 22px; background: linear-gradient(180deg, color-mix(in oklab, var(--ch) 5%, transparent), transparent 46%), var(--surface) !important; box-shadow: inset 0 1px 0 rgb(var(--hi) / .07), inset 0 0 0 1px var(--line), 0 22px 44px -32px rgb(0 0 0 / .85) !important; transition: box-shadow .5s, background .5s; } :root[data-tone="light"] .list .z { box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px var(--line), 0 18px 36px -28px rgb(0 0 0 / .22) !important; } /* the thread along the top edge (it was the inner frame) */ :root .list .z::after { inset: 0 20% auto !important; height: 1.5px; border: 0 !important; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--ch), transparent) !important; opacity: .3 !important; transition: opacity .6s, inset .8s var(--ease) !important; } :root .list .z.next::after { inset: 0 6% auto !important; opacity: 1 !important; } :root .list .z.done::after { opacity: .12 !important; } :root .list .z.next { box-shadow: inset 0 1px 0 rgb(var(--hi) / .08), inset 0 0 0 1px color-mix(in oklab, var(--ch) 32%, transparent), 0 26px 50px -30px rgb(0 0 0 / .9) !important; } :root[data-tone="light"] .list .z.next { box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 0 0 1px color-mix(in oklab, var(--ch) 40%, transparent), 0 22px 40px -26px rgb(0 0 0 / .26) !important; } /* the thread between one sheet and the next (it was the small star on the frame) */ :root .list .z::before { inset: -23px auto auto 50% !important; width: 1.5px !important; height: 23px !important; margin-left: -.75px !important; clip-path: none !important; rotate: none !important; background: linear-gradient(transparent, color-mix(in oklab, var(--ch) 70%, transparent)) !important; opacity: .45 !important; } :root .list .z-sec + .z::before, :root .list > .z:first-child::before { display: none !important; } /* the number over its pen stroke; said, the number gives way to a drawn tick */ .list .zl-no { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 34px; padding-bottom: 6px; color: color-mix(in oklab, var(--ch) 60%, var(--ink)); } .list .zl-no b { font: 600 .98rem/1 var(--ui); font-variant-numeric: tabular-nums; transition: opacity .4s, transform .5s var(--spring); } .list .zl-no::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 20px; height: 2px; margin-left: -10px; border-radius: 2px; background: linear-gradient(90deg, transparent, currentColor 30%, currentColor 70%, transparent); opacity: .55; transition: width .6s var(--ease), margin .6s var(--ease), opacity .4s; } .list .zl-tick { position: absolute; top: 3px; left: 50%; width: 22px; height: 22px; margin-left: -11px; fill: none; stroke: var(--ch); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .list .zl-tick path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s .15s cubic-bezier(.45, .05, .2, 1); } .list .z.done .zl-no b { opacity: 0; transform: scale(.6); } .list .z.done .zl-tick path { stroke-dashoffset: 0; } .list .z.done .zl-no::after { width: 28px; margin-left: -14px; opacity: .8; } .list .z.next .zl-no::after { opacity: 1; } /* the ornament under the words: two fading threads and a small dot between them, not a star */ :root .list .z-sep span { height: 1px; opacity: 1; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ch) 55%, transparent)); } :root .list .z-sep span:last-child { background: linear-gradient(270deg, transparent, color-mix(in oklab, var(--ch) 55%, transparent)); } :root .list .z-sep i { width: 4px; height: 4px; border-radius: 50%; clip-path: none; } /* the counter takes the rounded-square of the reading tools */ :root .list .counter { border-radius: 15px; } @media (max-width: 560px) { :root .list .z { border-radius: 18px; } :root .list .z::before { top: -19px !important; height: 19px !important; } } :root .list .z::after { display: block !important; content: "" !important; position: absolute; pointer-events: none; } :root .list .z::before { width: 2px !important; margin-left: -1px !important; opacity: .8 !important; background: linear-gradient(color-mix(in oklab, var(--ch) 20%, transparent), color-mix(in oklab, var(--ch) 85%, var(--ink))) !important; } /* the chapter colours are deep; the threads take a little of the ink so they read on the dark sheet */ :root .list .z::after { height: 2px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--ch) 65%, var(--ink)), transparent) !important; opacity: .4 !important; } :root .list .z.next::after { opacity: .95 !important; } :root .list .z.done::after { opacity: .15 !important; } :root .list .z::before { background: linear-gradient(color-mix(in oklab, var(--ch) 40%, transparent), color-mix(in oklab, var(--ch) 60%, var(--ink))) !important; opacity: .7 !important; } :root .list .z::before, :root .list .z::after { -webkit-mask: none !important; mask: none !important; } /* the sheet flat and quiet (the owner does not want it to look puffed): one even surface, no tinted wash at the top, no lit edge, only a faint line round it and the lightest shadow; the threads stay */ :root .list .z, :root .list .z.next, :root .list .z.done { background: var(--surface) !important; } :root .list .z { box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -22px rgb(0 0 0 / .6) !important; } :root .list .z.next { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 32%, transparent), 0 10px 24px -22px rgb(0 0 0 / .6) !important; } :root[data-tone="light"] .list .z { box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -18px rgb(0 0 0 / .14) !important; } :root[data-tone="light"] .list .z.next { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 40%, transparent), 0 8px 20px -18px rgb(0 0 0 / .14) !important; } /* ================================================================================================= THE DHIKR SHEET, tidier: the words first. The head holds only the number (and «التالي»); copy and share go down to the foot beside the source and the counter, so the corners are no longer four separate things. The virtue is no grey box: a quiet line under the thin threads, its word «فضله» in the chapter's colour. The sheet that comes next is marked by its bright top thread only, not a coloured outline. The counter is the round capsule again; the soft square is a choice in the settings. ================================================================================================= */ :root .list .z-top { min-height: 34px; } :root .list .z-text { margin-top: 18px; line-height: 2.25; } :root .list .z-foot { gap: 10px; } :root .list .z-foot .src { flex: 1; min-width: 0; } :root .list .z-foot .z-actions { margin-inline-start: 0; gap: 2px; } :root .list .z-foot .z-actions .icon-btn { width: 36px; height: 36px; border-radius: 12px; color: var(--faint); } :root .list .z-foot .z-actions .icon-btn:hover { color: var(--ink); background: color-mix(in oklab, var(--ch) 14%, transparent); } :root .list .z.next { box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -22px rgb(0 0 0 / .6) !important; } :root[data-tone="light"] .list .z.next { box-shadow: inset 0 0 0 1px var(--line), 0 8px 20px -18px rgb(0 0 0 / .14) !important; } :root .list .counter { border-radius: 999px; } :root[data-counter="square"] .list .counter { border-radius: 15px; } @media (max-width: 560px) { :root .list .z-foot .z-actions .icon-btn { width: 34px; height: 34px; } :root .list .z-text { margin-top: 12px; } } /* «التالي», the capsule again but finer: a soft tint of the chapter's colour with a thin edge of the same, its word in a light shade of it, sitting low and calm beside the number */ :root .list .next-tag { height: 24px; padding-inline: 11px; gap: 0; border-radius: 999px; font: 600 .74rem/1 var(--ui); letter-spacing: .01em; background: color-mix(in oklab, var(--ch) 20%, transparent) !important; color: color-mix(in oklab, var(--ch) 45%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 45%, transparent) !important; } :root[data-tone="light"] .list .next-tag { background: color-mix(in oklab, var(--ch) 14%, transparent) !important; color: color-mix(in oklab, var(--ch) 75%, #000) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 40%, transparent) !important; } :root .list .next-tag::before { content: none; } /* said: the star gives way to a tick alone, no disc behind it, drawn in the chapter's colour with one stroke of the pen, a little larger than the number was */ :root .list .medal::before { display: none !important; } :root .list .medal .tick { inset: 3px; stroke: color-mix(in oklab, var(--ch) 70%, var(--ink)); stroke-width: 2.4; opacity: 0; transform: none; animation: none !important; } :root .list .medal .tick path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s .1s cubic-bezier(.45, .05, .2, 1); } :root .list .z.done .medal .tick { opacity: 1; } :root .list .z.done .medal .tick path { stroke-dashoffset: 0; } :root[data-tone="light"] .list .medal .tick { stroke: color-mix(in oklab, var(--ch) 85%, #000); } /* the move to the next dhikr: while the page glides, nothing else moves (no rising, no sheen) */ .zl-glide .to-rise { opacity: 1 !important; transform: none !important; transition: opacity .35s ease !important; } .zl-glide .z.shine::before { animation: none !important; background: none !important; } /* said: the tick, finer and more alive. One curved pen stroke (a short dip, then a long rising sweep), drawn in the chapter's colour; as it lands, a thin ring of the same colour opens round it once and fades away, leaving the tick alone, with nothing behind it */ :root .list .medal .tick { inset: 2px; overflow: visible; } :root .list .medal .tick .tk-line { fill: none; stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s .1s cubic-bezier(.65, 0, .35, 1); } :root .list .medal .tick .tk-ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; } :root .list .medal .tick { color: color-mix(in oklab, var(--ch) 70%, var(--ink)); } :root[data-tone="light"] .list .medal .tick { color: color-mix(in oklab, var(--ch) 85%, #000); } :root .list .z.done .medal .tick .tk-line { stroke-dashoffset: 0; } :root .list .z.done .medal .tick .tk-ring { animation: tkRing 1.1s .55s cubic-bezier(.2, .7, .3, 1) both; } @keyframes tkRing { 0% { opacity: .7; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } } @media (prefers-reduced-motion: reduce) { :root .list .z.done .medal .tick .tk-ring { animation: none; } } /* the move to the next dhikr: the sheets dim and return while the page is set in place, no sliding */ .list { transition: opacity .3s ease; } .zl-dim .list { opacity: 0; transition: opacity .2s ease; } .zl-dim .mini-title { transition: none; } /* the tick, alone: no ring. A clean, even tick with round ends, a touch heavier, in a light and clear shade of the chapter's colour so it reads at once on the dark sheet (and a deeper shade on the light one) */ :root .list .medal .tick .tk-ring { display: none; } :root .list .medal .tick { inset: 5px; color: color-mix(in oklab, var(--ch) 50%, #fff); } :root[data-tone="light"] .list .medal .tick { color: color-mix(in oklab, var(--ch) 80%, #000); } :root .list .medal .tick .tk-line { stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* the tick draws a little quicker */ :root .list .medal .tick .tk-line { transition: stroke-dashoffset .42s .05s cubic-bezier(.4, 0, .2, 1); } /* no automatic move: when the next dhikr is out of sight, the «الذكر التالي» button in the reading bar lights softly in the chapter's colour for a moment, so you know where to go */ .dk .dk-go.zl-hint { animation: zlHint 2.6s ease both; } @keyframes zlHint { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--dkr, var(--accent)) 0%, transparent); } 20%, 60% { box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--dkr, var(--accent)) 80%, transparent), 0 0 14px 2px color-mix(in oklab, var(--dkr, var(--accent)) 45%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--dkr, var(--accent)) 0%, transparent); } } /* the switch for the automatic move goes: the page no longer moves by itself */ .pref:has(#prefScroll) { display: none !important; } /* «التالي», finer: the word a touch larger and clearer, with the small pen arrow of the cards after it pointing on to the words, in one light shade of the chapter's colour on a quiet tint with a thin edge; it arrives with a short fade from the side, once */ :root .list .next-tag { height: 26px; padding-inline: 12px 10px; gap: 6px; font: 600 .8rem/1 var(--ui); background: color-mix(in oklab, var(--ch) 16%, transparent) !important; color: color-mix(in oklab, var(--ch) 40%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 50%, transparent) !important; animation: zlTagIn .5s cubic-bezier(.2, .8, .2, 1) both; } :root .list .next-tag::after { content: ""; width: 15px; height: 8px; background: currentColor; opacity: .85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M27 7.6C20 6.3 12 6 5 7.2L5.1 8.6C12 8.2 20 8.5 27 9Z'/%3E%3Cpath d='M3.6 8C6.6 7 8.8 5.3 10.1 3.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M3.6 8C6.9 8.7 9.2 10.3 10.6 12.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 16'%3E%3Cpath d='M27 7.6C20 6.3 12 6 5 7.2L5.1 8.6C12 8.2 20 8.5 27 9Z'/%3E%3Cpath d='M3.6 8C6.6 7 8.8 5.3 10.1 3.2' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M3.6 8C6.9 8.7 9.2 10.3 10.6 12.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } :root[data-tone="light"] .list .next-tag { color: color-mix(in oklab, var(--ch) 78%, #000) !important; background: color-mix(in oklab, var(--ch) 12%, transparent) !important; } @keyframes zlTagIn { from { opacity: 0; transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { :root .list .next-tag { animation: none; } } /* «التالي»: only the word in its frame, nothing added. A small tag with softly rounded corners (the family of the reading tools, not a round capsule), the word firm and evenly spaced, a clear tint of the chapter's colour and a crisp edge of the same */ :root .list .next-tag::after { content: none !important; } :root .list .next-tag { height: 25px; padding-inline: 11px; gap: 0; border-radius: 8px; font: 600 .78rem/1 var(--ui); letter-spacing: .02em; background: color-mix(in oklab, var(--ch) 22%, transparent) !important; color: color-mix(in oklab, var(--ch) 32%, #fff) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 58%, transparent) !important; } :root[data-tone="light"] .list .next-tag { background: color-mix(in oklab, var(--ch) 13%, #fff) !important; color: color-mix(in oklab, var(--ch) 80%, #000) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ch) 45%, transparent) !important; }