/* ============================================== TapPlaza v3.0 — Professional SaaS Theme Tight typography, clean mobile, no overflow ============================================== */ /* ============================================== TapPlaza v3.2 — Professional SaaS Theme Dark/Light mode, tight typography, mobile-first ============================================== */ /* ── DARK MODE (default) ── */ :root { --bg: #07090f; --bg2: #0b0f1a; --bg3: #0f1420; --surf: #131926; --surf2: #18203a; --bdr: #1c2a3e; --bdr2: #223248; --acc: #00d4ff; --acc2: #0066ff; --gold: #f5a623; --grn: #00e676; --red: #ff4757; --t1: #edf2fa; --t2: #7b90ae; --t3: #3e5270; --ffd: 'Syne', sans-serif; --ffb: 'DM Sans', sans-serif; --r: 10px; --rlg: 14px; /* Mode toggle icon */ --mode-icon: '☀️'; } /* ── LIGHT MODE — applied when body has class "light-mode" ── */ body.light-mode { --bg: #ffffff; --bg2: #f5f7fb; --bg3: #eaecf2; --surf: #ffffff; --surf2:#f0f2f8; --bdr: #d0d6e8; --bdr2: #b8c2d8; --t1: #0d1120; --t2: #4a5570; --t3: #8a96b0; --mode-icon: '🌙'; } /* Light mode accent stays the same but slightly deeper */ body.light-mode .section-label { background: rgba(0,150,200,.1); border-color: rgba(0,150,200,.22); } body.light-mode .hero h1 { color: var(--t1); -webkit-text-fill-color: var(--t1); } body.light-mode .hero h1 .highlight { -webkit-text-fill-color: transparent; } body.light-mode .hero h1 .hero-muted { color: var(--t2); -webkit-text-fill-color: var(--t2); } body.light-mode .hero-sub { color: var(--t2); } body.light-mode .hero::before { background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(0,180,220,.1) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 90% 70%, rgba(0,80,200,.07) 0%, transparent 55%); } body.light-mode .btn-ghost { color: var(--t2); border-color: var(--bdr); } body.light-mode .btn-ghost:hover { background: var(--bg3); } body.light-mode .site-header { background: rgba(255,255,255,.97); } body.light-mode .mobile-nav { background: var(--bg2); } body.light-mode .trust-bar { background: var(--surf); } body.light-mode .section-dark { background: var(--bg2); } body.light-mode .product-card { background: var(--surf); } body.light-mode .feat-card { background: var(--surf); } body.light-mode .feat-card:hover { background: var(--surf2); } body.light-mode .testimonial { background: var(--surf); } body.light-mode .hero-stats { background: var(--surf); } body.light-mode .hero-badge { background: var(--surf); } body.light-mode .step-num { background: var(--surf); } body.light-mode .hv-card { background: var(--surf); } body.light-mode .site-footer { background: var(--bg2); } /* ── LIGHT MODE on — matched by the no-flash script before body exists ── Mirrors every body.light-mode variable so the pre-paint class prevents ALL colour flash. main.js also adds the class to body once DOMContentLoaded fires; both selectors coexist. */ html.light-mode { --bg: #ffffff; --bg2: #f5f7fb; --bg3: #eaecf2; --surf: #ffffff; --surf2:#f0f2f8; --bdr: #d0d6e8; --bdr2: #b8c2d8; --t1: #0d1120; --t2: #4a5570; --t3: #8a96b0; --mode-icon: '🌙'; } html.light-mode .site-header { background: rgba(255,255,255,.97); } html.light-mode .mobile-nav { background: var(--bg2); } html.light-mode .btn-ghost { color: var(--t2); border-color: var(--bdr); } html.light-mode .site-footer { background: var(--bg2); } html.light-mode .section-dark { background: var(--bg2); } /* ── MODE TOGGLE BUTTON ── */ .mode-toggle { width: 34px; height: 34px; border-radius: 8px; background: var(--surf); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all .2s; flex-shrink: 0; line-height: 1; } .mode-toggle:hover { background: var(--surf2); border-color: var(--bdr2); } .mode-toggle::after { content: var(--mode-icon); } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--t1); font-family: var(--ffb); font-size: 16px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* ── LAYOUT ── */ .container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } section { padding: 80px 0; } .section-dark { background: var(--bg2); } /* ── LABELS ── */ .section-label { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.16); padding: 4px 12px; border-radius: 100px; margin-bottom: 16px; } /* ── SECTION TITLES — controlled sizes ── */ .section-title { font-family: var(--ffd); font-size: var(--h2-size, clamp(1.5rem, 2.8vw, 2.2rem)); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--t1); margin-bottom: 12px; } .section-sub { font-size: .9rem; color: var(--t2); line-height: 1.75; max-width: 500px; } .text-accent { color: var(--acc); } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: var(--r); font-family: var(--ffb); font-size: .85rem; font-weight: 600; cursor: pointer; border: none; transition: all .18s; white-space: nowrap; line-height: 1; } .btn-ghost { background: transparent; color: var(--t2); border: 1px solid var(--bdr); } .btn-ghost:hover { color: var(--t1); border-color: var(--bdr2); background: var(--surf); } .btn-primary { background: var(--acc); color: #000; font-weight: 700; box-shadow: 0 0 18px rgba(0,212,255,.2); } .btn-primary:hover { background: #19dbff; box-shadow: 0 0 26px rgba(0,212,255,.35); transform: translateY(-1px); } .btn-lg { padding: 12px 26px; font-size: .9rem; border-radius: 11px; } /* ============================================== HEADER ============================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(7,9,15,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--bdr); transition: box-shadow .2s; } .site-header.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.55); } /* Push body content below fixed header */ body { padding-top: 62px; } /* WordPress admin bar shifts header down */ .admin-bar .site-header { top: 32px; } .admin-bar body { padding-top: calc(62px + 32px); } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } .admin-bar body { padding-top: calc(58px + 46px); } } /* Logo */ .site-logo { display: flex; align-items: center; gap: 9px; font-family: var(--ffd); font-size: 1.1rem; font-weight: 800; color: var(--t1); letter-spacing: -.02em; flex-shrink: 0; } .logo-icon { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(135deg, var(--acc), var(--acc2)); display: flex; align-items: center; justify-content: center; font-size: .85rem; box-shadow: 0 0 14px rgba(0,212,255,.25); flex-shrink: 0; } /* Desktop nav */ .primary-nav { display: flex; align-items: center; gap: 2px; } .primary-nav a { color: var(--t2); font-size: .82rem; font-weight: 500; padding: 5px 11px; border-radius: 7px; transition: all .15s; } .primary-nav a:hover { color: var(--t1); background: var(--surf); } .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; width: 34px; height: 34px; } .nav-hamburger span { display: block; height: 2px; width: 20px; background: var(--t2); border-radius: 2px; transition: transform .25s, opacity .25s; transform-origin: center; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile controls: toggle + hamburger side by side ── */ .mobile-controls { display: none; /* shown only on mobile via media query */ align-items: center; gap: 6px; flex-shrink: 0; } .mode-toggle-mobile { width: 34px; height: 34px; border-radius: 8px; background: var(--surf); border: 1px solid var(--bdr); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all .2s; flex-shrink: 0; line-height: 1; } .mode-toggle-mobile:hover { background: var(--surf2); border-color: var(--bdr2); } .mode-toggle-mobile::after { content: var(--mode-icon); } /* Mobile drawer */ .mobile-nav { display: none; position: fixed; top: 62px; left: 0; right: 0; bottom: 0; background: var(--bg2); z-index: 899; padding: 8px 20px 48px; flex-direction: column; overflow-y: auto; border-top: 1px solid var(--bdr); } .mobile-nav.open { display: flex; } .mobile-nav a { display: block; padding: 13px 6px; font-size: .95rem; font-weight: 500; color: var(--t2); border-bottom: 1px solid var(--bdr); transition: color .15s; } .mobile-nav a:hover { color: var(--t1); } .mobile-nav-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .mobile-nav-actions .btn { justify-content: center; width: 100%; } /* ============================================== HERO — centered, font capped properly ============================================== */ .hero { position: relative; overflow: hidden; padding: 96px 0 72px; display: flex; align-items: center; } /* Soft background glow */ .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(0,212,255,.07) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 90% 70%, rgba(0,102,255,.05) 0%, transparent 55%); } /* Subtle grid */ .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,212,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.022) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 30%, black 0%, transparent 80%); } /* ── Hero Background Illustration ── */ .hero-bg-illustration { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; } .hero-bg-illustration svg { width: 100%; height: 100%; object-fit: cover; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 860px; margin: 0 auto; /* wider — uses more of the viewport */ } /* Badge pill */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--surf); border: 1px solid var(--bdr2); border-radius: 100px; padding: 5px 14px 5px 8px; font-size: .75rem; font-weight: 500; color: var(--t2); margin-bottom: 24px; animation: fadeUp .45s ease both; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 8px var(--grn); animation: blip 2.2s ease-in-out infinite; flex-shrink: 0; } @keyframes blip { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--grn); } 50% { opacity: .4; box-shadow: 0 0 3px var(--grn); } } /* ★ H1 — two controlled lines, nothing overflows ★ */ .hero h1 { font-family: var(--ffd); font-size: var(--h1-size, clamp(1.6rem, 4vw, 3.2rem)); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; margin-bottom: 18px; animation: fadeUp .45s .1s ease both; /* NO white-space:nowrap — let browser wrap naturally per line break tags */ } .hero h1 .highlight { background: linear-gradient(120deg, var(--acc) 20%, #5ab4ff 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero h1 .hero-muted { color: var(--t2); -webkit-text-fill-color: var(--t2); } /* Sub-heading */ .hero-sub { font-size: clamp(.85rem, 1.6vw, 1rem); color: var(--t2); line-height: 1.8; max-width: 620px; margin: 0 auto 32px; animation: fadeUp .45s .18s ease both; } /* CTA row */ .hero-actions { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; animation: fadeUp .45s .26s ease both; } /* Stats pill */ .hero-stats { display: inline-flex; align-items: center; gap: 0; flex-wrap: nowrap; background: var(--surf); border: 1px solid var(--bdr); border-radius: 12px; padding: 16px 24px; animation: fadeUp .45s .34s ease both; } .stat { text-align: center; padding: 0 20px; } .stat-divider { width: 1px; height: 28px; background: var(--bdr); flex-shrink: 0; } .stat-num { font-family: var(--ffd); font-size: 1.35rem; font-weight: 800; color: var(--t1); line-height: 1; letter-spacing: -.02em; } .stat-num span { color: var(--acc); } .stat-label { font-size: .65rem; color: var(--t3); margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ============================================== TRUST BAR — scrolling ticker ============================================== */ .trust-bar { height: 42px; overflow: hidden; background: var(--surf); border-top: 1px solid var(--bdr); border-bottom: 1px solid var(--bdr); display: flex; align-items: center; } .trust-track { display: flex; align-items: center; gap: 28px; white-space: nowrap; padding: 0 28px; animation: ticker 30s linear infinite; } .trust-bar:hover .trust-track { animation-play-state: paused; } .trust-item { font-size: .76rem; color: var(--t2); font-weight: 500; flex-shrink: 0; } .trust-sep { color: var(--bdr2); flex-shrink: 0; font-size: .55rem; } @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* ============================================== SECTION HELPERS ============================================== */ .section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; flex-wrap: wrap; gap: 14px; } .section-head-center { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 44px; } .section-head-center .section-sub { text-align: center; } /* ============================================== PRODUCT CARDS ============================================== */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .product-card { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--rlg); overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .product-card:hover { border-color: rgba(0,212,255,.22); transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.4); } .card-thumb { height: 150px; background: var(--bg3); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .card-thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .card-thumb-pattern { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px); background-size: 18px 18px; } .card-thumb-icon { font-size: 2.6rem; opacity: .1; position: relative; z-index: 1; } .card-badge { position: absolute; top: 11px; left: 11px; z-index: 2; font-size: .6rem; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 100px; text-transform: uppercase; } .badge-sale { position: absolute; top: 11px; right: 11px; z-index: 2; background: var(--red); color: #fff; font-size: .6rem; font-weight: 700; padding: 3px 8px; border-radius: 100px; } .card-body { padding: 17px; flex: 1; display: flex; flex-direction: column; } .card-title { font-family: var(--ffd); font-size: .9rem; font-weight: 700; color: var(--t1); margin-bottom: 6px; line-height: 1.3; } .card-desc { font-size: .78rem; color: var(--t2); line-height: 1.6; margin-bottom: 13px; flex: 1; } .card-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px solid var(--bdr); margin-top: auto; } .card-price { font-family: var(--ffd); font-size: .88rem; font-weight: 700; color: var(--t1); } .card-ver { font-size: .65rem; color: var(--t3); background: var(--bg3); border: 1px solid var(--bdr); padding: 2px 7px; border-radius: 100px; } .products-cta { text-align: center; margin-top: 32px; } /* ============================================== FEATURES BENTO ============================================== */ .features-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: var(--rlg); overflow: hidden; border: 1px solid var(--bdr); margin-top: 44px; } .feat-card { background: var(--surf); padding: 26px 22px; transition: background .15s; display: flex; flex-direction: column; gap: 10px; } .feat-card:hover { background: #18203a; } .feat-wide { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 18px; } .feat-icon-lg { font-size: 1.9rem; flex-shrink: 0; margin-top: 2px; } .feat-icon { font-size: 1.5rem; } .feat-title { font-family: var(--ffd); font-size: .88rem; font-weight: 700; color: var(--t1); } .feat-desc { font-size: .78rem; color: var(--t2); line-height: 1.7; } /* ============================================== STEPS ============================================== */ .steps-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 48px; position: relative; } .step-item { text-align: center; padding: 0 14px; position: relative; } .step-num { width: 46px; height: 46px; border-radius: 50%; background: var(--surf); border: 1px solid var(--bdr2); display: flex; align-items: center; justify-content: center; font-family: var(--ffd); font-size: .95rem; font-weight: 800; color: var(--acc); margin: 0 auto 16px; position: relative; z-index: 1; } .step-connector { position: absolute; top: 23px; left: calc(50% + 23px); right: calc(-50% + 23px); height: 1px; background: var(--bdr2); } .step-title { font-family: var(--ffd); font-size: .85rem; font-weight: 700; color: var(--t1); margin-bottom: 7px; } .step-desc { font-size: .76rem; color: var(--t2); line-height: 1.65; } /* ============================================== TESTIMONIALS ============================================== */ .testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 44px; } .testimonial { background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--rlg); padding: 22px; } .testimonial-stars { color: var(--gold); margin-bottom: 11px; font-size: .82rem; letter-spacing: 2px; } .testimonial-text { font-size: .8rem; color: var(--t2); line-height: 1.75; margin-bottom: 16px; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 10px; } .author-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--acc), var(--acc2)); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #000; } .author-name { font-weight: 600; font-size: .82rem; color: var(--t1); } .author-role { font-size: .7rem; color: var(--t3); margin-top: 1px; } /* ============================================== CTA ============================================== */ .cta-section { padding: 92px 0; text-align: center; position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(0,212,255,.05) 0%, transparent 65%); } .cta-inner { position: relative; z-index: 2; } .cta-title { font-size: clamp(1.5rem, 3vw, 2.4rem); } .cta-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; } /* ============================================== FOOTER ============================================== */ .site-footer { background: var(--bg2); border-top: 1px solid var(--bdr); padding: 52px 0 36px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--bdr); } .footer-brand p { color: var(--t2); font-size: .82rem; line-height: 1.7; margin-top: 13px; max-width: 240px; } .footer-col h4 { font-family: var(--ffd); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); margin-bottom: 14px; } .footer-col ul li { margin-bottom: 9px; } .footer-col ul li a { color: var(--t2); font-size: .82rem; transition: color .15s; } .footer-col ul li a:hover { color: var(--t1); } .footer-bottom { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--t3); flex-wrap: wrap; gap: 12px; } .footer-badges { display: flex; gap: 8px; flex-wrap: wrap; } .footer-badge { display: flex; align-items: center; gap: 5px; background: var(--surf); border: 1px solid var(--bdr); padding: 4px 10px; border-radius: 100px; font-size: .68rem; color: var(--t2); } .footer-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--grn); flex-shrink: 0; } /* ============================================== INNER PAGES ============================================== */ .page-wrap { max-width: 1120px; margin: 0 auto; padding: 48px 32px 80px; } .page-content { color: var(--t2); line-height: 1.8; font-size: .9rem; } .page-content h1, .page-content h2, .page-content h3 { font-family: var(--ffd); color: var(--t1); margin: 24px 0 10px; letter-spacing: -.02em; } .page-content p { margin-bottom: 15px; } .page-content a { color: var(--acc); } /* ============================================== REVEAL ============================================== */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================== TABLET — max 1024px ============================================== */ @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .features-bento { grid-template-columns: repeat(2, 1fr); } .feat-wide { grid-column: span 2; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .steps-track { grid-template-columns: repeat(2, 1fr); gap: 36px; } .step-connector { display: none; } } /* ============================================== MOBILE — max 768px ============================================== */ @media (max-width: 768px) { /* ── Header ── */ .site-header { padding: 0 16px; height: 58px; } body { padding-top: 58px; } .primary-nav { display: none; } .nav-actions { display: none; } .nav-hamburger { display: flex; } .mobile-controls { display: flex; } .mobile-nav { top: 58px; } /* ── Global ── */ .container { padding: 0 16px; } section { padding: 56px 0; } .cta-section { padding: 64px 0; } .page-wrap { padding: 32px 16px 60px; } /* ── Hero ── */ .hero { padding: 64px 0 52px; min-height: 520px; } /* Smaller on mobile — "Plugins & Themes" must fully fit */ .hero h1 { font-size: clamp(1.4rem, 6.5vw, 2.2rem); white-space: normal; overflow-wrap: break-word; word-break: break-word; } .hero-content { max-width: 100%; padding: 0 4px; } /* Illustration — scale to fill the taller mobile hero */ .hero-bg-illustration { min-height: 520px; } .hero-bg-illustration svg { min-height: 520px; } .hero-actions { flex-direction: column; align-items: center; gap: 8px; } .hero-actions .btn { width: auto; /* NOT full width — just content width */ min-width: 200px; /* consistent but not stretching edge to edge */ justify-content: center; } /* Stats — scroll horizontally, don't wrap */ .hero-stats { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; padding: 14px 16px; border-radius: 10px; gap: 0; scrollbar-width: none; } .hero-stats::-webkit-scrollbar { display: none; } .stat { padding: 0 14px; flex-shrink: 0; } .stat-num { font-size: 1.15rem; } .stat-label { font-size: .6rem; } .stat-divider { height: 24px; } /* ── Products ── */ .products-grid { grid-template-columns: 1fr; } .section-head { flex-direction: column; align-items: flex-start; gap: 10px; } /* ── Features ── */ .features-bento { grid-template-columns: 1fr; } .feat-wide { grid-column: span 1; flex-direction: column; } .feat-card { padding: 20px 16px; } /* ── Steps ── */ .steps-track { grid-template-columns: 1fr; gap: 24px; } .step-item { text-align: left; display: flex; flex-direction: column; align-items: flex-start; } .step-num { margin: 0 0 11px 0; } /* ── Testimonials ── */ .testimonials-grid { grid-template-columns: 1fr; } /* ── Footer ── */ .footer-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } .footer-brand p { max-width: 100%; } .footer-badges { justify-content: center; } .footer-col ul { padding: 0; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; } /* ── CTA ── */ .cta-actions { flex-direction: column; align-items: center; width: 100%; } .cta-actions .btn { width: auto; min-width: 200px; justify-content: center; } /* Browse All Products — slightly narrower on mobile, not edge-to-edge */ .products-cta .btn { min-width: 220px; width: auto; } /* Centered section heads → left-align on mobile */ .section-head-center { text-align: left; align-items: flex-start; } .section-head-center .section-sub { text-align: left; } } /* Extra-small phones */ @media (max-width: 380px) { .hero h1 { font-size: 1.35rem; } .stat { padding: 0 10px; } } /* ══ TESTIMONIAL SLIDERS — appended, no originals touched ════════════════ .testimonial card design is 100% unchanged — same CSS as always. Only the WRAPPER/TRACK/CONTROLS are new below. ════════════════════════════════════════════════════════════════════════ */ /* ── Shared slider wrapper ── */ .testi-slider { margin-top: 44px; overflow: hidden; /* clips cards outside view */ position: relative; } /* ── Horizontal sliding track ── */ .testi-track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; will-change: transform; /* transition applied by JS */ } /* ── Each card: exactly 1/3 width on desktop (3 visible) ── */ .testi-original .testi-track .testimonial, .testi-spotlight .testi-track .testimonial { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; } /* Tablet: 2 cards */ @media (min-width: 601px) and (max-width: 959px) { .testi-original .testi-track .testimonial, .testi-spotlight .testi-track .testimonial { flex: 0 0 calc((100% - 16px) / 2); } } /* Mobile: 1 card full width */ @media (max-width: 600px) { .testi-original .testi-track .testimonial, .testi-spotlight .testi-track .testimonial { flex: 0 0 100%; } } /* ── Style 2: Spotlight — dim non-active ── */ .testi-spotlight .testi-track .testimonial { opacity: .45; transform: scale(.94); transition: opacity .38s, transform .38s, border-color .38s; } .testi-spotlight .testi-track .testimonial.testi-spotlight-active { opacity: 1; transform: scale(1); border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc), 0 8px 28px rgba(0,212,255,.12); } /* ── Controls row ── */ .testi-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; } .testi-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surf2); border: 1px solid var(--bdr); color: var(--t1); font-size: .9rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s, border-color .18s, color .18s; } .testi-btn:hover { background: var(--acc); border-color: var(--acc); color: #000; } .testi-btn:disabled { opacity: .3; cursor: not-allowed; } .testi-dots { display: flex; gap: 6px; } .testi-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bdr2); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; } .testi-dot.on { background: var(--acc); transform: scale(1.4); } /* ── Style 3: Ticker ── */ .testi-ticker { overflow: hidden; position: relative; margin-top: 44px; } .testi-ticker::before, .testi-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .testi-ticker::before { left: 0; background: linear-gradient(to right, var(--bg2), transparent); } .testi-ticker::after { right: 0; background: linear-gradient(to left, var(--bg2), transparent); } .testi-ticker-rail { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px; width: max-content; } .testi-ticker-rail:hover { animation-play-state: paused !important; } .testi-ticker-rail .testimonial { flex: 0 0 340px; min-width: 0; } @keyframes testi-scroll { from { transform: translateX(0); } to { transform: translateX(var(--testi-dist)); } } /* Light mode */ body.light-mode .testi-btn { background: var(--surf); border-color: var(--bdr); } /* Blog post typography */ .blog-post-title { font-size: 42px; font-family: var(--ffd,'Syne',sans-serif); font-weight:800; letter-spacing:-.03em; line-height:1.15; margin-bottom:24px; color:var(--t1); -webkit-text-fill-color:var(--t1); } .blog-post-content { font-size:17px; line-height:1.8; color:var(--t2); } .blog-post-content p { margin-bottom:1.4em; } .blog-post-content h2,.blog-post-content h3 { color:var(--t1); margin:1.6em 0 .6em; } .blog-post-meta { font-size:13px; color:var(--t3); display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap; align-items:center; } .blog-cat { background:rgba(0,212,255,.1); color:var(--acc); padding:3px 10px; border-radius:20px; font-weight:600; font-size:.85em; } .blog-post-thumb { margin-bottom:28px; border-radius:var(--rlg,14px); overflow:hidden; } .blog-post-thumb img { width:100%; height:auto; display:block; } .blog-post-nav { display:flex; justify-content:space-between; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--bdr); flex-wrap:wrap; } .blog-nav-link { color:var(--acc); text-decoration:none; font-weight:600; font-size:.9rem; max-width:45%; } body.light-mode .blog-post-title { color:var(--t1)!important; -webkit-text-fill-color:var(--t1)!important; } /* ============================================== SIDEBAR LAYOUT — tap-layout-wrap system ============================================== */ /* Outer wrapper — full width, centers everything */ .tap-layout-wrap { display: block; } /* Main content column — inherits page-wrap styles */ .tap-main-col { width: 100%; } /* Sidebar column — hidden by default */ .tap-sidebar-col { display: none; } /* ── When sidebar is ON ── */ .tap-layout-wrap.tap-has-sidebar { display: flex !important; align-items: flex-start; gap: 0; max-width: 1380px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } .tap-layout-wrap.tap-has-sidebar .tap-main-col { flex: 1; min-width: 0; /* Reset page-wrap centering since parent now controls width */ max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; /* Also override page-wrap if class is present */ width: auto !important; float: none !important; } .tap-layout-wrap.tap-has-sidebar .tap-sidebar-col { display: block !important; width: 300px; min-width: 300px; flex-shrink: 0; padding-top: 48px; padding-left: 32px; box-sizing: border-box; border-left: 1px solid var(--bdr); } /* Left position — flip the order */ .tap-layout-wrap.tap-has-sidebar.tap-sidebar-left { flex-direction: row-reverse; } .tap-layout-wrap.tap-has-sidebar.tap-sidebar-left .tap-sidebar-col { padding-left: 0; padding-right: 32px; border-left: none; border-right: 1px solid var(--bdr); } /* Mobile — stack sidebar below content */ @media (max-width: 768px) { .tap-layout-wrap.tap-has-sidebar, .tap-layout-wrap.tap-has-sidebar.tap-sidebar-left { flex-direction: column !important; padding: 0 16px; } .tap-layout-wrap.tap-has-sidebar .tap-sidebar-col { width: 100% !important; min-width: 0 !important; padding: 24px 0 0 0 !important; border-left: none !important; border-right: none !important; border-top: 1px solid var(--bdr); } } /* Sidebar widgets */ .sidebar-widget { margin-bottom: 28px; background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r, 10px); padding: 20px; } .sidebar-widget-title { font-family: var(--ffd); font-size: .9rem; font-weight: 700; color: var(--t1); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bdr); letter-spacing: -.01em; } .sidebar-widget ul { list-style: none; padding: 0; margin: 0; } .sidebar-widget ul li { padding: 6px 0; border-bottom: 1px solid var(--bdr); font-size: .85rem; color: var(--t2); } .sidebar-widget ul li:last-child { border-bottom: none; } .sidebar-widget ul li a { color: var(--t2); text-decoration: none; transition: color .2s; } .sidebar-widget ul li a:hover { color: var(--acc); } /* Homepage sidebar — same tap- system */ .tap-layout-wrap.tap-has-sidebar .tap-home-sidebar-col { display: block !important; width: 300px; min-width: 300px; flex-shrink: 0; padding-top: 56px; padding-left: 32px; box-sizing: border-box; border-left: 1px solid var(--bdr); } .tap-layout-wrap.tap-has-sidebar.tap-sidebar-left .tap-home-sidebar-col { padding-left: 0; padding-right: 32px; border-left: none; border-right: 1px solid var(--bdr); } @media (max-width: 768px) { .tap-layout-wrap.tap-has-sidebar .tap-home-sidebar-col { width: 100% !important; min-width: 0 !important; padding: 24px 0 0 0 !important; border-left: none !important; border-right: none !important; border-top: 1px solid var(--bdr); } } .page-wrap.tapplaza-with-sidebar, .page-wrap.tapplaza-with-sidebar.sidebar-left { flex-direction: column; } .tapplaza-sidebar { width: 100%; } } /* ── Sidebar body-class fallback (backup for theme_mod issues) ── */ body.tapplaza-sidebar-on .tap-layout-wrap { display: flex !important; align-items: flex-start; max-width: 1380px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } body.tapplaza-sidebar-on .tap-main-col { flex: 1; min-width: 0; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.tapplaza-sidebar-on .tap-sidebar-col { display: block !important; width: 300px; min-width: 300px; flex-shrink: 0; padding-top: 48px; padding-left: 32px; box-sizing: border-box; border-left: 1px solid var(--bdr); } body.tapplaza-sidebar-left .tap-layout-wrap { flex-direction: row-reverse; } body.tapplaza-sidebar-left .tap-sidebar-col { padding-left: 0; padding-right: 32px; border-left: none; border-right: 1px solid var(--bdr); } @media (max-width: 768px) { body.tapplaza-sidebar-on .tap-layout-wrap { flex-direction: column !important; padding: 0 16px; } body.tapplaza-sidebar-on .tap-sidebar-col { width: 100% !important; min-width: 0 !important; padding: 24px 0 0 0 !important; border-left: none !important; border-right: none !important; border-top: 1px solid var(--bdr); } }