/* * GreenMinds AI — theme styles * * Ported wholesale from design-reference/greenminds-mockup.html, which is the * design source of truth. Keep the two in step: when WordPress output looks * wrong, diff against the mockup rather than guessing. * * Class names are the mockup's, unprefixed. That is a deliberate deviation * from the gm- convention: CSS, JS and patterns are all generated from one * source, and keeping the names identical is what makes diffing against the * mockup possible. See CLAUDE.md -> Conventions. * * Nothing here may pre-hide content. Every reveal is a gsap.from(), so the * resting state is the visible state; a rule that sets opacity:0 on a motion * hook reintroduces the failure this architecture exists to prevent. */ :root{ --green:#39A050; --green-deep:#1F6E3D; --teal:#1D9E75; --ink:#132A1D; --slate:#4B5D53; --mist:#F4F8F5; --line:#E1EAE3; --paper:#FBFBF8; --white:#FFFFFF; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} /* Sticky nav is 76px tall — without this, clicking #about/#expertise scrolls the section heading underneath the nav bar. */ [id]{scroll-margin-top:96px;} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} ::selection{background:rgba(57,160,80,0.22); color:var(--ink);} :focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:4px;} /* ---------- ATMOSPHERE ---------- Film grain removes the "flat digital" sterility without costing a request: the noise is generated by an SVG turbulence filter inlined as a data URI. Fixed + pointer-events:none, so it never participates in layout or hit-testing. */ .gm-grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); } /* Reading-progress hairline. transform:scaleX only — no layout, no repaint cost. */ .gm-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; background:linear-gradient(90deg, var(--green-deep), var(--green), var(--teal)); transform:scaleX(0); transform-origin:0 50%; will-change:transform; } @media(prefers-reduced-motion:reduce){ .gm-grain{display:none;} } body{ margin:0; font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; margin:0; /* `inherit`, NOT var(--ink). A colour set directly on the heading beats the white inherited from a dark section, so every dark panel had to patch its own headings — and the moment one was added without a patch (.assemble) its h2 rendered near-black on near-black and vanished. Inheriting means light sections still get ink from and dark sections just work. */ color:inherit; } p{margin:0;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .wrap{max-width:1180px;margin:0 auto;padding:0 32px;} .eyebrow{ font-size:12.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:8px; } .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--teal);display:inline-block;} /* ---------- NAV ---------- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(251,251,248,0.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } /* Header reacts to scroll direction: out of the way when reading downward, back instantly when the user reverses (they're looking for navigation). */ .nav{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;} .nav.is-hidden{transform:translateY(-101%);} .nav.is-scrolled{box-shadow:0 6px 30px -12px rgba(19,42,29,0.18);} .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px;} /* Deliberately NOT shrinking the header height on scroll: the nav is sticky, so animating its height reflows the entire document below it every time the class toggles. The shadow + hide/reveal give the same "reactive" feel for free. */ /* ---------- CINEMATIC TEXT REVEAL ---------- GSAP's SplitText wraps each line in .gm-line and each word in a span. The only CSS needed is the mask: overflow:hidden on the *line* means a word animating up from yPercent:115 is clipped by its own line and never bleeds into the one above. The padding-bottom keeps descenders (g, y, p) from being shaved off by that same overflow. Nothing here hides anything on its own — if GSAP never runs, SplitText never runs either, and the heading is just a heading. */ .gm-line{overflow:hidden; padding-bottom:0.08em;} /* ---------- MICRO-INTERACTIONS ---------- Confined to devices with a real pointer: magnetic pull and 3D tilt are meaningless on touch and would only cost battery. */ @media (hover:hover) and (pointer:fine){ .gm-magnetic{transition:transform .35s cubic-bezier(.2,.8,.2,1);} .gm-magnetic:hover{transition-duration:.12s;} .exp-card{transform-style:preserve-3d; will-change:transform;} .exp-card .exp-chips, .exp-card h3, .exp-card .exp-icon{transform:translateZ(28px);} } /* Parallax targets are moved with transform only (composited, no reflow). */ [data-parallax]{will-change:transform;} /* ---------- 1. CONTEXTUAL NAV ---------- Over the dark Expertise panel the header inverts, so it stays legible instead of becoming a pale smear on near-black. */ .nav.is-over-dark{background:rgba(19,42,29,0.72); border-bottom-color:rgba(255,255,255,0.12);} .nav.is-over-dark .brand{color:#fff;} .nav.is-over-dark .navlinks a{color:#fff;} .nav.is-over-dark .nav-toggle{border-color:rgba(255,255,255,0.28);} .nav.is-over-dark .nav-toggle span{background:#fff;} .nav.is-over-dark .nav-cta{background:#fff; color:var(--ink);} .nav .brand, .nav .navlinks a, .nav .nav-cta, .nav .nav-toggle span{ transition:color .35s ease, background .35s ease, border-color .35s ease; } /* ---------- 3. CURTAIN IMAGE REVEAL ---------- Photos unmask from the bottom rather than fading — reads as intentional craft. clip-path is composited, so this costs nothing on the main thread. The resting (and fallback) state is fully revealed; GSAP animates *from* inset(0 0 100% 0) to this. */ .gm-curtain{clip-path:inset(0 0 0 0);} /* ---------- 4. GLASS CARDS ---------- The animated neural canvas sits behind the expertise panel, so blurring it through the cards gives real depth rather than a flat translucency effect. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){ .exp-card{ background:rgba(255,255,255,0.055); -webkit-backdrop-filter:blur(9px) saturate(120%); backdrop-filter:blur(9px) saturate(120%); border-color:rgba(255,255,255,0.14); } .exp-card.feat{ background:linear-gradient(140deg, rgba(57,160,80,0.26), rgba(29,158,117,0.10) 55%, rgba(255,255,255,0.04)); } } /* ---------- 6. PINNED MISSION NARRATIVE ---------- The About heading locks while the three pillars scroll past it. Pure position:sticky — no scroll library, no pinning maths, nothing to desync. */ @media (min-width:900px){ .about-grid{align-items:start;} /* NOTE: do NOT make .about-sticky-wrap sticky. It is nearly as tall as its column, so the mission list has no room to travel past it and the two simply overlap. The About *image* is the sticky element (see .about-media). */ /* Deliberately NO default opacity here. The dimming is applied by GSAP (gsap.set) and driven by a ScrollTrigger per item, so the CSS resting state stays fully legible. Putting opacity:0.38 in the stylesheet would leave every pillar greyed out for good if the script failed. */ } .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; font-family:'Inter',sans-serif; white-space:nowrap; flex-shrink:0;} .brand-mark{width:30px;height:30px;object-fit:contain; flex-shrink:0;} .navlinks{display:flex; gap:28px; font-size:14.5px; font-weight:600; flex-shrink:1; min-width:0;} .navlinks a{position:relative; padding:6px 0; color:var(--ink); opacity:0.75; transition:opacity .2s; white-space:nowrap;} .navlinks a:hover{opacity:1;} .nav-cta{ font-size:14px; font-weight:700; padding:10px 20px; border-radius:999px; white-space:nowrap; flex-shrink:0; background:var(--ink); color:#fff; transition:transform .2s, background .2s; } .nav-cta:hover{background:var(--green-deep); transform:translateY(-1px);} .nav-toggle{ display:none; flex-shrink:0; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:transparent; border:1px solid var(--line); cursor:pointer; padding:0; flex-direction:column; gap:4px; } .nav-toggle span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .mobile-menu{ display:none; flex-direction:column; padding:8px 32px 22px; border-top:1px solid var(--line); background:var(--paper); } .mobile-menu.open{display:flex;} .mobile-menu a{ padding:14px 0; font-size:15.5px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line); } .mobile-menu .nav-cta{margin-top:16px; text-align:center; justify-content:center; display:flex; color:#fff; border-bottom:none;} @media(max-width:840px){ .navlinks{display:none;} .nav-cta{display:none;} .nav .wrap{justify-content:space-between;} .nav-toggle{display:flex;} } @media(max-width:1180px) and (min-width:841px){ .navlinks{gap:18px;} .nav-cta{padding:9px 16px; font-size:13px;} } /* ---------- HERO ---------- The load-in is a GSAP timeline, not a CSS keyframe. A keyframe with `both` fill leaves the element at its 0% state (opacity:0) until the animation runs, which is the one thing this page must never do. */ /* The hero's own rules live in the IMMERSIVE REBUILD block at the end of this stylesheet, with the rest of the scroll-story architecture. */ .btn{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; padding:14px 26px; border-radius:999px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; } .btn-primary{background:var(--ink); color:#fff;} .btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 14px 28px rgba(31,110,61,0.28);} .btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);} .btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);} /* .float-card lives in the About column now; its positioning is set by .about-pin .float-card in the IMMERSIVE REBUILD block. Only the shared inner styling stays here. */ .float-card{ background:#fff; border-radius:16px; padding:16px 20px; box-shadow:0 20px 40px -18px rgba(19,42,29,0.28); display:flex; gap:12px; align-items:center; max-width:238px; border:1px solid var(--line); } .float-card .dot{width:38px;height:38px;border-radius:10px;background:var(--mist);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green-deep);font-size:16px;} .float-card p:first-child{font-size:13px; font-weight:700;} .float-card p:last-child{font-size:12px; color:var(--slate); margin-top:1px;} /* ---------- ABOUT ---------- */ .about h2{font-size:clamp(30px,3.4vw,42px); line-height:1.12; margin:14px 0 22px;} .about p.big{font-size:18px; line-height:1.65; color:var(--slate); margin-bottom:20px;} .about p{font-size:15.5px; line-height:1.7; color:var(--slate); margin-bottom:16px;} .mission-list{margin-top:36px; display:flex; flex-direction:column; gap:0;} .mission-item{display:flex; gap:20px; padding:26px 0; border-top:1px solid var(--line);} .mission-item:last-child{border-bottom:1px solid var(--line);} .mission-item .num{font-family:'Fraunces',serif; font-size:22px; color:var(--line); font-weight:600; width:40px; flex-shrink:0;} .mission-item .thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;flex-shrink:0;background:var(--mist);} .mission-item .thumb img{width:100%;height:100%;object-fit:cover;} .mission-item h4{font-size:17px; margin-bottom:6px;} .mission-item p{font-size:14.5px; color:var(--slate); line-height:1.6;} /* ---------- EXPERTISE ---------- */ .expertise{background:var(--ink); color:#fff; position:relative; overflow:hidden;} .expertise::before{ content:""; position:absolute; inset:0; opacity:0.5; background:radial-gradient(600px 400px at 85% 0%, rgba(29,158,117,0.35), transparent 60%), radial-gradient(500px 400px at 0% 100%, rgba(57,160,80,0.25), transparent 60%); } /* Neural-network canvas: sits between the section background and the content. Kept very low-opacity so it reads as texture, never as decoration competing with the cards. Degrades to nothing if canvas/JS is unavailable. */ .neural-bg, .gm-neural-bg{ position:absolute; inset:0; width:100%; height:100%; opacity:0.78; pointer-events:none; z-index:0; } .expertise > .wrap{position:relative; z-index:1;} @media(prefers-reduced-motion:reduce){.neural-bg, .gm-neural-bg{opacity:0.55;}} /* Page-wide layer: one fixed canvas behind everything. Sections with their own opaque background (expertise, footer) naturally cover it — which is why the dark expertise section keeps its own higher-contrast instance. */ /* Fade the network down behind the centred content column (1180px) so text sits on near-clean paper, while the outer gutters keep the full texture. Drops to 10% rather than 0 so the transition reads as depth, not a hole. On viewports narrower than the content column the stops fall off-screen and it degrades to uniformly faint — which is what you want on mobile anyway. */ .neural-bg--page, .gm-neural-bg--page{ position:fixed; opacity:0.85; -webkit-mask-image:linear-gradient(to right, #000 0, #000 calc(50% - 660px), rgba(0,0,0,0.10) calc(50% - 520px), rgba(0,0,0,0.10) calc(50% + 520px), #000 calc(50% + 660px), #000 100%); mask-image:linear-gradient(to right, #000 0, #000 calc(50% - 660px), rgba(0,0,0,0.10) calc(50% - 520px), rgba(0,0,0,0.10) calc(50% + 520px), #000 calc(50% + 660px), #000 100%); } body > nav, body > section, body > div, body > footer{position:relative; z-index:1;} .expertise-head{position:relative; display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:52px; gap:40px; flex-wrap:wrap;} .expertise-head h2{color:#fff; font-size:clamp(28px,3.2vw,40px); max-width:520px; margin-top:14px;} .expertise-head .eyebrow{color:var(--teal);} .expertise-head .eyebrow::before{background:var(--teal);} .expertise-intro{font-size:15.5px; line-height:1.65; color:rgba(255,255,255,0.62); max-width:390px; padding-bottom:6px;} .exp-link{font-size:14px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; border-bottom:1.5px solid rgba(255,255,255,0.3); padding-bottom:4px;} .exp-grid{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;} .exp-card{ display:flex; flex-direction:column; background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:28px 26px; transition:transform .25s ease, background .25s ease, border-color .25s ease; } /* Push chips to the bottom so every card's chip row lines up regardless of how long its description is — this is what makes the grid read as even. */ .exp-card p{flex:1 0 auto;} .exp-card:hover{transform:translateY(-6px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2);} .exp-card.feat{ grid-column:span 2; background:linear-gradient(140deg, rgba(57,160,80,0.28), rgba(29,158,117,0.12) 55%, rgba(255,255,255,0.03)); border-color:rgba(57,160,80,0.45); } .exp-card.feat:hover{border-color:rgba(57,160,80,0.7);} .exp-card.feat h3{font-size:22px;} .exp-card.feat p{max-width:560px; color:rgba(255,255,255,0.78);} .exp-icon{width:46px;height:46px;border-radius:12px;background:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:22px;font-size:20px;overflow:hidden;padding:9px;flex:0 0 auto;} .exp-icon img{width:100%;height:100%;object-fit:contain;} .exp-icon svg{width:100%;height:100%;} .exp-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;} .exp-chip{ font-size:11px; font-weight:600; letter-spacing:0.3px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.72); } .exp-card.feat .exp-chip{background:rgba(57,160,80,0.18); border-color:rgba(57,160,80,0.42); color:rgba(255,255,255,0.9);} .blog-card .thumb.no-image{background:linear-gradient(155deg,var(--green-deep),var(--teal));display:flex;align-items:center;justify-content:center;} .blog-card .thumb.no-image span{color:rgba(255,255,255,0.9);font-family:'Fraunces',serif;font-size:15px;font-weight:600;text-align:center;padding:0 30px;} /* ---------- SCROLL REVEAL ---------- .reveal / .reveal-left / .reveal-right are now *selectors only* — hooks for GSAP to find, with no styles attached. This is the whole reason the library earns its weight: gsap.from() animates from hidden to the element's natural state, so "hidden" exists only inside a running tween. There is no stylesheet rule that can strand content at opacity:0, which is what happened twice with the previous class-toggle approach and is why AOS was ruled out. No .js-ready gate and no failsafe timeout are needed any more. */ /* Subtle hover parallax on hero/about photos and expertise icon chips */ .about-media img, .about-media video{transition:transform .6s ease;} .about-media:hover img, .about-media:hover video{transform:scale(1.045);} .exp-icon{transition:transform .25s ease;} .exp-card:hover .exp-icon{transform:scale(1.08) rotate(-2deg);} /* Stat count-up target */ .exp-card h3{color:#fff; font-size:18px; margin-bottom:10px; font-weight:600;} .exp-card p{font-size:14px; line-height:1.6; color:rgba(255,255,255,0.68);} /* ---------- TEAM ---------- */ .team{padding:110px 0;} .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; gap:24px; flex-wrap:wrap;} .section-head h2{font-size:clamp(28px,3.2vw,40px); max-width:520px;} /* Five members. auto-fit only yields five columns if they actually fit: 5x210 + 4x24 gap = 1146px against a 1116px container, so it silently fell back to four and stranded the fifth card alone on row two. 195 fits. */ .team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(195px,1fr)); gap:30px 22px;} .team-links{display:flex; gap:12px; margin-top:10px;} .team-links a{ font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--green-deep); border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .25s ease, color .25s ease; } .team-links a:hover{color:var(--ink); border-color:var(--green);} .team-card img{aspect-ratio:1/1.08; object-fit:cover; border-radius:18px; margin-bottom:16px; filter:grayscale(15%); transition:filter .4s ease, transform .4s ease;} .team-card:hover img{filter:grayscale(0%); transform:translateY(-4px);} .team-card h4{font-size:15.5px; margin-bottom:2px;} .team-card p{font-size:13px; color:var(--teal); font-weight:600;} .team-card p.cred{font-size:12.5px; color:var(--slate); font-weight:400; line-height:1.5; margin-top:8px;} .section-intro{font-size:15.5px; line-height:1.65; color:var(--slate); max-width:390px; padding-bottom:6px;} /* ---------- BLOG ---------- */ /* Semi-transparent so the page-wide neural layer stays visible through it. */ /* Qualified as section.blog: WordPress adds a bare `blog` class to on the posts index, and an unqualified .blog rule padded the whole document. */ section.blog{padding:110px 0; background:rgba(244,248,245,0.72);} .blog-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr) minmax(0,0.85fr); gap:24px;} .blog-card{background:#fff; border-radius:22px; overflow:hidden; border:1px solid var(--line); transition:transform .25s ease, box-shadow .25s ease;} .blog-card:hover{transform:translateY(-5px); box-shadow:0 24px 44px -24px rgba(19,42,29,0.25);} .blog-card .thumb{aspect-ratio:16/11; overflow:hidden;} .blog-card .thumb img{width:100%;height:100%;object-fit:cover; transition:transform .5s ease;} .blog-card:hover .thumb img{transform:scale(1.06);} .blog-card .body{padding:22px 22px 26px;} .blog-card .meta{font-size:12px; color:var(--slate); font-weight:600; margin-bottom:10px; display:flex; gap:8px; align-items:center;} .blog-card .meta .pill{background:var(--mist); color:var(--green-deep); padding:3px 10px; border-radius:999px; font-size:11px;} .blog-card h3{font-size:18px; line-height:1.32; font-weight:600;} .blog.big .blog-card h3{font-size:23px;} .blog-card p.excerpt{font-size:13.5px; color:var(--slate); line-height:1.55; margin-top:10px;} /* ---------- CTA ---------- */ .cta{padding:128px 0; position:relative; overflow:hidden;} /* Full-bleed footage behind the section. The panel above it becomes glass, so the canopy reads across the whole band instead of being cropped into a rounded rectangle at a third of its opacity. */ .cta-media{position:absolute; inset:0; z-index:0; overflow:hidden;} .cta-media video{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } /* Ink wash: enough to carry white type across the whole section, but far lighter than the old in-panel gradient because there is more of it. */ .cta-media::after{ content:""; position:absolute; inset:0; /* Hard edges, not a fade to paper. Fading produced a pale blurred band top and bottom that read as a rendering fault; every other dark section on the page (Expertise, the brain) meets its neighbours squarely. */ background: linear-gradient(to bottom, rgba(19,42,29,0.82), rgba(19,42,29,0.66) 45%, rgba(19,42,29,0.84)), linear-gradient(105deg, rgba(19,42,29,0.45), rgba(19,42,29,0.12) 60%, rgba(19,42,29,0.4)); } .cta > .wrap{position:relative; z-index:1;} .cta-box{ border-radius:32px; padding:0; position:relative; overflow:hidden; color:#fff; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); align-items:stretch; /* Glass rather than solid ink — the footage has to show through. */ background:rgba(19,42,29,0.42); border:1px solid rgba(255,255,255,0.12); -webkit-backdrop-filter:blur(10px) saturate(115%); backdrop-filter:blur(10px) saturate(115%); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .cta-box{background:rgba(19,42,29,0.82);} } .cta-box .cta-left, .cta-box .cta-card{position:relative; z-index:1;} .cta-left{position:relative; padding:64px 56px; display:flex; flex-direction:column; justify-content:center;} .cta-box .eyebrow{color:var(--teal);} .cta-box .eyebrow::before{background:var(--teal);} .cta-box h2{color:#fff; font-size:clamp(28px,3.2vw,38px); line-height:1.16; margin-top:16px;} .cta-box p.lede{color:rgba(255,255,255,0.72); font-size:16px; line-height:1.6; margin-top:16px; max-width:420px;} .cta-benefits{list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;} .cta-benefits li{display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:rgba(255,255,255,0.88);} .cta-benefits li .check{width:20px; height:20px; border-radius:50%; background:rgba(57,160,80,0.25); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; margin-top:1px;} .cta-card{ position:relative; background:var(--paper); color:var(--ink); margin:20px 20px 20px 0; border-radius:22px; padding:44px 40px; display:flex; flex-direction:column; justify-content:center; } .cta-card .kicker{font-size:12px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--slate);} .cta-card h3{font-size:23px; margin-top:10px; line-height:1.25;} .cta-card p{font-size:14px; color:var(--slate); line-height:1.6; margin-top:12px;} .cta-card .btn-primary{margin-top:26px; justify-content:center; width:100%;} .cta-card .or-row{display:flex; align-items:center; gap:12px; margin:22px 0;} .cta-card .or-row::before,.cta-card .or-row::after{content:"";flex:1;height:1px;background:var(--line);} .cta-card .or-row span{font-size:11.5px; color:var(--slate); text-transform:uppercase; letter-spacing:1px;} .cta-card .contact-link{font-size:14px; font-weight:700; color:var(--green-deep); text-align:center; display:block;} .cta-card .contact-link:hover{color:var(--green);} /* ---------- FOOTER ---------- */ footer{background:var(--ink); color:#fff; padding:80px 0 40px;} .foot-grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,0.7fr) minmax(0,0.7fr) minmax(0,0.7fr); gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.12);} .foot-brand p{font-size:14px; color:rgba(255,255,255,0.6); line-height:1.6; margin-top:14px; max-width:280px;} .foot-col h5{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,0.45); margin-bottom:18px;} .foot-col a{display:block; font-size:14px; color:rgba(255,255,255,0.8); margin-bottom:12px;} .foot-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:28px; font-size:13px; color:rgba(255,255,255,0.45);} .foot-bottom a{color:rgba(255,255,255,0.6); text-decoration:underline; text-underline-offset:3px;} .foot-bottom a:hover{color:#fff;} .foot-col a{transition:color .2s ease;} .foot-col a:hover{color:#fff;} .social-row{display:flex; gap:14px;} .social-row a{ width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08); display:flex;align-items:center;justify-content:center;font-size:13px;color:rgba(255,255,255,0.85); transition:background .2s ease, transform .2s ease; } .social-row a:hover{background:var(--green); color:#fff; transform:translateY(-2px);} @media(max-width:900px){ .hero-grid,.about-grid,.foot-grid{grid-template-columns:1fr;} .about-media{position:static;} .exp-grid,.blog-grid{grid-template-columns:1fr 1fr;} .exp-card.feat{grid-column:span 2;} .cta-box{grid-template-columns:1fr;} .cta-left{padding:48px 32px 12px;} .cta-card{margin:0 20px 20px; padding:32px 28px;} } /* ========================================================================= IMMERSIVE REBUILD ------------------------------------------------------------------------- Everything below belongs to the scroll-story architecture: the preloader, the full-viewport hero, the pinned About narrative, the network-assembly chapter and the horizontal Expertise gallery. One rule governs all of it: **no selector here may hide page content.** Overlays that start opaque (the preloader, the chapter rail) are injected by JS and removed by JS, so they cannot exist unless something is running that can also take them away. ========================================================================= */ /* ---------- SCROLLSMOOTHER SCAFFOLD ---------- ScrollSmoother transforms #smooth-content, so anything position:fixed must live OUTSIDE the wrapper or it will scroll with the page. Deliberately no height/overflow rules here: without JS these are two inert divs and the document scrolls natively. */ #smooth-wrapper, #smooth-content{ /* intentionally unstyled — see note above */ } /* ---------- PRELOADER ---------- Injected by JS immediately after the opening body tag and removed by JS, with its own independent timeout as a second line of defence. If scripting is off it never exists at all, so it can never trap the page behind a black panel. */ .gm-preloader{ position:fixed; inset:0; z-index:10000; background:var(--ink); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; } /* The real brand mark, not a stand-in. It was an inline SVG hexagon so it could be stroked on with DrawSVG; a raster logo can't be drawn, so the reveal is a mask wipe plus a settle instead — same intent, honest asset. */ .gm-preloader__stack{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:24px; } .gm-preloader__mark{width:86px; height:86px; object-fit:contain;} /* The wireframe photograph earns its place here: the intro has no other imagery to compete with, and it gives the panel depth. */ .gm-preloader__plate{position:absolute; inset:0; z-index:0; overflow:hidden;} .gm-preloader__plate img{ width:100%; height:100%; object-fit:cover; opacity:0.16; filter:saturate(0.6); -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 78%); mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 78%); } .gm-preloader__word{ font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.42em; text-indent:0.42em; text-transform:uppercase; color:rgba(255,255,255,0.62); } .gm-preloader__bar{ width:min(220px, 46vw); height:2px; background:rgba(255,255,255,0.16); overflow:hidden; } .gm-preloader__bar i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--green), var(--teal)); } .gm-preloader__count{ font-family:'Fraunces',serif; font-size:13px; color:rgba(255,255,255,0.45); font-variant-numeric:tabular-nums; } /* ---------- CHAPTER RAIL ---------- Fixed dot indicator. Injected by JS (it is meaningless without scroll tracking) and hidden on narrow screens where it would crowd the content. */ .gm-rail{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:14px; } .gm-rail button{ width:9px; height:9px; border-radius:50%; padding:0; cursor:pointer; border:1px solid currentColor; background:transparent; color:var(--slate); opacity:0.4; transition:opacity .3s ease, transform .3s ease, background .3s ease; } .gm-rail button:hover{opacity:0.8;} .gm-rail button.is-active{opacity:1; background:currentColor; transform:scale(1.35);} .gm-rail.is-on-dark button{color:#fff;} @media(max-width:1100px){ .gm-rail{display:none;} } /* ---------- HERO — full viewport ---------- The network is the hero image now. Oversized Fraunces on near-empty paper, with the canvas breathing behind it. */ .hero{ position:relative; min-height:100svh; display:grid; place-items:center; text-align:center; padding:132px 0 96px; overflow:hidden; } .hero-media{position:absolute; inset:0; z-index:0; overflow:hidden;} .hero-media video, .hero-media::before{position:absolute; inset:0; width:100%; height:100%;} .hero-media video{object-fit:cover; opacity:0.62;} /* The ghost button is a hairline border on transparency — fine on paper, invisible on footage. Inside the hero it gets a surface to sit on. */ .hero .btn-ghost{ background:rgba(251,251,248,0.82); border-color:rgba(19,42,29,0.14); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .hero .btn-ghost:hover{background:rgba(251,251,248,0.95); border-color:var(--ink);} /* Same reason: the activity pills sit over sky in some frames. */ .hero-activities li{background:rgba(255,255,255,0.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);} /* Paper wash: heaviest through the middle where the headline sits, lighter at the edges so the footage still reads as footage. Without this the type loses contrast the moment a bright frame comes round. */ .hero-media::before{ content:""; z-index:1; background: /* tight, strong wash only where the headline actually sits */ radial-gradient(58% 42% at 50% 38%, rgba(251,251,248,0.94) 0%, rgba(251,251,248,0.72) 55%, rgba(251,251,248,0) 100%), /* and a lighter one behind the lede and buttons */ radial-gradient(50% 30% at 50% 66%, rgba(251,251,248,0.92) 0%, rgba(251,251,248,0) 100%), linear-gradient(to bottom, rgba(251,251,248,0.72), rgba(251,251,248,0.18) 35%, rgba(251,251,248,0.35) 72%, var(--paper) 100%); } @media(prefers-reduced-motion:reduce){ .hero-media video{display:none;} } .hero .wrap{position:relative; z-index:2;} .hero .hero-cue{z-index:2;} .hero h1{ font-size:clamp(38px, 6.6vw, 96px); line-height:0.97; font-weight:600; letter-spacing:-0.035em; max-width:19ch; margin:0 auto; } /* La segunda mitad del titular es el giro del quiasmo: misma frase, términos invertidos. Va en línea aparte y a menor cuerpo porque es la respuesta, no el enunciado. Bajar el tamaño evita además que el titular ocupe media pantalla: a cuerpo completo serían cinco líneas sobre el vídeo. max-width:17ch en el h1 está calibrado para la primera línea; el em lo ensancha un poco para que su frase, más larga, no rompa en más líneas que la de arriba. */ .hero h1 em{ display:block; font-style:italic; color:var(--green-deep); font-size:0.56em; line-height:1.08; letter-spacing:-0.02em; margin-top:0.28em; } .hero p.lede{ font-size:clamp(16.5px, 1.35vw, 19.5px); line-height:1.62; color:var(--slate); max-width:620px; margin:34px auto 40px; } .hero-ctas{display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:center;} /* The association's four activities, named once. Set as a quiet rule of small caps under the buttons — present for anyone who wants to know what the association actually does, without competing with the headline. */ /* The association's four activities. These were pills at one point, which was a mistake: same shape, background and border as the buttons directly above them, so they read as a second row of buttons — an affordance lie, since none of them is clickable. They are now ONE strip divided into four, which reads as a statement rather than a set of objects, while still holding contrast over the footage. */ .hero-activities{ list-style:none; margin:46px auto 0; padding:0; display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:stretch; background:rgba(251,251,248,0.78); border:1px solid rgba(19,42,29,0.09); border-radius:14px; overflow:hidden; -webkit-backdrop-filter:blur(8px) saturate(115%); backdrop-filter:blur(8px) saturate(115%); } .hero-activities li{ padding:13px 22px; font-size:12.5px; font-weight:600; letter-spacing:0.02em; color:var(--ink); display:flex; align-items:center; } .hero-activities li + li{border-left:1px solid rgba(19,42,29,0.09);} @media(max-width:820px){ .hero-activities{border-radius:12px;} .hero-activities li{padding:11px 16px; font-size:11.5px;} /* Wrapped rows need a horizontal rule too, or the second row floats. */ .hero-activities li:nth-child(3){border-left:0;} .hero-activities li:nth-child(n+3){border-top:1px solid rgba(19,42,29,0.09);} } .hero-tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-deep); background:var(--mist); border:1px solid var(--line); padding:7px 15px; border-radius:999px; margin-bottom:30px; } .hero-tag::before{content:"●"; color:var(--teal); font-size:8px;} /* Scroll cue. The line is drawn by a CSS animation rather than a tween because it must keep running whether or not GSAP is present — it is an affordance, not decoration. */ .hero-cue{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:11px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:0.24em; text-transform:uppercase; color:var(--slate); opacity:0.72; } .hero-cue span{display:block; width:1px; height:46px; background:var(--line); position:relative; overflow:hidden;} .hero-cue span::after{ content:""; position:absolute; inset:0; background:var(--green); animation:gm-cue 2.1s cubic-bezier(.7,0,.3,1) infinite; } @keyframes gm-cue{ 0%{transform:translateY(-100%);} 55%,100%{transform:translateY(100%);} } @media(prefers-reduced-motion:reduce){ .hero-cue span::after{animation:none;} } /* ---------- ABOUT — pinned narrative ---------- The left column pins while the three pillars travel past it. Pinning is only attached when the column actually fits in the viewport (see the JS guard): an earlier attempt pinned a ~500px block against ~400px of scrolling content and the two simply overlapped, because there was nothing to travel past. */ .about{padding:120px 0 130px;} .about-grid{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.05fr); gap:78px; align-items:start; } .about-grid > *{min-width:0;} /* NOT position:sticky — ScrollTrigger.pin() owns this element now, and the two mechanisms fight if both are applied. */ .about-media{position:relative; border-radius:24px; overflow:hidden;} .about-media img, .about-media video{ border-radius:24px; /* kept for the non-composited case */ aspect-ratio:1/1.05; object-fit:cover; width:100%; display:block; } .about-pin .float-card{ position:absolute; left:-30px; bottom:-26px; background:#fff; border-radius:16px; padding:16px 20px; box-shadow:0 20px 40px -18px rgba(19,42,29,0.28); display:flex; gap:12px; align-items:center; max-width:238px; border:1px solid var(--line); } .mission-item{align-items:flex-start;} /* Sector entries carry no thumbnail — the left gutter that held one would read as a missing image, so it is removed. */ .mission-item > div:only-child{flex:1;} /* ---------- ASSEMBLE — the signature chapter ---------- A pinned full-viewport panel in which the drifting neural network condenses into the GreenMinds mark. The nodes are the same particles used elsewhere; their targets are sampled from the logo's alpha channel at runtime. Deliberately canvas rather than MorphSVG: the source is a particle system, not a path, so morphing paths would be the wrong tool. */ /* Copy on the left, the assembling mark on the right. They were both centred at first, so the particles formed directly behind the paragraph and neither could be read. The canvas is full-bleed; it is the *target centre* that is offset (see assignTargets in the canvas script), not the element. */ .assemble{ position:relative; min-height:100svh; background:var(--ink); color:#fff; display:grid; align-items:center; overflow:hidden; } .assemble-copy{max-width:470px;} .assemble::before{ content:""; position:absolute; inset:0; opacity:0.55; pointer-events:none; background:radial-gradient(620px 460px at 50% 42%, rgba(29,158,117,0.30), transparent 65%); } .assemble .assemble-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1;} /* NOTE: a wireframe-brain photograph sat here briefly and was removed. It duplicated the idea the particles already express, and being the stronger image it stole the moment from the animation. Two networks competing is worse than one doing its job. */ .assemble .wrap{position:relative; z-index:2; width:100%;} .assemble .eyebrow{color:var(--teal);} .assemble h2{ font-size:clamp(28px, 3.4vw, 46px); line-height:1.1; margin:14px 0 0; } /* Reads as an equation that resolves into the mark assembling on the right: environmental engineering + AI = (the brain). The operators are the only coloured elements, so the eye follows them across to the canvas. */ /* A two-column grid, not flex: the markup alternates term/operator, so this puts every operator in the same column and they line up vertically. In flex they landed wherever each term happened to end, which read as ragged. */ .assemble-eq{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; gap:8px 20px; } .assemble-eq em{ font-style:normal; font-family:'Inter',sans-serif; font-weight:300; font-size:clamp(30px, 3.6vw, 52px); line-height:1; color:var(--teal); } /* The trailing "=" is the one that points at the assembling mark. */ @media(max-width:899px){ .assemble-eq{justify-content:center;} .assemble-eq em:last-child{display:none;} /* no mark to the right on mobile */ } .assemble p{ font-size:clamp(15px, 1.15vw, 17.5px); line-height:1.68; color:rgba(255,255,255,0.66); margin:22px 0 0; } @media(max-width:899px){ /* No room for two columns — the mark recentres (canvas script) and the copy drops to a translucent panel so it stays readable over the particles. */ .assemble{text-align:center;} .assemble-copy{max-width:none; padding:26px 0;} } /* ---------- EXPERTISE — horizontal gallery ---------- The section pins and the track slides sideways under scroll. Below 900px, or with reduced motion, no pin is created and the rules in the fallback block turn the track back into an ordinary responsive grid. */ .expertise{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:0;} .exp-viewport{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; padding:96px 0; } .exp-head-row{padding:0 clamp(24px, 7vw, 96px); max-width:1400px; margin:0 auto 44px; width:100%;} .exp-track{ display:flex; gap:28px; padding:0 clamp(24px, 7vw, 96px); will-change:transform; } .exp-track .exp-card{ flex:0 0 min(78vw, 540px); display:flex; flex-direction:column; } /* Footage sits under the card's own translucent glass, so the copy keeps its contrast and the video reads as material rather than as a picture with text dumped on it. */ .exp-card{position:relative;} .exp-card .exp-media{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;} .exp-card .exp-media video{width:100%; height:100%; object-fit:cover; opacity:0.58;} /* Only the top of a card escapes the dimming gradient, so clips whose subject sits low in frame get pulled up rather than cropped away. */ .exp-card .exp-media--low video{object-position:center 78%;} .exp-card .exp-media--dim video{opacity:0.38;} /* The card's top third is the only band the copy doesn't occupy, so the gradient stays light there and hardens fast behind the text. Tuned so the footage is legible as a *subject* rather than reading as vague texture. */ .exp-card .exp-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(19,42,29,0.20) 0%, rgba(19,42,29,0.42) 26%, rgba(19,42,29,0.90) 52%, rgba(19,42,29,0.96) 100%); } .exp-card > *:not(.exp-media){position:relative; z-index:1;} /* Counter + rule that track progress through the five cards. */ .exp-meter{ display:flex; align-items:center; gap:18px; padding:0 clamp(24px, 7vw, 96px); max-width:1400px; margin:44px auto 0; width:100%; } .exp-meter__count{ font-family:'Fraunces',serif; font-size:14px; color:rgba(255,255,255,0.55); font-variant-numeric:tabular-nums; flex-shrink:0; } .exp-meter__rail{flex:1; height:2px; background:rgba(255,255,255,0.14); overflow:hidden;} .exp-meter__rail i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--green), var(--teal)); } /* Fallback: no horizontal scroll, so the track must not overflow the page. */ @media (max-width:899px), (prefers-reduced-motion:reduce){ .exp-viewport{min-height:0; padding:96px 0;} .exp-track{ flex-wrap:wrap; justify-content:center; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px); } .exp-track .exp-card{flex:1 1 320px; max-width:520px;} .exp-meter{display:none;} } /* ---------- SECTION SEAMS ---------- Chapters butt against each other rather than stacking on a shared page background, so each dark→light boundary gets a soft seam instead of a hard edge. */ .seam-top::before, .seam-bottom::after{ content:""; position:absolute; left:0; right:0; height:110px; pointer-events:none; z-index:1; } .seam-top::before{top:0; background:linear-gradient(to bottom, rgba(19,42,29,0.55), transparent);} .seam-bottom::after{bottom:0; background:linear-gradient(to top, rgba(19,42,29,0.55), transparent);} @media(max-width:899px){ .about-grid{grid-template-columns:1fr; gap:44px;} .about-pin .float-card{left:auto; right:14px; bottom:-22px;} .hero{padding:112px 0 88px; min-height:auto;} .hero-cue{display:none;} } /* ---------- WORDPRESS BRIDGE ---------- The mockup's sections sit directly in the document flow. In the theme they are wrapped by the block editor's group/post-content containers, which would otherwise constrain the full-bleed ones. */ .gm-smooth-content, .gm-smooth-content > .wp-block-post-content{ margin:0; padding:0; max-width:none; } .gm-smooth-content > .wp-block-post-content > section{ width:100%; } /* The editor adds alignfull to full-width groups; sections handle their own width, so the negative margins that alignfull applies must not stack. */ .wp-site-blocks > .alignfull{ margin-left:0; margin-right:0; } /* WordPress applies --wp--style--block-gap (1.5rem) between sibling blocks, so every section after the pinned ones picked up a 24px top margin — visible as white bands between the dark chapters. Sections own their own spacing via padding; the gap between them must be zero. */ .gm-smooth-content > *, .gm-smooth-content section, .gm-smooth-content .wp-block-post-content > *{ margin-block-start:0; margin-block-end:0; } /* The admin bar is fixed at top:0 with z-index 99999, so the progress hairline sat behind it and was invisible while logged in. Public visitors were always fine; this just moves it clear for editors. */ .admin-bar .gm-progress{ top:32px; } @media screen and (max-width:782px){ .admin-bar .gm-progress{ top:46px; } } /* ---------- STICKY FOOTER ---------- Short pages — 404, an empty search — did not fill the viewport, so the footer ended halfway down with paper below it. Push it to the bottom without touching long pages. The front page is excluded: its sections manage their own heights and the smooth wrapper must not become a flex container. */ :root{ --gm-nav-h:77px; } body:not(.home) .wp-site-blocks{ min-height:calc(100svh - var(--gm-nav-h)); display:flex; flex-direction:column; } body:not(.home) .wp-site-blocks > footer{ margin-top:auto; } .admin-bar:not(.home) .wp-site-blocks{ min-height:calc(100svh - var(--gm-nav-h) - 32px); } /* =========================================================================== EDITORIAL TEMPLATES — blog index, single post, search, 404 --------------------------------------------------------------------------- The one-pager carries the site's character; these inherited a plain Neve-era layout and read as a different website. They now share the front page's vocabulary — dark masthead, serif display type, hairline rules, card lift — without importing its motion, which needs a scroll story to make sense. All radii are set here rather than as block attributes. Hand-writing style.border.radius makes WordPress recompute the expected save markup and report "unexpected or invalid content"; see CLAUDE.md. ========================================================================= */ .gm-radius-8 { border-radius:8px; overflow:hidden; } .gm-radius-12{ border-radius:12px; overflow:hidden; } .gm-radius-16{ border-radius:16px; overflow:hidden; } .gm-radius-22{ border-radius:22px; overflow:hidden; } .gm-radius-24{ border-radius:24px; overflow:hidden; } .gm-radius-28{ border-radius:28px; overflow:hidden; } .gm-radius-pill{ border-radius:999px; } .site-footer .gm-foot-rule{ border:0; border-top:1px solid rgba(255,255,255,.14); margin-block:var(--wp--preset--spacing--40, 2rem); opacity:1; } /* ---------- Masthead ---------------------------------------------------- */ /* Replaces the pale `.page-header` mist band. Dark, so the fixed nav has something to sit against and the page opens with the same weight the front page does. Sits full-bleed; the inner group keeps the reading measure. */ .gm-masthead{ --gm-mast-w:1200px; position:relative; background:var(--ink); color:var(--white); overflow:hidden; padding-block:clamp(5.5rem, 11vw, 8.5rem) clamp(3rem, 6vw, 4.5rem); /* * The reading column is centred by the CONTAINER's padding, not by auto * margins on each child. That distinction matters: WordPress's constrained * layout centres every child individually, so anything with its own * max-width (the title, the lede) floats to the middle instead of lining * up under the eyebrow. Centring once, here, lets the children sit flush * left at whatever measure reads best. */ padding-inline:max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - var(--gm-mast-w)) / 2)); } /* Narrow modifier for reading-width pages (a post, a policy). The value is a custom property so the band's column always matches the article column below it — a mismatch here is what put the title and the body text on two different left edges. */ .gm-masthead--narrow{ --gm-mast-w:720px; } .gm-masthead::after{ /* faint radial lift, top-left */ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 12% 0%, rgba(29,158,117,.20), transparent 62%); pointer-events:none; } /* :not(canvas) is load-bearing — `position:relative` on the neural canvas would override its `position:absolute`, drop it into normal flow and render it at its intrinsic ratio as hundreds of pixels of empty space. */ .wp-block-group.gm-masthead > *:not(canvas){ position:relative; z-index:1; /* The constrained layout centres every child with `margin-left:auto`, so the title (22ch) and lede (56ch) drifted right, away from the eyebrow. Core marks those margins !important, so nothing but !important can reach them — this is the escape hatch WordPress itself leaves open, not a specificity workaround that a later rule could quietly undo. */ margin-inline-start:0 !important; } .gm-masthead h1, .gm-masthead .wp-block-post-title, .gm-masthead .wp-block-query-title{ color:var(--white); font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); font-size:clamp(2.1rem, 5.2vw, 3.6rem); line-height:1.08; letter-spacing:-.02em; margin:0; max-width:22ch; } .gm-masthead p{ color:rgba(255,255,255,.72); } /* Eyebrow — small caps label above the title, with the rule the front page uses. Keyed to a class so patterns and templates share one implementation. */ .gm-eyebrow{ display:flex; align-items:center; gap:.75rem; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 1.1rem; } .gm-eyebrow::after{ content:''; flex:1 1 auto; height:1px; max-width:120px; background:currentColor; opacity:.35; } .gm-masthead__lede{ font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.6; max-width:56ch; margin-top:1.4rem; } /* Post meta row: date · categories */ .gm-postmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin-top:1.6rem; font-size:.85rem; color:rgba(255,255,255,.7); } .gm-postmeta a{ color:var(--teal); text-decoration:none; } .gm-postmeta a:hover{ text-decoration:underline; } .gm-postmeta .wp-block-post-terms{ display:flex; gap:.5rem; } /* ---------- Post grid --------------------------------------------------- */ .gm-postgrid .wp-block-post-template{ gap:clamp(1.25rem, 2.4vw, 2rem); } /* One post should not stretch to fill three columns — cap the track width so a thin archive still reads as a grid rather than one giant orphan card. */ .gm-postgrid .wp-block-post-template.is-layout-grid{ grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); } .gm-postcard{ position:relative; display:flex; flex-direction:column; height:100%; background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .45s ease; } .gm-postcard:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:0 18px 44px -18px rgba(19,42,29,.28), 0 2px 8px rgba(19,42,29,.06); } .gm-postcard .wp-block-post-featured-image{ margin:0; overflow:hidden; background:var(--mist); } .gm-postcard .wp-block-post-featured-image img{ display:block; width:100%; height:200px; object-fit:cover; transition:transform .6s cubic-bezier(.22,1,.36,1); } .gm-postcard:hover .wp-block-post-featured-image img{ transform:scale(1.05); } .gm-postcard__body{ display:flex; flex-direction:column; flex:1 1 auto; gap:.6rem; padding:1.5rem 1.5rem 1.7rem; } .gm-postcard .wp-block-post-date{ font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin:0; } .gm-postcard .wp-block-post-title{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); font-size:1.28rem; line-height:1.26; letter-spacing:-.01em; margin:0; } .gm-postcard .wp-block-post-title a{ color:var(--ink); text-decoration:none; } /* Whole card clickable, without nesting anchors: stretch the title link. */ .gm-postcard .wp-block-post-title a::after{ content:''; position:absolute; inset:0; } .gm-postcard .wp-block-post-excerpt{ font-size:.92rem; line-height:1.6; color:var(--slate); margin:0; } .gm-postcard .wp-block-post-excerpt__more-text{ display:none; } /* ---------- Pagination -------------------------------------------------- */ .wp-block-query-pagination{ gap:.4rem; align-items:center; } .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:2.5rem; height:2.5rem; padding:0 .75rem; border:1px solid var(--line); border-radius:999px; font-size:.9rem; font-weight:600; color:var(--slate); text-decoration:none; transition:background .25s ease, color .25s ease, border-color .25s ease; } .wp-block-query-pagination a:hover{ background:var(--ink); border-color:var(--ink); color:var(--white); } .wp-block-query-pagination .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:var(--white); } .wp-block-query-pagination .page-numbers.dots{ border-color:transparent; } /* ---------- Article body ------------------------------------------------ */ .gm-article{ padding-block:clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); } .gm-article > *:last-child{ margin-bottom:0; } .gm-article p{ font-size:1.06rem; line-height:1.75; color:var(--slate); } .gm-article h2, .gm-article h3, .gm-article h4{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); color:var(--ink); letter-spacing:-.015em; line-height:1.2; margin-top:2.2em; margin-bottom:.6em; } .gm-article h2{ font-size:clamp(1.5rem, 3vw, 2rem); } .gm-article h3{ font-size:clamp(1.25rem, 2.2vw, 1.45rem); } .gm-article a{ color:var(--green-deep); text-underline-offset:.18em; } .gm-article strong{ color:var(--ink); } .gm-article ul, .gm-article ol{ padding-left:1.25rem; color:var(--slate); line-height:1.75; } .gm-article li{ margin-bottom:.5em; } .gm-article img, .gm-article .wp-block-image img{ border-radius:14px; } .gm-article figcaption{ font-size:.82rem; color:var(--slate); opacity:.85; text-align:center; margin-top:.7rem; } .gm-article blockquote{ margin:2rem 0; padding:.2rem 0 .2rem 1.6rem; border-left:3px solid var(--green); font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); font-size:1.2rem; line-height:1.5; color:var(--ink); } .gm-article table{ width:100%; border-collapse:collapse; font-size:.92rem; } .gm-article th, .gm-article td{ border-bottom:1px solid var(--line); padding:.7rem .6rem; text-align:left; } .gm-article th{ color:var(--ink); font-weight:700; } .gm-article code{ background:var(--mist); border:1px solid var(--line); border-radius:5px; padding:.12em .38em; font-size:.9em; } .gm-article pre{ background:var(--ink); color:#D9E7DE; border-radius:14px; padding:1.2rem 1.4rem; overflow:auto; font-size:.86rem; line-height:1.6; } .gm-article pre code{ background:none; border:0; padding:0; color:inherit; } /* Featured image pulled up so it overlaps the masthead — the one gesture that makes a post page look designed rather than assembled. */ .gm-article-hero{ margin-top:clamp(-4rem, -6vw, -2.5rem); position:relative; z-index:2; } .gm-article-hero img{ display:block; width:100%; height:auto; border-radius:18px; box-shadow:0 24px 60px -24px rgba(19,42,29,.45); } /* ---------- Comments ---------------------------------------------------- */ .gm-comments{ border-top:1px solid var(--line); } .gm-comments .wp-block-comments-title{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); color:var(--ink); font-size:1.5rem; margin-bottom:1.5rem; } .gm-comments .wp-block-avatar img{ border-radius:999px; } .gm-comments .wp-block-comment-author-name a{ color:var(--ink); text-decoration:none; } .gm-comments input[type="text"], .gm-comments input[type="email"], .gm-comments input[type="url"], .gm-comments textarea{ width:100%; padding:.7rem .9rem; border:1px solid var(--line); border-radius:10px; background:var(--white); font:inherit; font-size:.95rem; } .gm-comments .wp-block-button__link, .gm-comments input[type="submit"]{ background:var(--ink); color:var(--white); border:0; border-radius:999px; padding:.75rem 1.6rem; font-weight:700; cursor:pointer; } /* ---------- 404 --------------------------------------------------------- */ /* Centred in whatever height is left over, so a two-line page still fills the viewport instead of stranding the footer halfway down. */ .gm-404{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:clamp(4rem, 10vw, 7rem) var(--wp--preset--spacing--40, 2rem); } .gm-404 .gm-eyebrow{ justify-content:center; } .gm-404 .gm-eyebrow::after{ display:none; } .gm-404 h1{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); font-size:clamp(2.4rem, 7vw, 4.2rem); line-height:1.05; letter-spacing:-.03em; color:var(--ink); margin:0 0 1rem; } .gm-404 p{ color:var(--slate); font-size:1.05rem; max-width:46ch; margin:0 auto 2rem; } /* ---------- Search form ------------------------------------------------- */ .gm-masthead .wp-block-search{ max-width:520px; margin-top:1.8rem; } .gm-masthead .wp-block-search__input{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:var(--white); border-radius:999px; padding:.8rem 1.2rem; } .gm-masthead .wp-block-search__input::placeholder{ color:rgba(255,255,255,.45); } .gm-masthead .wp-block-search__button{ background:var(--green); color:var(--white); border:0; border-radius:999px; padding:.7rem 1.4rem; font-weight:700; } @media (max-width:781px){ .gm-article-hero{ margin-top:-1.5rem; } .gm-postcard .wp-block-post-featured-image img{ height:180px; } } /* ---------- Post footer CTA --------------------------------------------- */ /* Closes an article with the one action that matters. Deliberately quieter than the front page's membership panel — it follows a long read, so it persuades by being calm rather than by competing with the article. */ .gm-post-cta{ background:var(--mist); border:1px solid var(--line); border-radius:18px; padding:clamp(1.75rem, 4vw, 2.5rem); text-align:left; } .gm-post-cta h2{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); color:var(--ink); font-size:1.4rem; line-height:1.2; margin:0 0 .7rem; } .gm-post-cta p{ color:var(--slate); font-size:.98rem; line-height:1.6; margin:0 0 1.4rem; max-width:52ch; } .gm-post-cta .wp-block-button__link{ background:var(--ink); color:var(--white); font-weight:700; padding:.8rem 1.7rem; } .gm-post-cta .wp-block-button__link:hover{ background:var(--green-deep); } /* Buttons carrying .gm-radius-pill must not clip their own focus ring — the utility sets overflow:hidden for image cards, which is wrong here. */ .wp-block-button.gm-radius-pill, .gm-radius-pill.wp-block-button__link{ overflow:visible; } .wp-block-button.gm-radius-pill .wp-block-button__link{ border-radius:999px; } /* ---------- Masthead neural canvas -------------------------------------- */ /* Sits between the ink background and the copy. Lower opacity than the front page's instance: this band carries a headline, and the network is texture behind it rather than the subject. */ .gm-neural-bg--masthead{ position:absolute; inset:0; width:100%; height:100%; opacity:.42; z-index:0; pointer-events:none; } @media (prefers-reduced-motion:reduce){ .gm-neural-bg--masthead{ opacity:.28; } } /* ---------- The page shell ---------------------------------------------- Centres a 1200px column with the CONTAINER's padding, exactly as .gm-masthead does. Any block that pins its children with `margin-inline-start:0` must sit inside one of these, or those children go flush to the viewport edge instead of to the column — killing the auto margin also kills the centring those margins were doing. ------------------------------------------------------------------------ */ .gm-shell, .gm-article, .gm-comments, .gm-article-hero{ --gm-shell-w:1200px; padding-inline:max(clamp(1.25rem, 4vw, 2.5rem), calc((100% - var(--gm-shell-w)) / 2)); } /* ---------- Article grid: text column + reading rail --------------------- The article and its contents index share one grid, rather than the rail being absolutely positioned beside the text. That matters for one reason: a grid item can be `position: sticky` and travel the full height of the article, which an absolutely positioned sibling cannot. Column 1 is capped at a readable measure — 1200px of prose is roughly 130 characters a line, past the point where the eye reliably finds the start of the next one. Column 2 takes the remainder. When reading.js does not run there is no rail, the second column collapses to nothing, and the text sits exactly where it does now. Nothing here hides content or depends on the script having succeeded. ------------------------------------------------------------------------ */ .gm-article{ display:grid; grid-template-columns:minmax(0, 760px) minmax(0, 1fr); column-gap:clamp(2rem, 5vw, 4.5rem); align-items:start; } .gm-article > *{ grid-column:1; max-width:100%; margin-block:0 1.35em; margin-inline-start:0 !important; margin-inline-end:0; } /* Lead paragraph. The opening line of an article should look like an opening line — this is the cheapest typographic signal that a page was designed. */ .gm-article > p:first-of-type{ font-size:1.2rem; line-height:1.65; color:var(--ink); } /* Section rule above every h2, so a long read has visible joints. */ .gm-article > h2{ width:100%; /* stretch, so the rule spans the column */ padding-top:1.6em; border-top:1px solid var(--line); } .gm-article > h2:first-of-type{ border-top:0; padding-top:0; } @media (max-width:1099px){ .gm-article{ grid-template-columns:minmax(0,1fr); } } /* ---------- The reading rail -------------------------------------------- */ .gm-toc{ grid-column:2; /* * The exact span is set by reading.js, which knows the child count. The * rail MUST span every row: a sticky element can only travel inside its * own grid area, and pinned to row 1 alone it would stop after the first * paragraph. (Same trap as the About-section image on the front page.) */ grid-row:1 / -1; position:sticky; top:118px; /* clears the fixed nav */ align-self:start; max-height:calc(100svh - 160px); overflow-y:auto; font-size:.86rem; padding-left:1.6rem; border-left:1px solid var(--line); } @media (max-width:1099px){ .gm-toc{ display:none; } } .gm-toc__label{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); opacity:.75; margin:0 0 .9rem; } .gm-toc__list{ list-style:none; margin:0; padding:0; } .gm-toc__item{ margin:0; } .gm-toc__item--h3 .gm-toc__link{ padding-left:.9rem; font-size:.82rem; opacity:.85; } .gm-toc__link{ display:block; padding:.42rem 0; color:var(--slate); text-decoration:none; line-height:1.4; border-left:2px solid transparent; margin-left:-1.6rem; /* sit the marker on the rail's own hairline */ padding-left:1.6rem; transition:color .2s ease, border-color .2s ease; } .gm-toc__item--h3 .gm-toc__link{ padding-left:2.4rem; } .gm-toc__link:hover{ color:var(--ink); } .gm-toc__link.is-current{ color:var(--green-deep); font-weight:600; border-left-color:var(--green); } /* Everything after the article keeps the article's column, so the page has a single left rail and one consistent right edge rather than three widths. */ .gm-post-cta{ max-width:760px; margin-inline-start:0 !important; } .gm-comments .wp-block-comments > *{ max-width:760px; margin-inline-start:0 !important; margin-inline-end:0; } /* The featured image uses the full column — it is the page's opening image, and cropping it narrow wastes the overlap with the masthead. */ .gm-article-hero img{ max-width:100%; } /* ---------- Comment form ------------------------------------------------- Core outputs the "logged in as / required fields" notice and the field label as bare paragraphs with no spacing of their own, so they ran together into one sentence and the submit button sat flush against the textarea. Everything below is spacing and hierarchy, not decoration. */ .gm-comments .comment-form{ margin-top:1.75rem; } .gm-comments .comment-form > *{ margin-block:0 1.25rem; } .gm-comments .comment-form > *:last-child{ margin-bottom:0; } /* The two notices are administrative, not content — set them back. */ .gm-comments .logged-in-as, .gm-comments .comment-notes{ font-size:.85rem; line-height:1.5; color:var(--slate); opacity:.8; margin-bottom:1.5rem; } .gm-comments .logged-in-as a, .gm-comments .comment-notes a{ color:var(--green-deep); } .gm-comments .comment-form label{ display:block; margin-bottom:.5rem; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); } .gm-comments .required{ color:var(--green); } .gm-comments textarea{ min-height:170px; resize:vertical; line-height:1.6; } .gm-comments input[type="text"]:focus, .gm-comments input[type="email"]:focus, .gm-comments input[type="url"]:focus, .gm-comments textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(57,160,80,.14); } /* The gap the screenshot was about: the button was touching the textarea. */ .gm-comments .form-submit{ margin-top:1.75rem; } .gm-comments .form-submit input[type="submit"]{ transition:background .25s ease, transform .25s ease; } .gm-comments .form-submit input[type="submit"]:hover{ background:var(--green-deep); transform:translateY(-1px); } /* Author fields sit side by side where there is room. */ @media (min-width:640px){ .gm-comments .comment-form-author, .gm-comments .comment-form-email{ display:inline-block; width:calc(50% - .6rem); vertical-align:top; } .gm-comments .comment-form-author{ margin-right:1rem; } } /* ---------- Post navigation ---------------------------------------------- Rendered by patterns/post-nav.php, which omits a side that has no adjacent post — so a one-sided nav is a single card, not a card and a blank. */ .gm-postnav{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem; border-top:1px solid var(--line); padding-top:2rem; margin-top:1rem; max-width:760px; } .gm-postnav__link{ display:flex; flex-direction:column; gap:.45rem; padding:1.2rem 1.4rem; border:1px solid var(--line); border-radius:14px; background:var(--white); text-decoration:none; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .gm-postnav__link:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:0 14px 32px -16px rgba(19,42,29,.26); } /* When only "next" exists it should still sit on the left rather than stranding itself across the grid — auto-fit would otherwise stretch it. */ .gm-postnav__link--next{ text-align:right; } .gm-postnav__link--next:only-child{ text-align:left; } .gm-postnav__label{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); opacity:.7; } .gm-postnav__title{ font-family:var(--wp--preset--font-family--display, 'Fraunces', Georgia, serif); font-size:1.02rem; line-height:1.3; color:var(--ink); } /* Everything after the article keeps the article's column, so the page has a single left rail and one consistent right edge rather than three widths. */ .gm-comments .wp-block-comments > *{ max-width:760px; margin-inline-start:0 !important; margin-inline-end:0; } /* The featured image uses the full column — it is the page's opening image, and cropping it narrow wastes the overlap with the masthead. */ .gm-article-hero img{ max-width:100%; } /* ---------- Identidad y misión en el footer ------------------------------ Requisitos de Google for Nonprofits: identificador de la entidad, dirección postal y declaración de misión, visibles en el sitio oficial. Aparecen en todas las páginas porque la exigencia es del sitio, no de una página. Repartidos en dos sitios a propósito. La identidad va en la primera columna, bajo el nombre de la asociación, que es donde un lector espera encontrar quién es y dónde está. La misión va abajo a todo el ancho: es prosa y describe los programas, así que necesita línea larga. Antes había un tagline en esa primera columna que decía exactamente lo mismo que la misión con otras palabras. Se eliminó; si vuelve a hacer falta un texto ahí, que no repita la misión. */ .gm-identity{ font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.72); margin:0.9rem 0 0; } .gm-identity strong{ color:#fff; font-weight:700; } .gm-legal{ /* Sin borde propio: el separador .gm-foot-rule ya marca el corte justo encima, y las dos reglas juntas se leían como una raya doble. */ margin-top:0.4rem; } .gm-legal__label{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); opacity:.9; margin:0 0 .7rem; } .gm-legal__mission{ font-size:.86rem; line-height:1.7; color:rgba(255,255,255,.62); margin:0; max-width:96ch; } /* ---------- Nav sin botón de membresía ----------------------------------- Con el CTA presente hay tres hijos y space-between deja los enlaces en el centro. Sin él quedan dos, y aquí hubo dos intentos fallidos: 1. margin-inline:auto en los enlaces los centraba respecto al espacio SOBRANTE, no al viewport, y dejaba aire justo donde estaba el botón. 2. Un contrapeso con ::after sí los centraba de verdad en el viewport, pero con todo el lado derecho vacío el ojo compara contra ese hueco y lo lee como desalineado igualmente. Con dos elementos lo que funciona es uno en cada extremo, que además es space-between sin más: no hace falta ninguna regla. Se deja documentado para que nadie vuelva a intentar centrarlos. */ /* "Registered as" en tono menor: la marca es el título de arriba, esto es la nota que lo ancla a la entidad registrada. Sin ella, el nombre legal en la línea siguiente parecía el mismo nombre repetido. */ .gm-identity__reg{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.45); } /* ---------- Las dos direcciones del ciclo (sección "The idea") ------------ La ecuación de arriba insinúa la relación; esto la nombra. Dos columnas iguales, porque las dos direcciones pesan lo mismo: la asociación existe por el ida y vuelta, no por una de las dos. La flecha va en ::before y no en el texto, para que un lector de pantalla lea "AI to environmental engineering" y no un símbolo suelto. */ .gm-loop{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:clamp(1.4rem, 3vw, 2.6rem); margin-top:clamp(1.8rem, 4vw, 2.8rem); max-width:760px; } .gm-loop__leg{ padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.16); } .gm-loop__dir{ display:flex; align-items:baseline; gap:.55rem; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:.7rem; } .gm-loop__dir::before{ content:"→"; /* decorativa: el texto ya dice la dirección */ font-size:1rem; line-height:1; } .gm-loop__leg p{ font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.7); margin:0; } /* Etiqueta "Emerging" en Applications. Discreta a propósito: informa de que ese dominio es dirección y no historial, sin convertirse en un reclamo. */ .gm-emerging{ display:inline-block; margin-left:.55rem; padding:.12rem .5rem; border:1px solid var(--line); border-radius:999px; font-family:var(--wp--preset--font-family--body, inherit); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); vertical-align:middle; white-space:nowrap; }