/* ============================================================ PROLINK MEDIA SOLUTIONS - Global Theme & Design System Stage 1 foundation. Drives dark/light theming via [data-theme] on the element. All shared chrome + new pages use these custom properties so a single toggle re-themes everything. ============================================================ */ /* ---------- Brand tokens (theme-independent) ---------- */ :root { --brand-amber: #ff8a00; --brand-amber-2: #ffb347; --brand-cyan: #22d3ee; --brand-cyan-2: #0ea5e9; --grad-power: linear-gradient(135deg, #ff8a00, #ffb347); --grad-tech: linear-gradient(135deg, #0ea5e9, #22d3ee); --grad-fusion: linear-gradient(135deg, #ff8a00 0%, #f97316 35%, #0ea5e9 100%); --radius-sm: .6rem; --radius: 1rem; --radius-lg: 1.5rem; --radius-pill: 999px; --container-max: 1200px; --ease: cubic-bezier(.4, 0, .2, 1); --shadow-1: 0 10px 30px rgba(2, 6, 23, .12); --shadow-2: 0 20px 50px rgba(2, 6, 23, .18); --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- DARK THEME (default) ---------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #050b18; --bg-2: #020617; --surface: #0b1424; --surface-2: #111c30; --surface-soft: rgba(148, 163, 184, .06); --text: #f1f5f9; --text-soft: #d6deec; --text-muted: #9fb0c9; --heading: #ffffff; --border: rgba(148, 163, 184, .22); --border-strong: rgba(148, 163, 184, .4); --nav-bg: rgba(2, 6, 23, .92); --topbar-bg: #020617; --footer-bg: #020617; --hero-glow-1: rgba(30, 58, 138, .55); --hero-glow-2: rgba(249, 115, 22, .9); --shadow-card: 0 16px 40px rgba(2, 6, 23, .85); --on-accent: #061325; } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-sans); background-color: var(--bg); color: var(--text); transition: background-color .35s var(--ease), color .35s var(--ease); overflow-x: hidden; } body p, body li, body small { color: var(--text-soft); } .text-muted-2 { color: var(--text-muted) !important; } a { text-decoration: none; } img { max-width: 100%; height: auto; } /* Links: never fall back to default browser blue/underline */ a { color: var(--brand-cyan-2); } a:hover { color: var(--brand-amber); } /* Align Bootstrap's own link + body variables with the theme */ :root { --bs-body-color: var(--text); --bs-body-bg: var(--bg); --bs-link-color: var(--brand-cyan-2); --bs-link-hover-color: var(--brand-amber); --bs-emphasis-color: var(--heading); --bs-secondary-color: var(--text-muted); --bs-border-color: var(--border); } /* Reinforce body text colour over Bootstrap reboot */ body { color: var(--text); } h1, h2, h3, h4, h5, h6 { color: var(--heading); } .container { max-width: var(--container-max); } /* Bootstrap surface overrides so utility classes follow the theme */ .bg-body, .bg-white { background-color: var(--bg-2) !important; } .text-secondary { color: var(--text-muted) !important; } /* ---------- Brand bits ---------- */ .brand-highlight { color: var(--brand-amber); } .text-gradient { background: var(--grad-fusion); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-title, .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; font-weight: 700; color: var(--brand-amber-2); display: inline-flex; align-items: center; gap: .5rem; } .eyebrow .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--brand-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, .25); } .big-heading { font-size: 2.1rem; font-weight: 800; color: var(--heading); line-height: 1.15; } @media (min-width: 992px) { .big-heading { font-size: 2.7rem; } } /* ---------- Buttons ---------- */ .btn-gradient { border: none; background-image: var(--grad-power); color: var(--on-accent) !important; font-weight: 700; border-radius: var(--radius-pill); transition: transform .18s var(--ease), filter .18s var(--ease), box-shadow .18s var(--ease); } .btn-gradient:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 138, 0, .35); color: var(--on-accent) !important; } .btn-ghost { border: 1px solid var(--border-strong); color: var(--text) !important; background: transparent; border-radius: var(--radius-pill); font-weight: 600; transition: border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); } .btn-ghost:hover { border-color: var(--brand-cyan); color: var(--brand-cyan) !important; transform: translateY(-2px); } /* ---------- Cards / surfaces ---------- */ .card-dark, .surface-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* ---------- Reusable page sections (used by new + future pages) ---------- */ .section { padding: 4rem 0; } .section-alt { padding: 4rem 0; background: radial-gradient(circle at 0% 0%, var(--hero-glow-1), transparent 55%), radial-gradient(circle at 100% 100%, var(--hero-glow-2), transparent 60%), var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .lead-soft { color: var(--text-soft); font-size: 1.02rem; } .page-hero { position: relative; padding: 4rem 0 3.5rem; background: radial-gradient(circle at 12% 18%, var(--hero-glow-1) 0, transparent 50%), radial-gradient(circle at 88% 90%, var(--hero-glow-2) 0, transparent 55%), var(--bg); border-bottom: 1px solid var(--border); } .page-hero .breadcrumb a { color: var(--text-muted); } .page-hero .breadcrumb .active { color: var(--text); } .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; height: 100%; box-shadow: var(--shadow-card); transition: transform .2s var(--ease), border-color .2s var(--ease); } .feature-card:hover { transform: translateY(-4px); border-color: var(--brand-cyan-2); } .feature-icon { width: 46px; height: 46px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--grad-fusion); color: #ffffff; margin-bottom: .9rem; } .stat-num { font-size: 2.2rem; font-weight: 800; color: var(--heading); line-height: 1; } .stat-num .text-gradient { font-weight: 800; } .step-row { position: relative; padding-left: 3rem; margin-bottom: 1.6rem; } .step-badge { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; background: var(--surface-2); color: var(--brand-amber-2); border: 1px solid var(--border-strong); } .check-list { list-style: none; padding-left: 0; margin: 0; } .check-list li { position: relative; padding-left: 1.8rem; margin-bottom: .65rem; color: var(--text-soft); } .check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.2rem; height: 1.2rem; border-radius: var(--radius-pill); background: var(--grad-tech); color: #fff; font-size: .7rem; display: inline-flex; align-items: center; justify-content: center; } .hero-media-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-2); } .hero-media-wrap img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; display: block; } .cta-band { border-radius: var(--radius-lg); padding: 2.5rem; background: var(--grad-fusion); color: #fff; } .cta-band h3, .cta-band p { color: #fff; } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Shared content cards (portfolio, blog) ---------- */ .port-card { height:100%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow-card); transition:transform .2s var(--ease), border-color .2s var(--ease); display:flex; flex-direction:column; } .port-card:hover { transform:translateY(-4px); border-color:var(--brand-cyan-2); } .port-thumb { aspect-ratio:16/10; overflow:hidden; background:var(--surface-2); } .port-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s var(--ease); } .port-card:hover .port-thumb img { transform:scale(1.05); } .port-meta { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-amber-2); font-weight:700; } .news-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card); height:100%; display:flex; flex-direction:column; } .news-thumb-wrap { aspect-ratio:16/9; overflow:hidden; display:block; } .news-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); } .news-card:hover .news-thumb-wrap img { transform:scale(1.04); } .news-card .news-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; } .news-card-title-link { color:var(--heading); } .news-card-title-link:hover { color:var(--brand-amber); } /* Theme-aware pagination */ .pagination-dark .page-link, .pagination-mobile .page-link { background:var(--surface); border:1px solid var(--border); color:var(--text-soft); margin:0 .15rem; border-radius:.5rem; } .pagination-dark .page-item.active .page-link, .pagination-mobile .page-item.active .page-link { background:var(--grad-power); border-color:transparent; color:var(--on-accent); font-weight:700; } .pagination-dark .page-item.disabled .page-link, .pagination-mobile .page-item.disabled .page-link { opacity:.5; } .pagination-dark .page-link:hover, .pagination-mobile .page-link:hover { border-color:var(--brand-cyan); color:var(--brand-cyan); } /* ---------- Breadcrumbs (readable, wrap nicely on mobile) ---------- */ .breadcrumb { flex-wrap: wrap; margin-bottom: .75rem; --bs-breadcrumb-divider-color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--brand-amber); } .breadcrumb .breadcrumb-item.active { color: var(--text-soft); } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } @media (max-width: 575.98px) { .breadcrumb { font-size: .8rem; } .page-hero { padding: 2.5rem 0 2rem; } } /* ---------- Homepage slider ---------- */ .home-slider { border-bottom: 1px solid var(--border); } .home-slider .slide-bg { background-color: var(--bg-2); background-size: cover; background-position: center; min-height: 460px; display: flex; align-items: center; } @media (max-width: 767.98px) { .home-slider .slide-bg { min-height: 380px; } } .home-slider .slide-content { max-width: 720px; padding: 2.5rem 0; } .home-slider .slide-content h1 { font-size: 2.1rem; font-weight: 800; line-height: 1.14; color: #fff; } @media (min-width: 992px) { .home-slider .slide-content h1 { font-size: 3rem; } } .home-slider .slide-content p { color: #dbe4f3; } .home-slider .carousel-indicators [data-bs-target] { width: 28px; height: 4px; border-radius: 4px; } .home-slider .carousel-control-prev, .home-slider .carousel-control-next { width: 6%; } .home-slider .carousel-control-prev-icon, .home-slider .carousel-control-next-icon { background-color: rgba(2,6,23,.55); border-radius: 50%; padding: 1.1rem; background-size: 45%; }