/* ========================================================================== چالش | Design tokens & shared styles ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap'); :root{ /* ========================================================================== THEMES — every colour in this file lives in one of the three blocks below and nowhere else. This block is the light theme «شن و مریم‌گلی» (sand & sage) and is the base; the two blocks after it restate the same token names for the dark theme «شب کرمی» (creamy night), once for a device that asks for dark and once for an explicit [data-theme="dark"]. Nothing downstream may hardcode a colour — a rule that needs a tint uses rgba(var(--accent-rgb),a) rather than a second copy of the hex — so re-theming is editing values here, never sweeping 1200 lines. ========================================================================== */ /* --- ground: page, mid stop, raised --- */ --bg-0:#f8f4ee; --bg-1:#f0e9e0; --bg-2:#ffffff; /* --- glass: the card primitive. Light and dark run the pane in opposite directions — in light it is a white sheet *over* a warm ground and needs a high alpha to read as a pane at all; in dark it is a faint white wash over near-black. Same token, inverted mechanics, which is exactly why it is a token. --- */ --glass:rgba(255,255,255,0.55); --glass-strong:rgba(255,255,255,0.76); --border:rgba(255,255,255,0.85); --border-strong:rgba(44,40,34,0.16); /* the 1px lit edge along the top of every glass pane */ --glass-sheen:rgba(255,255,255,0.9); /* --- neutral fills that are NOT the glass pane: inset fields, ghost buttons, progress tracks, muted badges. Kept apart from --glass so a field inside a card can sit *below* the card in light and *above* it in dark without either theme fighting the other. --- */ --fill-1:rgba(255,255,255,0.5); --fill-2:rgba(255,255,255,0.7); --track:rgba(44,40,34,0.10); --fill-mute:rgba(44,40,34,0.09); /* --- accents. The *-rgb triplets exist so a tinted fill can be written rgba(var(--accent-rgb),0.12) instead of re-hardcoding the hue. --- */ --fayrouzeh:#46806f; /* مریم‌گلی sage — primary accent */ --fayrouzeh-dim:#35655a; --accent-rgb:70,128,111; --mohr:#b26a55; /* clay — status / signature accent only */ --mohr-dim:#8f5241; --mohr-rgb:178,106,85; --gold:#b8863f; /* burnt sand — streak / highlight, sparingly */ --gold-rgb:184,134,63; /* --- foreground on a *filled* accent surface. A pastel fill needs dark ink and a deep fill needs light ink, so this flips with the theme and every filled control reads it instead of guessing. --- */ --on-accent:#ffffff; --on-gold:#2b1d06; --on-finished:#ffffff; --danger-text:#a8503c; /* --- challenge status: شروع نشده / در حال اجرا / تمام شده --- One hue per derived status (see challenge_status in app/routers/challenge.py), shared by the card's accent stripe, its pill, and the matching button in the status filter, so the same colour always means the same thing. Sage is already "live/primary" everywhere in this UI, so «در حال اجرا» keeps it; «شروع نشده» takes gold (waiting, not wrong -- red would read as a problem); «تمام شده» goes grey and steps back, because a finished challenge is context, not an invitation. */ /* --- one hue per challenge category; see the dark block for the rule. Same six hues, run at the lightness a *light* ground needs (OKLCH ~.58) so the icon reads as ink rather than as a highlighter, and --on-cat flips to white because the filled tile is now the dark surface. --- */ --cat-fitness:#518c3b; --cat-fitness-rgb:81,140,59; --cat-nutrition:#b16512; --cat-nutrition-rgb:177,101,18; --cat-mental:#8965ba; --cat-mental-rgb:137,101,186; --cat-productivity:#407dbf; --cat-productivity-rgb:64,125,191; --cat-social:#b05788; --cat-social-rgb:176,87,136; --cat-other:#6b7c8f; --cat-other-rgb:107,124,143; --on-cat:#ffffff; /* --- admin scope: the chrome that says "you are in the panel". A third colour channel on purpose, and deliberately *chrome only* -- it paints the topbar rule, the ambient wash and the mode strip, and never a card, a pill or a swatch. Status (--st-*) and category (--cat-*) keep their surfaces; this one only ever paints the frame around them, so nothing on a page has to be read as two channels at once. --- */ --admin:#4f5d9f; --admin-rgb:79,93,159; /* The status channel. Its one surface is «چراغ وضعیت» (.st-lamp) and the status filter buttons -- nothing paints a card edge, border or ground with these any more. The rgb triples are what the lamp reads: it tints its own ring, fill and open ground from one number, so a status needs one hue here rather than three near-identical rules downstream. */ --st-active:#46806f; --st-active-rgb:70,128,111; --st-upcoming:#b8863f; --st-upcoming-rgb:184,134,63; --st-finished:#7a7167; --st-finished-rgb:122,113,103; /* The ground the lamp frosts itself against over a cover photograph. */ --lamp-ground-rgb:248,244,238; --text-1:#2c2822; --text-2:#6b6255; --text-3:#7a7164; /* --- translucent chrome: topbar, bottom nav, sheets, scrim. Tinted with the page ground rather than plain black/white, so content blurring underneath keeps the theme's temperature. --- */ --chrome-bg:rgba(248,244,238,0.7); --chrome-bg-strong:rgba(248,244,238,0.88); --sheet-bg:rgba(252,250,246,0.94); --scrim:rgba(44,40,34,0.32); /* the tour's frosted pane over everything *but* the step it is explaining. It is not --scrim: a scrim only has to darken, while this one is blurred and so has to keep the ground's temperature -- on the sand theme a black wash under a blur turns the page grey and the spotlight looks cut out of a different app. Alpha is low because the blur is doing the hiding. */ --tour-veil:rgba(240,233,224,0.26); /* --- ambient wash (.app-bg): two radial glows plus a tile texture. A data URI cannot read a var, so the whole url() is the token and each theme ships its own stroke colour. --- */ --amb-accent:0.14; --amb-mohr:0.10; --tile-opacity:.05; --tile-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%2346806f' stroke-width='1'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Ccircle cx='42' cy='42' r='18'/%3E%3C/g%3E%3C/svg%3E"); /* --- glow: the halo an accent-filled control casts on the ground. Light gets a tighter, weaker halo (a glow on a bright ground reads as smudge long before it reads as light); dark can afford the bloom. -lift is the hover/raised variant, not a second colour. --- */ --glow-accent:0 0 18px rgba(var(--accent-rgb),0.28); --glow-accent-lift:0 8px 26px rgba(var(--accent-rgb),0.34); --glow-mohr:0 0 16px rgba(var(--mohr-rgb),0.24); --glow-gold:0 0 16px rgba(var(--gold-rgb),0.26); /* text-shadow twin, for a number or word rendered *in* the accent colour */ --glow-text:0 0 14px rgba(var(--accent-rgb),0.22); /* --- corner radius: one ladder, four steps plus the pill. Every rounded corner in the file reads one of these; a raw px radius is a fifth step nobody named. --radius-pill is a shape, not a size — it is 999px so a capsule stays a capsule at any height. --- */ --radius-pill:999px; --radius-lg:22px; --radius-md:16px; --radius-sm:10px; --radius-xs:4px; /* --- type scale. Six steps carry every piece of *text* in the app (--fs-xs … --fs-2xl); the last two are display sizes — a glyph, an initial, one big number — and are deliberately outside the reading ladder rather than pretending to be part of it. In rem, so the scale follows the reader's own browser setting. --- */ --fs-xs:.65rem; /* ~10.4px */ --fs-sm:.72rem; /* ~11.5px */ --fs-md:.78rem; /* ~12.5px */ --fs-lg:.875rem; /* 14px */ --fs-xl:1rem; /* 16px */ --fs-2xl:1.1875rem; /* 19px */ --fs-3xl:1.375rem; /* 22px */ --fs-4xl:1.75rem; /* 28px */ /* --- spacing ladder, 2px..24px. --space-N is N*2 px, so the name says the step and the step says the pixels; anything reaching for an odd value was an eyeball nudge and rounds to the nearest step. Geometry that is not spacing (an icon's 18px box, a 56px FAB) keeps its own number. --- */ --space-1:2px; --space-2:4px; --space-3:6px; --space-4:8px; --space-5:10px; --space-6:12px; --space-7:14px; --space-8:16px; --space-9:18px; --space-10:20px; --space-11:22px; --space-12:24px; /* --- stacking order. The whole app's layering, in one place and in the order it paints: page chrome, then the FAB over it, then the immersive reader, then the transient layers (toast, sheet, tour) over everything. A raw z-index anywhere else is a layer nobody can see from here. The two values that ride one step above a layer (the rail's close button, the image picker over an open sheet) say so with calc rather than a number that would drift if the layer moved. --- */ --z-sticky:20; /* detail tabs, floating back button */ --z-topbar:25; /* sits above them on purpose */ --z-nav:30; /* bottom nav, sticky CTA */ --z-fab:40; --z-immersive:50; /* the rail reader, over the page it came from */ --z-toast:60; --z-sheet-backdrop:70; --z-sheet:71; --z-tour:80; /* the tour veil and the explainer popover */ /* --- motion: two durations. Fast is a control answering a finger, base is a surface moving. Anything longer than these is an animation with its own character (a breathing ring, a spinner) and keeps its own timing. --- */ --dur-fast:.15s; --dur-base:.2s; --shadow-soft:0 8px 24px rgba(76,66,52,0.10); --shadow-lift:0 16px 36px rgba(76,66,52,0.16); --ease:cubic-bezier(.2,.7,.2,1); /* --- press: the tap animation every control in the app shares. Geometry and easing are theme-independent and live here; --press-lit (what "the finger is on it" looks like) is a surface colour and so is restated in the two dark blocks. See the "Press feedback" section below. --- */ --press-scale:.965; /* how far a control sinks */ --ease-press:cubic-bezier(.3,.75,.4,1); /* down: quick, no bounce */ --ease-press-out:cubic-bezier(.3,1.1,.4,1); /* up: soft, overshoots once */ /* Both lit states are the same filter list so the two can interpolate -- a mismatched list makes the browser swap them abruptly instead. On the sand ground a white card cannot get much brighter, so light leans on saturation; on the night ground brightness does the work. */ --press-lit-off:brightness(1) saturate(1); --press-lit:brightness(1.05) saturate(1.16); --hover-lit:brightness(1.02) saturate(1.07); /* --- bottom nav geometry: single source of truth --- 10px top padding + 21px icon + 4px gap + ~13px label + 10px base bottom padding, plus the device inset. Everything that has to clear the nav (shell padding, FAB, toast, sticky CTA) reads this instead of repeating its own magic number. */ --nav-h:calc(58px + env(safe-area-inset-bottom)); /* breathing room between the last element of a page and whatever closes it (the bottom nav, or the viewport edge on nav-less pages). Owned by .shell so no page has to remember it; anything that overrides .shell's padding-bottom must add it back. */ --page-end-gap:14px; --cta-h:72px; /* .sticky-cta's own rendered height (padding + button) */ /* width of the mobile shell; anything that spans or aligns to it (nav, sticky CTA, toast, sheet, FAB) reads this instead of repeating the literal width. */ --shell-max:480px; color-scheme:light; } /* -------------------------------------------------------------------------- Dark theme «شب کرمی» (creamy night) — the *same room* as the sand theme with the lamp switched off, not a second palette: the ground keeps the light theme's warm hue and only drops in lightness (#f8f4ee -> #16120d, #f0e9e0 -> #1e1913, #ffffff -> #272018), and every wash over it is tinted with warm cream rgba(240,224,198,a) rather than the blue-white a neutral overlay would give. The accents are the light theme's own hues pulled up into pastel so they read on a dark ground without neon. Written twice on purpose — once for a device that asks for dark (guarded so an explicit light choice still wins), once for the [data-theme] the toggle writes. Only the selector differs; keep the two value lists in sync when adding a token. -------------------------------------------------------------------------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg-0:#16120d; --bg-1:#1e1913; --bg-2:#272018; --glass:rgba(240,224,198,0.05); --glass-strong:rgba(240,224,198,0.09); --border:rgba(242,228,205,0.13); --border-strong:rgba(242,228,205,0.22); --glass-sheen:rgba(250,238,220,0.12); --fill-1:rgba(240,224,198,0.045); --fill-2:rgba(240,224,198,0.07); --track:rgba(240,224,198,0.09); --fill-mute:rgba(240,224,198,0.13); --fayrouzeh:#7fc9ad; --fayrouzeh-dim:#5da88f; --accent-rgb:127,201,173; --mohr:#eda893; --mohr-dim:#cd8878; --mohr-rgb:237,168,147; --gold:#e3c07c; --gold-rgb:227,192,124; --on-accent:#0e2a22; --on-gold:#35270a; --on-finished:#16120d; --danger-text:#ef9d92; /* --- one hue per challenge category (app/models/challenge.py). All six sit at the same OKLCH lightness (~.78) and chroma (~.10) so no category shouts louder than another, and the hues are spaced far enough apart to stay tellable at thumb size. The accent sage is *not* in the set: it means "primary/live" everywhere else and a category may not borrow it. --on-cat is the ink on a *filled* category surface (the detail hero tile), the --on-accent of this scale. --- */ --cat-fitness:#9ac98a; --cat-fitness-rgb:154,201,138; --cat-nutrition:#e8b183; --cat-nutrition-rgb:232,177,131; --cat-mental:#c7a9e0; --cat-mental-rgb:199,169,224; --cat-productivity:#8fbde6; --cat-productivity-rgb:143,189,230; --cat-social:#e5a1bf; --cat-social-rgb:229,161,191; --cat-other:#b3a898; --cat-other-rgb:179,168,152; --on-cat:#16120d; /* admin scope chrome -- see :root */ --admin:#a9b4ee; --admin-rgb:169,180,238; --st-active:#7fc9ad; --st-active-rgb:127,201,173; --st-upcoming:#e3c07c; --st-upcoming-rgb:227,192,124; --st-finished:#a29684; --st-finished-rgb:162,150,132; --lamp-ground-rgb:22,18,13; --text-1:#f2ebe0; --text-2:#b6a894; --text-3:#948673; --chrome-bg:rgba(22,18,13,0.70); --chrome-bg-strong:rgba(22,18,13,0.88); --sheet-bg:rgba(39,32,24,0.95); --scrim:rgba(10,7,4,0.68); --tour-veil:rgba(30,25,19,0.31); --amb-accent:0.20; --amb-mohr:0.13; --tile-opacity:.05; --tile-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%237fc9ad' stroke-width='1'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Ccircle cx='42' cy='42' r='18'/%3E%3C/g%3E%3C/svg%3E"); --glow-accent:0 0 26px rgba(var(--accent-rgb),0.26); --glow-accent-lift:0 10px 30px rgba(var(--accent-rgb),0.28); --glow-mohr:0 0 22px rgba(var(--mohr-rgb),0.22); --glow-gold:0 0 22px rgba(var(--gold-rgb),0.22); --glow-text:0 0 18px rgba(var(--accent-rgb),0.26); --press-lit:brightness(1.24) saturate(1.06); --hover-lit:brightness(1.10) saturate(1.03); --shadow-soft:0 10px 30px rgba(0,0,0,0.45); --shadow-lift:0 16px 40px rgba(0,0,0,0.55); color-scheme:dark; } } :root[data-theme="dark"]{ --bg-0:#16120d; --bg-1:#1e1913; --bg-2:#272018; --glass:rgba(240,224,198,0.05); --glass-strong:rgba(240,224,198,0.09); --border:rgba(242,228,205,0.13); --border-strong:rgba(242,228,205,0.22); --glass-sheen:rgba(250,238,220,0.12); --fill-1:rgba(240,224,198,0.045); --fill-2:rgba(240,224,198,0.07); --track:rgba(240,224,198,0.09); --fill-mute:rgba(240,224,198,0.13); --fayrouzeh:#7fc9ad; --fayrouzeh-dim:#5da88f; --accent-rgb:127,201,173; --mohr:#eda893; --mohr-dim:#cd8878; --mohr-rgb:237,168,147; --gold:#e3c07c; --gold-rgb:227,192,124; --on-accent:#0e2a22; --on-gold:#35270a; --on-finished:#16120d; --danger-text:#ef9d92; /* --- one hue per challenge category (app/models/challenge.py). All six sit at the same OKLCH lightness (~.78) and chroma (~.10) so no category shouts louder than another, and the hues are spaced far enough apart to stay tellable at thumb size. The accent sage is *not* in the set: it means "primary/live" everywhere else and a category may not borrow it. --on-cat is the ink on a *filled* category surface (the detail hero tile), the --on-accent of this scale. --- */ --cat-fitness:#9ac98a; --cat-fitness-rgb:154,201,138; --cat-nutrition:#e8b183; --cat-nutrition-rgb:232,177,131; --cat-mental:#c7a9e0; --cat-mental-rgb:199,169,224; --cat-productivity:#8fbde6; --cat-productivity-rgb:143,189,230; --cat-social:#e5a1bf; --cat-social-rgb:229,161,191; --cat-other:#b3a898; --cat-other-rgb:179,168,152; --on-cat:#16120d; /* admin scope chrome -- see :root */ --admin:#a9b4ee; --admin-rgb:169,180,238; --st-active:#7fc9ad; --st-active-rgb:127,201,173; --st-upcoming:#e3c07c; --st-upcoming-rgb:227,192,124; --st-finished:#a29684; --st-finished-rgb:162,150,132; --lamp-ground-rgb:22,18,13; --text-1:#f2ebe0; --text-2:#b6a894; --text-3:#948673; --chrome-bg:rgba(22,18,13,0.70); --chrome-bg-strong:rgba(22,18,13,0.88); --sheet-bg:rgba(39,32,24,0.95); --scrim:rgba(10,7,4,0.68); --tour-veil:rgba(30,25,19,0.31); --amb-accent:0.20; --amb-mohr:0.13; --tile-opacity:.05; --tile-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%237fc9ad' stroke-width='1'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Ccircle cx='42' cy='42' r='18'/%3E%3C/g%3E%3C/svg%3E"); --glow-accent:0 0 26px rgba(var(--accent-rgb),0.26); --glow-accent-lift:0 10px 30px rgba(var(--accent-rgb),0.28); --glow-mohr:0 0 22px rgba(var(--mohr-rgb),0.22); --glow-gold:0 0 22px rgba(var(--gold-rgb),0.22); --glow-text:0 0 18px rgba(var(--accent-rgb),0.26); --press-lit:brightness(1.24) saturate(1.06); --hover-lit:brightness(1.10) saturate(1.03); --shadow-soft:0 10px 30px rgba(0,0,0,0.45); --shadow-lift:0 16px 40px rgba(0,0,0,0.55); color-scheme:dark; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Vazirmatn', sans-serif; background:var(--bg-0); color:var(--text-1); direction:rtl; min-height:100vh; -webkit-font-smoothing:antialiased; } /* ambient background: two coloured glows + geometric tile texture. The glow alphas and the tile's stroke are theme tokens -- on the light ground the wash has to be *stronger* than on the dark one to be visible at all, which is why --amb-* is a token rather than a fixed 0.16. */ .app-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; background: radial-gradient(60% 40% at 80% -10%, rgba(var(--accent-rgb),var(--amb-accent)), transparent 60%), radial-gradient(50% 35% at 10% 110%, rgba(var(--mohr-rgb),var(--amb-mohr)), transparent 60%), linear-gradient(180deg, var(--bg-0), var(--bg-1) 60%, var(--bg-0)); } .app-bg::before{ content:""; position:absolute; inset:0; opacity:var(--tile-opacity); background-image:var(--tile-url); background-size:84px 84px; } a{color:inherit; text-decoration:none;} button{font-family:inherit;} ul{list-style:none; margin:0; padding:0;} /* ========================================================================== Press feedback — the one tap animation every control in the app shares -------------------------------------------------------------------------- A tap compresses the control and lets it spring back out, and while the finger is down the surface reads a shade brighter and more saturated. It is deliberately one system rather than an `:active` rule per component, which is what this file had: the scales had drifted apart (.93 on an icon button, .985 on a card) and most controls — chips, tabs, list rows, nav items, sheet options — answered a tap with nothing at all. Two mechanics keep it from colliding with what is already here: - It animates the standalone `scale` property, never `transform`. Several controls own their transform for layout or hover (.fab is anchored with one, .bottom-nav and .toast centre themselves with one, .ap-item lifts on hover), and `scale` composes with those instead of overwriting them. - It runs as a keyframe animation, not a transition. A component that sets `transition:transform …` on a *class* always outweighs a global rule on a bare element selector, so a shared transition would silently fail on exactly the controls that already have one — and adding `scale` to each component's transition list would put this timing back in twelve places. The pressed class comes from initPressFeedback() in app.js, not from `:active`: `:active` never fires on iOS without a touch listener, it drops the moment a tap turns into a scroll, and a flick tap flashes it for a single frame. The JS holds the squeeze for a minimum beat and cancels it when the gesture turns out to be a scroll. ========================================================================== */ @keyframes press-in{ from{scale:1; filter:var(--press-lit-off);} to {scale:var(--press-scale); filter:var(--press-lit);} } /* the spring: back past 1 by a third of the distance it sank, then settle */ @keyframes press-out{ 0% {scale:var(--press-scale); filter:var(--press-lit);} 60% {scale:calc(1 + (1 - var(--press-scale)) / 3);} 100%{scale:1; filter:var(--press-lit-off);} } .is-pressed{animation:press-in .11s var(--ease-press) forwards;} .is-releasing{animation:press-out .34s var(--ease-press-out);} /* Per-component depth. One scale cannot serve a 40px round button and a full-width card: the same *percentage* reads as a firm click on the first and as the card falling over on the second, so the sink is tuned by size and the timing stays shared. */ .icon-btn, .btn-nav, .fab, .cta-side, .tl-action, button.avatar-profile, .back-btn{--press-scale:.92;} .chip, .tab, .dtab, .btn-seg, .auth-tab, .category-pill, .jp-cell, .ap-item, .btn-ghost, .nav-item{--press-scale:.94;} .challenge-card, .menu-item, .setting-row, .dash-link, .tl-row{--press-scale:.985;} .btn-primary{--press-scale:.975;} /* A pointer that can hover gets the same "lit" cue on approach, at half strength. Zero-specificity :where() so every component's own :hover rule still wins — this only adds the filter none of them set. */ @media (hover:hover) and (pointer:fine){ :where(button, a[href], summary, [role="button"], [role="tab"], [role="radio"], [role="option"], label[for], [data-press]):hover{ filter:var(--hover-lit); } } /* Reduced motion keeps the feedback and drops the movement: the lit state is information (this is the thing you are touching), the squeeze is decoration. */ @media (prefers-reduced-motion:reduce){ .is-pressed{animation:none; filter:var(--press-lit);} .is-releasing{animation:none;} } /* --- app shell: mobile-first PWA frame, centers on wider screens --- */ .shell{ max-width:var(--shell-max); margin:0 auto; min-height:100vh; position:relative; padding-bottom:calc(var(--page-end-gap) + env(safe-area-inset-bottom)); } /* only pages that actually render a bottom nav need clearance for it -- the nav already carries the device inset, so this adds the gap on top of it */ .shell:has(.bottom-nav){padding-bottom:calc(var(--nav-h) + var(--page-end-gap));} /* --- glass card primitive --- The inset hairline is what makes the pane read as glass rather than as a flat translucent rectangle: it is the light catching the top edge, so it sits *inside* the border and is a theme token (a bright sheen on a light ground would be invisible, on a dark one it is the whole effect). */ .glass{ background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-lg); backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); box-shadow:var(--shadow-soft), inset 0 1px 0 var(--glass-sheen); } /* --- top bar --- [back] [where you are] [actions], and nothing else. It sticks to the top so the back control and the page actions stay reachable down a long list instead of scrolling away, and it is translucent for the same reason the nav is: content passing under it should still read as content. The brand mark it used to open with is gone -- an app the visitor is already inside does not need to introduce itself once per page. The logo still exists on the one screen where it earns its place: auth.html. */ .topbar{ position:sticky; top:0; z-index:var(--z-topbar); display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); padding:var(--space-7) var(--space-10) var(--space-6); background:var(--chrome-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--border); } /* min-width:0 is what lets the title inside actually shrink and ellipsize -- without it a flex item refuses to go below its min-content width and a long challenge name pushes the actions off the edge. */ .topbar-lead{display:flex; align-items:center; gap:var(--space-5); flex:1; min-width:0;} /* The topbar is space-between, so multiple trailing actions have to be one flex child or they get pushed to opposite ends of the header. */ .topbar-actions{display:flex; align-items:center; gap:var(--space-3); flex-shrink:0;} .brand-mark{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, var(--fayrouzeh), var(--fayrouzeh-dim)); box-shadow:var(--glow-accent-lift); } /* the mark's glyph is stroke="currentColor" in auth.html so it can flip with the theme -- a presentation attribute cannot read a custom property */ .brand-mark svg{width:20px; height:20px; color:var(--on-accent);} /* Every icon in the app is an inline injected into a [data-icon] span by renderIcons(). An inline svg sits on a text baseline, so its span is a line box tall enough for a descender that is never drawn -- which is what pushed the glyph a couple of pixels above centre in every round control (.fab, .icon-btn, .back-btn). Making the wrapper a flex box removes the line box entirely; inline-flex so the icons that sit beside text in a row keep flowing as they did. */ [data-icon]{display:inline-flex; align-items:center; justify-content:center;} [data-icon] > svg{display:block;} .icon-btn{ position:relative; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--border); color:var(--text-2); cursor:pointer; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .icon-btn:hover{background:var(--glass-strong); color:var(--text-1);} .icon-btn svg{width:18px; height:18px;} .icon-btn.has-dot::after{ content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--mohr); border:2px solid var(--bg-0); transform:translate(11px,-11px); } /* The notification bell's unread count. A number rather than the bare dot above, because "something happened" and "eleven things happened" are different messages and the bell is the only place either is delivered. It is `hidden` until app.js has a count, so a member with nothing unread -- and a page that could not reach the server -- gets a plain bell rather than a badge reading zero. Placed to match `.has-dot` exactly, with a physical corner rather than a logical one: the two marks sit on the same control in the same header, and one flipping sides per direction while the other did not would read as a bug. The ring is `--bg-0`, so the badge lifts off whatever passes under the translucent topbar. */ .icon-badge{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 var(--space-3); border-radius:var(--radius-pill); display:grid; place-items:center; font-size:var(--fs-xs); font-weight:800; line-height:1; background:var(--mohr); color:var(--on-accent); border:2px solid var(--bg-0); /* The count is decoration on top of the link's own label, which app.js rewrites to carry the number -- announcing it twice is worse than once. */ pointer-events:none; } .icon-badge[hidden]{display:none;} /* --- greeting / hero --- */ .hero{padding:var(--space-3) var(--space-10) var(--space-9);} .hero-eyebrow{font-size:var(--fs-lg); color:var(--text-3); margin:0 0 var(--space-2);} .hero-title{font-size:var(--fs-3xl); font-weight:800; margin:0; line-height:1.5;} .hero-title b{color:var(--fayrouzeh); font-weight:800; text-shadow:var(--glow-text);} /* --- stats row --- */ .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); padding:0 var(--space-10) var(--space-10); } .stat-card{ padding:var(--space-7) var(--space-5); text-align:center; border-radius:var(--radius-md); } .stat-num{font-size:var(--fs-2xl); font-weight:800; display:block;} .stat-label{font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--space-2); display:block;} .stat-card.accent .stat-num{color:var(--fayrouzeh); text-shadow:var(--glow-text);} .stat-card.mohr .stat-num{color:var(--mohr); text-shadow:var(--glow-mohr);} .stat-card.gold .stat-num{color:var(--gold); text-shadow:var(--glow-gold);} /* --- section header --- */ .section-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-2) var(--space-10) var(--space-6); } .section-head h2{font-size:var(--fs-xl); font-weight:700; margin:0;} .tabs{display:flex; gap:var(--space-3); background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-2);} .tab{ padding:var(--space-3) var(--space-7); border-radius:var(--radius-pill); font-size:var(--fs-md); color:var(--text-2); cursor:pointer; border:none; background:transparent; transition:all var(--dur-base) var(--ease); } .tab.active{background:var(--fayrouzeh); color:var(--on-accent); font-weight:700; box-shadow:var(--glow-accent);} /* --- challenge card --- */ .challenge-list{display:flex; flex-direction:column; gap:var(--space-6); padding:0 var(--space-10);} .challenge-card{ position:relative; overflow:hidden; padding:var(--space-8) var(--space-8) var(--space-7); border-radius:var(--radius-lg); transition:transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .cc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-5);} /* ========================================================================== Primitive: .pill -- the small labelled capsule -------------------------------------------------------------------------- One shape, one set of metrics, and a modifier per *meaning*: a tag, a role, a queue answer, an invite's derived state. The base is the neutral one, because that is what a label says when it carries no channel; .pill-tag is the accent one. Status is deliberately *not* among them any more: it left the pill for «چراغ وضعیت» (.st-lamp), so --st-* reaches no capsule at all and --cat-* is the one colour channel a pill carries. ========================================================================== */ .pill{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-sm); font-weight:700; padding:var(--space-2) var(--space-5); border-radius:var(--radius-pill); background:var(--fill-1); color:var(--text-3); border:1px solid var(--border); } .pill svg{width:12px; height:12px; flex-shrink:0;} /* the accent label: the commonest pill in the app */ .pill-tag{ color:var(--fayrouzeh); background:rgba(var(--accent-rgb),0.12); border-color:rgba(var(--accent-rgb),0.28); } .cc-title{font-size:var(--fs-xl); font-weight:700; margin:var(--space-5) 0 var(--space-2); line-height:1.6;} /* Whole-card hit area. The title stays the only real link (so it keeps its href, focus ring and middle-click), but its ::after is stretched over the whole card -- tapping anywhere that isn't an action opens the challenge. The card is already position:relative, which is what the inset:0 resolves against; .cc-actions is lifted above the overlay so its buttons still win the click. */ .cc-title a{color:inherit; text-decoration:none;} .cc-title a::after{content:""; position:absolute; inset:0; z-index:1;} .cc-desc{font-size:var(--fs-md); color:var(--text-3); margin:0 0 var(--space-6); line-height:1.7;} .cc-meta{display:flex; align-items:center; gap:var(--space-7); font-size:var(--fs-sm); color:var(--text-2);} .cc-meta-item{display:flex; align-items:center; gap:var(--space-3);} .cc-meta-item svg{width:13px; height:13px; opacity:.8;} /* Today's check-in window: a fixed label from the server ("تا پایان امروز") plus a live remainder that renderDeadlines() in app.js writes every minute. The remainder ships empty, so :empty hides it -- separator and all -- when JS hasn't run yet or the occurrence has no closing instant at all. */ .cc-window{white-space:nowrap;} .cc-remaining{white-space:nowrap; font-variant-numeric:tabular-nums;} .cc-remaining::before{content:"·"; margin-inline-end:var(--space-3); opacity:.55;} .cc-remaining:empty{display:none;} .cc-remaining.is-urgent{color:var(--gold); font-weight:600;} .cc-remaining.is-passed{color:var(--mohr); font-weight:600;} .cc-progress{ height:6px; border-radius:var(--radius-pill); background:var(--track); overflow:hidden; margin-top:var(--space-6); } .cc-progress > i{ display:block; height:100%; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--fayrouzeh-dim), var(--fayrouzeh)); box-shadow:var(--glow-accent); } .cc-actions{display:flex; gap:var(--space-4); margin-top:var(--space-7); position:relative; z-index:2;} /* ========================================================================== Primitive: .btn -- everything that is tapped and carries a label -------------------------------------------------------------------------- The base is deliberately thin: the UA's own button chrome undone, a row of icon-then-label centred, and the app's font. It is *not* the glass button -- half the buttons in this app carry no chrome at all (the heart, the conversation, the emoji key, a segment of a .seg), and a base that painted a border and a ground would make each of them start by undoing it. The chrome is .btn-ghost, and everything else is a modifier beside it. ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3); padding:0; border:0; background:none; color:inherit; font-family:inherit; font-size:var(--fs-md); font-weight:700; text-align:center; text-decoration:none; cursor:pointer; } .btn svg{width:14px; height:14px;} /* the glass button: the app's default "do this" control */ .btn-ghost{ display:flex; flex:1; padding:var(--space-5) var(--space-5); border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--glass); color:var(--text-1); transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn-ghost:hover{background:var(--glass-strong);} .btn-danger{color:var(--danger-text); border-color:rgba(var(--mohr-rgb),0.38);} .btn-danger:hover{background:rgba(var(--mohr-rgb),0.14);} /* --- مهر seal — signature element for completed challenges --- */ .seal{ position:absolute; left:14px; top:14px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; transform:rotate(-14deg); border:2px solid var(--mohr); box-shadow:0 0 0 3px rgba(var(--mohr-rgb),0.12), inset 0 0 0 3px rgba(var(--mohr-rgb),0.08), var(--glow-mohr); opacity:.92; pointer-events:none; } .seal::before{ content:""; position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(var(--mohr-rgb),0.55); } .seal span{ font-size:var(--fs-xs); font-weight:800; color:var(--mohr); letter-spacing:.5px; text-align:center; line-height:1.25; } .challenge-card.completed{border-color:rgba(var(--mohr-rgb),0.25);} .challenge-card.completed .cc-title{padding-inline-end:60px;} /* «لیست» wears the same glass the rail card does: the opaque pane is dropped so the page ground reads through, and only the hairline, the sheen and a whisper of blur are left to say there is a surface here at all. */ .challenge-list:not(.rail) .challenge-card.glass{ background:transparent; backdrop-filter:blur(1.4px); -webkit-backdrop-filter:blur(1.4px); /* with no pane behind it the edge is the whole object, so it is lit twice: the sheen along the top and a hairline of the same light all round, bleeding a little outside -- glass catching light, not a neon tube */ border-color:color-mix(in srgb, var(--glass-sheen) 45%, var(--border)); box-shadow:inset 0 1px 0 var(--glass-sheen), inset 0 0 12px -6px var(--glass-sheen), 0 0 10px -4px var(--glass-sheen); } /* --- empty state --- */ .empty{ text-align:center; padding:48px var(--space-12); color:var(--text-3); } .empty svg{width:44px; height:44px; margin-bottom:var(--space-6); opacity:.5;} .empty p{margin:0; font-size:var(--fs-lg); line-height:1.8;} /* --- floating action button --- */ .fab{ position:fixed; bottom:calc(var(--nav-h) + var(--page-end-gap)); /* anchored 20px inside the shell's left edge, clamped to the viewport so it stays reachable on phones narrower than the shell */ left:calc(50% - min(var(--shell-max), 100vw) / 2 + 20px); transform:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:linear-gradient(145deg, var(--fayrouzeh), var(--fayrouzeh-dim)); box-shadow:var(--glow-accent-lift), var(--shadow-lift); border:none; color:var(--on-accent); transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); z-index:var(--z-fab); } .fab:hover{transform:translateY(-2px);} .fab svg{width:24px; height:24px;} /* --- bottom nav --- */ .bottom-nav{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--shell-max); display:flex; justify-content:space-around; align-items:center; padding:var(--space-5) var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom)); background:var(--chrome-bg); border-top:1px solid var(--border); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:var(--z-nav); } /* Five destinations now, so an item takes an equal share of the bar and its own padding is the part that gives: at 360px the old per-item padding put the five labels past the shell's width. `min-width:0` is what lets the share actually shrink, and the label stays on one line. */ .nav-item{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); flex:1 1 0; min-width:0; white-space:nowrap; color:var(--text-3); font-size:var(--fs-xs); cursor:pointer; padding:var(--space-2) var(--space-3); transition:color var(--dur-fast) var(--ease); } .nav-item svg{width:21px; height:21px;} .nav-item.active{color:var(--fayrouzeh);} /* the icon is an SVG stroke, so its halo is a drop-shadow filter rather than the text-shadow the accent *words* use */ .nav-item.active svg{filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),0.55));} /* Wide screens are handled in one place, at the foot of this file: see «ستون گوشی روی صفحه‌های عریض». There is deliberately no desktop layout here -- above the breakpoint the app stays the same phone, in a column, rather than growing a second set of geometry to keep in step. */ /* ========================================================================== Shared: back button (inner pages) ========================================================================== */ .back-btn{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:var(--glass); border:1px solid var(--border); color:var(--text-1); } .back-btn svg{width:18px; height:18px;} .back-btn[hidden]{display:none;} /* error.html / auth.html don't extend layout.html, so they have no topbar to hang a back control in. inset-inline-start is the right edge under RTL, matching where {% block topbar_leading %} puts it on every other page. */ .floating-back{position:fixed; inset-block-start:18px; inset-inline-start:18px; z-index:var(--z-sticky);} /* --- breadcrumb trail (lives inside the topbar) --- Rendered by initNavTrail() in app.js from the pages actually visited, so it can be any length up to TRAIL_MAX. It stacks into two lines rather than running as one: the steps *behind* the visitor are a small dim path on top, and the last crumb -- this page -- is the header's title underneath, at title weight. One element therefore answers both "what is this page" and "what is behind it", which is why the brand name it replaced is not missed. A root page has no ancestors and renders the title line alone. Long titles ellipsize and the path line scrolls rather than wrapping, because a third line would push the content down on every page. */ .crumbs{display:flex; flex-direction:column; gap:1px; min-width:0;} /* display:flex would beat the UA's [hidden]{display:none}. */ .crumbs[hidden]{display:none;} .crumb-path{ display:flex; align-items:center; gap:var(--space-3); overflow-x:auto; white-space:nowrap; scrollbar-width:none; font-size:var(--fs-sm); color:var(--text-3); line-height:1.5; } .crumb-path::-webkit-scrollbar{display:none;} .crumb{flex-shrink:0; color:var(--text-3); text-decoration:none; transition:color var(--dur-fast) var(--ease);} a.crumb:hover{color:var(--fayrouzeh);} a.crumb:focus-visible{outline:2px solid var(--fayrouzeh); outline-offset:2px; border-radius:var(--radius-xs);} /* The current crumb and the create wizard's static heading are the same object -- the page's own name, in the header -- so they share one rule and cannot drift apart. */ .crumb.current, .topbar-title{ margin:0; font-size:var(--fs-xl); font-weight:800; letter-spacing:.2px; line-height:1.5; color:var(--text-1); /* A challenge title can be 50 characters; it truncates rather than wrapping the header onto a second line or shoving the actions off the edge. */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ========================================================================== Admin scope — "am I in the panel, or just browsing?" -------------------------------------------------------------------------- The admin screens reuse the member-facing primitives on purpose (.settings-page, .setting-row, the challenge list's .seg and .search-bar), so nothing *inside* the page tells an operator which mode they are in. The answer goes in the topbar, which is sticky and therefore on screen at every scroll position of every admin page: the action slot's glyph, and the colour of the page's own name in the trail. Both are still, not pulsing. A marker that moves forever is read once and then filtered out by the eye, and it would have to be switched off under prefers-reduced-motion -- which is to say it would be missing for the readers least able to spare it. Persistence does the work instead. --admin is chrome only. It never paints a card, a pill or a swatch, so a roster row's status (--st-*) and category (--cat-*) colours keep meaning exactly what they mean on every other screen. ========================================================================== */ /* The shield that replaces the bell. Tinted rather than merely coloured: at 18px a glyph swap alone is a difference you have to look for, and the whole job of this control is being noticed without being looked for. */ .icon-btn.admin-mark{ background:rgba(var(--admin-rgb),0.12); border-color:rgba(var(--admin-rgb),0.38); color:var(--admin); } .icon-btn.admin-mark:hover{ background:rgba(var(--admin-rgb),0.20); color:var(--admin); } /* ...and the page's own name beside it. Only the *current* crumb takes the hue -- the trail behind it may well run back through member-facing pages, and colouring those would say they were part of the panel. The glow is the --glow-text pattern in the admin hue: enough to catch the eye on arrival, not enough to compete with the shield. */ body[data-admin-scope] .crumb.current{ color:var(--admin); text-shadow:0 0 14px rgba(var(--admin-rgb),0.28); } .crumb-sep{flex-shrink:0; display:grid; place-items:center; color:var(--text-3); opacity:.55;} .crumb-sep svg{width:11px; height:11px;} /* Category/cadence icon riding inside a filter chip. */ .chip{display:inline-flex; align-items:center; gap:var(--space-3);} .chip svg{width:13px; height:13px; flex-shrink:0;} /* ========================================================================== Auth (login / register) ========================================================================== */ .auth-wrap{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:32px var(--space-12); } .auth-logo{text-align:center; margin-bottom:28px;} .auth-logo .brand-mark{margin:0 auto var(--space-7); width:56px; height:56px;} .auth-logo .brand-mark svg{width:28px; height:28px;} .auth-logo h1{font-size:var(--fs-2xl); font-weight:800; margin:0 0 var(--space-3);} .auth-logo p{font-size:var(--fs-lg); color:var(--text-3); margin:0;} .auth-card{padding:var(--space-11) var(--space-10);} .auth-tabs{ display:flex; gap:var(--space-3); background:var(--fill-2); border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-2); margin-bottom:var(--space-11); } .auth-tab{ flex:1; text-align:center; padding:var(--space-5) 0; border-radius:var(--radius-pill); font-size:var(--fs-lg); font-weight:700; color:var(--text-2); cursor:pointer; border:none; background:transparent; transition:all var(--dur-base) var(--ease); } .auth-tab.active{background:var(--fayrouzeh); color:var(--on-accent);} .field{margin-bottom:var(--space-7);} .field label{ display:block; font-size:var(--fs-md); color:var(--text-2); margin-bottom:var(--space-4); font-weight:600; } .field-input{ display:flex; align-items:center; gap:var(--space-4); background:var(--fill-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 var(--space-6); transition:border-color var(--dur-fast) var(--ease); } .field-input:focus-within{border-color:var(--fayrouzeh);} .field-input svg{width:17px; height:17px; color:var(--text-3); flex-shrink:0;} .field-input input, .field-input select, .field-input textarea{ flex:1; border:none; background:transparent; outline:none; color:var(--text-1); font-family:inherit; font-size:var(--fs-lg); padding:var(--space-6) var(--space-1); min-width:0; } .field-input textarea{resize:vertical; line-height:1.6;} /* A textarea is multi-line, so the flex centring that suits a one-line input would float the label-adjacent affordances against its middle. */ .field-input:has(textarea){align-items:stretch;} .field-input input::placeholder{color:var(--text-3);} .field-toggle{cursor:pointer; color:var(--text-3);} /* One line under a sheet or wizard field saying what the choice means -- same type scale as a settings row's .sr-hint, since it does the same job. A choice whose consequence is not on screen is a choice made blind. */ .field-note{margin:var(--space-3) var(--space-1) 0; font-size:var(--fs-sm); color:var(--text-3); line-height:1.7;} /* The operator roster's «ناشناس» mark. Not a colour of its own: it is neither a status nor a category, and those two channels never share a surface -- weight and ink are enough to make it scannable. */ .anon-mark{color:var(--text-2); font-weight:600;} /* --- avatar picker (signup) --- A 40-tile grid would push the submit button off-screen, so the grid scrolls inside a fixed-height well and the button stays reachable. The tiles are flat SVGs with their own palettes, so the *selection* has to be carried by the frame around them -- an accent ring plus a lift -- and never by a tint over the picture. */ .field-hint{font-weight:500; color:var(--text-3);} .avatar-pick{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-5); max-height:232px; overflow-y:auto; padding:var(--space-6); background:var(--fill-1); border:1px solid var(--border); border-radius:var(--radius-sm); overscroll-behavior:contain; } .ap-item{ appearance:none; border:none; padding:0; cursor:pointer; background:transparent; display:block; border-radius:50%; overflow:hidden; position:relative; box-shadow:0 0 0 2px var(--border); transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } /* The square comes off the image, not the button: sizing the button by aspect-ratio while its only child is height:100% leaves the row track with nothing to measure, and the tiles overlap. */ .ap-item img{width:100%; height:auto; aspect-ratio:1; display:block; object-fit:cover;} .ap-item:hover{transform:translateY(-1px); box-shadow:0 0 0 2px var(--fayrouzeh-dim);} .ap-item:focus-visible{outline:2px solid var(--fayrouzeh); outline-offset:3px;} .ap-item.selected{ box-shadow:0 0 0 3px var(--fayrouzeh), var(--glow-accent-lift); transform:translateY(-1px); } @media (max-width:360px){.avatar-pick{grid-template-columns:repeat(4, 1fr);}} /* the same grid inside a sheet, where the panel is already scrolling and a 232px window would strand the tiles in a scroller inside a scroller */ .sheet-avatars{max-height:min(46vh, 320px); background:transparent; border:none; padding:var(--space-1);} .btn-primary{ display:flex; width:100%; padding:var(--space-7); border-radius:var(--radius-sm); background:linear-gradient(145deg, var(--fayrouzeh), var(--fayrouzeh-dim)); color:var(--on-accent); font-size:var(--fs-lg); font-weight:800; box-shadow:var(--glow-accent-lift); gap:var(--space-4); margin-top:var(--space-3); transition:transform var(--dur-fast) var(--ease); } .btn-primary svg{width:16px; height:16px;} .auth-foot{text-align:center; margin-top:var(--space-9); font-size:var(--fs-md); color:var(--text-3);} .auth-foot a{color:var(--fayrouzeh); font-weight:700;} /* --- SMS one-time code --- Two steps on one card rather than two screens: the second step has to keep naming the number the code went to, and the commonest failure in this flow is a typo in that number -- a member who has navigated away from it cannot check. `.otp-target` is therefore a line, not a heading, with the correction right next to it. Everything here is neutral. Colour in this app carries status and category and nothing else (CLAUDE.md, "Colour carries two channels"), and a login screen is neither; the accent is spent only on the one control the member is meant to press, exactly as `.btn-primary` already does. */ .otp-target{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); flex-wrap:wrap; margin:0 0 var(--space-9); font-size:var(--fs-md); color:var(--text-3); } .otp-target b{color:var(--text-1); font-weight:700; direction:ltr; unicode-bidi:isolate;} .otp-target button{ border:none; background:transparent; padding:var(--space-1) var(--space-2); cursor:pointer; font-family:inherit; font-size:var(--fs-md); font-weight:700; color:var(--fayrouzeh); } /* The boxes run left-to-right inside an RTL page because a number does: the first digit of the code the member reads in the SMS has to be the box their cursor starts in, or every paste and every autofill lands reversed. */ .otp-code{ display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-4); direction:ltr; margin-bottom:var(--space-8); } .otp-digit{ width:100%; aspect-ratio:1/1.15; text-align:center; background:var(--fill-1); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-1); font-family:inherit; font-size:var(--fs-2xl); font-weight:800; outline:none; padding:0; min-width:0; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .otp-digit:focus{border-color:var(--fayrouzeh); background:var(--fill-2);} .otp-digit.filled{border-color:var(--fayrouzeh-dim);} /* Chrome/Safari draw spinners on a numeric field, which would put two tiny arrows inside a 44px box that is only ever typed into. */ .otp-digit::-webkit-outer-spin-button, .otp-digit::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .otp-digit{-moz-appearance:textfield; appearance:textfield;} /* The countdown is the *whole* control until it reaches zero: offering a resend button that answers 429 would be a control that lies. */ .otp-resend{ text-align:center; margin-top:var(--space-7); font-size:var(--fs-md); color:var(--text-3); } .otp-resend button{ border:none; background:transparent; cursor:pointer; padding:var(--space-2); font-family:inherit; font-size:var(--fs-md); font-weight:700; color:var(--fayrouzeh); } .otp-resend button[disabled]{color:var(--text-3); cursor:default; font-weight:600;} /* Errors are inline and persistent, not a toast: a toast that fades takes the only explanation of a refusal with it, and this is the one screen a member cannot navigate past to go and re-read it. `--mohr` is the app's existing refusal colour. */ .auth-error{ display:none; margin:0 0 var(--space-7); padding:var(--space-5) var(--space-6); border-radius:var(--radius-sm); font-size:var(--fs-md); line-height:1.7; background:rgba(var(--mohr-rgb), .12); color:var(--mohr); border:1px solid rgba(var(--mohr-rgb), .28); } .auth-error.show{display:block;} /* The other way in. It is a link under the card rather than a third tab, because signing in by SMS is the path essentially everybody takes and a pair of equally-weighted tabs would ask a question most members have no reason to answer. */ .auth-alt{text-align:center; margin-top:var(--space-8);} .auth-alt button{ border:none; background:transparent; cursor:pointer; padding:var(--space-3); font-family:inherit; font-size:var(--fs-md); font-weight:700; color:var(--text-2); display:inline-flex; align-items:center; gap:var(--space-3); } .auth-alt button svg{width:15px; height:15px;} /* ========================================================================== Explore (global challenge list) ========================================================================== */ .search-bar{ display:flex; align-items:center; gap:var(--space-4); margin:0 var(--space-10) var(--space-7); background:var(--fill-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 var(--space-6); } .search-bar svg{width:17px; height:17px; color:var(--text-3);} .search-bar input{ flex:1; border:none; background:transparent; outline:none; color:var(--text-1); font-family:inherit; font-size:var(--fs-lg); padding:var(--space-6) var(--space-1); } .btn-filter{ width:38px; height:38px; border-radius:var(--radius-sm); flex-shrink:0; background:var(--glass); border:1px solid var(--border); color:var(--text-2); } .btn-filter svg{width:16px; height:16px;} /* Filter chips wrap onto as many rows as they need: the category set is small and fixed, so every option stays visible instead of scrolling off-screen. */ .chip-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); padding:0 var(--space-10) var(--space-8); } .chip{ flex:0 0 auto; padding:var(--space-4) var(--space-8); border-radius:var(--radius-pill); font-size:var(--fs-md); font-weight:600; background:var(--glass); border:1px solid var(--border); color:var(--text-2); cursor:pointer; white-space:nowrap; transition:all var(--dur-base) var(--ease); } .chip.active{background:var(--fayrouzeh); border-color:var(--fayrouzeh); color:var(--on-accent); font-weight:700; box-shadow:var(--glow-accent);} .chip:focus-visible{outline:2px solid var(--fayrouzeh); outline-offset:2px;} /* --- "my challenges" segmented filter (challenge list) --- Three mutually exclusive states, so a segmented control rather than more chips: chips read as an additive multi-select next to the category row. */ .seg-row{padding:0 var(--space-10) var(--space-7);} /* A row that carries an explainer becomes a row: the dot sits beside the segmented control it explains, not under it. */ .seg-row:has(> .explain-dot){display:flex; align-items:center;} .seg{ display:flex; gap:var(--space-2); background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-pill); padding:var(--space-2); } .btn-seg{ flex:1 1 0; min-width:0; display:flex; padding:var(--space-4) var(--space-4); border-radius:var(--radius-pill); font-weight:600; color:var(--text-2); white-space:nowrap; transition:all var(--dur-base) var(--ease); } .btn-seg svg{flex-shrink:0;} .btn-seg:hover{color:var(--text-1);} .btn-seg.active{background:var(--fayrouzeh); color:var(--on-accent); font-weight:700; box-shadow:var(--glow-accent);} .btn-seg:focus-visible{outline:2px solid var(--fayrouzeh); outline-offset:2px;} /* --- infinite scroll: sentinel + loading indicator --- */ .scroll-sentinel{height:1px;} /* display:flex below would otherwise beat the UA's [hidden]{display:none}, leaving "در حال بارگذاری" on screen forever once the last page has loaded (or when a filter matched nothing and no page was ever fetched). */ .list-loading[hidden]{display:none;} .list-loading{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); padding:var(--space-9) 0; color:var(--text-3); font-size:var(--fs-md); } .list-loading .spinner{ width:16px; height:16px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--fayrouzeh); animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg);}} /* --- toast --- */ .toast{ position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--page-end-gap)); transform:translate(-50%, 12px); max-width:calc(var(--shell-max) - 40px); padding:var(--space-5) var(--space-9); border-radius:var(--radius-pill); background:var(--sheet-bg); border:1px solid var(--border-strong); color:var(--text-1); font-size:var(--fs-md); font-weight:600; text-align:center; box-shadow:var(--shadow-lift); opacity:0; pointer-events:none; z-index:var(--z-toast); transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .toast.visible{opacity:1; transform:translate(-50%, 0);} .explore-card{ display:flex; align-items:center; gap:var(--space-6); } .explore-thumb{ width:52px; height:52px; border-radius:var(--radius-md); flex-shrink:0; display:grid; place-items:center; background:linear-gradient(145deg, rgba(var(--accent-rgb),0.18), rgba(var(--accent-rgb),0.06)); color:var(--fayrouzeh); } .explore-thumb svg{width:24px; height:24px;} /* Cadence type at a glance: a small corner badge on the category thumb, so the kind of challenge (one-off / scheduled / recurring) reads without opening it. Same icon set as the `cadence_icon` filter feeds everywhere else. */ .explore-thumb{position:relative;} /* Primitive: .badge -- a small bordered mark that is a shape rather than a label. Two members: the cadence glyph riding on a thumb's corner, and the timeline's four-state square. A pill is the wrong base for either, because neither of them carries words. */ .badge{ display:grid; place-items:center; flex:none; border:1px solid var(--border-strong); background:var(--bg-2); color:var(--text-1); } .badge-cadence{ position:absolute; inset-block-end:-5px; inset-inline-start:-5px; width:20px; height:20px; border-radius:50%; } .badge-cadence svg{width:11px; height:11px;} /* --- the challenge's own picture --------------------------------------- One element, three sizes: the 52px list thumb, the rail's 4:3 cover and the reader's full screen. The picture is painted *inside* `.explore-thumb` rather than replacing it, so everything already hung off that element -- the cadence badge, the rail's scrim, the status pill's placement -- keeps working, and a challenge with no picture keeps exactly the category-coloured placeholder it has always had. `object-fit:cover` is the crop the member already saw and approved in the picker (static/js/imagepick.js), which is the whole reason that step exists: an uncropped photo is cut here silently. */ .explore-thumb > .et-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; } /* the category glyph is the placeholder, so it goes when there is something to place; the tile texture goes with it, being noise over a photograph */ .explore-thumb.has-cover > [data-icon]:not(.badge-cadence){display:none;} .challenge-list.rail .explore-thumb.has-cover::before{display:none;} /* The tall one has no layout box outside the reader, so `loading="lazy"` never fetches it while a list is being scrolled -- which is the whole reason both can ship in one markup. */ .et-tall{display:none;} .explore-thumb.has-tall:not(.has-square) .et-tall{display:block;} .challenge-list.is-immersive .has-tall .et-tall{display:block;} .challenge-list.is-immersive .has-tall .et-sq{display:none;} /* over a photograph the scrim has to carry the body's ink on its own, so it runs deeper and starts higher than it does over a flat gradient */ .challenge-list.rail .explore-thumb.has-cover::after{ background:linear-gradient(to top, var(--bg-2) 8%, rgba(0,0,0,0.28) 55%, transparent 85%); } .challenge-list.is-immersive .explore-thumb.has-cover::after{ background:linear-gradient(to top, var(--bg-2) 20%, rgba(0,0,0,0.34) 62%, transparent 88%); } .detail-icon .badge-cadence{ inset-block-end:-4px; inset-inline-start:-4px; width:22px; height:22px; background:var(--bg-1); color:var(--fayrouzeh); } .detail-icon .badge-cadence svg{width:12px; height:12px; color:inherit;} .explore-body{flex:1; min-width:0;} .explore-body h3{font-size:var(--fs-lg); font-weight:700; margin:0 0 var(--space-2);} .explore-body p{font-size:var(--fs-sm); color:var(--text-3); margin:0; display:flex; gap:var(--space-6); align-items:center;} .explore-body p svg{width:12px; height:12px;} /* ========================================================================== Challenge detail ========================================================================== */ /* The hero's pane fades out from the top centre: solid where the icon and the title sit, dissolving to a ~8% ghost at the side and bottom edges, so the card reads as a wash of glass the page comes *out* of rather than as a rectangle stuck onto it. The falloff is the same emanating shape as the category glow above it, one radius wider, so the two agree. It is a mask on a pane *layer*, not on the element: masking .detail-hero itself would fade the title and the numbers with it. So the element hands its .glass paint over to ::after -- background, hairline, sheen and the backdrop blur together, since a blur that outlived the pane would stay as a visible smudge past the edge where there is no longer any glass to blur. The outer drop shadow goes: a pane whose own edge is a quarter opaque cannot cast a hard shadow onto the page. Where mask-image is unsupported the layer simply paints whole, which is the flat card this replaced. ::after is behind the content (z-index:-1, contained by the isolate) and behind ::before, so the category wash still reads on top of it. */ .detail-hero{ margin:0 var(--space-10) var(--space-9); padding:26px var(--space-10); text-align:center; position:relative; overflow:hidden; isolation:isolate; --hero-fade:radial-gradient(68% 96% at 50% 0%, #000 0%, #000 30%, rgba(0,0,0,0.78) 56%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.25) 100%); /* The rim: one hairline whose *brightness* varies down the card instead of one uniform bright outline. It opens on --glass-sheen (the "lit edge of glass" token) and has settled onto the ordinary --border hairline within the first fifth of the height -- so the light reads as a reflection arriving from above and catching the top edge, then sliding off down the sides, rather than as a drawn frame. The line itself is 1px everywhere; nothing about it is thick. */ --hero-rim:linear-gradient(to bottom, var(--glass-sheen) 0%, var(--glass-sheen) 3%, var(--border) 20%, var(--border) 100%); } /* the .glass paint is moved to ::after below; the border stays as transparent ink so the element keeps the exact box it had */ .detail-hero.glass{ background:none; border-color:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } .detail-hero.glass::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; /* the classic two-background ring: the pane paints to the padding box, the rim gradient to the border box, so a 1px transparent border *is* the line. A gradient cannot be drawn with box-shadow, and the alternative -- a stack of identical rings compounding one faint alpha -- is what made the edge read as a hard frame instead of a reflection. */ border:1px solid transparent; background: linear-gradient(var(--glass), var(--glass)) padding-box, var(--hero-rim) border-box; backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); -webkit-mask-image:var(--hero-fade); mask-image:var(--hero-fade); } .detail-hero::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(60% 80% at 50% -10%, rgba(var(--accent-rgb),0.18), transparent 70%); -webkit-mask-image:var(--hero-fade); mask-image:var(--hero-fade); } /* THE HERO'S PICTURE. It sits behind the glass pane (`::after`, z-index:-1) and wears the same --hero-fade mask, so it dissolves at the edges exactly like everything else in this card instead of arriving as a rectangle stuck onto the page. Its own scrim is inside the wrapper -- an has no pseudo-element -- and is what keeps --text-* ink legible over whatever was photographed, in both themes, without a second palette. */ .hero-cover{ position:absolute; inset:0; z-index:-2; border-radius:inherit; overflow:hidden; pointer-events:none; -webkit-mask-image:var(--hero-fade); mask-image:var(--hero-fade); } .hero-cover img{width:100%; height:100%; object-fit:cover; display:block;} /* The pane over it thins out: a 20px backdrop blur is right over the page's own ground and turns a photograph into a smear. The rim, the mask and the fade are untouched -- only how much of the picture the glass keeps. Opacity is denser at the centre (85%) and, via --hero-fade, thins toward the edges (down to ~50%) so the photo is never fully hidden and gets glassier at the rim. */ .detail-hero.has-cover.glass::after{ background: linear-gradient(color-mix(in srgb, var(--glass) 85%, transparent), color-mix(in srgb, var(--glass) 85%, transparent)) padding-box, var(--hero-rim) border-box; backdrop-filter:blur(3px) saturate(120%); -webkit-backdrop-filter:blur(3px) saturate(120%); } .detail-icon{ width:56px; height:56px; border-radius:var(--radius-md); margin:0 auto var(--space-7); display:grid; place-items:center; position:relative; z-index:1; background:linear-gradient(145deg, var(--fayrouzeh), var(--fayrouzeh-dim)); box-shadow:var(--glow-accent-lift); } .detail-icon svg{width:26px; height:26px; color:var(--on-accent);} .detail-hero h1{position:relative; z-index:1; font-size:var(--fs-2xl); font-weight:800; margin:0 0 var(--space-4);} .detail-hero .pill{position:relative; z-index:1;} .detail-stats{ display:grid; grid-template-columns:repeat(3,1fr); margin:var(--space-8) 0 0; position:relative; z-index:1; } /* The stats sit in the pane's faded tail, so their dividers fade with it -- a hairline at full strength there would draw the edge the card is busy dissolving. Same colour token, laid down as a gradient instead of a border. */ .detail-stats div{text-align:center; position:relative;} .detail-stats div + div::before{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:1px; background:linear-gradient(to bottom, var(--border), transparent); } .detail-stats b{display:block; font-size:var(--fs-xl); font-weight:800;} .detail-stats span{font-size:var(--fs-sm); color:var(--text-3);} .detail-stats .gold b{color:var(--gold); display:flex; align-items:center; justify-content:center; gap:var(--space-2);} .detail-stats .gold b svg{width:14px; height:14px;} .detail-section{padding:0 var(--space-10) var(--space-9);} .detail-section h2{font-size:var(--fs-lg); font-weight:700; margin:0 0 var(--space-5);} .detail-section p{font-size:var(--fs-lg); color:var(--text-2); line-height:1.9; margin:0;} .rule-list{display:flex; flex-direction:column; gap:var(--space-5);} .rule-item{ display:flex; align-items:flex-start; gap:var(--space-5); padding:var(--space-6) var(--space-7); } .rule-item svg{width:16px; height:16px; color:var(--fayrouzeh); flex-shrink:0; margin-top:1px;} .rule-item span{font-size:var(--fs-md); color:var(--text-2); line-height:1.7;} /* ========================================================================== Primitive: .avatar -- one person's picture, at five sizes -------------------------------------------------------------------------- An opaque ground is part of the base, not a note repeated at every surface: several catalogue styles ship a transparent SVG (bottts-neutral, cameo, glyphs) and `_default.svg` is a bare silhouette in a ring, so whatever sits behind the would otherwise become part of the picture. A translucent --fill-* token would let it back through, which is why this is --bg-1. The element is also the ground for initials where there is no picture, hence place-items:center rather than a bare overflow:hidden. ========================================================================== */ .avatar{ border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--bg-1); display:grid; place-items:center; font-weight:700; /* the roster rows are a bare , with no wrapper to crop them, so the fit is on the base rather than only on the child */ object-fit:cover; } .avatar > img{width:100%; height:100%; display:block; object-fit:cover;} .avatar-xs{width:28px; height:28px;} .avatar-sm{width:30px; height:30px; font-size:var(--fs-xs);} .avatar-md{width:34px; height:34px;} .avatar-lg{width:36px; height:36px;} .avatar-xl{width:84px; height:84px;} /* the roster rows want a rounded square, not a circle */ .avatar-square{border-radius:var(--radius-sm);} .avatar-stack{display:flex; align-items:center;} .avatar-stack .avatar{border:2px solid var(--bg-0); margin-inline-start:-10px;} .avatar-stack .avatar:first-child{margin-inline-start:0;} /* --- history: occurrence timeline --- One row per occurrence the cadence actually asks for, newest first -- NOT one per calendar day. A weekly challenge has ~1 occurrence a week, so a day grid would render 6/7 empty cells per row. */ .tl-row{ display:flex; align-items:center; gap:var(--space-6); padding:var(--space-6) var(--space-7); border-bottom:1px solid var(--border); cursor:pointer; min-height:52px; } .tl-row:last-child{border-bottom:none;} .tl-row.today{background:rgba(var(--accent-rgb),0.06);} .tl-row:active{background:var(--fill-1);} .badge-mark{ width:28px; height:28px; border-radius:var(--radius-sm); font-size:var(--fs-lg); font-weight:700; line-height:1; border-color:var(--border); background:var(--fill-2); color:var(--text-3); } .tl-row.completed .badge-mark{background:var(--fayrouzeh); border-color:var(--fayrouzeh); color:var(--bg-0);} .tl-row.completed .badge-mark::before{content:"✓";} .tl-row.skipped .badge-mark{background:var(--fill-mute); border-color:var(--border-strong); color:var(--text-2);} .tl-row.skipped .badge-mark::before{content:"–";} .tl-row.missed .badge-mark{background:rgba(var(--mohr-rgb),0.20); border-color:rgba(var(--mohr-rgb),0.5); color:var(--danger-text);} .tl-row.missed .badge-mark::before{content:"✕";} .tl-row.pending .badge-mark{background:rgba(var(--gold-rgb),0.14); border-color:var(--gold); color:var(--gold);} .tl-row.pending .badge-mark::before{content:"•";} .tl-main{flex:1; min-width:0;} .tl-date{font-size:var(--fs-lg); font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tl-meta{font-size:var(--fs-sm); color:var(--text-3); margin-top:var(--space-1);} .tl-row.completed .tl-meta{color:var(--fayrouzeh);} .tl-row.missed .tl-meta{color:var(--danger-text);} .tl-action{ flex:none; border:1px solid rgba(var(--accent-rgb),0.4); background:rgba(var(--accent-rgb),0.12); color:var(--fayrouzeh); border-radius:var(--radius-pill); font-family:inherit; font-size:var(--fs-md); font-weight:700; padding:var(--space-4) var(--space-8); cursor:pointer; } .tl-action.solid{width:100%; border-radius:var(--radius-sm); padding:var(--space-5); margin-top:var(--space-5);} /* --- history: recurring_quota period rows --- A quota has no per-day slot of its own, so the period is the unit. */ .quota-history{display:flex; flex-direction:column; gap:var(--space-4);} .quota-row{ background:var(--glass); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-6) var(--space-7); } .quota-row.current{background:rgba(var(--accent-rgb),0.06); border-color:rgba(var(--accent-rgb),0.25);} .quota-row-head{display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-md); margin-bottom:var(--space-5);} .quota-row-label{font-weight:600;} .quota-row.current .quota-row-label{color:var(--fayrouzeh);} .quota-row-count{color:var(--text-3); font-size:var(--fs-sm);} .quota-pips{display:flex; gap:var(--space-2);} .quota-pip{flex:1; height:8px; border-radius:var(--radius-xs); background:var(--track);} .quota-pip.done{background:var(--fayrouzeh);} .sticky-cta{ /* floats above the bottom nav rather than welding onto it: the same --page-end-gap that keeps page content off the nav also separates this panel from the nav and from the shell edges, so it reads as a card and not as a second footer. The device safe-area inset is already carried by .bottom-nav below it, so it is not repeated here. Its rendered height is --cta-h; anything clearing it must add the gap above *and* below. */ position:fixed; bottom:calc(var(--nav-h) + var(--page-end-gap)); left:50%; transform:translateX(-50%); width:calc(100% - 2 * var(--page-end-gap)); max-width:calc(var(--shell-max) - 2 * var(--page-end-gap)); padding:var(--space-7) var(--space-10); background:var(--chrome-bg-strong); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); z-index:var(--z-nav); } /* --- bottom sheet (check-in confirm/skip) --- */ .sheet-backdrop{ position:fixed; inset:0; background:var(--scrim); z-index:var(--z-sheet-backdrop); animation:sheetFadeIn var(--dur-base) var(--ease); } .sheet{ position:fixed; inset:0; z-index:var(--z-sheet); display:flex; align-items:flex-end; justify-content:center; pointer-events:none; } .sheet-panel{ pointer-events:auto; width:100%; max-width:var(--shell-max); padding:var(--space-9) var(--space-10) calc(var(--space-9) + env(safe-area-inset-bottom)); border-radius:var(--radius-lg) var(--radius-lg) 0 0; background:var(--bg-1); border:1px solid var(--border-strong); border-bottom:none; box-shadow:var(--shadow-lift); max-height:88vh; overflow-y:auto; animation:sheetSlideUp .22s var(--ease); } .sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-7); } .sheet-head h3{font-size:var(--fs-xl); font-weight:800; margin:0;} .sheet-body{display:flex; flex-direction:column; gap:var(--space-7); margin:0;} /* A sheet's own read-only paragraph: what the reader has to have in front of them before they press the button. Body-scale rather than `.field-note`'s hint scale, because this *is* the sheet's content and not an aside on a control; `is-danger` tints it with the ink a destructive label already wears, so the colour says nothing new. */ .sheet-note{margin:0; font-size:var(--fs-md); line-height:1.9; color:var(--text-2);} .sheet-note.is-danger{color:var(--danger-text);} .sheet-actions{display:flex; gap:var(--space-5); margin-top:var(--space-9);} .sheet-actions button{flex:1;} .sheet-actions .primary{ background:linear-gradient(145deg, var(--fayrouzeh), var(--fayrouzeh-dim)); border-color:transparent; color:var(--on-accent); box-shadow:var(--glow-accent); } /* Separated from .sheet-actions by a rule so a destructive action is never sitting flush against "save" -- these sheets are one mis-tap wide. */ .sheet-danger{ margin-top:var(--space-7); padding-top:var(--space-7); border-top:1px solid var(--border); display:flex; } @keyframes sheetFadeIn{from{opacity:0;} to{opacity:1;}} @keyframes sheetSlideUp{from{transform:translateY(100%);} to{transform:translateY(0);}} /* ========================================================================== Create challenge ========================================================================== */ .textarea-field{ background:var(--fill-1); border:1px solid var(--border); border-radius:var(--radius-sm); padding:var(--space-6); transition:border-color var(--dur-fast) var(--ease); } .textarea-field:focus-within{border-color:var(--fayrouzeh);} .textarea-field textarea{ width:100%; border:none; background:transparent; outline:none; resize:none; color:var(--text-1); font-family:inherit; font-size:var(--fs-lg); line-height:1.8; min-height:80px; } .textarea-field textarea::placeholder{color:var(--text-3);} .category-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4);} .category-pill{ padding:var(--space-6) var(--space-3); text-align:center; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--border); cursor:pointer; font-size:var(--fs-sm); color:var(--text-2); transition:all var(--dur-base) var(--ease); } .category-pill svg{width:18px; height:18px; display:block; margin:0 auto var(--space-3);} .category-pill.active{background:rgba(var(--accent-rgb),0.12); border-color:var(--fayrouzeh); color:var(--fayrouzeh); box-shadow:var(--glow-accent);} .stepper{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-11); padding:0 var(--space-10);} .step{display:flex; flex-direction:column; align-items:center; gap:var(--space-3); flex:1; position:relative;} .step-dot{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--glass); border:1px solid var(--border); font-size:var(--fs-sm); font-weight:700; color:var(--text-3); z-index:1; } .step.active .step-dot{background:var(--fayrouzeh); border-color:var(--fayrouzeh); color:var(--on-accent);} .step.done .step-dot{background:var(--fayrouzeh-dim); border-color:var(--fayrouzeh-dim); color:var(--on-accent);} .step span{font-size:var(--fs-xs); color:var(--text-3);} .step.active span{color:var(--text-1);} .step:not(:last-child)::after{ content:""; position:absolute; top:13px; right:calc(50% + 18px); left:calc(-50% + 18px); height:2px; background:var(--border); z-index:0; } .step.done:not(:last-child)::after{background:var(--fayrouzeh-dim);} /* ========================================================================== Profile ========================================================================== */ .profile-head{text-align:center; padding:var(--space-5) var(--space-10) var(--space-12);} .avatar-profile{ margin:0 auto var(--space-6); position:relative; overflow:visible; font-size:var(--fs-4xl); font-weight:800; color:var(--text-1); box-shadow:var(--glow-accent-lift); } /* On your own profile the picture is a