/* ------------------------------------------------------------------ * lod-tools.css — tools hub, crystal finder, tarot, numerology, * horoscopes, discover flow. * Loaded after lod.css. Use ONLY tokens from lod.css. No new colour * literals, no !important. * * EVERYTHING is scoped to `.tl-page` (set on by the tools * generators) so nothing here can leak into any other page type. * ------------------------------------------------------------------ */ /* ================================================================== 0b. NEUTRALISE THE LEGACY site.css TYPE RULES site.css styles the same class names for the old dark theme. Anything it sets that these rules do not re-declare would leak through, so the font stack and colour scheme are stated explicitly here. ================================================================== */ .tl-page .tool-sub, .tl-page .tool-head, .tl-page .tool-meta, .tl-page .tool-lab, .tl-page .tool-note, .tl-page .tool-err, .tl-page .tool-link, .tl-page .tool-result p, .tl-page .tool-facts span, .tl-page .tools-group, .tl-page .tool-in, .tl-page .tbl, .tl-page .tag, .tl-page .pill, .tl-page .fact .k, .tl-page .related .r-for, .tl-page .related .r-price, .tl-page .hub-card .r-for, .tl-page .hub-card .r-price, .tl-page .hub-card p, .tl-page .faq-a-inner, .tl-page .callout p, .tl-page .crumb { font-family: var(--font-body); } .tl-page .tool-in, .tl-page .dsc-card, .tl-page .cq-card, .tl-page .tl-tool { color-scheme: light; } .tl-page .tool-facts b, .tl-page .fact .val, .tl-page .related .r-title { font-family: var(--font-display); } /* ================================================================== 1. PAGE SHELL — retire the legacy site.css layout classes ================================================================== */ .tl-page .wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad-x); padding-block: 0; } .tl-page .wrap-text { max-width: var(--w-text); } .tl-page main { display: block; } /* Breadcrumb ------------------------------------------------------- */ .tl-page .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--t-caption); letter-spacing: .06em; color: var(--ink-muted); padding-block: var(--s-5) 0; margin: 0; border: 0; } .tl-page .crumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .tl-page .crumb a:hover { color: var(--gold); border-bottom-color: var(--line-strong); } .tl-page .crumb span { color: var(--line-strong); margin: 0; } /* Hero -------------------------------------------------------------- */ .tl-page .hero { max-width: var(--w-text); padding-block: clamp(2rem, 1.2rem + 3vw, 3.6rem) clamp(1.6rem, 1rem + 2vw, 2.6rem); margin: 0; border: 0; background: none; text-align: left; } .tl-page .hero .eyebrow, .tl-page .eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); display: inline-block; margin: 0 0 var(--s-3); } .tl-page .hero h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); margin: 0; text-transform: none; } .tl-page .hero .lede, .tl-page .lede { font-family: var(--font-body); font-size: var(--t-body-l); font-weight: 400; line-height: 1.72; color: var(--ink-3); margin: var(--s-4) 0 0; max-width: 62ch; } .tl-page .hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); } .tl-page .pill { display: inline-flex; align-items: center; font-size: var(--t-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .35rem .85rem; } .tl-page .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } /* Zodiac glyph medallion -------------------------------------------- */ .tl-page .zodiac-ring { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; color: var(--gold); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); margin: 0 0 var(--s-4); box-shadow: var(--shadow-sm); } /* Sections ---------------------------------------------------------- */ .tl-page .block { padding-block: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); margin: 0; border: 0; border-top: 1px solid var(--line); background: none; } .tl-page .hero + .block { border-top: 1px solid var(--line); } .tl-page .block > h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); margin: 0 0 var(--s-4); text-transform: none; } .tl-page .block h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--ink); margin: var(--s-6) 0 var(--s-3); } .tl-page .block > h2 + h3 { margin-top: var(--s-4); } .tl-page .block p { color: var(--ink-2); font-size: var(--t-body); line-height: 1.75; margin: 0 0 var(--s-4); } .tl-page .prose { max-width: var(--w-text); } .tl-page .prose p:last-child { margin-bottom: 0; } .tl-page .prose ul, .tl-page .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s-4); color: var(--ink-2); } .tl-page .prose li { margin-bottom: var(--s-2); line-height: 1.7; } .tl-page .prose strong { color: var(--ink); font-weight: 600; } .tl-page .prose em, .tl-page .block em { color: inherit; font-style: italic; } .tl-page .prose a, .tl-page .block p a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .tl-page .prose a:hover, .tl-page .block p a:hover { color: var(--gold-bright); } /* Section intro line (hub group blurbs) ------------------------------ */ .tl-page .tl-groupintro { max-width: 68ch; font-size: var(--t-body); line-height: 1.72; color: var(--ink-3); margin: 0 0 var(--s-5); } /* Callout / note ----------------------------------------------------- */ .tl-page .callout { border: 0; border-left: 2px solid var(--gold); background: var(--gold-soft); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); margin: var(--s-5) 0; max-width: var(--w-text); } .tl-page .callout p { color: var(--ink-2); font-size: var(--t-small); line-height: 1.7; margin: 0; } .tl-page .callout p + p { margin-top: var(--s-3); } /* Honest caveat, used under every computed result -------------------- */ .tl-page .tl-caveat { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-4); } .tl-page .tl-caveat a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } /* Tables -------------------------------------------------------------- */ .tl-page .tbl { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5); font-size: var(--t-small); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .tl-page .tbl th, .tl-page .tbl td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); line-height: 1.6; } .tl-page .tbl th { font-family: var(--font-body); font-size: var(--t-caption); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-muted); } .tl-page .tbl tr:last-child td { border-bottom: 0; } .tl-page .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Fact strip ---------------------------------------------------------- */ .tl-page .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0; } .tl-page .fact { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-4); min-width: 0; } .tl-page .fact .k { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .tl-page .fact .val { font-family: var(--font-display); font-size: var(--t-h4); color: var(--ink); margin-top: .3rem; line-height: 1.3; } /* Tag pills ----------------------------------------------------------- */ .tl-page .tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); } .tl-page .tag { display: inline-flex; align-items: center; font-size: var(--t-caption); letter-spacing: .06em; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .35rem .9rem; } /* ================================================================== 2. THE HUB — grouped index of free experiences ================================================================== */ .tl-page .hub-grid, .tl-page .tl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; } .tl-page .tl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-page .hub-card, .tl-page .tl-card { display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); text-decoration: none; color: inherit; min-width: 0; transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .tl-page a.hub-card:hover, .tl-page a.tl-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .tl-page .hub-card h3, .tl-page .tl-card h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0; } .tl-page .hub-card p, .tl-page .tl-card p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-3); margin: 0; flex: 1 1 auto; } .tl-page .hub-card .r-for, .tl-page .tl-card .r-for, .tl-page .related .r-for { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); margin: 0; } .tl-page .hub-card .r-price, .tl-page .tl-card .r-price, .tl-page .related .r-price { font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: auto; padding-top: var(--s-2); } /* "free · takes ~N minutes" line */ .tl-page .tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: var(--t-caption); letter-spacing: .04em; color: var(--ink-muted); margin: 0; } .tl-page .tl-meta .tl-free { color: var(--gold); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: var(--t-eyebrow); } /* The honest note at the top of the hub */ .tl-page .tl-honest { border: 1px solid var(--line); background: var(--surface-muted); border-radius: var(--r-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); max-width: var(--w-text); margin: 0; } .tl-page .tl-honest h2 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-3); } .tl-page .tl-honest p { font-size: var(--t-small); line-height: 1.72; color: var(--ink-2); margin: 0 0 var(--s-3); } .tl-page .tl-honest p:last-child { margin-bottom: 0; } /* ================================================================== 3. RELATED CARDS + FAQ + CTA BAND ================================================================== */ .tl-page .related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; } .tl-page .related a { display: flex; flex-direction: column; gap: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); text-decoration: none; color: inherit; min-width: 0; transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease), transform var(--t-std) var(--ease); } .tl-page .related a:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); } .tl-page .related .r-title { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; color: var(--ink); line-height: 1.3; } .tl-page .faq { border-top: 1px solid var(--line); max-width: var(--w-text); } .tl-page .faq-item { border-bottom: 1px solid var(--line); background: none; } .tl-page .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); text-align: left; cursor: pointer; border: 0; background: none; font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; color: var(--ink); padding: var(--s-4) 0; min-height: 48px; } .tl-page .faq-q::after { content: "+"; font-family: var(--font-body); font-size: 1.35rem; line-height: 1; color: var(--gold); transition: transform var(--t-std) var(--ease); flex: 0 0 auto; } .tl-page .faq-item.open .faq-q::after { transform: rotate(45deg); } .tl-page .faq-a { overflow: hidden; max-height: 0; transition: max-height var(--t-std) var(--ease); } .tl-page .faq-item.open .faq-a { max-height: 60rem; } .tl-page .faq-a-inner { padding: 0 0 var(--s-5); color: var(--ink-3); font-size: var(--t-small); line-height: 1.75; } .tl-page .faq-a-inner a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .tl-page .cta-band { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(3rem, 2rem + 3vw, 5rem); margin-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); text-align: center; } .tl-page .cta-band .wrap { max-width: var(--w-text); } .tl-page .cta-band h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 500; color: var(--ink); margin: 0 0 var(--s-4); letter-spacing: -.01em; text-transform: none; } .tl-page .cta-band p { font-size: var(--t-body-l); line-height: 1.7; color: var(--ink-3); max-width: 60ch; margin: 0 auto var(--s-6); } .tl-page .cta-band .btn + .btn { margin-left: var(--s-2); } /* ================================================================== 4. THE TOOL PANEL — one shared shell for every calculator ================================================================== */ .tl-page .tl-tool { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); max-width: 680px; box-shadow: var(--shadow-sm); } .tl-page .tl-tool-wide { max-width: var(--w-text); } .tl-page .tl-tool h2 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); } .tl-page .tl-tool > p { font-size: var(--t-small); color: var(--ink-3); line-height: 1.65; margin: 0 0 var(--s-5); } /* Fields — labels ABOVE inputs, 48px targets, 16px type (no iOS zoom) */ .tl-page .tool-lab, .tl-page .tl-lab { display: block; font-family: var(--font-body); font-size: var(--t-caption); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .4rem; } .tl-page .tool-in, .tl-page .tl-in { display: block; width: 100%; min-height: 48px; font-family: var(--font-body); font-size: 1rem; /* 16px — never triggers zoom-on-focus */ line-height: 1.4; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .8rem 1rem; margin: 0 0 var(--s-4); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); -webkit-appearance: none; appearance: none; } .tl-page select.tool-in, .tl-page select.tl-in { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; } .tl-page .tool-in:focus, .tl-page .tl-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .tl-page .tool-in[aria-invalid="true"], .tl-page .tl-in[aria-invalid="true"] { border-color: var(--error); } .tl-page .tool-in::placeholder { color: var(--ink-muted); } .tl-page .tl-field { margin-bottom: 0; } .tl-page .tl-fieldrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--s-4); } /* Buttons ----------------------------------------------------------- */ .tl-page .tool-btn, .tl-page .tl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; font-family: var(--font-body); font-size: var(--t-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--surface); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-sm); padding: .95rem 1.8rem; cursor: pointer; transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease), transform var(--t-fast) var(--ease); } .tl-page .tool-btn:hover, .tl-page .tl-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); } .tl-page .tool-btn[disabled], .tl-page .tl-btn[disabled] { opacity: .6; cursor: progress; transform: none; } .tl-page .tl-btn-quiet { color: var(--ink-2); background: none; border-color: var(--line-strong); } .tl-page .tl-btn-quiet:hover { background: none; border-color: var(--gold); color: var(--gold); } /* Errors — tied to their field via aria-describedby ------------------ */ .tl-page .tool-err, .tl-page .tl-err { display: block; color: var(--error); font-size: var(--t-small); line-height: 1.6; margin: 0; min-height: 0; } .tl-page .tl-err:not(:empty) { margin: 0 0 var(--s-3); } /* ================================================================== 5. RESULTS — headline result · supporting detail · honest caveat ================================================================== */ .tl-page .tool-result, .tl-page .tl-result { margin-top: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: linear-gradient(165deg, var(--gold-soft), transparent 55%), var(--surface-muted); padding: clamp(1.2rem, .9rem + 1vw, 1.7rem); scroll-margin-top: 96px; } .tl-page .tool-result[hidden], .tl-page .tl-result[hidden] { display: none; } .tl-page .tool-result:focus-visible, .tl-page .tl-result:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .tl-page .tool-head, .tl-page .tl-reshead { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--s-2); } .tl-page .tool-big, .tl-page .tl-resbig { font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0; outline: none; } .tl-page .tl-resbig:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; } .tl-page .tool-meta { font-size: var(--t-caption); letter-spacing: .08em; color: var(--ink-muted); margin: var(--s-2) 0 0; } .tl-page .tool-result p { font-size: var(--t-small); line-height: 1.72; color: var(--ink-2); margin: var(--s-3) 0 0; } .tl-page .tool-bar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin: var(--s-3) 0 0; max-width: 320px; } .tl-page .tool-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--gold), var(--gold-bright)); } .tl-page .tool-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 0; } .tl-page .tool-facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .7rem .9rem; min-width: 0; } .tl-page .tool-facts span { display: block; font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); } .tl-page .tool-facts b { display: block; font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; color: var(--ink); margin-top: .2rem; line-height: 1.35; } .tl-page .tool-link { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; margin-top: var(--s-4); min-height: 44px; align-self: flex-start; } .tl-page .tool-link:hover { color: var(--gold-bright); } .tl-page .tool-note { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); margin: var(--s-3) 0 0; } .tl-page .tool-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } /* ================================================================== 6. THE NUMEROLOGY CALCULATOR GRID (tools.js) ================================================================== */ .tl-page .tools-live { margin: 0; } .tl-page .tools-group { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); border-top: 1px solid var(--line); padding-top: var(--s-4); margin: var(--s-7) 0 var(--s-4); } .tl-page .tools-group:first-child { margin-top: 0; border-top: 0; padding-top: 0; } .tl-page .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-4); } .tl-page .tool-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.3rem, 1rem + 1vw, 1.7rem); min-width: 0; scroll-margin-top: 96px; transition: border-color var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease); } .tl-page .tool-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .tl-page .tool-card:target { border-color: var(--gold); box-shadow: var(--shadow-md); } .tl-page .tool-ico { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--gold); margin-bottom: var(--s-3); } .tl-page .tool-card h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 var(--s-2); } .tl-page .tool-sub { font-size: var(--t-small); line-height: 1.65; color: var(--ink-3); margin: 0 0 var(--s-4); } .tl-page .tool-card form { display: block; } /* ================================================================== 7. THE DISCOVER FLOW + FINDERS (.dsc-*) ================================================================== */ .tl-page .dsc-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); max-width: 680px; margin: 0 0 var(--s-5); box-shadow: var(--shadow-sm); scroll-margin-top: 96px; } .tl-page .dsc-progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-family: var(--font-body); font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .tl-page .dsc-bar { flex: 1 1 auto; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .tl-page .dsc-bar span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width var(--t-std) var(--ease); } .tl-page .dsc-q { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 var(--s-2); } .tl-page .dsc-help { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); margin: 0 0 var(--s-5); } .tl-page .dsc-dob { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 var(--s-3); } .tl-page .dsc-field { display: block; } .tl-page .dsc-nav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); } .tl-page .dsc-next { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--font-body); font-size: var(--t-button); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--surface); background: var(--gold); border: 1px solid var(--gold); border-radius: var(--r-sm); padding: .95rem 1.9rem; cursor: pointer; transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease), transform var(--t-fast) var(--ease); } .tl-page .dsc-next:hover { background: var(--gold-bright); border-color: var(--gold-bright); transform: translateY(-1px); } .tl-page .dsc-next[disabled] { opacity: .6; cursor: progress; transform: none; } .tl-page .dsc-back, .tl-page .dsc-skip { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--t-small); letter-spacing: .04em; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; padding: .3rem .2rem; } .tl-page .dsc-back:hover, .tl-page .dsc-skip:hover { color: var(--gold); } .tl-page .dsc-err { font-family: var(--font-body); font-size: var(--t-small); line-height: 1.6; color: var(--error); margin-top: var(--s-2); } .tl-page .dsc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .tl-page .dsc-chip { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .6rem 1.15rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tl-page .dsc-chip:hover { border-color: var(--gold); color: var(--gold); } .tl-page .dsc-chip.sel { background: var(--gold); border-color: var(--gold); color: var(--surface); } .tl-page .dsc-toggle { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-2); cursor: pointer; margin-top: .2rem; } .tl-page .dsc-toggle input { width: 20px; height: 20px; accent-color: var(--gold); } .tl-page .dsc-fine { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); margin-top: var(--s-4); } .tl-page .dsc-fine a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } .tl-page .dsc-hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; opacity: 0; } /* Discover / finder result -------------------------------------------- */ .tl-page .dsc-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 0; } .tl-page .dsc-val { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: var(--s-4); min-width: 0; } .tl-page .dsc-val .k { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); } .tl-page .dsc-val .v { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); margin-top: .3rem; line-height: 1.2; } .tl-page .dsc-val .s { font-size: var(--t-caption); line-height: 1.6; color: var(--ink-3); margin-top: .35rem; } .tl-page .dsc-season { display: inline-block; font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .06em; color: var(--gold); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .45rem 1rem; background: var(--gold-soft); margin: var(--s-4) 0 0; } .tl-page .dsc-line { border-left: 2px solid var(--gold); background: var(--gold-soft); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); margin: var(--s-3) 0 0; } .tl-page .dsc-line .k { font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; } .tl-page .dsc-line p { margin: 0; font-size: var(--t-small); line-height: 1.75; color: var(--ink-2); } .tl-page .dsc-deeper { border-top: 1px solid var(--line); margin-top: var(--s-6); padding-top: var(--s-5); } .tl-page .dsc-deeper h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; color: var(--ink); margin: 0 0 var(--s-2); } .tl-page .dsc-deeper p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); margin: 0 0 var(--s-4); } .tl-page .dsc-deeper .btn + .btn { margin-left: var(--s-2); } .tl-page .dsc-note { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); margin-top: var(--s-3); } .tl-page .dsc-disc { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-3); } /* ================================================================== 8. QUIZ (crystal quiz) chips + steps ================================================================== */ .tl-page .quiz-card { max-width: 680px; } .tl-page .quiz-opts { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* ================================================================== 8b. THE CRYSTAL QUIZ (.cq-*) — same language as the finders ================================================================== */ .tl-page .cq-card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); max-width: 720px; margin: 0 0 var(--s-5); box-shadow: var(--shadow-sm); scroll-margin-top: 96px; } .tl-page .cq-progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); font-family: var(--font-body); font-size: var(--t-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); } .tl-page .cq-bar { flex: 1 1 auto; height: 3px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; } .tl-page .cq-bar span { display: block; height: 100%; width: 33.3%; background: linear-gradient(90deg, var(--gold), var(--gold-bright)); transition: width var(--t-std) var(--ease); } .tl-page .cq-q { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.25; color: var(--ink); margin: 0 0 var(--s-2); } .tl-page .cq-help { font-size: var(--t-small); line-height: 1.7; color: var(--ink-3); margin: 0 0 var(--s-5); } .tl-page .cq-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .tl-page .cq-chip { display: inline-flex; align-items: center; min-height: 48px; cursor: pointer; font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: .62rem 1.2rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tl-page .cq-chip:hover { border-color: var(--gold); color: var(--gold); } .tl-page .cq-chip.sel { background: var(--gold); border-color: var(--gold); color: var(--surface); } .tl-page .cq-nav { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); } .tl-page .cq-back { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-size: var(--t-small); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; padding: .3rem .2rem; } .tl-page .cq-back:hover { color: var(--gold); } .tl-page .cq-disc { font-size: var(--t-caption); line-height: 1.7; color: var(--ink-muted); border-top: 1px solid var(--line); margin-top: var(--s-4); padding-top: var(--s-3); } .tl-page .cq-k { font-size: var(--t-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .tl-page .cq-primary { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: linear-gradient(165deg, var(--gold-soft), transparent 55%), var(--surface-muted); padding: clamp(1.2rem, .9rem + 1vw, 1.7rem); margin: var(--s-4) 0 var(--s-5); } .tl-page .cq-primary h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); font-weight: 500; line-height: 1.15; color: var(--ink); margin: .3rem 0 .2rem; outline: none; } .tl-page .cq-primary h3:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .tl-page .cq-assoc { font-style: italic; color: var(--gold); font-size: var(--t-small); margin: 0 0 var(--s-4); } .tl-page .cq-block { margin: var(--s-4) 0 0; } .tl-page .cq-block p { margin: .25rem 0 0; font-size: var(--t-small); line-height: 1.72; color: var(--ink-2); } .tl-page .cq-shop { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-3); font-size: var(--t-caption); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; } .tl-page .cq-shop:hover { color: var(--gold-bright); } .tl-page .cq-also { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin-top: var(--s-3); } .tl-page .cq-alsocard { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); background: var(--surface); min-width: 0; } .tl-page .cq-alsocard h4 { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 600; color: var(--ink); margin: .15rem 0 .3rem; } .tl-page .cq-alsocard p { font-size: var(--t-caption); color: var(--ink-3); line-height: 1.65; margin: 0; } .tl-page .cq-ctas { text-align: center; border-top: 1px solid var(--line); margin-top: var(--s-6); padding-top: var(--s-5); } .tl-page .cq-ctas p { font-size: var(--t-small); color: var(--ink-3); margin: 0 0 var(--s-4); } .tl-page .cq-ctas .btn + .btn { margin-left: var(--s-2); } @media (max-width: 700px) { .tl-page .cq-also { grid-template-columns: minmax(0, 1fr); } .tl-page .cq-ctas .btn { width: 100%; } .tl-page .cq-ctas .btn + .btn { margin-left: 0; margin-top: var(--s-3); } } /* ================================================================== 8c. THE TWO REACT ISLANDS (/find-your-crystal/, /tarot/) Those pages must NOT carry `.tl-page` on : the apps ship a Tailwind build whose utility names (.block, .card, .prose …) would collide with the page-shell rules above. So the only thing they get is this self-contained strip, scoped to a wrapper element we own. ================================================================== */ .tl-island { border-bottom: 1px solid var(--line); background: var(--bg-2); } .tl-island-inner { width: 100%; max-width: var(--w-page); margin-inline: auto; padding: var(--s-3) var(--pad-x); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); } .tl-island-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: var(--t-caption); letter-spacing: .06em; color: var(--ink-muted); } .tl-island-crumb a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .tl-island-crumb a:hover { color: var(--gold); border-bottom-color: var(--line-strong); } .tl-island-crumb .sep { color: var(--line-strong); } .tl-island-note { font-family: var(--font-body); font-size: var(--t-caption); color: var(--ink-muted); } .tl-island-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 640px) { .tl-island-inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); } } /* ================================================================== 9. MOTION — nothing may be left invisible ================================================================== */ .tl-page .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .tl-page .reveal.in, .tl-page .reveal.is-in { opacity: 1; transform: none; } /* The site-wide reveal sweep in service.js is rAF-driven, and rAF is paused in a background tab — which can strand a whole section at opacity 0. Two JS-independent safety nets, so nothing on a tools page can ever be invisible: 1. where scroll-driven animations exist, drive the reveal from CSS itself; 2. everywhere else, pin it visible a few seconds after load regardless. */ @keyframes tl-reveal { to { opacity: 1; transform: none; } } @supports (animation-timeline: view()) { .tl-page .reveal { /* two animations: the scroll-driven reveal, and a wall-clock failsafe that pins the end state after 4s even if the scroll timeline never advances. */ animation-name: tl-reveal, tl-reveal; animation-timeline: view(), auto; animation-range: entry 0% entry 45%, normal; animation-duration: auto, 0s; animation-delay: 0s, 4s; animation-timing-function: linear, linear; animation-fill-mode: both, forwards; } } @supports not (animation-timeline: view()) { .tl-page .reveal { animation: tl-reveal 0s linear 4s forwards; } } @media (prefers-reduced-motion: reduce) { .tl-page .reveal { opacity: 1; transform: none; animation: none; } } /* ================================================================== 10. RESPONSIVE — genuinely usable at 320–390 ================================================================== */ @media (max-width: 1024px) { .tl-page .hub-grid, .tl-page .tl-grid, .tl-page .related { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-page .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .tl-page .hub-grid, .tl-page .tl-grid, .tl-page .tl-grid-2, .tl-page .related, .tl-page .tools-grid { grid-template-columns: minmax(0, 1fr); } .tl-page .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-page .dsc-dob { grid-template-columns: minmax(0, 1fr); } .tl-page .tl-fieldrow { grid-template-columns: minmax(0, 1fr); } .tl-page .dsc-vals { grid-template-columns: minmax(0, 1fr); } .tl-page .tool-facts { grid-template-columns: minmax(0, 1fr); } .tl-page .dsc-nav { gap: var(--s-3); } .tl-page .dsc-next, .tl-page .tool-btn, .tl-page .tl-btn { width: 100%; } .tl-page .hero-ctas .btn { width: 100%; } .tl-page .cta-band .btn { width: 100%; } .tl-page .cta-band .btn + .btn { margin-left: 0; margin-top: var(--s-3); } .tl-page .dsc-deeper .btn { width: 100%; } .tl-page .dsc-deeper .btn + .btn { margin-left: 0; margin-top: var(--s-3); } .tl-page .tbl { display: block; overflow-x: auto; } } @media (max-width: 400px) { .tl-page .facts { grid-template-columns: minmax(0, 1fr); } } /* ================================================================== 12. GENERATED CELESTIAL ART (art-lib.js) Every tools / horoscope / compatibility page now carries a drawing generated from its own slug, and every card on the hub carries a small mark in the family that matches what the tool actually does. .hero.art-hero — the drawing sits in the right-hand gutter beside the hero copy, never underneath it. Below 860px it goes full width and dims further, because there is no gutter left to hide in. .hub-card .art-mark — a 16:10 tile at the top of each of the 24 cards. Two bugs in the shared rules are fixed here in scope rather than in lod.css: (a) .art-hero > svg is inset:0 and can overflow to the right; (b) .art-band resolves its aspect-ratio by shrinking width unless an explicit width is given. ================================================================== */ .tl-page .art-band { width: 100%; } /* The hero is normally capped at --w-text (900px). The art needs the whole container, so the header widens to fill it and the copy is held back by a padding instead — which keeps the measure sane AND keeps the type clear of the drawing entirely. Measured: with the copy reaching to --w-text the art ran under the lede at 4.29:1, below AA. Held back to 58% it does not touch the type at all, so there is nothing left to fail. */ .tl-page .hero.art-hero { max-width: none; padding-right: 42%; } .tl-page .hero.art-hero > svg.lod-art { left: auto; right: 0; width: 36%; opacity: .5; } /* Below 860px there is no gutter to hide in: the shared veil switches to a top-to-bottom wash and the art runs full width behind the copy, so it drops to a level that keeps AA even before the veil is counted. */ @media (max-width: 860px) { .tl-page .hero.art-hero { padding-right: 0; } .tl-page .hero.art-hero > svg.lod-art { left: 0; right: 0; width: 100%; opacity: .2; } } /* A small art tile at the head of every hub card. `span` so it stays legal inside the card's own ; `block` so the aspect-ratio resolves. */ .tl-page .hub-card .art-mark, .tl-page .tl-card .art-mark { display: block; width: 100%; margin-bottom: var(--s-1); } .tl-page .hub-card .art-mark > svg.lod-art { opacity: .78; } .tl-page a.hub-card:hover .art-mark { border-color: var(--line-strong); } /* ================================================================== 11. LAST WORD — the `hidden` attribute always wins Several rules above give buttons and panels an explicit display, which would otherwise beat the UA `[hidden]` rule and break every step flow. Kept last so equal-specificity ties resolve in its favour. ================================================================== */ .tl-page [hidden] { display: none; }