/* ========================================================================== FinanzTool design system (Day 5) - Tokens (colour, type, spacing, radius, shadow, motion) as CSS custom properties - Light theme by default, dark via prefers-color-scheme or manual toggle ([data-theme] on ) - Logical properties everywhere (RTL for Persian comes for free) - Fonts: self-hosted Inter (Latin) / Vazirmatn (Persian), used only when the files exist (html.has-font) ========================================================================== */ /* ---------- Fonts (files are optional: see DAY5_README) ---------- */ @font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"Vazirmatn";src:url("/assets/fonts/vazirmatn-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} /* ---------- Tokens ---------- */ :root{ color-scheme:light; /* colour: light */ --bg:#f5f7fb; --surface:#ffffff; --surface-2:#eef2f8; --text:#0f1a2b; --muted:#4b5a70; --border:#dbe3ee; --accent:#1d4ed8; --accent-hover:#1e40af; --on-accent:#ffffff; --accent-soft:#e8efff; --ring:#1d4ed8; --shadow-1:0 1px 2px rgba(15,26,43,.06),0 6px 18px rgba(15,26,43,.06); --shadow-2:0 2px 4px rgba(15,26,43,.08),0 14px 34px rgba(15,26,43,.10); /* aliases used by older templates */ --card:var(--surface); --line:var(--border); --fg:var(--text); /* type */ --font-system:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --font-brand:"Inter"; --font:var(--font-system); --fs-0:1rem; --fs-1:1.125rem; --fs-2:1.25rem; --fs-3:clamp(1.5rem,1.25rem + 1vw,1.875rem); --fs-4:clamp(1.875rem,1.4rem + 2vw,2.625rem); --fs-sm:.875rem; --fs-xs:.75rem; /* spacing (8px scale) */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; /* shape + motion */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms; } :root[dir="rtl"]{--font-brand:"Vazirmatn"} html.has-font{--font:var(--font-brand),var(--font-system)} :root[dir="rtl"]:not(.has-font){--font:Tahoma,var(--font-system)} /* colour: dark (device preference unless the visitor forced light) */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg:#0b1220; --surface:#111a2e; --surface-2:#16223a; --text:#e6edf7; --muted:#9db0c9; --border:#22314d; --accent:#7aa2ff; --accent-hover:#a9c2ff; --on-accent:#0b1220; --accent-soft:#16264a; --ring:#8ab4ff; --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); --shadow-2:0 2px 4px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.45); } } /* colour: dark (visitor forced dark) */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0b1220; --surface:#111a2e; --surface-2:#16223a; --text:#e6edf7; --muted:#9db0c9; --border:#22314d; --accent:#7aa2ff; --accent-hover:#a9c2ff; --on-accent:#0b1220; --accent-soft:#16264a; --ring:#8ab4ff; --shadow-1:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); --shadow-2:0 2px 4px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.45); } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-0);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} :lang(fa){line-height:1.9} img,svg,video{max-width:100%;height:auto} a{color:var(--accent);text-underline-offset:.2em;transition:color var(--dur) var(--ease)} a:hover{color:var(--accent-hover)} :focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:6px} h1,h2,h3{line-height:1.25;margin-block:0 var(--s-3);letter-spacing:-.01em} h1{font-size:var(--fs-4);font-weight:750} h2{font-size:var(--fs-2);font-weight:700} p{margin-block:0 var(--s-4)} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{max-width:880px;margin-inline:auto;padding-inline:var(--s-4)} .muted{color:var(--muted);font-size:var(--fs-sm)} .skip{position:absolute;inset-inline-start:var(--s-2);top:-64px;z-index:50;background:var(--accent);color:var(--on-accent);padding:var(--s-2) var(--s-4);border-radius:var(--r-sm);text-decoration:none} .skip:focus{top:var(--s-2);color:var(--on-accent)} /* ---------- Header ---------- */ .site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-block-end:1px solid var(--border)} @supports (backdrop-filter:blur(8px)){ .site-header{background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)} } .site-header .wrap{max-width:1120px} .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-4);padding-block:var(--s-2)} .brand{display:flex;align-items:center;gap:var(--s-3);min-height:40px;font-weight:750;font-size:var(--fs-1);letter-spacing:-.01em;color:var(--text);text-decoration:none} .brand:hover{color:var(--text)} .logo{border-radius:9px;flex:none} .tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)} .langs{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);list-style:none;margin:0;padding:0} .langs a{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:40px;min-width:40px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font-size:var(--fs-sm);font-weight:550;text-decoration:none;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .langs a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)} .langs a[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .flag{display:block;width:24px;height:16px;flex:none;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.2)} @media (max-width:719px){ .lang-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .langs a{padding:0} } .cur{display:flex;align-items:center;gap:var(--s-2)} select,input,textarea{font:inherit;color:var(--text)} select{min-height:40px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);font-weight:550;cursor:pointer;transition:border-color var(--dur) var(--ease)} select:hover{border-color:var(--accent)} select[hidden]{display:none} .icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);color:var(--text);cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)} .icon-btn:hover{border-color:var(--accent);background:var(--accent-soft)} .icon-btn svg{width:20px;height:20px} .theme-toggle .i-sun{display:none} :root[data-theme="dark"] .theme-toggle .i-sun{display:block} :root[data-theme="dark"] .theme-toggle .i-moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none} } /* ---------- Ad slot (fixed reserved height: no layout shift) ---------- */ .ad-top{background:var(--surface);border-block-end:1px solid var(--border);min-height:100px;padding-block:6px;text-align:center} .ad-top ins{min-height:90px} .ad-top .adsbygoogle{display:block} .ad-label{display:block;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase} /* ---------- Layout ---------- */ main{padding-block:var(--s-6) var(--s-8);min-height:60vh} /* ---------- Components ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-5);margin-block-end:var(--s-5);box-shadow:var(--shadow-1)} .card h2{margin-block-end:var(--s-2)} .notice{text-align:center;padding:var(--s-7) var(--s-5);background:radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 72%),var(--surface);box-shadow:var(--shadow-2)} .notice svg{display:block;width:168px;max-width:60%;height:auto;margin-inline:auto} .notice h1{margin-block:var(--s-5) var(--s-3)} .lead{font-size:var(--fs-1);color:var(--muted);max-width:60ch;margin-inline:auto} .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-5);border:1px solid transparent;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);font:inherit;font-weight:650;text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .btn:hover{background:var(--accent-hover);color:var(--on-accent);box-shadow:var(--shadow-1)} .btn:active{transform:translateY(1px)} .btn-ghost{background:transparent;color:var(--accent);border-color:var(--border)} .btn-ghost:hover{background:var(--accent-soft);color:var(--accent)} input[type="text"],input[type="number"],input[type="email"],input[type="search"],textarea{width:100%;min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} input:hover,textarea:hover{border-color:var(--accent)} label{font-weight:600} .rates{width:100%;border-collapse:collapse;margin-block:var(--s-3)} .rates th,.rates td{padding:var(--s-3) var(--s-2);border-block-end:1px solid var(--border);text-align:start;vertical-align:top} .rates th{font-weight:600} .rates tr:last-child th,.rates tr:last-child td{border-block-end:0} .rates tr{transition:background var(--dur) var(--ease)} .rates tr.is-selected{background:var(--accent-soft)} .meta{display:block;font-size:var(--fs-sm)} .badge{display:inline-block;margin-inline-start:var(--s-2);padding:1px var(--s-2);border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--fs-xs);font-weight:650;vertical-align:middle} .badge[hidden]{display:none} /* ---------- Breadcrumbs ---------- */ .breadcrumbs{margin-block-end:var(--s-4);font-size:var(--fs-sm);color:var(--muted)} .breadcrumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);list-style:none;margin:0;padding:0} .breadcrumbs li+li::before{content:"\203A";margin-inline-end:var(--s-2);color:var(--muted)} :root[dir="rtl"] .breadcrumbs li+li::before{content:"\2039"} .breadcrumbs a{color:var(--muted);text-decoration:none} .breadcrumbs a:hover{color:var(--accent);text-decoration:underline} .breadcrumbs [aria-current]{color:var(--text);font-weight:600} /* ---------- Text pages (legal, about, ...) ---------- */ .prose h2{margin-block:var(--s-6) var(--s-3);font-size:var(--fs-2)} .prose h1+p,.prose h1+h2{margin-block-start:var(--s-3)} .prose ul{padding-inline-start:var(--s-5);margin-block:0 var(--s-4)} .prose li{margin-block-end:var(--s-2)} .prose p.muted{margin-block-start:var(--s-6)} .table-wrap{overflow-x:auto;margin-block:var(--s-3)} .data{width:100%;border-collapse:collapse} .data th,.data td{padding:var(--s-2) var(--s-3);border-block-end:1px solid var(--border);text-align:start;vertical-align:top} .data .num{text-align:end;font-variant-numeric:tabular-nums} /* ---------- Forms ---------- */ .form{display:grid;gap:var(--s-4);max-width:34rem} .form-row{display:grid;gap:var(--s-2)} .form input.short{max-width:8rem} textarea{resize:vertical;min-height:9rem} .check{display:flex;gap:var(--s-3);align-items:flex-start;font-weight:400} .check input{width:20px;height:20px;margin-block-start:.2rem;flex:none;accent-color:var(--accent)} [aria-invalid="true"]{border-color:#b91c1c} .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden} .alert{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);border:1px solid var(--border);margin-block-end:var(--s-4)} .alert ul{margin:var(--s-2) 0 0;padding-inline-start:var(--s-5)} .alert-success{background:color-mix(in srgb,#15803d 12%,var(--surface));border-color:#15803d} .alert-error{background:color-mix(in srgb,#b91c1c 10%,var(--surface));border-color:#b91c1c} /* ---------- Language suggestion + consent banner ---------- */ .btn-sm{min-height:36px;padding:0 var(--s-4);font-size:var(--fs-sm)} .lang-hint{background:var(--accent-soft);border-block-end:1px solid var(--border);font-size:var(--fs-sm)} .lang-hint[hidden],.consent[hidden]{display:none} .lang-hint-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding-block:var(--s-2)} .linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none} .linklike:hover{color:var(--accent);text-decoration:underline} .consent{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--surface);border-block-start:1px solid var(--border);box-shadow:var(--shadow-2)} .consent-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3) var(--s-5);padding-block:var(--s-4)} .consent-text{flex:1 1 22rem} .consent-text h2{font-size:var(--fs-1);margin-block-end:var(--s-1)} .consent-text p{margin:0;font-size:var(--fs-sm);color:var(--muted)} .consent-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)} /* ---------- Footer ---------- */ .site-footer{border-block-start:1px solid var(--border);background:var(--surface);padding-block:var(--s-6);color:var(--muted);font-size:var(--fs-sm)} .site-footer ul{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)} .site-footer a{color:var(--muted);text-decoration:none} .site-footer a:hover{color:var(--accent);text-decoration:underline} .site-footer p{margin-block-end:var(--s-2)} /* ---------- Motion ---------- */ @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:no-preference){ .gear{transform-box:fill-box;transform-origin:center;animation:spin 14s linear infinite} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} } /* ---------- Print (tools get "print / save as PDF" later) ---------- */ @media print{ .site-header,.ad-top,.skip,.site-footer ul{display:none!important} body{background:#fff;color:#000} .card{box-shadow:none;border-color:#ccc} } /* ---------- Tools (Day 9): shared skeleton in templates/tool_layout.php, calculator markup in templates/tools/{id}.php ---------- */ .tool-meta{color:var(--muted);font-size:var(--fs-sm);margin-block-end:var(--s-4)} .calc-block{margin-block-end:var(--s-6)} .calc-block:last-child{margin-block-end:0} .calc-block h3{font-size:var(--fs-1);margin-block-end:var(--s-3)} .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-block-end:var(--s-4)} @media (max-width:639px){.calc-grid{grid-template-columns:1fr}} .calc-result{display:grid;gap:var(--s-2);background:var(--surface-2);border-radius:var(--r-md);padding:var(--s-4)} .calc-result-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-2) var(--s-3)} .calc-result-row .label{color:var(--muted);font-size:var(--fs-sm)} .calc-result-value{font-size:var(--fs-2);font-weight:700;color:var(--accent)} .calc-result-boxes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)} @media (max-width:639px){.calc-result-boxes{grid-template-columns:1fr}} .calc-result-box{display:grid;gap:var(--s-1);border-radius:var(--r-md);padding:var(--s-4);border:1px solid transparent} .calc-result-box-label{color:var(--muted);font-size:var(--fs-sm)} .calc-result-box-value{font-size:var(--fs-2);font-weight:700} .calc-result-box-delta{font-size:var(--fs-sm);font-weight:600} .calc-result-box--up{background:color-mix(in srgb,#15803d 12%,var(--surface-2));border-color:color-mix(in srgb,#15803d 30%,transparent)} .calc-result-box--up .calc-result-box-value,.calc-result-box--up .calc-result-box-delta{color:#15803d} .calc-result-box--down{background:color-mix(in srgb,#b91c1c 10%,var(--surface-2));border-color:color-mix(in srgb,#b91c1c 30%,transparent)} .calc-result-box--down .calc-result-box-value,.calc-result-box--down .calc-result-box-delta{color:#b91c1c} /* Day 18 part 2: these result blocks each set their own `display` (grid/flex), which - at equal CSS specificity - overrides the browser's default `[hidden]{display:none}` rule (author origin beats user agent origin on a tie), so the `hidden` attribute alone silently fails to hide them. No earlier tool ever toggled `hidden` on a `.calc-result`/`.calc-result-row` element (birth-date-info-calculator's result block and its conditional hours row are the first), so this went unnoticed until a real browser test caught it. Explicit rule restores the expected behaviour for every current and future tool. */ .calc-result[hidden],.calc-result-row[hidden],.calc-result-boxes[hidden],.calc-result-box[hidden]{display:none} .faq-item{border-block-end:1px solid var(--border);padding-block:var(--s-4)} .faq-item:first-child{padding-block-start:0} .faq-item:last-child{border-block-end:0;padding-block-end:0} .faq-item h3{font-size:var(--fs-1);margin-block-end:var(--s-2)} .related-tools ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2)} .related-tools a{display:inline-block;padding:var(--s-2) var(--s-4);border:1px solid var(--border);border-radius:var(--r-pill);text-decoration:none;color:var(--text)} .related-tools a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)} .tool-disclaimer{color:var(--muted);font-size:var(--fs-sm);border-block-start:1px solid var(--border);padding-block-start:var(--s-4);margin-block-start:var(--s-6)} /* ---------- Home page (Day 19): hero, tool grid, trust points ---------- */ .home-hero{text-align:center;padding:var(--s-7) var(--s-5);background:radial-gradient(120% 90% at 50% 0%,var(--accent-soft),transparent 72%),var(--surface);box-shadow:var(--shadow-2)} .home-hero .lead{margin-block-end:var(--s-5)} .home-tools{margin-block-end:var(--s-5)} .home-tools>h2{margin-block-end:var(--s-4)} .tool-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)} @media (max-width:639px){.tool-grid{grid-template-columns:1fr}} .tool-card{display:flex;flex-direction:column;gap:var(--s-2);height:100%;box-sizing:border-box;padding:var(--s-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-1);color:var(--text);text-decoration:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .tool-card:hover{border-color:var(--accent);box-shadow:var(--shadow-2);color:var(--text)} .tool-card:focus-visible{outline:3px solid var(--ring);outline-offset:2px} .tool-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)} .tool-card-badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--accent)} .tool-card-icon{width:24px;height:24px} .tool-card-cat{font-size:var(--fs-xs);font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} :lang(fa) .tool-card-cat{text-transform:none;letter-spacing:0} .tool-card-title{font-size:var(--fs-1);font-weight:700;line-height:1.3} .tool-card-text{color:var(--muted);font-size:var(--fs-sm);flex:1} .tool-card-more{font-size:var(--fs-sm);font-weight:650;color:var(--accent)} .tool-card-more::after{content:" →"} [dir="rtl"] .tool-card-more::after{content:" ←"} @media (prefers-reduced-motion:no-preference){.tool-card:hover{transform:translateY(-2px)}} .trust-list{list-style:none;margin:0 0 var(--s-4);padding:0;display:grid;gap:var(--s-3)} .trust-list li{padding-inline-start:var(--s-5);position:relative} .trust-list li::before{content:"";position:absolute;inset-inline-start:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--accent)} /* ---------- World clock (Day 21) ---------- */ #wc-table td{white-space:nowrap} #wc-table tbody th{white-space:nowrap;position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} #wc-table tr.is-utc th,#wc-table tr.is-utc td{background:var(--accent-soft)} #wc-table [data-cell="time"]{font-weight:700} @media (max-width:639px){#wc-table th,#wc-table td{padding:var(--s-2)}} /* ---------- Forex market hours (Day 22) ---------- */ .fx-summary{font-weight:650} #fx-table td{white-space:nowrap} #fx-table tbody th{white-space:nowrap;position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} #fx-table [data-cell="countdown"]{font-variant-numeric:tabular-nums} .fx-status{display:inline-block;padding:2px var(--s-2);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:650;background:var(--surface-2);color:var(--muted)} .fx-status--open{background:color-mix(in srgb,#15803d 14%,var(--surface));color:#15803d} .fx-status--holiday{background:color-mix(in srgb,#b45309 14%,var(--surface));color:#b45309} :root[data-theme="dark"] .fx-status--open{color:#4ade80} :root[data-theme="dark"] .fx-status--holiday{color:#fbbf24} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .fx-status--open{color:#4ade80} :root:not([data-theme="light"]) .fx-status--holiday{color:#fbbf24} } @media (max-width:639px){#fx-table th,#fx-table td{padding:var(--s-2)}} /* ---------- Bitcoin halving countdown (Day 23) ---------- */ .btc-countdown{display:grid;justify-items:center;gap:var(--s-1);padding:var(--s-5) var(--s-4);margin-block-end:var(--s-4);border-radius:var(--r-md);background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,#f7931a 16%,var(--surface)),var(--surface-2))} .btc-countdown-value{font-size:var(--fs-4);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;text-align:center} .btc-progress-label{margin-block:var(--s-4) var(--s-2);font-size:var(--fs-sm);font-weight:650} .btc-progress{display:block;width:100%;height:12px;margin-block-end:var(--s-3);border:0;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden;accent-color:#f7931a} .btc-progress::-webkit-progress-bar{background:var(--surface-2);border-radius:var(--r-pill)} .btc-progress::-webkit-progress-value{background:#f7931a;border-radius:var(--r-pill)} .btc-progress::-moz-progress-bar{background:#f7931a;border-radius:var(--r-pill)} tr.is-next td{background:var(--accent-soft);font-weight:650} /* ---------- Kraken crypto prices (Day 24) ---------- */ #kraken-table td,#kraken-table tbody th{white-space:nowrap} #kraken-table tbody th{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} #kraken-table [data-cell="last"]{font-weight:700} .kraken-up{color:#15803d} .kraken-down{color:#b91c1c} :root[data-theme="dark"] .kraken-up{color:#4ade80} :root[data-theme="dark"] .kraken-down{color:#f87171} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .kraken-up{color:#4ade80} :root:not([data-theme="light"]) .kraken-down{color:#f87171} } .kraken-cta{border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s-5);background:var(--surface-2)} .kraken-ad-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-block-end:var(--s-2)} :lang(fa) .kraken-ad-label{text-transform:none;letter-spacing:0} @media (max-width:639px){#kraken-table th,#kraken-table td{padding:var(--s-2)}} /* ---------- Share block (Day 24) ---------- */ .share{background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 70%,var(--surface)),var(--surface))} .share-heading{font-size:var(--fs-1);margin-block-end:var(--s-4)} .share-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0} .share-btn{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-4);border:1px solid var(--border);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:650;text-decoration:none;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)} .share-btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)} .share-btn svg{width:18px;height:18px;flex:none} .share-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .share-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)} .share-btn.is-copied{border-color:#15803d;color:#15803d} :root[data-theme="dark"] .share-btn.is-copied{border-color:#4ade80;color:#4ade80} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .share-btn.is-copied{border-color:#4ade80;color:#4ade80}} @media (prefers-reduced-motion:no-preference){.share-btn:hover{transform:translateY(-1px)}} .kraken-cta-title{font-size:var(--fs-1);margin-block-end:var(--s-2)} .kraken-benefits{margin:0 0 var(--s-4);padding-inline-start:var(--s-5);display:grid;gap:var(--s-1)} .kraken-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)} .kraken-code{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);font-size:var(--fs-sm)} .kraken-code-label{color:var(--muted)} .kraken-code code{padding:4px var(--s-3);border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--surface);font-weight:700;letter-spacing:.06em} .kraken-code-copy{min-height:36px;padding:0 var(--s-3)} /* ---------- Exchange rates (Day 25) ---------- */ .fx-live td,.fx-live tbody th,.fx-reference td,.fx-reference tbody th{white-space:nowrap} .fx-live tbody th,.fx-reference tbody th{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;border-inline-end:1px solid var(--border)} .fx-live [data-cell="last"]{font-weight:700} .fx-reference td:first-of-type{font-weight:700} .fx-currency-name{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--muted);white-space:normal} @media (max-width:639px){.fx-live th,.fx-live td,.fx-reference th,.fx-reference td{padding:var(--s-2)}}