/* ============================================================================ LUAMA UNIFIED SKIN — one design language across three sites ---------------------------------------------------------------------------- Three properties grew three class systems: bordales.tech bt-* (holy-trinity template) webdeveloperpretoria.co.za generic (hero/section/card primitives) softwaredeveloperpretoria.co.za generic (same primitives) all three, new homepages ps-* (pretoria-specialist) This sheet loads AFTER each site's existing stylesheet and pulls all four vocabularies onto the same tokens. It restyles; it never restructures. No template, route, URL or word of copy changes — which is why it can ship across ~1,600 live indexed pages in one deploy and be reverted by deleting a single . Per-site identity comes from --lu-accent set on . The sites stay distinct brands wearing one system. ========================================================================== */ :root { --lu-ink: #0e1116; --lu-panel: #ffffff; --lu-soft: #f4f6f9; --lu-line: rgba(14,17,22,.10); --lu-text: #10141a; --lu-muted: #5b6672; --lu-accent: #1779b8; /* per-site override: surfaces */ --lu-accent-ink: var(--lu-accent); /* per-site override: text/links */ --lu-display: Sora, "Segoe UI", system-ui, -apple-system, sans-serif; --lu-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --lu-radius: 14px; --lu-shadow: 0 18px 44px rgba(14,17,22,.09); } /* ── typography: one scale everywhere ───────────────────────────────────── */ body, .bt-shell { font-family: var(--lu-body); color: var(--lu-text); } h1, h2, h3, h4, .bt-section-head h2, .section-head h2, .ps-hero h1 { font-family: var(--lu-display); letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; } /* the giant runaway headings on the live site come from an unclamped scale */ h1, .ps-hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); } h2 { font-size: clamp(1.75rem, 3.4vw, 2.9rem); } h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); letter-spacing: -.02em; } p, li, .bt-section p { color: var(--lu-muted); line-height: 1.72; } /* ── eyebrow / kicker ───────────────────────────────────────────────────── */ .bt-kicker, .ps-kicker, .kicker, .eyebrow, .section-kicker { display: inline-block; color: var(--lu-accent-ink); font-family: var(--lu-body); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } /* ── section rhythm ─────────────────────────────────────────────────────── */ .bt-section, .section { border-top: 1px solid var(--lu-line); } .bt-section-inner, .section-inner { max-width: 1320px; margin-inline: auto; padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3.5rem); } .bt-section-head p, .section-head p { max-width: 60ch; } /* ── cards: one card everywhere ─────────────────────────────────────────── */ .bt-card, .bt-visual-card, .card, .ps-card, .faq-item { background: var(--lu-panel); border: 1px solid var(--lu-line); border-radius: var(--lu-radius); box-shadow: var(--lu-shadow); transition: transform .2s ease, border-color .2s ease; } .bt-card:hover, .card:hover, .ps-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--lu-accent) 45%, var(--lu-line)); } .bt-card-grid, .card-grid, .grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ── buttons ────────────────────────────────────────────────────────────── */ .bt-button, .button, .btn, .ps-btn, button[type="submit"], input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.45rem; border-radius: 999px; border: 1px solid var(--lu-line); font-family: var(--lu-body); font-size: .9rem; font-weight: 750; text-decoration: none; transition: transform .18s ease, background .18s ease; } .bt-button:hover, .button:hover, .btn:hover, .ps-btn:hover { transform: translateY(-2px); } .bt-button-primary, .button.primary, .btn.primary, .ps-btn-primary, button[type="submit"], input[type="submit"] { background: var(--lu-accent); border-color: transparent; color: var(--lu-accent-on, #fff); } /* ── header / nav ───────────────────────────────────────────────────────── */ .bt-header, .nav, .ps-header { border-bottom: 1px solid var(--lu-line); backdrop-filter: blur(14px); } .bt-menu-link:hover, .nav a:hover { color: var(--lu-accent-ink); } /* ── forms — the entry door wears the same skin ─────────────────────────── */ form label { display:block; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--lu-muted); margin-bottom:.4rem; } form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="url"], form select, form textarea { width:100%; padding:.85rem 1rem; font:inherit; font-size:.95rem; background:var(--lu-soft); color:var(--lu-text); border:1px solid var(--lu-line); border-radius:10px; } form textarea { min-height:9rem; resize:vertical; } form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--lu-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--lu-accent) 22%, transparent); } /* honeypot stays invisible to people, reachable to bots */ form input[name="company_website"] { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; } /* ── footer ─────────────────────────────────────────────────────────────── */ footer, .bt-footer { border-top:1px solid var(--lu-line); color:var(--lu-muted); } footer a, .bt-footer-col a { color:var(--lu-muted); text-decoration:none; } footer a:hover, .bt-footer-col a:hover { color:var(--lu-accent); } /* ── reveal-on-scroll must never hide content if JS fails ───────────────── */ .bt-reveal, .reveal { opacity:1 !important; transform:none !important; } /* ── accessibility ──────────────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--lu-accent); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } html { scroll-behavior:auto !important; } } /* ── never scroll sideways ──────────────────────────────────────────────── */ html, body { max-width:100%; overflow-x:hidden; } img, video, iframe, table, pre { max-width:100%; height:auto; } .bt-track { max-width:100%; } @media (max-width: 720px) { .bt-section-inner, .section-inner { padding-inline:1rem; } h1, .ps-hero h1 { font-size:clamp(2rem,8.5vw,2.9rem); } }