/* ============================================================ NEST, supplemental styles for inner pages & forms UPDATED: 2026-08-07 Loaded AFTER css/style.css on every page, so on a tie THIS FILE WINS. ============================================================ HOW THIS FILE RELATES TO style.css css/style.css is the design system: the design tokens in :root (all the brand colours live there, and only there), typography, layout, and every shared component. THIS file is the pile of later passes on top of it. Nothing here declares a new brand colour. Everything uses var(--red), var(--navy), var(--gold), var(--cream) and so on, from style.css. => To change a colour, edit :root at the top of style.css, not here. IF A RULE IN style.css SEEMS TO HAVE NO EFFECT, LOOK HERE FIRST. Several blocks below deliberately override it, notably section padding, the typographic scale on phones, and checkbox and radio sizing. FILE MAP, in source order (each banner below is one of these): inner-page components ... .form-confirm, .prose, board avatars, .resource-block, .content-split, .page-toc, .cando panels, .info-strip, the 404 page DENSITY & MOBILE ........ pass 2. Tighter legal pages and a tighter global rhythm. THIS is where .section padding is reduced from the value in style.css. MOBILE (<= 768px) ....... the main phone pass, plus a 420px pass FORM FIX (pass 3) ....... checkbox and radio alignment. Required, see below REAL LOGO (pass 4) ...... .logo-emblem-img, the circular NEST badge SOCIAL / LATEST UPDATES . the homepage right-hand column and the Facebook embed frame LAND ACKNOWLEDGEMENT .... .land-ack and the short footer version There are no @media print rules in this file. All printing is handled by the @media print block in style.css. ============================================================ */ /* Form confirmation message (hidden until JS reveals it) HERITAGE NOTE: this pairs with the "form.nest-form" submit handler in js/main.js, which hides a form and reveals the .form-confirm element that follows it. NO FORM ON THIS SITE CURRENTLY USES class="nest-form", because all five forms post to Web3Forms and redirect to thank-you.html instead. The only .form-confirm in the HTML is on thank-you.html, where it is shown with an inline style:display:block rather than by JavaScript. Keep this style and the matching JS together: use both, or remove both. */ .form-confirm { display: none; background: #E8F5E9; border: 1.5px solid var(--green); border-left: 4px solid var(--green); border-radius: var(--radius-lg); padding: 2rem; text-align: center; } .form-confirm h3 { color: #1b5e20; margin-bottom: 0.5rem; } .form-confirm p { color: #2e5d33; margin-bottom: 0; } .form-confirm .check-big { font-size: 2.5rem; margin-bottom: 0.5rem; } /* Prose blocks for content / legal pages */ .prose { max-width: 820px; margin: 0 auto; } .prose h2 { margin: 2rem 0 0.75rem; } .prose h3 { margin: 1.5rem 0 0.5rem; color: var(--red); font-size: 1.2rem; } .prose p { color: var(--gray-700); } .prose ul.bullets { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; } .prose ul.bullets li { margin-bottom: 0.4rem; color: var(--gray-700); } .prose ol.numbered { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; } .prose ol.numbered li { margin-bottom: 0.5rem; color: var(--gray-700); } .prose .lead { color: var(--gray-700); margin-bottom: 1.5rem; } /* Board member photo support */ .board-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .board-card .role-leader { color: var(--gold); } /* Resource category blocks */ .resource-block { margin-bottom: 2.5rem; } .resource-block h3 { display: flex; align-items: center; gap: 0.5rem; color: var(--navy); font-size: 1.25rem; border-bottom: 2px solid var(--gold); padding-bottom: 0.5rem; margin-bottom: 1rem; } .resource-list { display: flex; flex-direction: column; gap: 0.5rem; } .resource-list li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--gray-200); font-size: 0.92rem; color: var(--gray-700); } .resource-list li:last-child { border-bottom: none; } .resource-list li .dot { color: var(--red); flex-shrink: 0; } /* Two-column content layout */ .content-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 768px) { .content-split { grid-template-columns: 1fr; gap: 2rem; } } /* Sticky in-page nav for long pages */ .page-toc { background: var(--cream); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem; } .page-toc h4 { color: var(--navy); font-family: sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; } .page-toc ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .page-toc ul li a { font-size: 0.9rem; color: var(--red); font-weight: 500; } /* Can / Cannot do panels */ .cando-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 768px) { .cando-grid { grid-template-columns: 1fr; } } .cando { border-radius: var(--radius-lg); padding: 1.75rem; } .cando.can { background: #E8F5E9; border: 1px solid #b6dcb9; } .cando.cannot { background: var(--red-light); border: 1px solid #e6c5c5; } .cando h3 { font-size: 1.1rem; margin-bottom: 0.75rem; } .cando.can h3 { color: #1b5e20; } .cando.cannot h3 { color: var(--red-dark); } .cando ul { display: flex; flex-direction: column; gap: 0.5rem; } .cando ul li { display: flex; gap: 0.5rem; font-size: 0.92rem; color: var(--gray-700); } .cando.can ul li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; } .cando.cannot ul li::before { content: "✕"; color: var(--red); font-weight: 700; flex-shrink: 0; } /* Info strip for newcomer / instagram banner repeats */ .info-strip { background: var(--navy-light); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 2rem 0; font-size: 0.95rem; color: var(--gray-700); } .info-strip strong { color: var(--navy); } /* 404 page */ .page-404 { text-align: center; padding: 6rem 1.5rem; } .page-404 .big { font-size: 6rem; font-family: 'Merriweather', serif; color: var(--gold); line-height: 1; margin-bottom: 1rem; } .page-404 h1 { margin-bottom: 0.75rem; } .page-404 p { color: var(--gray-700); max-width: 480px; margin: 0 auto 2rem; } /* ============================================================ NOTE ON THE BLOCK BELOW: it deliberately re-declares .section and .section--sm padding, the .prose rhythm and the grid gaps that style.css already set, to make the whole site denser. That is why editing spacing in style.css sometimes appears to do nothing. ============================================================ */ /* ============================================================ DENSITY & MOBILE OPTIMIZATION (added pass 2) ============================================================ */ /* ---- Smaller, denser legal / policy pages ---- */ .legal-page { padding: 2.5rem 0; font-size: 0.86rem; } .legal-page .container--narrow { max-width: 720px; } .legal-page h1 { font-size: clamp(1.5rem, 3vw, 2rem); } .legal-meta { margin-bottom: 1.25rem; font-size: 0.78rem; } .legal-section { margin-bottom: 1.4rem; } .legal-section h2 { font-size: 1.05rem; padding-bottom: 0.35rem; margin-bottom: 0.6rem; } .legal-section h3 { font-size: 0.92rem; margin: 0.7rem 0 0.3rem; } .legal-section p { font-size: 0.86rem; line-height: 1.55; margin-bottom: 0.6rem; } .legal-section ul, .legal-section ol { margin-bottom: 0.7rem; padding-left: 1.25rem; } .legal-section ul li, .legal-section ol li { font-size: 0.85rem; margin-bottom: 0.25rem; line-height: 1.5; } .legal-notice { padding: 0.85rem 1.1rem; margin: 1.1rem 0; font-size: 0.86rem; } /* Footer fine print smaller */ .footer-bottom-note p { font-size: 0.72rem; line-height: 1.5; } /* ---- Tighter global rhythm ---- */ .section { padding: 3.5rem 0; } .section--sm { padding: 2.25rem 0; } .section-title { margin-bottom: 2rem; } .prose p { line-height: 1.6; margin-bottom: 0.85rem; } .prose h2 { margin: 1.5rem 0 0.6rem; } .prose h3 { margin: 1.1rem 0 0.4rem; } .grid-2, .grid-3 { gap: 1.5rem; } .values-grid { gap: 1.5rem; } .card { padding: 1.6rem; } .value-card { padding: 1.6rem; } .resource-block { margin-bottom: 1.75rem; } /* ============================================================ BREAKPOINTS in this file: 900px (the homepage social panel stacks), 768px (the main phone pass, below), 480px (logo size), 420px (very small phones). The nav swap from desktop menu to hamburger happens at 768px and lives in style.css, not here. ============================================================ */ /* ============================================================ MOBILE (<= 768px), denser, smaller, optimized for phones ============================================================ */ @media (max-width: 768px) { html { font-size: 15px; } /* Trim vertical padding everywhere */ .section { padding: 2.25rem 0; } .section--sm { padding: 1.5rem 0; } .section-title { margin-bottom: 1.4rem; } .page-hero { padding: 2.25rem 0 1.75rem; } .container, .container--narrow { padding: 0 1.1rem; } /* Cards & grids tighter */ .grid-2, .grid-3, .grid-4, .values-grid, .board-grid, .membership-grid { gap: 1rem; } .card { padding: 1.25rem; border-radius: 12px; } .card-icon { font-size: 2rem; margin-bottom: 0.6rem; } .value-card { padding: 1.25rem; } .value-card .val-icon { font-size: 2rem; margin-bottom: 0.5rem; } /* Typography scale down a touch */ .lead { font-size: 1rem; } .prose p, .prose ul.bullets li, .prose ol.numbered li { font-size: 0.9rem; line-height: 1.55; } .prose p { margin-bottom: 0.7rem; } /* Legal pages even more compact on phones */ .legal-page { padding: 1.75rem 0; } .legal-section { margin-bottom: 1.15rem; } .legal-section p, .legal-section li { font-size: 0.82rem; } /* Resource & checklist rows tighter */ .resource-block { margin-bottom: 1.35rem; } .resource-list li, .checklist li { padding: 0.4rem 0; font-size: 0.86rem; } .resource-table th, .resource-table td { padding: 0.55rem 0.7rem; font-size: 0.82rem; } /* Forms: full width, tighter */ .form-wrap { padding: 1.4rem; } .form-group { margin-bottom: 0.9rem; } .form-intro, .form-wrap .notice { padding: 0.8rem 1rem; margin-bottom: 1.1rem; font-size: 0.85rem; } /* Social banner wraps cleanly, smaller */ .social-banner { padding: 0.5rem 0; } .social-banner-inner { gap: 0.5rem 0.75rem; font-size: 0.78rem; } .social-banner-inner > span { width: 100%; text-align: center; } .social-banner a { padding: 0.2rem 0.5rem; } /* Announcement strip smaller */ .announcement { font-size: 0.8rem; padding: 0.5rem 0.85rem; } /* Buttons: comfortable tap targets but not oversized */ .btn { padding: 0.7rem 1.2rem; font-size: 0.92rem; } .btn-lg { padding: 0.85rem 1.4rem; font-size: 0.98rem; } .hero-actions .btn, .cta-section .btn { width: 100%; justify-content: center; } /* Footer denser */ .footer-main { padding: 2.25rem 0 1.25rem; } .footer-grid { gap: 1.5rem; } .footer-bottom-note p { font-size: 0.7rem; } /* TOC chips scroll-friendly */ .page-toc { padding: 1rem 1.1rem; } .page-toc ul { gap: 0.4rem 0.9rem; } .page-toc ul li a { font-size: 0.85rem; } /* Stats bar tighter */ .stats-bar { padding: 1.75rem 0; } .stat-item h3 { font-size: 2rem; } /* Membership / payment boxes */ .membership-card { padding: 1.5rem; } .price { font-size: 2.3rem; } .payment-box { padding: 1.4rem; } } /* Extra-small phones */ @media (max-width: 420px) { .hero-card { padding: 1.4rem; } .section-title h2 { font-size: 1.35rem; } .board-grid { grid-template-columns: 1fr 1fr; } .board-avatar { width: 64px; height: 64px; font-size: 1.4rem; } } /* ============================================================ DO NOT DELETE THE BLOCK BELOW. It is a real bug fix, not styling taste. Without it, .form-group input { width: 100% } in style.css stretches every checkbox and radio to the full width of the row and shoves the label to the far side, which made the consent boxes on the membership, volunteer, sponsorship, contact and RSVP forms almost unusable. ============================================================ */ /* ============================================================ FORM FIX (pass 3): checkbox / radio alignment on all viewports The base rule .form-group input{width:100%} stretched checkboxes and pushed labels to the far side. Restore natural sizing. ============================================================ */ .form-group input[type="checkbox"], .form-group input[type="radio"] { width: auto; flex: 0 0 auto; } .checkbox-group { gap: 0.6rem; } .checkbox-item { display: flex; align-items: flex-start; gap: 0.55rem; } .checkbox-item input[type="checkbox"], .checkbox-item input[type="radio"] { width: 16px; height: 16px; margin-top: 0.2rem; flex: 0 0 auto; accent-color: var(--red); } .checkbox-item label { flex: 1 1 auto; margin: 0; font-weight: 400; line-height: 1.45; } .radio-group { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; } .radio-group .checkbox-item { width: auto; } /* ============================================================ REAL LOGO (pass 4): use the NEST circular badge as the emblem ============================================================ */ .logo-emblem-img { width: 46px; height: 46px; border-radius: 50%; background: #fff; /* crisp white ring behind the badge on navy */ flex-shrink: 0; display: block; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); } .footer-brand .logo-emblem-img { width: 48px; height: 48px; } @media (max-width: 480px){ .logo-emblem-img { width: 40px; height: 40px; } } /* ============================================================ The block below styles the homepage "Latest from NEST" column: the two follow cards and the frame around the Facebook page-plugin iframe. .fb-embed has min-height:520px on purpose, so the page does not jump when the (lazily loaded, third-party) iframe finally arrives. .fb-fallback is the paragraph shown underneath, which always links straight to Facebook in case the embed is blocked or does not render. It is the graceful degradation, leave it in. ============================================================ */ /* ============================================================ SOCIAL / LATEST UPDATES PANEL (homepage, desktop right column) ============================================================ */ .latest-updates { background: var(--cream); } .latest-grid { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; } .latest-intro .logo-lockup { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; } .latest-intro .logo-lockup img { width: 64px; height: 64px; border-radius: 50%; } .latest-intro h2 { margin: 0; } .ig-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.25rem; box-shadow: var(--shadow-sm); } .ig-card h4 { color: var(--navy); margin-bottom: 0.35rem; } .ig-card p { font-size: 0.9rem; color: var(--gray-700); margin-bottom: 0.85rem; } .fb-embed { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); min-height: 520px; } .fb-embed iframe { width: 100%; border: none; display: block; } .fb-fallback { padding: 1.25rem; text-align: center; } @media (max-width: 900px) { .latest-grid { grid-template-columns: 1fr; gap: 1.75rem; } .fb-embed { max-width: 380px; margin: 0 auto; } } /* ============================================================ LAND ACKNOWLEDGEMENT. .land-ack is the full panel on about.html; .footer-landack is the short version that appears on every page. The wording in the HTML is agreed wording. Style it, do not reword it. ============================================================ */ /* ============================================================ LAND ACKNOWLEDGEMENT (pass 5) ============================================================ */ .land-ack { background: var(--cream); border-left: 5px solid var(--gold); border-radius: var(--radius-lg); padding: 2.5rem; } .land-ack-head { display: flex; align-items: center; gap: 0.5rem; color: var(--red); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 0.6rem; } .land-ack h2 { margin-bottom: 1rem; } .land-ack p { color: var(--gray-700); } .land-ack p:last-child { margin-bottom: 0; } .land-ack .miigwech { font-style: italic; color: var(--navy); font-weight: 600; } @media (max-width: 768px) { .land-ack { padding: 1.5rem; } } /* concise footer version, appears on every page */ .footer-landack { border-top: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 0 0.25rem; } .footer-landack p { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; max-width: 960px; } .footer-landack a { color: var(--gold); } .footer-landack a:hover { color: #fff; } /* ============================================================ NEPAL RELIEF BAR (top of every page) Sits above the social bar, so it is the first thing on the page after the skip link. It carries the QR for the Government of Nepal's Prime Minister's Disaster Relief Fund, pmdrf.nchl.com.np, operated through NCHL. THE QR AND THE LINK MUST ALWAYS POINT AT THE SAME PLACE. The QR image was decoded and verified before publishing, and again after it was resized, because a badly scaled QR stops scanning without looking any different. If you replace images/pmdrf-qr.png, decode the new file before you ship it. BOTH A QR AND A LINK, on purpose. Somebody at a laptop scans the code with their phone. Somebody already on their phone cannot scan their own screen, so they need the button. The QR sits on a white pad because a QR on a dark ground does not scan. TO REMOVE THIS BAR when the appeal is over: delete the .relief-bar block from every page, and this rule. Nothing else depends on it. ============================================================ */ .relief-bar { background: var(--navy-mid, #253562); color: #fff; padding: 0.75rem 0; } .relief-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; text-align: left; } .relief-qr { width: 108px; height: 108px; background: #fff; padding: 6px; border-radius: 6px; display: block; flex-shrink: 0; } .relief-text { flex: 1 1 320px; min-width: 260px; font-size: 0.92rem; line-height: 1.5; } .relief-text strong { display: block; font-size: 1.02rem; margin-bottom: 0.15rem; } .relief-text .sub { opacity: 0.85; font-size: 0.84rem; } .relief-bar .btn { flex-shrink: 0; } @media (max-width: 600px) { .relief-inner { justify-content: flex-start; } .relief-qr { width: 84px; height: 84px; } .relief-text { flex-basis: 100%; } } /* ============================================================ OFFICIAL CHANNELS NOTICE (footer, every page) .footer-bottom-note already existed at 0.72rem as general fine print. This block promotes it into a readable notice, because it is the thing that keeps somebody from sending money to a fake "NEST" account on a platform we are not even on. Fine print that nobody reads protects nobody. Still smaller than body text, still clearly footer material, but set apart with a rule above it and gold on the two sentences that matter. ============================================================ */ .footer-bottom-note { border-top: 1px solid rgba(255,255,255,0.16); margin-top: 1.5rem; padding-top: 1.1rem; } .footer-bottom-note p { font-size: 0.82rem; line-height: 1.6; margin-bottom: 0.6rem; } .footer-bottom-note p:last-child { margin-bottom: 0; } .footer-bottom-note strong { color: var(--gold); } .footer-bottom-note a { text-decoration: underline; } @media (max-width: 480px) { .footer-bottom-note p { font-size: 0.8rem; } } /* ============================================================ YATRA ONE: reserved for the logo and the banner title NARROWED DELIBERATELY. It was briefly applied to every heading, the accordion headers and both menus. That was too much: it is a display face, and at nav and sub-heading size it costs more in legibility than it gains in character. IT NOW APPEARS IN EXACTLY TWO PLACES: 1. the NEST wordmark in the header and footer 2. the big title in the page banner, the h1 in .page-hero and .hero Everything else, tab headings, section headings, accordion headers, the navigation, buttons and body copy, stays Merriweather and Inter. Please do not widen this again without looking at the phone menu first. ONE WEIGHT ONLY (400). The family ships a single weight, so any bold request makes the browser synthesise it and the strokes thicken unevenly. That is why 400 is stated explicitly: h1 defaults to bold otherwise. It also covers Devanagari, which is why the tagline can use it and match. ============================================================ */ .page-hero h1, .hero h1 { font-family: 'Yatra One', 'Merriweather', Georgia, serif; font-weight: 400; letter-spacing: 0.005em; line-height: 1.28; } /* The Devanagari tagline beside the wordmark, so it matches the mark above it */ .logo-text .tagline { font-family: 'Yatra One', sans-serif; font-size: 0.7rem; } /* ============================================================ THUNDER BAY QUIZ (thunder-bay-quiz.html) Compact by design. One question at a time, the whole card fitting a phone screen without scrolling, so answering feels quick rather than like a form. .quiz-opt is a real button. Do not turn it into a div, the keyboard support comes free from the element. .is-right and .is-wrong are set by the script after an answer. Both keep a text prefix in the feedback line as well as the colour, because colour alone is not an accessible signal. ============================================================ */ .quiz { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1.25rem; background: var(--white); } .quiz-bar { display: flex; justify-content: space-between; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-700); font-weight: 600; } .quiz-track { height: 4px; background: var(--gray-200); border-radius: 999px; margin: 0.6rem 0 1.1rem; overflow: hidden; } .quiz-fill { height: 100%; width: 0; background: var(--gold); transition: width 0.25s ease; } .quiz-q { font-size: 1.15rem; margin: 0 0 0.9rem; line-height: 1.35; color: var(--navy); } .quiz-opts { display: grid; gap: 0.5rem; } .quiz-opt { text-align: left; width: 100%; font: inherit; font-size: 0.95rem; padding: 0.7rem 0.9rem; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--white); color: var(--gray-900); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .quiz-opt:hover:enabled { border-color: var(--gold); background: var(--gold-light); } .quiz-opt:disabled { cursor: default; opacity: 1; } .quiz-opt.is-right { border-color: var(--green); background: #E8F5E9; color: #1b5e20; font-weight: 600; } .quiz-opt.is-wrong { border-color: var(--red); background: var(--red-light); color: var(--red-dark); } .quiz-fact { margin-top: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--radius); font-size: 0.9rem; line-height: 1.55; } .quiz-fact.ok { background: #E8F5E9; border-left: 4px solid var(--green); color: #1b5e20; } .quiz-fact.no { background: var(--gold-light); border-left: 4px solid var(--gold); color: #5a4000; } .quiz-next { margin-top: 0.9rem; } .quiz-disclaimer { font-size: 0.78rem; line-height: 1.55; color: var(--gray-700); margin-top: 1rem; } @media (max-width: 480px) { .quiz { padding: 1rem; } .quiz-q { font-size: 1.05rem; } .quiz-opt { font-size: 0.92rem; padding: 0.65rem 0.75rem; } } /* ============================================================ QUIZ ROUND PICKER (thunder-bay-quiz.html) Three cards, each a real