/* ========================================================================== UNICUS MARKETING — TERMS OF USE PAGE STYLESHEET File: /assets/css/terms.css Version: 1.0 ========================================================================== AI / DEVELOPER REFERENCE — APPROVED PAGE STANDARD PURPOSE This file contains only the presentation rules unique to terms.php. It must load after /assets/css/global.css. REQUIRED PAGE HOOK The Terms page body element must include: APPROVED FONT SYSTEM Display / headlines: "Bebas Neue", sans-serif Body / interface: "Inter", Arial, sans-serif APPROVED BRAND FOUNDATION Primary copper: #e48240 Visual direction: dark, cinematic, precise, restrained ARCHITECTURE RULES - Keep every selector scoped beneath .page-terms. - Keep only Terms-page sections and responsive rules here. - Do not duplicate resets, header, navigation, footer, or shared components. - Do not move these rules into terms.php. - Do not use inline CSS. CONTENTS 01. Terms Page Controls 02. Shared Privacy Elements 03. Terms Hero 04. TERMS LAYOUT 05. TERMS INDEX 06. TERMS CONTENT 07. Contact Card 08. Responsive — Tablet 09. Responsive — Mobile ========================================================================== */ /* ========================================================================== 01. TERMS PAGE CONTROLS ========================================================================== */ .page-terms { --terms-line: rgba(var(--primary-rgb), 0.22); --terms-line-soft: rgba(var(--white-rgb), 0.12); --terms-panel: #0d0d0d; --terms-panel-soft: #101010; --terms-copy: #b8b4ae; --terms-copy-strong: #dedad3; --terms-hero-overlay: 0.88; --terms-section-padding: 145px; --terms-section-padding-mobile: 88px; } .page-terms .terms-page { overflow: hidden; background: var(--black); } .page-terms .wrap { width: min(var(--site-max), calc(100% - (var(--site-gutter) * 2))); margin: 0 auto; } /* ========================================================================== 02. SHARED TERMS ELEMENTS ========================================================================== */ .page-terms h1, .page-terms h2, .page-terms h3, .page-terms p { margin-top: 0; } .page-terms h1, .page-terms h2, .page-terms h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; } .page-terms .eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; color: var(--primary); font-family: var(--font-body); font-size: var(--hero-eyebrow-size); font-weight: 700; line-height: 1; letter-spacing: var(--hero-eyebrow-spacing); text-transform: uppercase; } .page-terms .eyebrow::before { content: ""; width: 42px; height: 1px; background: var(--primary); } /* ========================================================================== 03. TERMS HERO ========================================================================== */ .page-terms .terms-hero { position: relative; min-height: 63vh; display: flex; align-items: flex-end; isolation: isolate; background: #080808; } .page-terms .terms-hero-background { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(5, 5, 5, var(--terms-hero-overlay)) 0%, rgba(5, 5, 5, 0.76) 48%, rgba(5, 5, 5, 0.34) 100%), linear-gradient(0deg, rgba(7, 7, 7, 0.92) 0%, transparent 48%), radial-gradient(circle at 78% 36%, rgba(var(--primary-rgb), 0.18), transparent 28%), url("../images/terms-hero-background.jpg") center 42% / cover no-repeat; } .page-terms .terms-hero::after { content: "TERMS"; position: absolute; right: -2%; bottom: -10%; z-index: -1; color: rgba(var(--white-rgb), .022); font: 700 clamp(210px, 26vw, 410px) / .8 var(--font-display); letter-spacing: -.05em; pointer-events: none; } .page-terms .terms-hero-content { padding: 105px 0 58px; } .page-terms .terms-hero h1 { max-width: 1050px; margin-bottom: 24px; color: var(--white); font-size: var(--hero-heading-size); line-height: var(--hero-heading-line); letter-spacing: var(--hero-heading-spacing); } .page-terms .terms-hero h1 span { color: var(--primary); } .page-terms .terms-intro { max-width: 790px; margin: 0; color: var(--light-gray); font-family: var(--font-body); font-size: var(--hero-copy-size); line-height: var(--hero-copy-line); } /* ========================================================================== 04. POLICY LAYOUT ========================================================================== */ .page-terms .terms-content-section { position: relative; padding: var(--terms-section-padding) 0 170px; background: radial-gradient(circle at 82% 10%, rgba(var(--primary-rgb), .07), transparent 26%), transparent; } .page-terms .terms-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(70px, 8vw, 130px); align-items: start; } /* ========================================================================== 05. POLICY INDEX ========================================================================== */ .page-terms .terms-index { position: sticky; top: 125px; padding-top: 4px; } .page-terms .terms-index-label { margin-bottom: 24px; color: var(--primary); font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .page-terms .terms-index nav { display: grid; border-top: 1px solid var(--terms-line); } .page-terms .terms-index a { position: relative; display: block; padding: 14px 0; border-bottom: 1px solid var(--terms-line-soft); color: #8f8b85; font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.45; text-decoration: none; transition: color 180ms ease, padding-left 180ms ease; } .page-terms .terms-index a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--primary); transform: translateY(-50%); transition: width 180ms ease; } .page-terms .terms-index a:hover, .page-terms .terms-index a:focus-visible { padding-left: 18px; color: var(--white); } .page-terms .terms-index a:hover::before, .page-terms .terms-index a:focus-visible::before { width: 10px; } /* ========================================================================== 06. POLICY CONTENT ========================================================================== */ .page-terms .terms-policy { min-width: 0; } .page-terms .terms-opening { margin-bottom: 74px; padding: 38px 42px; border: 1px solid var(--terms-line); background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent 50%), var(--terms-panel); } .page-terms .terms-opening p { margin-bottom: 20px; color: var(--terms-copy-strong); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.75; } .page-terms .terms-opening p:last-child { margin-bottom: 0; } .page-terms .terms-opening a, .page-terms .terms-section-body a, .page-terms .terms-contact-card a { color: var(--primary); text-decoration-color: rgba(var(--primary-rgb), 0.55); text-underline-offset: 4px; } .page-terms .terms-policy-section { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 34px; padding: 0 0 74px; margin-bottom: 74px; border-bottom: 1px solid var(--terms-line-soft); scroll-margin-top: 130px; } .page-terms .terms-policy-section:last-child { margin-bottom: 0; } .page-terms .terms-section-number { padding-top: 8px; color: var(--primary); font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: 0.08em; } .page-terms .terms-section-body h2 { margin-bottom: 34px; color: var(--white); font-size: clamp(40px, 4.4vw, 70px); line-height: 0.95; letter-spacing: -0.02em; } .page-terms .terms-section-body h3 { margin: 35px 0 12px; color: var(--primary); font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: 0.01em; } .page-terms .terms-section-body h3:first-of-type { margin-top: 0; } .page-terms .terms-section-body p, .page-terms .terms-section-body li { color: var(--terms-copy); font-family: var(--font-body); font-size: 16px; line-height: 1.85; } .page-terms .terms-section-body p { margin-bottom: 20px; } .page-terms .terms-section-body ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .page-terms .terms-section-body li { position: relative; padding-left: 24px; } .page-terms .terms-section-body li::before { content: ""; position: absolute; left: 0; top: 0.86em; width: 8px; height: 1px; background: var(--primary); } /* ========================================================================== 07. CONTACT CARD ========================================================================== */ .page-terms .terms-contact-card { display: grid; gap: 8px; margin-top: 28px; padding: 30px 34px; border-left: 2px solid var(--primary); background: var(--terms-panel-soft); color: var(--terms-copy); font-style: normal; } .page-terms .terms-contact-card strong { margin-bottom: 7px; color: var(--white); font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; } .page-terms .terms-contact-card span, .page-terms .terms-contact-card a { font-family: var(--font-body); font-size: 15px; line-height: 1.55; } /* ========================================================================== 08. RESPONSIVE — TABLET ========================================================================== */ @media (max-width: 980px) { .page-terms .wrap { width: min(100% - (var(--site-gutter-tablet) * 2), var(--site-max)); } .page-terms .terms-hero { min-height: 560px; } .page-terms .terms-layout { grid-template-columns: 1fr; gap: 64px; } .page-terms .terms-index { position: static; } .page-terms .terms-index nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; } } /* ========================================================================== 09. RESPONSIVE — MOBILE ========================================================================== */ @media (max-width: 620px) { .page-terms .wrap { width: calc(100% - (var(--site-gutter-mobile) * 2)); } .page-terms .terms-hero { min-height: 520px; } .page-terms .terms-hero-content { padding: 130px 0 72px; } .page-terms .terms-hero h1 { font-size: clamp(56px, 18vw, 88px); } .page-terms .terms-content-section { padding: var(--terms-section-padding-mobile) 0 110px; } .page-terms .terms-index nav { grid-template-columns: 1fr; } .page-terms .terms-opening { margin-bottom: 58px; padding: 28px 24px; } .page-terms .terms-policy-section { grid-template-columns: 1fr; gap: 18px; padding-bottom: 58px; margin-bottom: 58px; } .page-terms .terms-section-number { padding-top: 0; } .page-terms .terms-section-body h2 { margin-bottom: 28px; font-size: clamp(38px, 12vw, 56px); } .page-terms .terms-contact-card { padding: 26px 22px; } }