/* ========================================================================== SexTrader site-root landing page (/) -------------------------------------------------------------------------- Loaded in via head.php's $extraStyles hook. The page uses the full site chrome (header/menus/footer); styles.css owns the theme (blue background image, yellow text). This file adds a more polished, executive one-page layout for the marketing content. Everything is scoped under .home so it cannot affect the shared chrome (the bare-selector lesson from properties/payment). styles.css's .page-content centres at 600px; .home widens to 760px for a landing-page feel, still centred, still yellow-on-blue. ========================================================================== */ /* Let the shared .page-content span full width (it caps at 600px by default), then centre the inner .home block with margin:auto. Centring via margin:auto on a max-width block is bulletproof - it does not depend on the flex container's justify-content + max-width interaction, which left the block off-centre. */ .home-wrap { max-width: none; } .home { --yellow: #FFFF00; --blue: #0000FF; --dim: #CCCC00; --line: #999900; --panel: rgba(0, 0, 40, 0.45); /* subtle darken over the background image, keeps text legible */ max-width: 680px; /* one tidy centred column - keeps line length sane */ margin-left: auto; margin-right: auto; text-align: center; /* all text centred (owner preference) */ color: var(--yellow); } .home * { box-sizing: border-box; } /* Text is centre-aligned. Paragraphs get a readable max-width and are centred with margin:auto, so they sit as a tidy centred block under the centred headings rather than as full-width centred lines. */ .home-section > p, .home-established-copy p { max-width: 58ch; margin-left: auto; margin-right: auto; } /* Rhythm: generous, even spacing reads as considered and premium. */ .home section { margin: 0 0 34px; } .home h1, .home h2, .home h3 { color: var(--yellow); } /* only top/bottom here - a `margin: 0 0 12px` shorthand would reset left/right to 0 and defeat the margin:auto centring on .home-section > p below. */ .home p { color: var(--yellow); font-size: 16px; line-height: 1.6; margin-top: 0; margin-bottom: 12px; } .home strong { color: var(--yellow); } /* ----- Hero ----- */ .home-hero { text-align: center; padding: 8px 4px 6px; margin-bottom: 30px; } .home-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--dim); margin: 0 0 12px; } .home-h1 { font-size: 30px; line-height: 1.2; font-weight: 800; margin: 0 auto 14px; max-width: 15ch; } .home-lead { font-size: 17px; line-height: 1.6; max-width: 56ch; margin: 0 auto; color: var(--yellow); } /* ----- Established: the live years figure beside the copy ----- */ .home-established { display: flex; gap: 20px; align-items: center; border: 1.5px solid var(--yellow); border-radius: 16px; background: var(--panel); padding: 20px; } .home-yearsfig { flex: 0 0 auto; text-align: center; line-height: 1; display: flex; flex-direction: column; align-items: center; padding-right: 20px; border-right: 1px solid var(--line); } .home-yearsnum { font-size: 64px; font-weight: 800; letter-spacing: -1px; } .home-yearsword { text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; color: var(--dim); margin-top: 6px; line-height: 1.3; } .home-established-copy h2 { font-size: 22px; margin: 0 0 8px; font-weight: 700; } .home-established-copy p { margin: 0; } /* ----- Standard section ----- */ .home-section h2 { font-size: 22px; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } /* ----- Digital toolkit cards ----- */ .home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; } .home-card { border: 1.5px solid var(--yellow); border-radius: 12px; padding: 16px; background: var(--panel); } .home-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; } .home-card p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--yellow); } .home-toolkit-note { text-align: center; color: var(--dim); margin-top: 14px; font-size: 15px; } /* ----- Why us ----- */ .home-why { list-style: none; margin: 6px 0 0; padding: 0; } .home-why li { padding: 8px 0; font-size: 16px; line-height: 1.5; border-bottom: 1px solid rgba(153, 153, 0, 0.4); } .home-why li:last-child { border-bottom: none; } .home-why li::before { content: "\2713\00a0\00a0"; /* check mark + spaces, inline so the centred item stays tidy */ color: var(--yellow); font-weight: 700; } /* ----- Closing ----- */ .home-closing { text-align: center; margin-top: 8px; padding: 20px; border-top: 1px solid var(--line); } .home-closing p { font-size: 18px; line-height: 1.5; margin: 0; } /* ----- Mobile ----- */ @media (max-width: 600px) { .home-h1 { font-size: 25px; } .home-lead { font-size: 16px; } .home-cards { grid-template-columns: 1fr; } /* stack cards */ .home-established { flex-direction: column; text-align: center; gap: 14px; } .home-yearsfig { padding-right: 0; border-right: none; padding-bottom: 14px; border-bottom: 1px solid var(--line); width: 100%; } .home-yearsnum { font-size: 56px; } }