/** * Travian SS — public landing page (index.php) content sections. * * Scope: ONLY the new marketing sections added to index.php (hero copy, * feature grid, tribes grid, FAQ, final call-to-action, footer sitemap). * Every class here is prefixed `tss-lp-` so nothing collides with the * existing gamepack selectors (#content, .grit, .infobox, .secondarybox, * #player_counter, ...) that the portal already uses for the stats box, * screenshots gallery and news box — those keep using gpack/travian/main.css * untouched. * * Hand-authored plain CSS — not part of the Tailwind build pipeline * (css/tailwind-*.src.css). Safe to hand-edit; no `npm run build:css` step. * * Colour palette: the in-game "graphite / stone / gold" chrome used on * village1 etc., reached through the --color-tss-* custom properties that * css/travian-ss-chrome.css publishes on :root. index.php includes * head_assets.tpl (and therefore the chrome sheet) one line ABOVE the link * to this file, so the tokens are always defined by the time these rules * are parsed; each var() still carries a literal fallback so the page * degrades to the right colours if the chrome sheet is ever removed. * * They used to be copied here as plain hex, which is how the homepage came * to be repainted separately from the game. Referencing the tokens is what * keeps one repaint from having to happen twice. * * RTL: written with logical properties (margin-inline-*, text-align: * start/end) and CSS Grid/Flexbox, both of which already flip direction * from the `dir="rtl"` attribute set on by index.php — no separate * RTL stylesheet needed for these sections. */ /* A little breathing room between the top nav links — main.css already * gives each link a 44px touch target, it just butts them together with no * gap between s. */ body.indexPage #navigation .menu td { padding: 0 6px; } .tss-skip-link { position: absolute; inset-inline-start: 8px; top: -48px; z-index: 1000; background: var(--color-tss-gold-300, #fcd34d); color: var(--color-tss-graphite-900, #272a2e); padding: 10px 18px; border-radius: 6px; font-weight: 700; text-decoration: none; transition: top 0.15s ease; } .tss-skip-link:focus { top: 8px; } .tss-landing { font-family: "Tajawal", "Cairo", Tahoma, Arial, sans-serif; color: var(--color-tss-stone-ink, #3c4147); } .tss-landing * { box-sizing: border-box; } .tss-lp-container { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 16px; } .tss-lp-section { padding-block: 40px; } .tss-lp-head { text-align: center; max-width: 760px; margin: 0 auto 28px; } .tss-lp-kicker { display: inline-block; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--color-tss-stone-label, #5b6169); background: var(--color-tss-gold-pill-top, #fde68a); padding: 4px 14px; border-radius: 999px; margin-bottom: 12px; } .tss-lp-heading { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: clamp(22px, 3.4vw, 32px); line-height: 1.3; color: var(--color-tss-graphite-900, #272a2e); margin: 0 0 10px; } .tss-lp-sub { font-size: 15px; line-height: 1.7; color: var(--color-tss-stone-label, #5b6169); margin: 0; } /* ---------------- Balance the "what is" and "screenshots/news" columns ---- * .grit .infobox and .grit .secondarybox (gpack/travian/main.css) are plain * inline-block boxes, so whichever has less content (secondarybox) ends up * visibly shorter and out of balance with the other. Stretching both to the * row's full height via flex fixes that without touching their decorative * sprite backgrounds (info_background.jpg / news_background.jpg repeat * vertically, screenshots_background.jpg is already background-size:100% * 100%, so both keep covering the box at any height). */ body.indexPage #content .grit { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; } body.indexPage .grit .infobox, body.indexPage .grit .secondarybox { display: flex; flex-direction: column; margin-top: 0 !important; margin-bottom: 0 !important; } body.indexPage .grit .secondarybox #newsbox { display: flex; flex-direction: column; flex: 1; } body.indexPage .grit .secondarybox #newsbox .news { flex: 1; } /* ---------------- Stats row (replaces the old #player_counter sprite table, * whose absolutely-positioned table overflowed its 98px-tall background and * overlapped the "about the game" bullets below it) ------------------------ */ .tss-lp-stats { display: flex; gap: 8px; margin: 14px 0; } .tss-lp-stat { flex: 1; text-align: center; background: linear-gradient(180deg, var(--color-tss-graphite-750, #41454b), var(--color-tss-graphite-850, #2f3237)); border: 1px solid var(--color-tss-link, #33526b); border-radius: 10px; padding: 10px 4px; } .tss-lp-stat-num { display: block; font-family: "Inter", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: 20px; color: var(--color-tss-gold-300, #fcd34d); line-height: 1.2; } .tss-lp-stat-label { display: block; font-size: 11px; line-height: 1.4; color: var(--color-tss-mist-200, #e6e8ea); margin-top: 2px; } /* ---------------- Hero ---------------- */ .tss-lp-hero { text-align: center; padding-block: 28px 8px; } .tss-lp-hero-band { background: linear-gradient(180deg, var(--color-tss-graphite-800, #383c41), var(--color-tss-graphite-900, #272a2e)); } .tss-lp-hero-kicker { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 14px; color: var(--color-tss-gold-300, #fcd34d); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); margin: 0 0 8px; } .tss-lp-hero-title { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: clamp(24px, 4.4vw, 40px); line-height: 1.25; color: var(--color-tss-stone-50, #f8f8f7); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55); margin: 0 0 14px; max-width: 820px; margin-inline: auto; } .tss-lp-hero-subtitle { font-size: clamp(14px, 1.6vw, 17px); line-height: 1.8; color: var(--color-tss-stone-100, #ececeb); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); max-width: 680px; margin: 0 auto 22px; } .tss-lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 6px; } /* ---------------- Buttons ---------------- */ .tss-lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 15px; line-height: 1; text-decoration: none; padding: 13px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .tss-lp-btn:hover { transform: translateY(-1px); } .tss-lp-btn-primary { background: linear-gradient(180deg, var(--color-tss-gold-pill-top, #fde68a), var(--color-tss-gold-pill-mid, #f59e0b) 60%, var(--color-tss-gold-pill-bottom, #b45309)); color: var(--color-tss-gold-ink, #43301a); box-shadow: 0 3px 0 var(--color-tss-link, #33526b), 0 6px 14px rgba(0, 0, 0, 0.35); } .tss-lp-btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--color-tss-stone-50, #f8f8f7); border-color: rgba(255, 247, 223, 0.5); } .tss-lp-btn-secondary:hover { background: rgba(255, 255, 255, 0.16); } /* ---------------- Call-to-action support elements ---------------- * The primary button is deliberately the only gold element in each block: * the reassurance list, bonus line and social proof around it are quiet by * design so nothing competes with the thing we want clicked. */ .tss-lp-btn-lg { font-size: 17px; padding: 16px 34px; } .tss-lp-reassure { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; font-size: 13px; color: var(--color-tss-mist-300, #c4c9ce); } .tss-lp-reassure li { position: relative; padding-inline-start: 20px; } .tss-lp-reassure li::before { content: "\2713"; position: absolute; inset-inline-start: 0; color: #6ee7a8; font-weight: 700; } .tss-lp-bonus { margin: 12px 0 0; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--color-tss-gold-300, #fcd34d); } .tss-lp-proof { margin: 10px 0 0; font-size: 13px; color: #b9bec4; } /* Round-over notice: replaces the registration call to action while the world is read-only, so the page stops promising a signup that redirects away. */ .tss-lp-roundover { max-width: 640px; margin: 0 auto 20px; padding: 16px 20px; border: 1px solid rgba(252, 211, 77, 0.45); border-radius: 12px; background: rgba(252, 211, 77, 0.08); } .tss-lp-roundover-title { margin: 0 0 6px; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: 17px; color: var(--color-tss-gold-300, #fcd34d); } .tss-lp-roundover-text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-tss-mist-200, #e6e8ea); } /* ---------------- Round countdown ---------------- * Shown in the hero for the whole grace period between "the Wonder was won" * and "the world closes". Digits are monospaced-by-width (tabular figures via * a fixed min-width) so the clock does not jitter as the numbers tick. */ .tss-lp-countdown { max-width: 640px; margin: 18px auto 0; padding: 16px 20px; border: 1px solid rgba(252, 211, 77, 0.45); border-radius: 12px; background: rgba(252, 211, 77, 0.08); } .tss-lp-countdown-label { margin: 0 0 10px; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 14px; color: var(--color-tss-gold-300, #fcd34d); } .tss-lp-countdown-clock { margin: 0; display: flex; align-items: flex-start; justify-content: center; gap: 6px; /* A clock is a number, not prose: keep it left-to-right in Arabic too. */ direction: ltr; } .tss-lp-cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 62px; } .tss-lp-cd-num { font-family: "Inter", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--color-tss-stone-50, #f8f8f7); font-variant-numeric: tabular-nums; } .tss-lp-cd-cap { font-size: 11px; color: var(--color-tss-mist-300, #c4c9ce); margin-top: 2px; } .tss-lp-cd-sep { font-family: "Inter", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.2; color: rgba(252, 211, 77, 0.65); } .tss-lp-countdown-note { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-tss-mist-200, #e6e8ea); } /* The timer hit zero; the page reloads a moment later. */ .tss-lp-countdown-done .tss-lp-cd-num { color: #f4a4a4; } /* ---------------- Feature grid ---------------- */ .tss-lp-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; } .tss-lp-feature-card { background: linear-gradient(180deg, var(--color-tss-stone-50, #f8f8f7), var(--color-tss-stone-100, #ececeb)); border: 1px solid #dcdcda; border-radius: 12px; padding: 20px 18px; text-align: start; box-shadow: 0 2px 6px rgba(42, 26, 12, 0.08); } .tss-lp-feature-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(180deg, var(--color-tss-graphite-750, #41454b), var(--color-tss-graphite-850, #2f3237)); color: var(--color-tss-gold-300, #fcd34d); margin-bottom: 12px; } .tss-lp-feature-icon svg { width: 24px; height: 24px; } .tss-lp-feature-title { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--color-tss-graphite-900, #272a2e); margin: 0 0 6px; } .tss-lp-feature-desc { font-size: 14px; line-height: 1.7; color: var(--color-tss-stone-label, #5b6169); margin: 0; } /* ---------------- Tribes ---------------- */ .tss-lp-tribes { background: linear-gradient(180deg, var(--color-tss-graphite-800, #383c41), var(--color-tss-graphite-900, #272a2e)); } .tss-lp-tribes .tss-lp-heading { color: var(--color-tss-stone-50, #f8f8f7); } .tss-lp-tribes .tss-lp-sub { color: var(--color-tss-mist-300, #c4c9ce); } .tss-lp-tribes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .tss-lp-tribe-card { background: linear-gradient(180deg, var(--color-tss-graphite-750, #41454b), var(--color-tss-graphite-800, #383c41)); border: 1px solid var(--color-tss-link, #33526b); border-radius: 12px; padding: 16px; } .tss-lp-tribe-name { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 800; font-size: 16px; color: var(--color-tss-gold-300, #fcd34d); margin: 0 0 8px; } .tss-lp-tribe-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .tss-lp-tribe-traits li { font-size: 13px; line-height: 1.6; color: var(--color-tss-mist-200, #e6e8ea); padding-inline-start: 18px; position: relative; } .tss-lp-tribe-traits li::before { content: "\2726"; position: absolute; inset-inline-start: 0; color: var(--color-tss-gold-300, #fcd34d); font-size: 11px; top: 3px; } .tss-lp-tribe-card { display: flex; flex-direction: column; position: relative; } /* The recommended tribe is the shortest path to a first successful game, so it is the one card that is visually promoted. */ .tss-lp-tribe-best { border-color: var(--color-tss-gold-300, #fcd34d); box-shadow: 0 0 0 1px rgba(252, 211, 77, 0.35); } .tss-lp-tribe-badge { align-self: flex-start; background: linear-gradient(180deg, var(--color-tss-gold-pill-top, #fde68a), var(--color-tss-gold-pill-mid, #f59e0b)); color: var(--color-tss-gold-ink, #43301a); font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 11px; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; } .tss-lp-tribe-traits { flex: 1; } /* Choosing a tribe is the moment a visitor has decided how they want to play — the card carries its own way to act on that instead of making them scroll back to a button. */ .tss-lp-tribe-cta { display: block; margin-top: 14px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(252, 211, 77, 0.55); background: rgba(252, 211, 77, 0.1); color: var(--color-tss-gold-300, #fcd34d) !important; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 13px; text-align: center; text-decoration: none !important; } .tss-lp-tribe-cta:hover { background: var(--color-tss-gold-pill-mid, #f59e0b); color: var(--color-tss-gold-ink, #43301a) !important; border-color: var(--color-tss-gold-pill-mid, #f59e0b); } /* ---------------- FAQ ---------------- */ .tss-lp-faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; } .tss-lp-faq-item { background: var(--color-tss-stone-50, #f8f8f7); border: 1px solid #dcdcda; border-radius: 10px; padding: 4px 18px; } .tss-lp-faq-item summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--color-tss-graphite-900, #272a2e); padding: 14px 0; list-style: none; } .tss-lp-faq-item summary::-webkit-details-marker { display: none; } .tss-lp-faq-item summary::after { content: "+"; flex: none; font-weight: 800; color: var(--color-tss-gold-pill-bottom, #b45309); } .tss-lp-faq-item[open] summary::after { content: "\2212"; } .tss-lp-faq-item p { font-size: 14px; line-height: 1.75; color: var(--color-tss-stone-label, #5b6169); margin: 0 0 16px; } /* ---------------- Final CTA band ---------------- */ .tss-lp-cta-band { background: linear-gradient(180deg, var(--color-tss-graphite-750, #41454b), var(--color-tss-graphite-900, #272a2e)); border-radius: 16px; padding: 36px 24px; text-align: center; } .tss-lp-cta-band .tss-lp-heading { color: var(--color-tss-stone-50, #f8f8f7); } .tss-lp-cta-band .tss-lp-sub { color: var(--color-tss-mist-300, #c4c9ce); margin-bottom: 20px; } /* ---------------- Footer sitemap ---------------- */ .tss-lp-footer-band { display: block; background: linear-gradient(180deg, var(--color-tss-graphite-850, #2f3237), var(--color-tss-graphite-950, #1d1f22)); padding-block: 28px; } .tss-lp-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; text-align: start; margin-bottom: 18px; } .tss-lp-footer-about { font-size: 13px; line-height: 1.7; color: #b9bec4; max-width: 320px; } .tss-lp-footer-title { font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; font-weight: 700; font-size: 13px; color: var(--color-tss-gold-300, #fcd34d); margin: 0 0 10px; } .tss-lp-footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tss-lp-footer-nav a { color: var(--color-tss-mist-200, #e6e8ea); text-decoration: none; font-size: 13px; } .tss-lp-footer-nav a:hover { color: var(--color-tss-gold-300, #fcd34d); text-decoration: underline; } @media (max-width: 600px) { .tss-lp-section { padding-block: 28px; } .tss-lp-hero-ctas { flex-direction: column; align-items: stretch; } .tss-lp-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .tss-lp-btn { transition: none; } }