/* ===== Design tokens (ported from original oklch theme) ===== */ :root { --radius: 0.85rem; --background: oklch(0.99 0.006 85); --foreground: oklch(0.19 0.025 265); --card: oklch(1 0 0); --card-foreground: oklch(0.19 0.025 265); --primary: oklch(0.69 0.2 45); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.96 0.012 85); --secondary-foreground: oklch(0.19 0.025 265); --muted: oklch(0.965 0.01 85); --muted-foreground: oklch(0.49 0.025 265); --accent: oklch(0.95 0.025 45); --accent-foreground: oklch(0.23 0.055 45); --border: oklch(0.91 0.015 265); --input: oklch(0.91 0.015 265); --ring: oklch(0.69 0.2 45); --success: oklch(0.62 0.16 150); --warning: oklch(0.75 0.16 80); } /* ===== Dark mode ===== (toggled via data-theme="dark" on , set from the switch on the user's Profile page — see assets/js/theme.js) */ [data-theme="dark"] { --background: oklch(0.17 0.015 265); --foreground: oklch(0.95 0.01 85); --card: oklch(0.22 0.018 265); --card-foreground: oklch(0.95 0.01 85); --secondary: oklch(0.27 0.015 265); --secondary-foreground: oklch(0.95 0.01 85); --muted: oklch(0.24 0.015 265); --muted-foreground: oklch(0.68 0.015 265); --accent: oklch(0.3 0.05 45); --accent-foreground: oklch(0.93 0.03 45); --border: oklch(0.32 0.015 265); --input: oklch(0.32 0.015 265); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; background-color: var(--background); color: var(--foreground); } a { text-decoration: none; color: inherit; } img, svg { display: block; } [data-lucide] { display: inline-block; width: 1em; height: 1em; } .size-14 { width: .875rem; height: .875rem; } .size-16 { width: 1rem; height: 1rem; } .size-18 { width: 1.125rem; height: 1.125rem; } .size-20 { width: 1.25rem; height: 1.25rem; } .site { min-height: 100vh; overflow: hidden; background: var(--background); color: var(--foreground); } .page-shell { width: min(1140px, 100%); margin-inline: auto; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 1.25rem; border-radius: 999px; border: 0; font-family: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; background: transparent; color: var(--foreground); } .btn-lg { height: 2.75rem; padding: 0 1.6rem; font-size: .9rem; } .btn-icon { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; } .btn-ghost { background: transparent; color: var(--foreground); } .btn-ghost:hover { background: var(--accent); } .btn-secondary { background: var(--secondary); color: var(--secondary-foreground); } .w-full { width: 100%; } .button-orange { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 12px 24px oklch(0.69 0.2 45 / .18); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .button-orange:hover { background: oklch(0.63 0.2 45); box-shadow: 0 16px 30px oklch(0.69 0.2 45 / .26); transform: translateY(-2px); } .button-outline { height: 2.5rem; padding: 0 1.25rem; border-radius: 999px; border: 1px solid var(--border); color: var(--foreground); display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; transition: border-color .2s ease, color .2s ease, transform .2s ease; } .button-outline:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } /* ===== Top strip ===== */ .top-strip { border-bottom: 1px solid oklch(0.82 0.04 45 / .4); background: oklch(0.96 0.03 65); } .top-strip-inner { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1.25rem; font-size: .75rem; font-weight: 700; color: var(--primary); } /* ===== Header ===== */ .site-header { position: relative; z-index: 30; height: 76px; background: var(--background); } .header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; } .brand-mark { display: inline-flex; align-items: center; gap: .62rem; color: var(--foreground); font-size: .76rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; } .brand-mark b { color: var(--primary); } .brand-mark i { color: var(--muted-foreground); font-style: normal; font-weight: 600; } .brand-icon, .modal-icon { display: inline-flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border: 1px solid oklch(0.69 0.2 45 / .3); border-radius: .65rem; color: var(--primary); background: oklch(0.69 0.2 45 / .1); } .brand-logo-img { height: 2.1rem; width: 2.1rem; object-fit: contain; flex: 0 0 auto; } .nav-desktop { display: none; align-items: center; gap: 2rem; font-size: .85rem; font-weight: 600; color: var(--muted-foreground); } .nav-link { position: relative; transition: color .2s ease; } .nav-link:hover, .nav-link.is-active { color: var(--primary); } .nav-link.is-active::after { position: absolute; right: 0; bottom: -.8rem; left: 0; height: 2px; border-radius: 2px; background: var(--primary); content: ""; } .header-actions { display: none; align-items: center; gap: .75rem; } .nav-toggle { display: inline-flex; } .mobile-menu { position: absolute; left: 1rem; right: 1rem; top: 66px; z-index: 40; border-radius: .8rem; padding: 1rem; box-shadow: 0 18px 45px oklch(0.25 0.03 265 / .16); border: 1px solid var(--border); background: oklch(1 0 0 / .98); } .mobile-menu-links { display: grid; gap: .25rem; font-size: .85rem; font-weight: 600; } .mobile-menu-links a { display: block; border-radius: .5rem; padding: .7rem; color: var(--muted-foreground); } .mobile-menu-links a:hover { color: var(--foreground); background: var(--accent); } .mobile-menu .btn { margin-top: 1rem; } /* ===== Hero ===== */ .hero-section { min-height: 610px; padding: 2.5rem 1.25rem 5rem; } .hero-grid { display: grid; gap: 2.5rem; align-items: center; } .hero-copy { max-width: 42rem; } .eyebrow, .section-kicker, .mini-kicker { color: var(--primary); font-size: .67rem; font-weight: 800; letter-spacing: .16em; } .eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.45rem; } .eyebrow-icon { display: grid; height: 1.4rem; width: 1.4rem; place-items: center; border-radius: 50%; background: var(--accent); } h1 { max-width: 720px; color: var(--foreground); font-size: clamp(3rem, 5.4vw, 5.35rem); font-weight: 800; letter-spacing: -.055em; line-height: .99; margin: 0; } h1 span, .section-heading h2 span, .activity-copy h2 span, .support-band h2 span { color: var(--primary); } .hero-lede { max-width: 550px; margin: 1.5rem 0 1.35rem; color: var(--muted-foreground); font-size: 1rem; line-height: 1.75; } .hero-checks { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-bottom: 1.7rem; color: var(--foreground); font-size: .76rem; font-weight: 700; } .hero-checks span { display: inline-flex; align-items: center; gap: .4rem; } .hero-checks svg, .hero-checks [data-lucide] { color: var(--primary); } .hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .hero-proof { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; color: var(--muted-foreground); font-size: .72rem; } .hero-proof b { color: var(--foreground); } .proof-stars { color: var(--primary); letter-spacing: .12em; } .avatar-stack { display: flex; padding-left: .3rem; } .avatar-stack span { display: grid; height: 1.8rem; width: 1.8rem; place-items: center; margin-left: -.3rem; border: 2px solid var(--background); border-radius: 50%; background: oklch(0.78 0.03 260); color: var(--foreground); font-size: .52rem; font-weight: 800; } .avatar-stack span:nth-child(2) { background: oklch(0.72 0.12 300); } .avatar-stack span:nth-child(3) { background: oklch(0.75 0.14 35); } .avatar-stack span:nth-child(4) { background: var(--primary); color: var(--primary-foreground); } .hero-visual { position: relative; min-height: 510px; min-width: 0; } .hero-orange-panel { position: absolute; top: 11%; right: 3%; height: 67%; width: 70%; border-radius: 2rem; background: linear-gradient(135deg, oklch(0.76 0.18 48), var(--primary)); box-shadow: 0 28px 50px oklch(0.69 0.2 45 / .2); } .workspace-phone { position: absolute; z-index: 2; top: 2%; right: 26%; width: min(290px, 60%); min-height: 480px; overflow: hidden; border: 10px solid oklch(0.2 0.025 265); border-radius: 2.4rem; padding: 2.4rem .8rem .8rem; background: oklch(0.97 0.008 265); color: var(--foreground); transform: rotate(2deg); box-shadow: 0 25px 60px oklch(0.2 0.03 265 / .3); } .phone-notch { position: absolute; top: 0; left: 50%; height: 1.15rem; width: 6rem; border-radius: 0 0 1rem 1rem; background: oklch(0.2 0.025 265); transform: translateX(-50%); } .phone-topline, .phone-section-title, .phone-activity > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .phone-topline small, .phone-balance small { display: block; color: var(--muted-foreground); font-size: .48rem; font-weight: 600; letter-spacing: .04em; } .phone-topline b { display: block; margin-top: .2rem; font-size: .75rem; } .phone-bell { display: grid; height: 1.7rem; width: 1.7rem; place-items: center; border: 1px solid var(--border); border-radius: .55rem; color: var(--muted-foreground); background: var(--card); } .phone-balance { margin-top: 1rem; border-radius: 1rem; padding: .9rem; background: var(--primary); color: var(--primary-foreground); } .phone-balance small, .phone-balance span { color: oklch(1 0 0 / .76); } .phone-balance strong { display: block; margin: .35rem 0 .4rem; font-size: 1.25rem; } .phone-balance span { display: inline-flex; align-items: center; gap: .3rem; font-size: .5rem; } .phone-section-title { margin: 1rem 0 .55rem; font-size: .62rem; } .phone-section-title span { color: var(--primary); font-size: .55rem; font-weight: 800; } .phone-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; border: 1px solid var(--border); border-radius: .8rem; padding: .6rem; background: var(--card); } .phone-service-grid span { display: grid; justify-items: center; gap: .25rem; color: var(--primary); } .phone-service-grid [data-lucide] { height: 1.25rem; width: 1.25rem; padding: .28rem; border-radius: .4rem; background: var(--accent); } .phone-service-grid small { color: var(--muted-foreground); font-size: .43rem; } .phone-activity { margin-top: .75rem; border: 1px solid var(--border); border-radius: .7rem; padding: .65rem; background: var(--card); } .phone-activity > div { color: var(--primary); font-size: .52rem; } .phone-activity > div span { margin-right: auto; color: var(--foreground); font-weight: 700; } .phone-activity > div b { color: var(--success); font-size: .45rem; } .phone-activity > small { display: block; margin-top: .3rem; color: var(--muted-foreground); font-size: .44rem; } .phone-nav { position: absolute; right: .7rem; bottom: .5rem; left: .7rem; display: flex; justify-content: space-around; border-top: 1px solid var(--border); padding-top: .55rem; color: var(--muted-foreground); } .phone-nav span:first-child { color: var(--primary); } .phone-nav [data-lucide] { height: 1rem; width: 1rem; } .floating-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: .55rem; border: 1px solid oklch(0.9 0.015 265); border-radius: .85rem; padding: .55rem .7rem; background: var(--card); box-shadow: 0 18px 35px oklch(0.25 0.03 265 / .14); font-size: .65rem; animation: chip-float 4s ease-in-out infinite; } .chip-left { top: 15%; left: 2%; } .chip-right { top: 33%; right: -1%; animation-delay: .8s; } .chip-bottom { bottom: 10%; left: 11%; animation-delay: 1.6s; } .chip-icon { display: grid; height: 1.8rem; width: 1.8rem; place-items: center; border-radius: .55rem; } .chip-icon [data-lucide] { height: 1rem; width: 1rem; } .chip-icon.orange, .service-card.orange .service-icon { color: var(--primary); background: var(--accent); } .chip-icon.green, .service-card.green .service-icon { color: oklch(0.55 0.16 150); background: oklch(0.94 0.04 150); } .chip-icon.pink, .service-card.pink .service-icon { color: oklch(0.65 0.2 335); background: oklch(0.95 0.04 335); } /* ===== Services ===== */ .services-section { background: var(--background); padding: 5rem 1.25rem; } .center-heading { max-width: 630px; margin-inline: auto; text-align: center; } .center-heading h2, .section-heading h2, .activity-copy h2, .support-band h2 { margin-top: .65rem; color: var(--foreground); font-size: clamp(2.1rem, 4vw, 3.45rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.05; } .center-heading p, .section-heading p, .activity-copy p { margin-top: .8rem; color: var(--muted-foreground); font-size: .92rem; line-height: 1.7; } .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; } .service-card { position: relative; min-height: 205px; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; padding: 1.35rem; background: var(--card); box-shadow: 0 8px 20px oklch(0.35 0.02 265 / .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .service-card:hover { border-color: oklch(0.69 0.2 45 / .35); box-shadow: 0 18px 35px oklch(0.35 0.02 265 / .1); transform: translateY(-5px); } .service-card::after { position: absolute; right: -3rem; bottom: -4rem; height: 9rem; width: 9rem; border-radius: 50%; background: oklch(0.69 0.2 45 / .07); filter: blur(18px); content: ""; } .service-card.green::after { background: oklch(0.62 0.16 150 / .08); } .service-card.blue::after, .service-card.sky::after { background: oklch(0.65 0.18 250 / .08); } .service-card.pink::after { background: oklch(0.67 0.19 330 / .08); } .service-card.violet::after { background: oklch(0.66 0.16 300 / .08); } .service-icon { position: relative; z-index: 1; display: grid; height: 2.55rem; width: 2.55rem; place-items: center; border-radius: .75rem; } .service-card.blue .service-icon, .service-card.sky .service-icon { color: oklch(0.58 0.18 250); background: oklch(0.94 0.04 250); } .service-card.violet .service-icon { color: oklch(0.58 0.16 300); background: oklch(0.94 0.04 300); } .service-label { position: absolute; top: 1.45rem; right: 1.35rem; color: var(--muted-foreground); font-size: .53rem; font-weight: 700; } .service-card h3 { position: relative; z-index: 1; margin-top: 1.55rem; font-size: 1rem; font-weight: 800; } .service-card p { position: relative; z-index: 1; max-width: 270px; margin-top: .45rem; color: var(--muted-foreground); font-size: .76rem; line-height: 1.6; } .service-card a { position: absolute; bottom: 1.25rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; color: var(--foreground); font-size: .68rem; font-weight: 800; } .service-card a:hover { color: var(--primary); } .empty-state { margin-top: 1rem; border: 1px dashed var(--border); border-radius: .8rem; padding: 1rem; text-align: center; color: var(--muted-foreground); font-size: .8rem; } .service-card.is-coming-soon { opacity: .62; background: var(--muted); box-shadow: none; } .service-card.is-coming-soon:hover { transform: none; box-shadow: none; border-color: var(--border); } .label-soon { color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .5rem; } .service-disabled-link { position: absolute; bottom: 1.25rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 800; cursor: default; } /* ===== Trust band ===== */ .trust-band { background: oklch(0.97 0.025 65); padding: 4rem 1.25rem; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .trust-card { border: 1px solid oklch(0.9 0.025 65); border-radius: 1rem; padding: 1.2rem; background: var(--card); } .trust-card > span { display: grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: .65rem; color: var(--primary); background: var(--accent); } .trust-card [data-lucide] { height: 1rem; width: 1rem; } .trust-card h3 { margin-top: 1rem; font-size: .88rem; font-weight: 800; } .trust-card p { margin-top: .4rem; color: var(--muted-foreground); font-size: .7rem; line-height: 1.55; } /* ===== Steps ===== */ .steps-section { padding: 5rem 1.25rem; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; flex-wrap: wrap; } .section-heading p { max-width: 370px; } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 3rem; } .step { border-top: 1px solid var(--border); padding: 1.1rem 2.3rem 0 0; } .step + .step { border-left: 1px solid var(--border); padding-left: 2.3rem; } .step > span { color: var(--primary); font-size: .67rem; font-weight: 800; letter-spacing: .1em; } .step h3 { margin-top: 1rem; font-size: 1rem; font-weight: 800; } .step p { margin-top: .55rem; color: var(--muted-foreground); font-size: .8rem; line-height: 1.7; } /* ===== Activity / orders preview ===== */ .activity-section { padding: 0 1.25rem 5rem; } .activity-panel { display: grid; grid-template-columns: .72fr 1.28fr; gap: 3rem; align-items: center; border: 1px solid var(--border); border-radius: 1.2rem; padding: 2.5rem; background: oklch(0.98 0.012 265); } .activity-copy p { max-width: 340px; } .search-field { display: flex; align-items: center; gap: .6rem; max-width: 320px; margin-top: 1.5rem; border: 1px solid var(--border); border-radius: .7rem; padding: .75rem .9rem; color: var(--muted-foreground); background: var(--card); } .search-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px oklch(0.69 0.2 45 / .1); } .search-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--foreground); font-size: .75rem; font-family: inherit; } .orders-panel { border: 1px solid var(--border); border-radius: 1rem; padding: 1.2rem; background: var(--card); box-shadow: 0 15px 30px oklch(0.35 0.02 265 / .06); } .orders-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .orders-head h3 { margin-top: .3rem; font-size: 1rem; font-weight: 800; } .orders-tabs { display: flex; gap: 1.15rem; overflow-x: auto; border-bottom: 1px solid var(--border); margin-top: 1.1rem; } .orders-tabs span { flex: 0 0 auto; padding-bottom: .7rem; color: var(--muted-foreground); font-size: .63rem; } .orders-tabs .active { border-bottom: 2px solid var(--primary); color: var(--foreground); } .orders-tabs b { margin-left: .25rem; color: var(--primary); } .table-order { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--border); padding: .75rem 0; font-size: .68rem; } .table-order:last-child { border-bottom: 0; } .table-order > div { min-width: 0; flex: 1; } .table-order b, .table-order small { display: block; } .table-order small { margin-top: .2rem; color: var(--muted-foreground); font-size: .52rem; } .table-order-icon { display: grid; height: 2rem; width: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .55rem; color: var(--primary); background: var(--accent); } .table-order > strong { flex: 0 0 auto; font-size: .67rem; } .status-badge { flex: 0 0 auto; border-radius: 999px; padding: .25rem .5rem; font-size: .52rem; font-weight: 700; } .badge-primary { color: var(--primary); background: var(--accent); } .badge-success { color: var(--success); background: oklch(0.94 0.04 150); } /* ===== Support band ===== */ .support-band { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-foreground); padding: 4rem 1.25rem; } .support-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .support-band .section-kicker { color: oklch(1 0 0 / .72); } .support-band h2 span { color: oklch(1 0 0); } .support-band p { max-width: 330px; margin-bottom: 1.3rem; color: oklch(1 0 0 / .78); font-size: .88rem; line-height: 1.6; } .support-watermark { position: absolute; right: 5%; height: 14rem; width: 14rem; color: oklch(1 0 0 / .12); transform: rotate(-15deg); } .support-band .btn-secondary { background: oklch(1 0 0 / .16); color: #fff; } .support-band .btn-secondary:hover { background: oklch(1 0 0 / .26); } /* ===== Footer ===== */ .footer { padding: 2.5rem 1.25rem; } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-tagline, .footer-copy { color: var(--muted-foreground); } .footer-tagline { font-size: .85rem; } .footer-copy { font-size: .75rem; } .footer-legal { display: flex; gap: 1.25rem; flex-wrap: wrap; } .footer-legal a { font-size: .78rem; font-weight: 600; color: var(--muted-foreground); } .footer-legal a:hover { color: var(--primary); } /* ===== Modal ===== */ .modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 1rem; background: oklch(0.2 0.025 265 / .5); backdrop-filter: blur(8px); } .modal-backdrop[hidden] { display: none; } .modal-card { position: relative; width: min(100%, 420px); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; background: var(--card); box-shadow: 0 30px 80px oklch(0.25 0.03 265 / .24); animation: modal-in .25s ease-out; } .modal-close { position: absolute; right: .75rem; top: .75rem; } .modal-icon { margin-bottom: 1.5rem; } .modal-card h2 { margin-top: .8rem; font-size: 1.6rem; font-weight: 800; } .modal-card p { margin: .8rem 0 1.3rem; color: var(--muted-foreground); font-size: .85rem; line-height: 1.7; } .modal-ref { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: .6rem; padding: .35rem .45rem .35rem .8rem; font-size: .7rem; } .modal-ref span { color: var(--muted-foreground); } .modal-ref b { margin-left: auto; margin-right: .5rem; } .modal-ref .text-success { color: var(--success); } @keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ===== Breakpoints (match original) ===== */ @media (min-width: 640px) { .header-actions { display: flex; } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: .88fr 1.12fr; } .nav-desktop { display: flex; } .nav-toggle { display: none; } .header-inner, .hero-section, .services-section, .trust-band, .steps-section, .activity-section, .support-band, .footer { padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 1024px) { .hero-section { padding-bottom: 7rem; padding-top: 4rem; } .services-section { padding-top: 7rem; padding-bottom: 7rem; } .steps-section { padding-top: 7rem; padding-bottom: 7rem; } } @media (max-width: 1023px) { .hero-section { min-height: 0; } .hero-visual { max-width: 680px; margin: 0 auto; width: 100%; } .service-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .section-heading { align-items: start; flex-direction: column; gap: 1rem; } .activity-panel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .site-header { height: 66px; } .brand-mark { font-size: .63rem; } .hero-section { padding-top: 2.4rem; } h1 { font-size: clamp(2.65rem, 13vw, 4rem); } .hero-lede { font-size: .9rem; } .hero-checks { gap: .65rem; font-size: .68rem; } .hero-visual { min-height: 420px; margin-top: 1rem; } .hero-orange-panel { right: 2%; height: 60%; width: 80%; } .workspace-phone { right: 19%; width: min(260px, 65%); min-height: 400px; } .floating-chip { font-size: .56rem; } .chip-left { left: -1%; } .chip-right { right: -3%; } .chip-bottom { bottom: 7%; left: 0; } .service-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .service-card { min-height: 190px; padding: 1rem; } .service-label { display: none; } .service-card h3 { margin-top: 1.1rem; font-size: .82rem; } .service-card p { font-size: .68rem; } .service-card a { bottom: 1rem; font-size: .62rem; } .trust-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .trust-card { padding: .9rem; } .trust-card h3 { font-size: .76rem; } .trust-card p { font-size: .62rem; } .steps-grid { grid-template-columns: 1fr; } .step, .step + .step { border-left: 0; padding: 1rem 0; } .step + .step { border-top: 1px solid var(--border); } .activity-panel { padding: 1.2rem; } .table-order { flex-wrap: wrap; } .table-order > div { min-width: calc(100% - 3rem); } .table-order .status-badge { margin-left: 2.7rem; } .footer-inner { align-items: flex-start; flex-direction: column; } .support-inner { align-items: flex-start; flex-direction: column; } .support-watermark { right: -3rem; bottom: -3rem; } } /* =========================================================== RESPONSIVE PATCH — append-only, added without touching any existing rule above. Fills the gaps at screen sizes the original breakpoints (1024px / 900px / 640px) didn't cover cleanly: the tablet range (768–1023px) and very small phones (under 360px). =========================================================== */ /* ---- Tablet range: hero, services, trust band feel cramped between the "mobile" and "desktop" breakpoints ---- */ @media (min-width: 768px) and (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; text-align: center; } .hero-copy { max-width: 640px; margin-inline: auto; } .hero-checks, .hero-cta-row, .hero-proof { justify-content: center; } .hero-visual { max-width: 520px; margin: 2.5rem auto 0; } .service-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .trust-grid { grid-template-columns: repeat(4, 1fr); } .steps-grid { grid-template-columns: repeat(3, 1fr); } .activity-panel { grid-template-columns: 1fr; gap: 2rem; } .activity-copy { text-align: center; } .search-field { margin-inline: auto; } } /* ---- Very small phones (iPhone SE and similar, <360px): the existing 640px breakpoint assumes a bit more room than this ---- */ @media (max-width: 359px) { h1 { font-size: 2.1rem; } .page-shell { padding-inline: .85rem; } .service-grid, .trust-grid { grid-template-columns: 1fr; } .hero-cta-row { flex-direction: column; align-items: stretch; } .hero-cta-row .btn { width: 100%; text-align: center; justify-content: center; } } /* ---- Comfortable tap targets on touch screens, site-wide ---- Several small ghost/icon buttons were sized for a mouse cursor; on touch this keeps them at least 40px so they're easy to hit without changing their visual size on desktop. */ @media (hover: none) and (pointer: coarse) { .btn-ghost, .btn-icon, .nav-toggle, .chip { min-height: 40px; } } /* ---- Large desktop monitors: keep line-length readable instead of stretching hero copy edge-to-edge ---- */ @media (min-width: 1600px) { .page-shell { max-width: 1280px; } }