/** * WDHC secondary pages · shared components * Tokens: load css/wdhc-tokens.css first (Wave C). Fonts load in each page . * Do not re-declare :root colors here; extend tokens only. */ /* Fallback if a page forgets tokens.css */ :root { --wdhc-bg: #050505; --wdhc-surface: #0a0a0a; --wdhc-card: #0f0f0f; --wdhc-border: rgba(255, 255, 255, 0.08); --wdhc-gold: #D4AF37; --wdhc-bronze: #cd7f32; --wdhc-text: #f2f2f2; --wdhc-dim: #d0d0d0; --wdhc-muted: #b5b5b5; --wdhc-nav-h: 76px; --wdhc-radius: 16px; --wdhc-font-head: 'Oswald', sans-serif; --wdhc-font-body: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; --wdhc-font-ui: 'Rajdhani', sans-serif; --wdhc-font-mono: 'Roboto Mono', monospace; --wdhc-marquee-duration: 22s; } /* Marquee · glowing rails, edge fade, GPU-friendly scroll */ .wdhc-marquee, .marquee-container { position: relative; padding: 13px 0; overflow: hidden; margin: 0; border: none; background: radial-gradient(ellipse 140% 220% at 50% 50%, rgba(212, 175, 55, 0.07) 0%, transparent 58%), linear-gradient(180deg, #060606 0%, #101010 50%, #060606 100%); box-shadow: inset 72px 0 56px -36px rgba(5, 5, 5, 0.94), inset -72px 0 56px -36px rgba(5, 5, 5, 0.94); contain: layout style; isolation: isolate; } .wdhc-marquee::before, .wdhc-marquee::after, .marquee-container::before, .marquee-container::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none; z-index: 2; } .wdhc-marquee::before, .marquee-container::before { top: 0; background: linear-gradient( 90deg, transparent 0%, rgba(205, 127, 50, 0.45) 12%, rgba(212, 175, 55, 1) 50%, rgba(205, 127, 50, 0.45) 88%, transparent 100% ); box-shadow: 0 0 8px rgba(212, 175, 55, 0.65), 0 0 22px rgba(212, 175, 55, 0.28), 0 1px 0 rgba(255, 228, 160, 0.2); animation: wdhc-marquee-rail-pulse 5s ease-in-out infinite; } .wdhc-marquee::after, .marquee-container::after { bottom: 0; background: linear-gradient( 90deg, transparent 0%, rgba(205, 127, 50, 0.38) 12%, rgba(212, 175, 55, 0.92) 50%, rgba(205, 127, 50, 0.38) 88%, transparent 100% ); box-shadow: 0 0 7px rgba(212, 175, 55, 0.55), 0 0 18px rgba(212, 175, 55, 0.22); animation: wdhc-marquee-rail-pulse 5s ease-in-out infinite; animation-delay: -2.5s; } @keyframes wdhc-marquee-rail-pulse { 0%, 100% { opacity: 0.82; filter: brightness(0.95); } 50% { opacity: 1; filter: brightness(1.12); } } .wdhc-marquee__track, .marquee-content { display: flex; width: max-content; flex-wrap: nowrap; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } .wdhc-marquee__track { animation: wdhc-marquee-scroll var(--wdhc-marquee-duration) linear infinite; } .marquee-content { animation: wdhc-marquee-scroll var(--marquee-duration, 22s) linear infinite; } .wdhc-marquee__row, .marquee-track { display: flex; flex-shrink: 0; align-items: center; flex-wrap: nowrap; } .wdhc-marquee__row > span, .marquee-track > span { position: relative; flex-shrink: 0; margin: 0 44px; font-family: var(--wdhc-font-head); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: #e2e2e2; white-space: nowrap; text-shadow: 0 0 14px rgba(212, 175, 55, 0.1); } .wdhc-marquee__row > span:not(:last-child)::after, .marquee-track > span:not(:last-child)::after { content: ''; position: absolute; top: 50%; right: -22px; width: 5px; height: 5px; margin-top: -2px; background: linear-gradient(135deg, var(--wdhc-gold, #D4AF37), var(--wdhc-bronze, #cd7f32)); transform: rotate(45deg); box-shadow: 0 0 8px rgba(212, 175, 55, 0.55); opacity: 0.75; } .wdhc-marquee__item, .marquee-item { display: inline-flex; align-items: center; gap: 10px; } .wdhc-marquee__icon, .marquee-item svg, .marquee-item .svg-icon { width: 1.3em; height: 1.3em; flex-shrink: 0; color: var(--wdhc-gold); transform: translateZ(0); filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.45)); } @keyframes wdhc-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--wdhc-marquee-shift, var(--marquee-shift, -50%)), 0, 0); } } @media (max-width: 900px) { .wdhc-marquee, .marquee-container { padding: 11px 0; } .wdhc-marquee__track, .marquee-content { animation-duration: 50s; } .wdhc-marquee__row > span, .marquee-track > span { font-size: 0.85rem; margin: 0 32px; } .wdhc-marquee__row > span:not(:last-child)::after, .marquee-track > span:not(:last-child)::after { right: -16px; } } @media (prefers-reduced-motion: reduce) { .wdhc-marquee__track, .marquee-content { animation-duration: 360s; } .wdhc-marquee::before, .wdhc-marquee::after, .marquee-container::before, .marquee-container::after { animation: none; opacity: 0.9; } } /* Page hero · image + copy split */ .wdhc-page-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-bottom: 40px; padding-bottom: 8px; } .wdhc-page-hero--reverse { grid-template-columns: 0.9fr 1.1fr; } .wdhc-page-hero--reverse .wdhc-page-hero__visual { order: 2; } .wdhc-page-hero__eyebrow { font-family: var(--wdhc-font-mono); font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--wdhc-bronze); margin-bottom: 10px; } .pro-page-hero .wdhc-page-hero__eyebrow { font-family: var(--wdhc-font-ui); font-size: 0.82rem; font-weight: 600; letter-spacing: 2px; color: var(--wdhc-gold); } .wdhc-page-hero h1 { font-family: var(--wdhc-font-head); font-size: clamp(2rem, 4.5vw, 3rem); text-transform: uppercase; letter-spacing: 2px; line-height: 1.05; margin-bottom: 14px; } .wdhc-page-hero__lead { font-family: var(--wdhc-font-body); font-size: 1.05rem; font-weight: 400; color: var(--wdhc-dim); max-width: 42ch; line-height: 1.55; letter-spacing: 0.01em; margin-bottom: 0; } .wdhc-page-hero__visual { position: relative; border-radius: var(--wdhc-radius); overflow: hidden; border: 1px solid var(--wdhc-border); aspect-ratio: 4 / 3; background: #111; } .wdhc-page-hero__visual img, .wdhc-page-hero__visual video { width: 100%; height: 100%; object-fit: cover; display: block; } /* Full-frame hero video: no crop, native aspect */ .wdhc-page-hero__visual--video-contain { aspect-ratio: 16 / 9; background: #000; } .wdhc-page-hero__visual--video-contain img, .wdhc-page-hero__visual--video-contain video { object-fit: contain; object-position: center center; } /* Submit page · wide logo must not crop under cover + fixed aspect-ratio */ .wdhc-page-hero__visual--submit-logo { aspect-ratio: auto !important; max-height: none !important; height: auto; overflow: visible; padding: 20px 24px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #0c0c0c, #050505); } .wdhc-page-hero__visual--submit-logo::after { display: none; } .wdhc-page-hero__visual--submit-logo img { width: 100%; height: auto !important; max-height: none; object-fit: contain !important; object-position: center; } .wdhc-page-hero__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(212, 175, 55, 0.08) 100%); pointer-events: none; } /* Visual relief · break up text walls */ .wdhc-visual-break { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; } .wdhc-visual-break__item { border-radius: var(--wdhc-radius); overflow: hidden; border: 1px solid var(--wdhc-border); aspect-ratio: 1; background: #111; } .wdhc-visual-break__item img, .wdhc-visual-break__item video { width: 100%; height: 100%; object-fit: cover; } /* Minimal cards */ .wdhc-card-min { background: var(--wdhc-card); border: 1px solid var(--wdhc-border); border-radius: var(--wdhc-radius); padding: 24px 26px; } .wdhc-card-min h2, .wdhc-card-min h3 { font-family: var(--wdhc-font-head); text-transform: uppercase; letter-spacing: 1px; font-size: 1.1rem; margin-bottom: 10px; } .wdhc-card-min p { font-family: var(--wdhc-font-body); color: var(--wdhc-dim); font-size: 0.98rem; line-height: 1.55; letter-spacing: 0.01em; margin: 0; } /* Site-wide subtext · headings & UI chrome keep Oswald / Rajdhani / mono */ body { font-family: var(--wdhc-font-body); letter-spacing: 0.01em; } p, li, dd, blockquote, label, textarea, input, select, option, td, th, .honest-note, .form-note, .page-lead, .footer-links a, .footer-copy { font-family: var(--wdhc-font-body); } .footer-copy { color: var(--wdhc-muted) !important; } .footer-links a { color: var(--wdhc-muted) !important; } .footer-links a:hover { color: var(--wdhc-gold) !important; } /* Stat strip · numbers not paragraphs */ .wdhc-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; } .wdhc-stat-strip__cell { text-align: center; padding: 18px 12px; border: 1px solid var(--wdhc-border); border-radius: 10px; background: rgba(255,255,255,0.02); } .wdhc-stat-strip__val { font-family: var(--wdhc-font-head); font-size: 1.6rem; color: var(--wdhc-gold); line-height: 1; } .wdhc-stat-strip__lbl { font-family: var(--wdhc-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--wdhc-dim); margin-top: 8px; } .wdhc-gold-text { background: linear-gradient(135deg, var(--wdhc-gold), var(--wdhc-bronze)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Section panels · gyms-style tinted blocks, no outlines */ :root { --wdhc-panel: #0e0e11; --wdhc-panel-warm: #100f0c; } .wdhc-section-panel, main .card, main .card-highlight { background: var(--wdhc-panel) !important; border: none !important; border-radius: var(--wdhc-radius); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045); padding: 28px 26px 32px; margin-bottom: 24px; } .wdhc-section-panel--warm, main .card-highlight { background: var(--wdhc-panel-warm) !important; } .wdhc-section-panel .section-intro, .wdhc-section-panel p, main .card p, main .card li { color: var(--wdhc-dim); line-height: 1.6; } @media (max-width: 900px) { .wdhc-page-hero, .wdhc-page-hero--reverse { grid-template-columns: 1fr; } .wdhc-page-hero--reverse .wdhc-page-hero__visual { order: 0; } .wdhc-visual-break { grid-template-columns: 1fr 1fr; } .wdhc-stat-strip { grid-template-columns: 1fr; } .wdhc-section-panel, main .card { padding: 22px 20px 26px; } }