/* Theme Name: Launchline Theme URI: https://launchline.com Author: Launchline Author URI: https://launchline.com Description: A modern Bootstrap 5 WordPress theme for startups and businesses. Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: launchline Tags: bootstrap, responsive, business, startup, clean, modern */ /* ============================================= LAUNCHLINE THEME - Custom Styles Bootstrap 5 base — overrides go here ============================================= */ :root { --ll-primary: #4f46e5; --ll-secondary: #7c3aed; --ll-accent: #06b6d4; --ll-dark: #0f172a; --ll-light: #f8fafc; --ll-text: #334155; --ll-muted: #94a3b8; --ll-border: #e2e8f0; --ll-radius: 0.5rem; --ll-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --ll-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); } /* Base */ body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ll-text); background-color: #fff; line-height: 1.7; } a { color: var(--ll-primary); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--ll-secondary); } img { max-width: 100%; height: auto; } /* ---- Site Header ---- */ .ll-site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; } /* Scrolled state — solid frosted background */ .ll-site-header.ll-header--scrolled { background: rgba(15, 23, 42, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.06); } /* Pages without a hero (non-front, non-dark) get solid immediately */ body:not(.home):not(.page-template-front-page) .ll-site-header { background: rgba(15, 23, 42, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ll-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } /* Push page content below fixed header */ body { padding-top: 64px; } /* Admin bar offset — WP adds margin-top: 32px to when logged in */ .admin-bar .ll-site-header { top: 32px; } @media screen and (max-width: 782px) { /* Admin bar collapses to 46px on small screens */ .admin-bar .ll-site-header { top: 46px; } } /* ---- Topnav ---- */ .ll-topnav { height: 64px; padding: 0; } .ll-topnav .navbar-collapse { align-items: center; } /* ---- Brand ---- */ .ll-brand { display: flex; align-items: center; gap: .6rem; padding: 0; text-decoration: none; } .ll-brand-icon { display: flex; align-items: center; flex-shrink: 0; } .ll-brand-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; color: #fff; font-family: 'Inter', system-ui, sans-serif; transition: color .2s; } .ll-brand:hover .ll-brand-name { color: #c7d2fe; } /* ---- Nav links ---- */ .ll-nav-links { gap: .15rem; } .ll-nav-link { display: block; padding: .5rem 1rem; font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.8); border-radius: .5rem; transition: color .2s, background .2s; text-decoration: none; white-space: nowrap; } .ll-nav-link:hover, .ll-nav-link.active { color: #fff; background: rgba(255,255,255,.1); } /* Dropdown items */ .ll-nav-links .dropdown-menu { background: rgba(15, 23, 42, .95); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); border-radius: .5rem; padding: .35rem; min-width: 180px; } .ll-nav-links .dropdown-item { color: rgba(255,255,255,.8); font-size: .88rem; font-weight: 500; padding: .5rem .85rem; border-radius: .4rem; transition: color .15s, background .15s; } .ll-nav-links .dropdown-item:hover, .ll-nav-links .dropdown-item:focus { color: #fff; background: rgba(255,255,255,.1); } /* Override Bootstrap nav-link class on our elements */ .ll-nav-links .nav-item > .ll-nav-link { color: rgba(255,255,255,.8); } /* ---- CTA area ---- */ .ll-nav-contact { font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s; white-space: nowrap; } .ll-nav-contact:hover { color: #fff; } .ll-btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1.1rem; font-size: .875rem; font-weight: 600; border-radius: .5rem; background: linear-gradient(135deg, var(--ll-primary) 0%, #818cf8 100%); color: #fff !important; border: none; box-shadow: 0 1px 3px rgba(79,70,229,.35); transition: all .2s; white-space: nowrap; text-decoration: none; } .ll-btn-cta:hover { background: linear-gradient(135deg, #818cf8 0%, var(--ll-secondary) 100%); box-shadow: 0 4px 14px rgba(79,70,229,.45); transform: translateY(-1px); color: #fff; } .ll-btn-cta:active { transform: scale(.98); } /* ---- Mobile toggler ---- */ .ll-nav-toggler { color: rgba(255,255,255,.8); border-radius: .5rem; transition: color .2s, background .2s; line-height: 1; } .ll-nav-toggler:hover { color: #fff; background: rgba(255,255,255,.1); } /* Mobile expanded nav */ @media (max-width: 991.98px) { .ll-site-header { background: rgba(15, 23, 42, .97); } .ll-topnav .navbar-collapse { padding: 1rem 0 1.25rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: .5rem; flex-direction: column; align-items: flex-start; } .ll-nav-links { width: 100%; flex-direction: column !important; } .ll-nav-link { width: 100%; } .ll-nav-cta { width: 100%; flex-direction: column; align-items: flex-start !important; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.08); margin-top: .5rem; margin-left: 0 !important; } .ll-btn-cta { width: 100%; justify-content: center; } } /* ---- Hero ---- */ .ll-hero { background: linear-gradient(135deg, var(--ll-dark) 0%, #1e1b4b 50%, #312e81 100%); color: #fff; padding: 5rem 0 5rem; margin-top: -64px; /* bleed under fixed header */ padding-top: calc(5rem + 64px); position: relative; overflow: hidden; } .ll-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .ll-hero .display-4 { font-weight: 800; line-height: 1.15; } .ll-hero .lead { color: #c7d2fe; font-size: 1.15rem; } /* ---- Buttons ---- */ .btn-ll-primary { background: var(--ll-primary); color: #fff; border: none; padding: .65rem 1.5rem; border-radius: var(--ll-radius); font-weight: 600; transition: all .2s; box-shadow: 0 4px 14px rgb(79 70 229 / .4); } .btn-ll-primary:hover { background: var(--ll-secondary); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgb(124 58 237 / .45); } .btn-ll-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); padding: .65rem 1.5rem; border-radius: var(--ll-radius); font-weight: 600; transition: all .2s; } .btn-ll-outline:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; } /* ---- Section ---- */ .ll-section { padding: 5rem 0; } .ll-section-title { font-size: 2rem; font-weight: 700; color: var(--ll-dark); margin-bottom: .5rem; } .ll-section-sub { color: var(--ll-muted); font-size: 1.05rem; margin-bottom: 3rem; } .ll-section-label { display: inline-block; background: #ede9fe; color: var(--ll-primary); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 999px; margin-bottom: .75rem; } /* ---- Cards ---- */ .ll-card { border: 1px solid var(--ll-border); border-radius: calc(var(--ll-radius) * 1.5); padding: 2rem; background: #fff; transition: all .25s; height: 100%; } .ll-card:hover { box-shadow: var(--ll-shadow-lg); transform: translateY(-3px); border-color: #c7d2fe; } .ll-card-icon { width: 52px; height: 52px; background: #ede9fe; border-radius: var(--ll-radius); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; } .ll-card h5 { font-weight: 700; color: var(--ll-dark); margin-bottom: .5rem; } /* ---- Sidebar ---- */ .ll-sidebar .widget { background: var(--ll-light); border-radius: calc(var(--ll-radius) * 1.5); padding: 1.5rem; margin-bottom: 1.75rem; border: 1px solid var(--ll-border); } .ll-sidebar .widget-title { font-size: 1rem; font-weight: 700; color: var(--ll-dark); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 2px solid var(--ll-primary); } /* ---- Posts ---- */ .ll-post-card { border: 1px solid var(--ll-border); border-radius: calc(var(--ll-radius) * 1.5); overflow: hidden; transition: all .25s; height: 100%; } .ll-post-card:hover { box-shadow: var(--ll-shadow-lg); transform: translateY(-3px); } .ll-post-card .ll-post-thumb img { width: 100%; height: 200px; object-fit: cover; } .ll-post-card .ll-post-body { padding: 1.5rem; } .ll-post-meta { font-size: .82rem; color: var(--ll-muted); margin-bottom: .5rem; } .ll-post-meta a { color: var(--ll-primary); } .ll-post-card h5 a { color: var(--ll-dark); font-weight: 700; line-height: 1.3; } .ll-post-card h5 a:hover { color: var(--ll-primary); } /* ---- Single post ---- */ .ll-article-header { margin-bottom: 2rem; } .ll-article-header h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; color: var(--ll-dark); line-height: 1.2; } .ll-featured-img { width: 100%; border-radius: calc(var(--ll-radius) * 1.5); margin-bottom: 2rem; max-height: 480px; object-fit: cover; } .ll-entry-content { font-size: 1.05rem; line-height: 1.85; color: var(--ll-text); } .ll-entry-content h2, .ll-entry-content h3, .ll-entry-content h4 { font-weight: 700; color: var(--ll-dark); margin-top: 2rem; } .ll-entry-content p { margin-bottom: 1.25rem; } .ll-entry-content ul, .ll-entry-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .ll-entry-content blockquote { border-left: 4px solid var(--ll-primary); padding: 1rem 1.5rem; background: #ede9fe22; border-radius: 0 var(--ll-radius) var(--ll-radius) 0; font-style: italic; color: var(--ll-dark); margin: 1.5rem 0; } .ll-entry-content pre { background: var(--ll-dark); color: #e2e8f0; padding: 1.25rem 1.5rem; border-radius: var(--ll-radius); overflow-x: auto; } .ll-entry-content code { font-size: .9em; } .ll-entry-content a { text-decoration: underline; } /* ---- Tags / Categories ---- */ .ll-tag { display: inline-block; background: #ede9fe; color: var(--ll-primary); font-size: .78rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; margin: .2rem .1rem; transition: background .2s; } .ll-tag:hover { background: var(--ll-primary); color: #fff; } /* ---- Footer ---- */ .ll-footer { background: #0a0f1e; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.6); } .ll-footer__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 1024px) { .ll-footer__inner { padding: 0 2rem; } } /* Grid */ .ll-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 3.5rem 0; } @media (min-width: 768px) { .ll-footer__grid { grid-template-columns: repeat(4, 1fr); } } .ll-footer__brand-col { grid-column: span 2; display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 768px) { .ll-footer__brand-col { grid-column: span 1; } } /* Brand */ .ll-footer__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; } .ll-footer__logo-icon { display: flex; align-items: center; flex-shrink: 0; } .ll-footer__brand-name { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -.02em; } .ll-footer__tagline { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.6; max-width: 18rem; margin: 0; } /* Nav columns */ .ll-footer__nav-col { display: flex; flex-direction: column; gap: 1rem; } .ll-footer__col-heading { font-size: .7rem; font-weight: 600; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; margin: 0; } .ll-footer__nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; } .ll-footer__nav li a, .ll-footer__nav > li > a { font-size: .875rem; color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; } .ll-footer__nav li a:hover, .ll-footer__nav > li > a:hover { color: #fff; } /* Bottom bar */ .ll-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: .75rem; font-size: .75rem; color: rgba(255,255,255,.35); } .ll-footer__bottom p { margin: 0; } @media (min-width: 640px) { .ll-footer__bottom { flex-direction: row; } } /* ---- Pagination ---- */ .ll-pagination .page-link { color: var(--ll-primary); border-color: var(--ll-border); border-radius: var(--ll-radius) !important; margin: 0 .15rem; } .ll-pagination .page-item.active .page-link { background: var(--ll-primary); border-color: var(--ll-primary); } /* ---- Utilities ---- */ .bg-ll-light { background: var(--ll-light); } .bg-ll-dark { background: var(--ll-dark); } .text-ll { color: var(--ll-primary); } .ll-divider { height: 1px; background: var(--ll-border); margin: 2rem 0; }