/* ========================================================================== City Pages — Complete UI/UX Redesign Mobile-first, monochrome palette, motion-led differentiation ========================================================================== */ :root { /* Colors */ --ttc-bg: #FBF7F0; --ttc-ink: #0d171e; --ttc-ink-92: rgba(13, 23, 30, 0.92); --ttc-ink-65: rgba(13, 23, 30, 0.65); --ttc-ink-40: rgba(13, 23, 30, 0.40); --ttc-ink-8: rgba(13, 23, 30, 0.08); --ttc-ink-4: rgba(13, 23, 30, 0.04); --ttc-ink-solid: #0d171e; --ttc-on-dark-92: rgba(251, 247, 240, 0.92); --ttc-on-dark-65: rgba(251, 247, 240, 0.65); --ttc-on-dark-8: rgba(251, 247, 240, 0.08); --ttc-star: #0d171e; /* Typography */ --ttc-font-display: 'Montserrat', sans-serif; --ttc-font-body: 'Montserrat', sans-serif; --ttc-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; --ttc-h1: clamp(2.125rem, 1.6rem + 2.6vw, 4rem); --ttc-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); --ttc-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); --ttc-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); --ttc-mono: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* Spacing (8px base) */ --ttc-space-xs: 8px; --ttc-space-sm: 16px; --ttc-space-md: 24px; --ttc-space-lg: 32px; --ttc-space-xl: 48px; --ttc-space-2xl: 64px; --ttc-space-3xl: 96px; --ttc-space-4xl: 128px; /* Radius */ --ttc-radius-card: 20px; --ttc-radius-card-sm: 16px; --ttc-radius-btn: 999px; /* Easing */ --ttc-ease: cubic-bezier(0.22, 1, 0.36, 1); --ttc-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Shadows */ --ttc-shadow-tile: 0 24px 60px -12px rgba(13, 23, 30, 0.12); --ttc-shadow-card: 0 4px 12px rgba(13, 23, 30, 0.08); --ttc-shadow-card-hover: 0 8px 24px rgba(13, 23, 30, 0.12); } /* ── Palette scope ───────────────────────────────────────────────────────── The main site's header emits its OWN :root block (e.g. --ttc-bg: #0b0b0c) in AFTER this stylesheet's , which otherwise clobbers the city palette for every var(--ttc-*). Re-declaring the palette on the city top-level containers scopes it so these sections always render correctly regardless of what the global site sets on :root. ──────────────────── */ .ttc-hero, .ttc-section, .ttc-cta, .ttc-wrap { --ttc-bg: #FBF7F0; --ttc-ink: #0d171e; --ttc-ink-92: rgba(13, 23, 30, 0.92); --ttc-ink-65: rgba(13, 23, 30, 0.65); --ttc-ink-40: rgba(13, 23, 30, 0.40); --ttc-ink-8: rgba(13, 23, 30, 0.08); --ttc-ink-4: rgba(13, 23, 30, 0.04); --ttc-ink-solid: #0d171e; --ttc-on-dark-92: rgba(251, 247, 240, 0.92); --ttc-on-dark-65: rgba(251, 247, 240, 0.65); --ttc-on-dark-8: rgba(251, 247, 240, 0.08); --ttc-star: #0d171e; /* Typography tokens collide-free (site header does not define these) */ --ttc-font-display: 'Montserrat', sans-serif; --ttc-font-body: 'Montserrat', sans-serif; --ttc-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; --ttc-h1: clamp(2.125rem, 1.6rem + 2.6vw, 4rem); --ttc-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); --ttc-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); --ttc-body: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); --ttc-mono: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* Spacing tokens (site header does not define these) */ --ttc-space-xs: 8px; --ttc-space-sm: 16px; --ttc-space-md: 24px; --ttc-space-lg: 32px; --ttc-space-xl: 48px; --ttc-space-2xl: 64px; --ttc-space-3xl: 96px; --ttc-space-4xl: 128px; /* Radius tokens (site header uses --ttc-radius/--ttc-radius-sm) */ --ttc-radius-card: 20px; --ttc-radius-card-sm: 16px; --ttc-radius-btn: 999px; /* Motion + shadow tokens */ --ttc-ease: cubic-bezier(0.22, 1, 0.36, 1); --ttc-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ttc-shadow-tile: 0 24px 60px -12px rgba(13, 23, 30, 0.12); --ttc-shadow-card: 0 4px 12px rgba(13, 23, 30, 0.08); --ttc-shadow-card-hover: 0 8px 24px rgba(13, 23, 30, 0.12); } /* ── Reduced Motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-lines], [data-reveal-late], [data-step], .line, .ttc-city-line { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Reveal System — only applies when JS is enabled ───────────────────── */ .ttc-js [data-reveal], .ttc-js [data-reveal-lines], .ttc-js [data-reveal-late] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ttc-ease), transform 600ms var(--ttc-ease); } .ttc-js [data-reveal].is-revealed, .ttc-js [data-reveal-lines].is-revealed, .ttc-js [data-reveal-late].is-revealed { opacity: 1; transform: translateY(0); } .ttc-js .line, .ttc-js .ttc-city-line { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ttc-ease), transform 600ms var(--ttc-ease); will-change: transform, opacity; } .ttc-js .line.is-revealed, .ttc-js .ttc-city-line.is-revealed { opacity: 1; transform: translateY(0); } .ttc-city-line + .ttc-city-line::before, .line + .line::before { content: '\00a0'; } /* ── Scaffold ───────────────────────────────────────────────────────────── */ .ttc-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .ttc-wrap--read { max-width: 720px; } .ttc-section { background: var(--ttc-bg); padding: var(--ttc-space-2xl) 0; } .ttc-quiet { border-top: 1px solid var(--ttc-ink-8); } /* ── Typography ─────────────────────────────────────────────────────────── */ .ttc-eyebrow { margin: 0 0 12px; font-family: var(--ttc-font-mono); font-size: var(--ttc-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ttc-ink-40); display: flex; align-items: center; gap: 6px; } .ttc-eyebrow svg { flex-shrink: 0; } .ttc-h2, .ttc-hero__h1, .ttc-cta__title { font-family: var(--ttc-font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ttc-ink-92); } .ttc-h2 { font-size: var(--ttc-h2); line-height: 1.25; margin: 0 0 16px; } .ttc-h3 { font-size: var(--ttc-h3); line-height: 1.3; margin: 0 0 8px; font-family: var(--ttc-font-display); font-weight: 600; color: var(--ttc-ink-92); display: flex; align-items: center; gap: 8px; } .ttc-section p, .ttc-split p, .ttc-faq p, .ttc-cta__sub { font-size: var(--ttc-body); line-height: 1.6; color: var(--ttc-ink-65); } /* ── Breadcrumb ─────────────────────────────────────────────────────────── */ .ttc-city-breadcrumb { margin-bottom: 20px; } .ttc-city-breadcrumb__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; font-family: var(--ttc-font-mono); font-size: 13px; color: var(--ttc-ink-40); } .ttc-city-breadcrumb__link { color: var(--ttc-ink-65); text-decoration: none; transition: color 150ms ease; } .ttc-city-breadcrumb__link:hover { color: var(--ttc-ink-92); } .ttc-city-breadcrumb__sep { display: inline-flex; opacity: 0.4; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .ttc-hero { background: var(--ttc-bg); padding: 0; overflow: hidden; } .ttc-hero__media { position: relative; width: 100%; aspect-ratio: 4 / 5; margin: 0; border-radius: 0 0 20px 20px; overflow: hidden; } .ttc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ttc-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 70%, var(--ttc-bg) 100%); pointer-events: none; } .ttc-hero__body { padding: 24px 20px 32px; } .ttc-hero__h1 { font-size: var(--ttc-h1); line-height: 1.15; margin: 0 0 16px; } .ttc-hero__h2 { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); font-weight: 600; line-height: 1.4; color: var(--ttc-ink-65); margin: 0 0 16px; } .ttc-hero__lead { font-size: var(--ttc-body); line-height: 1.6; color: var(--ttc-ink-65); margin: 0 0 24px; } /* Hero CTA */ .ttc-hero__cta { display: flex; flex-direction: column; gap: 12px; width: 100%; } .ttc-hero__cta .ttc-btn { width: 100%; justify-content: center; } .ttc-hero__cta--center { align-items: center; } /* ── Trust Badges ───────────────────────────────────────────────────────── */ .ttc-city-trust { display: flex; gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ttc-ink-8); } .ttc-city-trust__badge { display: flex; align-items: center; gap: 8px; font-family: var(--ttc-font-mono); font-size: 13px; color: var(--ttc-ink-65); } .ttc-city-trust__badge svg { color: var(--ttc-ink-40); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .ttc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--ttc-radius-btn); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 150ms ease-out, background 150ms ease; } .ttc-btn--primary, .ttc-btn--ghost { background: rgba(13, 23, 30, 0.10); border: 1px solid rgba(13, 23, 30, 0.12); color: var(--ttc-ink-92); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .ttc-btn--primary, .ttc-btn--ghost { background: rgba(13, 23, 30, 0.06); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .ttc-btn--primary { background: rgba(13, 23, 30, 0.10); } } .ttc-btn--small { height: 36px; padding: 0 16px; font-size: 13px; } .ttc-btn--on-dark { background: rgba(13, 23, 30, 0.06); border-color: rgba(13, 23, 30, 0.12); color: var(--ttc-ink-92); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .ttc-btn--on-dark { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } } .ttc-btn.is-pressed { transform: scale(0.96); } .ttc-btn:focus-visible { outline: 2px solid var(--ttc-ink); outline-offset: 2px; } /* ── Cities Grid (Motion Tiles) ─────────────────────────────────────────── */ .ttc-tiles__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .ttc-tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--ttc-radius-card-sm); overflow: hidden; background: var(--ttc-ink-4); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 150ms ease-out, box-shadow 200ms ease-out; } .ttc-tile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(60%); } .ttc-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 23, 30, 0.4) 0%, transparent 40%); } .ttc-tile__label { position: absolute; left: 12px; bottom: 12px; z-index: 1; font-family: var(--ttc-font-mono); font-size: var(--ttc-mono); color: var(--ttc-on-dark-92); } .ttc-tile.is-active { border: 2px solid var(--ttc-ink-solid); } .ttc-tile.is-pressed { transform: scale(0.97); transition: transform 120ms ease-out; } .ttc-tile:focus-visible { outline: 2px solid var(--ttc-ink); outline-offset: 2px; } /* ── Services Carousel ──────────────────────────────────────────────────── */ .ttc-services__intro { margin-bottom: 24px; } .ttc-carousel { display: flex; gap: 16px; overflow-x: auto; padding: 0 24px 24px; scroll-snap-type: x proximity; cursor: grab; scroll-padding: 0 24px; } .ttc-carousel:active { cursor: grabbing; } .ttc-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; } .ttc-city-service-card { flex: 0 0 auto; width: 160px; height: 200px; border-radius: var(--ttc-radius-card-sm); background: var(--ttc-ink-4); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 16px; color: var(--ttc-ink-92); text-decoration: none; scroll-snap-align: start; transition: transform 120ms ease-out, box-shadow 200ms ease-out; box-sizing: border-box; position: relative; } .ttc-city-service-card:hover { box-shadow: var(--ttc-shadow-card-hover); } .ttc-city-service-card__icon { display: inline-flex; margin-bottom: 12px; color: var(--ttc-ink-92); } .ttc-city-service-card__name { font-size: 15px; font-weight: 600; line-height: 1.3; } .ttc-city-service-card__price { font-family: var(--ttc-font-mono); font-size: 13px; color: var(--ttc-ink-65); } .ttc-city-service-card__arrow { position: absolute; bottom: 16px; right: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 200ms ease; color: var(--ttc-ink-40); } .ttc-city-service-card:hover .ttc-city-service-card__arrow { opacity: 1; transform: translateX(0); } .ttc-city-service-card.is-pressed { transform: scale(0.96); } .ttc-city-service-card:focus-visible { outline: 2px solid var(--ttc-ink); outline-offset: 2px; } .ttc-services__footer { margin-top: 24px; } /* ── Chips ──────────────────────────────────────────────────────────────── */ .ttc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 20px; } .ttc-chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--ttc-ink-8); border-radius: 999px; background: var(--ttc-ink-4); font-family: var(--ttc-font-mono); font-size: 13px; color: var(--ttc-ink-65); text-decoration: none; transition: all 150ms ease; } .ttc-chip:hover { border-color: var(--ttc-ink-40); background: var(--ttc-ink-8); color: var(--ttc-ink-92); } /* ── Individuals / Businesses Split ─────────────────────────────────────── */ .ttc-split__grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .ttc-split__col { background: var(--ttc-ink-4); border-radius: var(--ttc-radius-card); padding: 24px; } /* ── Notice (Professional Tax) ──────────────────────────────────────────── */ .ttc-notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; padding: 16px; background: var(--ttc-ink-4); border-radius: var(--ttc-radius-card-sm); border: 1px solid var(--ttc-ink-8); } .ttc-notice svg { flex-shrink: 0; margin-top: 2px; color: var(--ttc-ink-40); } .ttc-notice p { margin: 0; font-size: 14px; color: var(--ttc-ink-65); } /* ── Testimonials ───────────────────────────────────────────────────────── */ .ttc-testimonials__grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; } .ttc-city-testimonial { background: var(--ttc-ink-4); border-radius: var(--ttc-radius-card); padding: 24px; margin: 0; display: flex; flex-direction: column; gap: 16px; } .ttc-city-testimonial__stars { display: flex; gap: 2px; color: var(--ttc-star); } .ttc-city-testimonial__quote { margin: 0; font-size: var(--ttc-body); line-height: 1.6; color: var(--ttc-ink-92); display: flex; gap: 8px; } .ttc-city-testimonial__mark { flex-shrink: 0; color: var(--ttc-ink-40); margin-top: 2px; } .ttc-city-testimonial__author { display: flex; flex-direction: column; gap: 2px; } .ttc-city-testimonial__name { font-weight: 600; font-size: 15px; color: var(--ttc-ink-92); } .ttc-city-testimonial__meta { font-family: var(--ttc-font-mono); font-size: 13px; color: var(--ttc-ink-40); } /* ── How Booking Works ──────────────────────────────────────────────────── */ .ttc-steps { display: grid; grid-template-columns: 1fr; gap: 40px; margin: 32px 0 40px; position: relative; } /* Mobile: vertical hairline */ .ttc-step { position: relative; padding-left: 44px; } .ttc-step::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 1px; background: var(--ttc-ink-8); } .ttc-step__num { position: absolute; left: 0; top: 2px; font-family: var(--ttc-font-mono); font-size: 32px; color: var(--ttc-ink-40); } .ttc-step__icon { display: inline-flex; font-size: 32px; color: var(--ttc-ink-92); margin-bottom: 12px; } .ttc-step__icon svg { width: 32px; height: 32px; } /* Step reveal */ .ttc-js [data-step] { opacity: 0; } .ttc-js [data-step].is-revealed { opacity: 1; transform: none; } @media (max-width: 1023px) { .ttc-js [data-step] { transform: translateX(-16px); transition: opacity 450ms var(--ttc-ease), transform 450ms var(--ttc-ease); } } @media (min-width: 1024px) { .ttc-js [data-step] { transform: translateY(16px); transition: opacity 450ms var(--ttc-ease), transform 450ms var(--ttc-ease); } } @media (prefers-reduced-motion: reduce) { [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── FAQ Accordion ──────────────────────────────────────────────────────── */ .ttc-faq { margin-top: 24px; } .ttc-faq__row { border-top: 1px solid var(--ttc-ink-8); border-bottom: 1px solid var(--ttc-ink-8); } .ttc-faq__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 16px 0; font-weight: 600; font-size: var(--ttc-body); color: var(--ttc-ink-92); background: none; border: none; cursor: pointer; text-align: left; } .ttc-faq__question { flex: 1; padding-right: 16px; } .ttc-faq__icon { display: inline-flex; flex-shrink: 0; color: var(--ttc-ink-40); transition: transform 200ms ease-out; } .ttc-faq__icon svg { width: 20px; height: 20px; } .ttc-faq__btn[aria-expanded="true"] .ttc-faq__icon { transform: rotate(45deg); } .ttc-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out; overflow: hidden; opacity: 0; max-width: 640px; } .ttc-faq__a > div { min-height: 0; overflow: hidden; } .ttc-faq__a p { margin: 0; } .ttc-faq__a .ttc-btn { margin-top: 12px; } .ttc-faq__a .ttc-btn svg { width: 16px; height: 16px; margin-left: 4px; } .ttc-faq__btn[aria-expanded="true"] + .ttc-faq__a { grid-template-rows: 1fr; opacity: 1; } .ttc-faq__btn:focus-visible { outline: 2px solid var(--ttc-ink); outline-offset: 2px; } /* ── Bottom CTA (cream panel, ink text) ─────────────────────────────────── */ .ttc-cta { background: var(--ttc-bg); padding: var(--ttc-space-3xl) 0 var(--ttc-space-4xl); border-top: 1px solid var(--ttc-ink-8); } .ttc-cta__title { color: var(--ttc-ink-92); font-size: var(--ttc-h2); line-height: 1.2; margin: 0 0 16px; } .ttc-cta__sub { color: var(--ttc-ink-65); margin: 0 0 24px; } .ttc-cta__row { display: flex; flex-direction: column; gap: 12px; } /* ── Tablet 640px+ ──────────────────────────────────────────────────────── */ @media (min-width: 640px) { .ttc-wrap { padding: 0 32px; } .ttc-hero__media { aspect-ratio: 16 / 10; border-radius: 0 0 20px 20px; } .ttc-hero__body { padding: 32px; } .ttc-hero__cta { flex-direction: row; max-width: 420px; } .ttc-hero__cta .ttc-btn { width: auto; } .ttc-tiles__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .ttc-split__grid { gap: 32px; } .ttc-section { padding: var(--ttc-space-3xl) 0; } .ttc-testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .ttc-cta__row { flex-direction: row; } } /* ── Desktop 1024px+ ────────────────────────────────────────────────────── */ @media (min-width: 1024px) { .ttc-wrap { padding: 0 64px; } /* Hero: 45% text / 55% image split */ .ttc-hero { display: grid; grid-template-columns: 45% 55%; gap: 64px; align-items: center; justify-items: center; min-height: 70vh; max-height: 900px; padding: 64px; background: var(--ttc-bg); } .ttc-hero__media { order: 2; width: 100%; height: 100%; aspect-ratio: 21 / 9; border-radius: var(--ttc-radius-card); margin: 0; grid-column: 2; } .ttc-hero__media::after { background: linear-gradient(to bottom, transparent 75%, var(--ttc-bg) 100%); } .ttc-hero__body { display: flex; flex-direction: column; justify-content: center; max-width: 580px; padding: 0; } .ttc-hero__h1 { max-width: 640px; line-height: 1.05; } .ttc-hero__cta { max-width: none; flex-direction: row; width: auto; } .ttc-hero__cta .ttc-btn { width: auto; height: 52px; padding: 0 28px; font-size: 16px; } .ttc-tiles__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } .ttc-tile { border-radius: var(--ttc-radius-card); } /* Carousel: desktop card size + edge peek */ .ttc-carousel { padding: 0 40px 24px; scroll-padding: 0 40px; } .ttc-city-service-card { width: 200px; height: 240px; } .ttc-split__grid { grid-template-columns: 1fr 1fr; gap: 32px; } .ttc-split__col { padding: 40px; } /* Steps: horizontal */ .ttc-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } .ttc-step { padding-left: 0; } .ttc-step::before { display: none; } .ttc-steps::before { content: ''; position: absolute; left: 0; right: 0; top: 60px; height: 1px; background: var(--ttc-ink-8); z-index: -1; } .ttc-step__num { position: static; display: block; margin-bottom: 12px; } /* FAQ: desktop sizing */ .ttc-faq__btn { min-height: 64px; padding: 24px 0; } /* Testimonials: 3-col */ .ttc-testimonials__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .ttc-section { padding: var(--ttc-space-3xl) 0; } } /* ── Desktop-lg 1440px+ ─────────────────────────────────────────────────── */ @media (min-width: 1440px) { .ttc-wrap { padding: 0 80px; } .ttc-section { padding: var(--ttc-space-4xl) 0; } .ttc-hero { padding-left: calc((100vw - 1280px) / 2 + 64px); padding-right: calc((100vw - 1280px) / 2 + 64px); } }