/* ========================================================================== Linqin v2 design system — Swiss/editorial aesthetic. Every rule is scoped under .lq-v2 (set on of redesigned pages only), so the shared header/footer partials keep their legacy look on all pages that have not opted in. Never link this file from a legacy page. ========================================================================== */ .lq-v2 { --lq-accent: #FF6B35; --lq-accent-deep: #E55A2B; --lq-accent-tint: #FFF1EA; --lq-ink: #0F0F12; --lq-ink-2: #55555E; --lq-ink-3: #8A8A92; --lq-canvas: #F0F0EE; --lq-canvas-2: #F5F5F3; --lq-surface: #FFFFFF; --lq-dark: #141417; --lq-hairline: rgba(15, 15, 18, 0.14); --lq-hairline-soft: rgba(15, 15, 18, 0.08); --lq-display: 'DM Sans', 'Inter Tight', system-ui, sans-serif; --lq-body: 'Inter Tight', Inter, system-ui, sans-serif; } .lq-v2 ::selection { background: var(--lq-accent); color: #fff; } /* -------------------------------------------------------------------------- Generic v2 components (used by auth pages; homepage restyles its own CSS) -------------------------------------------------------------------------- */ .lq-v2 .v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--lq-ink); color: #fff; padding: 14px 26px; border: 1px solid var(--lq-ink); border-radius: 0; font-family: var(--lq-body); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; transition: background 0.15s; } .lq-v2 .v2-btn:hover { background: #2A2A30; } .lq-v2 .v2-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--lq-ink); padding: 13px 24px; border: 1px solid var(--lq-ink); border-radius: 0; font-family: var(--lq-body); font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; transition: background 0.15s; } .lq-v2 .v2-btn-outline:hover { background: rgba(15, 15, 18, 0.05); } .lq-v2 .v2-panel { background: var(--lq-surface); border: 1px solid var(--lq-hairline); border-radius: 0; } /* -------------------------------------------------------------------------- Marketing-page layer: converts the common patterns that public pages copied from the old homepage (display serif, pill buttons, rounded cards) without editing each page's CSS. Loads only where opts in. -------------------------------------------------------------------------- */ body.lq-v2 { background: #F0F0EE !important; } /* Display headings: geometric sans, non-italic orange accent */ .lq-v2 h1.display, .lq-v2 h2.display, .lq-v2 .display { font-family: var(--lq-display) !important; font-weight: 600 !important; letter-spacing: -0.035em !important; font-style: normal !important; } .lq-v2 .display em, .lq-v2 h1 em, .lq-v2 h2 em { font-style: normal !important; color: var(--lq-accent); } .lq-v2 .font-serif { font-family: var(--lq-display) !important; font-weight: 600 !important; letter-spacing: -0.02em !important; font-style: normal !important; } /* Buttons: rectangles (covers the per-page .btn-* copies) */ .lq-v2 .btn-primary, .lq-v2 .btn-secondary, .lq-v2 .btn-light { border-radius: 0 !important; } .lq-v2 .btn-secondary { border-color: rgba(15, 15, 18, 0.35) !important; } /* Sharp corners on Tailwind radius utilities; circles stay circles */ .lq-v2 .rounded, .lq-v2 .rounded-sm, .lq-v2 .rounded-md, .lq-v2 .rounded-lg, .lq-v2 .rounded-xl, .lq-v2 .rounded-2xl, .lq-v2 .rounded-3xl, .lq-v2 [class*="rounded-["] { border-radius: 0 !important; } .lq-v2 .shadow-sm { box-shadow: none !important; } /* Frequent page-local card classes (copied across marketing pages) */ .lq-v2 .price-card, .lq-v2 .feature-card, .lq-v2 .quote-card, .lq-v2 .surface, .lq-v2 .card { border-radius: 0 !important; box-shadow: none !important; } .lq-v2 .featured-tag, .lq-v2 .billing-toggle, .lq-v2 .billing-toggle button { border-radius: 0 !important; } /* -------------------------------------------------------------------------- Header overrides — legacy partial renders a floating glass pill; v2 pages flatten it into a full-width white bar with a hairline bottom rule. .lq-nav-shell is the pill container class added in includes/header.php. -------------------------------------------------------------------------- */ .lq-v2 #mainHeader { padding-left: 0; padding-right: 0; background: var(--lq-surface); border-bottom: 1px solid var(--lq-hairline-soft); } .lq-v2 .lq-nav-shell { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; border-radius: 0; padding: 6px 24px; } .lq-v2 .nav-link { border-radius: 0; color: var(--lq-ink-2); position: relative; } .lq-v2 .nav-link:hover { color: var(--lq-ink); } .lq-v2 .nav-link.active { background: transparent; color: var(--lq-ink); } .lq-v2 .nav-link.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--lq-accent); } .lq-v2 .nav-login { border: 1px solid var(--lq-ink); border-radius: 0; color: var(--lq-ink); padding: 8px 18px; margin-left: 6px; } .lq-v2 .nav-login:hover { background: rgba(15, 15, 18, 0.05); } .lq-v2 .btn-cta-nav { border-radius: 0; background: var(--lq-ink); padding: 10px 22px; } .lq-v2 .btn-cta-nav:hover { background: #2A2A30; } .lq-v2 .nav-badge { border-radius: 0; } /* Mega menu: sharp corners, hairline chrome, gray hover instead of cream */ .lq-v2 .lq-nav-menu-inner { border-radius: 0; border-color: var(--lq-hairline); box-shadow: 0 16px 40px -20px rgba(15, 15, 18, 0.2); } .lq-v2 .lq-nav-menu-item { border-radius: 0; } .lq-v2 .lq-nav-menu-item:hover { background: var(--lq-canvas-2); } .lq-v2 .lq-nav-menu-glyph { border-radius: 0; } /* -------------------------------------------------------------------------- Footer overrides — canvas gray band, sans tagline/wordmark, sharp socials -------------------------------------------------------------------------- */ .lq-v2 .lq-footer { background: var(--lq-canvas); border-top: 1px solid var(--lq-hairline); } .lq-v2 .lq-footer-tagline { font-family: var(--lq-display); font-weight: 500; font-size: 20px; letter-spacing: -0.01em; } .lq-v2 .lq-footer-tagline em { font-style: normal; } .lq-v2 .lq-footer-socials a { border-radius: 0; background: var(--lq-surface); } .lq-v2 .lq-footer-wordmark { font-family: var(--lq-display); font-weight: 600; font-size: 15px; } .lq-v2 .lq-footer-wordmark em { font-style: normal; } /* -------------------------------------------------------------------------- Mobile menu overlay — white surface, sharp rows -------------------------------------------------------------------------- */ .lq-v2 .lq-mobile-menu { background: var(--lq-surface); } .lq-v2 .lq-mobile-menu .lq-mobile-link, .lq-v2 .lq-mobile-menu .lq-mobile-group-trigger, .lq-v2 .lq-mobile-menu .lq-mobile-sub, .lq-v2 .lq-mobile-menu .lq-mobile-sub-glyph { border-radius: 0; } .lq-v2 .lq-mobile-menu > button { border-radius: 0; background: var(--lq-canvas-2); }