/* ---------------------------------------------------------------------------
aiapply.club marketing revamp — additive polish layer on top of the
marketing.css bundle. Edit values here to retune the visual brand without
touching extracted page chunks. Loaded after marketing.css so wins on
specificity ties via order-of-source.
--------------------------------------------------------------------------- */
:root {
--aiac-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
--aiac-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -8px rgba(15, 23, 42, 0.10);
--aiac-shadow-hover: 0 4px 6px rgba(15, 23, 42, 0.05), 0 20px 40px -12px rgba(15, 23, 42, 0.18);
--aiac-radius-card: 1.5rem;
}
/* ===========================================================================
1. HERO TYPOGRAPHY — bigger, tighter, more confident
=========================================================================== */
.aiapplyclub-page h1#lp-header-h1,
.aiapplyclub-page h1.font-title {
font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
line-height: 1.02;
letter-spacing: -0.025em;
font-weight: 600;
}
.aiapplyclub-page h1#lp-header-h1 .font-normal {
font-weight: 300;
color: rgba(15, 23, 42, 0.85);
}
.aiapplyclub-page h1#lp-header-h1 .bg-clip-text {
/* High-contrast, serious hero headline (lehder family): dark clay→ink, not a
washed pastel gradient. */
background-image: linear-gradient(100deg, #2D3F8F, #1C2B6E 92%);
-webkit-background-clip: text;
background-clip: text;
}
.aiapplyclub-page p#lp-header-p {
font-size: clamp(1.05rem, 1vw + 0.85rem, 1.375rem);
line-height: 1.55;
color: rgba(15, 23, 42, 0.72);
max-width: 38rem;
margin-inline: auto;
}
/* Section H2 — bolder rhythm */
.aiapplyclub-page h2.font-title,
.aiapplyclub-page h2.text-3xl,
.aiapplyclub-page h2.text-4xl {
font-size: clamp(1.875rem, 2vw + 1rem, 3.25rem);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 600;
}
/* ===========================================================================
2. PRIMARY CTA — gradient fill, drop shadow, micro-lift
=========================================================================== */
.aiapplyclub-page .btn.btn-primary {
background-image: linear-gradient(
135deg,
var(--aiac-yellow, #ffce00) 0%,
var(--aiac-rose, #fb7185) 55%,
var(--aiac-red, #dd0000) 100%
);
background-size: 180% 180%;
background-position: 0% 50%;
color: #F8F9FD; /* lehder cream — legible on the dark indigo fill */
border: 0;
font-weight: 600;
letter-spacing: 0.005em;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.45) inset,
0 8px 24px -8px rgba(28, 43, 110, 0.45); /* lehder ink glow */
transition: transform 280ms var(--aiac-easing-out),
box-shadow 280ms var(--aiac-easing-out),
background-position 600ms var(--aiac-easing-out);
}
.aiapplyclub-page .btn.btn-primary:hover {
background-position: 100% 50%;
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 14px 36px -10px rgba(28, 43, 110, 0.55); /* lehder ink glow */
}
.aiapplyclub-page .btn.btn-primary:active {
transform: translateY(0);
}
.aiapplyclub-page .btn.btn-primary.btn-lg {
font-size: 1.05rem;
padding-inline: 2rem;
height: auto;
min-height: 3.25rem;
padding-block: 1rem;
border-radius: 9999px;
}
/* Secondary ghost buttons — subtle */
.aiapplyclub-page .btn.btn-ghost {
transition: background-color 200ms var(--aiac-easing-out);
}
/* ===========================================================================
3. CARDS — softer corners, lift on hover
=========================================================================== */
.aiapplyclub-page .rounded-\[2rem\],
.aiapplyclub-page .rounded-3xl,
.aiapplyclub-page .rounded-2xl {
border-radius: var(--aiac-radius-card);
box-shadow: var(--aiac-shadow-soft);
transition: transform 320ms var(--aiac-easing-out),
box-shadow 320ms var(--aiac-easing-out);
border-color: rgba(15, 23, 42, 0.06);
}
.aiapplyclub-page .rounded-\[2rem\]:hover,
.aiapplyclub-page .rounded-3xl:hover,
.aiapplyclub-page .rounded-2xl:hover {
transform: translateY(-3px);
box-shadow: var(--aiac-shadow-hover);
}
/* The hero "feature cards" (Optimized Cover Letter / Resume / Auto-Apply) */
.aiapplyclub-page .grid .bg-base-100.relative.flex.flex-col {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(8px);
}
/* ===========================================================================
4. GRADIENT STRIP — slightly more saturated + glow at the edge
=========================================================================== */
.aiapplyclub-page .absolute.from-yellow-400\/20,
.aiapplyclub-page .absolute.bg-gradient-to-r.from-yellow-400\/20 {
filter: saturate(1.15) brightness(1.02);
}
/* ===========================================================================
5. SECTION RHYTHM — more generous vertical spacing on marketing pages
=========================================================================== */
.aiapplyclub-page section,
.aiapplyclub-page .max-w-7xl {
scroll-margin-top: 5rem;
}
/* ===========================================================================
6. NAVBAR — subtle floating effect when content scrolls under it
=========================================================================== */
.aiapplyclub-page nav.navbar {
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* ===========================================================================
7. LOGO WALL — tighten + darker on hover
=========================================================================== */
.aiapplyclub-page img.brightness-50 {
transition: filter 240ms var(--aiac-easing-out),
opacity 240ms var(--aiac-easing-out),
transform 240ms var(--aiac-easing-out);
}
.aiapplyclub-page img.brightness-50:hover {
filter: brightness(0.85) saturate(1.15);
opacity: 1;
transform: scale(1.04);
}
/* ===========================================================================
8. FAQ — tighter dividers, better expanded state
=========================================================================== */
.aiapplyclub-page details summary {
cursor: pointer;
transition: color 180ms var(--aiac-easing-out);
}
.aiapplyclub-page details[open] summary {
color: var(--aiac-red, #dd0000);
}
/* ===========================================================================
9. FOOTER — subtle border, slightly larger column titles
=========================================================================== */
.aiapplyclub-page footer.footer h3.footer-title {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
color: rgba(15, 23, 42, 0.85);
margin-bottom: 0.5rem;
}
/* ===========================================================================
10. REDUCED-MOTION FALLBACK
=========================================================================== */
@media (prefers-reduced-motion: reduce) {
.aiapplyclub-page *,
.aiapplyclub-page *::before,
.aiapplyclub-page *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ===========================================================================
11. LEHDER PALETTE — page-wide re-skin (2026-06-14)
The hero gradient (brand.css --aiac-*) only covered the top. The page
body is a DaisyUI theme whose --color-primary (purple) drives
text-primary ×1488, border-primary ×212, bg-primary, etc. Re-point the
BRAND + NEUTRAL tokens to lehder.ch's indigo, and collapse the loud
DECORATIVE chips into the same family.
DELIBERATELY UNTOUCHED: green / red / emerald / yellow-star / warning
colours — they are SEMANTIC (compare-table ✓/✗, ratings, alerts) and
must keep their meaning. lehder would keep functional signal colours too.
=========================================================================== */
:root,
[data-theme="light"],
.aiapplyclub-page {
--color-primary: #1C2B6E; /* lehder terracota — main brand */
--color-primary-content: #F8F9FD; /* cream — text on primary */
--color-secondary: #1C2B6E; /* lehder ink */
--color-secondary-content: #F8F9FD;
--color-accent: #1C2B6E; /* lehder ember — accent pop */
--color-accent-content: #F8F9FD;
--color-neutral: #1C2B6E; /* ink */
--color-neutral-content: #F4F5FA; /* bone */
--color-base-100: #FFFFFF; /* cards stay white for contrast */
--color-base-200: #F2F2F2; /* lehder cream — page background */
--color-base-300: #E9EBF5; /* lehder sand */
--color-base-content: #1C2B6E; /* lehder ink — default body text */
}
/* Decorative SOLID chips (feature-icon tiles) → lehder indigo trio.
Tailwind utilities live in @layer, so these unlayered rules win cleanly. */
.aiapplyclub-page .bg-blue-500,
.aiapplyclub-page .bg-indigo-500 { background-color: #1C2B6E; } /* terracota */
.aiapplyclub-page .bg-purple-500,
.aiapplyclub-page .bg-pink-500,
.aiapplyclub-page .bg-rose-500 { background-color: #1C2B6E; } /* ember */
.aiapplyclub-page .bg-amber-500,
.aiapplyclub-page .bg-orange-500,
.aiapplyclub-page .bg-teal-500,
.aiapplyclub-page .bg-teal-600 { background-color: #37406E; } /* moss */
/* Decorative SOFT icon-wells (light tints) → lehder sand. */
.aiapplyclub-page .bg-blue-100,
.aiapplyclub-page .bg-indigo-100,
.aiapplyclub-page .bg-purple-100,
.aiapplyclub-page .bg-pink-100,
.aiapplyclub-page .bg-amber-100,
.aiapplyclub-page .bg-orange-100,
.aiapplyclub-page .bg-teal-100 { background-color: #E9EBF5; } /* sand */
/* Decorative gradient card tints → cream/sand. */
.aiapplyclub-page .to-indigo-100,
.aiapplyclub-page .to-purple-100,
.aiapplyclub-page .to-pink-100,
.aiapplyclub-page .to-orange-100 { --tw-gradient-to: #EEF0F8; }
/* Non-semantic decorative TEXT accents (aiapply purple/blue) → terracota. */
.aiapplyclub-page .text-purple-600,
.aiapplyclub-page .text-purple-800,
.aiapplyclub-page .text-blue-400,
.aiapplyclub-page .text-blue-500,
.aiapplyclub-page .text-blue-900,
.aiapplyclub-page .text-indigo-600 { color: #1C2B6E; }
/* Decorative borders → terracota / sand line. */
.aiapplyclub-page .border-teal-600,
.aiapplyclub-page .border-blue-300,
.aiapplyclub-page .border-blue-800,
.aiapplyclub-page .border-purple-400 { border-color: #1C2B6E; }
.aiapplyclub-page .border-blue-100,
.aiapplyclub-page .border-blue-200 { border-color: #C8CCE8; } /* lehder line */
/* ===========================================================================
12. LOGO — 2× larger (2026-06-14)
Header logo is h-12 / sm:h-16, footer logo h-20. Double each, scoped to
the brand logo img so no other h-12/h-16/h-20 elements are affected.
=========================================================================== */
.aiapplyclub-page img.h-12[src*="aiApplyClub_logo"] { height: 6rem; } /* 48 → 96px */
.aiapplyclub-page img.h-20[src*="aiApplyClub_logo"] { height: 10rem; } /* 80 → 160px (footer) */
@media (min-width: 640px) {
.aiapplyclub-page img.sm\:h-16[src*="aiApplyClub_logo"] { height: 8rem; } /* 64 → 128px */
}
/* ===========================================================================
13. CENTRAL CHROME — one header + one footer for every page (lehder.ch)
Rendered by Layout.tsx (/); the per-page aiapply
navbar/footer were stripped from every chunk. Lehder design system:
Inter, ink #1C2B6E, cream #F8F9FD, terracota #1C2B6E / clay #2D3F8F.
=========================================================================== */
/* Transparent menu sitting OVER the hero; a light background only fades in once
the page is scrolled (so text stays readable over content below). */
.aiac-header {
position: sticky; top: 0; z-index: 50;
background: transparent; border-bottom: 1px solid transparent;
transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
.aiac-header.scrolled {
background: rgba(242, 242, 242, 0.85);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom-color: rgba(28, 43, 110, 0.08);
}
.aiac-header-inner {
max-width: 80rem; margin: 0 auto; padding: 0.45rem 1.25rem;
min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 1024px) { .aiac-header-inner { padding: 0.45rem 2rem; } }
.aiac-brand-group { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.aiac-brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* Unternehmensverein.org cross-link: mark + "UV.ORG" beneath, both linked */
.aiac-uv {
display: flex; flex-direction: column; align-items: center; gap: 2px;
text-decoration: none; flex: 0 0 auto; padding-left: 0.9rem;
border-left: 1px solid rgba(28, 43, 110, 0.14);
}
.aiac-uv-logo { height: 2.4rem; width: auto; display: block; }
@media (min-width: 640px) { .aiac-uv-logo { height: 2.9rem; } }
.aiac-uv-text {
color: #37406E; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1;
}
.aiac-uv:hover .aiac-uv-text { color: #1C2B6E; }
.aiac-wordmark {
color: #FFFFFF; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em;
}
@media (min-width: 640px) { .aiac-wordmark { font-size: 1.55rem; } }
/* Cropped logo (tight viewBox) — BIG on the transparent menu; capped by
max-width on phones so it never overflows next to UV.ORG + burger. */
.aiac-logo {
display: block; width: auto; height: auto;
max-height: 12rem; max-width: 72vw;
}
@media (min-width: 640px) { .aiac-logo { max-height: 15rem; max-width: 60vw; } }
.aiac-actions { display: flex; align-items: center; gap: 0.6rem; }
.aiac-btn {
display: inline-flex; align-items: center; border-radius: 9999px;
padding: 0.55rem 1.2rem; font-size: 0.9rem; font-weight: 600;
text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.aiac-btn-primary { background: #1C2B6E; color: #FFFFFF; }
.aiac-btn-primary:hover { background: #2D3F8F; }
.aiac-btn-ghost-light { color: #C8CCE8; border: 1px solid rgba(248, 249, 253, 0.22); }
.aiac-btn-ghost-light:hover { color: #FFFFFF; border-color: rgba(248, 249, 253, 0.5); }
.aiac-burger {
display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
width: 2.5rem; height: 2.5rem; padding: 0 0.55rem; border: 1px solid rgba(28, 43, 110, 0.2);
border-radius: 0.6rem; background: transparent; cursor: pointer;
}
.aiac-burger span { display: block; height: 2px; width: 100%; background: #1C2B6E; border-radius: 2px; }
/* Slide-in ink drawer holding the whole menu (lehder pattern) */
.aiac-drawer-overlay {
position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.45);
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.aiac-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.aiac-drawer {
position: fixed; top: 0; right: 0; z-index: 46; height: 100vh;
width: min(22rem, 86vw); background: #1C2B6E; border-left: 1px solid rgba(248, 249, 253, 0.10);
padding: 5.5rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 0.25rem;
transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y: auto;
}
.aiac-drawer.open { transform: translateX(0); }
.aiac-drawer-eyebrow {
color: #7C8FE0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.22em; margin: 0.5rem 0 0.6rem;
}
.aiac-drawer-link {
color: #F4F5FA; text-decoration: none; font-size: 1.15rem; font-weight: 500;
padding: 0.6rem 0; border-bottom: 1px solid rgba(248, 249, 253, 0.07); transition: color 0.15s ease;
}
.aiac-drawer-link:hover { color: #8AA0E8; }
.aiac-drawer-foot { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.aiac-drawer-foot .aiac-btn { justify-content: center; }
.aiac-footer { background: #1C2B6E; color: #C8CCE8;
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.aiac-footer-inner { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.25rem 2rem;
display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .aiac-footer-inner {
grid-template-columns: 1.3fr 2fr; padding: 3.5rem 2rem 2rem; } }
.aiac-footer-wordmark { font-size: 1.5rem; font-weight: 700; color: #FFFFFF; letter-spacing: -0.02em; }
.aiac-footer-logo { height: 6rem; width: auto; display: block; margin-bottom: 0.4rem; }
.aiac-footer-desc { margin: 0.85rem 0; line-height: 1.6; color: #8E97C0; max-width: 30rem; font-size: 0.95rem; }
.aiac-footer-desc strong { color: #F4F5FA; font-weight: 600; }
.aiac-footer-desc a, .aiac-footer-mail { color: #8AA0E8; text-decoration: none; }
.aiac-footer-desc a:hover, .aiac-footer-mail:hover { color: #FFFFFF; text-decoration: underline; }
.aiac-footer-mail { font-weight: 600; }
.aiac-footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
@media (min-width: 640px) { .aiac-footer-cols { grid-template-columns: repeat(3, 1fr); } }
.aiac-footer-col h3 { color: #F8F9FD; font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.7rem; }
.aiac-footer-col a { display: block; padding: 0.28rem 0; font-size: 0.9rem; color: #C8CCE8; text-decoration: none; }
.aiac-footer-col a:hover { color: #FFFFFF; text-decoration: underline; }
.aiac-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 1.2rem; text-align: center; font-size: 0.8rem; color: #6872A8; }
/* ===========================================================================
14. PURPLE / VIOLET / FUCHSIA / INDIGO ACCENTS → lehder BLUE (central)
Icons + accents must all be blue, never purple. Blanket every shade
across colour-bearing properties. (Semantic green/red untouched.)
=========================================================================== */
.aiapplyclub-page [class*="text-purple-"],
.aiapplyclub-page [class*="text-violet-"],
.aiapplyclub-page [class*="text-fuchsia-"],
.aiapplyclub-page [class*="text-indigo-"] { color: #1C2B6E !important; }
.aiapplyclub-page [class*="stroke-purple-"],
.aiapplyclub-page [class*="stroke-violet-"],
.aiapplyclub-page [class*="stroke-indigo-"] { stroke: #1C2B6E !important; }
.aiapplyclub-page [class*="fill-purple-"],
.aiapplyclub-page [class*="fill-violet-"],
.aiapplyclub-page [class*="fill-indigo-"] { fill: #1C2B6E !important; }
.aiapplyclub-page [class*="border-purple-"],
.aiapplyclub-page [class*="border-violet-"],
.aiapplyclub-page [class*="border-fuchsia-"],
.aiapplyclub-page [class*="border-indigo-"] { border-color: #1C2B6E !important; }
.aiapplyclub-page [class*="ring-purple-"],
.aiapplyclub-page [class*="ring-violet-"],
.aiapplyclub-page [class*="ring-indigo-"] { --tw-ring-color: #1C2B6E !important; }
.aiapplyclub-page [class*="from-purple-"],
.aiapplyclub-page [class*="from-violet-"],
.aiapplyclub-page [class*="from-fuchsia-"] { --tw-gradient-from: #1C2B6E !important; }
.aiapplyclub-page [class*="via-purple-"],
.aiapplyclub-page [class*="via-violet-"],
.aiapplyclub-page [class*="via-fuchsia-"] { --tw-gradient-via: #1C2B6E !important; }
.aiapplyclub-page [class*="to-purple-"],
.aiapplyclub-page [class*="to-violet-"],
.aiapplyclub-page [class*="to-fuchsia-"] { --tw-gradient-to: #1C2B6E !important; }
/* Solid purple/violet/fuchsia fills (icon tiles) → indigo, but keep light -50/-100/-200 as sand */
.aiapplyclub-page [class*="bg-purple-"],
.aiapplyclub-page [class*="bg-violet-"],
.aiapplyclub-page [class*="bg-fuchsia-"] { background-color: #1C2B6E !important; }
.aiapplyclub-page [class*="bg-purple-50"],
.aiapplyclub-page [class*="bg-purple-100"],
.aiapplyclub-page [class*="bg-purple-200"],
.aiapplyclub-page [class*="bg-violet-50"],
.aiapplyclub-page [class*="bg-violet-100"],
.aiapplyclub-page [class*="bg-violet-200"],
.aiapplyclub-page [class*="bg-indigo-50"],
.aiapplyclub-page [class*="bg-indigo-100"] { background-color: #E9EBF5 !important; }
/* PINK / ROSE accents (icons, dots, badges) → lehder blue too */
.aiapplyclub-page [class*="text-pink-"],
.aiapplyclub-page [class*="text-rose-"] { color: #1C2B6E !important; }
.aiapplyclub-page [class*="stroke-pink-"],
.aiapplyclub-page [class*="stroke-rose-"] { stroke: #1C2B6E !important; }
.aiapplyclub-page [class*="fill-pink-"],
.aiapplyclub-page [class*="fill-rose-"] { fill: #1C2B6E !important; }
.aiapplyclub-page [class*="border-pink-"],
.aiapplyclub-page [class*="border-rose-"] { border-color: #1C2B6E !important; }
.aiapplyclub-page [class*="ring-pink-"],
.aiapplyclub-page [class*="ring-rose-"] { --tw-ring-color: #1C2B6E !important; }
.aiapplyclub-page [class*="from-pink-"],
.aiapplyclub-page [class*="from-rose-"] { --tw-gradient-from: #1C2B6E !important; }
.aiapplyclub-page [class*="via-pink-"],
.aiapplyclub-page [class*="via-rose-"] { --tw-gradient-via: #1C2B6E !important; }
.aiapplyclub-page [class*="to-pink-"],
.aiapplyclub-page [class*="to-rose-"] { --tw-gradient-to: #1C2B6E !important; }
.aiapplyclub-page [class*="bg-pink-"],
.aiapplyclub-page [class*="bg-rose-"] { background-color: #1C2B6E !important; }
.aiapplyclub-page [class*="bg-pink-50"],
.aiapplyclub-page [class*="bg-pink-100"],
.aiapplyclub-page [class*="bg-pink-200"],
.aiapplyclub-page [class*="bg-rose-50"],
.aiapplyclub-page [class*="bg-rose-100"],
.aiapplyclub-page [class*="bg-rose-200"] { background-color: #E9EBF5 !important; }
/* ===========================================================================
16. WHITE HERO — remove the rounded coloured backdrop, hero sits on white
with dark headline (per §1). Blue bands move to sections below (§17).
=========================================================================== */
.aiapplyclub-page .absolute.bg-gradient-to-r.from-yellow-400\/20,
.aiapplyclub-page .absolute.from-yellow-400\/20 {
background: transparent !important;
filter: none !important;
}
/* ===========================================================================
17. BLUE BAND — a logo-blue section with white text below the white hero
(Kurt: hero white, blue moves to sections below). Targets the unique
"Du erhöhst deine Chancen um 80%" band (.py-4.sm:py-12).
=========================================================================== */
.aiapplyclub-page .py-4.sm\:py-12 {
background: #1C2B6E;
border-radius: 1.75rem;
padding: 2.5rem 1.5rem;
margin: 1.5rem 0;
}
.aiapplyclub-page .py-4.sm\:py-12 :where(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, small) {
color: #FFFFFF !important;
}
.aiapplyclub-page .py-4.sm\:py-12 :where(.text-base-content\/50, .text-base-content\/60, .text-base-content\/70) {
color: rgba(255, 255, 255, 0.78) !important;
}
/* ===========================================================================
18. MOBILE BREATHING ROOM — pad the inner content COLUMN (not the grid
container, which clipped fixed-width tracks). Padding, not margin.
=========================================================================== */
@media (max-width: 639px) {
.aiapplyclub-page [class*="grid-cols-[1fr_1rem_repeat"] > * {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}