/* =========================================================
01. TERRA SECUNDUS — FINAL OVERRIDES (small, surgical)
- No hero contradictions; no stray braces
========================================================= */
/* =========================================================
02. LOCAL FONTS — TTF only
Path: /templates/terrasecundus/local/css/custom-theme.css
========================================================= */
/* TABULA (Bold 700) */
@font-face{
font-family: "Tabula";
src:
local("Tabula Bold"),
local("Tabula-Bold"),
url("/templates/terrasecundus/local/fonts/tabula/tabula-700.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* LEGEND (Bold 700) */
@font-face{
font-family: "Legend";
src:
local("Legend Bold"),
local("Legend-Bold"),
url("/templates/terrasecundus/local/fonts/legend/legend-700.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* 03. Variables used across your sheets */
:root{
--tabula: "Tabula", "Trajan Pro", "Cinzel", serif;
--legend: "Legend", "Playfair Display", Georgia, "Times New Roman", serif;
}
/* =========================================================
04. STATIC FEATURE (image-only) — Force ALL fonts to white
Scope: Header static features only (Mod126/128/130)
Append to end of override.css
========================================================= */
#t4-header #Mod126 .feature-slider-band.image-only,
#t4-header #Mod128 .feature-slider-band.image-only,
#t4-header #Mod130 .feature-slider-band.image-only {
--static-white: #f5f1e8;
color: var(--static-white) !important;
}
/* Make descendants inherit white explicitly (text elements) */
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content {
color: var(--static-white) !important;
}
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h1,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h2,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h3,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h4,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h5,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content h6,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content p,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content li,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content small,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content em,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content strong,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h1,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h2,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h3,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h4,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h5,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content h6,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content p,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content li,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content small,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content em,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content strong,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h1,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h2,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h3,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h4,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h5,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content h6,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content p,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content li,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content small,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content em,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content strong {
color: var(--static-white) !important;
text-shadow: 0 1px 3px rgba(0,0,0,.45); /* legibility over imagery */
}
/* Links (all states) stay white */
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content a,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content a,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content a {
color: var(--static-white) !important;
text-decoration-color: rgba(255,255,255,.65) !important;
}
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content a:hover,
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content a:focus,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content a:hover,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content a:focus,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content a:hover,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content a:focus {
color: #ffffff !important;
text-decoration-color: rgba(255,255,255,.9) !important;
}
/* Buttons inside static features: force label white */
#t4-header #Mod126 .feature-slider-band.image-only .feature-hero-content .btn,
#t4-header #Mod128 .feature-slider-band.image-only .feature-hero-content .btn,
#t4-header #Mod130 .feature-slider-band.image-only .feature-hero-content .btn {
color: #ffffff !important;
border-color: rgba(255,255,255,.75) !important; /* if outlined */
text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}
/* =========================================================
05. FONT VARS — used across your sheets
========================================================= */
:root{
--tabula: "Tabula", "Trajan Pro", "Cinzel", serif;
--legend: "Legend", "Playfair Display", Georgia, "Times New Roman", serif;
}
/* Handy utilities (optional) */
.font-tabula{ font-family: var(--tabula); font-weight: 700; letter-spacing:.06em; text-transform: uppercase; }
.font-legend{ font-family: var(--legend); font-weight: 700; }
/* Dark bands: ensure inner content isn’t injecting light backgrounds */
.band-nightfall .responsive-section,
.band-forest .responsive-section,
.band-nightfall .section-inner,
.band-forest .section-inner{
background:transparent !important;
margin:0 !important;
padding-left:clamp(16px,3vw,44px);
padding-right:clamp(16px,3vw,44px);
}
/* Make sure first/last child in custom module has no phantom margins */
.t4-section .custom > :first-child { margin-top:0 !important; }
.t4-section .custom > :last-child { margin-bottom:0 !important; }
/* Guard: show header slider full width and not clipped (when used) */
#t4-header { overflow-x:visible !important; }
/* === Force cinematic type on section headers/badges === */
.t4-section.ts_band .feature-header h2{ font-family: var(--legend) !important; }
.t4-section.ts_band .feature-header::before{ font-family: var(--tabula) !important; }
/* (Optional) Hero uses the same cinematic header font */
#ts-hero-band :is(.header-title, .header-subtitle){ font-family: var(--legend) !important; }
/* ================================
06. KILL LAST GAP ABOVE THE FOOTER
(home/featured page with empty component)
===================================*/
/* 1) Make the main-body transparent and spacing-free when it's just scaffolding */
.view-featured #t4-main-body,
.item-101 #t4-main-body {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* 2) Strip inner paddings/margins in that block */
.view-featured #t4-main-body .t4-section-inner,
.view-featured #t4-main-body .t4-row,
.view-featured #t4-main-body .component {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/* 3) Remove space from empty featured/blog wrappers */
.view-featured #t4-main-body .blog-featured,
.view-featured #t4-main-body .view-masonry,
.view-featured #system-message-container {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
border: 0 !important;
}
/* If they render literally empty, hide them */
.view-featured #t4-main-body .blog-featured:empty,
.view-featured #t4-main-body .view-masonry:empty {
display: none !important;
}
/* 4) Footer should start flush (no seam), but keep its design */
#t4-footer,
#t4-footer .t4-section-inner,
#t4-footer .t4-mod-wrap,
#t4-footer .section-inner,
#t4-footer .section-ct {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
/* NOTE: do NOT touch background here */
}
.view-featured #t4-main-body .t4-section-inner,
.view-featured #t4-main-body .t4-row,
.view-featured #t4-main-body .component {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.view-featured #t4-main-body .blog-featured,
.view-featured #t4-main-body .view-masonry,
.view-featured #system-message-container {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
border: 0 !important;
}
.view-featured #t4-main-body .blog-featured:empty,
.view-featured #t4-main-body .view-masonry:empty {
display: none !important;
}
/* Optional: if you still see a white strip on very tall screens,
set the page background to match Section 6’s band */
body.item-101 { background-color: #0f1317; /* nightfall */ }
/* ================================
07. KILL GAP ABOVE THE HEADER (TOP)
================================ */
/* 1) Nuke all padding/margins the topbar stack might add */
#t4-topbar,
#t4-topbar .t4-section-inner,
#t4-topbar .t4-mod-wrap,
#t4-topbar .section-inner,
#t4-topbar .section-ct {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* 2) Some skins add utility spacing classes on the topbar module */
#t4-topbar .top-blank,
#t4-topbar .bottom-blank {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* 3) Ensure the first section really starts flush */
.t4-content-inner > .t4-section:first-child,
.t4-wrapper > .t4-content > .t4-content-inner > .t4-section:first-child,
#t4-header {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* 07.1 STATIC FEATURES: eliminate seam under header */
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child,
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child .t4-section-inner,
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child .t4-mod-wrap,
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child .section-inner {
margin-top: 0 !important;
padding-top: 0 !important;
background: transparent !important;
border: 0 !important;
}
/* tighten when first section contains static-image features */
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child
:is(.feature-bestiary, .feature-world-guide, .feature-lore) {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* kill phantom first-child margins even if module isn’t 'custom' */
#t4-header + .t4-content .t4-content-inner > .t4-section:first-child
.t4-mod-wrap:first-of-type > *:first-child {
margin-top: 0 !important;
}
/* 07.2 increase fade overlap to hide hairline seam */
#t4-header::after { bottom: -2px !important; }
/* 4) Remove any container gutters that can look like a band */
#t4-topbar .t4-section-inner.container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 5) Collapse any sticky placeholder above the header */
#sp-header + .sticky-header-placeholder {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
/* 6) Catch-alls for theme seams */
#t4-topbar,
.t4-topbar {
border: 0 !important;
box-shadow: none !important;
}
.t4-content-inner { padding-top: 0 !important; }
body > main > .t4-wrapper { margin-top: 0 !important; padding-top: 0 !important; }
html, body { margin-top: 0 !important; }
/* =====================================================
08. UNIVERSAL SEAM + BACKGROUND CONTINUITY FIX — FINAL
Scope: all T4 layouts (header ⇄ body ⇄ footer)
Matches band-parchment tone from Section 1
===================================================== */
/* Eliminate inter-section padding/margins only in header/footer seam regions */
#t4-topbar .t4-section,
#t4-topbar .t4-section-inner,
#t4-topbar .t4-mod-wrap,
#t4-topbar .section-inner,
#t4-topbar .section-ct,
#t4-header .t4-section,
#t4-header .t4-section-inner,
#t4-header .t4-mod-wrap,
#t4-header .section-inner,
#t4-header .section-ct,
#t4-footer .t4-section,
#t4-footer .t4-section-inner,
#t4-footer .t4-mod-wrap,
#t4-footer .section-inner,
#t4-footer .section-ct {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border: 0 !important;
}
/* Remove Joomla utility spacing */
.top-large, .bottom-large,
.top-medium, .bottom-medium,
.top-blank, .bottom-blank {
margin: 0 !important;
padding: 0 !important;
}
/* Flush header and footer */
#t4-topbar, #t4-header, #sp-header,
#t4-footer {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* Base background tone */
body {
margin: 0 !important;
padding: 0 !important;
overflow-x: clip;
}
/* Match Section 1 parchment tone */
.band-parchment,
.t4-col.band-parchment,
.band-parchment .t4-section-inner {
background-color: #f6f2ea !important; /* slightly darker parchment */
}
/* Restore full-bleed features */
.feature-band.fullwidth {
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
width: 100vw !important;
}
/* =========================================================
09. TS: Joomla Edit Profile — neutralize global .row damage
========================================================= */
/* === ABSOLUTE DIAGNOSTIC OVERLAY (FORCE ENABLED) === */
/* === TS: Joomla Edit Profile — neutralize global .row damage === */
body.com_users.view-profile-edit .com-users-profile__edit .row {
/* Restore Bootstrap row defaults for this page only */
display: flex !important;
flex-wrap: wrap !important;
/* Bootstrap 5 uses CSS vars for gutters; set safe defaults */
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
margin-left: calc(var(--bs-gutter-x) * -0.5) !important;
margin-right: calc(var(--bs-gutter-x) * -0.5) !important;
}
body.com_users.view-profile-edit .com-users-profile__edit .control-group.row {
/* Make each field row align label/input cleanly */
align-items: center !important;
}
body.com_users.view-profile-edit .com-users-profile__edit .control-label.col-sm-3 {
flex: 0 0 25% !important;
max-width: 25% !important;
text-align: right !important;
}
body.com_users.view-profile-edit .com-users-profile__edit .col-sm-9 {
flex: 0 0 75% !important;
max-width: 75% !important;
}
body.com_users.view-profile-edit .com-users-profile__edit .col-sm-9 > :where(input, select, textarea, .input-group) {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Password input-group shouldn’t collapse */
body.com_users.view-profile-edit .com-users-profile__edit .password-group .input-group {
display: flex !important;
width: 100% !important;
}
/* ============================================================
10. PATCH: Fix Joomla com_users Edit Profile Grid Misalignment
============================================================ */
body.com_users.view-profile-edit #member-profile .control-group.row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
margin-bottom: 1rem !important;
}
body.com_users.view-profile-edit #member-profile .control-label,
body.com_users.view-profile-edit #member-profile .col-sm-9 {
display: block !important;
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Restore Bootstrap-like widths */
@media (min-width: 576px) {
body.com_users.view-profile-edit #member-profile .control-label {
flex: 0 0 25% !important;
text-align: right;
}
body.com_users.view-profile-edit #member-profile .col-sm-9 {
flex: 0 0 75% !important;
}
}
/* Override 'display: contents' from membership-system.css */
body.com_users.view-profile-edit #member-profile .control-label,
body.com_users.view-profile-edit #member-profile .col-sm-9,
body.com_users.view-profile-edit #member-profile .has-success {
display: block !important;
}
/* ===========================================================
11. TERRA SECUNDUS — Membership Plans (Unified Final)
Style the native OSM container to match the Join page
=========================================================== */
/* Container background + typography */
#t4-main-body .osm-container {
background: url('/images/backgrounds/parchment-texture.jpg') repeat center center fixed;
background-size: cover;
padding: 4rem 0 5rem 0;
font-family: "Playfair Display", serif;
color: #2a1d0f !important;
}
/* Title styling */
#t4-main-body .osm-page-title {
text-align: center;
font-size: 2.6rem;
font-weight: 700;
color: #caa855;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 3rem;
position: relative;
text-shadow: 0 0 10px rgba(0,0,0,0.35);
}
#t4-main-body .osm-page-title::after {
content: "";
display: block;
width: 80px;
height: 3px;
margin: 0.75rem auto 0 auto;
background: linear-gradient(to right, transparent, #d4b055, transparent);
border-radius: 2px;
}
/* Card styling for each plan */
#t4-main-body .osm-item-wrapper {
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(8px);
border-radius: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35),
inset 0 0 20px rgba(255, 255, 255, 0.3);
border: 1px solid rgba(212, 176, 111, 0.4);
max-width: 480px;
margin: 0 auto 3rem auto;
padding: 2.5rem 2rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#t4-main-body .osm-item-wrapper:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45),
inset 0 0 22px rgba(255, 255, 255, 0.4);
}
/* Plan title inside card */
#t4-main-body .osm-item-title a {
text-decoration: none;
color: #9c7728;
font-size: 1.75rem;
font-weight: 700;
}
/* Description text block */
#t4-main-body .osm-item-description {
font-size: 1.05rem;
line-height: 1.6;
color: #2a1d0f;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
/* Table styling (Duration / Price) */
#t4-main-body .osm-plan-property-label,
#t4-main-body .osm-plan-property-value {
border: none !important;
background: transparent !important;
font-size: 1.05rem;
color: #2a1d0f !important;
padding: 0.5rem 0.25rem;
}
/* Remove bootstrap borders from table */
#t4-main-body .table-bordered td,
#t4-main-body .table-bordered th {
border: none !important;
}
/* Taskbar & button styling */
#t4-main-body .osm-taskbar {
margin-top: 1.5rem;
}
#t4-main-body .osm-taskbar .btn.btn-primary {
background: linear-gradient(to bottom right, #d4b055, #9c7728) !important;
border: none !important;
color: #111 !important;
font-weight: 700;
font-family: "Playfair Display", serif;
text-transform: uppercase;
border-radius: 6px;
padding: 0.9rem 2rem;
letter-spacing: 0.05em;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
transition: all 0.3s ease;
}
#t4-main-body .osm-taskbar .btn.btn-primary:hover {
background: linear-gradient(to bottom right, #f8e7b0, #c49a3f) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}
/* Responsive break for medium screens */
@media (max-width: 991px) {
#t4-main-body .osm-item-wrapper {
width: 90%;
padding: 2rem 1.5rem;
}
}
/* ==========================================================
12. TERRA SECUNDUS — Subscription Form Alignment (Right Offset)
========================================================== */
/* Shift the main subscription form container slightly right */
#t4-main-body #osm-signup-page.osm-container {
position: relative;
left: 3%; /* Adjust horizontal offset */
max-width: 900px; /* Prevent it from expanding too wide */
margin: 0 auto 4rem; /* Keep it centered overall */
padding: 2.5rem 2rem;
background: rgba(255,255,255,0.93);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.35),
inset 0 0 16px rgba(255,255,255,0.25);
border: 1px solid rgba(212,176,111,0.4);
backdrop-filter: blur(6px);
}
/* Title refinement inside signup container */
#t4-main-body #osm-signup-page .osm-page-title {
text-align: center;
font-family: "Playfair Display", serif;
font-size: 2.4rem;
font-weight: 700;
color: #caa855;
text-transform: uppercase;
text-shadow: 0 0 8px rgba(0,0,0,0.35);
margin-bottom: 2.5rem;
}
/* Keep responsive alignment on mobile */
@media (max-width: 991px) {
#t4-main-body #osm-signup-page.osm-container {
left: 0;
width: 92%;
margin: 0 auto 3rem;
padding: 1.5rem;
}
}
/* ==========================================================
13. TERRA SECUNDUS — OSM Signup Page Alignment Fix
========================================================== */
#t4-main-body .t4-row {
justify-content: center; /* centers content horizontally in the row */
}
#t4-main-body .t4-col.component {
flex: 0 1 70%; /* limit form column width on desktop */
max-width: 70%;
margin-left: 2%; /* subtle nudge to the right */
}
#t4-main-body #osm-signup-page.osm-container {
width: 100%;
background: rgba(255,255,255,0.93);
border: 1px solid rgba(212,176,111,0.4);
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0,0,0,0.35),
inset 0 0 16px rgba(255,255,255,0.25);
padding: 2.5rem 2rem;
backdrop-filter: blur(6px);
}
/* Tablet / Short screens */
@media (max-width: 1100px) {
#t4-main-body .t4-col.component {
flex: 0 1 85%;
max-width: 85%;
margin-left: 0;
}
}
/* Mobile full-width stack */
@media (max-width: 767px) {
#t4-main-body .t4-col.component {
flex: 0 1 100%;
max-width: 100%;
margin-left: 0;
}
}
/* ==========================================================
14. TERRA SECUNDUS — PASSWORD RESET (final override)
Full light parchment interior, maximum readability
========================================================== */
/* Section background */
#t4-main-body .com-users-reset,
#t4-main-body .com-users-remind,
#t4-main-body .com-users-reset-complete {
background: url('/images/backgrounds/parchment-texture.jpg') center/cover fixed;
padding: 4rem 0 5rem;
font-family: "Playfair Display", serif;
color: #1b1408;
}
/* Card container — opaque light background */
#t4-main-body .com-users-reset__form,
#t4-main-body .com-users-remind__form,
#t4-main-body .com-users-reset-complete__form {
max-width: 740px;
margin: 0 auto;
background-color: #fffdf8 !important; /* fully opaque pale parchment */
background-image: none !important;
border: 1px solid rgba(212,176,111,0.45);
border-radius: 14px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
inset 0 0 16px rgba(255,255,255,0.4);
padding: 2.5rem 2rem;
color: #1b1408 !important;
}
/* Text inside the card */
#t4-main-body .com-users-reset__form *,
#t4-main-body .com-users-remind__form *,
#t4-main-body .com-users-reset-complete__form * {
color: #1b1408 !important;
}
/* Decorative title */
#t4-main-body .com-users-reset__form::before,
#t4-main-body .com-users-remind__form::before,
#t4-main-body .com-users-reset-complete__form::before {
content: "Account Recovery";
display: block;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #caa855;
font-size: 1.5rem;
margin-bottom: 0.75rem;
text-shadow: 0 0 8px rgba(0,0,0,0.25);
}
#t4-main-body .com-users-reset__form::after,
#t4-main-body .com-users-remind__form::after,
#t4-main-body .com-users-reset-complete__form::after {
content: "";
display: block;
width: 100px;
height: 3px;
margin: 0.4rem auto 1rem;
background: linear-gradient(90deg, transparent, #d4b055, transparent);
border-radius: 2px;
}
/* Paragraphs */
#t4-main-body .com-users-reset p,
#t4-main-body .com-users-remind p,
#t4-main-body .com-users-reset-complete p {
text-align: center;
font-size: 1.05rem;
line-height: 1.6;
color: #1b1408 !important;
}
/* Field layout */
#t4-main-body .com-users-reset .control-group,
#t4-main-body .com-users-remind .control-group,
#t4-main-body .com-users-reset-complete .control-group {
display: grid;
grid-template-columns: 220px 1fr;
align-items: center;
column-gap: 1rem;
margin-bottom: 1rem;
}
/* Labels */
#t4-main-body .com-users-reset label,
#t4-main-body .com-users-remind label,
#t4-main-body .com-users-reset-complete label {
text-align: right;
font-weight: 700;
color: #1b1408 !important;
}
/* Inputs */
#t4-main-body .com-users-reset input.form-control,
#t4-main-body .com-users-remind input.form-control,
#t4-main-body .com-users-reset-complete input.form-control {
width: 100%;
height: 2.75rem;
border: 1px solid rgba(130,100,50,0.35);
border-radius: 8px;
background: #ffffff !important;
color: #111 !important;
padding: 0 0.9rem;
transition: box-shadow .2s ease, border-color .2s ease;
}
#t4-main-body .com-users-reset input:focus,
#t4-main-body .com-users-remind input:focus,
#t4-main-body .com-users-reset-complete input:focus {
outline: none;
border-color: #caa855;
box-shadow: 0 0 0 3px rgba(202,168,85,0.25);
}
/* Buttons */
#t4-main-body .com-users-reset .btn.btn-primary,
#t4-main-body .com-users-remind .btn.btn-primary,
#t4-main-body .com-users-reset-complete .btn.btn-primary {
background: linear-gradient(135deg,#e6ca82,#b28a34);
border: none;
color: #111 !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 10px;
padding: 0.95rem 2.2rem;
box-shadow: 0 10px 22px rgba(0,0,0,0.35);
transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#t4-main-body .com-users-reset .btn.btn-primary:hover,
#t4-main-body .com-users-remind .btn.btn-primary:hover,
#t4-main-body .com-users-reset-complete .btn.btn-primary:hover {
filter: brightness(1.07);
box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
/* Responsive stacking */
@media (max-width: 767.98px) {
#t4-main-body .com-users-reset .control-group,
#t4-main-body .com-users-remind .control-group,
#t4-main-body .com-users-reset-complete .control-group {
grid-template-columns: 1fr;
row-gap: .4rem;
}
#t4-main-body .com-users-reset label,
#t4-main-body .com-users-remind label,
#t4-main-body .com-users-reset-complete label {
text-align: left;
}
}
/* ==========================================================
15. TERRA SECUNDUS — PASSWORD RESET CONFIRMATION STEP
Mirrors the request page's light parchment design
========================================================== */
/* Background band */
#t4-main-body .com-users-reset-confirm,
#t4-main-body .com-users-reset-complete {
background: url('/images/backgrounds/parchment-texture.jpg') center/cover fixed;
padding: 4rem 0 5rem;
font-family: "Playfair Display", serif;
color: #1b1408;
}
/* Card container */
#t4-main-body .com-users-reset-confirm__form,
#t4-main-body .com-users-reset-complete__form {
max-width: 740px;
margin: 0 auto;
background-color: #fffdf8 !important;
border: 1px solid rgba(212,176,111,0.45);
border-radius: 14px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
inset 0 0 16px rgba(255,255,255,0.4);
padding: 2.5rem 2rem;
color: #1b1408 !important;
}
/* Decorative heading */
#t4-main-body .com-users-reset-confirm__form::before,
#t4-main-body .com-users-reset-complete__form::before {
content: "Reset Your Password";
display: block;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #caa855;
font-size: 1.5rem;
margin-bottom: 0.75rem;
text-shadow: 0 0 8px rgba(0,0,0,0.25);
}
#t4-main-body .com-users-reset-confirm__form::after,
#t4-main-body .com-users-reset-complete__form::after {
content: "";
display: block;
width: 100px;
height: 3px;
margin: 0.4rem auto 1rem;
background: linear-gradient(90deg, transparent, #d4b055, transparent);
border-radius: 2px;
}
/* Labels & inputs */
#t4-main-body .com-users-reset-confirm label,
#t4-main-body .com-users-reset-complete label {
font-weight: 700;
color: #1b1408;
text-align: right;
}
#t4-main-body .com-users-reset-confirm input.form-control,
#t4-main-body .com-users-reset-complete input.form-control {
width: 100%;
height: 2.75rem;
border: 1px solid rgba(130,100,50,0.35);
border-radius: 8px;
background: #ffffff !important;
color: #111 !important;
padding: 0 0.9rem;
transition: box-shadow .2s ease, border-color .2s ease;
}
#t4-main-body .com-users-reset-confirm input:focus,
#t4-main-body .com-users-reset-complete input:focus {
border-color: #caa855;
box-shadow: 0 0 0 3px rgba(202,168,85,0.25);
outline: none;
}
/* Buttons */
#t4-main-body .com-users-reset-confirm .btn.btn-primary,
#t4-main-body .com-users-reset-complete .btn.btn-primary {
background: linear-gradient(135deg,#e6ca82,#b28a34);
border: none;
color: #111 !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 10px;
padding: 0.95rem 2.2rem;
box-shadow: 0 10px 22px rgba(0,0,0,0.35);
transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#t4-main-body .com-users-reset-confirm .btn.btn-primary:hover,
#t4-main-body .com-users-reset-complete .btn.btn-primary:hover {
filter: brightness(1.07);
box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
/* Responsive stacking */
@media (max-width: 767.98px) {
#t4-main-body .com-users-reset-confirm .control-group,
#t4-main-body .com-users-reset-complete .control-group {
display: grid;
grid-template-columns: 1fr;
row-gap: .4rem;
}
#t4-main-body .com-users-reset-confirm label,
#t4-main-body .com-users-reset-complete label {
text-align: left;
}
}
/* ==========================================================
16. TERRA SECUNDUS — JOIN PAGE / OSM PLAN ITEM
Full-height parchment section + centered light card
========================================================== */
/* Main section background + full height */
body.com_osmembership.view-plan #t4-main-body {
background: url('/images/backgrounds/parchment-texture.jpg') center/cover fixed;
min-height: calc(100vh - 220px);
display: flex;
align-items: flex-start;
justify-content: center;
font-family: "Playfair Display", serif;
color: #1b1408;
padding: 4rem 0 5rem;
}
/* Ensure the section-inner stretches */
body.com_osmembership.view-plan #t4-main-body > .t4-section-inner {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: 3rem;
}
/* OSM main container — light parchment card */
body.com_osmembership.view-plan #osm-plan-item.osm-container {
flex: 0 1 1000px; /* was 700px */
max-width: 1000px;
background-color: #fffdf8 !important;
border: 1px solid rgba(212,176,111,0.45);
border-radius: 14px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
inset 0 0 16px rgba(255,255,255,0.4);
padding: 3rem 2rem;
color: #1b1408 !important;
}
/* Page title */
body.com_osmembership.view-plan .osm-page-title {
text-align: center;
color: #caa855;
font-size: 2.4rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
text-shadow: 0 0 10px rgba(0,0,0,0.35);
margin-bottom: 1.5rem;
}
body.com_osmembership.view-plan .osm-page-title::after {
content: "";
display: block;
width: 90px;
height: 3px;
margin: 0.5rem auto 2rem;
background: linear-gradient(to right, transparent, #d4b055, transparent);
border-radius: 2px;
}
/* Description text */
body.com_osmembership.view-plan .osm-item-description {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Price + term layout */
body.com_osmembership.view-plan .tsu-card-price {
text-align: center;
font-size: 1.8rem;
font-weight: 700;
color: #1b1408;
margin-bottom: 0.75rem;
}
body.com_osmembership.view-plan .tsu-card-desc {
text-align: center;
color: #1b1408;
}
/* Table cleanup */
body.com_osmembership.view-plan table.table {
background: transparent !important;
border: none;
width: 100%;
margin: 1rem 0 1.5rem;
}
body.com_osmembership.view-plan .osm-plan-property-label,
body.com_osmembership.view-plan .osm-plan-property-value {
border: none !important;
background: transparent !important;
font-size: 1.05rem;
color: #1b1408;
}
/* Sign Up button */
body.com_osmembership.view-plan .osm-taskbar .btn-primary {
display: block;
width: fit-content;
margin: 0 auto;
background: linear-gradient(135deg,#e6ca82,#b28a34);
border: none;
color: #111 !important;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 10px;
padding: 0.9rem 2rem;
box-shadow: 0 10px 22px rgba(0,0,0,0.35);
transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
body.com_osmembership.view-plan .osm-taskbar .btn-primary:hover {
filter: brightness(1.07);
box-shadow: 0 12px 26px rgba(0,0,0,0.45);
}
/* Adjust side menu spacing (push card slightly left of it) */
body.com_osmembership.view-plan .side-menu {
margin-left: 2rem;
}
/* Responsive stacking */
@media (max-width: 991.98px) {
body.com_osmembership.view-plan #t4-main-body > .t4-section-inner {
flex-direction: column;
align-items: center;
}
body.com_osmembership.view-plan .side-menu {
margin-left: 0;
margin-top: 2rem;
}
}
/* ==========================================================
17. TERRA SECUNDUS — HEADER LOGOUT BUTTON (Unified Aesthetic)
Matches membership system styling and gold theme
========================================================== */
/* Logout container alignment */
#sp-header .mod-login-logout__button {
display: inline-block;
margin-left: 1rem;
}
/* Greeting text beside button */
#sp-header .mod-login-logout__login-greeting {
font-family: "Playfair Display", serif;
color: #d4b055;
font-weight: 600;
letter-spacing: 0.03em;
text-shadow: 0 0 6px rgba(0,0,0,0.4);
display: inline-block;
margin-right: 0.75rem;
}
/* Logout button aesthetic */
#sp-header .mod-login-logout__button .btn.btn-primary {
font-family: "Playfair Display", serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
border: none !important;
border-radius: 8px;
padding: 0.6rem 1.4rem;
background: linear-gradient(135deg, #e6ca82, #b28a34);
color: #111 !important;
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
transition: all 0.3s ease;
}
/* Hover / active */
#sp-header .mod-login-logout__button .btn.btn-primary:hover {
background: linear-gradient(135deg, #f8e7b0, #c49a3f);
box-shadow: 0 10px 26px rgba(0,0,0,0.45);
color: #111 !important;
transform: translateY(-2px);
}
/* Small-screen tweak */
@media (max-width: 768px) {
#sp-header .mod-login-logout__login-greeting {
display: block;
margin-bottom: 0.25rem;
text-align: right;
}
#sp-header .mod-login-logout__button {
display: block;
text-align: right;
}
}
/* ==========================================================
18. TERRA SECUNDUS — SEARCH RESULTS + ADVANCED SEARCH
Parchment Aesthetic with Elevated Cards
========================================================== */
/* === GLOBAL CONTAINER === */
body.com_finder #t4-main-body,
body.com_search #t4-main-body {
background: url('/images/backgrounds/parchment-texture.jpg') center/cover fixed !important;
font-family: "Playfair Display", serif;
color: #1b1408;
min-height: calc(100vh - 200px);
padding: 4rem 1rem 6rem;
}
/* === SEARCH FORM CONTAINER === */
body.com_finder #search-form,
body.com_search #search-form {
max-width: 800px;
margin: 0 auto 2.5rem auto;
background: rgba(255, 253, 248, 0.96);
border-radius: 14px;
border: 1px solid rgba(212,176,111,0.45);
box-shadow: 0 10px 24px rgba(0,0,0,0.35),
inset 0 0 18px rgba(255,255,255,0.3);
padding: 2.5rem 2rem;
backdrop-filter: blur(6px);
text-align: center;
}
/* Title/legend hidden but form alignment fix */
body.com_finder #search-form label,
body.com_search #search-form label {
font-weight: 600;
color: #2a1d0f;
letter-spacing: 0.04em;
}
/* Search input + buttons */
body.com_finder #search-form input.form-control,
body.com_search #search-form input.form-control {
border: 1px solid rgba(0,0,0,0.25);
border-radius: 8px;
padding: 0.7rem 1rem;
width: 100%;
background: #fff;
transition: all 0.3s ease;
}
body.com_finder #search-form input.form-control:focus,
body.com_search #search-form input.form-control:focus {
border-color: #caa855;
box-shadow: 0 0 6px rgba(212,176,111,0.4);
}
/* Buttons: gold gradient to match membership pages */
body.com_finder #search-form .btn,
body.com_search #search-form .btn {
font-family: "Playfair Display", serif;
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 6px;
padding: 0.7rem 1.4rem;
margin-left: 0.5rem;
background: linear-gradient(135deg, #e6ca82, #b28a34);
color: #111;
box-shadow: 0 6px 18px rgba(0,0,0,0.35);
transition: all 0.3s ease;
}
body.com_finder #search-form .btn:hover,
body.com_search #search-form .btn:hover {
background: linear-gradient(135deg, #f8e7b0, #c49a3f);
box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}
/* === ADVANCED SEARCH CARD === */
body.com_finder #advancedSearch,
body.com_search #advancedSearch {
background: rgba(255, 253, 248, 0.92);
border-radius: 12px;
border: 1px solid rgba(212,176,111,0.4);
box-shadow: 0 8px 18px rgba(0,0,0,0.3);
padding: 1.5rem 1.25rem;
margin-top: 1.5rem;
text-align: left;
}
body.com_finder #advancedSearch label,
body.com_search #advancedSearch label {
color: #2a1d0f;
font-weight: 600;
}
body.com_finder #advancedSearch select,
body.com_search #advancedSearch select {
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.2);
padding: 0.4rem 0.6rem;
}
/* === SEARCH RESULTS LIST === */
body.com_finder #search-results,
body.com_search #search-results {
max-width: 950px;
margin: 0 auto;
}
/* Each result item */
body.com_finder .result-item,
body.com_search .result-item {
background: rgba(255,255,255,0.94);
border-radius: 12px;
border: 1px solid rgba(212,176,111,0.4);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
margin-bottom: 2rem;
padding: 1.75rem 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.com_finder .result-item:hover,
body.com_search .result-item:hover {
transform: translateY(-6px);
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
/* Result titles */
body.com_finder .result-title a,
body.com_search .result-title a {
color: #9c7728;
font-weight: 700;
font-size: 1.4rem;
text-decoration: none;
transition: color 0.25s ease;
}
body.com_finder .result-title a:hover,
body.com_search .result-title a:hover {
color: #caa855;
text-decoration: underline;
}
/* Description text */
body.com_finder .result-text,
body.com_search .result-text {
font-size: 1.05rem;
line-height: 1.6;
color: #2a1d0f;
margin-top: 0.75rem;
}
/* URL line */
body.com_finder .result-url,
body.com_search .result-url {
font-size: 0.9rem;
color: #6a4a1f;
margin-top: 0.5rem;
}
/* Pagination area */
body.com_finder .com-finder__navigation,
body.com_search .com-search__navigation {
text-align: center;
margin-top: 2rem;
font-weight: 600;
color: #2a1d0f;
}
/* Responsive */
@media (max-width: 768px) {
body.com_finder #search-form,
body.com_search #search-form {
padding: 1.75rem 1.25rem;
}
body.com_finder .result-item,
body.com_search .result-item {
padding: 1.25rem 1rem;
}
}
/* ==========================================================
19. TERRA SECUNDUS — SEARCH RESULT CARD REFINEMENT (FORCED)
========================================================== */
body.com_finder .search-results.list-striped > .result-item,
body[class*="com_finder"] #search-results .result-item {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 10px !important;
margin-bottom: 1.5rem !important;
padding: 1.8rem 2rem 1.6rem 2rem !important; /* ⬅️ heavier padding */
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.25),
inset 0 0 8px rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(5px) !important;
}
/* Titles */
body.com_finder .search-results .result-title,
body[class*="com_finder"] .search-results .result-title {
font-family: "Playfair Display", serif !important;
font-size: 1.45rem !important;
font-weight: 700 !important;
color: #1a1a1a !important;
margin-bottom: 0.9rem !important;
line-height: 1.5 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}
/* Hover */
body.com_finder .search-results .result-title a:hover {
color: #b97c2c !important;
text-decoration: underline !important;
text-shadow: 0 1px 4px rgba(212,176,111,0.4) !important;
}
/* Result text block */
body.com_finder .search-results .result-text {
padding-top: 0.5rem !important; /* ⬅️ visual gap from title */
color: #333 !important;
font-size: 1.05rem !important;
line-height: 1.6 !important;
}
/* ============================================================
20. TERRA SECUNDUS — HERO SLIDER FULL-BLEED FIX
============================================================ */
/* Restrict full-bleed to header context only (no :is() for compatibility) */
#t4-header .t4-section.slider,
#t4-header .feature-hero-image,
#t4-header .t4-feature-slideshow,
#t4-header .sp-slider {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
min-height: 100vh !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border: none !important;
}
/* Kill inner spacing that causes the gap */
.t4-section.slider .t4-section-inner,
.feature-hero-image .t4-section-inner,
.t4-feature-slideshow .t4-section-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
}
/* Compensate for 1080p monitors (16:9 ratio) */
@media (max-height: 1080px) and (min-width: 1366px) {
.t4-section.slider { min-height: 100vh !important; }
}
/* ============================================================
21. TERRA SECUNDUS — HERO H1 FONT ENFORCEMENT
============================================================ */
.t4-section.slider h1,
.feature-hero-content h1,
.hero-slider h1 {
font-family: "Tabula", "Trajan Pro", serif !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #f5f1e8 !important;
text-shadow: 0 0 15px rgba(0,0,0,0.65);
}
/* fallback if variable font still overrides */
:root {
--heading-font-family: "Tabula", "Trajan Pro", serif !important;
}
/* ============================================================
22. Terra Secundus — Header Slider Final Patch
Gapless full-cover slider with custom cinematic transition
============================================================ */
/* 1️⃣ Neutralize height & padding from T4 wrappers (but safe version) */
#t4-header .t4-mod-wrap.ts_band,
#t4-header .t4-mod-wrap.ts_band .section-inner,
#t4-header .t4-mod-wrap.ts_band .section-ct {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
background: transparent !important;
}
/* Disable band-level fade; keep header ::after fade */
.feature-slider-band::after { display: none !important; }
/* 3️⃣ Ensure proper stacking context */
.feature-slider-band {
position: relative;
z-index: 2;
overflow: hidden;
}
.feature-slider {
position: relative;
z-index: 1;
}
/* 4️⃣ Fine-tune for 1080p */
@media (max-width: 1080px) {
.feature-slider-band::after {
height: 120px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.25) 40%,
rgba(15,19,23,0.85) 80%,
#0f1317 100%
);
}
}
/* ============================================================
23. FEATURE SLIDER — TRANSITION RESTORE (FORCED VISIBILITY)
============================================================ */
/* Allow slider and header sections to show overflow */
#t4-header,
#t4-header .t4-section,
#t4-header .t4-mod-wrap,
#t4-header .feature-slider-band {
overflow: visible !important;
position: relative !important;
}
/* Manually attached transition band visible over body */
#t4-header::after {
content: "";
position: absolute;
bottom: -1px; /* ensures it overlaps next section slightly */
left: 0;
width: 100%;
height: 160px;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.25) 35%,
rgba(15,19,23,0.8) 70%,
#0f1317 100%
);
z-index: 30;
}
/* Extra safety — ensures band isn’t hidden behind slides */
.feature-slider-band,
.feature-slider {
position: relative;
z-index: 10;
}
/* On medium/smaller screens adjust fade depth */
@media (max-width: 1366px) {
#t4-header::after {
height: 120px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0.25) 40%,
rgba(15,19,23,0.85) 80%,
#0f1317 100%
);
}
}
/* ============================================================
24. FIXED OVERRIDE — Apply only to Slider Module (Mod115)
============================================================ */
#t4-header #Mod115.t4-mod-wrap.ts_band,
#t4-header #Mod115 .section-inner,
#t4-header #Mod115 .section-ct,
#t4-header #Mod115 .custom,
#t4-header #Mod115 .feature-slider-band {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin: 0 !important;
overflow: visible !important;
}
/* =========================================================
25. STATIC FEATURES (HEADER) — REMOVE TOP GAP
Scope: #Mod126 (Bestiary) / #Mod128 (World) / #Mod130 (Lore)
Cause: wrapper padders + collapsing H1/H3 margins
Safe: No impact on Mod115 slider, hero, or logout
========================================================= */
/* 1) Module wrappers: zero out padders/seams */
#t4-header > #Mod126,
#t4-header > #Mod128,
#t4-header > #Mod130,
#t4-header > #Mod126.top-large,
#t4-header > #Mod126.bottom-large,
#t4-header > #Mod128.top-large,
#t4-header > #Mod128.bottom-large,
#t4-header > #Mod130.top-large,
#t4-header > #Mod130.bottom-large {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-top: 0 !important;
}
/* 2) Immediate inner wrappers at the top edge */
#t4-header > #Mod126 > .section-inner,
#t4-header > #Mod128 > .section-inner,
#t4-header > #Mod130 > .section-inner,
#t4-header > #Mod126 > .section-inner > .section-ct,
#t4-header > #Mod128 > .section-inner > .section-ct,
#t4-header > #Mod130 > .section-inner > .section-ct {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* 3) Collapse the hidden spacer Joomla drops after .section-ct */
#t4-header > #Mod126 > .text-uppercase.mb-5.mb-lg-0.d-none,
#t4-header > #Mod128 > .text-uppercase.mb-5.mb-lg-0.d-none,
#t4-header > #Mod130 > .text-uppercase.mb-5.mb-lg-0.d-none {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4) Feature band: start flush + break margin-collapsing */
#t4-header #Mod126 .feature-slider-band.image-only,
#t4-header #Mod128 .feature-slider-band.image-only,
#t4-header #Mod130 .feature-slider-band.image-only {
display: flow-root !important; /* stops H1/H3 margins from escaping up */
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
/* 5) Header block + headings: remove top margins */
#t4-header #Mod126 .feature-header,
#t4-header #Mod128 .feature-header,
#t4-header #Mod130 .feature-header {
margin-top: 0 !important;
padding-top: 0 !important;
}
#t4-header #Mod126 .feature-header h1,
#t4-header #Mod126 .feature-header h3,
#t4-header #Mod128 .feature-header h1,
#t4-header #Mod128 .feature-header h3,
#t4-header #Mod130 .feature-header h1,
#t4-header #Mod130 .feature-header h3 {
margin-top: 0 !important;
}
/* 6) Belt & suspenders: neutralize any Helix utility padders inside */
#t4-header #Mod126 .top-large,
#t4-header #Mod126 .top-medium,
#t4-header #Mod126 .top-blank,
#t4-header #Mod126 .mt-5,
#t4-header #Mod128 .top-large,
#t4-header #Mod128 .top-medium,
#t4-header #Mod128 .top-blank,
#t4-header #Mod128 .mt-5,
#t4-header #Mod130 .top-large,
#t4-header #Mod130 .top-medium,
#t4-header #Mod130 .top-blank,
#t4-header #Mod130 .mt-5 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* =========================================================
26. SLIDER (Mod115) — Center overlay + WHITE H1/H3 + visible CTA
Scope: header slider only; no impact on static features
========================================================= */
/* Slide + vignette safety */
#t4-header #Mod115 .feature-slider .slide,
#t4-header #ts-hero-slider .feature-slider .slide {
position: relative !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
#t4-header #Mod115 .feature-slider .slide::before,
#t4-header #ts-hero-slider .feature-slider .slide::before {
pointer-events: none !important;
}
/* Center the text/CTA overlay */
#t4-header #Mod115 .feature-slider .slide .slide-overlay,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay {
position: absolute !important;
left: 0 !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 3 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 12px !important;
padding: 0 5vw !important;
pointer-events: auto !important;
}
/* Force WHITE headings (override any gold/text-clip) */
#t4-header #Mod115 .feature-slider .slide .slide-overlay h1,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay h1,
#t4-header #Mod115 .feature-slider .slide .slide-overlay h3,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay h3 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #f5f1e8 !important;
color: #f5f1e8 !important;
mix-blend-mode: normal !important;
filter: none !important;
opacity: 1 !important;
}
#t4-header #Mod115 .feature-slider .slide .slide-overlay h1,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay h1 {
-webkit-text-stroke: 1px rgba(120,120,120,.75) !important;
text-shadow: 0 2px 4px rgba(0,0,0,.45), 0 0 12px rgba(0,0,0,.55) !important;
}
#t4-header #Mod115 .feature-slider .slide .slide-overlay h3,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay h3 {
-webkit-text-stroke: 0 !important;
text-shadow: 0 1px 3px rgba(0,0,0,.45) !important;
}
/* Keep CTA button visible and readable */
#t4-header #Mod115 .feature-slider .slide .slide-overlay .btn,
#t4-header #ts-hero-slider .feature-slider .slide .slide-overlay .btn {
position: relative !important;
z-index: 5 !important; /* above vignette */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg,#e6ca82,#b28a34) !important;
color: #111 !important;
-webkit-text-fill-color: #111 !important;
border: none !important;
border-radius: 10px !important;
box-shadow: 0 10px 22px rgba(0,0,0,.35) !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
}
/* =========================================================
27. SLIDER (Mod115) — Show the active image, hide others
Cause: stacked slides not re-layering; first image on top
Fix: absolute stack + opacity swap + z-index for .active
========================================================= */
#t4-header #Mod115 .feature-slider {
position: relative !important;
}
/* Stack all slides on top of each other inside the band */
#t4-header #Mod115 .feature-slider .slide {
position: absolute !important;
inset: 0 !important;
opacity: 0 !important; /* hidden by default */
z-index: 0 !important;
pointer-events: none !important; /* non-active slides ignore clicks */
transition: opacity .35s ease !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
/* Active/current slide: bring to front and show */
#t4-header #Mod115 .feature-slider .slide.active,
#t4-header #Mod115 .feature-slider .slide.is-active,
#t4-header #Mod115 .feature-slider .slick-slide.slick-active,
#t4-header #Mod115 .feature-slider .swiper-slide.swiper-slide-active {
opacity: 1 !important;
z-index: 2 !important;
pointer-events: auto !important;
}
/* ![]()
-based slides: stretch image to cover behind overlay */
#t4-header #Mod115 .feature-slider .slide > img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
z-index: 0 !important;
}
/* Keep overlay above the image on the active slide */
#t4-header #Mod115 .feature-slider .slide .slide-overlay {
position: absolute !important;
left: 0 !important; right: 0 !important;
top: 50% !important; transform: translateY(-50%) !important;
z-index: 3 !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; text-align: center !important;
gap: 12px !important; padding: 0 5vw !important;
}
/* Preserve CTA visibility */
#t4-header #Mod115 .feature-slider .slide .slide-overlay .btn {
position: relative !important;
z-index: 5 !important;
}
/* =========================================================
28. SLIDER (Mod115) — Anchor images TOP-CENTER (portrait safe)
Scope: header slider only; no impact on static features
========================================================= */
/* Background-image slides */
#t4-header #Mod115 .feature-slider .slide {
background-position: top center !important; /* was center center */
}
/* ![]()
-based slides */
#t4-header #Mod115 .feature-slider .slide > img {
object-position: top center !important; /* ensure same framing */
}
/* If you use an alternate wrapper id */
#t4-header #ts-hero-slider .feature-slider .slide {
background-position: top center !important;
}
#t4-header #ts-hero-slider .feature-slider .slide > img {
object-position: top center !important;
}
/* =========================================================
29. HEADER LINKS — remove white focus box / tap highlight
Scope: #t4-header + #sp-header only
========================================================= */
#t4-header a:focus,
#t4-header a:focus-visible,
#t4-header .nav a:focus,
#t4-header .nav a:focus-visible,
#sp-header a:focus,
#sp-header a:focus-visible,
#sp-header .nav a:focus,
#sp-header .nav a:focus-visible {
outline: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
/* Mobile tap highlight (Chrome/Safari) */
#t4-header a,
#sp-header a {
-webkit-tap-highlight-color: transparent !important;
}
/* Optional (accessible) focus cue instead of the box)
#t4-header a:focus-visible,
#sp-header a:focus-visible {
text-decoration: underline !important;
text-underline-offset: 3px !important;
} */
/* =========================================================
30. Fix com_users profile form offset (scoped)
========================================================= */
/* Restore Bootstrap row gutters that were zeroed by `.t4-section .row { margin:0; padding:0; }` */
.t4-section .com-users-profile__edit .control-group.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
margin-left: calc(-.5 * var(--bs-gutter-x));
margin-right: calc(-.5 * var(--bs-gutter-x));
}
/* Reapply column paddings for the restored gutters */
.t4-section .com-users-profile__edit .control-group.row > [class*="col-"] {
padding-left: calc(var(--bs-gutter-x) / 2);
padding-right: calc(var(--bs-gutter-x) / 2);
}
/* Keep labels aligned with inputs */
.com-users-profile__edit .control-label {
margin: 0;
padding-top: .375rem; /* aligns with form-control height */
text-align: right;
}
@media (max-width: 575.98px){
.com-users-profile__edit .control-label {
text-align: left;
padding-top: 0;
margin-bottom: .25rem;
}
}
/* Ensure expected 25/75 split on sm+ */
.com-users-profile__edit .control-label.col-sm-3 { flex: 0 0 auto; width: 25%; }
.com-users-profile__edit .col-sm-9 { flex: 0 0 auto; width: 75%; }
/* Wrapper safety: make lone `.col-lg` behave as full-width */
.t4-row .t4-col.component.col-lg { width: 100%; }
/* ============================================================
31. FORMS — COM_USERS Profile Actions (Scoped, Safe)
============================================================ */
.com-users-profile__edit-submit{
--btn-radius: 9999px; /* pill */
--btn-height: 44px;
--btn-font: var(--ts-ui-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
/* Unify base button look (only in this block) */
.com-users-profile__edit-submit .btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
height: var(--btn-height);
padding: 0 1.1rem;
border-radius: var(--btn-radius);
font-family: var(--btn-font);
font-weight: 600;
letter-spacing: .02em;
line-height: 1;
text-transform: none;
box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
transition: transform .02s ease-in-out, box-shadow .2s ease,
background-color .2s ease, color .2s ease, border-color .2s ease;
}
.com-users-profile__edit-submit .btn:active{ transform: translateY(1px); }
.com-users-profile__edit-submit .btn + .btn{ margin-left: .5rem; }
/* Primary (Save) — brand solid */
.com-users-profile__edit-submit .btn-primary{
background: var(--primary-color, #0d6efd);
border-color: transparent;
color: #fff;
}
.com-users-profile__edit-submit .btn-primary:hover,
.com-users-profile__edit-submit .btn-primary:focus{
filter: brightness(.95);
box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
/* Cancel — subtle outline to harmonize with primary */
.com-users-profile__edit-submit .btn-danger{
background: transparent;
border: 2px solid var(--danger-color, #dc3545);
color: var(--danger-color, #dc3545);
}
.com-users-profile__edit-submit .btn-danger:hover,
.com-users-profile__edit-submit .btn-danger:focus{
background: var(--danger-color, #dc3545);
color: #fff;
}
/* Optional: add a save icon via Font Awesome if it's loaded */
.com-users-profile__edit-submit .btn-primary span::before{
content: "\f0c7"; /* save icon */
font: 900 1rem "Font Awesome 6 Free";
margin-right: .5rem;
}
/* Accessibility + disabled */
.com-users-profile__edit-submit .btn:focus-visible{
outline: 2px solid rgba(13,110,253,.4);
outline-offset: 2px;
}
.com-users-profile__edit-submit .btn:disabled,
.com-users-profile__edit-submit .btn.disabled{
opacity: .65; cursor: not-allowed; box-shadow: none;
}
/* Mobile: stack full-width cleanly */
@media (max-width:575.98px){
.com-users-profile__edit-submit .btn{
width:100%;
margin:.25rem 0 !important;
}
}
/* =========================================================
32. ARTICLE IMAGES — cap display width at 400px (responsive)
Scope: com_content articles & blog/featured lists only
Safe: No impact on header slider/feature bands
========================================================= */
/* Single article view */
body.com_content.view-article #t4-main-body .com-content-article__body img,
body.com_content.view-article #t4-main-body .item-page .article-body img,
body.com_content.view-article #t4-main-body .item-page img {
max-width: 400px !important;
width: 100% !important; /* shrink with container; never exceed 400px */
height: auto !important;
}
/* Category blog / Featured list items */
body.com_content.view-category #t4-main-body .blog-items img,
body.com_content.view-featured #t4-main-body .blog-items img {
max-width: 400px !important;
width: 100% !important;
height: auto !important;
}
/* Captions/figures inside articles (keep container to 400px) */
body.com_content #t4-main-body figure,
body.com_content #t4-main-body .figure {
max-width: 400px !important;
}
/* Optional: center images neatly in article flow */
body.com_content #t4-main-body .com-content-article__body img,
body.com_content #t4-main-body .item-page img,
body.com_content #t4-main-body .blog-items img {
display: block;
margin-left: auto;
margin-right: auto;
}
/* =========================================================
33. CINEMATIC VERTICAL CARDS — cap media so titles show
Scope: .feature-band.band-stone.cinematic .feature-grid-4
Keeps top-center crop; no markup changes required
========================================================= */
/* Slightly temper overall card height if needed (optional) */
.feature-band.band-stone.cinematic .feature-grid-4{
--feature-card-h: clamp(380px, 34vw, 500px); /* was 38vw/520px */
}
/* Reserve space for text; let media take the rest */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card{
/* Minimum space for summary (title+teaser); tune to taste */
--summary-min: clamp(100px, 10vh, 140px);
--media-max: calc(100% - var(--summary-min));
display: flex !important;
flex-direction: column !important;
min-height: 0 !important;
}
/* Media container: cap height and cancel global aspect-ratio */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card > a:first-child,
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card .feature-image-link,
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card > img{
height: var(--media-max) !important;
max-height: var(--media-max) !important;
flex: 0 0 auto !important;
aspect-ratio: auto !important; /* cancel global 3/5 clamp here */
overflow: hidden !important;
}
/* Image fit: cover + face-safe top-center */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card > a:first-child > img,
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card .feature-image-link > img,
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card > img{
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: 50% 20% !important;
display: block !important;
transform: none !important; /* avoid scale pushing text off */
}
/* Summary block: guarantee visibility */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card .feature-summary{
min-height: var(--summary-min) !important;
flex: 1 1 auto !important;
overflow: hidden !important;
padding: clamp(18px, 2vw, 26px) !important;
}
/* Clean heading spacing/colors */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card .feature-summary h4{
margin: 0 0 .4rem !important;
color: #2b2108 !important;
}
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card .feature-summary p{
color: #2b2b2b !important;
}
/* Hide the stray
after the image link, if present */
.feature-band.band-stone.cinematic .feature-grid-4 .feature-card > br{
display: none !important;
}
/* =========================================================
34. Header Fix (navigation & dropdown behavior)
========================================================= */
/* Top level */
#sp-menu .navbar-nav > li > a.nav-link{
display:block;
padding:.75rem 1rem;
color:#f5f1e8;
text-transform:uppercase;
letter-spacing:.04em;
}
#sp-menu .navbar-nav > li > a.nav-link:hover{ color:#e6ca82; }
/* Child items */
#sp-menu .dropdown-menu .dropdown-item{
display:block;
padding:.45rem 1rem;
}
/* Keep submenus hidden unless opened by Bootstrap */
#sp-menu .navbar .dropdown-menu{ display:none; }
#sp-menu .navbar .dropdown.show > .dropdown-menu,
#sp-menu .navbar a.dropdown-toggle[aria-expanded="true"] + .dropdown-menu{
display:block;
}
/* =========================================================
35. FEATURE CARD CONFLICT CLEANUP
Remove broad override-layer card architecture so the sections
sheet remains the source of truth for card structure.
========================================================= */
:root{
--card-face-focus: 50% 18%;
}
/* Keep override layer from imposing a second card system */
.feature-band .feature-grid,
.feature-band .feature-grid-2x2,
.feature-band .feature-grid-2plus1,
.feature-band .feature-grid-4 {
align-items: stretch;
}
/* Only hygiene resets here — no height, no flex-basis architecture */
.feature-band .feature-card > br {
display: none !important;
}
.feature-band .feature-card > a:first-child > img,
.feature-band .feature-card .feature-image-link > img,
.feature-band .feature-card > img {
object-position: var(--card-face-focus) !important;
}
/* Interior parchment grids must not get a competing card-height system */
.band-parchment .feature-grid,
.band-parchment .feature-grid-2x2 {
align-items: stretch !important;
}
.band-parchment .feature-grid .feature-card,
.band-parchment .feature-grid-2x2 .feature-card {
margin: 0 !important;
}
/* =========================================================
TS UNIFIED CARD SYSTEM
One base card shell + layout variants only
Replace all prior ts-card* blocks with this one
========================================================= */
.ts-card-grid{
display:grid;
grid-template-columns:repeat(12, minmax(0, 1fr));
gap:clamp(16px, 2vw, 24px);
align-items:stretch;
width:100%;
margin:0;
padding:0;
}
.ts-card-grid > .ts-card{
min-width:0;
}
/* layout variants */
.ts-card-grid-4 > .ts-card{
grid-column:span 3;
}
.ts-card-grid-2x2 > .ts-card,
.ts-card-grid-world > .ts-card{
grid-column:span 6;
}
.ts-card-grid-2plus1 > .ts-card{
grid-column:span 6;
}
.ts-card-grid-2plus1 > .ts-card:nth-child(3){
grid-column:3 / 11;
}
/* base card */
.ts-card{
display:flex;
flex-direction:column;
height:100%;
min-height:0;
overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,241,232,.92));
border:1px solid rgba(0,0,0,.06);
border-radius:14px;
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;
}
.ts-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;
}
/* media */
.ts-card-media{
position:relative;
display:block;
width:100%;
flex:0 0 auto;
aspect-ratio:16 / 10;
min-height:160px;
overflow:hidden;
background:#000;
}
.ts-card-media img{
position:absolute;
inset:0;
display:block;
width:100% !important;
max-width:none !important;
height:100% !important;
margin:0 !important;
object-fit:cover;
object-position:50% 20%;
transform:scale(1.02);
transition:transform .35s ease, filter .25s ease;
}
.ts-card:hover .ts-card-media img{
transform:scale(1.06);
filter:saturate(1.08);
}
/* summary */
.ts-card-summary{
display:flex;
flex-direction:column;
justify-content:flex-start;
flex:1 1 auto;
min-height:0;
padding:clamp(14px, 1.8vw, 20px);
overflow:hidden;
}
.ts-card-summary h2{
margin:0 0 .45rem;
}
.ts-card-summary h4,
.ts-card-summary h5{
margin:0;
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.02rem, .95rem + .4vw, 1.28rem);
line-height:1.35;
}
.ts-card-summary p{
margin:.5rem 0 0;
line-height:1.55;
}
/* article-view image cap bypass */
body.com_content.view-article #t4-main-body .ts-card-media img,
body.com_content.view-article #t4-main-body .ts-card img{
width:100% !important;
max-width:none !important;
height:100% !important;
margin:0 !important;
}
/* wrapper whitespace control */
.band-parchment .ts-card-grid,
.feature-band .ts-card-grid,
#t4-main-body .ts-card-grid,
.t4-section .ts-card-grid,
.t4-mod-wrap .ts-card-grid,
.section-inner .ts-card-grid,
.section-ct .ts-card-grid{
margin:0;
padding:0;
}
/* responsive */
@media (max-width: 991.98px){
.ts-card-grid{
grid-template-columns:repeat(6, minmax(0, 1fr));
}
.ts-card-grid-4 > .ts-card,
.ts-card-grid-2x2 > .ts-card,
.ts-card-grid-world > .ts-card,
.ts-card-grid-2plus1 > .ts-card,
.ts-card-grid-2plus1 > .ts-card:nth-child(3){
grid-column:1 / -1;
}
}
/* =========================================================
TS FRONT PAGE CINEMATIC SHOWCASE SYSTEM
Single block for all front-page bands/modules
========================================================= */
/* outer band spacing */
.feature-band{
position:relative;
}
.feature-band .container-responsive{
width:min(1280px, calc(100% - 32px));
margin-inline:auto;
padding-left:clamp(18px,2vw,28px);
padding-right:clamp(18px,2vw,28px);
}
/* header rhythm */
.feature-band .feature-header{
margin:0 0 clamp(18px,2vw,28px);
}
.feature-band .feature-header h1,
.feature-band .feature-header h2{
margin:0 0 .65rem;
}
.feature-band .feature-header h3,
.feature-band .feature-header h4{
margin:0;
max-width:72ch;
line-height:1.45;
}
/* cinematic 2-column showcase */
.ts-showcase{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(28px,4vw,56px);
align-items:center;
}
.ts-showcase-reverse{
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
}
.ts-showcase-copy,
.ts-showcase-media{
min-width:0;
}
.ts-showcase-copy{
position:relative;
z-index:2;
}
.ts-showcase-copy .feature-header{
margin-bottom:clamp(14px,1.8vw,22px);
}
.ts-showcase-copy p,
.ts-showcase-copy h4{
max-width:64ch;
}
.ts-showcase-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:clamp(14px,1.8vw,20px);
}
/* framed media so images never touch band edges */
.ts-showcase-media{
position:relative;
padding:clamp(10px,1.2vw,16px);
border-radius:20px;
overflow:hidden;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
box-shadow:
0 24px 60px rgba(0,0,0,.18),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.ts-showcase-media img{
display:block;
width:100%;
max-width:100%;
height:auto;
margin:0;
border-radius:14px;
object-fit:cover;
object-position:center center;
}
/* landscape default */
.ts-showcase-media img{
aspect-ratio:16 / 10;
}
/* portrait override */
.ts-showcase-media-portrait{
max-width:520px;
margin-inline:auto;
}
.ts-showcase-media-portrait img{
aspect-ratio:4 / 5;
}
/* world / chronicles / sagas / bestiary flavor hooks */
.ts-showcase-world .ts-showcase-copy,
.ts-showcase-chronicles .ts-showcase-copy,
.ts-showcase-journals .ts-showcase-copy,
.ts-showcase-bestiary .ts-showcase-copy{
padding-block:clamp(6px,1vw,12px);
}
/* epigraph */
.ts-epigraph-inner{
max-width:900px;
margin-inline:auto;
text-align:center;
padding:clamp(28px,4vw,48px) 0;
}
.ts-epigraph .epigraph{
margin:0 0 .8rem;
line-height:1.7;
}
.ts-epigraph .source{
margin:0;
}
/* CTA panel */
.ts-cta-panel{
max-width:860px;
margin-inline:auto;
padding:clamp(28px,4vw,44px);
border-radius:22px;
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
box-shadow:
0 24px 60px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.08) inset;
}
.ts-cta .feature-header{
margin-bottom:clamp(14px,1.8vw,22px);
}
.ts-cta .feature-header h4{
max-width:60ch;
margin-inline:auto;
}
.ts-cta .ts-showcase-actions{
justify-content:center;
}
/* remove stray spacer paragraphs inside old modules if they remain */
.feature-band > p,
.feature-band .container-responsive > p:empty,
.feature-band .container-responsive > p:not(:has(*)){
display:none;
}
/* mobile */
@media (max-width: 991.98px){
.ts-showcase,
.ts-showcase-reverse{
grid-template-columns:1fr;
gap:24px;
}
.ts-showcase-media,
.ts-showcase-media-portrait{
max-width:none;
}
.feature-band .container-responsive{
width:min(100%, calc(100% - 20px));
padding-left:14px;
padding-right:14px;
}
.ts-cta-panel{
padding:24px 18px;
}
}
/* ============================================================
TERRA SECUNDUS 1.0.27 — REGRESSION RECOVERY LOCK
Canonical file: css/custom-override.css
Purpose:
- Restore header styling under UN IDs
- Restore feature background images and 3-slide rotation plane
- Restore goldleaf heading treatment
- Restore full-width front-page bands/section structures
- Keep CSS contained in the original uploaded stylesheet chain
============================================================ */
/* ---------- UN root / canvas ---------- */
html,
body.terra-secundus.un-template-terrasecundus {
width: 100%;
min-height: 100%;
margin: 0;
background: #0f1317 !important;
color: #f6f2ea;
overflow-x: clip;
}
body.terra-secundus.un-template-terrasecundus #un-page {
width: 100%;
max-width: none;
min-height: 100vh;
background: #0f1317;
overflow-x: clip;
}
/* ---------- HEADER RESTORE: UN-native, no T4 dependency ---------- */
body.terra-secundus.un-template-terrasecundus #un-header {
position: sticky !important;
top: 0;
z-index: 10000 !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: 78px !important;
min-height: 78px !important;
max-height: 78px !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
overflow: visible !important;
color: #f6f2ea;
background:
radial-gradient(1100px 120px at 18% 0%, rgba(212,176,85,.22), transparent 68%),
radial-gradient(820px 110px at 86% 0%, rgba(0,234,255,.08), transparent 70%),
linear-gradient(90deg, rgba(14,16,17,.98), rgba(8,9,10,.95) 52%, rgba(15,18,19,.98)) !important;
border-bottom: 1px solid rgba(212,176,85,.24) !important;
box-shadow: 0 10px 28px rgba(0,0,0,.55) !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-header-inner,
body.terra-secundus.un-template-terrasecundus #un-header .ts-header-inner {
width: min(100%, 1520px) !important;
height: 78px !important;
margin: 0 auto !important;
padding: 0 clamp(28px, 3.6vw, 64px) !important;
display: grid !important;
grid-template-columns: minmax(280px, .95fr) minmax(420px, 1.18fr) minmax(280px, .72fr) !important;
align-items: center !important;
gap: clamp(18px, 2.4vw, 42px) !important;
box-sizing: border-box !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-brand,
body.terra-secundus.un-template-terrasecundus #un-header #un-menu,
body.terra-secundus.un-template-terrasecundus #un-header .un-header-tools {
min-width: 0;
height: 78px !important;
display: flex !important;
align-items: center !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-brand { justify-content: flex-start !important; }
body.terra-secundus.un-template-terrasecundus #un-header #un-menu { justify-content: center !important; }
body.terra-secundus.un-template-terrasecundus #un-header .un-header-tools { justify-content: flex-end !important; gap: 16px !important; }
body.terra-secundus.un-template-terrasecundus #un-header .un-brand-image,
body.terra-secundus.un-template-terrasecundus #un-header .ts-brand img,
body.terra-secundus.un-template-terrasecundus #un-header .logo img {
display: block !important;
width: auto !important;
max-width: min(360px, 31vw) !important;
max-height: 58px !important;
object-fit: contain !important;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.55)) !important;
}
/* Header menu one row */
body.terra-secundus.un-template-terrasecundus #un-menu ul,
body.terra-secundus.un-template-terrasecundus #un-menu .un-menu-list {
display: flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
overflow: hidden !important;
white-space: nowrap !important;
}
body.terra-secundus.un-template-terrasecundus #un-menu li {
display: inline-flex !important;
align-items: center !important;
height: 44px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.terra-secundus.un-template-terrasecundus #un-menu li + li::before {
content: "•" !important;
margin: 0 clamp(10px, 1.22vw, 18px) !important;
color: rgba(212,176,85,.68) !important;
text-shadow: 0 0 10px rgba(212,176,85,.38) !important;
}
body.terra-secundus.un-template-terrasecundus #un-menu a {
display: inline-flex !important;
align-items: center !important;
height: 44px !important;
color: rgba(246,242,234,.84) !important;
background: transparent !important;
text-decoration: none !important;
text-transform: uppercase !important;
white-space: nowrap !important;
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(.9rem, .72rem + .34vw, 1.08rem) !important;
font-weight: 700 !important;
letter-spacing: .078em !important;
line-height: 1 !important;
}
body.terra-secundus.un-template-terrasecundus #un-menu .active > a,
body.terra-secundus.un-template-terrasecundus #un-menu .current > a,
body.terra-secundus.un-template-terrasecundus #un-menu a:hover,
body.terra-secundus.un-template-terrasecundus #un-menu a:focus {
color: #ffd65c !important;
text-shadow: 0 0 12px rgba(212,176,85,.55), 0 0 18px rgba(0,234,255,.16) !important;
}
/* Header search: clickable real input, tapered shell */
body.terra-secundus.un-template-terrasecundus #un-site-search {
position: relative !important;
z-index: 10002 !important;
display: inline-flex !important;
align-items: center !important;
width: clamp(210px, 16vw, 275px) !important;
max-width: 275px !important;
min-width: 210px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: auto !important;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.58)),
radial-gradient(220px 45px at 82% 0, rgba(212,176,85,.18), transparent 70%) !important;
border: 1px solid rgba(212,176,85,.42) !important;
box-shadow: inset 0 0 22px rgba(0,234,255,.07), 0 0 18px rgba(0,0,0,.36) !important;
clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%) !important;
}
body.terra-secundus.un-template-terrasecundus #un-search-q {
position: relative !important;
z-index: 10003 !important;
display: block !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
height: 46px !important;
margin: 0 !important;
padding: 8px 48px 8px 22px !important;
color: #f6f2ea !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
pointer-events: auto !important;
font-family: "Playfair Display", Georgia, serif !important;
font-size: .96rem !important;
}
body.terra-secundus.un-template-terrasecundus #un-search-q::placeholder { color: rgba(246,242,234,.78) !important; }
body.terra-secundus.un-template-terrasecundus .un-search-button {
position: absolute !important;
z-index: 10004 !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
display: inline-grid !important;
place-items: center !important;
color: #d4b055 !important;
background: transparent !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: none !important;
pointer-events: auto !important;
cursor: pointer !important;
}
body.terra-secundus.un-template-terrasecundus .un-search-button svg {
width: 18px !important;
height: 18px !important;
fill: currentColor !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-account-link {
position: relative;
flex: 0 0 46px !important;
width: 46px !important;
height: 46px !important;
display: inline-grid !important;
place-items: center !important;
border: 2px solid rgba(212,176,85,.45) !important;
border-radius: 999px !important;
color: #f6f2ea !important;
background: radial-gradient(circle at 45% 30%, rgba(246,242,234,.16), rgba(0,0,0,.28) 68%), rgba(0,0,0,.20) !important;
box-shadow: 0 0 18px rgba(212,176,85,.16), inset 0 0 14px rgba(255,255,255,.06) !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-account-svg {
width: 24px;
height: 24px;
fill: currentColor;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-status-dot {
position: absolute;
top: 5px;
right: 4px;
width: 9px;
height: 9px;
border-radius: 999px;
background: #d23b35;
box-shadow: 0 0 10px rgba(210,59,53,.6);
}
body.terra-secundus.un-template-terrasecundus #un-header .is-online .un-status-dot {
background: #44d96c;
box-shadow: 0 0 10px rgba(68,217,108,.72);
}
/* ---------- FRONT PAGE FEATURE SLIDER RESTORE ---------- */
body.terra-secundus.un-template-terrasecundus #un-feature {
position: relative !important;
z-index: 40 !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: clamp(520px, 56vw, 860px) !important;
min-height: 520px !important;
max-height: 860px !important;
margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw) !important;
padding: 0 !important;
overflow: hidden !important;
background: #0f1317 !important;
color: #f6f2ea !important;
isolation: isolate !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .un-section-inner,
body.terra-secundus.un-template-terrasecundus #un-feature .un-row,
body.terra-secundus.un-template-terrasecundus #un-feature .un-column,
body.terra-secundus.un-template-terrasecundus #mod-header-feature,
body.terra-secundus.un-template-terrasecundus #un-feature :is(.un-module,.sp-module,.module,.moduletable,.un-module-shell,.section-inner,.module-inner,.un-module-frame,.section-ct,.module-frame,.un-module-content,.sp-module-content,.module-content,.custom,#ts-hero-slider,.feature-slider-band,.feature-slider) {
position: static !important;
display: block !important;
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: inherit !important;
max-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider {
position: relative !important;
height: 100% !important;
min-height: inherit !important;
background: #0f1317 !important;
}
/* Use hard-coded Terra header art as a safety net; module background still wins if changed inline. */
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide:nth-of-type(1) {
background-image: url('/images/headers/FP-bestiary.png') !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide:nth-of-type(2) {
background-image: url('/images/headers/FP-world.png') !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide:nth-of-type(3) {
background-image: url('/images/headers/FP-lore.png') !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide,
body.terra-secundus.un-template-terrasecundus #un-feature .ts27-slide {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 520px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: cover !important;
background-color: #0f1317 !important;
transition: opacity 850ms ease, visibility 850ms ease !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide::before,
body.terra-secundus.un-template-terrasecundus #un-feature .ts27-slide::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
background:
linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.48) 100%),
radial-gradient(820px 420px at 52% 44%, rgba(255,255,255,.10), transparent 72%) !important;
pointer-events: none !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide.ts27-active,
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide.active,
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide.is-active,
body.terra-secundus.un-template-terrasecundus #un-feature .ts27-slide.ts27-active {
z-index: 3 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .feature-slider > .slide img,
body.terra-secundus.un-template-terrasecundus #un-feature .ts27-slide img {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 520px !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 1 !important;
visibility: visible !important;
margin: 0 !important;
padding: 0 !important;
}
/* Overlay caption */
body.terra-secundus.un-template-terrasecundus #un-feature .slide-overlay {
display: none !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature .ts26-caption,
body.terra-secundus.un-template-terrasecundus #un-feature .ts27-caption,
body.terra-secundus.un-template-terrasecundus #un-feature :is(.slide-content,.feature-hero-content,.carousel-caption,.caption) {
position: absolute !important;
z-index: 5 !important;
left: 50% !important;
top: 48% !important;
transform: translate(-50%, -50%) !important;
width: min(92vw, 1120px) !important;
max-width: 1120px !important;
text-align: center !important;
color: #f6f2ea !important;
background: transparent !important;
pointer-events: auto !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature :is(h1,h2,.slide-title,.feature-title) {
margin: 0 0 clamp(16px, 2.2vw, 30px) !important;
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(2.2rem, 3vw, 4rem) !important;
line-height: 1.04 !important;
color: #f6f2ea !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
text-shadow: 0 2px 3px rgba(0,0,0,.95), 0 0 22px rgba(255,255,255,.35) !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature :is(h3,p,.slide-text,.feature-subtitle) {
max-width: min(90vw, 980px) !important;
margin: 0 auto clamp(18px, 2vw, 28px) !important;
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(1.04rem, 1vw + .82rem, 1.55rem) !important;
line-height: 1.42 !important;
color: rgba(246,242,234,.94) !important;
text-shadow: 0 2px 4px rgba(0,0,0,.9) !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature :is(.btn,.button,a.btn,a.button) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 10px 28px !important;
color: #111 !important;
background: linear-gradient(180deg, #d9b65b, #b58d36) !important;
border: 1px solid rgba(212,176,85,.76) !important;
border-radius: 8px !important;
text-decoration: none !important;
text-transform: uppercase !important;
font-family: Georgia, "Times New Roman", serif !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
box-shadow: 0 8px 18px rgba(0,0,0,.36) !important;
}
/* Feature dots */
body.terra-secundus.un-template-terrasecundus #un-feature :is(.ts26-dots,.ts27-dots,.slider-nav) {
position: absolute !important;
z-index: 8 !important;
left: 50% !important;
bottom: clamp(22px, 4vw, 58px) !important;
transform: translateX(-50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
width: auto !important;
height: 14px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature :is(.ts26-dot,.ts27-dot,.slider-nav button,.slider-nav .dot) {
display: block !important;
width: 12px !important;
height: 12px !important;
min-width: 12px !important;
max-width: 12px !important;
min-height: 12px !important;
max-height: 12px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 999px !important;
border: 1px solid rgba(246,242,234,.55) !important;
background: rgba(246,242,234,.35) !important;
box-shadow: 0 0 8px rgba(0,0,0,.5) !important;
text-indent: -9999px !important;
overflow: hidden !important;
cursor: pointer !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature :is(.ts26-dot.ts26-active,.ts27-dot.ts27-active,.ts27-dot.active,.slider-nav .active) {
background: rgba(212,176,85,.92) !important;
border-color: rgba(212,176,85,1) !important;
}
/* ---------- HERO RESTORE ---------- */
body.terra-secundus.un-template-terrasecundus #un-hero,
body.terra-secundus.un-template-terrasecundus #ts-hero-band {
position: relative !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: clamp(520px, 58vw, 850px) !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
overflow: hidden !important;
background: #0f1317 !important;
color: #f6f2ea !important;
isolation: isolate !important;
}
body.terra-secundus.un-template-terrasecundus #un-hero :is(.un-section-inner,.un-row,.un-column,#mod-hero,.un-module,.sp-module,.module,.un-module-shell,.section-inner,.un-module-frame,.section-ct,.un-module-content,.sp-module-content,.module-content,.custom) {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
overflow: visible !important;
border: 0 !important;
box-shadow: none !important;
}
body.terra-secundus.un-template-terrasecundus #ts-hero-band .hero-bg {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: inherit !important;
object-fit: cover !important;
object-position: center center !important;
opacity: .86 !important;
}
body.terra-secundus.un-template-terrasecundus #ts-hero-band::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
background:
radial-gradient(900px 520px at 50% 38%, rgba(255,255,255,.09), transparent 70%),
linear-gradient(180deg, rgba(15,19,23,.20), rgba(15,19,23,.68) 100%) !important;
pointer-events: none !important;
}
body.terra-secundus.un-template-terrasecundus #ts-hero-band .header-title,
body.terra-secundus.un-template-terrasecundus #ts-hero-band .responsive-section {
position: relative !important;
z-index: 3 !important;
}
body.terra-secundus.un-template-terrasecundus #ts-hero-band .header-title {
max-width: min(92vw, 1280px) !important;
margin: 0 auto clamp(22px, 3vw, 44px) !important;
padding-top: clamp(90px, 12vw, 160px) !important;
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(3rem, 5.2vw, 6.2rem) !important;
line-height: .98 !important;
text-align: center !important;
color: #f6f2ea !important;
text-shadow: 0 4px 6px rgba(0,0,0,.86), 0 0 22px rgba(255,255,255,.22) !important;
background: none !important;
-webkit-text-fill-color: currentColor !important;
}
/* Goldleaf subtitle / major heading */
body.terra-secundus.un-template-terrasecundus .ts-goldleaf,
body.terra-secundus.un-template-terrasecundus #ts-hero-band .header-subtitle,
body.terra-secundus.un-template-terrasecundus :is(.feature-header h2,.section-title,.goldleaf,.band-bronze h1,.band-parchment h1) {
color: #d4b055 !important;
background: linear-gradient(180deg, #fff8d4 0%, #e8ca69 31%, #aa781f 58%, #f6df83 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
text-shadow: 0 2px 3px rgba(0,0,0,.72), 0 0 14px rgba(212,176,85,.25) !important;
}
body.terra-secundus.un-template-terrasecundus #ts-hero-band .header-subtitle {
max-width: min(90vw, 1100px) !important;
margin: 0 auto clamp(26px, 3vw, 44px) !important;
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(1.55rem, 2.8vw, 3.4rem) !important;
line-height: 1.12 !important;
text-align: center !important;
font-weight: 700 !important;
}
/* ---------- FULL-WIDTH FRONT PAGE BANDS + STRUCTURE ---------- */
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-section-7,#un-footnav,#un-footer) {
position: relative !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding: 0 !important;
overflow-x: clip !important;
clear: both !important;
}
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-section-7) :is(.un-section-inner,.un-row,.un-column,.un-position-hook,.un-module,.sp-module,.module,.moduletable,.un-module-shell,.section-inner,.un-module-frame,.section-ct,.un-module-content,.sp-module-content,.module-content,.custom) {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.terra-secundus.un-template-terrasecundus :is(.fullwidth,.feature-band,.ts-glance-band,.ts-path-band,.ts-start-band,.ts-featured-band,.ts-triad-band,.ts-latest-band,.epigraph-band,.band-mist,.band-nightfall,.ts-gallery-band,.ts-value-band) {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
overflow: hidden !important;
}
body.terra-secundus.un-template-terrasecundus .container-responsive,
body.terra-secundus.un-template-terrasecundus .responsive-section {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(18px, 3vw, 44px) !important;
padding-right: clamp(18px, 3vw, 44px) !important;
box-sizing: border-box !important;
}
/* Section palette recovery */
body.terra-secundus.un-template-terrasecundus :is(.ts-glance-band,.ts-start-band,.ts-value-band) {
background: linear-gradient(180deg, #eee8da, #dfd3b9) !important;
color: #1b1712 !important;
padding: clamp(60px, 7vw, 110px) 0 !important;
}
body.terra-secundus.un-template-terrasecundus :is(.ts-path-band,.ts-featured-band,.ts-latest-band,.ts-gallery-band) {
background: linear-gradient(180deg, #0f171d, #0a0d10) !important;
color: #f6f2ea !important;
padding: clamp(70px, 7vw, 120px) 0 !important;
}
body.terra-secundus.un-template-terrasecundus :is(.feature-band,.band-mist) {
padding: clamp(70px, 7vw, 120px) 0 !important;
}
body.terra-secundus.un-template-terrasecundus .band-nightfall,
body.terra-secundus.un-template-terrasecundus .ts-cta,
body.terra-secundus.un-template-terrasecundus .epigraph-band {
background: linear-gradient(180deg, #151a1d, #080a0c) !important;
color: #f6f2ea !important;
padding: clamp(70px, 7vw, 120px) 0 !important;
}
/* Typography scale recovery */
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-main) h1 {
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(2.2rem, 2.6vw, 4rem) !important;
line-height: 1.08 !important;
margin: 0 0 .65em !important;
}
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-main) h2 {
font-family: var(--legend, "Playfair Display", Georgia, serif) !important;
font-size: clamp(1.85rem, 2vw, 3.35rem) !important;
line-height: 1.12 !important;
margin: 0 0 .55em !important;
}
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-main) h3 {
font-size: clamp(1.25rem, 1.1vw, 2rem) !important;
line-height: 1.18 !important;
margin: 0 0 .55em !important;
}
body.terra-secundus.un-template-terrasecundus :is(#un-section-1,#un-section-2,#un-section-3,#un-section-4,#un-section-5,#un-section-6,#un-main) h4 {
font-size: clamp(1.02rem, .75vw, 1.35rem) !important;
line-height: 1.45 !important;
margin: 0 0 1.15em !important;
font-weight: 600 !important;
}
/* Homepage grids / columns */
body.terra-secundus.un-template-terrasecundus .ts-glance-grid {
display: grid !important;
grid-template-columns: repeat(6, minmax(120px, 1fr)) !important;
gap: clamp(14px, 1.8vw, 24px) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-path-portal-grid,
body.terra-secundus.un-template-terrasecundus .ts-triad-grid,
body.terra-secundus.un-template-terrasecundus .ts-value-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: clamp(18px, 2vw, 32px) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-value-grid {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-showcase,
body.terra-secundus.un-template-terrasecundus .ts-featured-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr) !important;
align-items: center !important;
gap: clamp(32px, 5vw, 80px) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-showcase-reverse {
grid-template-columns: minmax(320px, .95fr) minmax(0, 1.05fr) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-featured-side,
body.terra-secundus.un-template-terrasecundus .ts-latest-feed {
display: grid !important;
gap: clamp(18px, 2vw, 28px) !important;
}
body.terra-secundus.un-template-terrasecundus :is(.ts-glance-card,.ts-path-portal,.ts-triad-card,.ts-featured-lead,.ts-featured-mini,.ts-latest-row,.ts-value-item,.ts-cta-panel) {
border: 1px solid rgba(212,176,85,.18) !important;
border-radius: 18px !important;
padding: clamp(22px, 2.4vw, 36px) !important;
background: rgba(255,255,255,.06) !important;
box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-glance-card,
body.terra-secundus.un-template-terrasecundus .ts-value-item {
text-align: center !important;
text-decoration: none !important;
}
body.terra-secundus.un-template-terrasecundus .ts-showcase-media img,
body.terra-secundus.un-template-terrasecundus .ts-gallery-strip img {
display: block !important;
width: 100% !important;
height: auto !important;
border-radius: 18px !important;
box-shadow: 0 20px 46px rgba(0,0,0,.34) !important;
}
body.terra-secundus.un-template-terrasecundus .ts-gallery-strip {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: clamp(12px, 1.8vw, 22px) !important;
}
/* Main empty featured area should not create white/gap blocks on front page. */
body.terra-secundus.un-template-terrasecundus.view-featured #un-main,
body.terra-secundus.un-template-terrasecundus.item-101 #un-main {
margin: 0 !important;
padding: 0 !important;
min-height: 0 !important;
background: #0f1317 !important;
}
body.terra-secundus.un-template-terrasecundus.view-featured #un-main .blog-featured:empty,
body.terra-secundus.un-template-terrasecundus.item-101 #un-main .blog-featured:empty {
display: none !important;
}
/* Footer */
body.terra-secundus.un-template-terrasecundus #un-footnav,
body.terra-secundus.un-template-terrasecundus #un-footer,
body.terra-secundus.un-template-terrasecundus .site-footer {
background: linear-gradient(180deg, #171b1d, #090b0d) !important;
color: #f6f2ea !important;
}
body.terra-secundus.un-template-terrasecundus .footer-inner {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: clamp(44px, 5vw, 82px) clamp(18px, 3vw, 44px) !important;
}
body.terra-secundus.un-template-terrasecundus .footer-grid {
display: grid !important;
grid-template-columns: 1.2fr repeat(4, 1fr) !important;
gap: clamp(22px, 3vw, 44px) !important;
}
/* Disable old vertical/malformed dots outside active feature host */
body.terra-secundus.un-template-terrasecundus :is(.ts26-dots,.slider-nav,.carousel-indicators,.slick-dots,.swiper-pagination):not(#un-feature *) {
display: none !important;
}
@media (max-width: 1180px) {
body.terra-secundus.un-template-terrasecundus #un-header,
body.terra-secundus.un-template-terrasecundus #un-header .un-header-inner {
height: auto !important;
min-height: 78px !important;
max-height: none !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-header-inner {
grid-template-columns: 1fr !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
row-gap: 10px !important;
}
body.terra-secundus.un-template-terrasecundus #un-header .un-brand,
body.terra-secundus.un-template-terrasecundus #un-header #un-menu,
body.terra-secundus.un-template-terrasecundus #un-header .un-header-tools {
height: auto !important;
justify-content: center !important;
}
body.terra-secundus.un-template-terrasecundus #un-feature {
height: 70vh !important;
min-height: 480px !important;
}
}
@media (max-width: 900px) {
body.terra-secundus.un-template-terrasecundus .ts-glance-grid,
body.terra-secundus.un-template-terrasecundus .ts-path-portal-grid,
body.terra-secundus.un-template-terrasecundus .ts-triad-grid,
body.terra-secundus.un-template-terrasecundus .ts-value-grid,
body.terra-secundus.un-template-terrasecundus .ts-showcase,
body.terra-secundus.un-template-terrasecundus .ts-showcase-reverse,
body.terra-secundus.un-template-terrasecundus .ts-featured-layout,
body.terra-secundus.un-template-terrasecundus .ts-gallery-strip,
body.terra-secundus.un-template-terrasecundus .footer-grid {
grid-template-columns: 1fr !important;
}
}