(less vertical padding)
*/
.fd-section {
position: relative;
width: 100%;
padding-top: 3rem; /* 48px mobile */
padding-bottom: 3rem;
overflow: hidden;
}
@media (min-width: 48rem) {
.fd-section {
padding-top: 4rem; /* 64px tablet */
padding-bottom: 4rem;
}
}
@media (min-width: 64rem) {
.fd-section {
padding-top: 6rem; /* 96px desktop */
padding-bottom: 6rem;
}
}
.fd-section-tight {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 48rem) {
.fd-section-tight {
padding-top: 3rem;
padding-bottom: 3rem;
}
}
@media (min-width: 64rem) {
.fd-section-tight {
padding-top: 4rem;
padding-bottom: 4rem;
}
}
/* ---- Standard Content Container ----
Usage:
*/
.fd-container {
position: relative;
max-width: 1200px;
margin-inline: auto;
padding-inline: 1.5rem; /* 24px mobile */
}
@media (min-width: 48rem) {
.fd-container {
padding-inline: 2rem; /* 32px tablet+ */
}
}
}
/* ============================================
FIBER DIREKT — MOBILE ENHANCEMENTS
============================================ */
@media (max-width: 47.9375rem) {
/* Full-width buttons on mobile for clear tap targets */
.fd-btn-primary,
.fd-btn-secondary,
.fd-btn-secondary-dark,
.fd-btn-navy,
.fd-btn-mint {
width: 100%;
justify-content: center;
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
/* Ensure minimum touch target */
a, button {
min-height: 44px;
}
}
/* ============================================
FIBER DIREKT — FRONTEND DARK MODE
============================================
These are for the public site, not Payload admin.
Activated by adding data-fd-theme="dark" to .
The existing [data-theme='dark'] above is for Payload's admin UI.
*/
:root {
/* Frontend surface tokens (light defaults) */
--fd-bg-primary: #FFFFFF;
--fd-bg-secondary: #F0F0F0;
--fd-bg-card: #FFFFFF;
--fd-text-primary: #0E2338;
--fd-text-secondary: #41474F;
--fd-text-muted: #6B737E;
--fd-border: #E2E4E7;
--fd-border-strong: #C8CCD0;
}
[data-fd-theme='dark'] {
--fd-bg-primary: #0A1825;
--fd-bg-secondary: #0E2338;
--fd-bg-card: #153350;
--fd-text-primary: #FFFFFF;
--fd-text-secondary: #9DB8CC;
--fd-text-muted: #6A94B3;
--fd-border: #1C4368;
--fd-border-strong: #245580;
}
/* Also support system preference if no explicit attribute */
@media (prefers-color-scheme: dark) {
:root:not([data-fd-theme='light']) {
--fd-bg-primary: #0A1825;
--fd-bg-secondary: #0E2338;
--fd-bg-card: #153350;
--fd-text-primary: #FFFFFF;
--fd-text-secondary: #9DB8CC;
--fd-text-muted: #6A94B3;
--fd-border: #1C4368;
--fd-border-strong: #245580;
}
}
/* ── FD Prose styles (for Posts rich text) ────────────────────────────────
Add these to your existing globals.css
─────────────────────────────────────────────────────────────────────── */
.fd-prose {
font-family: var(--font-joey, sans-serif);
color: theme('colors.fd-navy');
}
.fd-prose h1,
.fd-prose h2,
.fd-prose h3,
.fd-prose h4 {
font-family: var(--font-joey-heavy, sans-serif);
color: theme('colors.fd-navy');
margin-top: 2rem;
margin-bottom: 1rem;
}
.fd-prose h2 { font-size: 1.75rem; }
.fd-prose h3 { font-size: 1.35rem; }
.fd-prose p {
font-size: 1.125rem;
line-height: 1.75;
margin-bottom: 1.25rem;
}
.fd-prose a {
color: theme('colors.fd-navy');
text-decoration: underline;
text-underline-offset: 3px;
font-family: var(--font-joey-bold, sans-serif);
}
.fd-prose a:hover {
color: theme('colors.fd-yellow');
}
.fd-prose ul,
.fd-prose ol {
padding-left: 1.5rem;
margin-bottom: 1.25rem;
}
.fd-prose li {
font-size: 1.125rem;
line-height: 1.75;
margin-bottom: 0.5rem;
}
.fd-prose ul li::marker {
color: theme('colors.fd-yellow');
}
.fd-prose strong {
font-family: var(--font-joey-bold, sans-serif);
font-weight: normal;
}
.fd-prose blockquote {
border-left: 4px solid theme('colors.fd-yellow');
padding-left: 1.25rem;
margin: 2rem 0;
font-size: 1.2rem;
color: theme('colors.fd-navy');
font-style: italic;
}
.fd-prose img {
border-radius: 24px;
margin: 2rem 0;
}
.fd-prose hr {
border-color: #e5e5e5;
margin: 2.5rem 0;
}