/* ========================================================= 1.0 FILE META & PURPOSE (NO CODE CHANGES) ========================================================= */ /* ========================================================= TERRA SECUNDUS — SECTIONS (FULL RECAST) File: custom-sections.css Purpose: - Keep section styling in the "sections" sheet (no new files) - Isolate homepage modules via IDs so nothing bleeds site-wide - Preserve JA Purity IV/T4 structure; avoid global overrides Modules on homepage: #mod-header-feature #mod-feature (carousel) #mod-hero (full-bleed hero) #mod-section-1..6 (centerline bands) #mod-footer Notes: - Remove any older global feature/hero/band/slider rules you had in this sheet before—this block totally replaces them. ========================================================= */ /* ========================================================= 2.0 FONT FACES & ALIASES ========================================================= */ /* === Terra Secundus — Font Faces (site paths) === */ /* Legend (your file lives at /templates/terrasecundus/fonts/Legend.ttf) */ @font-face{ font-family: 'Legend'; src: url('/templates/terrasecundus/fonts/Legend.woff2') format('woff2'), url('/templates/terrasecundus/fonts/Legend.woff') format('woff'), url('/templates/terrasecundus/fonts/Legend.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: 'Legend'; src: url('/templates/terrasecundus/fonts/Legend.woff2') format('woff2'), url('/templates/terrasecundus/fonts/Legend.woff') format('woff'), url('/templates/terrasecundus/fonts/Legend.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Tabula (put the file here to match the path below) */ @font-face{ font-family: 'Tabula'; src: url('/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.woff2') format('woff2'), url('/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.woff') format('woff'), url('/templates/terrasecundus/fonts/TabulaPeutingeriana-ELv9.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Handy aliases */ :root{ --legend: 'Legend', 'Playfair Display', serif; --tabula: 'Tabula', 'Trajan Pro', serif; } /* ========================================================= 3.0 ROOT VARIABLES (SAFE FALLBACKS) ========================================================= */ /* ---------- Safe variable fallbacks (keeps theme-first) ---------- */ :root{ --primary-color: #ca5c00; --accent-color: #ff6a00; --dark-color: #1e1e1e; --light-color: #f5f5f5; --text-color: #222; --ts-content-max: 1280px; } /* ========================================================= 4.0 T4 SECTION SCOPING (NON-GLOBAL, SAFE HELPERS) ========================================================= */ /* Scope to .t4-section.ts_band so regular pages remain untouched. */ .t4-section.ts_band{ position: relative; isolation: isolate; overflow-x: clip; } .t4-section.ts_band .t4-section-inner.container, .t4-section.ts_band .t4-section-inner.container-fluid{ padding-left: 0 !important; padding-right: 0 !important; } .t4-section.ts_band .t4-col, .t4-section.ts_band .t4-mod-wrap, .t4-section.ts_band .section-inner, .t4-section.ts_band .section-ct{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Shared centerline wrapper (used by bands inside ts_band) */ .t4-section.ts_band .responsive-section, .t4-section.ts_band .container-responsive{ max-width: var(--ts-content-max); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 3vw, 44px); padding-right: clamp(16px, 3vw, 44px); box-sizing: border-box; } /* ========================================================= 5.0 HOMEPAGE MODULES — ID-SCOPED WRAPPERS ========================================================= */ /* 1) HOMEPAGE MODULES — ISOLATED BY ID These IDs must wrap each Custom Module on the front page. ========================================================= */ /* ---------- Common hygiene for homepage modules ---------- */ #mod-header-feature *, #mod-feature *, #mod-hero *, #mod-section-1 *, #mod-section-2 *, #mod-section-3 *, #mod-section-4 *, #mod-section-5 *, #mod-section-6 *, #mod-footer * { box-sizing: border-box; } #mod-header-feature .mod-inner, #mod-feature .mod-inner, #mod-hero .mod-inner, #mod-section-1 .mod-inner, #mod-section-2 .mod-inner, #mod-section-3 .mod-inner, #mod-section-4 .mod-inner, #mod-section-5 .mod-inner, #mod-section-6 .mod-inner, #mod-footer .mod-inner{ max-width: var(--ts-content-max); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 3vw, 44px); padding-right: clamp(16px, 3vw, 44px); } #mod-header-feature img, #mod-feature img, #mod-hero img, #mod-section-1 img, #mod-section-2 img, #mod-section-3 img, #mod-section-4 img, #mod-section-5 img, #mod-section-6 img, #mod-footer img{ max-width: 100%; height: auto; display: block; } /* --------------------------------------------------------- 5.1 HEADER-FEATURE (band directly under site header) --------------------------------------------------------- */ #mod-header-feature{ position: relative; isolation: isolate; overflow-x: clip; width: 100%; margin: 0; padding: 18px 0; color: #fff; background: linear-gradient(to right, #b06c00, #d6a45d); } #mod-header-feature .feature-row{ display: grid; align-items: center; grid-template-columns: 1.2fr 2fr 1fr; gap: clamp(12px, 2vw, 24px); } #mod-header-feature .logo-wrap img{ max-height: 64px; } #mod-header-feature .title-wrap h1, #mod-header-feature .title-wrap h2{ margin: 0; line-height: 1.1; letter-spacing: .5px; color: #fff; } #mod-header-feature .cta-wrap{ text-align: right; } #mod-header-feature .btn{ display: inline-block; cursor: pointer; text-decoration: none; background: #fff; color: #000; padding: 8px 14px; border: none; border-radius: 6px; font-weight: 600; } #mod-header-feature .btn:hover{ background: rgba(255,255,255,.9); } @media (max-width: 991.98px){ #mod-header-feature .feature-row{ grid-template-columns: 1fr; text-align: center; } #mod-header-feature .cta-wrap{ text-align: center; } #mod-header-feature .logo-wrap img{ max-height: 56px; margin: 0 auto; } } /* ========================================================= 6.0 T4 HEADER — FEATURE SLIDER (UNIFIED CINEMATIC) ========================================================= */ /* 1️⃣ Base Header Container */ #t4-header .t4-mod-wrap.ts_band.top-large.bottom-large { padding-top: 0 !important; padding-bottom: 0 !important; } #t4-header .custom { position: relative; width: 100vw; max-width: 100vw; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; overflow: hidden; background: #000 !important; /* fallback if image fails */ } /* 2️⃣ Feature Band */ #t4-header .feature-slider-band { position: relative; display: block; width: 100%; height: 82vh; min-height: 640px; max-height: 880px; overflow: hidden; background-color: #000; z-index: 2; } /* Responsive height scaling */ @media (max-width: 992px) { #t4-header .feature-slider-band { height: 72vh; min-height: 520px; } } @media (max-width: 600px) { #t4-header .feature-slider-band { height: 60vh; min-height: 440px; } } /* 3️⃣ Slides */ #t4-header .feature-slider-band .slide { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center top !important; /* Top-centered focus */ background-repeat: no-repeat; background-color: #000; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; } #t4-header .feature-slider-band .slide.active { opacity: 1; z-index: 2; } /* Optional — contain scaling mode (set via data-fit="contain") */ #t4-header .feature-slider-band .slide[data-fit="contain"] { background-size: contain !important; } /* Cinematic top vignette shading */ #t4-header .feature-slider-band .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.35) 100% ); pointer-events: none; z-index: 3; } /* 4️⃣ Slide Content (Centered Text Box) */ #t4-header .feature-slider-band .slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 680px; width: 90%; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 2.2rem 1.8rem; box-shadow: 0 0 20px rgba(0,0,0,0.35); backdrop-filter: blur(2px); z-index: 5; } /* Typography */ #t4-header .feature-slider-band .slide-content h2 { font-family: "Playfair Display", "Georgia", serif; font-size: clamp(2.2rem, 2.5vw, 3.2rem); font-weight: 700; letter-spacing: 0.03em; margin-bottom: 0.8rem; color: #f2e4c4; text-shadow: 0 0 10px rgba(0,0,0,0.5); } #t4-header .feature-slider-band .slide-content p { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.5; margin-bottom: 1.5rem; color: #fff; } #t4-header .feature-slider-band .slide-content .btn { font-size: 1rem; padding: 0.75rem 1.6rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } /* Responsive scaling */ @media (max-width: 992px) { #t4-header .feature-slider-band .slide-content { max-width: 90%; padding: 1.5rem; } } @media (max-width: 600px) { #t4-header .feature-slider-band .slide-content { padding: 1.2rem; font-size: 0.95rem; } } /* 5️⃣ Dot Navigation */ #t4-header .feature-slider-band .slider-nav { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; } #t4-header .feature-slider-band .slider-nav .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; opacity: 0.7; cursor: pointer; } #t4-header .feature-slider-band .slider-nav .dot.active { background: #fff; opacity: 1; } /* 6️⃣ Optional Prev/Next Buttons */ #t4-header .feature-slider-band .slider-prev, #t4-header .feature-slider-band .slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,0.35); color: #fff; z-index: 5; cursor: pointer; } #t4-header .feature-slider-band .slider-prev { left: 24px; } #t4-header .feature-slider-band .slider-next { right: 24px; } /* 7️⃣ Section Fade Transition */ #t4-header::after { content: ""; display: block; width: 100%; height: 80px; background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent); position: absolute; bottom: 0; left: 0; z-index: 3; } /* ========================================================= 7.0 HEADER FADE + H1 STROKE — FINAL FIX ========================================================= */ /* 0) Make the whole header a positioned context */ #t4-header { position: relative; z-index: 0; } /* 1) Ensure the hero/slider parents allow the fade to sit on top */ #t4-header .custom, #t4-header .feature-slider-band, #t4-header .feature-hero-image, #t4-header .feature-band.image-only { position: relative; isolation: isolate; /* prevent outside blending issues */ overflow: hidden; z-index: 0; } /* 2) Single, reliable fade overlay (remove/ignore older ::after rules) */ #t4-header .feature-slider-band::after, #t4-header .feature-hero-image::after, #t4-header .feature-band.image-only::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; /* adjust depth if you like */ /* dark-to-transparent fade to hide black bar below */ background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.25) 45%, transparent 100%); z-index: 4; /* above slides, below text */ pointer-events: none; } /* 3) Make sure slides sit below the fade; text above the fade */ #t4-header .feature-slider-band .slide { z-index: 1; } #t4-header .feature-slider-band .slide.active { z-index: 2; } #t4-header .feature-slider-band .slide::before { z-index: 3; } /* your dim overlay */ #t4-header .feature-slider-band .slide-content, #t4-header .feature-hero-image .feature-hero-content, #t4-header .feature-band.image-only .feature-caption { z-index: 5; } /* 4) Headings: white with black trim (slider + static hero) */ #t4-header .feature-slider-band .slide-content h1, #t4-header .feature-slider-band .slide-content h2, #t4-header .feature-hero-image .feature-hero-content h1, #t4-header .feature-band.image-only .feature-caption h1, #t4-header .feature-band.image-only .feature-caption h2 { color: #fff; /* Stroke (great in Chrome/Edge/Safari) */ -webkit-text-stroke: 1px rgba(0,0,0,0.85); /* Robust shadow fallback so it reads on complex backgrounds */ text-shadow: 0 1px 0 rgba(0,0,0,0.75), 0 2px 2px rgba(0,0,0,0.6), 0 0 12px rgba(0,0,0,0.35); } /* Optional: nudge typography consistently */ #t4-header .feature-slider-band .slide-content h1, #t4-header .feature-hero-image .feature-hero-content h1, #t4-header .feature-band.image-only .feature-caption h1 { font-weight: 800; letter-spacing: 0.02em; } #t4-header .feature-slider-band .slide-content h2, #t4-header .feature-band.image-only .feature-caption h2 { font-weight: 700; letter-spacing: 0.02em; } /* ========================================================= 8.0 FEATURE SLIDER — FULLWIDTH + RESTORED FADE ========================================================= */ /* Wrapper: force full bleed, no clipping */ #t4-header .custom { position: relative; width: 100vw; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; overflow: hidden; background: none !important; } /* Band fills visible header */ #t4-header .feature-slider-band { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; z-index: 2; background: #000; } /* Slides occupy same plane so opacity fade works */ #t4-header .feature-slider-band .slide { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center top; /* top-center framing */ background-repeat: no-repeat; opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1; } #t4-header .feature-slider-band .slide.active { opacity: 1; z-index: 2; } /* Soft vignette overlay for cinematic depth */ #t4-header .feature-slider-band .slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.1) 25%, rgba(0,0,0,0.3) 100% ); z-index: 3; pointer-events: none; } /* Centered content */ #t4-header .feature-slider-band .slide-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; max-width: 680px; width: 90%; background: rgba(0,0,0,0.35); border-radius: 8px; padding: 2.2rem 1.8rem; z-index: 5; box-shadow: 0 0 20px rgba(0,0,0,0.35); } /* Text styling */ #t4-header .feature-slider-band .slide-content h2 { font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.2rem, 2.5vw, 3rem); color: #f2e4c4; margin-bottom: 0.8rem; } #t4-header .feature-slider-band .slide-content p { font-size: clamp(1rem, 1.2vw, 1.25rem); line-height: 1.5; margin-bottom: 1.5rem; } /* Bottom fade into next section */ #t4-header .feature-slider-band::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient( to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 40%, transparent 100% ); z-index: 6; pointer-events: none; } /* Dots */ #t4-header .feature-slider-band .slider-nav { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 7; } #t4-header .feature-slider-band .slider-nav .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; opacity: .7; cursor: pointer; } #t4-header .feature-slider-band .slider-nav .dot.active { background: #fff; opacity: 1; } /* Responsive adjustments */ @media (max-width: 992px){ #t4-header .feature-slider-band { height: 80vh; } #t4-header .feature-slider-band .slide-content { max-width: 90%; padding: 1.6rem; } } @media (max-width: 600px){ #t4-header .feature-slider-band { height: 70vh; } #t4-header .feature-slider-band .slide-content { padding: 1.2rem; font-size: .95rem; } } /* --------------------------------------------------------- 5.2 HERO — FULL-BLEED STATIC (center-center, no-repeat) Apply background image inline on #mod-hero or child .hero-bg. --------------------------------------------------------- */ #mod-hero{ position: relative; isolation: isolate; overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); min-height: 75vh; background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; } #mod-hero::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 1; } #mod-hero .mod-inner{ position: relative; z-index: 2; text-align: center; color: #fff; } #mod-hero h1, #mod-hero p{ margin: .5em 0; color: #fff; text-shadow: 0 0 3px #d4af37, 0 0 12px #000; } /* --------------------------------------------------------- 5.3 SECTIONS 1..6 — CENTERLINE BANDS (themeable) Add to the module ID one of: .band-parchment | .band-bronze | .band-forest | .band-mist | .band-nightfall --------------------------------------------------------- */ #mod-section-1, #mod-section-2, #mod-section-3, #mod-section-4, #mod-section-5, #mod-section-6{ position: relative; isolation: isolate; padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 72px); color: var(--text-color); } /* Theme variants */ #mod-section-1.band-parchment, #mod-section-2.band-parchment, #mod-section-3.band-parchment, #mod-section-4.band-parchment, #mod-section-5.band-parchment, #mod-section-6.band-parchment{ background: url('/images/backgrounds/parchment-texture.jpg') repeat; background-size: cover; color: #2a2a2a; border-top: 2px solid #d4c5a2; border-bottom: 2px solid #d4c5a2; } #mod-section-1.band-bronze, #mod-section-2.band-bronze, #mod-section-3.band-bronze, #mod-section-4.band-bronze, #mod-section-5.band-bronze, #mod-section-6.band-bronze{ background: linear-gradient(to bottom right, #d6a45d, #b06c00); color: #fff; } #mod-section-1.band-forest, #mod-section-2.band-forest, #mod-section-3.band-forest, #mod-section-4.band-forest, #mod-section-5.band-forest, #mod-section-6.band-forest{ background: linear-gradient(to bottom, #2d4d32, #0d2e1c); color: #e3e3e3; } #mod-section-1.band-mist, #mod-section-2.band-mist, #mod-section-3.band-mist, #mod-section-4.band-mist, #mod-section-5.band-mist, #mod-section-6.band-mist{ background: linear-gradient(to bottom, #eef1f5, #d6dbe1); color: #1a1a1a; } #mod-section-1.band-nightfall, #mod-section-2.band-nightfall, #mod-section-3.band-nightfall, #mod-section-4.band-nightfall, #mod-section-5.band-nightfall, #mod-section-6.band-nightfall{ background: linear-gradient(to bottom, #0f1317, #1a1f26); color: #eaeaea; } /* Section header */ #mod-section-1 .section-header, #mod-section-2 .section-header, #mod-section-3 .section-header, #mod-section-4 .section-header, #mod-section-5 .section-header, #mod-section-6 .section-header{ text-align: center; margin: 0 0 24px 0; } #mod-section-1 .section-header h2, #mod-section-2 .section-header h2, #mod-section-3 .section-header h2, #mod-section-4 .section-header h2, #mod-section-5 .section-header h2, #mod-section-6 .section-header h2{ margin: 0; font-size: 2.25rem; color: var(--primary-color); } #mod-section-1.band-bronze .section-header h2, #mod-section-2.band-bronze .section-header h2, #mod-section-3.band-bronze .section-header h2, #mod-section-4.band-bronze .section-header h2, #mod-section-5.band-bronze .section-header h2, #mod-section-6.band-bronze .section-header h2{ color: #fff; } /* Feature grid pattern */ #mod-section-1 .feature-grid, #mod-section-2 .feature-grid, #mod-section-3 .feature-grid, #mod-section-4 .feature-grid, #mod-section-5 .feature-grid, #mod-section-6 .feature-grid{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; margin: 0; padding: 0; } #mod-section-1 .feature-grid-mirror, #mod-section-2 .feature-grid-mirror, #mod-section-3 .feature-grid-mirror, #mod-section-4 .feature-grid-mirror, #mod-section-5 .feature-grid-mirror, #mod-section-6 .feature-grid-mirror{ flex-direction: row-reverse; } #mod-section-1 .feature-summary, #mod-section-1 .feature-image, #mod-section-2 .feature-summary, #mod-section-2 .feature-image, #mod-section-3 .feature-summary, #mod-section-3 .feature-image, #mod-section-4 .feature-summary, #mod-section-4 .feature-image, #mod-section-5 .feature-summary, #mod-section-5 .feature-image, #mod-section-6 .feature-summary, #mod-section-6 .feature-image{ flex: 1 1 45%; margin: 0; padding: 0; } #mod-section-1 .feature-image img, #mod-section-2 .feature-image img, #mod-section-3 .feature-image img, #mod-section-4 .feature-image img, #mod-section-5 .feature-image img, #mod-section-6 .feature-image img{ border: 2px solid #ccc; border-radius: 6px; margin: 0 auto; } #mod-section-1 .feature-summary h3, #mod-section-2 .feature-summary h3, #mod-section-3 .feature-summary h3, #mod-section-4 .feature-summary h3, #mod-section-5 .feature-summary h3, #mod-section-6 .feature-summary h3{ margin: 0 0 .4em 0; font-size: 1.35rem; color: inherit; } #mod-section-1 .feature-summary p, #mod-section-2 .feature-summary p, #mod-section-3 .feature-summary p, #mod-section-4 .feature-summary p, #mod-section-5 .feature-summary p, #mod-section-6 .feature-summary p{ margin: 0; font-size: 1.08rem; color: #444; } #mod-section-1.band-bronze .feature-summary p, #mod-section-2.band-bronze .feature-summary p, #mod-section-3.band-bronze .feature-summary p, #mod-section-4.band-bronze .feature-summary p, #mod-section-5.band-bronze .feature-summary p, #mod-section-6.band-bronze .feature-summary p{ color: #fff; } @media (max-width: 991.98px){ #mod-section-1 .feature-summary, #mod-section-1 .feature-image, #mod-section-2 .feature-summary, #mod-section-2 .feature-image, #mod-section-3 .feature-summary, #mod-section-3 .feature-image, #mod-section-4 .feature-summary, #mod-section-4 .feature-image, #mod-section-5 .feature-summary, #mod-section-5 .feature-image, #mod-section-6 .feature-summary, #mod-section-6 .feature-image{ flex: 1 1 100%; } } /* Optional epigraph block inside any section */ #mod-section-1 .epigraph, #mod-section-2 .epigraph, #mod-section-3 .epigraph, #mod-section-4 .epigraph, #mod-section-5 .epigraph, #mod-section-6 .epigraph{ background: #f7f1e4; color: #2a2a2a; font-family: 'Georgia', serif; text-align: center; padding: 60px 20px; font-size: 1.2rem; line-height: 1.8; border-top: 2px solid #d4c5a2; border-bottom: 2px solid #d4c5a2; font-style: italic; } #mod-section-1 .epigraph em, #mod-section-2 .epigraph em, #mod-section-3 .epigraph em, #mod-section-4 .epigraph em, #mod-section-5 .epigraph em, #mod-section-6 .epigraph em{ color: #6b4e21; } /* --------------------------------------------------------- 5.4 FOOTER (homepage custom module) --------------------------------------------------------- */ #mod-footer{ position: relative; isolation: isolate; background: var(--dark-color); color: #fff; padding-top: 36px; padding-bottom: 36px; } #mod-footer .footer-grid{ display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); } #mod-footer a{ color: #fff; text-decoration: none; } #mod-footer a:hover{ text-decoration: underline; } #mod-footer .smallprint{ opacity: .75; font-size: .9rem; margin-top: 12px; } @media (max-width: 991.98px){ #mod-footer .footer-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px){ #mod-footer .footer-grid{ grid-template-columns: 1fr; } } /* ========================================================= 9.0 MODULE: HEADER (CINEMATIC v3 — BORDERLESS) Scope: #sp-header.ts-header only ========================================================= */ /* HTML contract (as provided):
...
*/ #sp-header.ts-header{ --ink:#fff; --ink-dim:#cfcfcf; --gold:#ffd65c; --copper:#ffc76a; --cyan:#00eaff; --bg-deep:#0e0e10; } /* full-bleed sticky bar with cinematic palette */ #sp-header.ts-header.full-bleed{ position: sticky; top: 0; z-index: 1040; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); color: var(--ink); background: radial-gradient(1200px 280px at 12% -20%, rgba(255,214,92,.30), transparent 60%), radial-gradient(1000px 260px at 50% -30%, rgba(255,179,68,.18), transparent 62%), radial-gradient(1200px 280px at 88% -20%, rgba(0,234,255,.14), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38)), linear-gradient(90deg,#15161a,#101015 25%,#0e0e10 50%,#101015 75%,#15161a); backdrop-filter: saturate(120%) blur(8px); -webkit-backdrop-filter: saturate(120%) blur(8px); overflow-x: clip; } /* graceful fallback if backdrop-filter unavailable */ @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { #sp-header.ts-header.full-bleed{ background: radial-gradient(1200px 280px at 12% -20%, rgba(255,214,92,.22), transparent 60%), radial-gradient(1000px 260px at 50% -30%, rgba(255,179,68,.12), transparent 62%), radial-gradient(1200px 280px at 88% -20%, rgba(0,234,255,.10), transparent 60%), linear-gradient(90deg,#15161a,#101015 25%,#0e0e10 50%,#101015 75%,#15161a); } } #sp-header.ts-header.full-bleed::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.12; background-image:url("/images/tex/noise-64.png"); background-size:128px 128px; mix-blend-mode:overlay; } #sp-header.ts-header.full-bleed::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 0%, rgba(255,214,92,.10) 35%, rgba(255,214,92,.18) 50%, rgba(255,214,92,.10) 65%, transparent 100%); mix-blend-mode:screen; opacity:.5; background-size:200% 100%; animation: tsHdrCopperSweep 12s linear infinite; } @keyframes tsHdrCopperSweep{ 0%{background-position:-100% 0} 100%{background-position:100% 0} } @media (prefers-reduced-motion: reduce){ #sp-header.ts-header.full-bleed::after{ animation:none; opacity:.25; } } /* row */ #sp-header.ts-header .header-band{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:.75rem clamp(14px,2.3vw,28px); } #sp-header.ts-header .logo img{ max-height:56px; height:auto; display:block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); } /* ========================================================= 9.1 MENU WRAPPERS — NEUTRALIZE BORDERS ========================================================= */ /* KILL THE WHITE BORDER AROUND MENU (Bootstrap/Purity wrappers) */ #sp-header.ts-header #sp-menu{ --bs-border-color: transparent; /* neutralize bootstrap border var */ } #sp-header.ts-header #sp-menu .moduletable, #sp-header.ts-header #sp-menu nav.navbar, #sp-header.ts-header #sp-menu .navbar, #sp-header.ts-header #sp-menu .sp-megamenu-parent, #sp-header.ts-header #sp-menu .t4-megamenu, #sp-header.ts-header #sp-menu .sp-megamenu, #sp-header.ts-header #sp-menu .navbar-nav, #sp-header.ts-header #sp-menu .nav, #sp-header.ts-header #sp-menu #main{ border: 0 !important; border-left: 0 !important; border-right: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; background-clip: padding-box; /* avoid faint AA seams */ } /* robust menu targeting (works for .navbar-nav / .nav / .menu) */ #sp-header.ts-header #sp-menu{ min-width:0; text-align:center; flex:1 1 auto; } #sp-header.ts-header #sp-menu :is(ul){ margin:0; padding:0; list-style:none; } #sp-header.ts-header #sp-menu :is(.navbar, nav){ display:flex; align-items:center; justify-content:center; } #sp-header.ts-header #sp-menu :is(.navbar-nav, .nav, .menu){ display:flex; flex-wrap:wrap; column-gap: clamp(1.1rem, 0.9rem + 1vw, 2rem); row-gap: .35rem; } #sp-header.ts-header #sp-menu :is(.navbar-nav > li, .nav > li, .menu > li){ position:relative; } #sp-header.ts-header #sp-menu a{ position:relative; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:clamp(1rem, .98rem + .35vw, 1.18rem); padding:.45rem .9rem; text-decoration:none; transition:color .2s ease, text-shadow .25s ease, transform .2s ease; } #sp-header.ts-header #sp-menu li.current > a, #sp-header.ts-header #sp-menu a:hover, #sp-header.ts-header #sp-menu a:focus{ color:var(--ink); text-shadow:0 0 12px rgba(0,234,255,.35), 0 0 8px rgba(255,214,92,.25); transform: translateY(-1px); } #sp-header.ts-header #sp-menu a::after{ content:""; position:absolute; left:12%; right:12%; bottom:-6px; height:2px; background: linear-gradient(90deg, var(--gold), var(--copper) 45%, var(--cyan) 80%); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } #sp-header.ts-header #sp-menu li.current > a::after, #sp-header.ts-header #sp-menu a:hover::after{ transform:scaleX(1); } /* diamond separators */ #sp-header.ts-header #sp-menu :is(.navbar-nav, .nav, .menu) > li:not(:last-child)::after{ content:""; position:absolute; right:-0.7rem; top:50%; transform:translateY(-50%) rotate(45deg); width:6px; height:6px; background: linear-gradient(45deg, var(--gold), var(--copper)); box-shadow: 0 0 8px rgba(255,214,92,.55); border-radius:1px; pointer-events:none; opacity:.95; } /* dropdowns (glass look) */ #sp-header.ts-header .dropdown-menu{ background: rgba(20,20,26,.72); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); border:1px solid rgba(255,214,92,.25); border-radius:14px; overflow:hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03) inset; } #sp-header.ts-header .dropdown-item{ color:#e7e7e7; padding:.55rem .9rem; font-weight:600; } #sp-header.ts-header .dropdown-item:hover{ color:#fff; background: linear-gradient(90deg, rgba(255,214,92,.15), rgba(0,234,255,.15)); } /* trapezoid search (cinematic) */ #sp-header.ts-header .header-modules{ display:flex; align-items:center; gap: clamp(1.25rem, 2.5vw, 3rem); } #sp-header.ts-header .ts-finder{ position:relative; overflow:visible; } #sp-header.ts-header .ts-finder button{ display:none !important; } /* Enter submits; icon shown below */ #sp-header.ts-header .ts-finder .js-finder-search-query{ padding:12px 44px 12px 16px; min-width:220px; color:#fff; outline:0; border:1px solid rgba(255,214,92,.45); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.35); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } #sp-header.ts-header .ts-finder .js-finder-search-query::placeholder{ color:#cfc7b0; } #sp-header.ts-header .ts-finder .js-finder-search-query:focus{ border-color:rgba(255,214,92,.85); box-shadow:0 0 0 2px rgba(255,214,92,.25), 0 16px 50px rgba(255,214,92,.22); } #sp-header.ts-header .ts-finder::before{ content:""; position:absolute; inset:0; pointer-events:none; clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%); background: linear-gradient(90deg, rgba(255,214,92,.45), rgba(255,214,92,0) 60%) left/10px 100% no-repeat, linear-gradient(270deg, rgba(255,214,92,.45), rgba(255,214,92,0) 60%) right/10px 100% no-repeat; filter: blur(.6px) drop-shadow(0 0 12px rgba(255,214,92,.22)); opacity:.75; } #sp-header.ts-header .ts-finder::after{ content:"\f002"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:15px; color:#d9d9d9; opacity:.85; pointer-events:none; } /* login button (use your ) */ #sp-header.ts-header .login .header-login .login-link{ position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:999px; text-decoration:none; color:#fff; background:rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 24px rgba(0,0,0,.35); transition: transform .18s ease, box-shadow .25s ease; } #sp-header.ts-header .login .header-login .login-link i{ font-size:18px; line-height:1; filter: drop-shadow(0 0 6px rgba(0,0,0,.35)); } #sp-header.ts-header .login .header-login .login-link::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background: conic-gradient(from 0deg, var(--gold), var(--copper), var(--gold)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.55; filter: blur(.2px); transition: opacity .2s ease, filter .2s ease; } #sp-header.ts-header .login .header-login .login-link:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 34px rgba(0,234,255,.2); } #sp-header.ts-header .login .header-login .login-link:hover::before{ opacity:.85; filter: blur(1px); } /* focus visibility */ #sp-header.ts-header :is(a,button,input):focus{ outline:2px solid #fff; outline-offset:2px; } /* responsive */ @media (max-width:991.98px){ #sp-header.ts-header .logo img{ max-height:48px; } #sp-header.ts-header .header-band{ justify-content:center; } #sp-header.ts-header #sp-menu{ order:3; flex-basis:100%; margin-top:.35rem; } #sp-header.ts-header .header-modules{ order:2; gap:1.25rem; } #sp-header.ts-header .logo{ order:1; flex-basis:100%; text-align:center; } #sp-header.ts-header .ts-finder .js-finder-search-query{ min-width:170px; } } @media (max-width:767.98px){ #sp-header.ts-header .logo img{ max-height:44px; } #sp-header.ts-header .ts-finder .js-finder-search-query{ min-width:150px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); /* gentler on tiny screens */ } } /* ========================================================= 10.0 FEATURE (SLIDER + STATIC) — REPAIR v3 (AUTHORITATIVE) Purpose: defeat any upstream `background: … !important` ========================================================= */ /* Full-bleed stage for both variants */ .feature-slider-band, section.feature-hero-image{ position:relative; isolation:isolate; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); overflow:hidden; /* keep images visible */ background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; background-color:transparent !important; } /* Subtle grain + gloss (won’t hide the image) */ .feature-slider-band::before, section.feature-hero-image::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("/images/tex/noise-64.png"); background-size:128px 128px; mix-blend-mode:overlay; opacity:.10; } .feature-slider-band::after, section.feature-hero-image::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0) 50%); } /* SLIDER ONLY */ .feature-slider{ position:relative; z-index:2; width:100%; height:clamp(480px, 62vh, 860px); overflow:hidden; box-sizing:border-box; } .feature-slider .slide{ position:absolute; inset:0; /* these win even if a theme uses `background: none !important` elsewhere */ background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; opacity:0; transition:opacity .9s ease-in-out; z-index:1; } .feature-slider .slide.active{ opacity:1; z-index:2; } .feature-slider .slide::before{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%); } /* Slide content */ .feature-slider .slide-content{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:min(92vw,760px); text-align:center; color:#fff; padding:clamp(16px,3vw,36px); border-radius:10px; background:linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.18)); box-shadow:0 12px 40px rgba(0,0,0,.35); } .feature-slider .slide-content h2{ margin:0 0 .35em; font-size:clamp(1.75rem,1.2rem + 2.4vw,3rem); } .feature-slider .slide-content p{ margin:0 0 1rem; font-size:clamp(1rem,.95rem + .6vw,1.25rem); opacity:.95; } .feature-slider .slide-content .btn.btn-accent{ display:inline-block; padding:.65rem 1.1rem; border-radius:8px; font-weight:700; text-decoration:none; color:#000; background:#ffd65c; box-shadow:0 10px 26px rgba(0,0,0,.3), 0 0 18px rgba(255,214,92,.45); } /* Dots */ .feature-slider .slider-nav{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:4; display:flex; gap:10px; } .feature-slider .slider-nav .dot{ width:12px; height:12px; border-radius:50%; border:2px solid #fff; background:transparent; opacity:.7; cursor:pointer; } .feature-slider .slider-nav .dot.active, .feature-slider .slider-nav .dot[aria-current="true"]{ background:#fff; opacity:1; } /* STATIC (non-slide) */ section.feature-hero-image{ min-height:clamp(420px, 55vh, 760px); } section.feature-hero-image .header-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 100%); } section.feature-hero-image .feature-hero-content{ position:relative; z-index:3; min-height:inherit; display:grid; place-items:center; padding:clamp(16px,3vw,36px); text-align:center; color:#fff; } section.feature-hero-image .feature-header h1{ margin:0; font-weight:700; line-height:1.12; font-size:clamp(1.8rem,1.2rem + 2.8vw,3.2rem); background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12)); display:inline-block; padding:clamp(8px,1.2vw,14px) clamp(14px,2.2vw,22px); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.30); } /* Responsive */ @media (max-width:991.98px){ .feature-slider{ height:clamp(420px, 52vh, 680px); } } @media (max-width:575.98px){ .feature-slider{ height:clamp(380px, 52vh, 560px); } section.feature-hero-image{ min-height:clamp(360px, 52vh, 560px); } } /* ========================================================= 11.0 HERO (#ts-hero-band) — TEMPLATE BG, NO OVERLAYS ========================================================= */ /* Normalize the wrappers so the template's background shows edge-to-edge */ .t4-section-inner:has(#ts-hero-band), .section-inner:has(#ts-hero-band), .section-ct:has(#ts-hero-band){ padding-left: 0 !important; padding-right: 0 !important; background: transparent !important; overflow: visible !important; } /* Hero block: no background of its own; no full-bleed offsets */ #ts-hero-band{ position: relative; isolation: isolate; display: block; width: 100%; max-width: 100%; margin: 0; /* remove negative/50vw tricks */ min-height: clamp(480px, 60vh, 880px); color: #fff; text-align: center; background: transparent !important; /* reveal template BG behind */ overflow: hidden; border: 0 !important; outline: 0 !important; box-shadow: none; } /* Kill our previous dark films/overlays completely */ #ts-hero-band::before, #ts-hero-band::after{ content: none !important; background: none !important; } #ts-hero-band .header-overlay-light{ display: none !important; background: none !important; } /* Keep your decorative runes if desired (leave as-is, or comment out to hide) */ #ts-hero-band .rune-orbit, #ts-hero-band .rune-orbit-inner{ position: absolute; inset: 0; margin: auto; pointer-events: none; aspect-ratio: 1 / 1; border-radius: 999px; mix-blend-mode: screen; z-index: 2; } #ts-hero-band .rune-orbit{ width: min(88vmin, 980px); height: min(88vmin, 980px); border: 1px solid rgba(255,214,92,.25); box-shadow: 0 0 40px rgba(255,214,92,.15), inset 0 0 60px rgba(0,234,255,.12); animation: tsOrbit 48s linear infinite; } #ts-hero-band .rune-orbit-inner{ width: min(60vmin, 660px); height: min(60vmin, 660px); border: 1px solid rgba(0,234,255,.25); box-shadow: 0 0 30px rgba(0,234,255,.14), inset 0 0 40px rgba(255,214,92,.12); animation: tsOrbitReverse 36s linear infinite; } @keyframes tsOrbit { to { transform: rotate(360deg); } } @keyframes tsOrbitReverse { to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce){ #ts-hero-band .rune-orbit, #ts-hero-band .rune-orbit-inner{ animation: none; } } /* Content */ #ts-hero-band .header-title{ position: relative; z-index: 3; margin: 0; font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(2rem, 1.6rem + 2.8vw, 3.4rem); line-height: 1.1; text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 6px rgba(255,214,92,.25); padding-top: clamp(18px, 3vh, 28px); } #ts-hero-band .responsive-section.centered{ position: relative; z-index: 3; min-height: calc(clamp(480px, 60vh, 880px) - 84px); display: grid; place-items: center; padding: clamp(16px, 3vw, 48px); } #ts-hero-band .header-subtitle{ margin: .5rem 0 1rem; font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); opacity: .98; } #ts-hero-band .btn.btn-accent{ display:inline-block; padding:.75rem 1.2rem; border-radius:12px; font-weight:700; text-decoration:none; color:#000; background:#ffd65c; box-shadow:0 10px 26px rgba(0,0,0,.30), 0 0 18px rgba(255,214,92,.45); transition:transform .12s ease, box-shadow .2s ease, background .2s ease; } #ts-hero-band .btn.btn-accent:hover{ background:#FFE28E; transform:translateY(-1px); box-shadow:0 12px 34px rgba(0,0,0,.35), 0 0 22px rgba(255,214,92,.6); } /* Mobile min-height */ @media (max-width: 575.98px){ #ts-hero-band{ min-height: clamp(380px, 56vh, 640px); } #ts-hero-band .responsive-section.centered{ min-height: calc(clamp(380px, 56vh, 640px) - 72px); } } /* Safety: prevent stray horizontal scroll site-wide */ html, body { overflow-x: hidden; } /* ========================================================= 12.0 UNIVERSAL ROW BAND PAINTER (FINAL) ========================================================= */ /* Let the 100vw bleed be visible */ .t4-section-inner, .section-inner, .section-ct { overflow: visible !important; } /* Keep module internals transparent so the row/section color reads */ *[class*="band-"] .container-responsive, *[class*="band-"] .feature-band, *[class*="band-"] .container, *[class*="band-"] .custom { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Any host that carries a band-* becomes the painter */ html body *[class*="band-"] { position: relative; z-index: 0; } /* --- PARChment (Section 1) — darker tone --- */ html body *[class~="band-parchment"]{ background: #EDE3CF !important; /* was #f6f2ea */ color: #26221a; /* slightly deeper ink */ } html body *[class~="band-parchment"]::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background: inherit; z-index:-1; pointer-events:none; } /* ---------- Section 2: BRONZE ---------- */ html body *[class~="band-bronze"] { background: linear-gradient(to bottom right, #d6a45d, #b06c00) !important; color: #fff; } html body *[class~="band-bronze"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; } /* ---------- Section 3: FOREST ---------- */ html body *[class~="band-forest"] { background: linear-gradient(to bottom, #2d4d32, #0d2e1c) !important; color: #e3e3e3; } html body *[class~="band-forest"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; } /* ---------- Optional palettes for Sections 4–6 ---------- */ html body *[class~="band-mist"] { background: linear-gradient(to bottom, #eef1f5, #d6dbe1) !important; color: #1a1a1a; } html body *[class~="band-mist"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; } html body *[class~="band-nightfall"] { background: linear-gradient(to bottom, #0f1317, #1a1f26) !important; color: #eaeaea; } html body *[class~="band-nightfall"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; } html body *[class~="band-stone"] { background: linear-gradient(180deg, #f1f1f1, #e6e6e6) !important; color: #222; } html body *[class~="band-stone"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: inherit; z-index: -1; pointer-events: none; } /* Safety: avoid horizontal scroll from the 100vw painters */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } /* ========================================================= 13.0 SECTION-1 — WORLD INTRO (band-parchment) ========================================================= */ :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro{ position: relative; isolation: isolate; } /* Heading (Legend) */ :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-header{ margin: 0 0 clamp(14px, 2vw, 22px); } :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-header h2{ margin: 0; padding-bottom: .35rem; font-family: 'Legend','Playfair Display',serif; font-weight: 700; letter-spacing: .02em; font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.8rem); color: #26221a; /* deeper ink on darker parchment */ text-shadow: 0 1px 0 rgba(255,255,255,.55); border-bottom: 2px solid rgba(45,32,18,.22); /* slightly stronger rule */ } /* Grid (copy + image) */ :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-grid{ display: grid; align-items: center; gap: clamp(18px, 2.6vw, 38px); grid-template-columns: 1.05fr .95fr; } :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-summary h4{ margin: 0 0 .8rem; line-height: 1.65; font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(1.06rem, 1rem + .58vw, 1.4rem); color: #26221a; /* match heading ink */ } :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-image img{ display: inline-block; max-width: 100%; height: auto; border-radius: 10px; background: #fff; border: 1px solid rgba(45,32,18,.22); box-shadow: 0 16px 42px rgba(0,0,0,.14), 0 0 0 1px rgba(255,255,255,.50) inset; } /* CTA (secondary button) */ :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .btn.btn-secondary{ display: inline-block; padding: .7rem 1.1rem; border-radius: 12px; font-weight: 800; letter-spacing: .02em; text-decoration: none; color: #161513 !important; background: #fff; border: 1px solid rgba(45,32,18,.34) !important; box-shadow: 0 10px 26px rgba(0,0,0,.10); } :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .btn.btn-secondary:hover{ filter: saturate(108%); } /* Responsive */ @media (max-width: 991.98px){ :where(.t4-section, .t4-mod-wrap, .ts_band) .ts-world-intro .feature-grid{ grid-template-columns: 1fr; } } /* ========================================================= 14.0 SECTION-3 — BESTIARY (band-forest) READABILITY ========================================================= */ /* Headings (Legend): kill gradient clip & set clean light color */ .band-forest .ts-bestiary .feature-header h2, .band-forest .ts-bestiary .feature-header h3{ background-image: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: #f7fffc !important; color: #f7fffc !important; -webkit-text-stroke: 0.25px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.10); } /* Subheads / body copy (Playfair): brighter, crisp, no extra spacing */ .band-forest .ts-bestiary .feature-summary :is(h4,p,li,small,em,strong){ color: #eef8f1 !important; text-shadow: 0 1px 0 rgba(0,0,0,.45); } /* Optional: ensure any plain links inside summary are readable */ .band-forest .ts-bestiary .feature-summary a:not(.btn){ color: #d7fff0 !important; text-decoration-color: rgba(215,255,240,.7); } /* Keep your existing button styling; do NOT touch padding/layout */ /* ========================================================= 15.0 SECTIONS 4–6 (V2) — EPIGRAPH • JOURNALS • CTA ========================================================= */ /* ---------- SECTION 4: Epigraph (epigraph-band) ---------- */ html body *[class~="epigraph-band"]{ background: radial-gradient(1100px 320px at 18% -10%, rgba(255,214,92,.18), transparent 60%), radial-gradient(1100px 320px at 82% 110%, rgba(0,234,255,.12), transparent 60%), #f8f3e9 !important; color:#2a2a2a; } .epigraph-band .ts-epigraph { padding: clamp(28px, 4vw, 72px) 0; } .epigraph-band .ts-epigraph .container-responsive { text-align:center; } .epigraph-band .epigraph{ margin: 0 auto; max-width: min(900px, 92%); font-style: italic; line-height: 1.6; font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); text-shadow: 0 1px 0 rgba(255,255,255,.55); } .epigraph-band .epigraph::before, .epigraph-band .epigraph::after{ content:""; display:block; width:min(180px, 40%); height:2px; margin: clamp(10px,1.8vw,16px) auto; background: linear-gradient(90deg, rgba(255,214,92,.8), rgba(0,234,255,.45)); filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); } .epigraph-band .epigraph .source{ display:block; margin-top:.6rem; opacity:.85; letter-spacing:.02em; } /* ---------- SECTION 5: Journals (band-mist) — more cinematic ---------- */ .band-mist .ts-journals{ position: relative; isolation: isolate; padding: clamp(28px, 4vw, 72px) 0; } .band-mist .ts-journals::before{ /* soft top glow and bottom vignette for “misty” depth */ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.55), transparent 60%), linear-gradient(180deg, transparent 0%, rgba(0,0,0,.06) 100%); } .band-mist .ts-journals .feature-grid{ position: relative; z-index: 1; display:grid; align-items:center; gap: clamp(18px, 2.6vw, 38px); grid-template-columns: 1.05fr .95fr; } .band-mist .ts-journals .feature-image{ position:relative; text-align:center; } .band-mist .ts-journals .feature-image::after{ /* cooler cinematic bloom under the image */ content:""; position:absolute; inset:-10px; z-index:0; border-radius:14px; background: radial-gradient(60% 40% at 50% 55%, rgba(170,190,220,.25), transparent 70%); filter: blur(16px); } .band-mist .ts-journals .feature-image img{ position:relative; z-index:1; display:inline-block; max-width:100%; height:auto; border-radius:14px; background:#fff; border:1px solid rgba(170,190,220,.45); box-shadow: 0 24px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.35) inset; } .band-mist .ts-journals .feature-summary p{ margin:0; line-height:1.62; } .band-mist .ts-journals .btn.btn-primary{ display:inline-block; padding:.78rem 1.25rem; border-radius:14px; font-weight:800; letter-spacing:.02em; text-decoration:none; color:#0f1730 !important; background:#ffffff; border:1px solid rgba(120,130,150,.35) !important; box-shadow: 0 16px 40px rgba(120,130,150,.25), 0 0 24px rgba(200,210,230,.25); transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; } .band-mist .ts-journals .btn.btn-primary:hover{ filter:saturate(110%); transform: translateY(-1px); box-shadow: 0 22px 56px rgba(120,130,150,.30), 0 0 28px rgba(200,210,230,.32); } @media (max-width: 991.98px){ .band-mist .ts-journals .feature-grid{ grid-template-columns:1fr; } } /* ---------- SECTION 6: CTA (band-nightfall) — more cinematic ---------- */ .band-nightfall .ts-cta{ position: relative; isolation:isolate; padding: clamp(34px, 5vw, 88px) 0; text-align:center; } .band-nightfall .ts-cta::before{ /* night-sky sweep + subtle star grain */ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(80% 60% at 50% -10%, rgba(120,160,255,.20), transparent 60%), radial-gradient(80% 60% at 50% 110%, rgba(0,234,255,.12), transparent 60%), url("/images/tex/noise-64.png"); background-size: auto, auto, 128px 128px; background-blend-mode: screen, screen, normal; opacity:.6; } .band-nightfall .ts-cta .container-responsive.centered{ position: relative; z-index: 1; display:flex; flex-direction:column; align-items:center; justify-content:center; } .band-nightfall .ts-cta h2{ text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 0 16px rgba(255,255,255,.10), 0 14px 40px rgba(0,0,0,.55); } .band-nightfall .ts-cta h4{ margin: .45rem 0 1rem; max-width:min(900px, 92%); opacity:.96; line-height:1.58; color:#eaf1ff; } .band-nightfall .ts-cta .btn.btn-accent{ display:inline-block; padding:.85rem 1.35rem; border-radius:14px; font-weight:800; letter-spacing:.02em; text-decoration:none; color:#04121f !important; background:#ffffff; border:1px solid rgba(160,200,255,.38) !important; box-shadow: 0 18px 48px rgba(90,150,220,.28), 0 0 26px rgba(160,200,255,.22); transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; } .band-nightfall .ts-cta .btn.btn-accent:hover{ filter:saturate(114%); transform: translateY(-1px); box-shadow: 0 26px 68px rgba(90,150,220,.34), 0 0 32px rgba(160,200,255,.30); } /* ========================================================= 16.0 SIX-SECTION TYPOGRAPHY PACK (v2) ========================================================= */ /* host scopes provide shared vars */ html body .t4-section[class*="band-"], html body .t4-mod-wrap[class*="band-"], html body section[class*="band-"]{ --ts-gold-1:#fff8d0; --ts-gold-2:#ffd65c; --ts-gold-3:#ffb347; --ts-gold-4:#ffe08a; --ts-silver:#cfd3d8; --ink-dark:#111; --ink-mid:#2f2f2f; --ink-dim:#555; --ink-light:#ffffff; --ink-light-2:#e9eef6; --ink-light-3:#cfd3d8; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* default text inside the bands */ [class*="band-"] .feature-band{ font-family: 'Playfair Display', serif; } /* Buttons keep Playfair per your spec */ [class*="band-"] .feature-band .btn{ font-family: 'Playfair Display', serif !important; } /* ---------------- H1: Tabula with crisp gold & silver rim ---------------- */ /* Gold palette + silver rim variables (safe defaults) */ :root{ --ts-gold-1:#fff6c5; /* highlight */ --ts-gold-2:#ffd65c; /* mid */ --ts-gold-3:#e9b14a; /* warm mid */ --ts-gold-4:#b97c2c; /* deep */ --ts-silver:#dfe5f1; /* rim */ } /* Target H1s in banded feature sections */ [class*="band-"] .feature-band h1{ margin:0 0 .35rem; font-family:'Tabula','TabulaPeutingeriana-ELv9','Trajan Pro',serif !important; font-weight:400; letter-spacing:.035em; line-height:1.05; font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.4rem); /* Gold leaf fill (text clipped to layered gradients) */ color:transparent; background-image: radial-gradient(120% 150% at 20% 10%, rgba(255,255,255,.75), transparent 30%), linear-gradient(180deg, var(--ts-gold-1) 0%, var(--ts-gold-2) 28%, var(--ts-gold-3) 58%, var(--ts-gold-2) 82%, var(--ts-gold-4) 100%), repeating-linear-gradient(45deg, rgba(255,255,255,.10) 0 2px, rgba(0,0,0,.06) 2px 4px); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; /* Silver rim + subtle depth */ -webkit-text-stroke:.8px var(--ts-silver); paint-order: stroke fill; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 2px 2px rgba(0,0,0,.35), 0 0 8px rgba(255,214,92,.25), 0 0 16px rgba(255,214,92,.12); } /* Optional gentle shimmer — add class="gold-shimmer" to the H1 if desired */ [class*="band-"] .feature-band h1.gold-shimmer{ background-size:200% 200%; animation: tsGoldShine 6s linear infinite; } @keyframes tsGoldShine{ 0%{ background-position:0% 0%; } 100%{ background-position:100% 100%; } } @media (prefers-reduced-motion:reduce){ [class*="band-"] .feature-band h1.gold-shimmer{ animation:none; } } /* Band-aware rim tweak (keeps contrast perfect) */ .band-parchment .feature-band h1{ -webkit-text-stroke:.8px #8b7a54; } .band-bronze .feature-band h1{ -webkit-text-stroke:.8px #f0f4fb; } .band-forest .feature-band h1{ -webkit-text-stroke:.8px #e7edf6; } .band-mist .feature-band h1{ -webkit-text-stroke:.8px #79808a; } .band-nightfall .feature-band h1{ -webkit-text-stroke:.8px #f2f7ff; } /* Fallback for browsers without background-clip:text */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ [class*="band-"] .feature-band h1{ color: var(--ts-gold-2); -webkit-text-stroke:0; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(255,214,92,.25); } } /* ---------------- H2/H3: Legend with luminance-aware variants ---------------- */ /* base (for light bands) = dark gradient text */ [class*="band-"] .feature-band h2, [class*="band-"] .feature-band h3{ margin: 0 0 .35rem; font-family: 'Legend','Playfair Display',serif !important; font-weight: 700; letter-spacing:.02em; line-height:1.1; color: transparent; background-image: linear-gradient(180deg, var(--ink-dark) 0%, var(--ink-mid) 62%, var(--ink-dim) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow: 0 1px 0 rgba(255,255,255,.04); /* tiny, not blurry */ } [class*="band-"] .feature-band h2{ font-size: clamp(1.8rem, 1.1rem + 2.0vw, 2.8rem); } [class*="band-"] .feature-band h3{ font-size: clamp(1.3rem, 0.9rem + 1.2vw, 1.8rem); } /* dark-band override (forest, nightfall, bronze) = light gradient text */ .band-forest .feature-band h2, .band-forest .feature-band h3, .band-nightfall .feature-band h2, .band-nightfall .feature-band h3, .band-bronze .feature-band h2, .band-bronze .feature-band h3{ background-image: linear-gradient(180deg, var(--ink-light) 0%, var(--ink-light-2) 70%, var(--ink-light-3) 100%); -webkit-text-stroke: .25px rgba(0,0,0,.25); text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 8px rgba(255,255,255,.10); } /* --------- Body/aux text (h4–h6, p, lists, figure, etc.) stays Playfair --------- */ [class*="band-"] .feature-band :is(h4,h5,h6,p,li,small,em,strong,blockquote,figcaption,label){ font-family: 'Playfair Display', serif !important; } /* raise body contrast slightly on dark bands */ .band-forest .feature-band :is(h4,p,li,small,figcaption), .band-nightfall .feature-band :is(h4,p,li,small,figcaption), .band-bronze .feature-band :is(h4,p,li,small,figcaption){ color: #f2f5f7; text-shadow: 0 1px 0 rgba(0,0,0,.45); } /* ========================================================= 17.0 CINEMATIC BUTTON SYSTEM (BAND-AWARE) ========================================================= */ /* Base */ [class*="band-"] .btn{ display:inline-block; cursor:pointer; user-select:none; font-family:'Playfair Display', serif; font-weight:800; letter-spacing:.02em; text-decoration:none; border-radius:14px; line-height:1; padding:.82rem 1.25rem; border:1px solid transparent; transition: transform .12s ease, filter .2s ease, box-shadow .2s ease; -webkit-font-smoothing: antialiased; text-rendering:optimizeLegibility; } [class*="band-"] .btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(0,234,255,.25), 0 0 0 1.5px #fff inset; } /* Hover lift */ [class*="band-"] .btn:hover { transform: translateY(-1px); } /* ---------- Section 1: PARChment ---------- */ .band-parchment .btn-accent{ color:#1a140a !important; background:linear-gradient(180deg,#fff9e8,#ffe6a8); border-color:rgba(100,76,30,.28); box-shadow:0 14px 34px rgba(100,76,30,.16); } .band-parchment .btn-secondary{ color:#1a1a1a !important; background:#fff; border-color:rgba(60,45,20,.34); box-shadow:0 10px 26px rgba(0,0,0,.10); } /* ---------- Section 2: BRONZE ---------- */ .band-bronze .btn-accent{ color:#2a1807 !important; background:#ffffff; border:none; box-shadow:0 16px 36px rgba(0,0,0,.22); } .band-bronze .btn-secondary{ color:#fff !important; background:transparent; border-color:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); } /* ---------- Section 3: FOREST ---------- */ .band-forest .btn-accent, .band-forest .btn-emerald{ /* support both names */ color:#062815 !important; background:linear-gradient(180deg,#80d993,#3ddc97); border-color:rgba(52,120,68,.50) !important; box-shadow:0 18px 46px rgba(50,140,90,.28), 0 0 22px rgba(61,220,151,.34); } /* ---------- Section 5: MIST ---------- */ .band-mist .btn-primary{ color:#0f1730 !important; background:#ffffff; border-color:rgba(120,130,150,.35) !important; box-shadow:0 16px 40px rgba(120,130,150,.25), 0 0 24px rgba(200,210,230,.25); } /* ---------- Section 6: NIGHTFALL ---------- */ .band-nightfall .btn-accent{ color:#04121f !important; background:#ffffff; border-color:rgba(160,200,255,.38) !important; box-shadow: 0 18px 48px rgba(90,150,220,.28), 0 0 26px rgba(160,200,255,.22); } /* Optional ghost variant for darker hero/footer areas */ .band-nightfall .btn-ghost{ color:#e9f2ff !important; background:transparent; border-color:rgba(220,235,255,.55); box-shadow:inset 0 0 0 1px rgba(220,235,255,.35); } /* ========================================================= 18.0 CINEMATIC UTILITIES ========================================================= */ /* 2.1 Underline sweep for headings (add class="cin-underline" on h2/h3) */ .cin-underline{ position:relative; padding-bottom:.4rem; } .cin-underline::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background: linear-gradient(90deg,#ffd65c,#ffc76a 55%,#00eaff 96%); transform:translateX(-15%); animation:tsSweep 7s linear infinite; } @keyframes tsSweep{ to{ transform:translateX(15%);} } @media (prefers-reduced-motion:reduce){ .cin-underline::after{ animation:none; } } /* 2.2 Image edge glow (add class="img-edgeglow" to ) */ .img-edgeglow{ position:relative; z-index:1; } .img-edgeglow::after{ content:""; position:absolute; inset:-10px; z-index:-1; border-radius:inherit; background: radial-gradient(50% 40% at 50% 55%, rgba(255,214,92,.18), transparent 70%); filter: blur(16px); } /* 2.3 Glass card for copy (add class="card-glass" to the summary div if you want) */ .card-glass{ background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.86)); border:1px solid rgba(160,160,160,.22); border-radius:14px; padding: clamp(18px, 2.1vw, 28px); box-shadow: 0 22px 50px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.35) inset; backdrop-filter: blur(2px); } /* 2.4 Band light sweep (add class="has-sweep" on the SECTION you want a moving sheen) */ [class*="band-"].has-sweep{ position:relative; } [class*="band-"].has-sweep::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 0%, rgba(255,214,92,.10) 40%, rgba(255,214,92,.18) 50%, rgba(255,214,92,.10) 60%, transparent 100%); mix-blend-mode: screen; opacity:.5; background-size:200% 100%; animation: tsHdrCopperSweep 12s linear infinite; } @keyframes tsHdrCopperSweep{ 0%{background-position:-100% 0} 100%{background-position:100% 0} } @media (prefers-reduced-motion:reduce){ [class*="band-"].has-sweep::after{ animation:none; opacity:.25; } } /* ========================================================= 19.0 CINEMATIC FOOTER (FULL WIDTH, SCOPED) ========================================================= */ /* HTML stays as provided: Fonts: Legend (h4), Playfair (body/links), Tabula not used here. */ .site-footer{ /* Full-bleed */ position: relative; isolation: isolate; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; /* Nightfall cinematic background with subtle copper/cyan glints */ --ink:#e9eef7; /* primary footer text */ --ink-dim:#cad3e2; /* muted text */ --gold:#ffd65c; --copper:#e9b14a; --cyan:#00eaff; background: radial-gradient(1200px 320px at 10% -15%, rgba(255,214,92,.22), transparent 60%), radial-gradient(1100px 300px at 90% 115%, rgba(0,234,255,.16), transparent 62%), linear-gradient(180deg, #0f1317 0%, #1a1f26 100%); color: var(--ink); } .site-footer::before{ /* Gentle animated copper sweep */ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 0%, rgba(255,214,92,.10) 40%, rgba(255,214,92,.18) 50%, rgba(255,214,92,.10) 60%, transparent 100%); mix-blend-mode: screen; opacity: .45; background-size:200% 100%; animation: tsFooterSweep 14s linear infinite; } @keyframes tsFooterSweep{ 0%{background-position:-100% 0} 100%{background-position:100% 0} } @media (prefers-reduced-motion:reduce){ .site-footer::before{ animation:none; opacity:.25; } } /* Inner container */ .site-footer .footer-inner{ max-width: var(--ts-content-max, 1280px); margin-inline: auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 3.2vw, 40px); box-sizing: border-box; } /* Grid */ .site-footer .footer-grid{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); align-items: start; } /* Columns */ .site-footer .footer-column img[alt*="Logo"]{ max-height: 64px; height: auto; width: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); margin-bottom: .6rem; } .site-footer .footer-tagline{ margin: .25rem 0 0; font-family: "Playfair Display", serif; font-weight: 600; font-size: .98rem; letter-spacing: .02em; color: var(--ink-dim); } /* Headings (Legend, transitional black-gray on dark band) */ .site-footer .footer-column h4{ margin: 0 0 .45rem; font-family: "Legend", serif; font-weight: 800; letter-spacing: .04em; font-size: clamp(1rem, .92rem + .35vw, 1.12rem); color: #f3f7ff; text-transform: uppercase; position: relative; display: inline-block; padding-bottom: .25rem; } .site-footer .footer-column h4::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--gold), var(--copper) 50%, var(--cyan) 95%); opacity:.85; } /* Links */ .site-footer .footer-links{ display: grid; gap: .3rem; } .site-footer .footer-links a{ font-family: "Playfair Display", serif; font-weight: 600; text-decoration: none; color: var(--ink-dim); transition: color .18s ease, text-shadow .25s ease, transform .12s ease; will-change: color, text-shadow, transform; outline: none; } .site-footer .footer-links a:hover, .site-footer .footer-links a:focus{ color: #fff; text-shadow: 0 0 8px rgba(0,234,255,.28), 0 0 8px rgba(255,214,92,.22); transform: translateY(-1px); } .site-footer .footer-links a:focus-visible{ box-shadow: 0 0 0 2px rgba(0,234,255,.35), 0 0 0 4px rgba(255,214,92,.25); border-radius: 8px; } /* Socials (image sprites provided) */ .site-footer .social-icons{ display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; } .site-footer .social-icons img{ display: block; width: 56px; height: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)) brightness(1.05) contrast(1.02); transition: transform .12s ease, filter .18s ease; } .site-footer .social-icons img:hover{ transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 12px 32px rgba(0,0,0,.55)) brightness(1.1); } /* Bottom line */ .site-footer .footer-bottom{ margin-top: clamp(18px, 3vw, 28px); padding-top: clamp(10px, 1.8vw, 16px); border-top: 1px solid rgba(255,255,255,.08); text-align: center; } .site-footer .footer-bottom p{ margin: 0; font-family: "Playfair Display", serif; font-weight: 600; font-size: .92rem; color: var(--ink-dim); } /* Responsive */ @media (max-width: 1199.98px){ .site-footer .footer-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 767.98px){ .site-footer .footer-grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px){ .site-footer .footer-grid{ grid-template-columns: 1fr; } .site-footer .social-icons img{ width: 52px; } } /* ====================================================== 20.0 COMPONENT + FEATURE SEAM FIX — ARTICLE/TOMES ===================================================== */ /* Define the correct tone (World Guide parchment) */ :root { --ts-parchment-guide: #e8e1d1; } /* Match feature background to the same tone */ body.view-article.item-139 .feature-band.band-stone.fullwidth, body.view-article.item-139 #t4-section-1, body.view-article.item-139 .band-parchment, body.view-article.item-139 #t4-main-body, body.view-article.item-139 #t4-main-body .t4-section-inner, body.view-article.item-139 #t4-main-body .t4-row, body.view-article.item-139 #t4-main-body .t4-col.component { background-color: var(--ts-parchment-guide) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Remove micro-gap below the feature section */ body.view-article.item-139 .feature-band.band-stone.fullwidth { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; } /* Footer continuity */ body.view-article.item-139 #t4-footer, body.view-article.item-139 #t4-footer .t4-section-inner, body.view-article.item-139 #t4-footer .section-inner { background-color: var(--ts-parchment-guide) !important; margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } /* Hide empty Joomla components */ body.view-article.item-139 #system-message-container:empty, body.view-article.item-139 .article-body:empty { display: none !important; } /* Keep body visually unified on tall viewports */ body.view-article.item-139 { background-color: var(--ts-parchment-guide) !important; margin: 0 !important; overflow-x: clip; } @supports not (overflow-x: clip){ body.view-article.item-139{ overflow-x:hidden; } } /* ====================================================== 21.0 FINAL PARCHMENT + NIGHTFALL CONTINUITY (item-139) ===================================================== */ /* Feature & section continuity — remove all interior gaps */ body.view-article.item-139 #t4-header, body.view-article.item-139 #t4-header .t4-section-inner, body.view-article.item-139 #t4-header .t4-mod-wrap, body.view-article.item-139 #t4-section-1, body.view-article.item-139 #t4-section-1 .t4-mod-wrap, body.view-article.item-139 #t4-section-1 .section-inner, body.view-article.item-139 .feature-band.band-stone.fullwidth { margin: 0 !important; padding: 0 !important; border: 0 !important; background-color: #e8e1d1 !important; /* World Guide parchment tone */ } /* Component region continues parchment tone */ body.view-article.item-139 #t4-main-body, body.view-article.item-139 #t4-main-body .t4-section-inner, body.view-article.item-139 #t4-main-body .t4-row, body.view-article.item-139 #t4-main-body .t4-col.component { background-color: #e8e1d1 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* Seamless handoff to footer — no top seam */ body.view-article.item-139 #t4-main-body + #t4-footer, body.view-article.item-139 #t4-footer, body.view-article.item-139 #t4-footer .t4-section-inner, body.view-article.item-139 #t4-footer .t4-mod-wrap, body.view-article.item-139 #t4-footer .section-inner { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; background-color: #0f1317 !important; /* restored nightfall tone */ } /* Footer container sync — ensure no white bands inside footer */ body.view-article.item-139 footer.site-footer, body.view-article.item-139 .footer-inner, body.view-article.item-139 .footer-bottom { background-color: #0f1317 !important; color: #e6e6e6 !important; } /* Full page background: parchment above, nightfall below */ body.view-article.item-139 { background: linear-gradient(to bottom, #e8e1d1 0%, #0f1317 85%, #0f1317 100%) !important; margin: 0 !important; overflow-x: clip; } @supports not (overflow-x: clip){ body.view-article.item-139{ overflow-x:hidden; } } /* ===================================================== 22.0 FRONT PAGE GAP CORRECTION — SAFE BUILD Target: home (view-featured) ==================================================== */ /* Hide empty featured container */ .view-featured .blog-featured:empty, .view-featured .view-masonry:empty { display: none !important; } /* Ensure main body does not inject vertical space */ #t4-main-body { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Maintain dark footer region */ #t4-footer, #t4-footer .t4-section-inner, .site-footer { background-color: #0f1317 !important; } /* Maintain section continuity */ #t4-section-1, #t4-section-2, #t4-section-3, #t4-section-4 { margin: 0 !important; padding: 0 !important; } /* Global safety (avoid top or bottom seams) */ html, body { margin: 0 !important; padding: 0 !important; background-color: #0f1317 !important; } /* ========================================= 23.0 LORE GRID (feature-grid-4 • band-stone) Baseline card system used as the site-wide stone-card model ========================================*/ /* GRID LAYOUT */ .feature-band.band-stone .feature-grid-4 { --lore-card-h: clamp(340px, 34vw, 480px); display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; } .feature-band.band-stone .feature-grid-4 .feature-card { grid-column: span 3; } /* RESPONSIVE */ @media (max-width: 991.98px) { .feature-band.band-stone .feature-grid-4 { grid-template-columns: repeat(6, 1fr); --lore-card-h: clamp(280px, 50vw, 420px); } .feature-band.band-stone .feature-grid-4 .feature-card { grid-column: 1 / -1; } } /* CARD BASE */ .feature-band.band-stone .feature-grid-4 .feature-card { display: flex; flex-direction: column; height: var(--lore-card-h); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)); border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 48px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.35) inset; transition: transform .18s ease, box-shadow .22s ease, filter .2s ease; } .feature-band.band-stone .feature-grid-4 .feature-card:hover { transform: translateY(-2px); box-shadow: 0 28px 64px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.45) inset; } /* IMAGE */ .feature-band.band-stone .feature-grid-4 .feature-image-link, .feature-band.band-stone .feature-grid-4 .feature-card > a:first-child { position: relative; display: block; overflow: hidden; flex: 0 0 calc(var(--lore-card-h) * 0.56); min-height: 160px; background: #000; } .feature-band.band-stone .feature-grid-4 .feature-image-link img, .feature-band.band-stone .feature-grid-4 .feature-card > a:first-child > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.02); transition: transform .35s ease, filter .25s ease; } .feature-band.band-stone .feature-grid-4 .feature-card:hover .feature-image-link img, .feature-band.band-stone .feature-grid-4 .feature-card:hover > a:first-child > img { transform: scale(1.06); filter: saturate(1.08); } /* SUMMARY */ .feature-band.band-stone .feature-grid-4 .feature-summary { flex: 1 1 auto; padding: clamp(14px, 1.8vw, 20px); overflow: hidden; } .feature-band.band-stone .feature-grid-4 .feature-summary h4, .feature-band.band-stone .feature-grid-4 .feature-summary h2 { margin: 0 0 .35rem; font-family: 'Legend','Legend-Regular',serif; font-weight: 700; letter-spacing: .01em; color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.35); font-size: clamp(1.05rem, .96rem + .5vw, 1.35rem); } .feature-band.band-stone .feature-grid-4 .feature-summary p, .feature-band.band-stone .feature-grid-4 .feature-summary h4 + p { margin: 0; font-family: 'Playfair Display',serif; color: #333; line-height: 1.6; } /* ACCESSIBILITY FOCUS */ .feature-band.band-stone .feature-grid-4 .feature-card:focus-within { outline: 2px solid #ffd65c; outline-offset: 2px; } .feature-band.band-stone .feature-grid-4 .feature-image-link:focus-visible, .feature-band.band-stone .feature-grid-4 .feature-card > a:first-child:focus-visible { outline: none; } 24.0 FEATURE GRID — 2 + 1 (NORMALIZED TO STONE CARD SYSTEM) Uses the same card shell and dimensions as .feature-grid-4. No cinematic tall-card logic. ======================================================== */ .feature-band.band-stone .feature-grid-2plus1 { --tomes-card-h: var(--lore-card-h, clamp(340px, 34vw, 480px)); display: grid; gap: clamp(14px, 2vw, 22px); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; } /* three equal cards across, same card width language as site cards */ .feature-band.band-stone .feature-grid-2plus1 > .feature-card { grid-column: span 4; display: flex; flex-direction: column; height: var(--tomes-card-h); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)); border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 48px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.35) inset; transition: transform .18s ease, box-shadow .22s ease, filter .2s ease; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card:hover { transform: translateY(-2px); box-shadow: 0 28px 64px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.45) inset; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card > a:first-child, .feature-band.band-stone .feature-grid-2plus1 .feature-image-link { position: relative; display: block; overflow: hidden; flex: 0 0 calc(var(--tomes-card-h) * 0.56); min-height: 160px; background: #000; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card > a:first-child > img, .feature-band.band-stone .feature-grid-2plus1 .feature-image-link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.02); transition: transform .35s ease, filter .25s ease; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card:hover > a:first-child > img, .feature-band.band-stone .feature-grid-2plus1 > .feature-card:hover .feature-image-link > img { transform: scale(1.06); filter: saturate(1.08); } .feature-band.band-stone .feature-grid-2plus1 > .feature-card .feature-summary { flex: 1 1 auto; padding: clamp(14px, 1.8vw, 20px); overflow: hidden; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card .feature-summary h4, .feature-band.band-stone .feature-grid-2plus1 > .feature-card .feature-summary h2 { margin: 0 0 .35rem; font-family: 'Legend','Legend-Regular',serif; font-weight: 700; letter-spacing: .01em; color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.35); font-size: clamp(1.05rem, .96rem + .5vw, 1.35rem); } .feature-band.band-stone .feature-grid-2plus1 > .feature-card .feature-summary p, .feature-band.band-stone .feature-grid-2plus1 > .feature-card .feature-summary h4 + p { margin: 0; font-family: 'Playfair Display',serif; color: #333; line-height: 1.6; } .feature-band.band-stone .feature-grid-2plus1 > .feature-card > br { display: none; } @media (max-width: 991.98px) { .feature-band.band-stone .feature-grid-2plus1 { grid-template-columns: repeat(6, 1fr); --tomes-card-h: clamp(280px, 50vw, 420px); } .feature-band.band-stone .feature-grid-2plus1 > .feature-card { grid-column: 1 / -1; } } 25.0 FEATURE GRID — WORLD GUIDE (REFINED THEME) ======================================================== */ .feature-grid-world { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; --world-card-h: clamp(360px, 36vw, 480px); } /* 3 cards per row */ .feature-grid-world .feature-card { grid-column: span 6 !important; display: flex; flex-direction: column; justify-content: space-between; height: var(--world-card-h); background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(245,241,232,0.93)); border: 1px solid rgba(0,0,0,0.05); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,255,255,0.35) inset; transition: transform .3s ease, box-shadow .3s ease; } .feature-grid-world .feature-card:hover { transform: translateY(-4px); box-shadow: 0 32px 56px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.45) inset; } /* --- IMAGE --- */ .feature-grid-world .feature-image { flex: 0 0 55%; overflow: hidden; position: relative; } .feature-grid-world .feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.19,1,0.22,1), filter .4s ease; filter: brightness(0.98) contrast(1.05) saturate(1.1); } .feature-grid-world .feature-card:hover .feature-image img { transform: scale(1.05); filter: brightness(1.05) contrast(1.15) saturate(1.2); } /* --- SUMMARY --- */ .feature-grid-world .feature-summary { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 24px); } .feature-grid-world .feature-summary h4 { font-family: 'Legend','Legend-Regular',serif; font-weight: 700; color: #111; margin: 0 0 .4rem; text-shadow: 0 1px 0 rgba(255,255,255,0.3); font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); } .feature-grid-world .feature-summary p { font-family: 'Playfair Display',serif; color: #333; line-height: 1.6; flex-grow: 1; margin-bottom: 1rem; } /* --- BUTTONS — MATCH INDEX PAGE STYLE --- */ .feature-grid-world .btn, .feature-grid-world .btn-accent, .feature-grid-world .btn-secondary { align-self: center; display: inline-block; background-color: #ffd65c !important; /* same as index gold accent */ color: #1a1203 !important; font-family: 'Tabula', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border: none; border-radius: 4px; padding: 0.55em 1.6em; font-size: 0.95rem; line-height: 1.2; transition: background-color .25s ease, transform .2s ease, box-shadow .25s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.25); } .feature-grid-world .btn:hover, .feature-grid-world .btn:focus-visible { background-color: #ffeb9b !important; /* lighter hover tone */ color: #000 !important; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,0.3); } /* Ensure even alignment across uneven text heights */ .feature-grid-world .feature-summary { display: flex; flex-direction: column; justify-content: space-between; } .feature-grid-world .feature-summary p { flex-grow: 1; margin-bottom: 1.2rem; } /* === Feature Header Typography Fix === */ .feature-header h1 { font-family: 'Tabula', 'Playfair Display', serif !important; font-weight: 700; color: #1a1203; text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 1px 0 rgba(255,255,255,0.3); margin-bottom: 0.3em; } .feature-header p { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #2a2a2a; } /* --- RESPONSIVE STACK --- */ @media (max-width: 991.98px) { .feature-grid-world { grid-template-columns: repeat(6, 1fr); } .feature-grid-world .feature-card { grid-column: span 6 !important; height: clamp(320px, 54vw, 460px); border-radius: 14px; } } /* ===================================================== 26.0 FEATURE GRID — 2×2 NORMALIZED TO 4-UP CARD FORMAT Scope: .feature-band.band-stone.cinematic only Four cards in one row on desktop, using the same stone-card shell. ==================================================== */ .feature-band.band-stone.cinematic { position: relative; background: radial-gradient(circle at 50% 25%, rgba(250,247,239,0.96), #f5f1e8 85%); overflow: hidden; isolation: isolate; } .feature-band.band-stone.cinematic::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.5) 0%, transparent 65%); opacity: 0.55; mix-blend-mode: overlay; z-index: 0; animation: lightSweep 20s ease-in-out infinite alternate; } @keyframes lightSweep { 0% { transform: translate(-10%, -5%) scale(1); opacity: 0.4; } 50% { transform: translate(10%, 5%) scale(1.05); opacity: 0.7; } 100% { transform: translate(-8%, -3%) scale(1); opacity: 0.4; } } .feature-band.band-stone.cinematic .feature-grid-2x2 { --bestiary-card-h: var(--lore-card-h, clamp(340px, 34vw, 480px)); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); position: relative; z-index: 1; align-items: stretch; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card { grid-column: span 3; display: flex; flex-direction: column; height: var(--bestiary-card-h); background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)); border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; box-shadow: 0 22px 48px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.35) inset; transition: transform .18s ease, box-shadow .22s ease, filter .2s ease; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card:hover { transform: translateY(-2px); box-shadow: 0 28px 64px rgba(0,0,0,.16), 0 0 0 1px rgba(255,255,255,.45) inset; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card > a:first-child, .feature-band.band-stone.cinematic .feature-grid-2x2 .feature-image-link { position: relative; display: block; overflow: hidden; flex: 0 0 calc(var(--bestiary-card-h) * 0.56); min-height: 160px; background: #000; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card > a:first-child > img, .feature-band.band-stone.cinematic .feature-grid-2x2 .feature-image-link > img, .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.02); transition: transform .35s ease, filter .25s ease; filter: none; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card:hover > a:first-child > img, .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card:hover .feature-image-link > img { transform: scale(1.06); filter: saturate(1.08); } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card .feature-summary { flex: 1 1 auto; padding: clamp(14px, 1.8vw, 20px); overflow: hidden; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card .feature-summary h4, .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card .feature-summary h2 { margin: 0 0 .35rem; font-family: 'Legend','Legend-Regular',serif; font-weight: 700; letter-spacing: .01em; color: #111; text-shadow: 0 1px 0 rgba(255,255,255,.35); font-size: clamp(1.05rem, .96rem + .5vw, 1.35rem); } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card .feature-summary p, .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card .feature-summary h4 + p { margin: 0; font-family: 'Playfair Display',serif; color: #333; line-height: 1.6; } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card > br { display: none; } @media (max-width: 991.98px) { .feature-band.band-stone.cinematic .feature-grid-2x2 { grid-template-columns: repeat(6, 1fr); --bestiary-card-h: clamp(280px, 50vw, 420px); } .feature-band.band-stone.cinematic .feature-grid-2x2 > .feature-card { grid-column: 1 / -1; } } 27.1 FORCE PARCHMENT BACKGROUND OVERRIDE (CINEMATIC) ========================================================= */ /* === FORCE PARCMENT BACKGROUND OVERRIDE === */ .feature-band.band-stone.cinematic.fullwidth { background: radial-gradient(circle at 50% 20%, #faf7ef 0%, #f5f1e8 85%) !important; background-color: #f5f1e8 !important; color: #1a1405; position: relative; z-index: 0; } /* Remove any default Helix/JoomlArt gray base */ .feature-band.band-stone.cinematic.fullwidth, .feature-band.band-stone.cinematic.fullwidth .sppb-section, .feature-band.band-stone.cinematic.fullwidth .t4-section { background-image: none !important; background-color: #f5f1e8 !important; } /* Ensure child cards sit above vignette */ .feature-band.band-stone.cinematic.fullwidth .feature-grid-4 { position: relative; z-index: 2; } /* ========================================================= 28.0 ARTICLE PARCHMENT SEPARATOR (TOMES/BESTIARY) ========================================================= */ /* Separation band between article parchment and page background */ html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment::after { /* keep existing fiber overlay intact */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,250,230,0.42) 0%, rgba(0,0,0,0.06) 85%), radial-gradient(rgba(255,255,255,0.07) 0.5px, transparent 0.5px), radial-gradient(rgba(0,0,0,0.05) 0.5px, transparent 0.5px); background-size: 100% 100%, 2px 2px, 3px 3px; mix-blend-mode: multiply; opacity: .9; transition: opacity 1s ease; } /* NEW: bottom margin gap below parchment using section background */ html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment::after { box-shadow: 0 60px 0 0 var(--t4-section-bg, #f8f4e8); /* pulls your section bg color */ } /* ensures actual spacing is visible (not just a visual overlay) */ html body.com_content.view-article #t4-main-body .t4-col.component .article-parchment { margin-top: 20px; /* physical gap below parchment */ margin-bottom: 60px; /* physical gap below parchment */ } /* ========================================================= TS AT A GLANCE BAND ========================================================= */ .ts-glance-band{ position:relative; padding:clamp(40px,6vw,78px) 0; background: radial-gradient(900px 320px at 15% 0%, rgba(214,184,106,.16), transparent 60%), radial-gradient(900px 320px at 85% 100%, rgba(102,139,122,.12), transparent 60%), linear-gradient(180deg, rgba(22,18,14,.96), rgba(39,31,24,.94)); overflow:hidden; } .ts-glance-band::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size:36px 36px; mask-image:linear-gradient(180deg, rgba(0,0,0,.65), transparent 100%); opacity:.22; } .ts-glance-band .container-responsive{ position:relative; z-index:1; width:min(1280px, calc(100% - 32px)); margin-inline:auto; padding-inline:clamp(18px,2vw,28px); } .ts-glance-band .feature-header{ margin:0 0 clamp(24px,3vw,38px); } .ts-glance-band .feature-header.centered{ text-align:center; } .ts-glance-band .feature-header h2{ margin:0 0 .6rem; } .ts-glance-band .feature-header h4{ margin:0 auto; max-width:70ch; } .ts-glance-grid{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:clamp(14px,1.8vw,22px); align-items:stretch; } .ts-glance-card{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.55rem; min-height:170px; padding:clamp(18px,2vw,24px); text-align:center; text-decoration:none; color:inherit; border-radius:18px; background: linear-gradient(180deg, rgba(255,248,235,.96), rgba(233,223,204,.92)); border:1px solid rgba(70,52,31,.16); box-shadow: 0 18px 44px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.32) inset; transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease; } .ts-glance-card:hover{ transform:translateY(-3px); border-color:rgba(164,121,53,.34); box-shadow: 0 26px 56px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.38) inset; } .ts-glance-value{ display:block; font-family:'Cinzel','Trajan Pro','Georgia',serif; font-size:clamp(1.9rem,1.55rem + 1vw,2.8rem); font-weight:700; line-height:1; color:#5f4421; letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.55); } .ts-glance-label{ display:block; font-family:'Cinzel','Georgia',serif; font-size:clamp(.95rem,.9rem + .22vw,1.08rem); font-weight:700; line-height:1.35; color:#1f1a15; max-width:14ch; } @media (max-width: 1199.98px){ .ts-glance-card{ grid-column:span 4; } } @media (max-width: 767.98px){ .ts-glance-grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); } .ts-glance-card{ grid-column:span 3; min-height:150px; } } @media (max-width: 575.98px){ .ts-glance-card{ grid-column:1 / -1; } } /* ========================================================= TS FRONT PAGE ATTRACTIONS — CONTRAST-SAFE RECAST Single replacement block ========================================================= */ /* ----------------------------------------- SAFER HOME PAGE WRAPPER RESET ----------------------------------------- */ body.view-featured #t4-main-body .t4-mod-wrap{ box-shadow:none !important; } body.view-featured #t4-main-body .t4-mod-wrap.top-large{ padding-top:0 !important; } body.view-featured #t4-main-body .t4-mod-wrap.bottom-large{ padding-bottom:0 !important; } body.view-featured #t4-main-body .t4-mod-wrap > .section-inner, body.view-featured #t4-main-body .t4-mod-wrap > .section-inner > .section-ct, body.view-featured #t4-main-body .t4-mod-wrap > .section-inner > .section-ct > .custom{ margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; } /* do NOT globally strip all parent band backgrounds anymore */ body.view-featured .band-parchment, body.view-featured .band-bronze, body.view-featured .band-forest, body.view-featured .band-mist, body.view-featured .band-nightfall{ box-shadow:none !important; } /* ----------------------------------------- BASE SECTION SPACING / TYPOGRAPHY ----------------------------------------- */ .ts-glance-band, .ts-path-band, .ts-featured-band, .ts-map-teaser, .ts-triad-band, .ts-latest-band, .ts-value-band, .ts-gallery-band, .ts-prophecy-band, .ts-start-band{ position:relative; padding:clamp(38px,5vw,72px) 0; } .ts-glance-band .container-responsive, .ts-path-band .container-responsive, .ts-featured-band .container-responsive, .ts-map-teaser .container-responsive, .ts-triad-band .container-responsive, .ts-latest-band .container-responsive, .ts-value-band .container-responsive, .ts-gallery-band .container-responsive, .ts-prophecy-band .container-responsive, .ts-start-band .container-responsive{ width:min(1280px, calc(100% - 32px)); margin-inline:auto; padding-inline:clamp(18px,2vw,28px); } .ts-glance-band .feature-header, .ts-path-band .feature-header, .ts-featured-band .feature-header, .ts-map-teaser .feature-header, .ts-triad-band .feature-header, .ts-latest-band .feature-header, .ts-value-band .feature-header, .ts-gallery-band .feature-header, .ts-prophecy-band .feature-header, .ts-start-band .feature-header{ margin:0 0 clamp(18px,2vw,28px); } .ts-glance-band .feature-header h2, .ts-path-band .feature-header h2, .ts-featured-band .feature-header h2, .ts-map-teaser .feature-header h2, .ts-triad-band .feature-header h2, .ts-latest-band .feature-header h2, .ts-value-band .feature-header h2, .ts-gallery-band .feature-header h2, .ts-prophecy-band .feature-header h2, .ts-start-band .feature-header h2{ margin:0 0 .6rem; line-height:1.15; } .ts-glance-band .feature-header h4, .ts-path-band .feature-header h4, .ts-featured-band .feature-header h4, .ts-map-teaser .feature-header h4, .ts-triad-band .feature-header h4, .ts-latest-band .feature-header h4, .ts-value-band .feature-header h4, .ts-gallery-band .feature-header h4, .ts-prophecy-band .feature-header h4, .ts-start-band .feature-header h4{ margin:0; line-height:1.5; max-width:68ch; } .centered{ text-align:center; } .centered .feature-header h4{ margin-inline:auto; } /* ----------------------------------------- SECTION-SAFE CONTRAST TOKENS ----------------------------------------- */ /* dark cinematic bands */ .ts-path-band, .ts-triad-band, .ts-prophecy-band{ color:#f3eadb; } .ts-path-band h2, .ts-path-band h3, .ts-path-band h4, .ts-triad-band h2, .ts-triad-band h3, .ts-triad-band h4, .ts-prophecy-band h2, .ts-prophecy-band h3, .ts-prophecy-band h4, .ts-prophecy-band p{ color:#f3eadb; } .ts-path-band a:not(.btn), .ts-triad-band a:not(.btn), .ts-prophecy-band a:not(.btn){ color:#f7d98a; } /* light editorial bands */ .ts-featured-band, .ts-latest-band, .ts-start-band, .ts-value-band{ color:#1d1812; } .ts-featured-band h2, .ts-featured-band h3, .ts-featured-band h4, .ts-latest-band h2, .ts-latest-band h3, .ts-latest-band h4, .ts-start-band h2, .ts-start-band h3, .ts-start-band h4, .ts-value-band h2, .ts-value-band h3, .ts-value-band h4{ color:#1d1812; } .ts-featured-band p, .ts-latest-band p, .ts-start-band p, .ts-value-band p{ color:#3a3025; } .ts-featured-band a:not(.btn), .ts-latest-band a:not(.btn), .ts-start-band a:not(.btn), .ts-value-band a:not(.btn){ color:#6b4b26; } /* gallery is dark, not light */ .ts-gallery-band{ color:#f3eadb; } .ts-gallery-band h2, .ts-gallery-band h3, .ts-gallery-band h4{ color:#f3eadb; } .ts-gallery-band p{ color:#ddd1bf; } .ts-gallery-band a:not(.btn){ color:#f7d98a; } /* ----------------------------------------- SECTION SURFACES ----------------------------------------- */ body.view-featured .ts-glance-band{ background: radial-gradient(900px 320px at 15% 0%, rgba(214,184,106,.16), transparent 60%), radial-gradient(900px 320px at 85% 100%, rgba(102,139,122,.12), transparent 60%), linear-gradient(180deg, rgba(22,18,14,.96), rgba(39,31,24,.94)); } body.view-featured .ts-path-band{ background: radial-gradient(900px 360px at 50% 0%, rgba(214,184,106,.18), transparent 60%), linear-gradient(180deg, rgba(18,14,11,.96), rgba(33,24,18,.94)); } body.view-featured .ts-featured-band{ background: radial-gradient(800px 300px at 12% 18%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, rgba(245,238,226,.98), rgba(228,216,195,.94)); } body.view-featured .ts-triad-band{ background: linear-gradient(180deg, rgba(21,20,25,.97), rgba(33,29,24,.95)); } body.view-featured .ts-latest-band{ background: linear-gradient(180deg, rgba(248,243,234,.96), rgba(236,227,210,.94)); } body.view-featured .ts-start-band{ background: linear-gradient(180deg, rgba(239,232,221,.94), rgba(223,211,190,.90)); } body.view-featured .ts-value-band{ background: linear-gradient(180deg, rgba(247,240,229,.96), rgba(233,223,202,.92)); } body.view-featured .ts-gallery-band{ background: linear-gradient(180deg, rgba(36,30,25,.98), rgba(26,22,18,.96)); } /* ----------------------------------------- AT A GLANCE — CONTRAST FIX ----------------------------------------- */ .ts-glance-band .feature-header, .ts-glance-band .feature-header.centered{ text-align:center; } .ts-glance-band .feature-header h2{ color:#f3eadb !important; text-shadow:0 1px 0 rgba(0,0,0,.35); } .ts-glance-band .feature-header h4{ color:#e4d7c3 !important; text-shadow:0 1px 0 rgba(0,0,0,.28); } /* ----------------------------------------- CHOOSE YOUR PATH — PORTAL DOORS ----------------------------------------- */ .ts-path-hero{ max-width:760px; margin:0 auto clamp(24px,3vw,38px); text-align:center; } .ts-path-portal-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,24px); } .ts-path-portal{ grid-column:span 4; display:flex; flex-direction:column; justify-content:flex-end; min-height:380px; padding:30px; border-radius:24px; text-decoration:none; color:#fff; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.60)), linear-gradient(135deg, rgba(104,78,45,.95), rgba(31,25,20,.95)); box-shadow:0 24px 54px rgba(0,0,0,.22); overflow:hidden; transition:transform .18s ease, box-shadow .22s ease; } .ts-path-portal:hover{ transform:translateY(-4px); box-shadow:0 30px 68px rgba(0,0,0,.28); } .ts-path-portal .ts-path-kicker, .ts-path-portal h3, .ts-path-portal p{ color:#fff; } .ts-path-kicker{ display:block; margin-bottom:.7rem; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; opacity:.88; } .ts-path-portal h3{ margin:0 0 .6rem; } .ts-path-portal p{ margin:0; line-height:1.55; max-width:24ch; } /* ----------------------------------------- FEATURED — ASYMMETRIC EDITORIAL ----------------------------------------- */ .ts-featured-layout{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,24px); align-items:stretch; } .ts-featured-lead{ grid-column:span 7; padding:28px; border-radius:22px; background:linear-gradient(180deg, rgba(255,251,244,.98), rgba(236,226,207,.94)); border:1px solid rgba(70,52,31,.14); box-shadow:0 20px 48px rgba(0,0,0,.14); } .ts-featured-side{ grid-column:span 5; display:grid; gap:clamp(16px,2vw,22px); } .ts-featured-mini{ padding:24px; border-radius:18px; background:linear-gradient(180deg, rgba(255,248,235,.98), rgba(234,224,205,.92)); border:1px solid rgba(70,52,31,.14); box-shadow:0 18px 44px rgba(0,0,0,.12); } .ts-featured-type{ display:block; margin-bottom:.7rem; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:#6b5230; } .ts-featured-lead h3, .ts-featured-mini h3{ margin:0 0 .75rem; color:#1d1812; } .ts-featured-lead p, .ts-featured-mini p{ margin:0 0 1rem; line-height:1.6; color:#3a3025; } /* Featured buttons — visibility fix */ .ts-featured-band .btn, .ts-featured-band a.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.75rem 1.1rem; text-decoration:none; border-radius:12px; border:1px solid rgba(70,52,31,.18); box-shadow:0 8px 18px rgba(0,0,0,.10); opacity:1 !important; visibility:visible !important; } .ts-featured-band .btn.btn-emerald{ background:linear-gradient(180deg, #2f6d57, #245344) !important; color:#f7f3ea !important; border-color:rgba(24,65,52,.55) !important; } .ts-featured-band .btn.btn-emerald:hover, .ts-featured-band .btn.btn-emerald:focus{ background:linear-gradient(180deg, #387f66, #2a6050) !important; color:#ffffff !important; } .ts-featured-band .btn.btn-secondary{ background:linear-gradient(180deg, #7a5a33, #5f4426) !important; color:#f7f3ea !important; border-color:rgba(70,52,31,.45) !important; } .ts-featured-band .btn.btn-accent{ background:linear-gradient(180deg, #7a2f2f, #5e2323) !important; color:#f7f3ea !important; border-color:rgba(84,24,24,.5) !important; } /* ----------------------------------------- START HERE — TIMELINE ----------------------------------------- */ .ts-start-shell{ max-width:1100px; margin-inline:auto; } .ts-start-path{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,24px); align-items:start; position:relative; } .ts-start-node{ grid-column:span 4; padding:22px 24px; border-radius:18px; background:linear-gradient(180deg, rgba(255,249,239,.96), rgba(230,219,200,.92)); border:1px solid rgba(70,52,31,.12); box-shadow:0 16px 36px rgba(0,0,0,.12); } .ts-step-number{ display:block; margin-bottom:.75rem; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; color:#7a6040; } .ts-start-copy h3{ margin:0 0 .65rem; color:#1d1812; } .ts-start-copy a{ color:#6b4b26; font-weight:700; text-decoration:none; } /* ----------------------------------------- TRIAD — MYTHIC TRIPTYCH ----------------------------------------- */ .ts-triad-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,24px); } .ts-triad-card{ grid-column:span 4; padding:30px; border-radius:22px; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); box-shadow:0 18px 40px rgba(0,0,0,.20); } .ts-triad-card h3{ margin:0 0 .65rem; color:#f3eadb; } .ts-triad-card p{ margin:0; color:#ddd1bf; } /* ----------------------------------------- LATEST — FEED ROWS ----------------------------------------- */ .ts-latest-shell{ max-width:1100px; margin-inline:auto; } .ts-latest-feed{ display:grid; gap:12px; } .ts-latest-row{ display:grid; grid-template-columns:180px 1fr auto; align-items:center; gap:18px; padding:18px 20px; border-radius:16px; background:linear-gradient(180deg, rgba(255,250,244,.98), rgba(236,227,210,.94)); border:1px solid rgba(70,52,31,.10); box-shadow:0 10px 26px rgba(0,0,0,.08); } .ts-latest-type{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:#7b6040; } .ts-latest-row h3{ margin:0; color:#1d1812; font-size:1.05rem; } .ts-latest-row a{ color:#6b4b26; font-weight:700; text-decoration:none; white-space:nowrap; } /* ----------------------------------------- VALUE BAND ----------------------------------------- */ .ts-value-grid{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:clamp(12px,1.6vw,18px); } .ts-value-item{ grid-column:span 2; display:flex; align-items:center; justify-content:center; min-height:112px; padding:18px; text-align:center; border-radius:16px; background:linear-gradient(180deg, rgba(255,248,235,.98), rgba(233,223,204,.92)); border:1px solid rgba(70,52,31,.10); box-shadow:0 14px 34px rgba(0,0,0,.10); color:#1d1812; font-weight:700; } /* ----------------------------------------- GALLERY ----------------------------------------- */ .ts-gallery-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; } .ts-gallery-strip a{ display:block; border-radius:16px; overflow:hidden; box-shadow:0 16px 38px rgba(0,0,0,.18); } .ts-gallery-strip img{ display:block; width:100%; aspect-ratio:4 / 3; object-fit:cover; } /* ----------------------------------------- PROPHECY / EPIGRAPH — CONTRAST FIX ----------------------------------------- */ .ts-prophecy-inner, .ts-epigraph-inner{ max-width:880px; margin-inline:auto; text-align:center; padding:clamp(24px,4vw,40px); border-radius:20px; background:linear-gradient(180deg, rgba(27,23,19,.86), rgba(20,17,14,.82)); box-shadow:0 18px 42px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.06) inset; color:#f3eadb !important; } .ts-prophecy-quote, .ts-epigraph .epigraph{ margin:0 0 .8rem; font-size:clamp(1.1rem,1rem + .4vw,1.4rem); line-height:1.7; color:#f3eadb !important; text-shadow:0 1px 0 rgba(0,0,0,.32); } .ts-prophecy-source, .ts-epigraph .source{ margin:0; color:#ddd1bf !important; opacity:.95; } .ts-epigraph a, .ts-prophecy-band a{ color:#f7d98a !important; } /* ----------------------------------------- RESPONSIVE ----------------------------------------- */ @media (max-width: 991.98px){ .ts-path-portal, .ts-triad-card, .ts-start-node{ grid-column:span 6; } .ts-featured-lead, .ts-featured-side{ grid-column:1 / -1; } .ts-value-item{ grid-column:span 5; } .ts-gallery-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ts-latest-row{ grid-template-columns:1fr; align-items:start; } } @media (max-width: 767.98px){ .ts-path-portal, .ts-triad-card, .ts-start-node, .ts-value-item{ grid-column:1 / -1; } .ts-gallery-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ========================================= FEATURED FROM THE ARCHIVES — HARD COMPRESSION ========================================= */ body.view-featured .ts-featured-band{ padding:18px 0 24px !important; } body.view-featured .ts-featured-band .container-responsive{ width:min(980px, calc(100% - 24px)) !important; padding-left:12px !important; padding-right:12px !important; } body.view-featured .ts-featured-band .feature-header{ margin:0 0 10px !important; text-align:left !important; } body.view-featured .ts-featured-band .feature-header h2{ margin:0 0 .35rem !important; font-size:clamp(1.45rem,1.2rem + .5vw,1.9rem) !important; line-height:1.1 !important; } body.view-featured .ts-featured-band .feature-header h4{ margin:0 !important; max-width:56ch !important; font-size:.98rem !important; line-height:1.38 !important; } body.view-featured .ts-featured-layout{ display:grid !important; grid-template-columns:1.1fr .9fr !important; gap:10px !important; align-items:start !important; } body.view-featured .ts-featured-lead{ grid-column:auto !important; padding:14px !important; border-radius:14px !important; min-height:0 !important; height:auto !important; box-shadow:0 8px 20px rgba(0,0,0,.08) !important; } body.view-featured .ts-featured-side{ grid-column:auto !important; display:grid !important; gap:10px !important; align-content:start !important; } body.view-featured .ts-featured-mini{ padding:14px !important; border-radius:14px !important; min-height:0 !important; height:auto !important; box-shadow:0 8px 18px rgba(0,0,0,.07) !important; } body.view-featured .ts-featured-type{ display:block !important; margin:0 0 .35rem !important; font-size:.74rem !important; line-height:1.1 !important; letter-spacing:.1em !important; } body.view-featured .ts-featured-lead h3, body.view-featured .ts-featured-mini h3{ margin:0 0 .35rem !important; font-size:1.02rem !important; line-height:1.2 !important; } body.view-featured .ts-featured-lead p, body.view-featured .ts-featured-mini p{ margin:0 0 .55rem !important; font-size:.92rem !important; line-height:1.4 !important; } body.view-featured .ts-featured-band .btn, body.view-featured .ts-featured-band a.btn{ min-height:34px !important; padding:.46rem .72rem !important; font-size:.88rem !important; line-height:1 !important; border-radius:9px !important; box-shadow:none !important; } /* strip any unexpected image/media if added later */ body.view-featured .ts-featured-lead img, body.view-featured .ts-featured-mini img, body.view-featured .ts-featured-lead .feature-image, body.view-featured .ts-featured-mini .feature-image{ display:none !important; } @media (max-width: 991.98px){ body.view-featured .ts-featured-layout{ grid-template-columns:1fr !important; } }