@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-v4-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'DM Serif Display'; src: url('/fonts/dm-serif-display-v17-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --bg: #0d0f0e; --surface: #131614; --panel: #1a1d1b; --border: rgba(255,255,255,.08); --ink: #f2f4f0; --muted: rgba(242,244,240,.58); --soft: rgba(242,244,240,.38); --gold: #c9a96e; --gold-dim: rgba(201,169,110,.16); --serif: 'DM Serif Display', Georgia, serif; --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; } /* ═══════════════════════════════════════════════ LIGHT THEME Toggle via .theme-light on ═══════════════════════════════════════════════ */ .theme-light { --bg: #f7f6f2; --surface: #ffffff; --panel: #f0ede8; --border: rgba(0,0,0,.10); --ink: #1a1a1a; --muted: rgba(26,26,26,.60); --soft: rgba(26,26,26,.40); --gold: #b08d4e; --gold-dim: rgba(176,141,78,.14); } .theme-light body { background: var(--bg); color: var(--ink); } .theme-light .nav { background: rgba(247,246,242,.88); border-bottom-color: var(--border); } .theme-light .hero { background: #edeae4; } .theme-light .hero-visual { background: #edeae4; } .theme-light .hero-visual::after { background: linear-gradient(90deg, rgba(247,246,242,.96) 0%, rgba(247,246,242,.84) 40%, rgba(247,246,242,.24) 100%); } .theme-light .hero-noise { opacity: .08; mix-blend-mode: multiply; background-image: linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.015) 1px, transparent 1px); } .theme-light .hero::after { border-color: rgba(0,0,0,.06); } .theme-light .hero h1 { color: #1a1a1a; } .theme-light .hero-tags span { background: rgba(0,0,0,.03); border-color: var(--border); color: var(--muted); } .theme-light .proof-strip, .theme-light .trust-strip { background: var(--surface); border-color: var(--border); } .theme-light .proof { border-color: var(--border); } .theme-light .proof:hover { background: rgba(0,0,0,.02); } .theme-light .services, .theme-light .why-us, .theme-light .reviews { background: var(--surface); border-color: var(--border); } .theme-light .service-card { background: var(--panel); } .theme-light .service-card:hover { background: #e8e4dc; } .theme-light .service-list li::before { color: var(--gold); } .theme-light .studio-note { background: rgba(176,141,78,.06); border-color: rgba(176,141,78,.25); } .theme-light .studio-note h3 { color: var(--gold); } .theme-light .pain-card { background: var(--panel); } .theme-light .step { background: var(--surface); } .theme-light .workflow { border-color: var(--border); } .theme-light .review-card { background: var(--panel); border-color: var(--border); } .theme-light .review-arrow { background: rgba(0,0,0,.03); border-color: var(--border); } .theme-light .review-arrow:hover { background: var(--gold); border-color: var(--gold); color: #fff; } .theme-light .reviews-grid::-webkit-scrollbar-track { background: rgba(0,0,0,.05); } .theme-light .reviews-grid::-webkit-scrollbar-thumb { background: rgba(176,141,78,.45); } .theme-light .pricing { background: var(--bg); border-color: var(--border); } .theme-light .pricing::before { background: radial-gradient(circle, rgba(176,141,78,.06) 0%, transparent 65%); } .theme-light .plan-card { background: var(--panel); } .theme-light .plan-card:hover { background: #e8e4dc; } .theme-light .plan-card.featured { background: radial-gradient(ellipse at 50% -10%, rgba(176,141,78,.12), transparent 55%), #f0ede8; } .theme-light .toggle-track { background: rgba(0,0,0,.06); border-color: var(--border); } .theme-light .toggle-track.active { background: var(--gold); border-color: var(--gold); } .theme-light .oneoff-item { background: var(--surface); } .theme-light .guarantee { background: rgba(176,141,78,.04); border-color: rgba(176,141,78,.18); } .theme-light .faq-item { background: var(--surface); } .theme-light .faq-item:hover, .theme-light .faq-item.active { background: #ebe8e2; } .theme-light .faq-answer p { color: var(--muted); } .theme-light .cta-section::before { background: radial-gradient(ellipse at 70% 50%, rgba(176,141,78,.10), transparent 55%), var(--surface); } .theme-light .pricing-preview { background: var(--bg); border-color: var(--border); } .theme-light .pricing-preview-card { background: rgba(176,141,78,.04); border-color: rgba(176,141,78,.18); } .theme-light .contact-form-section { background: var(--bg); } .theme-light .contact-form-section::before { background: radial-gradient(circle, rgba(176,141,78,.06), transparent 62%); } .theme-light .project-form, .theme-light .payment-card { background: var(--panel); border-color: var(--border); } .theme-light .project-form input, .theme-light .project-form select, .theme-light .project-form textarea { background: rgba(0,0,0,.025); border-color: var(--border); color: var(--ink); } .theme-light .project-form input::placeholder, .theme-light .project-form textarea::placeholder { color: var(--soft); } .theme-light .project-form input:focus, .theme-light .project-form select:focus, .theme-light .project-form textarea:focus { background: rgba(0,0,0,.04); border-color: rgba(176,141,78,.55); box-shadow: 0 0 0 3px rgba(176,141,78,.08); } .theme-light .project-form select option { background: #f0ede8; color: var(--ink); } .theme-light .payment-steps div { background: var(--surface); } .theme-light .payment-policy { background: rgba(176,141,78,.035); border-color: rgba(176,141,78,.18); } .theme-light .form-status { background: rgba(0,0,0,.025); border-color: var(--border); } .theme-light .form-status.success { background: rgba(176,141,78,.08); border-color: rgba(176,141,78,.35); } .theme-light .form-status.error { background: rgba(255,120,120,.06); border-color: rgba(255,120,120,.35); } .theme-light footer { background: var(--surface); border-color: var(--border); } .theme-light .back-to-top { background: rgba(247,246,242,.90); border-color: var(--gold); color: var(--gold); } .theme-light .back-to-top:hover { background: var(--gold); color: #fff; } .theme-light .mobile-menu { background: rgba(247,246,242,.96); border-color: var(--border); } .theme-light .mobile-menu a { border-color: var(--border); color: var(--muted); } .theme-light .mobile-menu a:hover { color: var(--ink); } .theme-light .samples-showcase { background: radial-gradient(ellipse at 72% 12%, rgba(176,141,78,.08), transparent 48%), var(--bg); } .theme-light .samples-showcase::before { background-image: linear-gradient(rgba(0,0,0,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.01) 1px, transparent 1px); } .theme-light .sample-card { background: var(--surface); border-color: var(--border); } .theme-light .sample-card:hover { border-color: rgba(176,141,78,.30); box-shadow: 0 18px 48px rgba(0,0,0,.12); } .theme-light .sample-thumb::after { background: linear-gradient(0deg, rgba(247,246,242,.62), transparent 62%); } .theme-light .sample-duration { background: rgba(247,246,242,.82); border-color: var(--border); color: var(--muted); } .theme-light .video-modal-backdrop { background: rgba(240,237,232,.88); } .theme-light .video-modal-panel { background: #f7f6f2; border-color: rgba(176,141,78,.18); } .theme-light .video-modal-copy { background: linear-gradient(180deg, rgba(176,141,78,.035), transparent), var(--surface); } .theme-light .video-loading { background: radial-gradient(ellipse at center, rgba(176,141,78,.08), rgba(247,246,242,.78) 58%); } .theme-light .admin-page { background: radial-gradient(ellipse at 75% 12%, rgba(176,141,78,.10), transparent 42%), var(--bg); } .theme-light .admin-card { background: var(--panel); border-color: var(--border); } .theme-light .admin-form input, .theme-light .admin-form textarea, .theme-light .admin-form select { background: rgba(0,0,0,.025); border-color: var(--border); } .theme-light .admin-sample-row { background: var(--surface); border-color: var(--border); } /* Theme toggle button */ .theme-toggle { width: 40px; height: 40px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--gold); display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1; transition: .22s ease; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--gold); background: rgba(201,169,110,.10); } .theme-icon { display: none; } .theme-icon-dark { display: block; } .theme-light .theme-icon-dark { display: none; } .theme-light .theme-icon-light { display: block; } @media (max-width: 1100px) { .theme-toggle { margin-left: auto; margin-right: 8px; } } @media (max-width: 700px) { .theme-toggle { width: 36px; height: 36px; font-size: 16px; } } /* Respect prefers-reduced-motion for theme transitions */ @media (prefers-reduced-motion: reduce) { .theme-light body, .theme-light .nav, .theme-light .hero, .theme-light .service-card, .theme-light .pain-card, .theme-light .step, .theme-light .review-card, .theme-light .faq-item, .theme-light .plan-card { transition: none !important; } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.65; letter-spacing: -.01em; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--gold-dim); color: var(--ink); } a { color: inherit; text-decoration: none; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid var(--border); background: rgba(13,15,14,.82); backdrop-filter: blur(20px); transition: transform .4s cubic-bezier(.4,0,.2,1); } .brand { display: flex; align-items: center; } .brand-logo { display: block; height: 38px; width: auto; object-fit: contain; } .footer-logo { height: 28px; } .nav-links { display: flex; gap: 30px; list-style: none; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); } .nav-links a { position: relative; transition: color .22s ease; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--gold); } .nav-links a.active::after { content: ''; position: absolute; bottom: -6px; left: 0; right: 0; height: 1px; background: var(--gold); opacity: .6; } .btn { border: 1px solid var(--border); padding: 16px 28px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; display: inline-flex; align-items: center; gap: 8px; transition: .22s ease; background: transparent; font-family: var(--sans); cursor: pointer; } .btn:hover { border-color: var(--gold); color: var(--gold); } .btn.gold { border-color: var(--gold); color: var(--gold); } .btn.gold:hover, .btn.filled { background: var(--gold); border-color: var(--gold); color: #0d0f0e; } .btn.filled:hover { background: transparent; color: var(--gold); } .hero .btn { min-height: 44px; } .hero { position: relative; min-height: calc(100vh - 72px); display: flex; align-items: center; overflow: hidden; isolation: isolate; background: #090a09; margin-top: 72px; } .hero-visual { position: absolute; inset: 0; z-index: -4; overflow: hidden; background: #090a09; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center right; filter: saturate(.62) contrast(1.05) brightness(.72); transform: scale(1.02); display: block; will-change: transform; } .hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,15,14,.96) 0%, rgba(13,15,14,.84) 40%, rgba(13,15,14,.24) 100%); pointer-events: none; } .hero-noise { position: absolute; inset: 0; z-index: -2; opacity: .18; mix-blend-mode: screen; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; } .hero::after { content: ''; position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.06); pointer-events: none; z-index: 2; } .hero-content { position: relative; z-index: 3; padding: 40px 80px; max-width: 920px; } .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; } .kicker::before { content: ''; width: 28px; height: 1px; background: var(--gold); } .hero h1 { font-family: var(--serif); font-size: clamp(50px, 7vw, 104px); line-height: .92; letter-spacing: -.055em; font-weight: 400; margin-bottom: 28px; color: #fff; max-width: 850px; } .hero h1 em { font-style: italic; color: var(--gold); } .hero-sub { font-size: 18px; color: var(--muted); max-width: 620px; margin-bottom: 40px; line-height: 1.7; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 46px; } .hero-tags { display: flex; gap: 10px; flex-wrap: wrap; } .hero-tags span { border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); padding: 9px 14px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.7px; backdrop-filter: blur(8px); } .hero-content > * { opacity: 0; transform: translateY(20px); animation: up .85s ease forwards; } .hero-content > *:nth-child(1) { animation-delay: .16s; } .hero-content > *:nth-child(2) { animation-delay: .34s; } .hero-content > *:nth-child(3) { animation-delay: .52s; } .hero-content > *:nth-child(4) { animation-delay: .7s; } .hero-content > *:nth-child(5) { animation-delay: .88s; } @keyframes up { to { opacity: 1; transform: none; } } .proof-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); width: 100%; } .proof { padding: 28px 36px; border-right: 1px solid var(--border); transition: background .22s ease; min-width: 0; } .proof:last-child { border-right: 0; } .proof:hover { background: rgba(255,255,255,.02); } .proof strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; color: var(--gold); line-height: 1; margin-bottom: 8px; } .proof span { color: var(--muted); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; font-weight: 600; } section { padding: 88px 80px; } .section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; } h2 { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 66px); line-height: .98; letter-spacing: -.045em; font-weight: 400; } h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; } .section-lead { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 540px; } .services, .why-us, .reviews { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .service-card { position: relative; background: var(--panel); padding: 36px 30px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; border: 0; overflow: hidden; transition: background .2s ease, transform .22s ease; } .service-card:hover { background: #1f2320; transform: translateY(-2px); } .service-num { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 20px; display: block; } .service-card h3 { font-size: 28px; line-height: 1.08; margin-bottom: 14px; } .service-card p { color: var(--muted); font-size: 14px; line-height: 1.7; } .service-list { margin-top: 28px; list-style: none; display: grid; gap: 8px; } .service-list li { font-size: 13px; color: var(--soft); padding-left: 16px; position: relative; } .service-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .studio-note { margin-top: 22px; padding: 24px 28px; border: 1px solid rgba(201,169,110,.2); background: rgba(201,169,110,.04); display: grid; grid-template-columns: 1.1fr 2fr; gap: 28px; align-items: center; } .studio-note h3 { font-size: 28px; color: var(--gold); } .studio-note p { color: var(--muted); font-size: 15px; line-height: 1.75; } .work { border-bottom: 1px solid var(--border); } .film-list { display: grid; gap: 2px; } .film-card { display: grid; grid-template-columns: 390px 1fr; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color .4s cubic-bezier(.22,.8,.25,1), transform .4s cubic-bezier(.22,.8,.25,1), box-shadow .4s cubic-bezier(.22,.8,.25,1); } .film-card:hover { border-color: rgba(201,169,110,.3); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.35); } .film-thumb { position: relative; min-height: 260px; background-size: cover; background-position: center; filter: saturate(.75); overflow: hidden; } .film-thumb::before { content: ''; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; transform: scale(1); transition: transform .6s cubic-bezier(.22,.8,.25,1), filter .6s cubic-bezier(.22,.8,.25,1); z-index: 0; } .film-card:hover .film-thumb::before { transform: scale(1.06); filter: saturate(1) brightness(.92); } .film-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--surface)); z-index: 1; } .duration-badge { position: absolute; bottom: 14px; right: 14px; z-index: 3; background: rgba(13,15,14,.8); border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: 1px; backdrop-filter: blur(8px); } .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; padding-left: 3px; backdrop-filter: blur(6px); background: rgba(255,255,255,.1); transition: background .4s cubic-bezier(.22,.8,.25,1), border-color .4s cubic-bezier(.22,.8,.25,1), color .4s cubic-bezier(.22,.8,.25,1), transform .4s cubic-bezier(.22,.8,.25,1); } .film-card:hover .play-btn { background: var(--gold); border-color: var(--gold); color: #0d0f0e; transform: translate(-50%,-50%) scale(1.12); } .film-copy { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; } .film-meta { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 12px; } .film-copy h3 { font-size: clamp(28px, 3vw, 44px); line-height: 1.04; margin-bottom: 14px; } .film-copy p { color: var(--muted); font-size: 15px; max-width: 560px; } .film-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .film-chips span { border: 1px solid var(--border); color: var(--soft); padding: 6px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; } .film-link { margin-top: 22px; color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .pain-grid, .workflow-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); } .pain-grid { grid-template-columns: repeat(4, 1fr); } .pain-card { background: var(--panel); padding: 32px; min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; } .pain-card b { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; display: block; margin-bottom: 18px; } .pain-card h3 { font-size: 26px; line-height: 1.1; margin-bottom: 14px; } .pain-card p { color: var(--muted); font-size: 14px; line-height: 1.7; } .workflow { border-bottom: 1px solid var(--border); } .workflow-grid { grid-template-columns: repeat(5, 1fr); } .step { background: var(--surface); padding: 32px 26px; min-height: 240px; display: flex; flex-direction: column; } .step-num { font-family: var(--serif); font-size: 48px; color: var(--gold-dim); line-height: 1; margin-bottom: auto; padding-bottom: 24px; } .step h3 { font-size: 24px; margin-bottom: 10px; } .step p { color: var(--muted); font-size: 13px; line-height: 1.65; } .reviews-carousel { position: relative; margin-top: 22px; } .review-arrows { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; } .review-arrow { width: 44px; height: 44px; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--gold); display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1; transition: .22s ease; } .review-arrow:hover { background: var(--gold); border-color: var(--gold); color: #0d0f0e; } .reviews-grid { display: flex; gap: 14px; touch-action: pan-y; overflow-x: auto; overflow-y: hidden; padding-bottom: 18px; background: transparent; border: 0; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 3%, black 97%, transparent); } .reviews-grid:active, .reviews-grid.dragging { cursor: grabbing; } .reviews-grid.dragging { scroll-behavior: auto; } .reviews-grid.dragging * { user-select: none; pointer-events: none; } .reviews-grid::-webkit-scrollbar { height: 8px; } .reviews-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.05); } .reviews-grid::-webkit-scrollbar-thumb { background: rgba(201,169,110,.45); } .review-card { background: var(--panel); user-select: none; padding: 34px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 min(430px, 82vw); scroll-snap-align: start; border: 1px solid var(--border); } .quote { font-family: var(--serif); font-size: 25px; line-height: 1.22; letter-spacing: -.02em; font-style: italic; color: var(--ink); } .review-stars { color: var(--gold); font-size: 14px; margin-bottom: 20px; } .review-author { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-top: 24px; } .pricing { padding: 88px 80px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); position: relative; overflow: hidden; } .pricing::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(201,169,110,.06) 0%, transparent 65%); pointer-events: none; } .pricing-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 52px; } .billing-toggle { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--muted); } .toggle-track { width: 48px; height: 26px; border: 1px solid var(--border); background: rgba(255,255,255,.06); border-radius: 999px; position: relative; cursor: pointer; transition: .22s ease; } .toggle-track.active { background: var(--gold); border-color: var(--gold); } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .22s ease; } .toggle-track.active .toggle-thumb { left: calc(100% - 21px); } .save-badge { background: var(--gold-dim); border: 1px solid rgba(201,169,110,.3); color: var(--gold); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 4px 10px; } .plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 18px; } .plan-card { background: var(--panel); padding: 40px 36px; display: flex; flex-direction: column; position: relative; transition: background .2s ease; } .plan-card:hover { background: #1e2220; } .plan-card.featured { background: radial-gradient(ellipse at 50% -10%, rgba(201,169,110,.14), transparent 55%), #1a1d1b; border-top: 2px solid var(--gold); margin-top: -1px; } .plan-badge { position: absolute; top: -1px; right: 28px; background: var(--gold); color: #0d0f0e; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; padding: 5px 12px; } .plan-name { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 14px; } .plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; } .plan-price strong { font-family: var(--serif); font-size: 62px; font-weight: 400; line-height: 1; color: var(--ink); letter-spacing: -.04em; } .plan-price span { color: var(--muted); font-size: 14px; } .plan-price .currency { font-size: 22px; color: var(--muted); align-self: flex-start; margin-top: 10px; } .annual-price { display: none; } body.annual .monthly-price { display: none; } body.annual .annual-price { display: flex; } .plan-period { color: var(--soft); font-size: 12px; margin-bottom: 6px; } .plan-volume { color: var(--gold); font-size: 13px; font-weight: 600; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); } .plan-features { list-style: none; display: grid; gap: 12px; flex: 1; margin-bottom: 36px; } .plan-features li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: rgba(242,244,240,.72); line-height: 1.5; } .check { color: var(--gold); font-size: 13px; flex-shrink: 0; margin-top: 1px; } .dim { color: var(--soft) !important; } .dim .check { color: var(--soft); } .plan-cta { border: 1px solid var(--border); padding: 14px 22px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: .22s ease; background: transparent; color: var(--ink); cursor: pointer; font-family: var(--sans); width: 100%; } .plan-cta:hover { border-color: var(--gold); color: var(--gold); } .featured .plan-cta { background: var(--gold); border-color: var(--gold); color: #0d0f0e; } .featured .plan-cta:hover { background: transparent; color: var(--gold); } .oneoff-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 22px; } .oneoff-item { background: var(--surface); padding: 22px 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .oneoff-item h4 { font-family: var(--serif); font-size: 20px; font-weight: 400; margin-bottom: 4px; } .oneoff-item p { font-size: 13px; color: var(--muted); } .oneoff-price { font-family: var(--serif); font-size: 28px; color: var(--gold); white-space: nowrap; flex-shrink: 0; } .guarantee { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 26px 32px; border: 1px solid rgba(201,169,110,.2); background: rgba(201,169,110,.04); } .guarantee-icon { font-size: 32px; line-height: 1; } .guarantee h4 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; } .guarantee p { font-size: 14px; color: var(--muted); } .guarantee-link { color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; white-space: nowrap; border-bottom: 1px solid rgba(201,169,110,.3); padding-bottom: 2px; } .faq { border-bottom: 1px solid var(--border); } .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .faq-item { background: var(--surface); padding: 0; cursor: pointer; transition: background .22s ease; } .faq-item:hover, .faq-item.active { background: #181b19; } .faq-item.active { border-left: 2px solid var(--gold); } .faq-question { padding: 32px; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .faq-question h3 { font-size: 24px; line-height: 1.15; transition: color .22s ease; } .faq-item.active .faq-question h3 { color: var(--gold); } .faq-icon { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; color: var(--gold); font-size: 20px; transition: transform .3s ease; } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .4s ease; padding: 0 32px; } .faq-item.active .faq-answer { max-height: 300px; padding: 0 32px 32px; } .faq-answer p { color: var(--muted); font-size: 14px; line-height: 1.72; opacity: 0; transform: translateY(-10px); transition: opacity .3s ease .1s, transform .3s ease .1s; } .faq-item.active .faq-answer p { opacity: 1; transform: translateY(0); } .cta-section { position: relative; overflow: hidden; padding: 110px 80px; border-bottom: 1px solid var(--border); } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(201,169,110,.12), transparent 55%), var(--surface); z-index: 0; } .cta-box { position: relative; z-index: 1; max-width: 800px; } .cta-section h2 { margin-bottom: 20px; } .cta-section p { color: var(--muted); font-size: 17px; margin-bottom: 36px; max-width: 620px; line-height: 1.75; } .cta-actions { display: flex; gap: 14px; flex-wrap: wrap; } .contact-note { margin-top: 18px; color: var(--soft); font-size: 13px; } .contact-note a { color: var(--gold); } footer { display: flex; justify-content: space-between; align-items: center; padding: 28px 80px; background: var(--surface); color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); gap: 20px; } .footer-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--muted); } @media (max-width: 1100px) { .nav { padding: 0 28px; } .nav-links { display: none; } .hero-content { padding: 80px 40px; } section, .cta-section, .pricing { padding: 70px 40px; } footer { padding: 24px 40px; } .services-grid, .pain-grid { grid-template-columns: repeat(2, 1fr); } .workflow-grid { grid-template-columns: repeat(3, 1fr); } .film-card { grid-template-columns: 1fr; } .film-thumb { min-height: 240px; } .film-thumb::before { display: none; } .film-thumb::after { background: linear-gradient(0deg, var(--surface) 0%, transparent 60%); } .section-head, .studio-note, .pricing-head { grid-template-columns: 1fr; gap: 18px; } .plans-grid, .oneoff-strip { grid-template-columns: 1fr; } .guarantee { grid-template-columns: auto 1fr; } .guarantee-link { grid-column: 2; } } @media (max-width: 700px) { .nav { padding: 0 20px; } .brand { font-size: 14px; } .brand-logo { height: 32px; } .footer-logo { height: 24px; } .nav .btn { display: none; } .hero-content { padding: 56px 24px 70px; max-width: 100%; } .hero-sub { font-size: 16px; max-width: 100%; } .hero::after { inset: 16px; } section, .cta-section, .pricing { padding: 54px 24px; } footer { padding: 22px 24px; flex-direction: column; align-items: flex-start; } .services-grid, .pain-grid, .workflow-grid, .faq-grid, .plans-grid, .oneoff-strip { grid-template-columns: 1fr; } .proof { padding: 24px 22px; } .proof strong { font-size: 28px; } .film-copy { padding: 32px 26px; } .plan-price strong { font-size: 52px; } .guarantee { grid-template-columns: 1fr; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .hero-content > * { animation: none; opacity: 1; transform: none; filter: none; } } /* ── PREMIUM MOTION UPDATES ── */ .reveal { opacity: 0; transform: translateY(24px); filter: blur(3px); transition: opacity .75s ease, transform .75s cubic-bezier(.22,.8,.25,1), filter .75s ease; transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .service-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,0); } .service-card::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,110,.45), transparent); opacity: 0; transform: scaleX(.72); transition: opacity .28s ease, transform .28s ease; pointer-events: none; } .service-card:hover { background: linear-gradient(180deg, rgba(201,169,110,.055), rgba(255,255,255,.018)), #1f2320; box-shadow: inset 0 0 0 1px rgba(201,169,110,.22), 0 18px 42px rgba(0,0,0,.22); } .service-card:hover::after { opacity: 1; transform: scaleX(1); } .service-card:hover .service-num { color: #dcc08d; } .workflow-grid .step { transition: background .24s ease, transform .45s cubic-bezier(.22,.8,.25,1), box-shadow .24s ease; } .workflow-grid .step:hover { background: #181b19; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(201,169,110,.16); } .workflow-grid .step:hover .step-num { color: rgba(201,169,110,.28); } .film-thumb { transition: filter .4s cubic-bezier(.22,.8,.25,1); } .film-card:hover .film-thumb { filter: saturate(.9); } .duration-badge { transition: border-color .4s cubic-bezier(.22,.8,.25,1), color .4s cubic-bezier(.22,.8,.25,1), background .4s cubic-bezier(.22,.8,.25,1); } .film-card:hover .duration-badge { border-color: rgba(201,169,110,.42); color: var(--gold); background: rgba(13,15,14,.9); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible, .service-card, .workflow-grid .step, .film-thumb { transition: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } } /* Pricing preview on homepage */ .pricing-preview { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg); } .pricing-preview-card { border: 1px solid rgba(201,169,110,.2); background: rgba(201,169,110,.04); padding: 34px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } .pricing-preview-card h3 { font-size: 30px; margin-bottom: 8px; } .pricing-preview-card p { color: var(--muted); font-size: 15px; max-width: 620px; } .pricing-preview-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* Separate pricing page */ .pricing-page-hero { position: relative; padding-top: 150px; border-bottom: 1px solid var(--border); background: #090a09; overflow: hidden; isolation: isolate; } .pricing-hero-visual { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .pricing-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.18; filter: saturate(0) contrast(1.1); transform: scale(1.02); } .pricing-page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 72% 22%, rgba(201,169,110,.10), transparent 55%), linear-gradient(to bottom, rgba(9,10,9,.45) 0%, rgba(9,10,9,.7) 100%); } .pricing-page-hero .section-head { position: relative; z-index: 1; } .pricing-page-hero h1 { font-family: var(--serif); font-size: clamp(48px, 6vw, 86px); line-height: .94; letter-spacing: -.055em; font-weight: 400; } .pricing-page-hero h1 em { color: var(--gold); font-style: italic; } .pricing-details { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pricing-includes-grid .service-card { min-height: 230px; } @media (max-width: 900px) { .pricing-preview-card { grid-template-columns: 1fr; } .pricing-preview-actions { justify-content: flex-start; } } @media (max-width: 700px) { .pricing-page-hero { padding-top: 120px; } .pricing-preview-card { padding: 26px 22px; } .pricing-preview-actions .btn { width: 100%; justify-content: center; } } @media (max-width: 700px) { .proof-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proof { min-width: 0; padding: 22px 16px; } .proof:nth-child(2) { border-right: 0; } .proof strong { font-size: clamp(24px, 7vw, 30px); line-height: 1.05; overflow-wrap: anywhere; } .proof span { font-size: 9px; letter-spacing: 1.4px; line-height: 1.35; display: block; } } /* Add-ons section */ .addons-section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--border); } .addons-head { margin-bottom: 0; } /* Contact form + Payoneer payment handoff */ .contact-form-section { position: relative; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } .contact-form-section::before { content: ''; position: absolute; inset: auto -10% -30% auto; width: 620px; height: 620px; background: radial-gradient(circle, rgba(201,169,110,.08), transparent 62%); pointer-events: none; } .contact-form-head { position: relative; z-index: 1; } .contact-payment-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(320px, .72fr) minmax(0, 1.28fr); gap: 22px; align-items: start; } .project-form, .payment-card { border: 1px solid var(--border); background: var(--panel); } .project-form { padding: 34px; display: grid; gap: 18px; } .form-row { display: grid; gap: 18px; } .form-row.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .project-form label { display: grid; gap: 8px; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .project-form input, .project-form select, .project-form textarea { width: 100%; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--ink); padding: 14px 15px; font-family: var(--sans); font-size: 14px; line-height: 1.45; outline: none; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; } .project-form textarea { resize: vertical; min-height: 150px; } .project-form input::placeholder, .project-form textarea::placeholder { color: var(--soft); } .project-form input:focus, .project-form select:focus, .project-form textarea:focus { border-color: rgba(201,169,110,.55); background: rgba(255,255,255,.055); box-shadow: 0 0 0 3px rgba(201,169,110,.08); } .project-form select option { background: #131614; color: var(--ink); } .form-honey { display: none !important; } .payment-confirm { display: flex !important; grid-template-columns: auto 1fr; align-items: flex-start; gap: 12px !important; color: var(--muted) !important; font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.55; } .payment-confirm input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); } .captcha-row { border: 1px solid rgba(201,169,110,.18); background: rgba(255,255,255,.025); padding: 16px; overflow-x: auto; } .captcha-row .h-captcha { min-height: 78px; } .form-submit-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .form-submit { justify-content: center; width: fit-content; } .invoice-submit { border-color: rgba(201,169,110,.85); background: rgba(201,169,110,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,169,110,.18); } .invoice-submit:hover { background: var(--gold); border-color: var(--gold); color: #0d0f0e; } .form-note { color: var(--soft); font-size: 13px; } .form-note a { color: var(--gold); } .payment-card { padding: 34px; position: sticky; top: 96px; } .payment-card h3 { font-size: 34px; line-height: 1.05; margin-bottom: 14px; } .payment-card > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; } /* Pricing page client proof card */ .pricing-testimonials { border: 1px solid var(--border); background: var(--panel); padding: 34px; position: sticky; top: 96px; } .pricing-testimonials h3 { font-size: 34px; line-height: 1.05; margin-bottom: 14px; } .pricing-testimonials > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 28px; } .pricing-testimonial-list { display: grid; gap: 24px; } .pricing-testimonial { border-top: 1px solid var(--border); padding-top: 22px; } .pricing-testimonial:first-child { border-top: 0; padding-top: 0; } .pricing-testimonial p { color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.32; font-style: italic; } .pricing-testimonial .review-author { margin-top: 14px; } .pricing-testimonial .review-stars { margin: 10px 0 0; letter-spacing: 2px; } .payment-steps { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 24px; } .payment-steps div { background: var(--surface); padding: 18px; } .payment-steps span { display: block; color: var(--gold); font-family: var(--serif); font-size: 28px; line-height: 1; margin-bottom: 8px; opacity: .8; } .payment-steps strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1.4px; } .payment-steps p { color: var(--muted); font-size: 13px; line-height: 1.6; } .payment-policy { border: 1px solid rgba(201,169,110,.22); background: rgba(201,169,110,.045); padding: 20px; margin-bottom: 18px; } .payment-policy h4 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 10px; } .payment-policy ul { list-style: none; display: grid; gap: 8px; } .payment-policy li { position: relative; padding-left: 17px; color: var(--muted); font-size: 13px; line-height: 1.55; } .payment-policy li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .payoneer-button { border: 1px solid var(--gold); background: var(--gold); color: #0d0f0e; padding: 14px 18px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; transition: .22s ease; } .payoneer-button:hover { background: transparent; color: var(--gold); } .payoneer-small { color: var(--soft) !important; font-size: 12px !important; line-height: 1.55 !important; margin: 12px 0 0 !important; } @media (max-width: 1000px) { .contact-payment-grid { grid-template-columns: 1fr; } .payment-card, .pricing-testimonials { position: relative; top: auto; } } @media (max-width: 700px) { .project-form, .payment-card, .pricing-testimonials { padding: 24px 20px; } .form-row.two-col { grid-template-columns: 1fr; } .form-submit-row { width: 100%; } .form-submit, .payoneer-button { width: 100%; } } /* Inline form submission feedback */ .form-status { display: none; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--muted); font-size: 14px; line-height: 1.55; } .form-status.loading, .form-status.success, .form-status.error { display: block; } .form-status.success { border-color: rgba(201,169,110,.42); background: rgba(201,169,110,.10); color: var(--ink); } .form-status.error { border-color: rgba(255,120,120,.45); background: rgba(255,120,120,.08); color: #ffd0d0; } .project-form button[disabled] { opacity: .6; cursor: not-allowed; } .project-form button.is-loading { pointer-events: none; } /* Heading font safety */ h1, h2, h3, .hero h1, .pricing-page-hero h1 { font-family: var(--serif); } /* Mobile hamburger navigation */ .mobile-menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--border); background: rgba(255,255,255,.035); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; padding: 0; margin-left: auto; } .mobile-menu-toggle span { display: block; width: 18px; height: 1px; background: var(--gold); transition: transform .22s ease, opacity .22s ease; } .mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; } .mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { display: none; } @media (max-width: 1100px) { .mobile-menu-toggle { display: flex; } .nav { gap: 14px; } .mobile-menu { position: fixed; top: 72px; left: 0; right: 0; z-index: 99; display: grid; gap: 0; padding: 14px 28px 22px; background: rgba(13,15,14,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(20px); transform: translateY(-16px); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-menu a { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .mobile-menu a:hover { color: var(--ink); } .mobile-menu .mobile-menu-cta { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--gold); color: var(--gold); text-align: center; } } @media (max-width: 700px) { .mobile-menu { padding-left: 20px; padding-right: 20px; } } /* Back to top button — sits above the Tawk.to chat bubble (bottom-right) */ .back-to-top { position: fixed; bottom: 92px; right: 20px; z-index: 95; width: 48px; height: 48px; border: 1px solid var(--gold); background: rgba(13,15,14,.90); color: var(--gold); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--sans); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .28s ease, transform .28s cubic-bezier(.22,.8,.25,1), background .22s ease, color .22s ease, border-color .22s ease; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { background: var(--gold); color: #0d0f0e; } @media (max-width: 700px) { .back-to-top { bottom: 88px; right: 16px; width: 44px; height: 44px; font-size: 18px; } } /* Fresh Samples Showcase */ .samples-showcase { position: relative; overflow: hidden; background: radial-gradient(ellipse at 72% 12%, rgba(201,169,110,.10), transparent 48%), var(--bg); } .samples-showcase::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 46px 46px; opacity: .22; } .samples-showcase > * { position: relative; z-index: 1; } .samples-head h2 em { color: var(--gold); font-style: italic; } .samples-feature { margin-bottom: 18px; } .sample-hero-card { position: relative; display: block; width: 100%; min-height: clamp(420px, 58vw, 680px); border: 1px solid rgba(201,169,110,.22); background: #080908; overflow: hidden; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--sans); } .sample-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.01); filter: saturate(.88) contrast(1.06) brightness(.78); transition: transform .8s cubic-bezier(.22,.8,.25,1), filter .8s cubic-bezier(.22,.8,.25,1); } .sample-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,10,9,.90) 0%, rgba(9,10,9,.48) 42%, rgba(9,10,9,.18) 100%), linear-gradient(0deg, rgba(9,10,9,.86) 0%, transparent 55%); } .sample-hero-card:hover .sample-hero-bg { transform: scale(1.055); filter: saturate(1.05) contrast(1.08) brightness(.86); } .sample-hero-content { position: absolute; left: clamp(26px, 5vw, 64px); bottom: clamp(26px, 5vw, 64px); max-width: 680px; display: grid; gap: 14px; } .sample-eyebrow, .samples-toolbar-label, .sample-meta { color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; } .sample-title { font-family: var(--serif); font-size: clamp(44px, 6vw, 86px); line-height: .92; letter-spacing: -.055em; color: #fff; } .sample-description { color: rgba(242,244,240,.72); font-size: clamp(15px, 2vw, 18px); line-height: 1.65; max-width: 600px; } .sample-watch { margin-top: 12px; display: inline-flex; align-items: center; gap: 14px; width: fit-content; border: 1px solid var(--gold); background: rgba(201,169,110,.12); color: var(--gold); padding: 14px 18px; font-size: 11px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; transition: .22s ease; } .sample-play-icon, .sample-play { display: grid; place-items: center; border-radius: 50%; padding-left: 2px; } .sample-play-icon { width: 34px; height: 34px; background: var(--gold); color: #0d0f0e; } .sample-hero-card:hover .sample-watch { background: var(--gold); color: #0d0f0e; } .sample-hero-card:hover .sample-play-icon { background: #0d0f0e; color: var(--gold); } .samples-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 28px; border: 1px solid var(--border); background: rgba(255,255,255,.026); margin-bottom: 18px; } .samples-toolbar p { color: var(--muted); font-size: 14px; max-width: 720px; margin-top: 4px; } .samples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .sample-card { display: grid; width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 0; cursor: pointer; text-align: left; font-family: var(--sans); overflow: hidden; transition: transform .35s cubic-bezier(.22,.8,.25,1), border-color .35s ease, box-shadow .35s ease; } .sample-card:hover { transform: translateY(-4px); border-color: rgba(201,169,110,.34); box-shadow: 0 18px 48px rgba(0,0,0,.28); } .sample-thumb { position: relative; display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; overflow: hidden; filter: saturate(.88); } .sample-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,10,9,.62), transparent 62%); } .sample-play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.72); background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px); transition: .25s ease; } .sample-card:hover .sample-play { background: var(--gold); border-color: var(--gold); color: #0d0f0e; transform: translate(-50%, -50%) scale(1.1); } .sample-duration { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(13,15,14,.82); border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; font-size: 11px; font-weight: 700; letter-spacing: 1px; } .sample-copy { display: grid; gap: 9px; padding: 22px; } .sample-name { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.02; letter-spacing: -.025em; } .sample-text { display: block; color: var(--muted); font-size: 14px; line-height: 1.65; } .video-modal { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; padding: 28px; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .video-modal.is-open { opacity: 1; pointer-events: auto; } .video-modal-backdrop { position: absolute; inset: 0; background: rgba(5,6,5,.84); backdrop-filter: blur(16px); } .video-modal-panel { position: relative; width: min(1180px, 100%); max-height: calc(100vh - 56px); overflow: auto; border: 1px solid rgba(201,169,110,.22); background: #0b0d0c; box-shadow: 0 24px 90px rgba(0,0,0,.62); transform: translateY(18px) scale(.985); transition: transform .28s cubic-bezier(.22,.8,.25,1); -ms-overflow-style: none; scrollbar-width: none; } .video-modal-panel::-webkit-scrollbar { display: none; } .video-modal.is-open .video-modal-panel { transform: none; } .video-modal-close { position: absolute; top: 9px; right: 9px; z-index: 4; width: 22px; height: 22px; border: 1px solid var(--border); background: rgba(13,15,14,.82); color: var(--gold); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .video-frame-wrap { position: relative; background: #000; aspect-ratio: 16 / 9; } .video-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; gap: 12px; align-content: center; background: radial-gradient(ellipse at center, rgba(201,169,110,.10), rgba(0,0,0,.78) 58%); color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; transition: opacity .22s ease, visibility .22s ease; } .video-loading.is-hidden { opacity: 0; visibility: hidden; } .video-spinner { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(201,169,110,.25); border-top-color: var(--gold); animation: videoSpin .85s linear infinite; } @keyframes videoSpin { to { transform: rotate(360deg); } } .video-frame-wrap iframe, .video-frame-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .video-modal-copy { padding: 28px 32px 32px; background: linear-gradient(180deg, rgba(201,169,110,.045), transparent), var(--surface); } .video-modal-copy h3 { font-size: clamp(30px, 4vw, 52px); line-height: 1; margin-bottom: 10px; } .video-modal-copy p { color: var(--muted); max-width: 780px; } body.video-modal-open { overflow: hidden; } .admin-page { min-height: 100vh; background: radial-gradient(ellipse at 75% 12%, rgba(201,169,110,.13), transparent 42%), var(--bg); color: var(--ink); font-family: var(--sans); } .admin-shell { padding: 112px 80px 80px; } .admin-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 38px; } .admin-header h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 82px); line-height: .94; letter-spacing: -.055em; } .admin-header h1 em { color: var(--gold); font-style: italic; } .admin-header p { color: var(--muted); max-width: 620px; margin-top: 14px; } .admin-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: start; } .admin-card { border: 1px solid var(--border); background: var(--panel); padding: 30px; } .admin-card h2 { font-size: 34px; margin-bottom: 18px; } .admin-form { display: grid; gap: 16px; } .admin-form label { display: grid; gap: 8px; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .admin-form input, .admin-form textarea, .admin-form select { width: 100%; border: 1px solid var(--border); background: rgba(255,255,255,.035); color: var(--ink); padding: 14px 15px; font-family: var(--sans); font-size: 14px; outline: none; } .admin-form textarea { min-height: 120px; resize: vertical; } .admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: rgba(201,169,110,.55); } .admin-list { display: grid; gap: 14px; } .admin-sample-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 18px; align-items: center; border: 1px solid var(--border); background: var(--surface); padding: 12px; } .admin-sample-row img { width: 150px; aspect-ratio: 16 / 10; object-fit: cover; background: #000; } .admin-sample-row h3 { font-size: 23px; margin-bottom: 3px; } .admin-sample-row p { color: var(--muted); font-size: 13px; line-height: 1.55; } .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .admin-status { color: var(--muted); font-size: 14px; min-height: 22px; } .admin-danger { color: #ffd0d0 !important; border-color: rgba(255,120,120,.45) !important; } @media (max-width: 1100px) { .samples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-shell { padding: 100px 40px 60px; } .admin-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .samples-toolbar { align-items: stretch; flex-direction: column; padding: 22px; } .samples-toolbar .btn { justify-content: center; } .samples-grid { grid-template-columns: 1fr; } .sample-hero-card { min-height: 520px; } .sample-hero-overlay { background: linear-gradient(0deg, rgba(9,10,9,.90) 0%, rgba(9,10,9,.20) 100%); } .video-modal { padding: 12px; } .video-modal-copy { padding: 22px; } .admin-shell { padding: 96px 24px 44px; } .admin-header { grid-template-columns: 1fr; } .admin-sample-row { grid-template-columns: 1fr; } .admin-sample-row img { width: 100%; } .admin-actions { justify-content: flex-start; } } /* ===== Postframe theme toggle refinement ===== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .theme-toggle { width: 62px !important; height: 34px !important; padding: 0 !important; border: 1px solid rgba(201,169,110,.42) !important; border-radius: 999px !important; background: rgba(255,255,255,.055) !important; color: var(--gold) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; flex: 0 0 auto; position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); } .theme-toggle-track { position: relative; display: block; width: 100%; height: 100%; } .theme-toggle-thumb { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .26s cubic-bezier(.22,.8,.25,1), background .22s ease; z-index: 2; } .theme-toggle-icon { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 13px; line-height: 1; color: var(--gold); opacity: .72; pointer-events: none; } .theme-toggle-icon-sun { left: 10px; } .theme-toggle-icon-moon { right: 11px; } html.theme-light .theme-toggle, .theme-light .theme-toggle { background: rgba(13,15,14,.12) !important; border-color: rgba(176,141,78,.45) !important; } html.theme-light .theme-toggle-thumb, .theme-light .theme-toggle-thumb { transform: translateX(28px); background: var(--gold); } .theme-toggle:hover { border-color: var(--gold) !important; background: rgba(201,169,110,.12) !important; } .theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Prevent old icon-toggle rules from affecting the new switch */ .theme-toggle .theme-icon, .theme-toggle .theme-icon-dark, .theme-toggle .theme-icon-light { display: none !important; } /* Pricing page light-mode text fixes */ .theme-light .pricing-page-hero h1, .theme-light .pricing-page-hero .section-lead, .theme-light .pricing-page-hero .kicker, .theme-light .pricing-page-hero h1 em { color: var(--ink); } .theme-light .pricing-page-hero::after { background: radial-gradient(ellipse at 72% 22%, rgba(176,141,78,.12), transparent 55%), linear-gradient(90deg, rgba(247,246,242,.96) 0%, rgba(247,246,242,.78) 46%, rgba(247,246,242,.36) 100%); } .theme-light .pricing-hero-img { opacity: .22; filter: saturate(.55) contrast(1.02) brightness(1.04); } .theme-light .plan-features li, .theme-light .plan-period, .theme-light .plan-price span, .theme-light .payment-card p, .theme-light .payment-steps p, .theme-light .payment-policy li, .theme-light .form-note, .theme-light .oneoff-item p, .theme-light .guarantee p, .theme-light .section-lead, .theme-light .pricing .billing-toggle { color: var(--muted) !important; } .theme-light .plan-price strong, .theme-light .plan-cta, .theme-light .oneoff-item h4, .theme-light .guarantee h4, .theme-light .payment-card h3, .theme-light .payment-policy h4, .theme-light .pricing-details h2, .theme-light .contact-form-section h2, .theme-light .pricing h2, .theme-light .admin-header h1, .theme-light .admin-card h2, .theme-light .admin-sample-row h3 { color: var(--ink) !important; } .theme-light .plan-features li.dim { color: var(--soft) !important; } .theme-light .featured .plan-cta, .theme-light .btn.filled, .theme-light .btn.gold:hover { color: #0d0f0e !important; } .theme-light .invoice-submit:hover, .theme-light .payoneer-button:hover, .theme-light .plan-cta:hover { color: var(--gold) !important; } .theme-light .admin-status, .theme-light .admin-header p, .theme-light .admin-sample-row p { color: var(--muted) !important; } @media (min-width: 1101px) { .nav .mobile-menu-toggle { order: 4; } .nav-actions { order: 3; } .nav-links { order: 2; } .brand { order: 1; } } @media (max-width: 1100px) { .nav-actions { margin-left: auto; gap: 8px; } .nav-actions .btn.gold { display: none; } .theme-toggle { width: 58px !important; height: 32px !important; margin-left: 0 !important; margin-right: 0 !important; } .theme-toggle-thumb { width: 22px; height: 22px; top: 4px; left: 4px; } html.theme-light .theme-toggle-thumb, .theme-light .theme-toggle-thumb { transform: translateX(26px); } } /* ===== Navbar alignment correction ===== Keep logo on the left, menu visually centered, and CTA/theme toggle on the right. */ @media (min-width: 1101px) { .nav { position: fixed; display: flex; align-items: center; justify-content: space-between; } .nav .brand { order: 1; flex: 0 0 auto; z-index: 2; } .nav .nav-links { order: 2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; margin: 0; z-index: 1; } .nav .nav-actions { order: 3; flex: 0 0 auto; margin-left: auto; z-index: 2; } .nav .mobile-menu-toggle { display: none !important; } } @media (max-width: 1100px) { .nav .nav-links { position: static; transform: none; } } /* ===== Final light-theme polish + logo swap fixes ===== */ .brand-logo-light { display: none; } html.theme-light .brand-logo-dark, .theme-light .brand-logo-dark { display: none; } html.theme-light .brand-logo-light, .theme-light .brand-logo-light { display: block; } /* Keep light theme hover states warm instead of turning black */ html.theme-light .workflow-grid .step:hover, .theme-light .workflow-grid .step:hover { background: #ebe8e2 !important; box-shadow: inset 0 0 0 1px rgba(176,141,78,.22), 0 14px 34px rgba(0,0,0,.08) !important; } html.theme-light .workflow-grid .step:hover .step-num, .theme-light .workflow-grid .step:hover .step-num { color: rgba(176,141,78,.42) !important; } html.theme-light .service-card:hover, .theme-light .service-card:hover, html.theme-light .pain-card:hover, .theme-light .pain-card:hover, html.theme-light .plan-card:hover, .theme-light .plan-card:hover, html.theme-light .faq-item:hover, .theme-light .faq-item:hover, html.theme-light .faq-item.active, .theme-light .faq-item.active { background: #ebe8e2 !important; box-shadow: inset 0 0 0 1px rgba(176,141,78,.20), 0 14px 34px rgba(0,0,0,.08) !important; } /* Make the admin/theme toggle reliable even when loaded on the admin subdomain */ .theme-toggle { min-width: 62px !important; min-height: 34px !important; -webkit-appearance: none; appearance: none; } .theme-toggle-track, .theme-toggle-thumb, .theme-toggle-icon { pointer-events: none; } html.theme-light .theme-toggle-icon-sun, .theme-light .theme-toggle-icon-sun { opacity: 1; } html.theme-light .theme-toggle-icon-moon, .theme-light .theme-toggle-icon-moon { opacity: .52; } html:not(.theme-light) .theme-toggle-icon-sun { opacity: .52; } html:not(.theme-light) .theme-toggle-icon-moon { opacity: 1; } /* Reviews admin manager */ .admin-header-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .admin-form-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .admin-checkbox-row { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 12px !important; color: var(--muted) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; } .admin-checkbox-row input { width: 16px !important; height: 16px; accent-color: var(--gold); } .admin-review-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; border: 1px solid var(--border); background: var(--surface); padding: 20px; } .admin-review-row.is-hidden-review { opacity: .58; } .admin-review-main h3 { font-size: 24px; margin-bottom: 6px; } .admin-review-main p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 12px; } .admin-review-main small { color: var(--soft); font-size: 12px; } @media (max-width: 700px) { .admin-header-actions, .admin-form-split, .admin-review-row { grid-template-columns: 1fr; } .admin-header-actions .btn { justify-content: center; width: 100%; } } /* Reviews admin preview + small footer admin link */ .review-preview-card { border: 1px solid var(--border); background: var(--surface); padding: 22px; margin-top: 4px; } .review-preview-card .quote { margin: 10px 0 14px; } .footer-admin-link { margin-left: 8px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; opacity: .85; } .footer-admin-link:hover { color: var(--gold); opacity: 1; } /* ===== Admin dark-mode button visibility fix ===== */ .admin-page .btn, .admin-page button.btn, .admin-page .admin-actions .btn, .admin-page .form-submit-row .btn { color: var(--ink) !important; background: rgba(255,255,255,.045) !important; border-color: rgba(201,169,110,.34) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); } .admin-page .btn:hover, .admin-page button.btn:hover, .admin-page .admin-actions .btn:hover, .admin-page .form-submit-row .btn:hover { color: var(--gold) !important; background: rgba(201,169,110,.10) !important; border-color: var(--gold) !important; } .admin-page .btn.filled, .admin-page button.btn.filled { color: #0d0f0e !important; background: var(--gold) !important; border-color: var(--gold) !important; } .admin-page .btn.filled:hover, .admin-page button.btn.filled:hover { color: var(--gold) !important; background: transparent !important; border-color: var(--gold) !important; } .admin-page .btn.gold, .admin-page button.btn.gold { color: var(--gold) !important; background: rgba(201,169,110,.08) !important; border-color: var(--gold) !important; } .admin-page .btn.gold:hover, .admin-page button.btn.gold:hover { color: #0d0f0e !important; background: var(--gold) !important; border-color: var(--gold) !important; } .admin-page .admin-danger, .admin-page button.admin-danger { color: #ffd0d0 !important; background: rgba(255,120,120,.08) !important; border-color: rgba(255,120,120,.45) !important; } .admin-page .admin-danger:hover, .admin-page button.admin-danger:hover { color: #0d0f0e !important; background: #ffd0d0 !important; border-color: #ffd0d0 !important; } html.theme-light .admin-page .btn, .theme-light .admin-page .btn, html.theme-light .admin-page button.btn, .theme-light .admin-page button.btn { color: var(--ink) !important; background: rgba(0,0,0,.025) !important; border-color: rgba(176,141,78,.30) !important; } html.theme-light .admin-page .btn:hover, .theme-light .admin-page .btn:hover, html.theme-light .admin-page button.btn:hover, .theme-light .admin-page button.btn:hover { color: var(--gold) !important; background: rgba(176,141,78,.10) !important; border-color: var(--gold) !important; } html.theme-light .admin-page .btn.filled, .theme-light .admin-page .btn.filled, html.theme-light .admin-page button.btn.filled, .theme-light .admin-page button.btn.filled { color: #0d0f0e !important; background: var(--gold) !important; border-color: var(--gold) !important; } /* Pricing admin manager */ .pricing-admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; } .pricing-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .pricing-admin-card-wide { grid-column: 1 / -1; } .pricing-admin-card h2 { font-size: 32px; margin-bottom: 18px; } .pricing-admin-card h3 { font-size: 22px; } .pricing-admin-card-head, .pricing-admin-item-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .pricing-admin-mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pricing-admin-mini-grid label:has(textarea), .pricing-admin-mini-grid .admin-checkbox-row { grid-column: 1 / -1; } .pricing-admin-mini-grid textarea { min-height: 92px; } .pricing-admin-repeater { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pricing-admin-item { border: 1px solid var(--border); background: var(--surface); padding: 18px; } .pricing-admin-item strong { color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 2px; } @media (max-width: 1100px) { .pricing-admin-grid, .pricing-admin-mini-grid, .pricing-admin-repeater { grid-template-columns: 1fr; } } @media (max-width: 700px) { .pricing-admin-toolbar, .pricing-admin-card-head, .pricing-admin-item-head { align-items: stretch; flex-direction: column; } .pricing-admin-toolbar .btn, .pricing-admin-card-head .btn, .pricing-admin-item-head .btn { justify-content: center; width: 100%; } } /* ===== Mobile reviews + theme toggle placement fix ===== */ @media (max-width: 1100px) { .nav { justify-content: flex-start; } .nav .brand { flex: 0 0 auto; } .nav .nav-actions { margin-left: auto !important; margin-right: 0 !important; order: 2; } .nav .theme-toggle { width: 54px !important; height: 30px !important; } .nav .theme-toggle-thumb { width: 20px; height: 20px; top: 4px; left: 4px; } html.theme-light .nav .theme-toggle-thumb, .theme-light .nav .theme-toggle-thumb { transform: translateX(24px); } .nav .mobile-menu-toggle { order: 3; margin-left: 8px !important; flex: 0 0 auto; } } @media (max-width: 700px) { .reviews-carousel { margin-left: -24px; margin-right: -24px; } .review-arrows { display: none; } .reviews-grid { gap: 12px; padding: 0 24px 18px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scroll-snap-type: x mandatory; scroll-padding-left: 24px; cursor: auto; mask-image: none; -webkit-mask-image: none; overscroll-behavior-x: contain; } .reviews-grid.dragging { cursor: auto; } .reviews-grid.dragging * { pointer-events: auto; } .review-card { flex: 0 0 min(84vw, 360px); min-height: 250px; padding: 26px 22px; scroll-snap-align: start; } .quote { font-size: 22px; } } /* ===== Reviews carousel smooth scrolling + usable custom scrollbar ===== */ .reviews-carousel { --review-scrollbar-track: rgba(255,255,255,.075); --review-scrollbar-thumb: rgba(201,169,110,.62); } .reviews-grid { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(201,169,110,.55) rgba(255,255,255,.075); } .reviews-grid::-webkit-scrollbar { height: 10px; } .reviews-grid::-webkit-scrollbar-track { background: rgba(255,255,255,.075); } .reviews-grid::-webkit-scrollbar-thumb { background: rgba(201,169,110,.62); border-radius: 999px; border: 2px solid rgba(13,15,14,.88); } .reviews-grid::-webkit-scrollbar-thumb:hover { background: var(--gold); } .review-scrollbar { position: relative; height: 12px; margin-top: 10px; border-radius: 999px; background: var(--review-scrollbar-track); overflow: hidden; cursor: pointer; touch-action: none; } .review-scrollbar[hidden] { display: none !important; } .review-scrollbar-thumb { position: absolute; top: 2px; left: 0; height: 8px; min-width: 44px; border-radius: 999px; background: var(--review-scrollbar-thumb); box-shadow: 0 0 0 1px rgba(201,169,110,.25); transition: background .2s ease; } .review-scrollbar:hover .review-scrollbar-thumb, .review-scrollbar.is-dragging .review-scrollbar-thumb { background: var(--gold); } .theme-light .reviews-carousel { --review-scrollbar-track: rgba(0,0,0,.075); --review-scrollbar-thumb: rgba(176,141,78,.62); } .theme-light .reviews-grid { scrollbar-color: rgba(176,141,78,.62) rgba(0,0,0,.075); } .theme-light .reviews-grid::-webkit-scrollbar-track { background: rgba(0,0,0,.075); } .theme-light .reviews-grid::-webkit-scrollbar-thumb { background: rgba(176,141,78,.62); border-color: rgba(247,246,242,.92); } @media (max-width: 700px) { .reviews-grid { scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 14px; } .review-scrollbar { margin-left: 24px; margin-right: 24px; height: 14px; } .review-scrollbar-thumb { height: 10px; top: 2px; min-width: 52px; } } /* ===== Reviews carousel: single scrollbar + smooth mobile free-scroll ===== Keeps the custom review scrollbar only, hides the browser's duplicate native bar, and removes mobile snap/drag friction so swiping feels like normal page scrolling. */ .reviews-grid { scrollbar-width: none !important; -ms-overflow-style: none !important; } .reviews-grid::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } @media (max-width: 700px) { .reviews-grid { touch-action: pan-x pan-y; scroll-snap-type: none !important; scroll-behavior: auto; -webkit-overflow-scrolling: touch; cursor: auto; user-select: auto; padding-bottom: 8px; mask-image: none; -webkit-mask-image: none; } .reviews-grid:active, .reviews-grid.dragging { cursor: auto; } .reviews-grid.dragging * { pointer-events: auto; } .review-card { scroll-snap-align: none !important; } .review-scrollbar { margin: 12px 24px 0; } } /* ===== Mobile compact cards for Why Postframe + Simple Workflow ===== */ @media (max-width: 700px) { .why-us .pain-grid, .workflow .workflow-grid { gap: 10px; background: transparent; border: 0; } .why-us .pain-card, .workflow .step { min-height: auto; padding: 20px 18px; border: 1px solid var(--border); } .why-us .pain-card b { margin-bottom: 10px; font-size: 10px; letter-spacing: 2px; } .why-us .pain-card h3 { font-size: 22px; margin-bottom: 8px; } .why-us .pain-card p { font-size: 13px; line-height: 1.55; } .workflow .step-num { font-size: 34px; margin-bottom: 10px; padding-bottom: 0; } .workflow .step h3 { font-size: 21px; margin-bottom: 6px; } .workflow .step p { font-size: 12.5px; line-height: 1.55; } } /* Service preview strips — visual proof without duplicating the full samples section */ .services-grid-visual .service-card-visual { gap: 24px; } .service-card-main { display: block; } .service-preview { width: 100%; border: 1px solid rgba(201,169,110,.20); background: rgba(255,255,255,.025); color: var(--ink); display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 14px; padding: 10px; cursor: pointer; text-align: left; font-family: var(--sans); transition: border-color .24s ease, background .24s ease, transform .24s ease; margin-top: auto; } .service-preview:hover { border-color: rgba(201,169,110,.48); background: rgba(201,169,110,.07); transform: translateY(-2px); } .service-preview-media { position: relative; display: block; min-height: 62px; background-image: var(--service-preview-image); background-size: cover; background-position: center; overflow: hidden; filter: saturate(.82) contrast(1.04); } .service-preview-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,10,9,.58), rgba(9,10,9,.08)); } .service-preview-play { position: absolute; inset: 0; z-index: 2; margin: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #0d0f0e; font-size: 11px; line-height: 1; padding-left: 1px; box-shadow: 0 8px 20px rgba(0,0,0,.28); } .service-preview-copy { display: grid; gap: 3px; min-width: 0; } .service-preview-copy span { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .service-preview-copy small { color: var(--muted); font-size: 12px; line-height: 1.35; } .service-preview-link { text-decoration: none; } .theme-light .service-preview { background: rgba(176,141,78,.045); border-color: rgba(176,141,78,.22); } .theme-light .service-preview:hover { background: rgba(176,141,78,.10); border-color: rgba(176,141,78,.40); } @media (max-width: 1100px) { .service-preview { grid-template-columns: 110px 1fr; } } @media (max-width: 700px) { .services-grid-visual .service-card-visual { gap: 16px; } .service-preview { grid-template-columns: 88px 1fr; gap: 12px; padding: 9px; } .service-preview-media { min-height: 56px; } .service-preview-copy span { font-size: 10px; letter-spacing: 1.7px; } .service-preview-copy small { font-size: 11px; } } /* ===== Compact visual services with Social Media Teasers ===== */ @media (min-width: 1201px) { .services-grid.services-grid-visual { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .services-grid-visual .service-card-visual { min-height: 285px; padding: 28px 22px; gap: 18px; } .services-grid-visual .service-card h3 { font-size: 24px; margin-bottom: 10px; } .services-grid-visual .service-card p { font-size: 13px; line-height: 1.58; } .services-grid-visual .service-list { margin-top: 18px; gap: 6px; } .services-grid-visual .service-list li { font-size: 12px; line-height: 1.45; } .services-grid-visual .service-preview { grid-template-columns: 78px 1fr; gap: 11px; padding: 8px; } .services-grid-visual .service-preview-media { min-height: 52px; } .services-grid-visual .service-preview-play { width: 26px; height: 26px; font-size: 10px; } .services-grid-visual .service-preview-copy span { font-size: 10px; letter-spacing: 1.5px; } .services-grid-visual .service-preview-copy small { font-size: 11px; } @media (max-width: 1200px) and (min-width: 1101px) { .services-grid.services-grid-visual { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .services-grid-visual .service-card-visual { min-height: auto; padding: 22px 18px; } } /* ===== Homepage trust/proof clarity additions ===== */ .hero-trust-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; } .hero-trust-note::before { content: ''; width: 22px; height: 1px; background: var(--gold); opacity: .75; } .section-lead-block { display: grid; gap: 12px; max-width: 560px; } .section-lead-block .section-lead { margin: 0; } .proof-link { width: fit-content; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; border-bottom: 1px solid rgba(201,169,110,.32); padding-bottom: 3px; transition: color .22s ease, border-color .22s ease; } .proof-link:hover { color: var(--ink); border-color: var(--gold); } .included-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 680px; } .included-chips span { border: 1px solid rgba(201,169,110,.24); background: rgba(201,169,110,.06); color: var(--muted); padding: 7px 10px; font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; } .theme-light .included-chips span { background: rgba(176,141,78,.07); border-color: rgba(176,141,78,.24); } @media (max-width: 700px) { .hero-trust-note { font-size: 10px; line-height: 1.45; letter-spacing: 1.25px; margin-top: 14px; } .included-chips { gap: 7px; } .included-chips span { font-size: 9px; padding: 6px 9px; } } /* Homepage quick contact form */ .cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 34px; align-items: start; } .quick-contact-form { border: 1px solid var(--border); background: rgba(255,255,255,.035); padding: 28px; display: grid; gap: 16px; backdrop-filter: blur(12px); } .quick-form-title { font-family: var(--serif); font-size: 28px; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); margin-bottom: 2px; } .quick-contact-form label { display: grid; gap: 8px; color: var(--gold); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; } .quick-contact-form input, .quick-contact-form textarea { width: 100%; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--ink); padding: 13px 14px; font-family: var(--sans); font-size: 14px; line-height: 1.45; outline: none; transition: border-color .22s ease, background .22s ease, box-shadow .22s ease; } .quick-contact-form textarea { resize: vertical; min-height: 118px; } .quick-contact-form input::placeholder, .quick-contact-form textarea::placeholder { color: var(--soft); } .quick-contact-form input:focus, .quick-contact-form textarea:focus { border-color: rgba(201,169,110,.55); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(201,169,110,.08); } .quick-form-submit { width: 100%; justify-content: center; } .quick-form-note { color: var(--soft); font-size: 13px; line-height: 1.55; } .quick-form-note a { color: var(--gold); } .theme-light .quick-contact-form { background: rgba(176,141,78,.04); border-color: rgba(176,141,78,.18); } .theme-light .quick-contact-form input, .theme-light .quick-contact-form textarea { background: rgba(0,0,0,.025); border-color: var(--border); color: var(--ink); } .theme-light .quick-contact-form input:focus, .theme-light .quick-contact-form textarea:focus { background: rgba(0,0,0,.04); border-color: rgba(176,141,78,.55); box-shadow: 0 0 0 3px rgba(176,141,78,.08); } @media (max-width: 980px) { .cta-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .quick-contact-form { padding: 22px 20px; } .quick-form-title { font-size: 24px; } } /* Compact after-samples CTA */ .sample-cta-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 34px 80px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(201,169,110,.075), rgba(255,255,255,.018)); } .sample-cta-strip .kicker { margin-bottom: 10px; } .sample-cta-strip h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 10px; } .sample-cta-strip p { max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.6; } .theme-light .sample-cta-strip { background: linear-gradient(135deg, rgba(176,141,78,.075), rgba(255,255,255,.38)); } @media (max-width: 900px) { .sample-cta-strip { grid-template-columns: 1fr; padding: 32px 24px; } .sample-cta-strip .btn { width: fit-content; } } @media (max-width: 600px) { .sample-cta-strip .btn { width: 100%; justify-content: center; } } /* Video popup no-scroll fit — keep original stacked layout */ @media (min-width: 901px) { .video-modal { padding: 24px; } .video-modal-panel { width: min(960px, calc(100vw - 48px)); max-height: calc(100svh - 48px); overflow: hidden; } .video-modal-copy { padding: 18px 24px 20px; } .video-modal-copy h3 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.02; margin-bottom: 6px; } .video-modal-copy p { font-size: 13px; line-height: 1.45; max-width: 100%; } } @media (max-width: 900px) { .video-modal { padding: 14px; } .video-modal-panel { max-height: calc(100svh - 28px); } .video-modal-copy { padding: 14px 16px 16px; } .video-modal-copy h3 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.02; margin-bottom: 5px; } .video-modal-copy p { font-size: 12px; line-height: 1.4; } } @media (max-height: 760px) and (min-width: 901px) { .video-modal-panel { width: min(860px, calc(100vw - 48px)); } .video-modal-copy { padding: 14px 20px 16px; } .video-modal-copy h3 { font-size: clamp(24px, 2.3vw, 32px); } .video-modal-copy p { font-size: 12px; line-height: 1.35; } } /* Hide hard-coded pricing fallback while live admin pricing loads. */ body.pricing-data-pending .pricing-head, body.pricing-data-pending .plans-grid, body.pricing-data-pending .oneoff-strip, body.pricing-data-pending .guarantee, body.pricing-data-pending .pricing-details .section-head, body.pricing-data-pending .pricing-includes-grid, body.pricing-data-pending .contact-form-head { opacity: 0; pointer-events: none; } body.pricing-data-pending .pricing { min-height: 620px; } .pricing-loading-skeleton { display: none; } body.pricing-data-pending .pricing-loading-skeleton { display: block; position: relative; z-index: 2; } .pricing-skeleton-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; } .pricing-skeleton-head span, .pricing-skeleton-card span, .pricing-skeleton-card strong, .pricing-skeleton-card p { display: block; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.11), rgba(255,255,255,.055)); background-size: 220% 100%; animation: pricingSkeletonSweep 1.35s ease-in-out infinite; } .theme-light .pricing-skeleton-head span, .theme-light .pricing-skeleton-card span, .theme-light .pricing-skeleton-card strong, .theme-light .pricing-skeleton-card p { background: linear-gradient(90deg, rgba(20,20,18,.055), rgba(20,20,18,.11), rgba(20,20,18,.055)); background-size: 220% 100%; } .pricing-skeleton-head span:first-child { width: 92px; height: 13px; } .pricing-skeleton-head span:last-child { width: 250px; height: 36px; } .pricing-skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; } .pricing-skeleton-card { min-height: 380px; padding: 40px 36px; background: var(--panel); } .pricing-skeleton-card.featured { background: radial-gradient(ellipse at 50% -10%, rgba(201,169,110,.11), transparent 55%), #1a1d1b; border-top: 2px solid var(--gold); } .theme-light .pricing-skeleton-card.featured { background: radial-gradient(ellipse at 50% -10%, rgba(201,169,110,.16), transparent 55%), #fffaf0; } .pricing-skeleton-card span { width: 86px; height: 13px; margin-bottom: 24px; } .pricing-skeleton-card strong { width: 140px; height: 48px; margin-bottom: 24px; border-radius: 14px; } .pricing-skeleton-card p { height: 12px; margin: 16px 0; } .pricing-skeleton-card p:nth-of-type(1) { width: 76%; } .pricing-skeleton-card p:nth-of-type(2) { width: 92%; } .pricing-skeleton-card p:nth-of-type(3) { width: 84%; } .pricing-skeleton-card p:nth-of-type(4) { width: 64%; } @keyframes pricingSkeletonSweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } /* Pricing page compact header spacing — keeps the pricing table close to the billing toggle. */ .pricing { padding-top: clamp(34px, 4vw, 48px) !important; padding-bottom: clamp(56px, 6vw, 76px); } .pricing-head { display: block !important; margin-bottom: 24px !important; } .pricing-head > div { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; width: 100%; } .pricing-head .kicker { margin-bottom: 0 !important; } .pricing-head .billing-toggle { margin-top: 0 !important; flex-wrap: wrap; justify-content: flex-end; } .pricing .plans-grid { margin-top: 0 !important; } body.pricing-data-pending .pricing { min-height: 360px !important; } @media (max-width: 700px) { .pricing { padding-top: 32px !important; } .pricing-head { margin-bottom: 20px !important; } .pricing-head > div { align-items: flex-start; flex-direction: column; gap: 14px; } .pricing-head .billing-toggle { justify-content: flex-start; gap: 10px; } body.pricing-data-pending .pricing { min-height: 320px !important; } } @media (max-width: 900px) { .pricing-skeleton-grid { grid-template-columns: 1fr; gap: 10px; } .pricing-skeleton-card { min-height: 300px; } } @media (max-width: 700px) { .pricing-skeleton-head { align-items: flex-start; flex-direction: column; gap: 14px; } .pricing-skeleton-head span:last-child { width: min(250px, 100%); } .pricing-skeleton-card { padding: 30px 24px; } }