/* Hub styles for the /tips/ index and the seven category hubs. Load alongside tips-shared.css, which carries the breadcrumb bar, buttons, reg-plate CTA form, FAQ accordion and the overflow hardening. The index uses .tips-page / .tips-hero; the category hubs use .cat-page / .cat-hero. Everything below the hero is common. */ /* ── Page container ── max-width/min-width matter: is a flex column (style.css), so without them this container refuses to shrink below its min-content width and drags the mobile viewport out with it. */ .tips-page, .cat-page { max-width: 1300px; margin: 0 auto; padding: 0 2rem 4rem; width: 100%; min-width: 0; } /* Hub breadcrumbs align with .tips-page / .cat-page (1300px), not with the article layout's 1400px, which is what tips-shared.css defaults to. */ .breadcrumb-inner { max-width: 1300px; } /* ── Heroes ── */ .tips-hero, .cat-hero { text-align: center; padding: 0.88rem 2rem 0.75rem; background: linear-gradient(135deg, rgba(255,107,0,0.08) 0%, rgba(37,99,235,0.06) 100%); border-bottom: 1px solid rgba(255,255,255,0.06); } .tips-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; background: linear-gradient(to right, #f8fafc, rgba(248,250,252,0.7)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.75rem; } .tips-hero p { color: var(--text-dim); font-size: 1.15rem; max-width: 600px; margin: 0 auto; } .cat-hero h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 800; color: var(--text-main); margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .cat-hero p { color: var(--text-dim); font-size: 1.1rem; max-width: 720px; margin: 0 auto; line-height: 1.6; } /* Hero CTA — same content as the bottom CTA, without the card chrome */ .hero-cta { margin-top: 1.5rem; } .hero-cta p { color: var(--text-dim); font-size: 1rem; max-width: none; margin: 0 auto 1.25rem; } .hero-cta p strong, .bottom-cta p strong { color: var(--text-main); } .hero-cta .cta-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ── Section headers ── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin: 3rem 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .section-header h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.6rem; } /* ── Card grid. Cluster headings are gone — every cluster's cards flow into ONE grid with no row breaks. The cluster anchor id sits on the first card of each cluster; scroll-margin keeps jumps clear of the header. ── */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .tips-page .card-grid { margin-top: 3rem; } /* Frosted glass cards (VahanBazaar liquid-glass recipe) */ .tip-card { scroll-margin-top: 100px; background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.15) 100%); backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); border-radius: 32px; border: 1px solid; border-color: rgba(255,255,255,0.5) rgba(255,255,255,0.15) rgba(255,255,255,0.15) rgba(255,255,255,0.5); box-shadow: inset 0 1px 1px rgba(255,255,255,0.6), inset 0 0 20px rgba(255,255,255,0.05), 0 0 0 0.5px rgba(255,255,255,0.1), 0 4px 16px rgba(0,0,0,0.12), 0 12px 32px rgba(0,0,0,0.18); overflow: hidden; position: relative; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, background 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .tip-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%); border-radius: 32px 32px 0 0; pointer-events: none; } .tip-card:hover { transform: translateY(-8px) scale(1.02); background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.2) 100%); box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 0 30px rgba(255,255,255,0.1), 0 0 0 0.5px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.15), 0 20px 48px rgba(0,0,0,0.2); } .tip-card-body { padding: 1.5rem 1.65rem; flex: 1; display: flex; flex-direction: column; } .tip-card-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; margin-bottom: 0.65rem; letter-spacing: 0.3px; width: fit-content; } .badge-orange { background: rgba(255,107,0,0.15); color: #ff8a3d; } .badge-blue { background: rgba(59,130,246,0.15); color: #60a5fa; } .badge-green { background: rgba(34,197,94,0.15); color: #4ade80; } .badge-purple { background: rgba(168,85,247,0.15); color: #c084fc; } .badge-red { background: rgba(239,68,68,0.12); color: #f87171; } .badge-teal { background: rgba(20,184,166,0.15); color: #2dd4bf; } .badge-amber { background: rgba(245,158,11,0.15); color: #fbbf24; } .badge-pink { background: rgba(236,72,153,0.15); color: #f472b6; } .tip-card-title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-main); } .tip-card-excerpt { font-size: 0.85rem; color: var(--text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.75rem; flex: 1; } .tip-card-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.78rem; color: rgba(255,255,255,0.3); } /* ── Category browse grid (index only) ── */ .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .cat-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 1.1rem; text-decoration: none; color: inherit; transition: all 0.2s; display: flex; align-items: center; gap: 0.75rem; } .cat-card:hover { border-color: rgba(255,107,0,0.25); background: rgba(255,255,255,0.06); transform: translateY(-2px); } .cat-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .cat-card-text h3 { font-size: 0.88rem; font-weight: 600; color: var(--text-main); margin-bottom: 2px; } .cat-card-text span { font-size: 0.75rem; color: var(--text-dim); } /* ── Bottom CTA ── */ .bottom-cta { background: linear-gradient(135deg, rgba(255,107,0,0.1), rgba(37,99,235,0.08)); border: 1px solid rgba(255,107,0,0.2); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; margin-top: 3rem; } .bottom-cta h2, .bottom-cta h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.5rem; } .bottom-cta p { color: var(--text-dim); font-size: 1rem; margin-bottom: 1.5rem; } .bottom-cta .cta-btns { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ── Loading / empty / search (index only) ── */ .loading-state { text-align: center; padding: 4rem 2rem; color: var(--text-dim); } .search-results-info { color: var(--text-dim); font-size: 0.9rem; margin: 1.5rem 0; } .hidden { display: none !important; } .no-results { text-align: center; padding: 3rem; color: var(--text-dim); } .no-results p { font-size: 1.1rem; margin-bottom: 0.5rem; } /* ── Editorial intro — static, crawlable, JS-independent ── */ .tips-about, .cat-intro { max-width: 760px; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .tips-about h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-main); margin: 1.5rem 0 1rem; } .cat-intro h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-main); margin-bottom: 1rem; } .tips-about p, .cat-intro p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1rem; } /* Justified prose on the seven category hubs, matching the guides. No media query — phones included. `.cat-intro` is the hubs' editorial prose; the /tips/ index uses `.tips-about` and is deliberately not justified, being a card index rather than a reading page. Hyphenation is required: without it a justified ~340px mobile column opens rivers of white space. */ .cat-intro p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } .tips-about a, .cat-intro a { color: var(--primary); } .cat-intro strong { color: var(--text-main); } /* ── FAQ section wrapper (the item chrome lives in tips-shared.css) ── */ .faq-section { max-width: 760px; margin: 3.5rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .faq-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--text-main); margin-bottom: 1.25rem; } /* ── Official sources ── */ .sources-block { max-width: 760px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .sources-block h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem; } .sources-block > p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.25rem; } .sources-list { list-style: none; margin: 0; padding: 0; } .sources-list li { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.9rem; line-height: 1.6; color: var(--text-dim); } .sources-list li:last-child { border-bottom: none; } .sources-list a { color: var(--primary); text-decoration: none; font-weight: 600; } .sources-list a:hover { text-decoration: underline; } .sources-list .src-note { display: block; color: var(--text-dim); font-weight: 400; margin-top: 2px; } /* Hubs sit the legal note slightly lower than articles do. */ .legal-note { margin-top: 1.75rem; } /* ── Sibling cluster links ── */ .sibling-block { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08); } .sibling-block h2 { font-size: 1.2rem; font-weight: 700; color: var(--text-main); margin-bottom: 1rem; } .sibling-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .sibling-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--text-main); text-decoration: none; font-size: 0.88rem; transition: all 0.2s; } .sibling-link:hover { border-color: rgba(255,107,0,0.3); background: rgba(255,255,255,0.07); } .sib-icon { font-size: 1rem; } .sib-label { flex: 1; } .sib-count { font-size: 0.75rem; color: var(--text-dim); } /* ── Responsive ── */ @media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, 1fr); } .category-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tips-page, .cat-page { padding: 0 1rem 3rem; } .tips-hero, .cat-hero { padding: 0.62rem 1.25rem 0.5rem; } .card-grid { grid-template-columns: 1fr; } .category-grid { grid-template-columns: 1fr; } .section-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .bottom-cta { padding: 1.75rem 1.25rem; } .breadcrumb-bar { padding: 2px 1rem; } } /* ── /tips/number-plates/ — the browse-by-code grid ─────────────────────── 43 cards is too many for the 3-column .card-grid used elsewhere in tips, and each card carries a code rather than a headline, so they can be much smaller. Its own class rather than a modifier on .card-grid: nothing above changes, so the other ~600 pages using this sheet are untouched. Contrast, measured on the composited surface — orange .15 over the #1a1f2e gradient stop, then the card's own white .16, giving rgb(91,76,74): plate badge #0f1419 on #f5c518 11.36:1 text, needs 4.5 PASS period #e8eef7 on card 6.94:1 text, needs 4.5 PASS meta white .72 on card 5.14:1 text, needs 4.5 PASS focus ring #ffb45c vs card 4.60:1 needs 3.0 PASS The card CHROME is below 3:1 and deliberately so — fill 1.66:1 and border 1.56:1 against the page. That is the existing tips house style, not something introduced here (.tip-card is 2.22:1 and 1.77:1 on the same surface), and it is not an SC 1.4.11 failure: the control is identified by its link text and the high-contrast plate badge, so the boundary is not information "required to identify" it. Raising the border to clear 3:1 would need roughly .5 alpha and would not match anything else in tips. Recorded rather than left to be rediscovered. */ .plate-blob-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.5rem; } .plate-blob { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.15rem 0.75rem 1rem; border-radius: 16px; text-decoration: none; background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.14); transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; /* 44x44 is the SC 2.5.8 target minimum; these are far larger, but state it so a future tightening of the padding cannot quietly go under. */ min-height: 44px; } .plate-blob:hover, .plate-blob:focus-visible { transform: translateY(-3px); border-color: rgba(255,112,10,0.55); background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.09) 55%, rgba(255,255,255,0.14) 100%); } .plate-blob:focus-visible { outline: 3px solid #ffb45c; outline-offset: 2px; } /* The code, set as a number plate. Charles Wright is the real plate face and we do not ship it; the stack below is the closest common condensed grotesque and falls back to any sans rather than to a serif. */ .plate-blob-plate { font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 1.85rem; letter-spacing: 0.06em; line-height: 1; color: #0f1419; background: #f5c518; border: 1px solid rgba(0,0,0,0.35); border-radius: 5px; padding: 0.34rem 0.85rem 0.28rem; } .plate-blob-period { font-size: 0.82rem; font-weight: 600; color: #e8eef7; text-align: center; } .plate-blob-meta { font-size: 0.74rem; color: rgba(255,255,255,0.72); text-align: center; font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .plate-blob-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .plate-blob-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .plate-blob-plate { font-size: 1.6rem; } }