/* ===================================================================== BOTANICAL.ART — ADDITIONAL CSS Rebuilt 23 July 2026 (mobile header fix) Cleaned 27 September 2026 (multilingual header) Extended 6 October 2026 (Thai, Japanese, Traditional Chinese) Updated 7 October 2026 (flags removed, footer language line) Updated 7 October 2026, late (home hero fits the screen again) CHANGES IN THIS VERSION — marked [JUL26], [SEP26] and [OCT26] below: 1. [JUL26] Removed .site-branding { max-width: 68% } — a WIDTH cap on the logo, which let a tall logo grow the header. Replaced with a HEIGHT cap. 2. [JUL26] Scoped two leaked homepage-only rules back to .home (body background:white, and .site-footer background:transparent). These were running site-wide and turning every mobile page white. 3. [JUL26] Added a mobile-header block near the bottom. 4. [JUL26] Flagged two legacy patches for retirement once the header is verified. 5. [SEP26] REMOVED a stray flex-wrap block that was breaking the desktop menu onto two rows. It was pasted in from an instruction that said "delete this if present". 6. [SEP26] The home-page flag rule was rewritten to target the menu directly (see item 3 of the September block). 7. [SEP26] All multilingual header rules collected into ONE block at the very bottom, next to the July header block. 8. [SEP26] The below-header "flag strip" approach was ABANDONED: Astra does not render that row on this site. The flags now live in the Primary Menu, which is also what the burger uses, so one menu feeds desktop, mobile and every language. All its rules were removed. 9. [OCT26] ADDED one block at the very bottom for Thai, Japanese and Traditional Chinese: fonts, Thai heading line-height, upright collection taglines, no justified text, and the Chinese label in the language switcher. Every rule is scoped with :lang(), so the English, Italian, German, French and Spanish pages are untouched. 10. [OCT26b] 7 October: the two [SEP26 — LEGACY] .burger-btn rules (items 5 and 6 of the July block) DELETED. They styled the old hardcoded burger widget, which no longer exists. 11. [OCT26b] Flags removed from the header. DELETED: the desktop flag spacing rule and the home-page flag-hiding rule (September block, items 2 and 3) and the Chinese switcher-label rule (October block, item 5). The Astra burger styling (September item 1) is KEPT. 12. [OCT26b] ADDED the footer language line styles at the very bottom (.fd-lang-footer). The current language shows in bold. 13. [OCT26c] Home hero fixed on desktop. The "push image down 80px" rule (it cleared the old header flags) is RETIRED: the picture now starts right under the menu. ADDED a block at the very bottom that slims the home header to 64px and sizes the hero to one screen minus the header, so the scroll arrow sits above the fold again. ===================================================================== */ /* Button hover lift effect */ .wp-block-button__link, .button, .btn, input[type="submit"] { transition: transform 0.3s ease, box-shadow 0.3s ease; } .wp-block-button__link:hover, .button:hover, .btn:hover, input[type="submit"]:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } /* Hide post meta (author names, dates) */ .entry-meta, .ast-single-post-meta, .post-meta, .entry-header .entry-meta { display: none !important; } /* Remove Astra animations */ [class*="ast-animate"] { animation: none !important; } /* Responsive images */ .wp-block-image img, .entry-content img { max-width: 100%; height: auto; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* Desktop-only container width restrictions (769px and above) */ @media (min-width: 769px) { /* General container width for ALL pages including single posts */ .ast-container, .single .ast-container, .single-post .ast-container { max-width: 1400px; margin: 0 auto; } /* Home page specific targeting */ .home .site, .home .ast-container, .home .site-content, .home .ast-row, .home .ast-grid-common-col, .home #primary, .home .entry-content, .home .ast-separate-container .site-content > .ast-container, .home .ast-page-builder-template, .home .ast-plain-container, .home .ast-separate-container .ast-article-single, .home body > .site > .ast-container, .blog .ast-container, .archive .ast-container { max-width: 1400px !important; margin: 0 auto !important; } /* Single post specific targeting */ .single .site, .single .ast-container, .single .site-content, .single .ast-row, .single #primary, .single .entry-content, .single .ast-separate-container .site-content > .ast-container, .single .ast-separate-container .ast-article-single, .single-post .ast-container, .single-post .site-content, .single-post #primary { max-width: 1400px !important; margin: 0 auto !important; } /* For block editor/Gutenberg content */ .home .wp-block-group, .home .wp-block-columns, .home .wp-site-blocks, .home .wp-block-post-content, .single .wp-block-group, .single .wp-block-columns, .single .wp-site-blocks, .single .wp-block-post-content { max-width: 1400px !important; margin: 0 auto !important; } /* If using full-width template */ .home .ast-full-width-primary #primary, .home .ast-full-width-primary .site-content, .single .ast-full-width-primary #primary, .single .ast-full-width-primary .site-content { max-width: 1400px !important; margin: 0 auto !important; } /* HERO/FIRST SECTION ALIGNMENT - Desktop only */ .home .entry-content > *:first-child, .home .wp-block-cover:first-child, .home .wp-block-group:first-child, .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container, .home .entry-content > .wp-block-group:first-child > .wp-block-group__inner-container { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 40px !important; padding-right: 40px !important; } /* Nested content within first section */ .home .entry-content > *:first-child .wp-block-columns, .home .entry-content > *:first-child .wp-block-column, .home .entry-content > *:first-child .wp-block-heading, .home .entry-content > *:first-child .wp-block-paragraph, .home .entry-content > *:first-child .wp-block-buttons { max-width: 100% !important; } /* Subsequent sections */ .home .entry-content > *:not(:first-child) { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } } /* Mobile responsiveness */ @media (max-width: 768px) { /* Reset containers */ .home .ast-container, .home .site-content, .home #primary, .home .entry-content, .single .ast-container, .single .site-content, .single #primary, .single .entry-content { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; margin: 0 !important; box-sizing: border-box !important; } /* Override Astra responsive styles. NOTE: intentionally site-wide — the 0 10px side padding is doing useful work on the full-bleed article and collection pages. */ .ast-separate-container .ast-container, .ast-plain-container .ast-container, .ast-page-builder-template .ast-container, .ast-separate-container .site-content > .ast-container { width: 100% !important; max-width: 100% !important; padding: 0 10px !important; margin: 0 !important; } /* Mobile hero/first section */ .home .entry-content > .wp-block-cover:first-child, .home .entry-content > .wp-block-group:first-child, .home .wp-block-cover:first-child, .home .wp-block-group:first-child { min-height: 100vh !important; height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; object-fit: cover !important; width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Inner content containers */ .home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container, .home .entry-content > .wp-block-group:first-child .wp-block-group__inner-container, .home .wp-block-cover:first-child .wp-block-cover__inner-container, .home .wp-block-group:first-child .wp-block-group__inner-container { width: 100% !important; height: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; text-align: center !important; padding: 20px !important; max-width: none !important; } /* All blocks fill available width */ .home .wp-block-group, .home .wp-block-group__inner-container, .home .wp-block-cover, .home .wp-block-cover__inner-container, .home .wp-block-columns, .home .wp-block-column, .home .wp-block-media-text, .home .entry-content > * { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Fix blank space between blocks */ .home .wp-block-spacer { height: 20px !important; max-height: 20px !important; } /* Remove excessive margins */ .home .entry-content > * + * { margin-top: 0 !important; } /* Stack columns vertically */ .home .wp-block-columns { flex-direction: column !important; gap: 20px !important; } .home .wp-block-column { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } /* Images */ .home img, .home .wp-block-image img, .home .entry-content img { width: auto !important; max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto !important; } .home .wp-block-image.size-full img, .home .wp-block-cover img { width: 100% !important; } /* Typography */ .home h1, .home .wp-block-heading.has-text-align-center { font-size: 32px !important; line-height: 1.2 !important; margin-bottom: 20px !important; } .home h2 { font-size: 26px !important; line-height: 1.3 !important; margin-bottom: 15px !important; } .home h3 { font-size: 22px !important; line-height: 1.3 !important; margin-bottom: 15px !important; } .home p, .home .wp-block-paragraph { font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 15px !important; } .home .wp-block-heading, .home .wp-block-paragraph, .home .wp-block-buttons { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; } /* Buttons */ .home .wp-block-button { width: 100% !important; margin: 15px 0 !important; } .home .wp-block-button__link { width: 100% !important; display: block !important; text-align: center !important; padding: 12px 20px !important; font-size: 16px !important; } /* Footer and edge cases */ .home .wp-block-cover:last-child, .home .entry-content > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* [JUL26] was: .site-footer — leaked site-wide, now scoped to home */ .home .site-footer { margin-top: 0 !important; background: transparent !important; } .home .wp-block-cover.has-black-background-color, .home .wp-block-group.has-black-background-color { background-color: transparent !important; } /* [JUL26] was: body, .site { ... background: white !important; } That leaked site-wide and forced every mobile page to white, overriding the cream (#FAF7F0) the article pages are designed on. Now scoped to the homepage only. */ body.home, .home .site { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; background: white !important; } /* Keep horizontal-scroll protection site-wide */ body, .site { overflow-x: hidden !important; } html { overflow-x: hidden !important; } /* Gallery */ .home .wp-block-gallery { margin: 0 !important; } .home .wp-block-gallery .blocks-gallery-item { width: calc(50% - 5px) !important; margin: 2.5px !important; } .home figure { margin: 0 !important; padding: 0 !important; } } /* Tablet */ @media (min-width: 481px) and (max-width: 768px) { .home .ast-container, .home .site-content, .home #primary, .home .entry-content { padding: 0 20px !important; } .home h1 { font-size: 36px !important; } .home h2 { font-size: 30px !important; } } /* Small mobile */ @media (max-width: 480px) { .home .ast-container, .home .site-content, .home #primary, .home .entry-content { padding: 0 8px !important; } .home h1 { font-size: 28px !important; } .home h2 { font-size: 24px !important; } .home .wp-block-gallery .blocks-gallery-item { width: 100% !important; margin: 5px 0 !important; } } /* Very small devices */ @media (max-width: 360px) { .home .ast-container, .home .site-content, .home #primary, .home .entry-content { padding: 0 5px !important; } .home h1 { font-size: 26px !important; } } /* Navigation */ .main-header-menu .menu-item a, .main-navigation .menu-item a { color: #333333 !important; display: inline-block; transition: all 0.2s ease; } .main-header-menu .menu-item a:hover, .main-navigation .menu-item a:hover { color: #2D5A3D !important; transform: scale(1.08); } /* Arrow centred across full hero */ .ba-homepage .hero .scroll-indicator { left: 50% !important; transform: translateX(-50%) !important; } /* [OCT26c] RETIRED: "Push image down so it clears the nav icons" (top: 80px). The flags are gone from the header, so the picture now starts right under the menu. See the [OCT26c] block at the very bottom. */ /* ===================================================== March 2026 ===================================================== */ /* Reduce white space above post title on single posts */ .single-post .entry-header, .single .entry-header { padding-top: 10px !important; margin-top: 0 !important; } /* [JUL26 — CANDIDATE FOR REMOVAL] This 55vh cap was added to keep the CTA strip visible once the oversized mobile header had eaten the screen. With the header fixed it is probably no longer needed, and it is currently shrinking article images on phones. Test one article with this block deleted before keeping it. */ @media (max-width: 768px) { .single-post .wp-block-image img, .single .wp-block-image img { max-height: 55vh !important; width: auto !important; object-fit: contain !important; } } /* CTA strip — solid button, fix scientific name clipping on mobile */ #fiurdelin-cta-strip { flex-wrap: wrap !important; } #fiurdelin-cta-strip > div:first-child { flex: 1 1 160px !important; min-width: 0 !important; } #fiurdelin-cta-strip p { white-space: normal !important; overflow: visible !important; } #fiurdelin-cta-strip a { flex-shrink: 0 !important; background: #7A9A7E !important; color: #ffffff !important; border-color: #5a7a5e !important; } /* ═══════════════════════════════════════════════════════ FIURDELIN LIFESTYLE SECTION ═══════════════════════════════════════════════════════ */ /* Hide page titles on lifestyle pages */ .page-id-3747 .entry-title, .page-id-3747 .wp-block-post-title, .page-id-3747 header.entry-header, .page-id-3749 .entry-title, .page-id-3749 .wp-block-post-title, .page-id-3749 header.entry-header, .page-id-3755 .entry-title, .page-id-3755 .wp-block-post-title, .page-id-3755 header.entry-header, .page-id-3756 .entry-title, .page-id-3756 .wp-block-post-title, .page-id-3756 header.entry-header, .page-id-3757 .entry-title, .page-id-3757 .wp-block-post-title, .page-id-3757 header.entry-header, .page-id-3758 .entry-title, .page-id-3758 .wp-block-post-title, .page-id-3758 header.entry-header, .page-id-3759 .entry-title, .page-id-3759 .wp-block-post-title, .page-id-3759 header.entry-header { display: none !important; } /* [JUL26 — CANDIDATE FOR REMOVAL] The -2rem pull was compensating for the oversized header. Check these seven pages on a phone after the header fix; if they now sit too high, delete. */ .page-id-3747 .entry-content, .page-id-3749 .entry-content, .page-id-3755 .entry-content, .page-id-3756 .entry-content, .page-id-3757 .entry-content, .page-id-3758 .entry-content, .page-id-3759 .entry-content { margin-top: -2rem; } /* Collection Pages */ .fl-page { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 3rem; } .fl-page * { box-sizing: border-box; } .fl-breadcrumb { font-size: 0.8rem; color: #999; margin-bottom: 1rem; } .fl-breadcrumb a { color: #5a7a52; text-decoration: none; } .fl-breadcrumb a:hover { text-decoration: underline; } .fl-hero { text-align: center; margin-bottom: 2.5rem; padding: 1.5rem 0; } .fl-hero h1 { font-family: 'EB Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 500; color: #2d2d2d; margin: 0 0 0.4rem; } .fl-hero .fl-tagline { font-size: 1.05rem; color: #5a7a52; font-style: italic; margin: 0 0 1.5rem; } .fl-hero .fl-intro { max-width: 680px; margin: 0 auto; font-size: 0.92rem; line-height: 1.75; color: #555; } .fl-group { margin-bottom: 2.5rem; } .fl-group h2 { font-family: 'EB Garamond', Georgia, serif; font-size: 1.35rem; font-weight: 500; color: #2d2d2d; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid #e8e5dc; } .fl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.2rem; justify-items: center; } .fl-card, .fl-card:link, .fl-card:visited, .fl-card:hover, .fl-card:active { text-align: center; text-decoration: none !important; color: #333; display: block; background: #fff; border-radius: 10px; padding: 0.7rem; border: 1px solid #f0ede6; transition: transform 0.2s ease, box-shadow 0.2s ease; width: 100%; max-width: 220px; } .fl-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.07); } .fl-card * { text-decoration: none !important; } .fl-card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #f8f8f8; } .fl-card .fl-label { display: block; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 500; color: #2d2d2d; line-height: 1.3; } .fl-bottom { text-align: center; margin: 2rem 0 0; padding: 1.5rem; background: #fafaf7; border-radius: 10px; border: 1px solid #e8e5dc; } .fl-bottom p { font-size: 0.88rem; color: #666; margin: 0 0 0.4rem; line-height: 1.5; } .fl-bottom a { color: #5a7a52; text-decoration: none; font-weight: 500; } .fl-bottom a:hover { text-decoration: underline; } .fl-also { margin: 2.5rem 0 0; text-align: center; } .fl-also h3 { font-family: 'EB Garamond', Georgia, serif; font-size: 1.2rem; font-weight: 500; color: #2d2d2d; margin: 0 0 1rem; } .fl-also-grid { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; } .fl-also-link, .fl-also-link:link, .fl-also-link:visited, .fl-also-link:hover, .fl-also-link:active { text-decoration: none !important; display: inline-block; padding: 0.7rem 1.5rem; background: #fafaf7; border: 1px solid #e8e5dc; border-radius: 8px; color: #2d2d2d; font-size: 0.85rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } .fl-also-link:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .fl-also-link * { text-decoration: none !important; } /* Overview Page */ .fl-overview { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 3rem; } .fl-ov-hero { text-align: center; margin-bottom: 2.5rem; padding: 2rem 0; } .fl-ov-hero h1 { font-family: 'EB Garamond', Georgia, serif; font-size: 2.2rem; font-weight: 500; color: #2d2d2d; margin: 0 0 0.8rem; } .fl-ov-hero p { max-width: 640px; margin: 0 auto; font-size: 0.95rem; color: #555; line-height: 1.75; } .fl-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.8rem; margin-top: 2.5rem; } .fl-ov-card, .fl-ov-card:link, .fl-ov-card:visited, .fl-ov-card:hover, .fl-ov-card:active { display: block; text-decoration: none !important; color: #333; background: #fafaf7; border-radius: 12px; border: 1px solid #e8e5dc; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .fl-ov-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .fl-ov-card * { text-decoration: none !important; } .fl-ov-card .fl-ov-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #e8e5dc; } .fl-ov-card .fl-ov-imgs img { width: 100%; aspect-ratio: 1; object-fit: cover; } .fl-ov-card .fl-ov-body { padding: 1rem 1.3rem 1.2rem; } .fl-ov-card .fl-ov-body h2 { font-family: 'EB Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 500; margin: 0 0 0.3rem; color: #2d2d2d; } .fl-ov-card .fl-ov-body p { font-size: 0.82rem; color: #777; margin: 0; line-height: 1.4; } .fl-ov-card .fl-ov-body .fl-count { display: inline-block; margin-top: 0.5rem; font-size: 0.72rem; color: #5a7a52; font-weight: 500; } /* Responsive */ @media (max-width: 600px) { .fl-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .fl-ov-grid { grid-template-columns: 1fr; } } /* ===================================================== May 2026 — mobile polish ===================================================== */ /* ── (1) Hero brand line ("FIURDELIN — BOTANICAL ART STUDIO") ── The mobile rule `.home p { font-size: 16px !important; }` further up was inflating the hero tagline and breaking it onto two lines near the hamburger. This restores its intended small "eyebrow" size on mobile. */ @media (max-width: 768px) { .ba-homepage .hero-tagline { font-size: 0.8rem !important; line-height: 1.4 !important; } } /* [JUL26] The old `.site-branding { max-width: 68% }` rule that lived here has been REMOVED. Capping the logo by width let a tall logo render 200px+ high and grow the whole header. The replacement is a HEIGHT cap, in the July 2026 block at the bottom of this file. */ /* ── (2) Buttons must never show a text underline — anywhere on the site ── */ .wp-block-button__link, .btn, .button, a.btn, input[type="submit"] { text-decoration: none !important; } /* ── (3) Floating third-party widgets (the two blue circles) ── Injected by a PLUGIN. Not defined in this file, so the rules below do NOTHING until you fill in each widget's real selector. Safe as-is. Inspect a blue circle on desktop, read its id/class, replace REPLACE-WITH-WIDGET-SELECTOR, then uncomment the block you want. */ /* Option A — hide on mobile only (non-essential widgets ONLY): @media (max-width: 768px) { .REPLACE-WITH-WIDGET-SELECTOR { display: none !important; } } */ /* Option B — keep them, lift them out of the content: .REPLACE-WITH-WIDGET-SELECTOR { bottom: 90px !important; opacity: 0.85 !important; } */ /* ===================================================== May 2026 — full-width homepage on mobile ===================================================== */ @media (max-width: 768px) { .home .ast-container, .home .site-content, .home #primary, .home .entry-content { padding-left: 0 !important; padding-right: 0 !important; } } /* ===================================================== Commercial page only — hide Etsy promo, keep legal footer ===================================================== */ .page-id-5304 .site-above-footer-wrap { display: none !important; } /* Entity line under the header */ .fd-entity-line { max-width: 780px; margin: 0 auto; padding: 4px 20px; font-size: 0.82rem; line-height: 1.75; color: #6f6c60; text-align: center; } @media (max-width: 768px) { .fd-entity-line { font-size: 0.78rem; line-height: 1.7; } } /* ===================================================================== [JUL26] JULY 2026 — MOBILE HEADER --------------------------------------------------------------------- Fixes the ~235px white band that appeared above the hero on every mobile page. Root cause: header row height settings on mobile, plus a width-capped logo. This block is the belt-and-braces layer so the band cannot return if a theme update or preset reintroduces a height. Covers all three Astra header rows (above / primary / below) so it works regardless of which row your elements end up in. SAFE TO REMOVE: delete this entire block to revert. ===================================================================== */ @media (max-width: 768px) { /* (1) Stop the header stack reserving height */ #masthead .ast-builder-grid-row, #masthead .ast-builder-grid-row-container, #masthead .site-header-section, #masthead .ast-mobile-header-wrap, #masthead .main-header-bar, #masthead .ast-primary-header-bar, #masthead .ast-above-header-bar, #masthead .ast-below-header-bar, #masthead .site-branding, #masthead .ast-site-identity { min-height: 0 !important; } #masthead .widget, #masthead .ast-builder-html-element { margin: 0 !important; padding: 0 !important; } /* (2) The burger dropdown must never be clipped */ #masthead, #masthead .ast-builder-grid-row, #masthead .ast-builder-grid-row-container, #masthead .site-header-section, #masthead .ast-primary-header-bar, #masthead .ast-above-header-bar, #masthead .ast-below-header-bar { overflow: visible !important; } /* (3) Cap any logo by HEIGHT, never by width. A width cap is what let the header grow to 235px. */ #masthead .custom-logo-link img, #masthead .site-logo-img img, #masthead .astra-logo-svg { max-height: 46px !important; width: auto !important; height: auto !important; } /* (4) Keep the text wordmark compact so it cannot collide with the burger on a 390px screen */ .site-title, .ast-site-title-wrap .site-title, .ast-site-identity .site-title { font-size: 0.95rem !important; line-height: 1.15 !important; margin: 0 !important; } .site-description, .ast-site-identity .site-description { font-size: 0.6rem !important; letter-spacing: 1.2px !important; line-height: 1.2 !important; margin: 2px 0 0 !important; } } /* ===================================================================== [SEP26] SEPTEMBER 2026 — MULTILINGUAL HEADER --------------------------------------------------------------------- One block for everything Polylang-related in the header. [OCT26b] From 7 October 2026 the header carries NO language switcher. Languages are reached from the footer language line (block at the very bottom). Only the burger styling below remains from this block. WHY NOT THE BELOW-HEADER STRIP, which was the earlier plan: Astra does not output a below-header bar on this site. Inspecting the live page shows
containing only #ast-desktop-header and #ast-mobile-header — the row exists in the Customizer but never renders on the front end. Several hours went into that; do not retry it without checking the live DOM first. Note the 921px boundary in rule (1): that is Astra's header breakpoint, not the 768px used for content elsewhere in this file. SAFE TO REMOVE: delete this entire block to revert. ===================================================================== */ /* (1) Astra's mobile toggle, styled to match the old white circle */ @media (max-width: 921px) { #masthead .menu-toggle, #masthead .ast-mobile-menu-trigger-fill, #masthead .ast-mobile-menu-trigger-minimal { width: 46px !important; height: 46px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background: rgba(255,255,255,0.82) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; color: #1E3D2F !important; display: flex !important; align-items: center !important; justify-content: center !important; } #masthead .menu-toggle:focus-visible { outline: 2px solid #B08D57 !important; outline-offset: 2px !important; } #masthead .menu-toggle .ast-mobile-svg { width: 22px; height: 22px; } } /* ===================================================================== [OCT26] OCTOBER 2026 — THAI, JAPANESE, TRADITIONAL CHINESE --------------------------------------------------------------------- Every rule is scoped with :lang(), so nothing here touches the English, Italian, German, French or Spanish pages. Polylang writes the lang attribute (th, ja, zh-TW) only once a page belongs to that language, which is why the language must exist in Polylang before a page is pasted in. Fonts are system stacks only (Asia plan, technical spec). Never load Noto CJK web fonts: several MB each, and every device already has a suitable font. Rules CSS cannot enforce, so the critic checks them in the text: no or around Thai or CJK words (Latin binomials stay italic), 「」 quotes in Japanese, no em-dashes or exclamation marks including full-width forms. Never add word-break: break-all on these pages. SAFE TO REMOVE: delete this entire block to revert. ===================================================================== */ /* (1) Fonts per language */ :lang(ja) { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; line-break: strict; } :lang(zh-TW) { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; } :lang(th) { font-family: "Noto Sans Thai", "Leelawadee UI", Thonburi, Tahoma, sans-serif; line-height: 1.75; } /* (2) Thai headings: tone marks above the line and vowels below it get clipped at the theme's tight heading line-height. */ :lang(th) h1, :lang(th) h2, :lang(th) h3, :lang(th) h4, :lang(th) h5, :lang(th) h6 { line-height: 1.5; } /* (3) The collection-page tagline is italic in English. Thai and CJK have no true italic, so the browser would fake a slant. Upright instead. */ :lang(th) .fl-tagline, :lang(ja) .fl-tagline, :lang(zh-TW) .fl-tagline { font-style: normal; } /* (4) Justified text spreads Thai and CJK lines unevenly. Affects only blocks set to Justify in the editor; centred text is left alone. */ :lang(th) .has-text-align-justify, :lang(ja) .has-text-align-justify, :lang(zh-TW) .has-text-align-justify { text-align: start; } /* ===================================================================== [OCT26b] 7 OCTOBER 2026 — FOOTER LANGUAGE LINE --------------------------------------------------------------------- Styles the