/* Hero x-card override (safe tuning layer) Purpose: provide a single, last-loaded stylesheet to fine-tune the positioning and sizing of the hero `.x-card` without editing the original source CSS files. Uses CSS custom properties so adjustments can be made quickly. Usage: tweak the --xcard-* variables below or override them per-page via inline styles on the or a page-specific stylesheet. */ :root { /* defaults you can tweak */ --xcard-width: min(44vw, 720px); --xcard-offset: -1.2vw; /* optical horizontal nudge (negative = left) */ --xcard-padding-desktop: clamp(3rem, 3.5vw, 4rem); --xcard-padding-tablet: clamp(2.25rem, 4.5vw, 3rem); --xcard-padding-mobile: clamp(1.75rem, 6vw, 2.25rem); /* new: consistent outer margin (top/right/bottom/left) - smaller by ~50% */ --xcard-margin-vertical: 1rem; /* top/bottom */ --xcard-gutter-horizontal: clamp(0.5rem, 2vw, 0.875rem); /* left/right for mobile fallback */ --xcard-gap: 0.6rem; /* vertical spacing between eyebrow / title / subtitle */ --xcard-y-offset: -1.5rem; /* move x-card up */ --xcard-below-offset: -4rem; /* pull the following content up closer to the x-card */ } /* Core override (high specificity to ensure it wins) */ .v3-engineered-hero .x-card { box-sizing: border-box !important; width: var(--xcard-width) !important; max-width: 100% !important; /* vertical margin reduced; keep horizontal centering via auto */ margin: var(--xcard-margin-vertical) auto !important; /* shift via margin-top so document flow updates and following content moves up */ transform: translateX(var(--xcard-offset)) !important; margin-top: calc(var(--xcard-margin-vertical) + var(--xcard-y-offset)) !important; padding: var(--xcard-padding-desktop) !important; /* keep the visual style intact */ background-clip: padding-box !important; /* layout: stack eyebrow/title/subtitle evenly and center them vertically */ display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; /* keep left-aligned text inside the card */ gap: var(--xcard-gap) !important; } /* Tablet: reduce width and soften the offset */ @media (max-width: 1024px) { .v3-engineered-hero .x-card { width: min(70vw, 680px) !important; transform: translateX(calc(var(--xcard-offset) * 0.65)) !important; padding: var(--xcard-padding-tablet) !important; margin: calc(var(--xcard-margin-vertical) * 1) auto !important; gap: calc(var(--xcard-gap) * 0.9) !important; } } /* Mobile: remove optical offset, use edge-friendly gutters */ @media (max-width: 768px) { .v3-engineered-hero .x-card { width: auto !important; max-width: none !important; /* use smaller, consistent gutters on mobile (half of previous) */ margin-left: var(--xcard-gutter-horizontal) !important; margin-right: var(--xcard-gutter-horizontal) !important; margin-top: var(--xcard-margin-vertical) !important; margin-bottom: var(--xcard-margin-vertical) !important; transform: none !important; padding: var(--xcard-padding-mobile) !important; } } /* Pull the content section after the hero closer to the x-card */ /* Pull the whole hero section down (negative margin-bottom) to bring the following content closer. Using margin-bottom affects flow and avoids conflicting inline margin-top on the following element. */ .v3-engineered-hero { margin-bottom: var(--xcard-below-offset) !important; } /* Responsive easing down of vertical offsets */ @media (max-width: 1024px) { :root { --xcard-y-offset: -1rem; --xcard-below-offset: -3rem; } } @media (max-width: 768px) { :root { --xcard-y-offset: -0.75rem; --xcard-below-offset: -2rem; } /* ensure mobile transform removal still respects a small upward shift */ .v3-engineered-hero .x-card { transform: translateY(var(--xcard-y-offset)) !important; } } /* Page-specific tuning for lab-315 (only applied on pages using body.page-lab-315) */ body.page-lab-315 .v3-engineered-hero .x-card { margin-top: -1.5rem !important; /* move the card up explicitly on this page */ } body.page-lab-315 #content { /* reduce the space between hero and content by ~4rem on this page */ margin-top: calc(2vh - 4rem) !important; } /* Reduce hero main title to ~3/5 (60%) of original size */ .v3-engineered-hero .v3-hero-small-text, .v3-engineered-hero .v3-hero-main-title, .v3-engineered-hero .v3-hero-subtitle { margin: 0 !important; /* we'll control spacing with gap on the card */ } /* Increase title to ~80% (halfway back toward original) */ .v3-engineered-hero .x-card .v3-hero-main-title, .v3-engineered-hero .v3-hero-main-title { /* explicit rem sizes to ensure this override wins across viewports */ font-size: 3.6rem !important; /* slightly smaller than original 4rem */ line-height: 1.06 !important; } @media (max-width: 768px) { .v3-engineered-hero .x-card .v3-hero-main-title, .v3-engineered-hero .v3-hero-main-title { font-size: 2.25rem !important; /* mobile friendly size */ } .v3-engineered-hero .x-card { gap: calc(var(--xcard-gap) * 0.8) !important; } } /* If you want to temporarily visualize the x-card during tuning, set the --xcard-debug variable (useful for local testing only) */ :root[style*="--xcard-debug:"] .v3-engineered-hero .x-card { outline: 2px dashed magenta !important; }