* { 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; } .l-signin, .l-signup { text-decoration:none; white-space:nowrap; } .l-act-u, .l-act-a { display:flex; align-items:center; gap:8px; } /* The drawer carries Sign in and Sign up and nothing else now — the theme toggle moved to top_nav's `bar`, which is the header at every width. Its own display and gap belong to the component, in ui.py, so the breakpoint that hides it there is not overruled from here. */ .c-drawer-a .l-signin, .c-drawer-a .l-signup { flex:1; min-height:44px; padding:0 15px; justify-content:center; } /* 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); } .mu-note { font-size:15px; line-height:1.7; color:var(--ink-2); max-width:74ch; margin:0 0 20px; } /* margin-inline:auto as well as text-align. The 74ch cap means the paragraph is narrower than the wrap on a wide screen, so centring the text alone would have centred it inside a block still sitting hard left. Sits under a section_head(centre=True); the group headings further down stay left, over the card grids they label. */ .mu-note-c { margin-left:auto; margin-right:auto; text-align:center; max-width:68ch; text-wrap:balance; } .mu-sub { font-size:13.5px; line-height:1.65; color:var(--ink-3); max-width:76ch; margin:14px 0 0; } /* The seven pills are ui.link_bar and carry no styling from this page. All that is left is the gap under them and the panels they switch, which is display:none here rather than in the component because six of the seven are always off. */ .mu-days { margin:0 0 18px; cursor:pointer; } .mu-dpane { display:none; } /* the four windows of the day — the bar's legend, keyed to it by colour */ .mu-wg { display:grid; gap:10px; grid-template-columns:1fr; margin-top:14px; } @media (min-width:560px) { .mu-wg { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .mu-wg { grid-template-columns:repeat(4,1fr); } } .mu-win { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .mu-win-g { border-color:var(--gold); background:var(--gold-bg); border-left:3px solid var(--good); } .mu-win-bad { border-left:3px solid var(--bad); } .mu-win i { display:block; font-style:normal; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; } /* 17px and tabular, so a range fits one line at a quarter of 1000px and the minutes line up down the row. */ .mu-win b { display:block; margin:6px 0 3px; font-size:17px; font-weight:750; color:var(--ink); line-height:1.2; font-variant-numeric:tabular-nums; } .mu-win-no { color:var(--ink-2) !important; } .mu-off { color:var(--ink-3); font-style:italic; } .mu-win em { display:block; font-style:normal; font-size:11.5px; line-height:1.45; color:var(--ink-3); } /* the activity directory */ .mu-g { margin-bottom:26px; } .mu-g:last-child { margin-bottom:0; } .mu-ag { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:640px) { .mu-ag { grid-template-columns:repeat(2,1fr); } } @media (min-width:1000px) { .mu-ag { grid-template-columns:repeat(4,1fr); } } .mu-a { display:block; min-width:0; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); text-decoration:none; transition:border-color .18s, transform .18s; } .mu-a:hover { border-color:var(--gold); transform:translateY(-1px); } .mu-a > b { display:block; font-size:15px; font-weight:650; color:var(--ink); } .mu-a > i { display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:2px; } /* The answer, given the weight of an answer. "Next" is the one fact a reader is scanning for, so it is the largest thing on the card after the name — the old card buried it at 11.5px at the end of a sentence. */ .mu-a-next { display:block; margin:12px 0 10px; padding-top:11px; border-top:1px solid var(--line-soft); font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; } .mu-a-next em { display:block; font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--ink-3); margin-bottom:2px; } /* Three segments, and the word beside them. The meter alone would be one more thing to decode; the word alone would give the grid nothing to compare at a glance. Together the eye ranks the cards and the text says what the ranking means. */ .mu-a-av { display:flex; align-items:center; gap:9px; } .mu-a-m { flex:none; display:flex; gap:4px; } /* FILLED VERSUS HOLLOW, not two colours. Two solid tones cannot do this job with the palette available: an empty segment has to be visible against the card (3:1) AND distinct from a filled one, and nothing clears both in both themes. Measured against the card / against --gold-dk: --line 1.25 / 8.82 (dark) 1.35 / 3.98 (light) — invisible --ink-3 5.29 / 2.08 (dark) 5.44 / 1.01 (light) — same as filled --gold-lt 3.50 / 3.15 (dark) 1.60 / 3.37 (light) — invisible on cream A ring instead of a fill makes the difference a shape, which survives any theme: --ink-3 clears 3:1 against the card in both, and a hollow dot is not a solid one whatever the two tones happen to measure against each other. */ .mu-a-m i { display:block; width:8px; height:8px; border-radius:50%; background:transparent; box-shadow:inset 0 0 0 1.5px var(--ink-3); } .mu-a-m1 i:nth-child(-n+1), .mu-a-m2 i:nth-child(-n+2), .mu-a-m3 i:nth-child(-n+3) { background:var(--gold-dk); box-shadow:none; } .mu-a-av em { font-style:normal; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; } .mu-a-f { display:block; margin-top:11px; font-size:11.5px; color:var(--ink-3); } /* the rules the tradition asks for */ .mu-rg { display:grid; gap:12px; grid-template-columns:1fr; } @media (min-width:760px) { .mu-rg { grid-template-columns:repeat(2,1fr); } } .mu-r { min-width:0; padding:15px 17px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .mu-r-bad { background:var(--rail); } .mu-r b { display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; } .mu-r ul { margin:0; padding-left:16px; } .mu-r li { font-size:12.5px; line-height:1.6; color:var(--ink-2); } /* the five limbs, and the four windows */ .mu-dg { display:grid; gap:10px; grid-template-columns:1fr; } @media (min-width:720px) { .mu-dg { grid-template-columns:repeat(2,1fr); } } .mu-d { min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); } .mu-d b { display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; } .mu-d p { margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-2); } /* Full width and centred, unlike .mu-note above it. The 78ch cap is gone on purpose: this is the footnote for the whole section, so it sits under the bar at the bar's width rather than in a column of its own. */ .mu-city { padding:14px 20px; border-radius:12px; background:var(--gold-bg); font-size:13px; line-height:1.65; color:var(--ink-2); text-align:center; text-wrap:pretty; margin-top:16px; } /* ── the year, three months across ────────────────────────────────── One card per month, each a real calendar. Three across is the shape a wall calendar has and the reason it works: twelve months fit four rows deep, and a reader compares September against October by looking left, not by scrolling. EVERYTHING BETWEEN THE TWO MARKERS BELOW IS SHARED with /home/muhurat/, which draws the same calendar from an API response. calendar_css() slices between them — see the note on it for why that is a slice and no longer a regex. A calendar rule written outside the markers is a rule the signed-in page does not get. */ /* CALENDAR-SHARED-START */ .mu-cals { display:grid; gap:14px; grid-template-columns:1fr; margin:0 0 4px; } @media (min-width:600px) { .mu-cals { grid-template-columns:repeat(2,1fr); } } @media (min-width:940px) { .mu-cals { grid-template-columns:repeat(3,1fr); } } .mu-mo { min-width:0; padding:15px 16px 13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); } /* A month the scan never reached. Dimmed rather than dropped: January to July still happened, and a month left off the page is indistinguishable from a month with nothing in it. Opacity, not filter:blur — blur on 12px tabular numerals turns them to mush at this size, and the point is that the reader can still read the dates, just not mistake them for answers. */ /* NOT opacity. Fading a past month by opacity:.55 and its gone days by a further .4 multiplied out to 0.22, and the day numbers measured 1.00:1 — invisible, and text a screen reader still reads out. A month that has passed is still content, so it is de-emphasised with tokens that stay legible: no fill on the card, lighter ink, lighter weight. */ .mu-mo-off { background:transparent; } .mu-mo-off .mu-mo-h b { font-weight:500; color:var(--ink-2); } .mu-mo-off .mu-mo-h span { color:var(--ink-3); font-weight:400; } .mu-mo-now { border-color:var(--gold); } .mu-mo-h { display:flex; align-items:baseline; gap:8px; margin-bottom:11px; padding-bottom:9px; border-bottom:1px solid var(--line-soft); } .mu-mo-h b { font-family:var(--font-serif); font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.01em; } .mu-mo-h em { font-style:normal; font-size:10.5px; color:var(--ink-3); } .mu-mo-h span { margin-left:auto; flex:none; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-dk); font-weight:600; } .mu-cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; container-type:inline-size; } /* Under 280px the seven columns are 38px each, and two lines of type in a 38px circle is cramping rather than information. The score drops out and the date keeps the cell; the day list under the calendar carries the number at every width, and the cell's title still holds it. */ @container (max-width:280px) { .mu-cal-on em { display:none; } .mu-cal-on b { font-size:12px; } } .mu-cal-w { padding-bottom:5px; text-align:center; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3); } /* Same geometry as a real cell, or a row made entirely of padding collapses to nothing and the calendar comes out five rows instead of six — which is what left the short months with empty space under their list. */ .mu-cal-p { aspect-ratio:1; visibility:hidden; } /* Square cells, so a lit day is a circle rather than a lozenge. Every other day is just a number — no border, no fill — because twenty-eight boxes around twenty-eight numbers is what made the first version look like a spreadsheet. */ .mu-cal-c { aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font-variant-numeric:tabular-nums; } .mu-cal-c b { font-size:12px; font-weight:500; color:var(--ink-2); line-height:1; } /* A lit cell holds two lines in a 47px circle: the date, and its score under it. line-height is pulled in to 1 on both — at the default the pair is 30px tall inside a 47px circle and sits visibly low. */ .mu-cal-on { align-content:center; gap:1px; } .mu-cal-on b { font-weight:750; font-size:11.5px; line-height:1; } /* THREE BANDS, ALL GOLD. A ladder of one hue rather than green-amber-red: every one of these days clears the bar, so the weakest is "good, and the others are better" — colouring a 58% day red would say the engine rejected it, which is the opposite of why it is on the calendar. Solid, tinted, outlined — an order that survives greyscale. The top band is green rather than gold, because that is the one a reader is hunting for and gold is the page's ordinary furniture. A ring and a green score rather than a green disc: filled, it was the loudest thing on a page of twelve calendars, and the date inside it had to fight the fill. The ring is 2px where the others are 1px, so the order still reads by weight and not only by hue. */ .mu-cal-t3 { box-shadow:inset 0 0 0 2px var(--good); } .mu-cal-t3 b { color:var(--ink); } .mu-cal-t3 em { color:var(--good); } .mu-cal-t2 { background:var(--gold-bg); box-shadow:inset 0 0 0 1px var(--gold); } .mu-cal-t2 b, .mu-cal-t2 em { color:var(--gold-dk); } .mu-cal-t1 { box-shadow:inset 0 0 0 1px var(--gold-lt); } .mu-cal-t1 b, .mu-cal-t1 em { color:var(--ink-2); } .mu-cal-on em { font-style:normal; font-size:8px; font-weight:650; line-height:1; letter-spacing:-.02em; } /* Looked at and turned down is not the same as never looked at. Faded rather than dashed: at 44px a dashed ring is louder than the lit day it sits beside, and the month header already says "5-31 only". */ .mu-cal-gone b { color:var(--ink-3); font-weight:400; } /* A day that qualified but has gone keeps the gold, in the muted pair — --gold-dk on --gold-bg, which is a designed combination and passes in both themes, where gold-solid at 40% opacity did not. */ /* NEUTRAL, not a fourth shade of gold. A spent day was painted --gold-bg with --gold-dk on it, which is pixel-for-pixel the 65-79% band — so a date in February looked like a middling day still on offer instead of one that had gone. Grey is the one thing none of the three live bands is. (Not opacity: a faded circle drops its text under 4.5:1, which is what the first version of this did at 1.00:1.) */ .mu-cal-on.mu-cal-gone { background:var(--surface-2); box-shadow:none; } .mu-cal-on.mu-cal-gone b, .mu-cal-on.mu-cal-gone em { color:var(--ink-3); font-weight:600; } .mu-cal-now { box-shadow:inset 0 0 0 1.5px var(--gold); } .mu-cal-now b { color:var(--ink); font-weight:750; } /* ── the phone, and the score inside a lit day ────────────────────── Inside the markers, so the signed-in calendar gets it too. Last in the shared block, because a media query adds no specificity and a block above the rules it overrides loses at equal weight. The month header's year and its count were 10.5 and 9.5. The score in a lit cell was 8, which is the smallest number on either page and the one a reader is actually comparing between days — it goes to 11 where the cell can hold it, and where it cannot the container rule above already drops it and hands the number to the day card and the cell's title. At 390 the cell is 45px and holds an 11.5px date over an 11px score with room to spare; below a 280px calendar there is no size that works and the rule above is why. */ @media (max-width:640px) { .mu-mo-h em { font-size:11px; } .mu-mo-h span { font-size:11px; } .mu-cal-on em { font-size:11px; } /* The seven weekday heads. This one is not a change of mind about 8.5 so much as the first time the signed-in page has had the rule at all: the old extractor emitted a stray closing brace immediately above it, and a stray brace swallows the rule that follows it whole — so this page drew MON TUE WED at an inherited 15px while the public one drew 8.5, and neither was 11. */ .mu-cal-w { font-size:11px; } } /* CALENDAR-SHARED-END */ /* The key for the three bands. Colour with no legend is a puzzle. */ .mu-key { display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 16px; justify-content:center; font-size:11.5px; color:var(--ink-3); } .mu-key span { display:inline-flex; align-items:center; gap:7px; } .mu-key i { flex:none; width:15px; height:15px; aspect-ratio:auto; border-radius:50%; } .mu-key .mu-cal-gone { background:var(--gold-bg); box-shadow:none; } /* ── the list under each month ───────────────────────────────────── */ /* FIXED HEIGHT, and the list inside it scrolls. Twelve month cards whose depth follows their content make a ragged three-column grid — January with four dates sits beside a February with one, and every row of the grid is as tall as its worst card. A constant box makes the year read as a year, and the count in the heading is what says how much is below the fold. */ .mu-mb { margin-top:12px; padding-top:11px; height:196px; overflow:hidden; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; } .mu-mb-h { flex:none; margin:0 0 9px; font-size:12.5px; line-height:1.5; color:var(--ink-2); } .mu-mb-h b { color:var(--ink); font-weight:700; } .mu-mb-no { color:var(--ink-3); } .mu-dls { flex:1 1 auto; min-height:0; list-style:none; margin:0; padding:0 9px 0 0; display:grid; gap:10px; align-content:start; overflow-y:auto; scrollbar-width:thin; } .mu-dl { display:grid; grid-template-columns:1fr auto auto; gap:2px 8px; align-items:baseline; padding-bottom:9px; border-bottom:1px solid var(--line-soft); } .mu-dl:last-child { padding-bottom:0; border-bottom:0; } .mu-dl-d { display:flex; align-items:baseline; gap:6px; min-width:0; } .mu-dl-d b { font-size:12.5px; font-weight:700; color:var(--ink); white-space:nowrap; } .mu-dl-d i { font-style:normal; font-size:10.5px; color:var(--ink-3); } /* The verdict, on the same line as the date. A reader scrolling a month is scanning this column and nothing else. */ .mu-dl-x { font-family:var(--font-mono); font-size:8.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; color:var(--ink-3); white-space:nowrap; } .mu-dl-yes { color:var(--good); } .mu-dl-b { grid-column:1 / -1; display:grid; gap:1px; } .mu-dl-t { font-size:11.5px; color:var(--ink-2); font-variant-numeric:tabular-nums; } .mu-dl-t em { font-style:normal; color:var(--ink-3); } .mu-dl-w { font-size:11px; line-height:1.45; color:var(--ink-3); overflow-wrap:anywhere; } /* A day that has gone still belongs on a year view, but it is not on offer. Weight and ink rather than opacity, for the same reason as the month. */ .mu-dl-gone .mu-dl-d b { color:var(--ink-2); font-weight:600; } .mu-dl-gone .mu-dl-yes { color:var(--ink-3); } .mu-none { padding:16px 18px; border:1px dashed var(--line); border-radius:var(--r-card); font-size:13.5px; line-height:1.65; color:var(--ink-2); } /* ── THE PHONE, AND IT GOES LAST ────────────────────────────────────────── A media query adds no specificity, so a block written above the rules it overrides loses at equal specificity. All four of these are set earlier in this same file. OUTSIDE THE CALENDAR MARKERS, deliberately. Everything between CALENDAR-SHARED-START and CALENDAR-SHARED-END is sliced out verbatim by muhurat_app.py for the signed-in page, and _check_shared() asserts at build time that the slice is whole and its braces balance. None of these four rules is part of the calendar, so none of them belongs inside it. .mu-dl-x IS THE VERDICT. "Auspicious" and "Inauspicious" — the one word on a date row that this whole page exists to produce — were the SMALLEST type on it, at 8.5px, under a 17px date. A muhurat page that has to be squinted at to find which days are the answer is not doing the only job it has. The tracking is what makes it read as a label; the smallness never was. */ @media (max-width:640px) { .mu-dl-x { font-size:11px; } /* The weekday under each date. A date without its day of the week is half an answer when the thing being planned is a wedding. */ .mu-dl-d i { font-size:11px; } /* The hub's two: "Next" over the soonest date on each activity card, and the label over each window. Both name the number underneath them. */ .mu-a-next em { font-size:11px; } .mu-win i { font-size:11px; } } #mud-0:checked ~ .mu-dp-0, #mud-0:checked ~ * .mu-dp-0 { display:block; } #mud-0:checked ~ label[for="mud-0"], #mud-0:checked ~ * label[for="mud-0"] { border-color:var(--gold); background:var(--gold-bg); } #mud-0:focus-visible ~ label[for="mud-0"], #mud-0:focus-visible ~ * label[for="mud-0"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-1:checked ~ .mu-dp-1, #mud-1:checked ~ * .mu-dp-1 { display:block; } #mud-1:checked ~ label[for="mud-1"], #mud-1:checked ~ * label[for="mud-1"] { border-color:var(--gold); background:var(--gold-bg); } #mud-1:focus-visible ~ label[for="mud-1"], #mud-1:focus-visible ~ * label[for="mud-1"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-2:checked ~ .mu-dp-2, #mud-2:checked ~ * .mu-dp-2 { display:block; } #mud-2:checked ~ label[for="mud-2"], #mud-2:checked ~ * label[for="mud-2"] { border-color:var(--gold); background:var(--gold-bg); } #mud-2:focus-visible ~ label[for="mud-2"], #mud-2:focus-visible ~ * label[for="mud-2"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-3:checked ~ .mu-dp-3, #mud-3:checked ~ * .mu-dp-3 { display:block; } #mud-3:checked ~ label[for="mud-3"], #mud-3:checked ~ * label[for="mud-3"] { border-color:var(--gold); background:var(--gold-bg); } #mud-3:focus-visible ~ label[for="mud-3"], #mud-3:focus-visible ~ * label[for="mud-3"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-4:checked ~ .mu-dp-4, #mud-4:checked ~ * .mu-dp-4 { display:block; } #mud-4:checked ~ label[for="mud-4"], #mud-4:checked ~ * label[for="mud-4"] { border-color:var(--gold); background:var(--gold-bg); } #mud-4:focus-visible ~ label[for="mud-4"], #mud-4:focus-visible ~ * label[for="mud-4"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-5:checked ~ .mu-dp-5, #mud-5:checked ~ * .mu-dp-5 { display:block; } #mud-5:checked ~ label[for="mud-5"], #mud-5:checked ~ * label[for="mud-5"] { border-color:var(--gold); background:var(--gold-bg); } #mud-5:focus-visible ~ label[for="mud-5"], #mud-5:focus-visible ~ * label[for="mud-5"] { outline:2px solid var(--gold); outline-offset:2px; } #mud-6:checked ~ .mu-dp-6, #mud-6:checked ~ * .mu-dp-6 { display:block; } #mud-6:checked ~ label[for="mud-6"], #mud-6:checked ~ * label[for="mud-6"] { border-color:var(--gold); background:var(--gold-bg); } #mud-6:focus-visible ~ label[for="mud-6"], #mud-6:focus-visible ~ * label[for="mud-6"] { outline:2px solid var(--gold); outline-offset:2px; }#mud-0:checked ~ label[for="mud-0"], #mud-0:checked ~ * label[for="mud-0"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-0:checked ~ label[for="mud-0"] i, #mud-0:checked ~ * label[for="mud-0"] i { color:var(--gold-solid-text); opacity:.75; } #mud-1:checked ~ label[for="mud-1"], #mud-1:checked ~ * label[for="mud-1"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-1:checked ~ label[for="mud-1"] i, #mud-1:checked ~ * label[for="mud-1"] i { color:var(--gold-solid-text); opacity:.75; } #mud-2:checked ~ label[for="mud-2"], #mud-2:checked ~ * label[for="mud-2"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-2:checked ~ label[for="mud-2"] i, #mud-2:checked ~ * label[for="mud-2"] i { color:var(--gold-solid-text); opacity:.75; } #mud-3:checked ~ label[for="mud-3"], #mud-3:checked ~ * label[for="mud-3"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-3:checked ~ label[for="mud-3"] i, #mud-3:checked ~ * label[for="mud-3"] i { color:var(--gold-solid-text); opacity:.75; } #mud-4:checked ~ label[for="mud-4"], #mud-4:checked ~ * label[for="mud-4"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-4:checked ~ label[for="mud-4"] i, #mud-4:checked ~ * label[for="mud-4"] i { color:var(--gold-solid-text); opacity:.75; } #mud-5:checked ~ label[for="mud-5"], #mud-5:checked ~ * label[for="mud-5"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-5:checked ~ label[for="mud-5"] i, #mud-5:checked ~ * label[for="mud-5"] i { color:var(--gold-solid-text); opacity:.75; } #mud-6:checked ~ label[for="mud-6"], #mud-6:checked ~ * label[for="mud-6"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mud-6:checked ~ label[for="mud-6"] i, #mud-6:checked ~ * label[for="mud-6"] i { color:var(--gold-solid-text); opacity:.75; } /* ── 10 FAQ ──────────────────────────────────────────── */ .h-fq-b { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; } /* ── ON A PHONE THE TABS ARE A RAIL ── Eight category tabs at 44px each, wrapping: 200px of tab strip before a reader reaches a single question, which is a quarter of the screen spent on navigation for a section that is mostly answers. In a row it is 44px and the swipe is the same gesture the four rails above it use. Written AFTER the base rule and scoped .h-fq .h-fq-b, because a media query adds no specificity and this file has lost that fight before. */ @media (max-width:640px) { .h-fq .h-fq-b { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; scroll-snap-type:x proximity; margin-bottom:14px; } .h-fq .h-fq-b::-webkit-scrollbar { display:none; } .h-fq .h-fq-t { flex:0 0 auto; scroll-snap-align:start; } } .h-fq-t { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; cursor:pointer; font-size:14px; font-weight:650; color:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); } .h-fq-t:hover { border-color:var(--gold-lt); color:var(--gold-dk); } /* The count is part of the label, not decoration: it is how you know Getting started has five and Your kundli has five before you open either. */ .h-fq-t i { font-style:normal; font-family:var(--font-mono); font-size:11px; min-width:19px; height:19px; display:grid; place-items:center; border-radius:var(--r-pill); background:var(--rail); color:var(--ink-3); } .h-fq-p { display:none; } .h-fq-p .c-acc:last-child { margin-bottom:0; }#mufaq-muhurat:checked ~ * .h-fq-p-muhurat { display:block; } #mufaq-muhurat:focus-visible ~ * label[for="mufaq-muhurat"] { outline:2px solid var(--gold); outline-offset:2px; } #mufaq-muhurat:checked ~ * label[for="mufaq-muhurat"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mufaq-muhurat:checked ~ * label[for="mufaq-muhurat"] i { background:var(--gold-solid-text); color:var(--gold-solid); } #mufaq-start:checked ~ * .h-fq-p-start { display:block; } #mufaq-start:focus-visible ~ * label[for="mufaq-start"] { outline:2px solid var(--gold); outline-offset:2px; } #mufaq-start:checked ~ * label[for="mufaq-start"] { background:var(--gold-solid); border-color:var(--gold-solid); color:var(--gold-solid-text); } #mufaq-start:checked ~ * label[for="mufaq-start"] i { background:var(--gold-solid-text); color:var(--gold-solid); }