/* Endless Garage — Memberships page (post 3404). */ .eg-wrap{max-width:1200px;margin:0 auto;} .eg-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:#BDFF3E;margin-bottom:14px;font-weight:700;} .eg-rule{width:52px;height:2px;background:#BDFF3E;margin:0 0 22px;} /* ---- step cards ---- */ .eg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;} .eg-step{position:relative;padding:36px 30px 32px;background:rgba(10,10,10,.78); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);border-top:3px solid #BDFF3E;transition:.35s;} .eg-step:hover{background:rgba(189,255,62,.06);border-color:rgba(189,255,62,.45);transform:translateY(-4px);} .eg-step__num{display:block;font-size:46px;line-height:1;font-weight:800;color:#BDFF3E; letter-spacing:-.03em;opacity:.95;} .eg-step__title{margin:16px 0 12px;font-size:21px;line-height:1.25;font-weight:700;color:#FFFFFF;} .eg-step__lead{margin:0;color:#C7C7C7;font-size:15.5px;line-height:1.7;} .eg-step__list{list-style:none;margin:18px 0 0;padding:0;} .eg-step__list li{position:relative;padding-left:20px;margin-bottom:9px;color:#C7C7C7; font-size:14.5px;line-height:1.55;} .eg-step__list li:before{content:"";position:absolute;left:0;top:9px;width:10px;height:1px;background:#BDFF3E;} /* ---- credits callout ---- */ .eg-callout{margin:38px auto 0;max-width:900px;padding:26px 30px;background:rgba(189,255,62,.07); border-left:3px solid #BDFF3E;text-align:left;} .eg-callout h4{margin:0 0 10px;color:#BDFF3E;font-size:13px;letter-spacing:.16em; text-transform:uppercase;font-weight:700;} .eg-callout p{margin:0;color:#FFFFFF;font-size:16px;line-height:1.7;} .eg-callout strong{color:#BDFF3E;} /* ---- benefit grid ---- */ .eg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.10);} .eg-cell{padding:34px 30px 32px;background:#fff;transition:.35s;} .eg-cell:hover{background:#0e0e0e;} .eg-cell:hover .eg-cell__title,.eg-cell:hover .eg-cell__body{color:#fff;} .eg-cell__kicker{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:#4F6B10;font-weight:700;margin-bottom:12px;} .eg-cell__title{margin:0 0 12px;font-size:19px;line-height:1.3;font-weight:700;color:#111;transition:.35s;} .eg-cell__body{margin:0;color:#4C4C4C;font-size:15px;line-height:1.7;transition:.35s;} /* ---- feature rows ---- */ .eg-feature{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;} .eg-feature__copy{padding:56px 54px;display:flex;flex-direction:column;justify-content:center;} .eg-feature__copy h3{margin:0 0 16px;font-size:30px;line-height:1.2;font-weight:800;color:#FFFFFF;} .eg-feature__copy p{margin:0 0 14px;color:#C7C7C7;font-size:16px;line-height:1.75;} .eg-feature__media img{width:100%;height:100%;object-fit:cover;display:block;} .eg-feature--flip .eg-feature__media{order:-1;} @media (max-width:1024px){ .eg-steps{grid-template-columns:1fr;} .eg-grid{grid-template-columns:1fr 1fr;} .eg-feature{grid-template-columns:1fr;} .eg-feature--flip .eg-feature__media{order:0;} .eg-feature__copy{padding:38px 26px;} } @media (max-width:640px){ .eg-grid{grid-template-columns:1fr;} .eg-step{padding:28px 22px;} } .eg-tiers{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1040px;margin:0 auto;} .eg-tier{position:relative;padding:40px 36px 36px;background:rgba(10,10,10,.80); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18);transition:.35s;} .eg-tier--feature{border-color:#BDFF3E;background:rgba(18,26,6,.86);} .eg-tier:hover{transform:translateY(-4px);border-color:rgba(189,255,62,.6);} .eg-tier__tag{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase; font-weight:700;color:#0b0b0b;background:#BDFF3E;padding:5px 11px;margin-bottom:18px;} .eg-tier__tag--ghost{background:transparent;color:#BDFF3E;border:1px solid rgba(189,255,62,.5);} .eg-tier__name{margin:0 0 6px;font-size:26px;line-height:1.2;font-weight:800;color:#FFFFFF;} .eg-tier__price{margin:0 0 4px;font-size:30px;line-height:1.1;font-weight:800;color:#BDFF3E;letter-spacing:-.02em;} .eg-tier__price small{display:block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:#C7C7C7;} .eg-tier__deposit{margin:0 0 18px;padding:10px 14px;background:rgba(189,255,62,.10); border-left:2px solid #BDFF3E;color:#fff;font-size:13.5px;line-height:1.5;} .eg-tier__body{margin:0 0 18px;color:#C7C7C7;font-size:15.5px;line-height:1.7;} .eg-tier__list{list-style:none;margin:0;padding:0;} .eg-tier__list li{position:relative;padding-left:22px;margin-bottom:10px;color:#C7C7C7; font-size:14.5px;line-height:1.55;} .eg-tier__list li:before{content:"";position:absolute;left:0;top:8px;width:11px;height:1px;background:#BDFF3E;} @media (max-width:860px){.eg-tiers{grid-template-columns:1fr;}} /* The theme decorates section eyebrows with a lime slab via :after, which sits on the text baseline and cuts through the descenders -- it reads as a highlighter smear rather than an accent. */ .elementor-3404 .dbl__subtitle:after{display:none !important;} .elementor-3404 .dbl__subtitle{letter-spacing:.22em;background:transparent !important;} .elementor-3404 .dbl__subtitle:before{display:none !important;} /* Primary CTA. Every button rendered as the same black-with-border pill, so "Join the Waitlist" carried no more weight than "Member Login", and the brand lime was never used as a fill anywhere. NOTE: the theme sets `.wgl-button{background:unset}` and paints the fill with `.wgl-button:after{background-color:inherit;z-index:0}`. Colouring only the element leaves the pseudo-element black on top -- which made the text unreadable. The pseudo must be coloured too, and the label lifted above it. */ .elementor-3404 .eg-cta-primary .wgl-button, .elementor-3404 .eg-cta-primary .wgl-button:after{ background-color:#BDFF3E !important; border-color:#BDFF3E !important;} .elementor-3404 .eg-cta-primary .wgl-button .button-content-wrapper, .elementor-3404 .eg-cta-primary .wgl-button .wgl-button-text{ position:relative; z-index:2; color:#0A0A0A !important; font-weight:800;} .elementor-3404 .eg-cta-primary .wgl-button:hover, .elementor-3404 .eg-cta-primary .wgl-button:hover:after{ background-color:#FFFFFF !important; border-color:#FFFFFF !important;} .elementor-3404 .eg-cta-primary .wgl-button:hover .wgl-button-text{color:#0A0A0A !important;} /* Hero CTA row. The two buttons are _element_width:auto flex items; with a third button they filled the row, and once Contact Us was removed the pair sat flush left. Full-width siblings are unaffected by centring. */ .elementor-3404 .elementor-element-b9cff67 > .elementor-widget-wrap{justify-content:center;} /* ---- testimonials ---- */ .eg-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1170px;margin:0 auto;} .eg-quote{position:relative;padding:38px 32px 32px;background:rgba(10,10,10,.78); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14);transition:.35s;} .eg-quote:hover{border-color:rgba(189,255,62,.45);transform:translateY(-4px);} .eg-quote:before{content:"\201C";position:absolute;top:6px;left:24px;font-size:74px;line-height:1; color:#BDFF3E;opacity:.28;font-family:Georgia,serif;} .eg-quote__text{position:relative;margin:14px 0 20px;color:#EDEDED;font-size:16px;line-height:1.75;} .eg-quote__by{display:flex;align-items:center;gap:10px;margin:0;font-size:11px;letter-spacing:.18em; text-transform:uppercase;font-weight:700;color:#BDFF3E;} .eg-quote__by:before{content:"";width:22px;height:1px;background:#BDFF3E;display:inline-block;} /* ---- ownership vs membership ---- */ .eg-compare{max-width:1000px;margin:0 auto;text-align:center;} .eg-compare__lead{margin:0 0 26px;color:#EDEDED;font-size:19px;line-height:1.7;} .eg-compare__lead strong{color:#BDFF3E;} .eg-compare__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px;} .eg-compare__item{padding:20px 14px;background:rgba(10,10,10,.72);border:1px solid rgba(255,255,255,.13); border-top:2px solid #BDFF3E;} .eg-compare__car{display:block;font-size:14px;font-weight:800;color:#fff;margin-bottom:5px;} .eg-compare__when{display:block;font-size:12.5px;color:#C7C7C7;line-height:1.5;} .eg-compare__foot{margin:0;color:#C7C7C7;font-size:15.5px;line-height:1.75;} @media (max-width:1024px){ .eg-quotes{grid-template-columns:1fr;} .eg-compare__grid{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .eg-compare__grid{grid-template-columns:1fr;} } /* ---- closing waitlist CTA ---- This button used to live in the "Membership Is Capped" section, which carries the .eg-cta-primary class the rule above keys off. Moving it into the closing section took it out of that scope, so it inherited the theme default and rendered WHITE text on the lime fill — about 1.7:1, unreadable. Verified in-browser, not assumed. Scoped to the element id: it is one specific button, and an id-scoped rule cannot leak onto anything else. Remember the theme paints the fill with .wgl-button:after (background-color:inherit), so both must be set or only half the button changes. */ .elementor-3404 .elementor-element-eg00250 .wgl-button, .elementor-3404 .elementor-element-eg00250 .wgl-button:after{ background-color:#BDFF3E !important; border-color:#BDFF3E !important;} .elementor-3404 .elementor-element-eg00250 .wgl-button .button-content-wrapper, .elementor-3404 .elementor-element-eg00250 .wgl-button .wgl-button-text, .elementor-3404 .elementor-element-eg00250 .wgl-button span{color:#0A0A0A !important;} .elementor-3404 .elementor-element-eg00250 .wgl-button:hover, .elementor-3404 .elementor-element-eg00250 .wgl-button:hover:after{ background-color:#FFFFFF !important; border-color:#FFFFFF !important;} .elementor-3404 .elementor-element-eg00250 .wgl-button:hover .wgl-button-text{color:#0A0A0A !important;} /* ===================================================================== Site-style alignment — added 2026-08-08 This page was built before the site moved to the black/lime treatment, so it still carried the theme's light assumptions. Everything below is presentation only: no copy, no markup and no layout has been changed. What was actually wrong, measured rather than guessed: - was #FFFFFF. The page's sections are transparent, so that white showed through as bright bands between the photo-backed sections — the single biggest reason it did not match the site. - Five sections carried porschebackground-1.webp at `contain`, bottom-left: a near-white photo of white cars. Grey body copy sat directly on it at roughly 1.7:1. - The benefit grid was built white-on-white (#fff cells, #111 titles, #4C4C4C body) for that light background. ================================================================== */ /* ---- 1. the shell ---- */ body.page-id-3404, body.elementor-page-3404 { background:#0A0A0A !important; } /* ---- 2. the pale watermark sections ---- Dropping the image rather than scrimming it: it is a light photograph and no overlay makes white cars sit calmly under white text. */ .elementor-3404 .elementor-element-eg0003a, .elementor-3404 .elementor-element-eg00067, .elementor-3404 .elementor-element-eg000a4, .elementor-3404 .elementor-element-eg000c4, .elementor-3404 .elementor-element-eg00105 { background-image:none !important; background-color:#0A0A0A !important; } /* ---- 3. the dark garage photo sections ---- Kept as texture, but scrimmed so body copy is readable. An inset box-shadow paints above the background image and below the content, so this needs no pseudo-element — the theme's clearfix :before/:after already become stray grid items elsewhere on this site (see CLAUDE.md). */ .elementor-3404 .elementor-element-eg000e4, .elementor-3404 .elementor-element-eg00014, .elementor-3404 .elementor-element-ad610d3, .elementor-3404 .elementor-element-eg00261, .elementor-3404 .elementor-element-eg00122, .elementor-3404 .elementor-element-eg00142, .elementor-3404 .elementor-element-eg00172, .elementor-3404 .elementor-element-eg00194, .elementor-3404 .elementor-element-eg001b4, .elementor-3404 .elementor-element-eg001d6, .elementor-3404 .elementor-element-eg00219, .elementor-3404 .elementor-element-eg0023c { box-shadow: inset 0 0 0 9999px rgba(10,10,10,.86); } /* ---- 4. the benefit grid, inverted ---- The 1px gap is the divider, so the gap colour must be the hairline and the cells must be opaque — a gap over a *lighter* backing is what turned short rows into grey boxes on the maintenance page. */ .eg-grid { background:rgba(255,255,255,.10) !important; } .eg-cell { background:#111111 !important; } .eg-cell:hover { background:#151515 !important; } .eg-cell__kicker { color:#BDFF3E !important; } .eg-cell__title, .eg-cell:hover .eg-cell__title { color:#FFFFFF !important; } .eg-cell__body, .eg-cell:hover .eg-cell__body { color:#C9C9C9 !important; } /* ---- 5. the deposit note ---- Lime-tinted fill under white text read as muddy olive. Neutral panel, lime kept for the rule only. */ .eg-tier__deposit { background:rgba(255,255,255,.05) !important; border-left:2px solid #BDFF3E !important; color:#C9C9C9 !important; } /* ---- 6. buttons ---- The theme paints its buttons through ::after, so both the element and the pseudo-element have to be coloured or only half the button changes. */ .elementor-3404 .wgl-button, .elementor-3404 .wgl-button:after { border-radius:0 !important; } .elementor-3404 .eg-cta-ghost .wgl-button, .elementor-3404 .eg-cta-ghost .wgl-button:after { background-color:transparent !important; } .elementor-3404 .eg-cta-ghost .wgl-button { border:1px solid rgba(255,255,255,.18) !important; } .elementor-3404 .eg-cta-ghost .wgl-button .wgl-button-text { color:#FFFFFF !important; } .elementor-3404 .eg-cta-ghost .wgl-button:hover { border-color:#BDFF3E !important; } .elementor-3404 .eg-cta-ghost .wgl-button:hover .wgl-button-text { color:#BDFF3E !important; } /* ---- 7. text the theme never coloured ---- Failure mode #1 in CLAUDE.md: the theme assumes a light background, so anything not explicitly coloured inherits near-black. These four sections used to sit on white, so their headings (#191919 / #111111) and body copy (#494949 / #4C4C4C) were legible there and became invisible the moment the shell went black. Name them explicitly. */ .elementor-3404 .dbl__title, .elementor-3404 .dbl-title { color:#FFFFFF !important; } .elementor-3404 .dbl__subtitle { color:#BDFF3E !important; } .elementor-3404 .elementor-element-831966b p, .elementor-3404 .elementor-element-eg000c4 p { color:#C9C9C9 !important; }