* { box-sizing:border-box; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.6; } /* Grid and flex children default to min-width:auto, which lets a wide table push the whole page sideways. This is the rule the signed-in mockup was missing on all seventeen routes. */ .l-wrap > *, .l-sec > * { min-width:0; } .l-wrap { max-width:var(--wrap); margin:0 auto; padding:0 16px; } .l-sec { padding:38px 0; } .l-alt { background:var(--surface-2); border-block:1px solid var(--line-soft); } .l-sub { font-size:var(--text-base); line-height:1.62; color:var(--ink-2); margin:0; max-width:66ch; } /* A link in a lede had no colour and came out in the browser's own -webkit-link — rgb(158,158,255) in dark, #0000EE in light. .l-sub is on every page, so this was one page today and any page that adds a link to a lede tomorrow. Set here rather than on the page that happened to have one. */ .l-sub a { color:var(--gold-dk); text-underline-offset:2px; } /* A CENTRED SECTION, for pages whose head is centred too. Lives here rather than in a page's stylesheet because two clusters use it now — it was .ai-c in ai_astrologer.py, and pages/dasha.py picked up the class without the rule, so its ledes rendered left under centred heads and looked like an oversight. margin-inline is not optional: .l-sub caps at 66ch, so centring the text without centring the box leaves a centred column sitting on the left of the wrap. Only the lede. Lists, tables and cards inside a .l-ctr stay left — centred body copy is ragged on both edges and a centred bulleted list stops forming a column to scan. */ .l-ctr .l-sub { text-align:center; margin-inline:auto; } /* TWO LEDES GO SIDE BY SIDE. One is fine stacked: 66ch keeps a line readable and the grid or panel under it carries the width. Two of them stacked is not — they fill the left half of the band, the right half is empty, and under a full-width heading with a full-width panel below it the pair reads as a column that has been cut off rather than as air. Measured at 1280: 582px of a 1180px section, 49% of it, twice over. A track each, so both keep the SAME measure they had — this is a layout fix, not a wider line. Stretching one paragraph across 1180px would give 150 characters to a line that is already at 74. auto-fit rather than two fixed columns, because the home page has a pair inside a half-width column; there they stack again rather than becoming two forty-character ribbons. .l-sub KEEPS ITS 66ch. Each track comes out at 552px against a 582px cap, so the track is what governs in two columns and the cap is what governs when it falls back to one — which is the width it has today. Overriding the cap to none looked tidier and gave a 736px tablet a 93-character line, which is the fault this rule exists to avoid. min(400px, 100%), NOT 400px. A minimum track wider than the container does not shrink — it overflows it, and at 320px the whole page scrolled sideways by 26px. min() caps the floor at whatever room there is. */ .l-lede { display:grid; gap:10px 44px; margin-bottom:20px; grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%), 1fr)); } .l-mb { margin-bottom:20px; } .l-mt { margin-top:22px; } /* ── the header's two menus (language, account) ─────── */ .c-dd { position:relative; } .c-dd > summary { list-style:none; } .c-dd > summary::-webkit-details-marker { display:none; } /* The theme toggle's size and shape (ui .c-th-t), so the three read as one set: 34px under a mouse, 44px under a finger. */ .c-dd-b { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); cursor:pointer; } @media (pointer:coarse) { .c-dd-b { width:44px; height:44px; border-radius:12px; } } .c-dd-b:hover, .c-dd[open] > .c-dd-b { border-color:var(--gold); color:var(--gold-dk); } .c-dd-aa { font-size:13px; font-weight:700; letter-spacing:-.02em; } .c-dd-m { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:60; min-width:170px; padding:6px; border-radius:12px; border:1px solid var(--line); background:var(--surface); box-shadow:0 10px 30px rgba(0,0,0,.14); display:flex; flex-direction:column; gap:2px; } .c-dd-r { left:auto; right:0; transform:none; } .c-dd-i { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; min-height:44px; box-sizing:border-box; font-size:14.5px; color:var(--ink); text-decoration:none; white-space:nowrap; } .c-dd-i i { font-style:normal; width:18px; text-align:center; color:var(--ink-3); } .c-dd-i:hover { background:var(--gold-bg); } .c-dd-i.c-on { color:var(--gold-dk); font-weight:650; } .c-dd-i.c-on i { color:var(--gold-dk); } .l-act-u { display:flex; align-items:center; gap:8px; } /* Theme, language, account and the menu at 320px ran the menu button to the screen's edge, into the 16px gutter every page keeps. */ @media (max-width:359px) { .l-act-u { gap:2px; } } /* Date and time are one question, asked once. Both values are short enough to sit side by side even at 360px, and pairing them stops the form reading as five separate chores. */ /* Date and time side by side, and STACKED on the narrowest phones. The two were always a 1fr 1fr grid; what changed is that the time trigger now reads 09:15 PM as four flex spans rather than one string, so its min-content is wider than half of a 288px card and the card grew to 311 — 7px of sideways scroll on the page the whole site links to. minmax(0,1fr) alone would have kept the row and clipped the readout instead. */ .l-dt { display:grid; grid-template-columns:1fr; gap:10px; } @media (min-width:360px) { .l-dt { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } /* Part of the hero's left column, not a band of its own. It anchors the bottom of that column so it finishes level with the form card. */ /* Inside the form card the list sits under the button, separated by a rule rather than by more whitespace — it is what pressing the button gets you, so it should read as part of the button's promise. */ .l-cardsub { margin:2px 0 14px; } .l-cardinc { margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); } .l-inc { list-style:none; margin:0; padding:0; display:grid; gap:9px; } .l-inc li { display:flex; align-items:flex-start; gap:9px; } .l-inc svg { flex:none; margin-top:2px; color:var(--gold-dk); } .l-inc span { font-size:14px; line-height:1.45; color:var(--ink-2); } .l-samp { display:flex; align-items:center; gap:13px; padding:14px 16px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .l-samp:hover { border-color:var(--gold); background:var(--gold-bg); } /* Between the two-column breakpoint and 1024 the left column runs 9px past the card, because the headline takes an extra line before the columns are wide enough. Four pixels off the padding and four off the stack gap close it without anyone being able to tell the difference. */ .l-samp > svg:first-child { flex:none; color:var(--gold-dk); } .l-samp > svg:last-child { flex:none; color:var(--ink-3); margin-left:auto; } .l-samp span { min-width:0; } .l-samp b { display:block; font-size:14.5px; font-weight:700; } .l-samp i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45; } .l-dt .c-pf { margin-bottom:0; } .l-dth { margin:6px 0 var(--space-3); } .l-mb2 { margin-bottom:16px; } .l-mark { display:block; width:34px; height:34px; flex:none; } .l-mark img { display:block; width:100%; height:100%; border-radius:19%; } /* proof row */ .l-proof { background:var(--gold-bg); border-block:1px solid var(--line); } .l-pfr { display:grid; grid-template-columns:repeat(2,1fr); gap:0; padding:4px 0; } .l-pf { padding:18px 4px 18px 18px; } /* Hairlines, not a colour change, do the separating — and only between cells that are actually side by side, which changes at each breakpoint. */ .l-pf:nth-child(2n) { border-left:1px solid var(--line); } .l-pf:nth-child(n+3) { border-top:1px solid var(--line); } .l-pf:first-child { padding-left:0; } .l-pf b { display:block; font-family:var(--font-serif); font-size:29px; line-height:1.05; font-weight:600; color:var(--gold-dk); letter-spacing:-.015em; } .l-pf span { display:block; font-size:13.5px; font-weight:650; margin-top:5px; color:var(--ink); } .l-pf i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } @media (min-width:760px) { .l-pfr { grid-template-columns:repeat(4,1fr); } .l-pf:nth-child(n+3) { border-top:0; } .l-pf:nth-child(n+2) { border-left:1px solid var(--line); } } /* panchang */ .l-panch { display:grid; gap:8px; grid-template-columns:repeat(2,1fr); } .l-pc { padding:13px 14px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); } .l-pc span { display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.13em; color:var(--ink-3); } .l-pc b { display:block; font-size:15px; margin-top:5px; } .l-pc i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); } .l-pc.c-t-good b { color:var(--good); } .l-pc.c-t-bad b { color:var(--bad); } @media (min-width:700px) { .l-panch { grid-template-columns:repeat(3,1fr); } } @media (min-width:1000px) { .l-panch { grid-template-columns:repeat(6,1fr); } } /* rashifal */ .l-rsg { display:grid; gap:7px; grid-template-columns:repeat(3,1fr); } .l-rs { display:flex; flex-direction:column; align-items:center; gap:1px; min-height:98px; justify-content:center; padding:12px 5px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); text-decoration:none; color:var(--ink); text-align:center; } .l-rs:hover { border-color:var(--gold); background:var(--gold-bg); } .l-rs .c-sym { color:var(--gold-dk); margin-bottom:4px; } .l-rs b { font-size:12.5px; font-weight:650; } .l-rs i { font-style:normal; font-size:10.5px; color:var(--ink-3); } .l-rs u { text-decoration:none; font-size:12px; color:var(--gold-dk); } @media (min-width:560px) { .l-rsg { grid-template-columns:repeat(4,1fr); } } @media (min-width:900px) { .l-rsg { grid-template-columns:repeat(6,1fr); } } /* tools */ .l-tools { display:grid; gap:12px; } .l-ti { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:var(--gold-dk); background:var(--gold-bg); margin-bottom:11px; } .l-tl { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; } .l-tl a { display:inline-flex; align-items:center; min-height:44px; font-size:12.5px; font-weight:600; padding:0 14px; border-radius:var(--r-pill); color:var(--ink-2); border:1px solid var(--line); background:var(--surface); text-decoration:none; } .l-tl a:hover { color:var(--gold-dk); border-color:var(--gold); background:var(--gold-bg); } @media (min-width:720px) { .l-tools { grid-template-columns:repeat(2,1fr); } } /* astrologers */ /* .h-astro in home.py sets display on top of this and is the only caller, so anything layout-ish added here is dead. The phone rail lives there. */ .l-astro { display:grid; gap:11px; grid-template-columns:repeat(1,1fr); } .l-ah { display:flex; align-items:center; gap:11px; } .l-an { display:block; font-size:15px; font-weight:700; } .l-as { display:block; font-size:12.5px; color:var(--ink-3); } .l-am { display:flex; gap:5px; margin-top:12px; } @media (min-width:600px) { .l-astro { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .l-astro { grid-template-columns:repeat(4,1fr); } } /* The unknown-birth-time escape hatch belongs inside the time picker, where someone reaches it at the exact moment they realise they cannot answer. */ .l-unk { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); } .l-faq { margin-top:16px; } /* ── page head ────────────────────────────────────────── */ .s-crumb { padding-top:16px; } .s-top { padding:22px 0 6px; } .s-head { max-width:64ch; } /* With a form beside it the header is the full width and the two columns share it, so the reading underneath is not squeezed into a rail. */ .s-head-2 { max-width:none; display:grid; gap:26px; grid-template-columns:minmax(0,1fr); align-items:start; } .s-head-2 > * { min-width:0; } @media (min-width:960px) { .s-head-2 { grid-template-columns:minmax(0,1fr) minmax(0,380px); } } .s-head-t { max-width:64ch; } .s-eyebrow { display:inline-block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk); padding:5px 10px; border-radius:var(--r-pill); background:var(--gold-bg); margin-bottom:14px; } .s-h1 { font-family:var(--font-serif); font-size:clamp(27px,5.2vw,42px); line-height:1.08; letter-spacing:-.021em; font-weight:600; margin:0 0 13px; text-wrap:balance; } .s-h1 em { font-style:normal; color:var(--gold-dk); } .s-dek { font-size:var(--text-md); line-height:1.62; color:var(--ink-2); margin:0; max-width:58ch; } /* What the page gives back, named. See page_head() for why it is only on the fourteen with a full birth-details form. */ .s-ret { margin-top:18px; max-width:58ch; } .s-ret ul { margin:8px 0 0; padding:0; list-style:none; display:grid; gap:5px; } .s-ret li { position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--ink-2); } .s-ret li::before { content:''; position:absolute; left:2px; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold-solid); } @media (min-width:960px) { .s-head-fill { align-items:stretch; } .s-head-fill > .s-head-t { display:flex; flex-direction:column; } .s-head-fill .s-meta { margin-top:auto; padding-top:16px; } } /* The facts a dek would otherwise carry as adjectives. Mono, so they read as data rather than as more sentence. */ /* THE CENTRED HEAD, for pages that are not asking for a birth time. The default sits beside a form card and runs to 64ch down the left; a page whose top is a choice rather than a form leaves that whole right-hand column empty, and the text reads as the caption of something that failed to load. Two pages want this — the tarot hub, whose top half is six readings, and the astrologer pages, whose top half is a roster — so it lives here rather than being written twice. */ .s-head-c { max-width:700px; margin-inline:auto; text-align:center; } .s-head-c .s-eyebrow { font-size:11.5px; letter-spacing:.09em; font-weight:700; border:1px solid var(--gold-lt); padding:5px 13px; margin-bottom:16px; } .s-head-c .s-h1 { font-size:clamp(30px,5.6vw,46px); } .s-head-c .s-dek { margin-inline:auto; max-width:62ch; } .s-head-c .s-meta { justify-content:center; } .s-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); } .s-meta span { display:flex; align-items:center; gap:7px; } .s-meta span + span::before { content:''; width:3px; height:3px; flex:none; border-radius:50%; background:var(--line); margin-left:-11px; } /* ── related ──────────────────────────────────────────── */ .s-rel { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:620px) { .s-rel { grid-template-columns:repeat(2,1fr); } } @media (min-width:960px) { .s-rel { grid-template-columns:repeat(3,1fr); } } .s-rel > * { min-width:0; } .s-rel-i { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; min-height:44px; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); } .s-rel-i:hover { border-color:var(--gold); background:var(--gold-bg); } .s-rel-k { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--gold-bg); color:var(--gold-dk); } .s-rel-x { min-width:0; display:flex; flex-direction:column; line-height:1.4; } .s-rel-x b { font-size:14px; font-weight:650; } .s-rel-x i { font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; } /* ── closing CTA ──────────────────────────────────────── */ .s-cta { display:grid; gap:20px; align-items:center; padding:28px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background: radial-gradient(120% 140% at 88% 0%, var(--gold-bg) 0%, transparent 64%), var(--surface); } @media (min-width:820px) { .s-cta { grid-template-columns:1fr auto; gap:34px; padding:32px 36px; } } .s-cta > * { min-width:0; } .s-cta h2 { font-family:var(--font-serif); font-size:clamp(21px,3.4vw,28px); line-height:1.16; letter-spacing:-.018em; font-weight:600; margin:0 0 9px; text-wrap:balance; } .s-cta p { font-size:var(--text-base); line-height:1.6; color:var(--ink-2); margin:0; max-width:52ch; } .s-cta-b { display:flex; flex-wrap:wrap; gap:10px; } .s-cta-b > * { flex:1 1 auto; } .s-cta-alt { display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap; } .s-cta-alt svg { color:var(--gold-dk); } /* The banner: the page's line, then the astrologers and the reports. */ .s-cta.s-pro { display:block; position:relative; overflow:hidden; padding:36px 20px 26px; background:radial-gradient(120% 80% at 50% 0%, var(--gold-bg) 0%, transparent 70%), var(--cream); } @media (min-width:760px) { .s-cta.s-pro { padding:44px 40px 36px; } } /* The line art: faint, behind everything, never in the way. */ .s-pro-deco { position:absolute; top:0; pointer-events:none; display:block; background:var(--gold); opacity:.8; -webkit-mask:var(--m) no-repeat top / contain; mask:var(--m) no-repeat top / contain; } .s-pro-sun { left:0; width:340px; aspect-ratio:340 / 250; -webkit-mask-position:left top; mask-position:left top; } .s-pro-moon { right:0; width:404px; aspect-ratio:404 / 250; -webkit-mask-position:right top; mask-position:right top; } /* Smaller and fainter behind a narrower headline; on a phone, a corner of each, inside the edge. */ @media (max-width:1099px) { .s-pro-sun { width:250px; } .s-pro-moon { width:290px; } } @media (max-width:759px) { .s-pro-deco { opacity:.75; } .s-pro-sun { width:44%; left:-5%; } .s-pro-moon { width:48%; right:-4%; } /* The faces show at the edges, as in the mobile mock: the headline keeps to the middle. */ .s-cta.s-pro .s-pro-h h2 { max-width:78%; margin-inline:auto; } } .s-pro-h { position:relative; text-align:center; max-width:780px; margin:0 auto 28px; } .s-cta.s-pro .s-pro-h h2 { font-size:clamp(28px,4.6vw,46px); line-height:1.08; margin:0; } .s-cta.s-pro .s-pro-h p { margin:12px auto 0; max-width:60ch; font-size:17px; color:var(--ink-2); } .s-pro-go1 { margin-top:20px; display:inline-flex; gap:10px; align-items:center; padding:0 26px; min-height:52px; font-size:16px; box-shadow:0 8px 22px -12px rgba(90,55,10,.55); } .s-pro-g { position:relative; display:grid; gap:18px; grid-template-columns:minmax(0,1fr); } /* Side by side from 1000px: narrower, the covers shrink under the chat card and no amount of tightening makes the two end together. */ @media (min-width:1000px) { .s-pro-g { grid-template-columns:repeat(2,minmax(0,1fr)); } } .s-pro-c { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; padding:22px 20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:inherit; text-decoration:none; transition:border-color .15s; } @media (min-width:760px) { .s-pro-c { padding:26px 28px; } } .s-pro-c:hover { border-color:var(--gold-lt); } .s-pro-c h3 { font-family:var(--font-serif); font-size:clamp(24px,2.6vw,32px); font-weight:600; line-height:1.15; margin:6px 0 0; color:var(--ink); } .s-pro-t { font-size:15px; line-height:1.55; color:var(--ink-2); } .s-pro-p { font-size:15px; font-weight:600; color:var(--gold-dk); } .s-pro-fs { display:flex; text-decoration:none; } .s-pro-f { width:68px; height:68px; border-radius:50%; overflow:hidden; border:3px solid var(--surface); margin-left:-10px; background:var(--surface-2); box-shadow:0 0 0 1px var(--gold-lt); } .s-pro-f:first-child { margin-left:0; } /* Six across a phone's card: 44px at 320, 54 from 380. */ @media (max-width:759px) { .s-pro-f { width:44px; height:44px; margin-left:-10px; border-width:2px; } } @media (min-width:380px) and (max-width:759px) { .s-pro-f { width:54px; height:54px; margin-left:-8px; } } @media (min-width:760px) { .s-pro-f { width:76px; height:76px; margin-left:-12px; } } .s-pro-f img { width:100%; height:100%; object-fit:cover; display:block; } /* The four, as tiles with their subject's icon. */ .s-pro-rs { display:grid; gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); align-self:stretch; margin-top:4px; } @media (min-width:480px) { .s-pro-rs { gap:10px; } } .s-pro-r { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; border-radius:12px; background:var(--gold-bg); } .s-pro-r svg { flex:none; color:var(--gold-dk); } .s-pro-r > span { display:flex; flex-direction:column; min-width:0; } .s-pro-r b { font-size:15px; font-weight:650; color:var(--ink); } .s-pro-r i { font-style:normal; font-size:13.5px; color:var(--ink-2); } .s-pro-qs { display:flex; flex-direction:column; gap:8px; align-self:stretch; margin-top:4px; } .s-pro-qs > i { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .s-pro-q { display:flex; align-items:center; min-height:44px; padding:10px 14px; border-radius:12px; background:var(--gold-bg); color:var(--ink); font-size:14.5px; line-height:1.4; text-decoration:none; } .s-pro-q:hover { background:var(--gold-lt); } .s-pro-bs { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-self:stretch; margin-top:6px; } /* A price abroad is longer than ₹5 ("Chat from $0.10/min"), and at 320 the nowrap button ran past the screen. Wrap there instead. */ @media (max-width:374px) { .s-pro-bs .c-btn { white-space:normal; flex-wrap:wrap; text-align:center; } } @media (min-width:1000px) { .s-pro-bs { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* The rate sits beside its label, one line. */ .s-pro-bs .c-btn { display:flex; justify-content:center; align-items:center; gap:8px; white-space:nowrap; min-height:52px; font-size:16px; } .s-pro-bs .c-as-rate { font-weight:650; } .s-pro-fine { font-size:13px; color:var(--ink-3); } /* ── THE PHONE (Rohit's mobile mock, 28 Sep 2026) ── The chat card centred — faces, heading, the line under it — with the four as one-row tiles, icon beside the name; Chat and Call full width, one over the other. The reports card leads with its heading, then the covers, the words, and Explore full width. Everything a little closer. */ @media (max-width:759px) { .s-cta.s-pro { padding:24px 12px 14px; } .s-pro-h { margin-bottom:18px; } .s-cta.s-pro .s-pro-h p { margin-top:8px; font-size:16px; } .s-pro-go1 { margin-top:14px; width:100%; max-width:360px; justify-content:center; } .s-pro-g { gap:14px; } .s-pro-c { padding:18px 12px; gap:10px; border-radius:18px; } .s-pro-g > .s-pro-c:first-child { align-items:center; text-align:center; } .s-pro-g > .s-pro-c:first-child .s-pro-fs { justify-content:center; } .s-pro-c h3 { margin-top:2px; font-size:26px; } .s-pro-rs { gap:8px; } .s-pro-r { flex-direction:row; align-items:center; gap:7px; padding:9px 8px; text-align:left; } .s-pro-r svg { width:20px; height:20px; } .s-pro-r b { font-size:14px; white-space:nowrap; } .s-pro-r i { font-size:12.5px; line-height:1.3; } .s-pro-rs { gap:6px; } .s-pro-bs { gap:8px; margin-top:2px; } .s-pro-bs .c-btn { min-height:50px; } .s-pro-fine { text-align:center; } .s-pro-rep h3 { order:-1; margin:0; text-align:center; align-self:stretch; } .s-pro-rep .s-pro-cvs { gap:10px; } .s-pro-go { align-self:stretch; justify-content:center; margin-top:4px; } } /* The smallest phones: a 66px name column cannot hold "Astro Vaidya" beside an icon, so the icon goes above it there. */ @media (max-width:359px) { .s-pro-r { flex-direction:column; align-items:flex-start; gap:5px; } .s-pro-r b { white-space:normal; } } /* THE TWO CARDS END TOGETHER (Rohit, 28 Sep 2026: "the right card has empty space, shrink the left to match"). Side by side the covers set the height, and they shrink with the card: from 1280px the two already match to a few pixels; between 1000 and 1279 the chat card is tightened — smaller faces, slimmer tiles, closer rows — to fit under the covers. Both cards' buttons sit on the bottom edge, so what little is left over falls above them and the two rows of buttons line up. */ .s-pro-g > .s-pro-c:first-child .s-pro-bs { margin-top:auto; } @media (min-width:1000px) and (max-width:1279px) { .s-pro-g > .s-pro-c:first-child { gap:8px; } .s-pro-g > .s-pro-c:first-child .s-pro-f { width:58px; height:58px; margin-left:-10px; } .s-pro-g > .s-pro-c:first-child .s-pro-f:first-child { margin-left:0; } .s-pro-g > .s-pro-c:first-child h3 { margin-top:2px; font-size:clamp(22px,2.2vw,28px); } .s-pro-g > .s-pro-c:first-child .s-pro-t { font-size:14px; } .s-pro-rs { gap:8px; margin-top:2px; } .s-pro-r { padding:8px 12px; gap:10px; } .s-pro-r svg { width:22px; height:22px; } .s-pro-r b { font-size:14.5px; } .s-pro-r i { font-size:13px; } .s-pro-bs .c-btn { min-height:48px; } } /* The reports: the covers big, then the words, then the button. */ .s-pro-cvs { display:flex; gap:14px; align-items:flex-start; align-self:stretch; } .s-pro-cv { flex:1 1 0; max-width:190px; border-radius:6px; overflow:hidden; box-shadow:0 10px 24px -14px rgba(60,30,5,.6); } .s-pro-cv img { width:100%; height:auto; display:block; } .s-pro-rep h3 { margin-top:10px; } .s-pro-go { margin-top:auto; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 24px; font-size:16px; } .s-pro-c .s-pro-p + .s-pro-go { margin-top:12px; } /* Everything here is namespaced t-. The shell owns c-, h-, l-, s- and sg-; restyling a bare class one of those owns is what checks/clash.py is for. */ .t-egr { margin-top:16px; padding:16px 18px; border-left:3px solid var(--gold); border-radius:0 var(--r-card) var(--r-card) 0; background:var(--surface); } .t-egr p { margin:6px 0 0; max-width:80ch; font-size:15px; line-height:1.75; color:var(--ink); } /* ── the card face ──────────────────────────────────────────── */ /* A PLAYING CARD IS PORTRAIT. aspect-ratio rather than a height, so the three sizes are one rule and a face never crops its own name. */ .t-c { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 10px 13px; text-align:center; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:12px; min-width:0; } a.t-c:hover { border-color:var(--gold); background:var(--gold-bg); } .t-c-n { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--gold-dk); } .t-c-e { display:block; width:100%; margin:3px 0 5px; } /* NOTHING TURNS. A reversed card really is dealt upside down, and drawing it that way is correct — for somebody who already knows that. To everybody else an upside-down photograph is a broken image, and this page is for readers meeting tarot for the first time. The fact is carried in words instead: "REVERSED" under the name, and in the alt text. Third position on this: symbol rotated (wrong, made a point-down pentagram), picture rotated (right by convention, reads as a defect), words only. */ .t-c-rev { background:var(--surface-2); } .t-c-i { display:block; width:100%; height:auto; border-radius:5px; background:var(--surface-2); } .t-c-t { font-family:var(--font-serif); font-size:15px; font-weight:600; line-height:1.25; text-wrap:balance; } .t-c-a { font-style:normal; font-size:11px; line-height:1.35; color:var(--ink-3); } .t-c-r { font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); border-top:1px solid var(--line-soft); padding-top:5px; margin-top:2px; align-self:stretch; } .t-c-sm .t-c-t { font-size:13.5px; } .t-c-sm { padding:10px 8px 11px; } /* ── 01 the reading ─────────────────────────────────────────── */ .t-read { border:1px solid var(--gold-lt); border-radius:var(--r-card); background:var(--gold-bg); padding:20px; } .t-read-h { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:flex-start; padding-bottom:15px; margin-bottom:18px; border-bottom:1px solid var(--gold-lt); } .t-read-h > div { min-width:0; } .t-read-h b { display:block; font-family:var(--font-serif); font-size:19px; font-weight:600; color:var(--ink); margin-top:3px; } .t-read-m { margin-left:auto; text-align:right; } /* The spread. auto-fit rather than a fixed three, because the same block lays out one card, three, five and the Celtic Cross's ten. */ .t-ds { display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr)); } .t-d { display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center; padding:16px 16px 18px; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); } .t-d-p { margin-bottom:10px; } /* The flipper. Two nested boxes and neither does anything until the cards are dealt face down: .t-d-fl is the width limit that used to be on .t-d-c, .t-d-in is the thing that rotates. In the worked example — which is what a crawler and a reader with no script get — this is two plain divs around a picture. */ .t-d-fl { width:100%; max-width:190px; margin-bottom:13px; } .t-d-c { display:block; border-radius:7px; overflow:hidden; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.07); } .t-d-c:hover { box-shadow:0 1px 3px rgba(0,0,0,.14), 0 8px 26px rgba(0,0,0,.12); } /* Not rotated — see the note on .t-c-rev. The card keeps its badge and the word under the name. */ .t-d-rev .t-c-i { outline:2px solid var(--gold-lt); outline-offset:-2px; } .t-d-h { display:block; font-family:var(--font-serif); font-size:19px; font-weight:600; line-height:1.25; text-wrap:balance; margin-bottom:7px; } .t-d-h a { color:var(--ink); text-decoration:none; } .t-d-h a:hover { color:var(--gold-dk); } .t-d-h em { display:block; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; } .t-d-m { margin:0 0 11px; font-size:14px; line-height:1.6; color:var(--ink-2); } .t-kw { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; } .t-kw span { font-size:11.5px; font-weight:600; color:var(--gold-dk); padding:3px 9px; border:1px solid var(--gold-lt); border-radius:999px; background:var(--surface); } .t-d-n { display:block; margin-top:auto; padding-top:12px; font-size:12.5px; line-height:1.5; color:var(--ink-3); } /* ── what the spread is saying ──────────────────────────────── */ /* The panel that closes a reading. On the worked example it is simply there, under the cards, because that reading is face up. On your own it is held back until the last card is over — see .t-read-all below. */ .t-sum { margin-top:20px; padding-top:18px; border-top:1px solid var(--gold-lt); } .t-sum-l { display:block; margin-bottom:12px; } .t-sum-g { display:grid; gap:14px; grid-template-columns:1fr; margin-bottom:14px; } @media (min-width:760px) { .t-sum-g { grid-template-columns:1fr 1fr; } } /* Alone in the row it takes the whole row rather than half of it with a hole beside it — which is what four of the six spreads produce. */ .t-sum-g > :only-child { grid-column:1 / -1; } .t-sc { min-width:0; padding:16px 18px 17px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-sc b { display:block; font-family:var(--font-serif); font-size:19px; font-weight:600; line-height:1.3; margin:5px 0 7px; } .t-sc b a { color:var(--ink); text-decoration:none; } .t-sc b a:hover { color:var(--gold-dk); } .t-sc b em { display:block; font-style:normal; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; } .t-sc p { margin:0 0 11px; font-size:14px; line-height:1.6; color:var(--ink-2); } .t-sc .t-kw { justify-content:flex-start; } /* The move is the one the reader came for on that spread, so it carries the accent edge and the outcome does not. */ .t-sc-do { border-left:3px solid var(--gold); } /* The facts about the deal — reversals, suit weight, major/minor. One list, because they are all the same kind of statement; the weight line used to hang under it as a loose sentence in a different size, which read as a caption that had come adrift. */ .t-sum-n { list-style:none; margin:0; padding:0; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface); } .t-sum-n li { padding:10px 15px 10px 32px; position:relative; font-size:13.5px; line-height:1.6; color:var(--ink-2); border-bottom:1px solid var(--line-soft); } .t-sum-n li:last-child { border-bottom:0; } .t-sum-n li::before { content:''; position:absolute; left:15px; top:18px; width:5px; height:5px; border-radius:50%; background:var(--gold); } .t-sum .t-v { margin:0; } /* ── face down, and turning over ────────────────────────────── */ /* ALL OF THIS IS BEHIND .t-read-down, which only the script adds. The example the build renders is face up and stays face up: it is the page a crawler indexes and the page somebody with no script reads, and a grid of card backs says nothing to either of them. The flip is a real one — .t-d-in rotates in 3D, the back is at 0deg and the picture at 180deg, both with their reverse sides hidden, so the picture is genuinely behind the back rather than fading through it. */ .t-turn { display:none; } .t-read-down .t-turn { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-bottom:18px; padding:11px 14px; border:1px dashed var(--gold-lt); border-radius:var(--r-in); background:var(--surface); } .t-read-down .t-turn p { margin:0; flex:1 1 240px; font-size:13.5px; line-height:1.5; color:var(--ink-2); } .t-read-down .t-turn b { color:var(--ink); } /* YOUR closing panel waits for the last card. It is the one thing on the page that is genuinely earned by turning them over, and handing it out while eight of ten are still face down would make the turning ornamental. The example's panel is never hidden — it has no cards to turn. */ .t-read-down .t-sum { display:none; } .t-read-down.t-read-all .t-sum { display:block; animation:t-in .45s ease .1s both; } .t-read-down .t-d-fl { perspective:1100px; } .t-read-down .t-d-in { position:relative; transform-style:preserve-3d; } .t-read-down .t-d-b { display:grid; place-items:center; position:absolute; inset:0; z-index:2; width:100%; padding:0; cursor:pointer; -webkit-backface-visibility:hidden; backface-visibility:hidden; border:1px solid rgba(216,178,105,.45); border-radius:7px; box-shadow:0 1px 3px rgba(0,0,0,.18), 0 8px 22px rgba(0,0,0,.14); } .t-read-down .t-d-c { transform:rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden; } /* AN ANIMATION, NOT A TRANSITION, because a card being turned over is not a straight line between two angles — a hand lifts it, turns it and sets it down. The scale at the halfway point is that lift, and it is the only moment the card is edge-on and therefore invisible, so it is also where the eye is least able to tell that the picture was never there before. A transition with a front-loaded easing landed the whole rotation inside 380ms and read as the back being swapped for the face. */ @keyframes t-flip { 0% { transform:rotateY(0) scale(1); } 50% { transform:rotateY(90deg) scale(1.07); } 100% { transform:rotateY(180deg) scale(1); } } .t-read-down .t-d-up .t-d-in { transform:rotateY(180deg); animation:t-flip .66s cubic-bezier(.42,.02,.36,1) both; } /* THE BACK GOES AWAY WHEN THE CARD IS UP, and backface-visibility is not enough to do it: it hides the back from the eye and leaves it in the tab order and in the accessibility tree, so a keyboard reaching a card it had already turned over found a button offering to turn it over again. step-end holds it visible for the whole flip — it is the thing being turned — and drops it at the far end, where it is already facing away. */ @keyframes t-hide { from { visibility:visible; } to { visibility:hidden; } } .t-read-down .t-d-up .t-d-b { animation:t-hide .66s step-end both; } /* THE BACK KEEPS ITS OWN COLOURS IN BOTH THEMES. Every other surface here follows the reader's; a card back does not, because it is a printed object — the same deck in a lit room and a dark one. It is also the only way the gold lattice reads as ink on card rather than as a UI panel. */ .t-d-b { display:none; overflow:hidden; background:radial-gradient(120% 80% at 50% 18%, #3A2A18 0%, #241A0F 62%); } .t-b-l { position:absolute; inset:5px; border-radius:4px; border:1px solid rgba(216,178,105,.30); background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(216,178,105,.15) 12px 13px), repeating-linear-gradient(-45deg, transparent 0 12px, rgba(216,178,105,.15) 12px 13px); } .t-b-r { position:relative; color:#D8B269; opacity:.92; transition:transform .35s ease, opacity .35s ease; } .t-read-down .t-d-b:hover .t-b-r { transform:scale(1.14); opacity:1; } .t-read-down .t-d-b:focus-visible { outline:3px solid var(--gold); outline-offset:3px; } /* Face down there is nothing to read yet, so the name, the meaning and the keywords are not merely invisible — they are out of the document, and a screen reader reaching this card is offered the button and the position, which is exactly what a face-down card tells you. The position note stays: it is the question the card is going to answer. */ .t-read-down .t-d:not(.t-d-up) .t-d-h, .t-read-down .t-d:not(.t-d-up) .t-d-m, .t-read-down .t-d:not(.t-d-up) .t-kw { display:none; } .t-read-down .t-d-up .t-d-h, .t-read-down .t-d-up .t-d-m, .t-read-down .t-d-up .t-kw { animation:t-in .4s ease .34s both; } @keyframes t-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { /* The card still ends up face up — only the turning goes. */ .t-read-down .t-d-up .t-d-in { animation:none; transform:rotateY(180deg); } .t-read-down .t-d-up .t-d-b { animation:none; visibility:hidden; } .t-read-down .t-d-up .t-d-h, .t-read-down .t-d-up .t-d-m, .t-read-down .t-d-up .t-kw { animation:none; } .t-b-r { transition:none; } } /* ── the readings, as tiles ────────────────────────────────── */ /* A GRID ON A DESKTOP AND A SWIPE ON A PHONE, and both are the same six tiles. On a phone, six full-width cards is a 3000px column that buries everything under it; a scroll-snap rail keeps the choice to one screen and makes it feel like a hand of cards you push along. CSS only — the rail is overflow-x with snap points, and no script is involved in any of it. Three across at the top end, because these lead with a picture now and a picture wants width. Two of the six were 501px tall against the others' 352px when the tile carried its layout's positions — one to ten lines of them — which is why those went to the reading's own page and the tiles became the same height by construction. */ .t-sp-g { display:grid; gap:14px; grid-auto-flow:column; grid-auto-columns:minmax(238px, 76%); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; /* The rail bleeds to both edges of the phone rather than stopping at the wrap's padding, so the sixth tile does not look like the last one. */ margin:0 -16px; padding:2px 16px 14px; } .t-sp-g > * { scroll-snap-align:start; } @media (min-width:700px) { .t-sp-g { grid-auto-flow:row; grid-template-columns:1fr 1fr; overflow:visible; margin:0; padding:0; } } @media (min-width:1000px) { .t-sp-g { grid-template-columns:repeat(3, 1fr); } } .t-sp { display:flex; flex-direction:column; min-width:0; padding:0 0 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; text-decoration:none; color:var(--ink); } a.t-sp:hover { border-color:var(--gold); } /* The picture band. A fixed height whatever the spread deals, so six tiles are level without the grid having to stretch them. */ .t-sp-sh { display:grid; place-items:center; height:172px; padding:16px 0 0; background:linear-gradient(180deg, var(--gold-bg) 0%, color-mix(in srgb, var(--gold-bg) 45%, var(--surface)) 100%); border-bottom:1px solid var(--line-soft); } a.t-sp:hover .t-sp-sh { border-bottom-color:var(--gold-lt); } /* The fan. Real cards from that reading's own worked example, overlapped and tipped, the way a hand sits on a table. The middle one comes forward so the three read as a pile rather than as a row that happens to touch. */ .t-fan { display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px; } .t-fan img { display:block; width:84px; height:auto; border-radius:5px; background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.16), 0 6px 16px rgba(0,0,0,.13); transition:transform .3s cubic-bezier(.3,.7,.3,1); } .t-fan-2 img:first-child, .t-fan-3 img:first-child { transform:rotate(-9deg) translateX(14px); } .t-fan-3 img:nth-child(2) { position:relative; z-index:2; } .t-fan-2 img:last-child, .t-fan-3 img:last-child { transform:rotate(9deg) translateX(-14px); } a.t-sp:hover .t-fan-3 img:first-child { transform:rotate(-15deg) translateX(4px); } a.t-sp:hover .t-fan-3 img:last-child { transform:rotate(15deg) translateX(-4px); } a.t-sp:hover .t-fan-2 img:first-child { transform:rotate(-15deg) translateX(4px); } a.t-sp:hover .t-fan-2 img:last-child { transform:rotate(15deg) translateX(-4px); } @media (prefers-reduced-motion:reduce) { .t-fan img { transition:none; } } .t-sp-h { display:block; padding:15px 18px 0; } .t-sp-go { display:flex; align-items:center; gap:6px; margin-top:auto; padding:13px 18px 0; font-size:13.5px; font-weight:650; color:var(--gold-dk); } a.t-sp:hover .t-sp-go { gap:9px; } .t-sp-go svg { transition:transform .2s ease; } /* The shape. One box per card, placed where that card is dealt. Sized in ch so it scales with the type rather than being pinned to a pixel. */ /* min-height, not height: the tracks size the grid now, and the six spreads are one, three and ten cards deep. The floor keeps the six cards level with each other. */ /* min-height went with the stacked layout. It existed to keep six diagrams level with each other across a row; in its own column it only padded a one-card spread out to 150px, which drew one small box adrift in an empty field and read as an image that had failed to load. */ .t-sh { display:grid; gap:7px; justify-content:center; align-content:center; margin-bottom:0; padding:4px 0; } .t-sh .sh-c { display:grid; place-items:center; width:32px; height:45px; border:1px solid var(--gold-lt); border-radius:4px; background:var(--gold-bg); font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--gold-dk); } /* Card two lies ACROSS card one, in the same cell — and at 32px it covered card one completely, so the diagram lost a position. Transparent, with its numeral pushed to the rotated card's top edge (screen right), so both "1" and "2" stay readable and the pair still reads as a cross. */ /* LONGER THAN THE CARD IT COVERS, so its numeral clears the one beneath. At equal size the rotated card's near edge sits 22px from centre and card one's "1" sits at centre — 22px apart with two 8px numerals, which read as "1 2" crammed into one box rather than as two cards. At 62px the "2" lands 28px out, past card one's 16px half-width, so it is plainly outside the card it crosses. The pair still reads as a cross; only the label has moved off the pile. */ /* SAME SIZE AS THE CARD IT COVERS. At 62px it cleared card one's numeral and reached 8px into cards four and six instead — the gap between cells is 7px, so no length both clears the centre and misses the neighbours. The cards stay equal and the NUMERALS move apart instead: the crossed card's to its top-left, the crossing card's to its own top, which after the rotation is screen right. Diagonally opposite corners of the same pile, and the cross still reads as a cross. */ /* DIAGONALLY OPPOSITE, and this is the fourth attempt at it. Both numerals were at their own top-left, which after a 90deg turn puts the crossing card's at screen top-RIGHT — 18px from card one's, with two 8px glyphs between them. Ten pixels of gap, at the top of the same 32px box: it read as one two-digit number rather than as two cards. The crossing card's numeral now sits at its own top-right, which the rotation carries to the bottom-right of the pile. Card one keeps the top-left. Opposite corners of a 32x45 box is 44px apart, which is the most the geometry allows. */ .t-sh .sh-x { transform:rotate(90deg); background:transparent; align-items:start; justify-items:end; padding:3px 4px 0 0; align-self:center; justify-self:center; } .t-sh .sh-under { align-items:start; justify-items:start; padding:3px 0 0 4px; } .t-sp-h b { display:block; font-family:var(--font-serif); font-size:20px; font-weight:600; line-height:1.2; margin:4px 0 6px; text-wrap:balance; } .t-sp-h i { font-style:normal; display:block; font-size:13.5px; line-height:1.55; color:var(--ink-2); } /* ── 03 yes or no ───────────────────────────────────────────── */ .t-v { display:grid; gap:20px; grid-template-columns:1fr; padding:22px; border-radius:var(--r-card); border:1px solid var(--line); } /* The ANSWER column is the narrow one. It was 1fr against a 320px list, which gave a 44px word and one line of gloss 1150px to sit in and left the count crammed into a third of the width. The verdict needs enough room for the word and no more; the three cards are the working. */ @media (min-width:760px) { .t-v { grid-template-columns:minmax(0,300px) minmax(0,1fr); } } /* THE VERDICT'S OWN THREE COLOURS, and not --good/--mid/--bad. --good is #2F7A57 light and #4EA87A dark: the only cool hue anywhere on a page that is otherwise gold, brown and cream, so a green edge read as foreign rather than designed. These are the same three meanings retuned into the warm family — moss for yes, a burnt red for no, and a warm neutral for a tie that is not brand gold, because a gold "No" would mean nothing on a page where gold is every other accent. Local to this component on purpose. --good and friends are right where they are used against tinted backgrounds elsewhere; this is one panel whose chrome sits directly on --surface. Measured, not chosen by eye: light 5.5/7.5/6.8:1 and dark 8.8/5.8/7.0:1 against their surfaces. */ .t-v { --v-yes:#5F6F2A; --v-no:#933722; --v-maybe:#6A5842; --v-line:#756853; } :root[data-theme="dark"] .t-v { --v-yes:#AFBF68; --v-no:#D97A5C; --v-maybe:#B7A084; --v-line:#83745F; } :root[data-theme="light"] .t-v { --v-yes:#5F6F2A; --v-no:#933722; --v-maybe:#6A5842; --v-line:#756853; } /* NO TINTED FIELD. --good-bg is #EAF3ED in light and #1B2620 in dark, and the dark one is a COLD green against a palette whose surfaces are warm brown-black (#1F1810). At the size of this panel that reads as a foreign block with the card list floating on it, rather than as a verdict. So the tone moves to an edge and to the word itself: a 4px bar down the left, the border, and "Yes" set in the tone colour. Same device .m-rl-good uses on the matching page, and it survives greyscale because the word already says which way it went. */ /* Neutral all round, semantic only on the left edge — a full saturated border was the loudest thing in the section. */ .t-v { background:var(--surface); border-color:var(--v-line); border-left-width:4px; } .t-v-t-good { border-left-color:var(--v-yes); } .t-v-t-bad { border-left-color:var(--v-no); } .t-v-t-mid { border-left-color:var(--v-maybe); } .t-v-a b { display:block; font-family:var(--font-serif); font-size:44px; font-weight:600; line-height:1.05; margin:6px 0 8px; } .t-v-t-good .t-v-a b { color:var(--v-yes); } .t-v-t-bad .t-v-a b { color:var(--v-no); } .t-v-t-mid .t-v-a b { color:var(--v-maybe); } .t-v-a i { font-style:normal; font-size:14.5px; line-height:1.6; color:var(--ink-2); } /* --surface-2, not --surface. The list sat on --surface inside a tinted panel; now the panel is that same surface, so on it the list vanished. Set here rather than in a second .t-v-l rule above — same selector, same specificity, and the later one wins, which is the fault dupe_rule.py exists to catch and which I had just written in by hand. */ .t-v-l { list-style:none; margin:0; padding:0; display:grid; gap:0; align-content:start; border:1px solid var(--line); border-radius:var(--r-in); background:var(--surface-2); } .t-v-l li { display:flex; align-items:baseline; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line-soft); } .t-v-l li:last-child { border-bottom:0; } .t-v-l span { flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--ink); } .t-v-l b { flex:none; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .t-v-good { color:var(--v-yes); } .t-v-bad { color:var(--v-no); } .t-v-mid { color:var(--v-maybe); } /* ── 04 the suits ───────────────────────────────────────────── */ .t-su-g { display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:620px) { .t-su-g { grid-template-columns:1fr 1fr; } } @media (min-width:980px) { .t-su-g { grid-template-columns:repeat(4,1fr); } } .t-su { min-width:0; padding:20px; text-align:center; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-su-e { display:grid; place-items:center; color:var(--gold-dk); margin-bottom:10px; } .t-su b { display:block; font-family:var(--font-serif); font-size:21px; font-weight:600; } .t-su-el { font-style:normal; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-dk); } .t-su p { margin:10px 0 12px; font-size:13.5px; line-height:1.6; color:var(--ink-2); } .t-su-s { display:block; font-size:11.5px; color:var(--ink-3); padding-top:11px; border-top:1px solid var(--line-soft); } /* ── 05 the library ─────────────────────────────────────────── */ .t-lib-t { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; } .t-lib-t .c-sel { display:flex; align-items:baseline; gap:8px; padding:9px 15px; min-height:44px; border:1px solid var(--line); border-radius:999px; background:var(--surface); cursor:pointer; } .t-lib-t b { font-size:13.5px; font-weight:650; color:var(--ink); } .t-lib-t i { font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); } .t-lib-p { display:none; } .t-lib-g { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); } /* one reading type's own page */ /* The layout, under the hero on a spread page: the shape on the left and what each position asks on the right. The label spans both, because it names the pair and not the diagram. */ .t-spx { display:grid; gap:6px 24px; grid-template-columns:1fr; align-items:start; } @media (min-width:760px) { .t-spx { grid-template-columns:minmax(0,200px) minmax(0,1fr); } } .t-spx .t-sh { margin:0; padding:0; justify-content:start; } .t-spx-l { list-style:none; margin:0; padding:0; display:grid; gap:11px; } .t-spx-l li { display:grid; grid-template-columns:22px 1fr; gap:2px 12px; align-items:baseline; padding-bottom:11px; border-bottom:1px solid var(--line-soft); } .t-spx-l li:last-child { border-bottom:0; padding-bottom:0; } .t-spx-l b { grid-row:span 2; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--gold-dk); } .t-spx-l span { font-size:15px; font-weight:650; color:var(--ink); } .t-spx-l i { font-style:normal; font-size:13px; line-height:1.5; color:var(--ink-3); } /* ── 06 what this is ────────────────────────────────────────── */ .t-hon { display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:720px) { .t-hon { grid-template-columns:1fr 1fr; } } /* The reading's own questions. The shell's .c-acc does the accordion; this only stacks them and gives the group an edge, so it reads as one block rather than three loose
. */ .t-faq { display:grid; gap:8px; } /* The chevron goes at the END and points forward, like every other cross-link on the site. Leading it and rotating it made a Back button out of a link that goes somewhere new. */ .t-faq-m { margin-top:18px; } /* Three blocks rather than an even number, so at two columns the third would sit alone beside a hole. Three across once there is room for it. */ @media (min-width:960px) { .t-abt { grid-template-columns:repeat(3,1fr); } } .t-hon > div { min-width:0; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-hon p { margin:7px 0 0; font-size:13.5px; line-height:1.65; color:var(--ink-2); } /* ── the hero ───────────────────────────────────────────────── */ /* ── the hub's top: the picker IS the hero ──────────────────── */ /* Centred and full width, which no other tool page here is. Every one of those asks for a birth time, so it is a column of words beside a form; this one asks for nothing and has a single job — six doors, pick one. Putting that in a 500px aside while the other half of the screen argues for it would be the shared layout solving a problem this page does not have. */ /* The head itself is the shell's .s-head-c now — the astrologer pages wanted the same centred top, and two callers is one too many for a page-local copy of it. What is left here is the strip of counts, which is this page's own and not something a shared head should know about. */ .t-top { padding-top:30px; } .t-top .s-head { margin-bottom:26px; } .t-top-f { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px; margin:18px 0 0; padding:0; } .t-top-f li { display:flex; align-items:baseline; gap:7px; } .t-top-f b { font-family:var(--font-mono); font-size:16px; font-weight:700; color:var(--gold-dk); } .t-top-f span { font-size:13px; color:var(--ink-3); } .t-pick-l { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:12px; } .t-pick-l i { font-style:normal; font-size:13px; color:var(--ink-3); } .t-top-k { margin-top:22px; } /* The form on a reading page, under the centred headline rather than pinned to its right: the table and the question side by side, so the box you type in stays about 560px however wide the panel. */ .t-form-w { max-width:1040px; margin:0 auto; } /* The example on the hub is a demonstration, not your reading, so it ends with the door rather than with a form. */ .t-egcta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:20px; } .t-egcta span { font-size:13.5px; color:var(--ink-3); } /* ── the form: the cards on the table, then the question ─────── */ /* ONE WIDE PANEL IN TWO HALVES. A 620px form centred under the title left half the screen empty either side of a box of fields. The left half is the table: the spread's cards face down, in the card back's own colours in both themes, as the dealt cards below keep them. The right half is the question. On a phone the table is a band above the question. */ .t-tbl { display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 18px 44px rgba(90,60,15,.12); } .t-tbl-top { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; padding:24px 16px 22px; color:#EBDDBE; background: radial-gradient(90% 70% at 50% 45%, rgba(216,178,105,.16) 0%, transparent 70%), radial-gradient(140% 100% at 50% 0%, #33261A 0%, #1B140C 70%); } .t-tb-h { margin:0; display:grid; justify-items:center; gap:4px; text-align:center; } .t-tb-h span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#C9AE78; } .t-tb-h b { font-family:var(--font-serif); font-size:22px; font-weight:500; line-height:1.2; color:#F6EBD3; } .t-tb { list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:12px; max-width:100%; } .t-tb li { display:grid; justify-items:center; align-content:start; gap:10px; width:74px; min-width:0; } .t-tb i { font-style:normal; font-size:12.5px; font-weight:600; line-height:1.3; text-align:center; color:#E4D2A8; } /* The dealt card's back, smaller: its colours, lattice and rosette. */ .t-mb { position:relative; display:grid; place-items:center; width:52px; aspect-ratio:7/12; border-radius:6px; overflow:hidden; background:radial-gradient(120% 80% at 50% 18%, #3A2A18 0%, #241A0F 62%); border:1px solid rgba(216,178,105,.55); box-shadow:0 2px 4px rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.35); } .t-mb .t-b-l { inset:4px; border-radius:3px; } .t-mb .t-b-r { width:46%; height:auto; } .t-tb li:nth-child(odd) .t-mb { transform:rotate(-2deg); } .t-tb li:nth-child(even) .t-mb { transform:rotate(2deg); } .t-fan { display:flex; justify-content:center; padding:8px 0 0; } .t-fan-c { margin-left:-30px; transform-origin:50% 135%; transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * 5deg)); } .t-fan-c:first-child { margin-left:0; } .t-fan .t-mb { width:48px; } .t-tb-cap { margin:0; text-align:center; font-size:12.5px; color:#C9AE78; } .t-tbl-r { display:flex; flex-direction:column; min-width:0; } .t-tbl-b { flex:1; padding:22px 22px 18px; } .t-tbl .c-ta textarea { font-family:var(--font-serif); font-size:19px; line-height:1.45; field-sizing:content; min-height:calc(2 * 1.45em + 26px); } .t-tbl-f { padding:12px 22px 14px; border-top:1px solid var(--line); background:var(--surface-2); } body .t-tbl-f .c-eg-line { justify-content:flex-start; gap:4px 10px; margin:0; font-family:var(--font-sans); font-size:13px; letter-spacing:0; text-transform:none; } .t-tbl-f .c-eg-line b { font-weight:600; } .t-tbl-f .c-eg-line i { flex-basis:auto; text-align:left; letter-spacing:0; } .t-tbl-f .c-eg { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; } @media (min-width:880px) { .t-tbl { grid-template-columns:minmax(0,5fr) minmax(0,6fr); } .t-tbl-top { gap:26px; padding:36px 24px; } .t-tb-h b { font-size:26px; } .t-tb { gap:18px; } .t-tb li { width:96px; } .t-tb-3 .t-mb { width:88px; } .t-tb-1 .t-mb { width:110px; } .t-tb-5 { gap:10px; flex-wrap:wrap; } .t-tb-5 li { width:74px; } .t-tb-5 .t-mb { width:62px; } .t-fan .t-mb { width:62px; } .t-fan-c { margin-left:-40px; } .t-tbl-b { padding:28px 30px 22px; } .t-tbl-f { padding:14px 30px 16px; } } @media (max-width:520px) { .t-tbl-b, .t-tbl-f { padding-left:16px; padding-right:16px; } /* Five to a row on a 360px phone: the slots share the width rather than each claiming 62px, which pushed the panel past the screen. */ .t-tb { gap:6px; width:100%; } .t-tb li { flex:0 1 62px; width:auto; min-width:0; } .t-tb i { font-size:12px; } .t-mb { width:min(46px, 100%); } .t-tbl .c-ta textarea { min-height:calc(3 * 1.45em + 26px); } .t-fan-c { margin-left:-30px; } .t-fan .t-mb { width:42px; } } .t-pane { display:none; } .t-pane .c-field { margin-bottom:12px; } .t-lens { margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--ink-2); } /* A face-down card's face is not a tab stop: its link named the card and opened its page before it was turned (review, 28 Sep 2026). */ .t-read-down .t-d:not(.t-d-up) .t-d-c { visibility:hidden; } .t-share { display:flex; align-items:center; width:fit-content; min-height:44px; margin:8px 0 0; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font:inherit; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; } .t-share:hover { border-color:var(--gold); } .t-tog { display:inline-flex; align-items:center; min-height:44px; margin-top:6px; font-weight:650; color:var(--gold-dk); text-decoration:none; } .t-tog:hover { text-decoration:underline; } .t-bk { display:flex; align-items:center; justify-content:center; min-height:44px; margin-top:4px; text-align:center; font-size:13px; font-weight:650; color:var(--gold-dk); cursor:pointer; } .t-turn .c-btn { min-height:44px; } .t-bk:hover { text-decoration:underline; } .t-done-p { margin:2px 0 14px; font-size:14px; line-height:1.6; color:var(--ink-2); } /* How to ask, straight under the box, where the eye goes after reading the question already in it. */ .t-ask-h { margin:-4px 0 14px; font-size:13.5px; line-height:1.6; color:var(--ink-2); } .t-ask { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:-2px 0 15px; } .t-ask .h-f-l { flex:0 0 100%; margin-bottom:1px; } .t-ask-i { font-size:12.5px; line-height:1.35; color:var(--ink-2); padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); } /* Only once the script has made them do something. Until then they are three sentences and must not look like three dead buttons. */ /* 44px once they are buttons: at 33 they were the smallest targets on the page (review, 28 Sep 2026). */ .t-ask-i[role="button"] { cursor:pointer; display:inline-flex; align-items:center; min-height:44px; box-sizing:border-box; } .t-ask-i[role="button"]:hover { border-color:var(--gold); background:var(--gold-bg); color:var(--ink); } .t-ask-i:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .t-err { color:var(--bad-dk); } /* ── one card's own page ────────────────────────────────────── */ .t-cp { display:grid; gap:24px; grid-template-columns:1fr; align-items:start; } @media (min-width:820px) { .t-cp { grid-template-columns:minmax(0,230px) minmax(0,1fr); } } .t-cp-m { min-width:0; } .t-cp-s { display:grid; gap:14px; } .t-cp-b { padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-cp-b p { margin:7px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink-2); } .t-cp-two { display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:620px) { .t-cp-two { grid-template-columns:1fr 1fr; } } .t-cp-kv { display:grid; gap:0; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft); } .t-cp-kv > div { display:flex; align-items:baseline; gap:14px; padding:7px 0; border-bottom:1px solid var(--line-soft); } .t-cp-kv > div:last-child { border-bottom:0; } .t-cp-kv span { flex:none; width:112px; } .t-cp-kv b { font-size:13.5px; font-weight:650; color:var(--ink); } .t-near { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(138px, 1fr)); } .t-ars { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:900px) { .t-ars { grid-template-columns:repeat(2,minmax(0,1fr)); } } .t-ar { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-ar p { margin:8px 0 0; font-size:14.5px; line-height:1.7; color:var(--ink-2); } .t-ar-o { display:inline-block; margin-right:8px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--good); } .t-ar-r { color:var(--bad); } .t-ar-n { font-size:13px !important; color:var(--ink-3) !important; font-style:italic; } .t-as { display:grid; gap:12px; grid-template-columns:1fr; margin-top:12px; } @media (min-width:900px) { .t-as { grid-template-columns:repeat(3,minmax(0,1fr)); } } .t-as > div { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-as p { margin:6px 0 0; font-size:14px; line-height:1.65; color:var(--ink-2); } .t-as a { color:var(--gold-dk); font-weight:650; } .t-co { margin-top:12px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .t-co ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; } .t-co li { display:grid; gap:2px; font-size:14px; line-height:1.6; color:var(--ink-2); } .t-co a { font-weight:700; color:var(--gold-dk); } /* ── the small offer (strip) ───────────────────────────── */ /* Its own section adds no padding: between two padded sections it stacked to 88px above and 106 below (Rohit, 27 Sep 2026: "too much space"). */ section.l-sec.of-strip-sec { padding-top:0; padding-bottom:0; } /* ...except above a tinted band, which would start flush under the strip. */ section.l-sec.of-strip-sec:has(+ .l-alt) { padding-bottom:38px; } .of-strip { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center; padding:14px 16px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background:var(--surface); } @media (min-width:760px) { .of-strip { grid-template-columns:auto 1fr auto; } } .of-strip-who { display:block; line-height:0; } .of-strip .of-ph { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-lt); } .of-strip-t { display:flex; flex-direction:column; gap:2px; min-width:0; } .of-strip-t b { font-size:16px; color:var(--ink); } .of-strip-t span { font-size:14.5px; line-height:1.5; color:var(--ink-2); } .of-strip-b { display:flex; gap:8px; flex-wrap:wrap; grid-column:1 / -1; } @media (min-width:760px) { .of-strip-b { grid-column:auto; } } .of-strip-b .c-btn { gap:7px; flex:1 1 150px; justify-content:center; white-space:nowrap; } @media (min-width:760px) { .of-strip-b .c-btn { flex:0 0 auto; } } .of-strip-b .c-as-rate { font-weight:600; opacity:.85; } /* ── the ask panel ─────────────────────────────────────── */ .of-ask { display:grid; gap:18px; padding:22px; border-radius:var(--r-card); border:1px solid var(--gold-lt); background:radial-gradient(120% 140% at 100% 0%, var(--gold-bg) 0%, transparent 62%), var(--surface); } @media (min-width:860px) { .of-ask { grid-template-columns:230px minmax(0,1fr); gap:30px; padding:28px 32px; } } .of-ask > * { min-width:0; } .of-who { display:flex; gap:13px; align-items:center; text-decoration:none; color:var(--ink); align-self:start; } @media (min-width:860px) { .of-who { flex-direction:column; align-items:flex-start; } } .of-who .of-ph { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--gold-lt); } .of-who-t { display:flex; flex-direction:column; gap:2px; min-width:0; } .of-who-t b { font-size:16px; } .of-who-t i { font-style:normal; font-size:13px; color:var(--ink-2); } .of-who-t em { font-style:normal; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .of-t { font-family:var(--font-serif); font-size:clamp(20px,3.2vw,25px); line-height:1.2; letter-spacing:-.015em; font-weight:600; margin:0 0 8px; text-wrap:balance; } .of-d { margin:0 0 16px; color:var(--ink-2); font-size:var(--text-md); line-height:1.6; max-width:62ch; } .of-lbl { margin:0 0 9px; font-size:12.5px; font-weight:650; color:var(--ink-3); } .of-qs { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; } .of-q { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-decoration:none; font-size:14.5px; line-height:1.45; } .of-q svg { flex:none; margin-top:2px; color:var(--gold-dk); } .of-q:hover { border-color:var(--gold); background:var(--gold-bg); } .of-buy { display:flex; flex-wrap:wrap; gap:10px; } .of-buy .c-btn { flex:1 1 170px; justify-content:center; gap:8px; } .of-buy .c-as-rate { font-weight:700; } .of-buy .c-as-rate::before { content:'\00b7'; margin-right:7px; opacity:.6; } .of-gift { display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.5; } .of-gift[hidden] { display:none; } .of-gift svg { flex:none; margin-top:2px; color:var(--gold-dk); } /* ── reports ───────────────────────────────────────────── */ .of-rp { display:grid; gap:12px; } @media (min-width:900px) { .of-rp { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ── the phone bar ─────────────────────────────────────── */ .of-stk, .of-stk-sp { display:none; } @media (max-width:819px) { .of-stk { display:block; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:9px 12px calc(9px + env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.08); transform:translateY(110%); transition:transform .25s ease; } .of-stk.on { transform:none; } .of-stk-sp { display:block; height:76px; } } @media (prefers-reduced-motion:reduce) { .of-stk { transition:none; } } .of-stk-a { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); } .of-stk-a .of-ph { width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none; } .of-stk-t { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.3; } .of-stk-t b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .of-stk-t i { font-style:normal; font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .of-stk-a .c-btn { flex:none; } /* ── THE ROSTER CARDS IN A ROW (was the dashboard's own) ── */ .d-ags { display:grid; gap:15px; align-items:start; } /* The tags are plain labels here, so a tap on them opens the astrologer like the rest of the card (the shared card lifts them above its link). */ .d-ags .c-as:has(.c-as-n) .c-as-tags { position:static; z-index:auto; pointer-events:none; } .d-cell { display:flex; } .d-cell > * { flex:1; } /* SYMMETRIC CARDS. Side by side, every card is the same six rows of the grid they sit in (subgrid, twice: the cell, then the card): name, speciality, rating, tags, languages, buttons. A name that wraps or a longer speciality makes that row taller in all three, so the stars, the tags, the languages and both price buttons line up across the row and the cards end at one height. The card's own head wrappers step aside (display:contents) so their parts can sit on those rows. */ @media (min-width:900px) { .d-ags { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:0; align-items:stretch; } .d-ags > .d-cell { display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; margin-bottom:15px; } .d-ags .c-as { grid-row:span 6; display:grid; grid-template-rows:subgrid; row-gap:0; grid-template-columns:64px minmax(0,1fr); column-gap:13px; } .d-ags .c-as-h, .d-ags .c-as-id { display:contents; } .d-ags .c-as-h > :first-child { grid-column:1; grid-row:1 / span 3; align-self:start; } .d-ags .c-as-id > b { grid-column:2; grid-row:1; align-self:end; } .d-ags .c-as-sp { grid-column:2; grid-row:2; align-self:start; } .d-ags .c-as-r { grid-column:2; grid-row:3; align-self:start; flex-wrap:wrap; } .d-ags .c-as-tags { grid-column:1 / -1; grid-row:4; align-self:start; } .d-ags .c-as-lang { grid-column:1 / -1; grid-row:5; align-self:start; } .d-ags .c-as-buy { grid-column:1 / -1; grid-row:6; align-self:end; } } /* ── ASK AN ASTROLOGER, under a page's reading ── */ .c-askb { margin-top:22px; } .c-askb-h { margin:0 0 4px; font-family:var(--font-sans); font-size:16px; font-weight:700; color:var(--ink); } .c-askb-why { margin:0 0 12px; padding:8px 12px; border-radius:10px; background:var(--gold-bg); font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:760px; } .c-askb-why:empty { display:none; } .c-askb-all { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:600; color:var(--gold-dk); } :root[data-lang="hi"] .c-askb-why { font-size:15px; } /* ON A PHONE, A ROW YOU SWIPE (Rohit, 27 Sep 2026: "optimize for phone"). Three roster cards stacked were ~1,300px under every page that offers them. One whole card and the edge of the next says there are more; the row bleeds to the screen edge (.d-main's 16px), snaps card by card, and fades at its right edge — the report banner's way of saying it goes on. */ @media (max-width:640px) { .c-askb .d-ags { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 16px; margin:0 -16px; padding:0 16px 8px; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .c-askb .d-ags::-webkit-scrollbar { display:none; } .c-askb .d-ags > .d-cell { scroll-snap-align:start; margin:0; } } .rp-pub .d-main { margin-inline:auto; } /* ── the redesigned report pages, prefix rv- ─────────────────────── */ .rv { --rv-hi: 'Kohinoor Devanagari','Noto Serif Devanagari','Noto Sans Devanagari', 'Mangal','Nirmala UI',var(--font-serif); } .rv [lang="hi"] { font-family:var(--rv-hi); } /* THE SITE'S WIDTH, not a narrower one of its own (Rohit, 28 Sep 2026: "its content width is lower compared to other pages, the content seems centered"). It was 1120px against every other public page's --wrap (1360px, lib/common .l-wrap), so at 1440 the shelf sat 240px narrower, floating in the middle. */ .rv-wrap { max-width:var(--wrap); margin-inline:auto; padding-inline:16px; } .rv-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; font-weight:650; font-size:14.5px; text-decoration:none; background:var(--gold-solid); color:var(--gold-solid-text); border:1px solid var(--gold-solid); } .rv-btn:hover { filter:brightness(1.06); } .rv-btn:focus-visible, .rv a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; } .rv-btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); } /* ── the offer banner ── ITS OWN PALETTE, ONE PER THEME. It was one look in both, the deep brown of the report covers, and on the cream light page that was a near-black slab from another app. Light is now the warm saffron-cream of a sweet-shop offer board, with the dark covers standing out on it; dark keeps the brown, with a gold edge so it does not melt into the page. The tokens are the banner's own (--bn-*) because the discount seal and the covers need the same warmth in both. */ .rv-ban { --bn-bg:linear-gradient(115deg, #FFF4DE 0%, #FDE6B8 55%, #F8D08A 100%); --bn-line:rgba(138,90,11,.07); --bn-ink:#2B170A; --bn-accent:#7A4E08; --bn-mute:#6E5638; --bn-btn:#5A3313; --bn-btn-ink:#FFF3DF; --bn-btn-hi:#6E4119; --bn-dot:rgba(90,51,19,.28); --bn-arrow:rgba(255,255,255,.55); --bn-edge:rgba(138,90,11,.22); --bn-shadow:0 10px 28px rgba(138,90,11,.16); --bn-fade:#FBDCA0; } :root[data-theme="dark"] .rv-ban { --bn-bg:radial-gradient(120% 140% at 85% 20%, #5A3313 0%, #2B170A 55%, #1B0F07 100%); --bn-line:rgba(232,201,138,.05); --bn-ink:#FFF3DF; --bn-accent:#E8C98A; --bn-mute:#CDB693; --bn-btn:#E8C98A; --bn-btn-ink:#2B170A; --bn-btn-hi:#F1D9A6; --bn-dot:rgba(255,243,223,.35); --bn-arrow:rgba(0,0,0,.2); --bn-edge:rgba(232,201,138,.3); --bn-shadow:0 0 0 1px rgba(232,201,138,.08), 0 14px 34px rgba(0,0,0,.45); --bn-fade:#3A200C; } .rv-ban-w { background:var(--surface-2); padding:14px 0 0; } .rv-ban { position:relative; border-radius:16px; overflow:hidden; background:var(--bn-bg); color:var(--bn-ink); border:1px solid var(--bn-edge); box-shadow:var(--bn-shadow); } .rv-ban::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg, var(--bn-line) 0 1px, transparent 1px 22px), repeating-linear-gradient(-45deg, var(--bn-line) 0 1px, transparent 1px 22px); } /* The kundli line drawing gave way to each slide's photo. */ .rv-ban-mark { display:none; } .rv-ban-track { position:relative; z-index:1; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; } .rv-ban-track::-webkit-scrollbar { display:none; } .rv-ban-track:focus-visible { outline:2px solid var(--bn-accent); outline-offset:-4px; } /* min-width:0 and border-box: with the photo's side padding a slide's min-content ran wider than the track, every slide after the first started early, and the last one's photo showed down its left edge. */ .rv-ban-s { position:relative; flex:0 0 100%; min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden; scroll-snap-align:start; display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:center; padding:128px 18px 46px; } @media (min-width:760px) { .rv-ban-s { grid-template-columns:150px minmax(0,1fr); gap:30px; padding:26px 42% 50px 40px; } } .rv-ban-s > :not(.rv-ban-ph) { position:relative; z-index:1; } /* THE PHOTO. On a phone a band across the top that fades down into the banner; wider, the right side of the slide, fading left into it. The text column stops where the photo starts (padding-right above), so no word is ever set on a picture. --bn-fade is the banner's colour at that edge, per theme. */ .rv-ban-ph { position:absolute; left:0; right:0; top:0; height:150px; z-index:0; pointer-events:none; } .rv-ban-ph img { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); } .rv-ban-ph::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, var(--bn-fade) 100%); } @media (min-width:760px) { .rv-ban-ph { left:auto; top:0; bottom:0; height:auto; width:46%; } .rv-ban-ph::after { background:linear-gradient(90deg, var(--bn-fade) 0%, transparent 38%); } } .rv-ban-art { position:relative; } .rv-ban-art img { display:block; width:100%; height:auto; border-radius:8px; transform:rotate(-3deg); box-shadow:0 12px 26px rgba(0,0,0,.45); border:1px solid rgba(232,201,138,.35); } /* THE SEAL — the discount as a stamped roundel, the shape a sale sticker takes on any Indian shop shelf. Empty (and so hidden) until the catalogue confirms an offer for this report. */ /* Bottom corner of the cover, clear of the book's own title and of the headline beside it. */ .rv-ban-seal { position:absolute; left:-10px; bottom:-10px; } @media (min-width:760px) { .rv-ban-seal { left:auto; right:-18px; bottom:-8px; } } .rv-ban-seal .c-rp-off { display:grid; place-items:center; width:54px; height:54px; margin:0; border-radius:50%; background:#C0392B; color:#FFF3DF; border:2px dashed rgba(255,243,223,.7); box-shadow:0 0 0 3px #C0392B; font-family:var(--font-sans); font-style:normal; font-size:11.5px; font-weight:800; line-height:1.05; text-align:center; letter-spacing:0; text-transform:uppercase; padding:4px; transform:rotate(8deg); flex-basis:auto; } .rv-ban-seal .c-rp-off[hidden] { display:none; } @media (min-width:760px) { .rv-ban-seal .c-rp-off { width:78px; height:78px; font-size:16px; } } .rv-ban-k { margin:0; font-size:12.5px; letter-spacing:.02em; color:var(--bn-accent); } .rv-ban-k > span:first-of-type:not(.rv-ban-tag) { text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); font-size:11px; } .rv-ban-tag:not([hidden]) { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:99px; background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:700; font-size:11px; } .rv-ban-tag i { font-style:normal; } .rv-ban-t { margin:6px 0 0; font-family:var(--font-serif); font-size:clamp(19px,3.4vw,30px); line-height:1.22; color:var(--bn-ink); text-wrap:balance; max-width:26ch; } .rv-ban-t[lang="hi"] { font-family:var(--rv-hi); font-weight:600; line-height:1.4; } .rv-ban-pay { margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } .rv .rv-ban-pr { display:flex; align-items:baseline; gap:8px; width:auto; margin:0; justify-content:flex-start; font-family:var(--font-sans); } .rv .rv-ban-pr b { flex-basis:auto; font-size:26px; font-weight:800; color:var(--bn-ink); font-variant-numeric:tabular-nums; } .rv .rv-ban-pr s { font-size:14px; color:var(--bn-mute); } .rv-ban-buy { display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:10px; background:var(--bn-btn); color:var(--bn-btn-ink); font-weight:750; font-size:14.5px; text-decoration:none; border:0; } .rv-ban-buy:hover { background:var(--bn-btn-hi); } .rv-ban-more { display:inline-flex; align-items:center; min-height:44px; color:var(--bn-accent); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; } .rv-ban a:focus-visible, .rv-ban button:focus-visible { outline:2px solid var(--bn-ink); outline-offset:2px; } /* z-index:2, above the track's 1: the track covers the whole banner, so without it every arrow and dot click landed on a slide instead. */ .rv-ban-nav { position:absolute; left:0; right:0; bottom:10px; z-index:2; display:flex; align-items:center; justify-content:center; gap:12px; pointer-events:none; } .rv-ban-nav > * { pointer-events:auto; } .rv-ban-dots { display:flex; gap:4px; } .rv-ban-dot { width:24px; height:24px; border:0; background:none; padding:0; cursor:pointer; display:grid; place-items:center; } .rv-ban-dot::before { content:""; width:8px; height:8px; border-radius:99px; background:var(--bn-dot); transition:width .25s; } .rv-ban-dot[aria-current="true"]::before { width:22px; background:var(--bn-accent); } .rv-ban-arrow { width:32px; height:32px; border-radius:50%; border:1px solid var(--bn-edge); background:var(--bn-arrow); color:var(--bn-ink); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; } @media (prefers-reduced-motion:reduce) { .rv-ban-dot::before { transition:none; } } @media (pointer:coarse) { .rv-ban-arrow { width:44px; height:44px; } .rv-ban-dot { width:44px; height:44px; } .rv-ban-dots { gap:0; } } .rv-ban-w + .rv-head { padding-top:22px; } /* head */ .rv-head { position:relative; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--line); padding:34px 0 26px; } .rv-head .rv-wrap { position:relative; } .rv-mark { fill:none; stroke:var(--gold); stroke-width:1.2; vector-effect:non-scaling-stroke; } /* The header's kundli: a real chart, not an outline (_head_chart), in the signed-in pages' dress — gold frame and lines, the lagna's box shaded, the grahas in the page's face, big enough to read. Its own column beside the heading, the lede and the four facts (it sat on top of the fourth), and not at all on a phone. */ @media (min-width:760px) { .rv-head .rv-wrap:has(> .rv-hchart) { display:grid; grid-template-columns:minmax(0,1fr) 240px; column-gap:36px; align-items:center; } .rv-head .rv-wrap:has(> .rv-hchart) > :not(.rv-hchart) { grid-column:1; } .rv-hchart { grid-column:2; grid-row:1 / span 4; } } .rv-hchart .c-nc { max-width:none; border-radius:12px; overflow:hidden; box-shadow:0 0 0 1.5px var(--gold); background:var(--surface); } .rv-hchart .c-nc-bg { fill:var(--gold-lt); } .rv-hchart .c-nc-h1 { fill:var(--gold-bg); } .rv-hchart .c-nc-p { font-family:var(--font-sans); font-size:18px; font-weight:700; } .rv-hchart .c-nc-s { font-size:13.5px; font-weight:600; } .rv-hchart .c-nc-rx { font-size:10px; } @media (max-width:759px) { .rv-hchart { display:none; } } /* ONE LINE, NOT TWO: the page's 20ch cap broke "Reports read from your kundli" after "read". */ .rv[lang] .rv-head .rv-h1 { max-width:none; } .rv-sec-h b[lang="en"], .rv-shelf-h h2 b[lang="en"] { font-family:var(--font-serif); font-weight:600; } .rv-pick-a > b[lang="en"] { font-family:var(--font-serif); font-size:16px; } .rv-facts b[lang="en"] { font-family:var(--font-sans); font-size:14px; } .rv-moment span[lang="en"] { color:var(--gold-dk); } /* The Hindi page: the Hindi name is the title, the English one under it. */ .rv[lang="hi"] .rv-btn { font-family:var(--rv-hi); font-weight:600; } .rv-t-hi { font-family:var(--rv-hi); font-weight:600; font-size:19px; color:var(--ink); } .rv-c-en { font-size:12.5px; color:var(--ink-3); margin-top:1px; } .rv-c-en:empty, .rv-dh1 span:empty { display:none; } .rp-pv-gap { display:none; } .rv[lang="hi"] .rv-h1 { font-family:var(--rv-hi); font-weight:600; line-height:1.3; max-width:22ch; } .rv[lang="hi"] .rv-c-d, .rv[lang="hi"] .rv-lede, .rv[lang="hi"] .rv-tell li, .rv[lang="hi"] .rv-steps span, .rv[lang="hi"] .rv-pandit p, .rv[lang="hi"] .rv-who p { line-height:1.7; } .rv[lang="hi"] .rv-steps b, .rv[lang="hi"] .rv-pandit b, .rv[lang="hi"] .rv-who b { font-family:var(--rv-hi); font-weight:600; } .rv[lang="hi"] .rv-eyebrow { font-size:16px; } .rv[lang="hi"] .rv-ask { font-family:var(--rv-hi); font-size:14px; letter-spacing:0; text-transform:none; color:var(--ink-2); } .rv-eyebrow { margin:0 0 4px; font-size:17px; color:var(--gold-dk); font-weight:600; } .rv-h1 { margin:0; font-family:var(--font-serif); font-size:clamp(27px,5vw,40px); line-height:1.12; color:var(--ink); text-wrap:balance; max-width:20ch; } .rv-lede { margin:10px 0 0; max-width:60ch; font-size:15.5px; line-height:1.6; color:var(--ink-2); } .rv-facts { list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); } .rv-facts li { display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--surface); border:1px solid var(--line); border-radius:10px; } .rv-facts b[lang="hi"] { font-size:14.5px; color:var(--ink); font-weight:600; } .rv-facts span { font-size:12.5px; line-height:1.4; color:var(--ink-3); } .rv-facts span b { color:var(--ink-2); font-weight:650; } @media (min-width:760px) { .rv-facts { grid-template-columns:repeat(4,minmax(0,1fr)); } } /* moment picker */ .rv-ask { margin:26px 0 10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .rv-pick { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:640px) { .rv-pick { grid-template-columns:repeat(3,minmax(0,1fr)); } } .rv-pick-a { display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--ink); } .rv-pick-a:hover { border-color:var(--gold); } .rv-pick-a > .rv-pick-i { grid-row:1/3; grid-column:1; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--gold-bg); color:var(--gold-dk); } .rv-pick-a > b { grid-row:1; grid-column:2; font-size:16.5px; font-weight:600; line-height:1.3; } .rv-pick-a > span:not(.rv-pick-i) { grid-row:2; grid-column:2; font-size:12.5px; color:var(--ink-3); } .rv-pick-a > i { grid-row:1/3; grid-column:3; font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); } /* shelves */ .rv-shelf { margin-top:38px; scroll-margin-top:84px; } .rv-shelf-h { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line); } .rv-shelf-i { grid-row:1/3; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--gold-lt); color:var(--gold-dk); } .rv-shelf-h h2 { margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } .rv-shelf-h h2 b { font-size:clamp(21px,3.4vw,26px); font-weight:600; color:var(--ink); } .rv-shelf-h h2 span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); } .rv-shelf-h p { grid-column:2; margin:3px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-3); max-width:70ch; } .rv-grid { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:900px) { .rv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* the card */ .rv-c { position:relative; display:grid; grid-template-columns:78px 1fr; gap:14px; padding:14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); } .rv-c:hover { border-color:var(--gold-lt); } @media (min-width:520px) { .rv-c { grid-template-columns:96px 1fr; } } /* THE NARROWEST PHONES: a smaller cover and a three-line description, so a card stays under a third of a 320px phone's screen. */ @media (max-width:360px) { .rv-c { grid-template-columns:62px 1fr; gap:11px; padding:12px; } .rv-c-d { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .rv-c-pay { padding-top:10px; gap:8px; } .rv .rv-pr b { font-size:19px; } } .rv-c-cov img, .rv-c-img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 2px 8px rgba(23,18,12,.18); } .rv-c-b { min-width:0; display:flex; flex-direction:column; } .rv-c-t { margin:0; font-family:var(--font-serif); font-size:18px; line-height:1.25; } .rv-c-a { color:var(--ink); text-decoration:none; } .rv-c-a::after { content:""; position:absolute; inset:0; border-radius:14px; } .rv-c-d { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-2); } .rv-c-m { margin:6px 0 0; display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--ink-3); } .rv-c-m span { white-space:nowrap; } .rv-c-pay { margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } .rv-c-btn { position:relative; z-index:1; min-height:44px; font-size:14px; } /* THE SHARED PRICE HOOKS, laid out for this card. .c-rp-pr and its children carry global rules for the old portrait card (figure on its own line, badge full width, mono); scoped here to one row. */ .rv .rv-pr { display:flex; flex-wrap:nowrap; align-items:baseline; justify-content:flex-start; gap:8px; width:auto; margin:0; font-family:var(--font-sans); } .rv .rv-pr b { flex-basis:auto; font-size:21px; font-weight:700; color:var(--ink); letter-spacing:-.01em; font-variant-numeric:tabular-nums; min-width:3.2ch; } .rv .rv-pr s { font-size:13px; color:var(--ink-3); } .rv .rv-pr .c-rp-off { flex-basis:auto; margin:0; width:auto; font-family:var(--font-sans); font-size:11.5px; letter-spacing:0; text-transform:none; padding:2px 7px; } .rv .rv-pr .c-rp-off[hidden] { display:none; } .rv-tag:not([hidden]) { position:absolute; top:-9px; right:14px; z-index:1; font-size:11px; font-weight:650; padding:2px 9px; border-radius:99px; background:var(--gold-solid); color:var(--gold-solid-text); } .rv-tag i { font-style:normal; } /* the package */ .rv-bundle { grid-template-columns:1fr; background:var(--gold-bg); border-color:var(--gold-lt); } @media (min-width:900px) { .rv-bundle { grid-column:1/-1; grid-template-columns:auto 1fr; align-items:center; } } .rv-b-fan { display:flex; padding-left:14px; } .rv-b-cov { width:52px; margin-left:-14px; } .rv-b-cov img { display:block; width:100%; height:auto; border-radius:5px; box-shadow:0 2px 6px rgba(23,18,12,.25); border:2px solid var(--surface); } /* how it works, and the pandit */ .rv-how { margin:48px 0 40px; } .rv-sec-h { margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } .rv-sec-h b { font-size:clamp(20px,3vw,24px); font-weight:600; color:var(--ink); } .rv-sec-h span { font-family:var(--font-serif); font-size:16px; color:var(--ink-2); } .rv-steps { list-style:none; counter-reset:rv; margin:0; padding:0; display:grid; gap:10px; } @media (min-width:760px) { .rv-steps { grid-template-columns:repeat(3,minmax(0,1fr)); } } .rv-steps li { counter-increment:rv; position:relative; padding:14px 14px 14px 52px; border-radius:12px; background:var(--surface); border:1px solid var(--line); } .rv-steps li::before { content:counter(rv); position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; background:var(--gold-bg); color:var(--gold-dk); border:1px solid var(--gold-lt); } .rv-steps b { display:block; font-size:15px; color:var(--ink); } .rv-steps span { display:block; margin-top:3px; font-size:13px; line-height:1.5; color:var(--ink-2); } .rv-pandit { margin-top:12px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:16px; border-radius:12px; border:1px dashed var(--gold-lt); background:var(--surface-2); } .rv-pandit-m .rv-mark { width:52px; height:52px; display:block; opacity:.9; } .rv-pandit b { font-size:15.5px; color:var(--ink); } .rv-pandit p { margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-2); max-width:78ch; } .of-team { display:grid; gap:18px; } .of-team-d { margin:0 0 12px; max-width:74ch; font-size:15px; line-height:1.7; color:var(--ink-2); } .of-team .of-qs { margin-bottom:0; } @media (min-width:900px) { .of-team .of-qs { flex-direction:row; flex-wrap:wrap; } .of-team .of-q { flex:1 1 280px; } } .of-team-all { justify-self:start; font-size:14px; font-weight:650; color:var(--gold-dk); } .of-shelf { display:grid; gap:16px; } .of-shelf-w { margin:0; padding-left:18px; max-width:80ch; } .of-shelf-w li { font-size:14px; line-height:1.65; color:var(--ink-2); margin-bottom:4px; } @media (min-width:900px) { .of-shelf .of-rp { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); } } /* The wrapper t() puts round each Hindi string: no box, the parent's type. */ :root .l-hi { display:contents; font:inherit; color:inherit; } /* The same Hindi rules as the signed-in pages (CSS above): matras need the taller line; under 15px goes up by 2, never past 15; no tracking, caps or slant, which pull a conjunct apart. */ :root[lang^="hi"] body { line-height:1.6; } :root[lang^="hi"] .l-hi { font-size:max(1em, min(calc(1em + 2px), 15px)); letter-spacing:0; text-transform:none; font-style:normal; } :root[lang^="hi"] .l-hi .l-hi { font-size:1em; } /* AND NOT MONO. The small labels are set in the mono face for English; Devanagari in it reads as a typewriter. On a Hindi page the mono face is the sans. */ :root[lang^="hi"] { --font-mono:var(--font-sans); } /* AND A DEVANAGARI FACE IN THE SERIF. The serif stack names Latin faces only, so a Hindi heading fell through to whatever the system had: on a Mac that is Devanagari MT, which sets पें apart from the next letter ("पें टाकल्स", /hi/tarot/ card names). The Latin in a heading keeps the serif; the Devanagari gets the face the body text already uses. */ :root[lang^="hi"] { --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia, "Kohinoor Devanagari","Nirmala UI","Noto Serif Devanagari","Noto Sans Devanagari",serif; } /* THE SHARED PARTS THAT CARRY HINDI WITHOUT t(): the header and drawer (common.chrome writes them in Hindi), the pickers, the report cards, the astrologer rate, the notes and the footer. The .l-hi rule above never reached them, so a /hi/ page had 9.5-13.5px Devanagari and tracked capitals in its menu (review, 28 Sep 2026: measured against the English twin, class by class). Each is its English size +2, never past 15. */ :root[lang^="hi"] .c-nav-i, :root[lang^="hi"] .c-nav-px b, :root[lang^="hi"] .c-dd-i, :root[lang^="hi"] .c-pf-done, :root[lang^="hi"] .c-unknown, :root[lang^="hi"] .c-btn .c-as-rate, :root[lang^="hi"] .rv-btn, :root[lang^="hi"] .c-nav-mi, :root[lang^="hi"] .c-nav-mm, :root[lang^="hi"] .rv-c-d { font-size:15px; } :root[lang^="hi"] .c-nav-px i, :root[lang^="hi"] .c-note, :root[lang^="hi"] .c-as-rate { font-size:14.5px; } :root[lang^="hi"] .rv-c-m, :root[lang^="hi"] .p-hb-k, :root[lang^="hi"] .p-hb-k > * { font-size:14px; } :root[lang^="hi"] .c-drawer-h > *, :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-dp-wd, :root[lang^="hi"] .c-nav-mh, :root[lang^="hi"] .c-field label { letter-spacing:0; text-transform:none; font-family:var(--font-sans); } :root[lang^="hi"] .c-drawer-h, :root[lang^="hi"] .c-drawer-h > * { font-size:13px; } :root[lang^="hi"] .c-dp-wd { font-size:11px; } :root[lang^="hi"] .c-nav-mh { font-size:11.5px; }