/* ========================================================= Global Uplifters — design tokens Sibling palette to Shine Your Inner Light: same type family and "shine" gradient mark, warmer/earthier base for a worldwide-community feel rather than the app's pastel hero. ========================================================= */ :root{ /* ===== Canonical palette — verified against shineyourinnerlight.com ===== */ --cream:#FBF7F0; --cream-warm:#F7EFE2; --gold:#C99A2F; --gold-soft:#E8C77A; --coral:#E89B7A; --coral-soft:#FAD9C8; --lavender:#C7B8E8; --lavender-soft:#E8DFF6; --turquoise:#7FC9C2; --turquoise-soft:#CFEAE7; --pink:#EBA7BD; --pink-soft:#F8D9E2; --blue-deep:#2E7268; --card-blue:linear-gradient(135deg,var(--turquoise-soft),var(--lavender-soft)); /* Deep accents for text-on-soft-background (mockup literals). */ --plum-deep:#6E4F94; --coral-deep:#A85A2E; --pink-deep:#A14C6F; --badge-green:#5C8F87; --ink:#2A2522; --ink-soft:#5A524C; --ink-muted:#8A827C; --line:rgba(42,37,34,0.08); --line-warm:rgba(201,154,47,0.18); --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --serif:"Fraunces",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; /* ===== Legacy aliases: old GU names -> new palette (semantic, 1:1 only). Split tokens (--terracotta-deep, --teal-deep, --ochre, --ochre-soft) are deliberately NOT aliased - each call site is rewritten explicitly, because one old name maps to several different new colors by role. ===== */ --sand:var(--cream); --sand-deep:var(--cream-warm); --terracotta:var(--gold); --terracotta-soft:var(--coral-soft); --teal:var(--blue-deep); --teal-soft:var(--turquoise-soft); --plum:var(--plum-deep); --plum-soft:var(--lavender-soft); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--sand); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important} } /* ---------- shine gradient (shared brand mark) ---------- */ /* .shine-gradient-text is provided globally by the main site's wp-custom-css and is the class the main site actually uses. This aliases GU's legacy .shine-text name onto the identical treatment (values copied verbatim from the main site, incl. display:inline-block) so the hero widget needs no _elementor_data edit. Keyframe `shinetext` is GLOBAL - do not define `shineflow` for this. */ .shine-text{ background:linear-gradient(90deg,#C99A2F,#E89B7A,#EBA7BD,#C7B8E8,#7FC9C2,#C99A2F); background-size:200% auto; -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; animation:shinetext 4s linear infinite; display:inline-block; /* background-clip:text paints the gradient only inside this element's box, so any glyph ink outside it gets NO gradient and - because -webkit-text-fill-color is transparent - renders invisible. Fraunces' natural extent is ~1.234em but h1's line-height is 1.05em, making half-leading negative (-0.092em): descenders on the LAST line overflow the box bottom by ~0.092em and vanish (the clipped 'y' in "obviously"). Extend the paint area past the descenders and cancel the layout cost with an equal negative margin, so spacing is byte-for-byte unchanged. */ padding-bottom:0.12em; margin-bottom:-0.12em; } /* ---------- layout helpers ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .section{padding:88px 0} .section-narrow{max-width:640px;margin:0 auto} .eyebrow{ font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.14em; text-transform:uppercase;color:var(--gold);margin:0 0 16px; } h1,h2,h3,h4{font-family:var(--serif);font-weight:500;color:var(--ink);margin:0} h1{font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-0.01em} h2{font-size:clamp(28px,4vw,40px);line-height:1.1} h3{font-size:20px;line-height:1.25} p{margin:0 0 16px;color:var(--ink-soft)} .lead{font-size:18px;line-height:1.6;color:var(--ink-soft)} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:1000; background:rgba(246,239,228,0.92);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .header-inner{ max-width:1180px;margin:0 auto;padding:14px 24px; display:flex;align-items:center;justify-content:space-between;gap:24px; } /* Brand wordmark must be INK, not gold. It is an , and .brand-word sets no colour of its own, so Elementor's global kit rule `.elementor-kit-12 a{color:#C99A2F}` (0,1,1) beats `a{color:inherit}` (0,0,1) and paints the whole wordmark gold. Mockup: the wordmark is var(--ink) and ONLY the small 'Global Uplifters' line is gold. !important goes on .brand-word (not .brand) - putting it on .brand would beat `.brand-word small`'s gold on importance and turn the small line dark too. The small keeps its own !important so it still wins over the wordmark rule. */ .brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--ink)} .brand img{height:36px;width:auto} .brand-word{font-family:var(--serif);font-size:16.5px;font-weight:500;line-height:1.15;color:var(--ink) !important} .brand-word small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:0.11em;text-transform:uppercase;color:var(--gold) !important;font-weight:600;margin-top:3px} .main-nav{display:flex;align-items:center;gap:6px} .main-nav a{ padding:9px 14px;border-radius:100px;font-size:14px;font-weight:500;color:var(--ink-soft); transition:all .18s; } .main-nav a:hover,.main-nav a.active{background:rgba(201,154,47,0.08);color:var(--ink)} .header-cta{ display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px; background:var(--terracotta);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap; transition:background .18s; } .header-cta:hover{transform:translateY(-1px);background:var(--coral);box-shadow:0 6px 18px rgba(232,155,122,0.35)} .nav-toggle{display:none} @media (max-width:860px){ .main-nav{display:none} .nav-toggle{display:flex;background:none;border:none;font-size:22px;color:var(--ink);cursor:pointer} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px; font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .18s; } .btn-primary{background:var(--terracotta);color:#fff} .btn-primary:hover{transform:translateY(-2px);background:var(--coral);box-shadow:0 8px 24px rgba(232,155,122,0.3)} .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-warm)} .btn-ghost:hover{background:rgba(255,255,255,0.6);border-color:var(--gold)} .btn-sm{padding:9px 18px;font-size:13.5px} /* ---------- hero / constellation ---------- */ .hero{position:relative;padding:36px 0 40px;overflow:hidden} .hero-inner{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2} .hero-content{max-width:640px} .hero-content .lead,.hero-content .micro,.hero-content > p{max-width:500px} .hero .micro{font-size:14px;color:var(--ink-muted);margin-top:18px} .hero-map{ position:absolute;top:70px;left:calc((100% - 1140px)/2 + 560px);width:calc(50% - 158px);height:calc(100% - 70px);z-index:1;opacity:0.9; pointer-events:none; } @media (max-width:900px){ .hero-map{position:relative;width:100%;right:0;height:280px;margin-top:32px;opacity:1} .hero{padding-bottom:0} } .pin{fill:var(--terracotta)} .pin-pulse{ transform-origin:center; animation:pulse 2.6s ease-in-out infinite; } .pin-pulse:nth-child(2n){animation-delay:.5s} .pin-pulse:nth-child(3n){animation-delay:1s} @keyframes pulse{ 0%,100%{opacity:0.55;r:3.5} 50%{opacity:1;r:6} } .map-line{stroke:var(--gold);stroke-width:1.2;opacity:0.55;fill:none;stroke-dasharray:3 4} /* ---------- stat / foundation strip ---------- */ .pulse-strip a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* ---------- cards ---------- */ .card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px} .u-card{ background:var(--card-blue);border:0.5px solid var(--line);border-radius:var(--r-md);padding:26px; transition:transform .2s,box-shadow .2s; } .u-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px -14px rgba(42,37,34,0.15)} .u-avatar{ width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:20px;color:#fff;margin-bottom:16px; } .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px} .tag{ font-size:11.5px;font-weight:600;letter-spacing:0.03em;padding:5px 11px;border-radius:100px; color:var(--blue-deep);background:var(--turquoise-soft); } .tag-region{color:var(--plum);background:var(--plum-soft)} .tag-giveback{color:var(--coral-deep);background:var(--coral-soft)} .u-card-link{font-size:13.5px;font-weight:600;color:var(--gold);display:inline-flex;align-items:center;gap:6px} /* ---------- gratitude ribbon ---------- */ .ribbon{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600; color:var(--gold);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:10px; } /* ---------- footer (LIGHT - matches new mockup's .footer) ---------- */ .site-footer{background:var(--cream-warm);color:var(--ink-soft);padding:70px 0 30px;border-top:0.5px solid var(--line-warm)} /* .footer-grid renders on the OUTER Elementor container, but the four columns live in its nested .e-con-inner. Making the OUTER a grid put that single inner child into column 1 (303px), which the inner override then split into 4 again -> 73/37/37/37px. So the outer keeps spacing only; the mockup's .footer-top grid goes on the inner. */ .footer-grid{margin-bottom:46px} .footer-grid h5{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink);margin:0 0 16px} .footer-grid a{display:block;font-size:14px;color:var(--ink-soft);margin-bottom:10px;transition:color .2s} .footer-grid a:hover{color:var(--gold)} .footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:17px;color:var(--ink);margin-bottom:14px} .footer-brand img{height:32px} .footer-tagline{font-size:14px;line-height:1.6;color:var(--ink-muted);max-width:280px} .footer-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;max-width:176px} @media (max-width:600px){.footer-social{max-width:none;flex-wrap:nowrap;justify-content:space-between;gap:4px}} .footer-social a{ display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%; background:var(--cream);border:0.5px solid var(--line);color:var(--ink-soft);transition:all .2s; } .footer-social a:hover{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-2px)} .footer-legal{ border-top:0.5px solid var(--line-warm);border-bottom:0.5px solid var(--line-warm); padding:22px 0;margin:6px 0 22px;font-size:12.5px;line-height:1.75;color:var(--ink-muted); } .footer-legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px} .footer-legal a:hover{color:var(--gold)} .footer-bottom{padding-top:0;font-size:12px;color:var(--ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} /* ---------- GU zone (LIGHT PASTEL - matches new mockup's .gu-zone) ---------- */ .gu-zone{ background:linear-gradient(135deg,var(--turquoise-soft) 0%,var(--lavender-soft) 50%,var(--pink-soft) 100%); padding:96px 0; } .gu-zone .eyebrow{color:var(--gold)} .gu-zone h2{color:var(--ink)} .gu-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px} @media (max-width:700px){.gu-cards{grid-template-columns:1fr}} .gu-card{ background:rgba(255,255,255,0.65);border:0.5px solid rgba(201,154,47,0.25); border-radius:16px;padding:28px 24px;transition:background .2s,border-color .2s; } .gu-card:hover{background:#fff;border-color:rgba(201,154,47,0.45)} .gu-card h3{color:var(--gold);font-size:20px;margin-bottom:10px} .gu-card p{color:var(--ink-soft);font-size:15px;line-height:1.65;margin:0} .gu-chips-box{ background:rgba(255,255,255,0.5);border:0.5px solid var(--line-warm); border-radius:16px;padding:24px 28px;margin-bottom:32px; } .gu-chips-label{color:var(--gold);font-size:13px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px} .gu-chips{display:flex;flex-wrap:wrap;gap:8px} .gu-chip{ padding:6px 14px;border-radius:100px;background:var(--cream); border:0.5px solid var(--line-warm);font-size:13px;color:var(--ink-soft); } .gu-callout{ background:rgba(255,255,255,0.55);border:0.5px solid var(--line-warm); border-radius:16px;padding:32px 28px;margin-bottom:32px;text-align:center; } .gu-callout h3{color:var(--gold);font-size:22px;margin-bottom:10px} .gu-callout p{color:var(--ink-soft);font-size:15px;line-height:1.65;max-width:560px;margin:0 auto 20px} .gu-btn-gold{ display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:var(--gold); color:#fff;border-radius:100px;font-size:15px;font-weight:700;text-decoration:none; transition:transform .18s,background .18s; } .gu-btn-gold:hover{transform:translateY(-2px);background:var(--coral)} .gu-btn-outline-gold{ display:inline-flex;align-items:center;gap:8px;padding:14px 32px;background:transparent; color:var(--gold);border:1.5px solid var(--gold);border-radius:100px;font-size:15px;font-weight:600;text-decoration:none; } .gu-btn-outline-gold:hover{background:rgba(232,199,122,0.1)} /* ---------- legal callouts & GU badges ---------- */ .legal-callout{ background:var(--coral-soft);border-left:3px solid var(--coral);border-radius:var(--r-sm); padding:16px 20px;font-size:13.5px;color:var(--ink-soft);line-height:1.6; } .legal-callout a{color:var(--gold);font-weight:600} .badge-affiliate{ display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600; color:#fff;background:var(--badge-green);padding:5px 12px;border-radius:100px;letter-spacing:0.02em; } .tag-entertainer{color:var(--pink-deep);background:var(--pink-soft)} /* ---------- magic link CTA ---------- */ /* ---------- magic link step flow ---------- */ .flow-strip{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:36px 32px} .flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px} .flow-step{position:relative;padding:24px 20px;background:var(--sand);border-radius:var(--r-lg);text-align:center} .flow-step-num{ width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center; margin:0 auto 14px;font-family:var(--serif);font-size:15px;color:#fff; background:linear-gradient(135deg,var(--gold),var(--coral)); } .flow-step h4{font-size:15px;margin-bottom:6px} .flow-step p{font-size:13px;margin:0;color:var(--ink-muted)} .flow-arrow{display:none} @media (max-width:760px){ .flow-steps{grid-template-columns:1fr} } .legal-body h2{font-size:22px;margin:44px 0 14px} .legal-body h2:first-child{margin-top:0} .legal-body p{font-size:15px;color:var(--ink-soft)} .legal-body ul{padding-left:20px;color:var(--ink-soft);font-size:15px;line-height:1.7} .legal-body li{margin-bottom:6px} /* ---------- directory-specific ---------- */ .filter-bar{ display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:18px 0 36px; border-bottom:1px solid var(--line);margin-bottom:36px; } .chip{ padding:9px 16px;border-radius:100px;font-size:13px;font-weight:500; background:var(--cream);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:all .2s; } .chip:hover,.chip:focus{background:var(--cream) !important;border-color:var(--gold) !important;color:var(--gold) !important} .chip.active,.chip.active:hover,.chip.active:focus{background:var(--gold) !important;color:#fff !important;border-color:var(--gold) !important} .search-input{ margin-left:auto;padding:10px 16px;border-radius:100px;border:1px solid var(--line); font-family:var(--sans);font-size:13.5px;min-width:220px;background:#fff; } .search-input:focus{outline:none;border-color:var(--gold)} /* ---------- profile page ---------- */ .profile-hero{background:var(--sand-deep);padding:64px 0 48px} .profile-top{display:flex;gap:28px;align-items:center;flex-wrap:wrap} .profile-avatar{width:96px;height:96px;border-radius:50%;font-size:34px} .profile-meta{color:var(--ink-muted);font-size:14px} .disclosure{ background:var(--cream-warm);border-left:3px solid var(--gold);border-radius:var(--r-sm);padding:16px 18px;font-size:12.5px;line-height:1.6; color:var(--ink-soft);margin-top:20px; } .disclosure a{color:var(--gold);font-weight:600} .credential-list{list-style:none;padding:0;margin:0} .credential-list li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)} .credential-list li::before{content:"";position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--gold)} .two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:start} @media (max-width:820px){.two-col{grid-template-columns:1fr}} /* ---------- GU mobile drawer (added — template's own hamburger was non-functional) ---------- */ .gu-mobile-backdrop{position:fixed;inset:0;background:rgba(42,37,34,0.35);opacity:0;visibility:hidden;transition:all .3s;z-index:998} .gu-mobile-backdrop.gu-mobile-open{opacity:1;visibility:visible} .gu-mobile-panel{position:fixed;top:0;right:0;bottom:0;left:auto;width:86%;max-width:390px;background:var(--cream);transform:translateX(100%);opacity:1;visibility:hidden;transition:transform .32s cubic-bezier(.4,0,.2,1),visibility .32s;z-index:999;padding:166px 26px 34px;overflow-y:auto;display:flex;flex-direction:column;box-shadow:-12px 0 44px rgba(42,37,34,0.18)} .gu-mobile-panel.gu-mobile-open{transform:translateX(0);visibility:visible} .gu-mobile-nav{display:flex;flex-direction:column;gap:6px} .gu-mobile-nav a{display:block;padding:14px 4px;font-family:var(--serif);font-size:19px;color:var(--ink);border-bottom:0.5px solid var(--line)} .gu-mobile-nav a:hover{color:var(--gold)} .gu-mobile-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(42,37,34,0.06);border:none;font-size:22px;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0} @media(min-width:861px){.gu-mobile-panel,.gu-mobile-backdrop{display:none !important}} /* ---------- cascade overrides: site-wide Elementor Global Kit / theme / Additional CSS otherwise beat these ---------- */ body{background:var(--sand) !important} h1,h2,h3,h4{font-family:var(--serif) !important;font-weight:500 !important} body .eyebrow{color:var(--gold) !important} .gu-zone .eyebrow{color:var(--gold) !important} .btn-primary{color:#fff !important} .btn-ghost{color:var(--ink) !important} .btn-ghost:hover{color:var(--ink) !important} .header-cta{color:#fff !important} .gu-btn-gold{color:#fff !important} .gu-btn-outline-gold{color:var(--gold) !important} .u-card-link{color:var(--gold) !important} .pulse-strip a{color:#fff !important} /* ---------- Home page CTA buttons (native widgets) ---------- */ /* css_classes/_css_classes controls do not render on this install (confirmed gotcha, same as the original project) -- styled via widget ID instead. */ .elementor-element-guherobtn1 a.elementor-button, .elementor-element-gumeditbtn a.elementor-button { display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px; font-size:15px;font-weight:600;background:var(--terracotta);color:#fff; } .elementor-element-guherobtn1 a.elementor-button:hover, .elementor-element-gumeditbtn a.elementor-button:hover { background:var(--coral);transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,155,122,0.3); } .elementor-element-guherobtn2 a.elementor-button, .elementor-element-guvideobtn a.elementor-button { display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:100px; font-size:15px;font-weight:600;background:transparent;color:var(--ink);border:1.5px solid var(--line-warm); } .elementor-element-guherobtn2 a.elementor-button:hover, .elementor-element-guvideobtn a.elementor-button:hover { border-color:var(--gold);color:var(--ink); } .elementor-element-gudirgfwrap > .e-con-inner { display:grid; grid-template-columns:1.55fr 1fr; gap:52px; align-items:start; } @media (max-width:820px){ .elementor-element-gudirgfwrap > .e-con-inner { grid-template-columns:1fr; } } .elementor-element-gudirthankssec { background: var(--sand-deep); } .elementor-element-gupftop > .e-con-inner { display:flex !important; flex-direction:row !important; gap:28px; align-items:center !important; flex-wrap:wrap; } body .elementor-widget-heading.elementor-element-gupfname h1.elementor-heading-title { font-size:clamp(28px,4vw,40px) !important; line-height:1.1 !important; } body .elementor-widget-heading.elementor-element-gupfabouth2 h2.elementor-heading-title { font-size:24px !important; margin-bottom:16px !important; } /* prevent Elementor double-grid: outer container is block, grid lives only on .e-con-inner */ .elementor-element-gupfbodywrap.two-col{display:block !important} .elementor-element-gupfbodywrap > .e-con-inner { display:grid; grid-template-columns:1.5fr 1fr; gap:56px; align-items:start; } @media (max-width:820px){ .elementor-element-gupfbodywrap > .e-con-inner { grid-template-columns:1fr; } } .elementor-element-guhdrcta a.elementor-button { display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:100px;font-size:14px;font-weight:600;background:var(--terracotta);color:#fff !important; } .elementor-element-guhdrcta a.elementor-button:hover { background:var(--coral); } .elementor-element-guhdrinner > .e-con-inner { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:20px; flex-wrap:nowrap; } .elementor-element-guftrgrid{display:block !important} .elementor-element-guftrgrid > .e-con-inner { display:grid !important; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; } @media (max-width:780px){ .elementor-element-guftrgrid > .e-con-inner { grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .elementor-element-guftrgrid > .e-con-inner { grid-template-columns:1fr; gap:24px; } } .elementor-element-guheromap { position:static !important; } /* ---------- native heading widget cascade fix (color/family/weight/size were losing to sitewide Additional CSS + Elementor's own kit styles) ---------- */ body .elementor-widget-heading .elementor-heading-title { font-family:var(--serif) !important; font-weight:500 !important; color:var(--ink) !important; margin:0 !important; } body .elementor-widget-heading h1.elementor-heading-title { font-size:clamp(38px,6vw,64px) !important; line-height:1.04 !important; letter-spacing:-0.01em !important; } body .elementor-widget-heading h2.elementor-heading-title { font-size:clamp(29px,4vw,40px) !important; line-height:1.12 !important; letter-spacing:-0.01em !important; } body .elementor-widget-heading h3.elementor-heading-title { font-size:20px !important; line-height:1.25 !important; } body .elementor-widget-heading.elementor-element-gulegalh1 h1.elementor-heading-title { font-size:clamp(30px,4.5vw,44px) !important; } /* Astra reserves body padding-top for its own fixed header; GU pages use the Canvas template with no theme header, so this space is wasted -- remove it here (this file only loads on GU pages, scoped safely). */ html body { padding-top:0 !important; } /* Sections sit FLUSH. These top-level containers are content_width:full flex-columns and Elementor gives them --gap:20px by default, which inserted a 20px band of BODY background between every section (9 on Home) - most visible where the GU zone's pastel meets the footer. The mockup has no gaps; each section carries its own padding. Same fix/rationale the main site already uses ('sections flush (no flex gap)'). Scoped to these container IDs so nested containers keep their gaps. */ .elementor-element-guhomecontainer, .elementor-element-gudircontainer, .elementor-element-gulegalcontainer { padding:0 !important; gap:0 !important; row-gap:0 !important; } /* body{overflow-y:auto} from Astra never actually scrolls independently on GU pages (scrollTop stays 0, html does the real scrolling) but its mere presence breaks position:sticky descendants -- reset it here (GU-pages-only file). */ html body { overflow-y:visible !important; } /* .site-header's own position:sticky never engages because its immediate Elementor-generated wrapper chain (down to .elementor-1091, the header template's own root div) is exactly content-height (114px), giving sticky no room to operate against. Elementor always renders this header template with the SAME root class (.elementor-1091, template ID 1091) regardless of which of the 4 GU pages embeds it, making it a reliable universal fix point. Apply sticky to that wrapper instead. */ .elementor-element-guhomeheader, .elementor-element-gudirheader, .elementor-element-gulegalheader, .elementor-1091 { position:sticky !important; top:0 !important; z-index:1000 !important; } .elementor-element-gufeaturedgrid > .e-con-inner { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .elementor-element-guherobtnrow > .e-con-inner { display:flex !important; flex-direction:row !important; gap:14px; flex-wrap:wrap; margin-top:8px; } .elementor-element-guherocontent { width:100% !important; } /* Featured section: equal-height cards regardless of content length */ .elementor-element-gufeaturedgrid .elementor-widget-text-editor { height:100%; } .elementor-element-gufeaturedgrid .elementor-widget-container { height:100%; } .elementor-element-gufeaturedgrid .u-card { height:100%; box-sizing:border-box; display:flex; flex-direction:column; } .elementor-element-gufeaturedgrid .u-card .u-card-link { margin-top:auto; padding-top:10px; } body .elementor-widget-heading.elementor-element-gufeaturedheading h2.elementor-heading-title { max-width:520px !important; } /* pulse-grid: same e-con-inner display:grid fix already applied elsewhere, missed here originally */ .elementor-element-guvideogrid > .e-con-inner { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .elementor-element-gumeditgrid > .e-con-inner { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; } .elementor-element-guvideogrid .elementor-widget-text-editor { height:100%; } .elementor-element-guvideogrid .elementor-widget-container { height:100%; } .elementor-element-guvideogrid .u-card { height:100%; box-sizing:border-box; display:flex; flex-direction:column; } /* ============ GRADIENT CTA ============ Replicates the main site's proven border-box gradient technique (see .elementor-element-b2f1bc9 .elementor-button in the main site's wp-custom-css). Deliberately NOT named .btn-shine: the main site has a live, higher-reach `.btn-shine{background: !important}` rule with no padding, which would paint over this button's interior fill and hide the gradient border entirely. Keyframe `shinetext` is provided globally by the main site. */ .gu-btn-shine{ display:inline-flex;align-items:center;gap:8px; padding:13px 27px; border:2.5px solid transparent; border-radius:100px; background:linear-gradient(var(--cream),var(--cream)) padding-box, linear-gradient(90deg,#C99A2F,#E89B7A,#EBA7BD,#C7B8E8,#7FC9C2,#C99A2F) border-box; background-size:100% 100%, 200% 100%; background-position:0 0, 0% 50%; animation:shinetext 4s linear infinite; /* !important is REQUIRED: Elementor's global kit sets `.elementor-kit-12 a{color:#C99A2F}` (0,1,1) which beats `.gu-btn-shine` (0,1,0), and `.footer-grid a` does the same with white in the footer - so without this the CTA renders gold on the page and white in the footer. The main site's own .btn-shine carries `color:#2A2522 !important` for exactly this reason. */ color:var(--ink) !important; font-family:var(--sans);font-size:15px;font-weight:500; text-decoration:none;cursor:pointer; transition:transform 0.2s; } .gu-btn-shine:hover{transform:translateY(-2px)} .gu-btn-shine:active{transform:scale(0.98)} /* ============ FOUNDATION (light cream - replaces the dark navy pulse-strip) ============ */ .foundation-sec{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-warm) 100%);scroll-margin-top:100px} .foundation-stat{background:var(--cream-warm);padding:16px 22px;border-radius:var(--r-sm);border-left:3px solid var(--gold);max-width:520px;margin:34px auto 0;text-align:center} .foundation-stat-num{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--gold);line-height:1} .foundation-stat-label{font-size:13.5px;color:var(--ink-soft);margin-top:6px} .bigger-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin-top:44px} .bigger-card{padding:32px 26px;background:var(--card-blue);border-radius:var(--r-lg);border:0.5px solid var(--line)} .bigger-card h3{font-size:19px;margin-bottom:10px;line-height:1.25} .bigger-card p{font-size:14px;line-height:1.6;margin:0} /* The .e-con-inner gotcha - container css_classes land on the OUTER div, but children live in a nested .e-con-inner. This has hit EVERY grid in this project. */ .elementor-element-gufoundgrid > .e-con-inner{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px} /* ============ QUOTE STRIP ============ */ .quote-strip{background:var(--cream-warm);padding:44px 24px;text-align:center;border-top:0.5px solid var(--line-warm);border-bottom:0.5px solid var(--line-warm)} .quote-strip blockquote{max-width:780px;margin:0 auto;font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,26px);color:var(--ink);line-height:1.35;font-weight:400} .quote-strip cite{display:block;margin-top:14px;font-style:normal;font-size:13px;color:var(--gold);font-weight:600;letter-spacing:0.08em;text-transform:uppercase} .u-card-link svg{transition:transform .18s} .u-card:hover .u-card-link svg{transform:translateX(3px)} /* ---------- hamburger icon (restyled to match gusite.zip mockup) ---------- The existing header script (option gu_header_script_js) toggles: .gu-mobile-open on #guMobilePanel + #guMobileBackdrop .menu-open on #guNavToggle These selectors MUST match that contract - do not rename. */ .nav-toggle{width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;transition:background .2s;padding:0} .nav-toggle:hover{background:rgba(201,154,47,0.1)} .hamburger-lines{width:20px;height:13px;position:relative;display:block} .hamburger-lines span{position:absolute;left:0;width:100%;height:1.5px;background:var(--ink);border-radius:2px;transition:all .3s ease} .hamburger-lines span:nth-child(1){top:0} .hamburger-lines span:nth-child(2){top:50%;margin-top:-0.75px} .hamburger-lines span:nth-child(3){bottom:0} .nav-toggle.menu-open .hamburger-lines span:nth-child(1){top:50%;margin-top:-0.75px;transform:rotate(45deg)} .nav-toggle.menu-open .hamburger-lines span:nth-child(2){opacity:0} .nav-toggle.menu-open .hamburger-lines span:nth-child(3){bottom:50%;margin-bottom:-0.75px;transform:rotate(-45deg)} /* mockup has no separate close button - the hamburger morphs to X. Kept in the DOM (script still binds it) but hidden; Escape + link-click also close. */ .gu-mobile-close{display:none} /* The MAIN site's wp-custom-css (which also loads on GU pages) styles its OWN quote strips with `.elementor-widget-text-editor blockquote{ font-family:"Poppins"... !important; font-size:clamp(22px,3vw,30px) !important; }`. GU's quotes are built as text-editor widgets too, so that rule matches them as well - and at equal specificity (0,1,1) its !important always beat `.quote-strip blockquote`. Reassert the mockup's values with higher specificity + !important. Only font-family and font-size differ; the other properties it forces (max-width 780, margin 0 auto, italic, #2A2522, line-height 1.35, weight 400) already match the mockup, so they are left alone. The main site's cite rule targets `blockquote cite` (cite INSIDE blockquote); GU's cite is a SIBLING of blockquote, so it is unaffected. */ body .quote-strip blockquote{ font-family:var(--serif) !important; font-size:clamp(20px,3vw,26px) !important; } /* --- foundation header (mockup .section-header-center.section-narrow) --- Mockup wraps eyebrow+h2+lead in .section-header-center.section-narrow { max-width:780px; margin:0 auto; text-align:center; margin-bottom:34px }. GU's Elementor structure has them as flat siblings, so the same result is achieved by constraining/centring the three widgets directly - no _elementor_data restructuring needed. Measured against the rendered mockup: header 780px centred, h2 rgb(42,37,34) 40px/44.8px -0.4px, lead 18px/28.8px. */ .elementor-element-gupulseeyebrow, .elementor-element-gupulseheading, .elementor-element-gufoundlead{ max-width:780px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; width:100% !important; } .elementor-element-gufoundlead{margin-bottom:34px !important} /* --- voice-artists grid: undo the MAIN site's 680px cap on GU pages --- The main site's wp-custom-css (which also loads here) contains, for ITS OWN Voice Artists section: #voice-artists{ max-width:680px !important; margin-left:auto !important; margin-right:auto !important; } #voice-artists > .e-con-inner{ max-width:680px; } GU's grid carries _element_id "voice-artists" too, so that cap lands on it and squashes the 7 cards into 2 columns; the new mockup renders 4 across at 1100px. Re-qualifying with GU's own element class raises specificity to (1,1,0) so it beats the main site's (1,0,0) !important, and CANNOT match the main site (no such class exists there), leaving its Voice Artists section untouched. */ #voice-artists.elementor-element-gumeditgrid{ max-width:none !important; } #voice-artists.elementor-element-gumeditgrid > .e-con-inner{ max-width:none !important; } /* --- equal-height foundation cards --- In the mockup .bigger-card IS the grid item, so grid's default align-items:stretch equalises them for free. In Elementor the grid item is the widget WRAPPER, and the .bigger-card inside it only shrink-wraps its own content (measured: items all 225px, cards 181/205/225). Cascade height:100% down to the card, exactly as already done for .u-card in the Featured grid. */ .elementor-element-gufoundgrid .elementor-widget-text-editor{height:100%} .elementor-element-gufoundgrid .elementor-widget-container{height:100%} .elementor-element-gufoundgrid .bigger-card{height:100%;box-sizing:border-box} /* --- heading widths: the mockup controls where each h2 wraps via max-width --- mockup index.html: featured h2 max-width:520px (margin-bottom:36px) videos h2 max-width:520px (margin-bottom:36px) medits h2 max-width:560px (margin-bottom:14px) */ body .elementor-widget-heading.elementor-element-guvideoheading h2.elementor-heading-title { max-width:520px !important; } body .elementor-widget-heading.elementor-element-gumeditheading h2.elementor-heading-title { max-width:560px !important; } /* --- equal-height voice-artist cards (In Gratitude) --- Same nesting issue as the Featured .u-card and the Foundation .bigger-card: the grid ITEM is the Elementor widget wrapper (measured equal per row, 338/318), but the .u-card inside only shrink-wraps its own content (310/318/338/290). Cascade height:100% down to the card so it fills its row. grid-auto-rows:1fr is also needed here - unlike the other grids this one has TWO rows, and with default auto rows each row sizes to its own tallest card, leaving row1 != row2 (338 vs 318). The mockup renders all SEVEN cards at an identical 270px, so 1fr locks every implicit row to the same height and reproduces that outcome regardless of copy length. No flex/margin-top:auto here - the mockup's .u-card is not flex, so the Fiverr line flows naturally and any slack sits at the card's bottom. */ .elementor-element-gumeditgrid > .e-con-inner{grid-auto-rows:1fr} .elementor-element-gumeditgrid .elementor-widget-text-editor{height:100%} .elementor-element-gumeditgrid .elementor-widget-container{height:100%} .elementor-element-gumeditgrid .u-card{height:100%;box-sizing:border-box} /* --- directory cards: equal height + photo avatars + read-more --- #directoryGrid is a raw-HTML CSS grid (from the gu_directory shortcode); demo cards are direct grid items, CPT cards wrap their content in Elementor element divs. Stretch + height:100% + flex-column equalises every card regardless of blurb/bio length and anchors 'View profile' to the bottom. */ #directoryGrid{align-items:stretch} #directoryGrid .u-card{height:100%;box-sizing:border-box;display:flex;flex-direction:column} #directoryGrid .u-card .u-card-link{margin-top:auto;padding-top:12px} /* photo avatar fills the same circle the initials use */ #directoryGrid .u-avatar{flex:0 0 auto;width:56px;height:56px;align-self:flex-start} .u-avatar-photo{padding:0;overflow:hidden} .u-avatar-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block} /* gray 'Read more' cue after the card blurb */ .u-readmore{color:var(--ink-muted);font-weight:500} /* ============ Get Featured form: WPForms styled to the gudirectory mockup's .gu-form ============ Scoped to the directory right column (.elementor-element-gudirgfright) so it never touches other WPForms forms elsewhere on the site. */ .elementor-element-gudirgfright .wpforms-container{margin:0} .elementor-element-gudirgfright .wpforms-form{ background:var(--card-blue);border:0.5px solid var(--line);border-radius:var(--r-lg); padding:28px;display:flex;flex-direction:column;gap:14px; } .elementor-element-gudirgfright .wpforms-field{padding:0 !important;margin:0 !important;width:100%;clear:none;border:none} .elementor-element-gudirgfright .wpforms-field-label{ font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;margin:0 0 6px !important;line-height:1.3} .elementor-element-gudirgfright .wpforms-field-name > .wpforms-field-label{display:none} .elementor-element-gudirgfright .wpforms-field-sublabel{ font-size:13px !important;font-weight:600 !important;color:var(--ink) !important;margin:0 0 6px !important;display:block} .elementor-element-gudirgfright input[type=text], .elementor-element-gudirgfright input[type=email], .elementor-element-gudirgfright input[type=url], .elementor-element-gudirgfright select, .elementor-element-gudirgfright textarea{ width:100% !important;max-width:100% !important;margin:0 !important;padding:11px 14px !important; border-radius:var(--r-sm) !important;border:1px solid var(--line) !important; font-family:var(--sans) !important;font-size:14.5px !important;background:var(--cream) !important; color:var(--ink) !important;box-shadow:none !important;outline:none;transition:border-color .18s} .elementor-element-gudirgfright input:focus, .elementor-element-gudirgfright select:focus, .elementor-element-gudirgfright textarea:focus{border-color:var(--gold) !important;box-shadow:none !important} .elementor-element-gudirgfright textarea{resize:vertical;min-height:96px} .elementor-element-gudirgfright ::placeholder{color:var(--ink-muted) !important;opacity:.75} /* paired rows (City/Country, Platform/Social) - WPForms one-half stacks by default in this narrow column */ .elementor-element-gudirgfright .wpforms-field.wpforms-one-half{width:calc(50% - 7px) !important;display:inline-block !important;vertical-align:top;float:none !important} .elementor-element-gudirgfright .wpforms-field.wpforms-one-half.wpforms-first{margin-right:14px !important} .elementor-element-gudirgfright .wpforms-field-name fieldset{border:0 !important;padding:0 !important;margin:0 !important;min-width:0 !important} .elementor-element-gudirgfright .wpforms-field-name .wpforms-field-row{display:flex !important;flex-wrap:nowrap !important;container-type:normal !important;max-width:100% !important;width:100% !important;justify-content:flex-start !important;gap:0 !important} .elementor-element-gudirgfright .wpforms-field-name .wpforms-field-row .wpforms-field-row-block{flex:0 0 calc(50% - 7px) !important;width:calc(50% - 7px) !important;max-width:none !important;min-width:0 !important;margin:0 !important;padding:0 !important;float:none !important;box-sizing:border-box !important} .elementor-element-gudirgfright .wpforms-field-name .wpforms-field-row .wpforms-field-row-block:first-child{margin-right:14px !important} /* consent + opt-in: small regular text, gold links */ .elementor-element-gudirgfright .wpforms-field-checkbox .wpforms-field-label{font-weight:600 !important;color:var(--ink) !important} .elementor-element-gudirgfright .wpforms-field-checkbox ul li label, .elementor-element-gudirgfright .wpforms-field-checkbox ul li{font-weight:400 !important;font-size:12.5px !important;color:var(--ink-soft) !important;line-height:1.6} .elementor-element-gudirgfright .wpforms-field-checkbox a{color:var(--gold) !important;font-weight:600} /* submit -> gold pill (WPForms default is blue #066aab) */ .elementor-element-gudirgfright .wpforms-submit{ background:var(--gold) !important;color:#fff !important;border:none !important;border-radius:100px !important; padding:14px 30px !important;font-family:var(--sans) !important;font-size:15px !important;font-weight:500 !important; cursor:pointer;transition:transform .2s,background .2s;box-shadow:none !important;width:auto !important} .elementor-element-gudirgfright .wpforms-submit:hover{background:var(--coral) !important;transform:translateY(-2px)} @media(max-width:560px){ .elementor-element-gudirgfright .wpforms-field.wpforms-one-half{width:100% !important;margin-right:0 !important;display:block !important} } /* Grayed placeholder for the 'I'm interested in' dropdown until a real option is chosen */ .elementor-element-gudirgfright select:has(option[value=""]:checked){color:var(--ink-muted) !important} /* profile hero: flush to header, tighter padding */ .gu-profile-page .elementor-element-gupfherosec{padding-top:22px !important;padding-bottom:30px !important;margin-top:-20px !important} /* profile 'As seen with' video link: readable ink on the blue block, gold on hover */ .gu-watch-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink) !important;text-decoration:none;transition:color .18s} .gu-watch-link:hover{color:var(--gold) !important} /* footer column titles in Inter, not Fraunces */ .elementor-1092 .elementor-widget-heading .elementor-heading-title{font-family:'Inter',system-ui,-apple-system,sans-serif !important} /* ===== batch-refinements: equal-height cards + dir spacing + wider get-featured form ===== */ .card-grid{grid-auto-rows:1fr} .card-grid>*{height:100%} .card-grid>.elementor-widget>.elementor-widget-container{height:100%} .card-grid .u-card{height:100%} .elementor-element-gudirgridwrap{padding-bottom:56px !important} @media (min-width:1025px){.elementor-element-gudirgfwrap>.e-con-inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) !important;gap:44px !important}} /* ===== mobile header: brand + hamburger on top row, Get Featured below ===== */ @media (max-width:860px){ .header-inner>.e-con-inner{flex-wrap:wrap !important;align-items:center !important;row-gap:12px !important;column-gap:16px !important} .elementor-element-guhdrbrand{order:1 !important;margin-right:auto !important} .elementor-element-guhdrtoggle{order:2 !important} .elementor-element-guhdrcta{order:3 !important;flex-basis:100% !important} } /* ===== desktop footer social: match main-site spacing (38px icons, 14px col gap, 20px row gap, 4+3) ===== */ @media (min-width:601px){ .footer-social{gap:20px 14px;max-width:200px;align-content:flex-start} .footer-social a{width:38px !important;height:38px !important;margin-bottom:0 !important} } /* ===== mobile: drawer social + centered Inter CTA + bigger hero headings ===== */ .gu-mobile-social{display:flex;justify-content:space-between;gap:6px;margin-top:30px} .gu-mobile-social a{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--cream);border:0.5px solid var(--line);color:var(--ink-soft);transition:all .2s} .gu-mobile-social a:hover{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-2px)} .gu-mobile-nav a.btn{text-align:center !important;font-family:var(--sans) !important} @media (max-width:600px){.elementor-element-guherosec h1,.elementor-element-gudirh1b h1,body .elementor-element-guherosec h1.elementor-heading-title,body .elementor-element-gudirh1b h1.elementor-heading-title{font-size:46px !important;line-height:1.06 !important}}