/* Theme Name: SustainMap Child Theme URI: https://sustainmap.com Description: Custom child theme for SustainMap.com (Astra parent). Templates, CPT/taxonomy, and tools ported from the prototype. Author: Methakritsada Template: astra Version: 0.1.0 Text Domain: sustainmap */ /* ========================================================= Child-specific overrides (design system lives in prototype.css) ========================================================= */ /* Reveal-on-scroll: revealed state (base opacity:0 comes from prototype.css) */ [data-reveal].in { opacity: 1; transform: none; transition: opacity .6s var(--e-out), transform .6s var(--e-out); } /* Search overlay: the prototype's own design (dimmed + blurred backdrop, centred 760px panel, white pill search box, results list) lives in prototype.css. An earlier override here replaced it with a full-width white bar — removed, since the client asked for the reference design. Only the WordPress-specific bits are kept below. */ .search-ov .search-box input[type="search"] { flex: 1; font-family: var(--body); font-size: 1.05rem; border: 0; background: transparent; color: var(--ink); } .search-ov .search-box input[type="search"]:focus { outline: none; } .search-ov .search-close { flex: none; font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--slate); background: transparent; padding: .4rem .2rem; white-space: nowrap; } .search-ov .search-close:hover { color: var(--green); } /* Card grids + pagination + topic chips (archives) */ .sm-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .sm-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .sm-card-grid { grid-template-columns: 1fr; } } .sm-topic-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 24px; } .sm-pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 32px; } .sm-pagination .page-numbers { padding: .5rem .9rem; border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-family: var(--head); font-weight: 600; font-size: .9rem; } .sm-pagination a.page-numbers:hover { border-color: var(--leaf); color: var(--green); } .sm-pagination .page-numbers.current { background: var(--green); color: #fff; border-color: var(--green); } /* Company avatar using a featured-image logo (shows the full logo, not cropped) */ .co-av--img { background: #fff !important; overflow: hidden; padding: 2px; } .co-av--img img { width: 100%; height: 100%; object-fit: contain; display: block; } .co-av.xl.co-av--img { padding: 6px; } /* Resource / document cards */ .sm-doc-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-card); transition: box-shadow .25s, transform .25s; } .sm-doc-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); } .sm-doc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sm-doc-type { font-size: .74rem; color: var(--slate); } .sm-doc-card h3 { font-size: 1.08rem; line-height: 1.35; } .sm-doc-desc { font-size: .86rem; color: var(--slate); flex: 1; } .sm-doc-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: .78rem; color: var(--slate); } .sm-doc-gate { color: var(--amber); } .sm-doc-card .dl-btn { align-self: flex-start; margin-top: 4px; font-size: .85rem; padding: .5rem 1rem; } /* Email gate modal */ .sm-gate { position: fixed; inset: 0; z-index: 95; display: none; } .sm-gate.open { display: block; } .sm-gate-bg { position: absolute; inset: 0; background: rgba(8,30,20,.55); backdrop-filter: blur(6px); } .sm-gate-panel { position: relative; z-index: 1; max-width: 460px; margin: 12vh auto 0; background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-lg); } .sm-gate-panel h3 { font-size: 1.2rem; padding-right: 32px; } .sm-gate-panel > p { color: var(--slate); font-size: .9rem; margin: 6px 0 14px; } /* Descendant selector (0,2,0) so it beats the leftover kit-328 `button` rule (0,1,1), which otherwise renders this as a big green square that overlaps the heading. Small round corner ✕, same treatment as the drawer close button. */ .sm-gate .sm-gate-x { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; min-height: 0; line-height: 1; font-size: 1.05rem; color: var(--slate); background: transparent; border: 0; border-radius: 999px; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .2s, color .2s; } .sm-gate .sm-gate-x:hover { background: var(--mint); color: var(--green); } /* Keep the hero card off the screen edge — align its right to the content container */ .hero .hero-card { right: max(24px, calc((100% - var(--maxw)) / 2 + 24px)); } /* ===== Page hero: background image + dark overlay + centered white text ===== */ .page-hero, .pillar-hero { position: relative; background-image: var(--page-hero-bg, none); background-size: cover; background-position: center; background-color: var(--green-deep); color: #fff; text-align: center; padding: clamp(118px, 16vh, 180px) 0 clamp(52px, 8vh, 88px); overflow: hidden; } .page-hero::before, .pillar-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); z-index: 0; } .page-hero > .wrap, .pillar-hero > .wrap { position: relative; z-index: 1; } .page-hero h1, .page-hero h2, .pillar-hero h1, .page-hero .gloss-en, .page-hero .cp-nameen { color: #fff; } .page-hero p, .pillar-hero p, .page-hero .gloss-lead { color: rgba(255, 255, 255, .9); max-width: 680px; margin-left: auto; margin-right: auto; } .page-hero .eyebrow, .pillar-hero .eyebrow { color: #a7e3c4; justify-content: center; } .page-hero .eyebrow .dot, .pillar-hero .eyebrow .dot { background: #7be0ad; box-shadow: 0 0 0 4px rgba(123, 224, 173, .2); } /* Breadcrumb on dark */ .page-hero .breadcrumb { justify-content: center; color: rgba(255, 255, 255, .82); } .page-hero .breadcrumb a { color: #cdeadd; } .page-hero .breadcrumb span { color: #fff; } /* Center inline chip / tag rows placed directly in the hero wrap */ .page-hero > .wrap > div[style*="flex"] { justify-content: center; } .page-hero .chip { background: rgba(255, 255, 255, .16); color: #fff; } /* Sample-note + pillar icon on dark, centered */ .page-hero .sample-note, .pillar-hero .sample-note { justify-content: center; margin-left: auto; margin-right: auto; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; } .pillar-hero .ic { margin-left: auto; margin-right: auto; color: #fff; } /* Contact layout */ .contact-layout { display: grid; grid-template-columns: 1.4fr .9fr; gap: 32px; align-items: start; } @media (max-width: 820px) { .contact-layout { grid-template-columns: 1fr; } } /* "เร็ว ๆ นี้" chip on tool cards */ .chip.soon { background: var(--amber-bg); color: var(--amber); margin-left: 6px; } /* ===== /learn/ hub ===== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Sticky-header offset for in-page anchor targets. */ .lgroup, .lg-anchor { scroll-margin-top: 92px; } .lgroup:focus, .lg-anchor:focus { outline: none; } .learn-nav { position: sticky; top: 62px; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .learn-nav .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; } .learn-nav a { flex: none; font-family: var(--head); font-weight: 600; font-size: .86rem; color: var(--slate); padding: .4rem .8rem; border-radius: 999px; white-space: nowrap; transition: background .2s, color .2s; } .learn-nav a:hover { background: var(--mint); color: var(--green); } .learn-nav a.on { background: var(--green); color: #fff; } .learn-groups { display: flex; flex-direction: column; gap: 40px; } .lgroup { border-top: 1px solid var(--border); padding-top: 26px; } .lgroup:first-child { border-top: none; padding-top: 0; } .lg-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .lg-ic { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--mint); display: grid; place-items: center; color: var(--green); } .lg-ic svg { width: 28px; height: 28px; } .lg-head h2 { font-size: 1.5rem; } .lg-head p { color: var(--slate); margin-top: 4px; } .lg-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .lg-items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .lg-items { grid-template-columns: 1fr; } } .lg-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: #fff; transition: box-shadow .25s, transform .25s, border-color .25s; } a.lg-item { flex-direction: row; align-items: center; justify-content: space-between; } a.lg-item:hover { border-color: var(--leaf); box-shadow: var(--shadow-sm); transform: translateY(-2px); } a.lg-item svg { width: 18px; height: 18px; color: var(--green); flex: none; } .lg-anchor { background: var(--pale); } .lg-name { font-family: var(--head); font-weight: 600; color: var(--ink); } .lg-desc { font-size: .84rem; color: var(--slate); line-height: 1.55; } /* Reading progress bar (article) */ .read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--leaf); z-index: 70; transition: width .1s linear; } .sm-copy.copied { color: var(--green); } /* Mobile drawer collapsible groups */ .drawer-panel .dgrp { border-bottom: 1px solid var(--border); } .drawer-panel .dgrp summary { list-style: none; cursor: pointer; font-family: var(--head); font-weight: 600; font-size: 1.25rem; padding: .7rem .2rem; color: var(--ink); } .drawer-panel .dgrp summary::-webkit-details-marker { display: none; } .drawer-panel .dgrp[open] summary { color: var(--green); } /* ========================================================= Elementor header/footer cutover (2569-07-26) Header/footer markup now comes from Elementor templates (id 159/174), embedded via get_builder_content_for_display() in header.php/footer.php. `on-hero` moved from the
element to , so the prototype's descendant `.on-hero …` rules keep matching. These re-map the few compound `.on-hero.scrolled` selectors (which expected both classes on the header) to the new split: on-hero on , scrolled on .site-header. ========================================================= */ /* !important: the prototype `.on-hero .brand .wordmark{color:#fff}` rule (kept for the transparent hero state) stubbornly wins the wordmark colour even though these scrolled selectors are more specific, so force the solid-header colours to guarantee readable text once scrolled. nav-main uses currentColor for its icons too. */ body.on-hero #siteHeader.scrolled .nav-main a, body.on-hero #siteHeader.scrolled .nav-main .navitem, body.on-hero #siteHeader.scrolled .brand .wordmark, body.on-hero #siteHeader.scrolled .hd-search { color: var(--ink) !important; } /* Wordmark "Map" (): white over the hero, flips back to the green accent once solid. */ body.on-hero #siteHeader.scrolled .brand .wordmark b { color: var(--green) !important; } /* Burger bars: white over the transparent hero, but on the solid scrolled header white blends into the background — flip them to green so the icon stays visible. */ body.on-hero #siteHeader.scrolled .burger .bars span { background: var(--green) !important; } body.on-hero #siteHeader.scrolled .nav-main a:hover, body.on-hero #siteHeader.scrolled .navitem:hover { background: var(--mint); color: var(--green); } /* Logo: whiten over the transparent hero header, restore green once scrolled solid */ body.on-hero #siteHeader .brand .mark { filter: brightness(0) invert(1); } body.on-hero #siteHeader.scrolled .brand .mark { filter: none; } /* Elementor container defaults (position/padding/background on .elementor-element… and .e-con) outrank the prototype's single-class `.site-header` rules, so the header box styling is re-asserted here via the #siteHeader id, which beats Elementor's class specificity without !important. */ #siteHeader { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding: 18px 0; } /* Same Elementor-container-override issue for the company single Theme Builder template (id 180): sections built as Elementor containers carry the prototype classes but Elementor's `.e-con` display/padding/background win on equal specificity. Re-assert the prototype layout via `.e-con.` (0,2,0 beats `.e-con`/`.e-flex`). Inner blocks that live inside shortcode/HTML widget markup (cp-head, cp-chips, cp-ghg, cp-others, rel-grid …) are unaffected. */ .e-con.cp-hero { padding: 140px 0 44px; background: var(--mint); } .e-con.cp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; align-items: start; } @media (max-width: 900px) { .e-con.cp-layout { grid-template-columns: 1fr; } } .e-con.cp-block { margin-bottom: 34px; } .e-con.cp-related { margin-top: 20px; } #siteHeader.scrolled { padding: 10px 0; background: rgba(255, 255, 255, .92) !important; /* beat Elementor .e-con transparent default */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--border); } /* Header row: Elementor sizes each widget in the bar to a share of the row rather than to its content, so the actions widget (search + CTA + burger) gets squeezed narrower than the buttons inside it and they spill past the viewport — the burger appears from 1200px down, which is where the overflow starts. Size the row's children to their content and stop them shrinking for the whole range where the burger is on screen. Selectors are structural (`:has(> .hd-right)`) rather than element-id based so they survive the header template being rebuilt. */ @media (max-width: 1200px) { /* `.bar` is the header row (an `e-con-full` child container, so it has no inner wrapper). */ #siteHeader .bar { flex-wrap: nowrap; justify-content: space-between; align-items: center; } /* Left group (logo + nav) may shrink; the actions group must not, or its buttons overflow the viewport — that is what pushed the burger off-screen on tablets. */ #siteHeader .bar > .elementor-element { width: auto !important; flex: 0 1 auto; min-width: 0; } #siteHeader .bar > .elementor-element:has(.hd-right) { flex: 0 0 auto; } #siteHeader .hd-right { flex: 0 0 auto; } } /* Narrow phones additionally need the CTA and gaps compacted to fit 375px. */ @media (max-width: 480px) { #siteHeader .bar { gap: 10px; } #siteHeader .hd-right { gap: 10px; } #siteHeader .btn.btn-primary { padding: .44rem .74rem; font-size: .82rem; } } /* ── FB-9 · Design system pass (client feedback รอบ 1) ──────────────────────── The Chargenix template kit (elementor-kit-328) shipped `button{border-radius:0}`, which outspecifies the prototype's `.btn{border-radius:var(--r-btn)}` and squared off buttons site-wide. The kit's own token is now 9px, so this block only covers the chrome the kit does not reach. */ /* Astra's back-to-top ships bright blue (#046BD2) with a 2px radius — neither is in the prototype. Repaint to the brand green and match the button radius. */ #ast-scroll-top { background-color: var(--green-deep, #0B5135); color: #fff; border-radius: var(--r-btn, 9px); transition: background-color .25s, transform .25s; } #ast-scroll-top:hover, #ast-scroll-top:focus-visible { background-color: var(--green, #15803D); transform: translateY(-2px); } /* Fluent Forms ships a blue submit button (#1A7EFB) and a 7px field radius — neither belongs to the palette. Repaint to the brand green and align to the button token. (Field labels/structure are handled separately as part of the contact-form rebuild.) The plugin paints the button via `form.fluent_form_N .ff-btn-submit:not(...)` (0,3,1), which outspecifies any sane class selector here — so retune its own token instead of escalating a specificity war. This also recolours the rest of the plugin's accents. */ /* `html:root` (0,0,2), not bare `:root` — the plugin stylesheet loads after the child theme, so an equal-specificity `:root` would lose on source order. */ html:root { --fluentform-primary: var(--green, #15803D); --fluentform-primary-hover: var(--green-deep, #0B5135); } .fluentform .ff-btn-submit, .fluentform .ff-btn.ff_btn_style { background-color: var(--green, #15803D); border-color: var(--green, #15803D); border-radius: var(--r-btn, 9px); font-family: var(--head, inherit); font-weight: 600; transition: background-color .25s, box-shadow .25s; } .fluentform .ff-btn-submit:hover, .fluentform .ff-btn.ff_btn_style:hover { background-color: var(--green-deep, #0B5135); border-color: var(--green-deep, #0B5135); } .fluentform input:not([type="checkbox"]):not([type="radio"]), .fluentform textarea, .fluentform select { border-radius: var(--r-btn, 9px); } /* ── Editorial single: prototype article layout ────────────────────────────── The body is imported verbatim from the prototype, so prototype.css already styles `.content`, `.toc-inner`, `.faq-*` and `.read-progress`. What is missing is the grid that puts the TOC in the left gutter — the Elementor container is a flex `.e-con`, so re-declare the prototype's `.article-layout` grid on its inner wrapper. */ @media (min-width: 1160px) { /* The template caps its inner wrapper at `var(--sm-article-max, 820px)`; widening the token here (rather than fighting Elementor's higher-specificity selector) opens the gutters the TOC needs while the reading column stays at --read. */ .sm-editorial-body { --sm-article-max: 1200px; } .sm-editorial-body > .e-con-inner { display: grid; grid-template-columns: 1fr minmax(0, var(--read, 720px)) 1fr; align-items: start; gap: 0; } .sm-editorial-body > .e-con-inner > .toc { grid-column: 1; padding-right: 30px; } .sm-editorial-body > .e-con-inner > *:not(.toc) { grid-column: 2; } } /* Below the grid breakpoint the TOC has no gutter to live in. */ @media (max-width: 1159px) { .sm-editorial-body > .e-con-inner > .toc { display: none; } } /* wpautop leaves empty paragraphs between the imported block elements; they carry margin and open up phantom gaps. */ .content p:empty { display: none; } /* Company profile: report / source link lists (see [sm_co_reports]). */ .cp-srcgroup + .cp-srcgroup { margin-top: 18px; } .cp-srchead { font-family: var(--head); font-weight: 600; font-size: .82rem; letter-spacing: .04em; color: var(--slate, #5C6B63); margin-bottom: 8px; } .cp-srclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .cp-srclist a { font-size: .93rem; color: var(--green-deep, #0B5135); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; } .cp-srclist a:hover, .cp-srclist a:focus-visible { color: var(--green, #15803D); border-bottom-color: currentColor; } /* Only 5 of the 8 companies ship report/source links, so the block would otherwise render as a lone heading with nothing under it. */ .cp-sources:not(:has(.cp-srcgroup)) { display: none; } /* ── FB-6 · Assessment / tool controls built on