/* ============================================================ Mani J — UGC Creator site Design system pulled from her Canva media kit: sand/cream background, mocha-brown display serif, sage-green script accents, black nav, white photo frames. ============================================================ */ /* Fonts are loaded via in each page's (not @import) to avoid a render-blocking round-trip. */ :root{ --sand: #e7dbca; --sand-alt: #ded0bc; --sand-deep: #d6c6ae; --mocha: #7a5838; --mocha-soft: #cbb59a; --sage: #2b3c22; --sage-soft: #6c7d5c; --rose: #b5677a; --rose-soft: #ecd4d8; --rose-deep: #8a4a5c; --ink: #1c1a17; --white: #ffffff; --max-w: 1180px; --radius: 2px; } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family:'Jost', sans-serif; background: var(--sand); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* textured sand background used behind every section */ .texture-bg{ position:relative; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 7px), linear-gradient(135deg, var(--sand) 46%, var(--sand-alt) 47%, var(--sand) 54%); } h1,h2,h3,h4{ font-family:'Playfair Display', serif; margin:0 0 .4em; color: var(--mocha); font-weight:600; letter-spacing:.02em; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .script{ font-family:'Alex Brush', cursive; color: var(--rose); font-size:2.6rem; line-height:1; display:inline-block; } .eyebrow{ font-family:'Jost', sans-serif; letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; color: var(--sage); font-weight:600; } .quote-font{ font-family:'Courier Prime', monospace; } .wrap{ max-width: var(--max-w); margin:0 auto; padding: 0 32px; } /* ---------------- NAV ---------------- */ .site-nav{ background: var(--ink); color:#f2ede3; position:sticky; top:0; z-index:50; } .site-nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding: 16px 32px; gap: 20px; } .brand-mark{ font-family:'Playfair Display', serif; font-size:1.35rem; letter-spacing:.14em; color:#f2ede3; white-space:nowrap; } .brand-mark span{ color: #cbb59a; } .nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; flex-wrap:wrap; } .nav-links a{ opacity:.82; padding-bottom:3px; border-bottom:1px solid transparent; transition:.2s; } .nav-links a:hover, .nav-links a.active{ opacity:1; border-color: var(--rose-soft); color:#f6e9d8; } /* Hamburger button (hidden on desktop) */ .nav-toggle{ display:none; flex-direction:column; justify-content:space-between; width:26px; height:18px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; } .nav-toggle span{ display:block; width:100%; height:2px; background:#f2ede3; border-radius:2px; transition: transform .25s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:scaleX(0); } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } /* Mobile nav: hamburger visible, links hidden until toggled */ @media (max-width: 860px){ .site-nav .wrap{ flex-wrap:nowrap; padding:12px 16px; gap:12px; align-items:center; } .brand-mark{ font-size:1.2rem; } .nav-toggle{ display:flex; margin-left:auto; } .nav-links{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--ink); flex-direction:column; align-items:center; gap:0; padding:8px 0 14px; border-top:1px solid rgba(255,255,255,.12); z-index:200; width:100%; margin:0; } .nav-links.open{ display:flex; } .nav-links li{ width:100%; text-align:center; } .nav-links li a{ display:block; padding:12px 20px; font-size:.84rem; letter-spacing:.14em; border-bottom:none !important; opacity:.85; } .nav-links li a:hover, .nav-links li a.active{ opacity:1; color:#f6e9d8; background:rgba(255,255,255,.06); border-bottom:none !important; } } /* ---------------- BUTTONS ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 14px 30px; border: 1px solid var(--sage); color: var(--sage); font-family:'Jost', sans-serif; letter-spacing:.16em; text-transform:uppercase; font-size:.78rem; font-weight:600; background:transparent; border-radius: var(--radius); transition:.2s ease; box-shadow: 0 0 0 0 rgba(43,60,34,0); } .btn:hover{ background: var(--sage); color:#f6efe3; box-shadow: 0 6px 18px rgba(43,60,34,.25); } .btn.dark{ border-color: var(--ink); color: var(--ink); } .btn.dark:hover{ background: var(--ink); color:#fff; } .btn.filled{ background: var(--sage); color:#f6efe3; } .btn.filled:hover{ opacity:.88; } /* ---------------- HERO ---------------- */ .hero{ padding: 64px 0 90px; position:relative; } .hero .wrap{ display:grid; grid-template-columns: 1.05fr 1fr; align-items:center; gap: 40px; } .hero-visual{ position:relative; max-width:340px; width:100%; } .phone-frame{ position:relative; aspect-ratio: 1470/3000; overflow:hidden; } .phone-frame img, .phone-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; clip-path: inset(1.7% 3.6% 1.8% 3.5% round 10%); } .phone-frame::after{ content:''; position:absolute; inset:0; background-image:url('images/2026-08-22-iphone-bezel-deep-blue.png'); background-size:100% 100%; background-repeat:no-repeat; pointer-events:none; z-index:2; } .mute-toggle{ position:absolute; right:9%; bottom:8%; z-index:3; width:38px; height:38px; border-radius:50%; border:none; background: rgba(28,26,23,.55); backdrop-filter: blur(2px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: background .2s ease, transform .2s ease; } .mute-toggle:hover{ background: rgba(28,26,23,.75); transform: scale(1.06); } .mute-toggle svg{ width:17px; height:17px; fill:#fff; } .hero-copy .eyebrow{ margin-bottom:10px; display:block; } .hero-title{ font-size: clamp(3.2rem, 10.5vw, 7.4rem); line-height:.9; margin-bottom:0; color: var(--mocha-soft); } .hero-title strong{ display:block; color: var(--mocha); font-weight:500; font-size:.26em; letter-spacing:.14em; text-transform:uppercase; margin-top:-2px; } .hero-copy .script{ display:block; margin-bottom:-10px; font-size: clamp(2.2rem, 5.2vw, 3.4rem); transform: rotate(-4deg); transform-origin: left bottom; } .hero-name{ font-family:'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing:.34em; color: var(--mocha); text-align:center; padding: 4px 0; margin: 22px 0 26px; width:100%; position:relative; } .hero-name::before, .hero-name::after{ content:''; display:block; width:72px; height:1px; margin:0 auto; background: linear-gradient(90deg, transparent, var(--rose) 20%, var(--rose-deep) 50%, var(--rose) 80%, transparent); background-size: 220% 100%; animation: rule-shimmer 4.5s ease-in-out infinite; } .hero-name::before{ margin-bottom:14px; } .hero-name::after{ margin-top:14px; } @keyframes rule-shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -100% 0; } } .hero-name .type-target{ display:inline-block; min-height:1em; } .hero-name .type-target::after{ content:''; display:inline-block; width:2px; height:.85em; margin-left:3px; background: var(--rose); vertical-align:-0.1em; opacity:0; } .hero-name .type-target.typing::after{ opacity:1; animation: type-cursor-blink .8s step-end infinite; } @keyframes type-cursor-blink{ 50%{ opacity:0; } } @media (prefers-reduced-motion: reduce){ .hero-name::before, .hero-name::after{ animation:none; background-position:0 0; } .hero-name .type-target::after{ display:none; } } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; } .hero .wrap.trusted-strip{ display:block; border-top: 1px solid rgba(122,88,56,.25); margin-top:56px; padding-top:30px; } .trusted-strip .eyebrow{ display:block; margin-bottom:16px; } .logo-belt{ overflow:hidden; width:100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .logo-track{ display:flex; align-items:center; width:max-content; gap:64px; animation: belt-scroll 46s linear infinite; animation-play-state: running; pointer-events:none; } .belt-logo{ height:34px; width:auto; max-width:150px; object-fit:contain; flex-shrink:0; display:block; opacity:.85; -webkit-user-select:none; user-select:none; } .belt-logo.belt-logo-tile{ height:46px; border-radius:8px; } @keyframes belt-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .logo-track{ animation:none; } .thumb.video-thumb::after{ animation:none; background-position:0% 50%; } } @media (max-width: 900px){ .hero .wrap{ grid-template-columns:1fr; } .hero-visual{ margin: 0 auto 20px; } .hero-copy{ text-align:center; } .hero-copy .script{ display:inline-block; transform-origin:center bottom; } .hero-actions{ justify-content:center; } } /* ---------------- SECTION HEADERS ---------------- */ .section{ padding: 80px 0; } .section.alt{ background: var(--sand-alt); } .section-head{ text-align:center; margin-bottom:48px; } .section-head .script{ display:block; margin-bottom:4px; } .section-head h2{ font-size: clamp(2rem,4vw,3rem); letter-spacing:.05em; } .section-head p{ color: var(--sage-soft); max-width:560px; margin:14px auto 0; } /* ---------------- WHY / BIO ---------------- */ .bio{ display:grid; grid-template-columns: .9fr 1.1fr; gap:56px; align-items:center; } .bio-visual{ max-width:380px; } .bio-photo{ border-radius:4px; overflow:hidden; box-shadow:0 20px 40px -18px rgba(0,0,0,.35); } .bio-photo img{ width:100%; } .bio-list{ list-style:none; margin: 18px 0 26px; padding:0; } .bio-list li{ padding: 9px 0 9px 22px; position:relative; font-size:1.02rem; letter-spacing:.03em; color: var(--mocha); border-bottom:1px solid rgba(122,88,56,.15); } .bio-list li::before{ content:''; position:absolute; left:0; top:17px; width:7px; height:7px; border-radius:50%; background: var(--rose); } blockquote.pull{ font-family:'Courier Prime', monospace; font-style:italic; color: var(--rose-deep); font-size:1.05rem; line-height:1.6; border-left: 3px solid var(--rose); padding: 4px 0 4px 20px; margin: 22px 0 0; } @media (max-width: 900px){ .bio{ grid-template-columns:1fr; } .bio-visual{ max-width:340px; margin: 0 auto 10px; } } /* ---------------- STATS ---------------- */ .stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap: 28px; text-align:center; margin: 40px 0; } .stat-row .num{ font-family:'Playfair Display',serif; font-size:2.6rem; color: var(--mocha); line-height:1; } .stat-row .label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--sage-soft); margin-top:8px; display:block; } /* ---------------- PORTFOLIO GRID ---------------- */ .portfolio-category{ margin-bottom: 74px; } .category-head{ text-align:center; margin-bottom: 30px; } .category-head h3{ font-size: clamp(1.6rem,3.4vw,2.4rem); } .category-head .script{ font-size:1.7rem; } .thumb-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; } .thumb{ position:relative; border-radius:4px; overflow:hidden; background:#fff; padding:8px; box-shadow: 0 16px 34px -20px rgba(0,0,0,.4); aspect-ratio: 3/4.6; } .thumb img{ width:100%; height:100%; object-fit:cover; border-radius:2px; } .thumb video{ width:100%; height:100%; object-fit:cover; border-radius:2px; display:block; } .thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .thumb .play span{ width:52px; height:52px; border-radius:50%; background:rgba(28,26,23,.55); display:flex; align-items:center; justify-content:center; } .thumb .play svg{ width:18px; height:18px; fill:#fff; margin-left:3px; } .coming-soon-badge{ position:absolute; top:16px; left:16px; background: var(--ink); color:#f6efe3; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:2px; z-index:10; } /* Video thumb — animated shimmer border drawn as an overlay ON TOP of the video (mask-composite "picture frame" ring), not a padding-reveal. Mobile Safari's native video-controls bar can render past the bottom of the video's own box, which silently ate a padding-based border there — an overlay ring at a higher z-index than the video can't be covered by it. */ .thumb.video-thumb{ padding:0; background:#fff; box-shadow: 0 16px 34px -20px rgba(0,0,0,.4); } .thumb.video-thumb video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:2px; position:relative; z-index:1; } .thumb.video-thumb::after{ content:''; position:absolute; inset:0; z-index:3; border-radius:4px; padding:5px; background: linear-gradient(115deg, var(--rose-soft) 0%, #ffe9c7 15%, var(--rose) 30%, #fffdf6 45%, var(--rose-deep) 60%, #ffe9c7 75%, var(--rose) 90%, var(--rose-soft) 100%); background-size: 300% 300%; animation: thumb-shimmer 6s ease-in-out infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset; pointer-events: none; } @keyframes thumb-shimmer{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @media (max-width: 760px){ .thumb-row{ grid-template-columns: repeat(2,1fr); } .thumb.video-thumb::after{ padding: 6px; border-radius:5px; } } @media (max-width: 520px){ .thumb-row{ grid-template-columns: 1fr 1fr; gap:12px; } } /* ---------------- SERVICES ---------------- */ .services-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items:center; } .service-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 30px; list-style:none; margin:0 0 28px; padding:0; } .service-list li{ padding: 10px 0; border-bottom:1px solid rgba(122,88,56,.18); font-size:.98rem; letter-spacing:.05em; color: var(--mocha); text-transform:uppercase; } .service-notes{ border: 1px solid var(--mocha-soft); padding: 22px 24px; border-radius:2px; margin-top: 18px; } .service-notes h4{ font-size:1rem; letter-spacing:.06em; } .service-notes ul{ margin:10px 0 0; padding-left:18px; color: var(--sage); font-size:.92rem; line-height:1.7; } .device-stack{ position:relative; min-height:420px; } .device-frame{ position:relative; } .device-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; mask-repeat:no-repeat; mask-size:100% 100%; mask-mode:luminance; -webkit-mask-repeat:no-repeat; -webkit-mask-size:100% 100%; -webkit-mask-mode:luminance; } .device-frame::after{ content:''; position:absolute; inset:0; background-size:100% 100%; background-repeat:no-repeat; pointer-events:none; z-index:2; } .device-ipad{ position:absolute; right:0; top:0; width:64%; aspect-ratio: 2640/1880; filter: drop-shadow(0 24px 50px -22px rgba(0,0,0,.45)); } .device-ipad img{ mask-image:url('images/2026-08-23-ipad-screen-mask.png'); -webkit-mask-image:url('images/2026-08-23-ipad-screen-mask.png'); } .device-ipad::after{ background-image:url('images/2026-08-23-ipad-bezel-silver.png'); } .device-iphone{ position:absolute; left:0; bottom:0; width:28%; aspect-ratio: 1470/3000; filter: drop-shadow(0 20px 40px -18px rgba(0,0,0,.45)); } .device-iphone img{ object-position: center 30%; mask-image:url('images/2026-08-23-iphone-screen-mask.png'); -webkit-mask-image:url('images/2026-08-23-iphone-screen-mask.png'); } .device-iphone::after{ background-image:url('images/2026-08-23-iphone-bezel-cosmic-orange.png'); } @media (max-width: 900px){ .services-layout{ grid-template-columns:1fr; } .service-list{ grid-template-columns:1fr; } .device-stack{ min-height:340px; margin-top:20px; } } /* ---------------- FALL-IN LISTS (service list, rate tables) ---------------- */ .js .list-fall > *{ opacity:0; } .js .list-fall.is-visible > *{ animation: fall-into-place .6s cubic-bezier(.22,1,.36,1) both; } .js .list-fall.is-visible > *:nth-child(1){ animation-delay:.04s; } .js .list-fall.is-visible > *:nth-child(2){ animation-delay:.10s; } .js .list-fall.is-visible > *:nth-child(3){ animation-delay:.16s; } .js .list-fall.is-visible > *:nth-child(4){ animation-delay:.22s; } .js .list-fall.is-visible > *:nth-child(5){ animation-delay:.28s; } .js .list-fall.is-visible > *:nth-child(6){ animation-delay:.34s; } .js .list-fall.is-visible > *:nth-child(7){ animation-delay:.40s; } .js .list-fall.is-visible > *:nth-child(8){ animation-delay:.46s; } .js .list-fall.is-visible > *:nth-child(9){ animation-delay:.52s; } .js .list-fall.is-visible > *:nth-child(10){ animation-delay:.58s; } .js .rows-fall td{ opacity:0; } .js .rows-fall.is-visible tr td{ animation: fall-into-place .5s cubic-bezier(.22,1,.36,1) both; } .js .rows-fall.is-visible tr:nth-child(1) td{ animation-delay:.04s; } .js .rows-fall.is-visible tr:nth-child(2) td{ animation-delay:.11s; } .js .rows-fall.is-visible tr:nth-child(3) td{ animation-delay:.18s; } .js .rows-fall.is-visible tr:nth-child(4) td{ animation-delay:.25s; } .js .rows-fall.is-visible tr:nth-child(5) td{ animation-delay:.32s; } @keyframes fall-into-place{ 0%{ opacity:0; transform: translateY(-22px); } 60%{ opacity:1; transform: translateY(5px); } 80%{ transform: translateY(-2px); } 100%{ opacity:1; transform: translateY(0); } } /* ---------------- DEVICE BEZELS: slide in on load, dance on hover ---------------- */ /* Entrance uses transition (not animation) so it never fights the hover keyframe animation for the `animation` property, and doesn't replay when a hover ends. */ .js .device-reveal .device-ipad, .js .device-reveal .device-iphone{ opacity:0; transition: opacity .65s ease, transform .65s cubic-bezier(.34,1.56,.64,1); } .js .device-reveal .device-ipad{ transform: translateX(70px) scale(.9); transition-delay: .05s; } .js .device-reveal .device-iphone{ transform: translateX(-70px) scale(.9); transition-delay: .22s; } .js .device-reveal.is-visible .device-ipad, .js .device-reveal.is-visible .device-iphone{ opacity:1; transform: translateX(0) scale(1); } .device-ipad:hover, .device-iphone:hover{ animation: device-dance .7s ease-in-out infinite; opacity: 1 !important; cursor: pointer; } @keyframes device-dance{ 0%, 100%{ transform: rotate(0deg) scale(1); } 20%{ transform: rotate(-3deg) scale(1.04); } 40%{ transform: rotate(2.5deg) scale(1.04); } 60%{ transform: rotate(-2deg) scale(1.02); } 80%{ transform: rotate(1.5deg) scale(1.02); } } @media (prefers-reduced-motion: reduce){ .list-fall > *, .rows-fall td{ opacity:1 !important; animation:none !important; transform:none !important; } .device-reveal .device-ipad, .device-reveal .device-iphone{ opacity:1 !important; transition:none !important; transform:none !important; } .device-ipad:hover, .device-iphone:hover{ animation:none !important; } } /* ---------------- PROCESS TIMELINE ---------------- */ .timeline{ max-width:760px; margin:0 auto; position:relative; padding-left: 34px; } .timeline::before{ content:''; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background: var(--rose); opacity:.4; } .timeline-step{ position:relative; padding-bottom: 34px; } .timeline-step:last-child{ padding-bottom:0; } .timeline-step::before{ content:''; position:absolute; left:-34px; top:6px; width:13px; height:13px; border-radius:50%; background: var(--rose); border: 3px solid var(--sand); box-shadow:0 0 0 1px var(--rose); } .timeline-step h4{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; color: var(--mocha); } .timeline-step p{ margin:0; color: var(--ink); opacity:.82; line-height:1.6; } .timeline-step .step-no{ font-family:'Courier Prime',monospace; color: var(--sage-soft); font-size:.78rem; letter-spacing:.1em; } /* ---------------- RATES ---------------- */ .rate-table{ width:100%; border-collapse:collapse; max-width:720px; margin:0 auto; } .rate-table tr{ border-bottom:1px solid rgba(122,88,56,.22); } .rate-table td{ padding: 18px 8px; font-size:1.02rem; } .rate-table td:first-child{ color: var(--mocha); letter-spacing:.05em; text-transform:uppercase; font-size:.92rem; } .rate-table td:last-child{ text-align:right; font-family:'Playfair Display',serif; font-size:1.5rem; color: var(--sage); } .rate-note{ text-align:center; max-width:560px; margin: 30px auto 0; color: var(--sage-soft); font-size:.92rem; } .demo-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px; text-align:center; margin-top:48px; } .demo-grid .icon{ font-size:1.6rem; margin-bottom:8px; } .demo-grid .label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--mocha); } @media (max-width:700px){ .demo-grid{ grid-template-columns:repeat(2,1fr); } } /* ---------------- BRAND LOGO CIRCLES ---------------- */ .brand-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:22px; max-width: 880px; margin: 0 auto; } .brand-circle{ aspect-ratio:1/1; border-radius:50%; overflow:hidden; box-shadow:0 12px 26px -14px rgba(0,0,0,.35); } .brand-circle img{ width:100%; height:100%; object-fit:cover; } .brand-circle.placeholder{ display:flex; align-items:center; justify-content:center; text-align:center; background:#fff; color: var(--mocha); font-family:'Playfair Display',serif; font-size:.85rem; letter-spacing:.05em; padding:10px; } /* ---------------- CONTACT ---------------- */ .contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; } .contact-photo{ border-radius:4px; overflow:hidden; box-shadow:0 26px 55px -22px rgba(0,0,0,.4); } .contact-photo img{ width:100%; } .contact-methods{ list-style:none; margin: 26px 0; padding:0; } .contact-methods li{ padding:14px 0; border-bottom:1px solid rgba(122,88,56,.2); display:flex; align-items:center; gap:14px; } .contact-methods svg{ width:20px; height:20px; fill: var(--sage); flex-shrink:0; } .contact-links{ display:flex; flex-direction:column; gap:14px; margin:26px 0; } .contact-link{ display:flex; align-items:center; gap:14px; text-decoration:none; font-size:1.05rem; letter-spacing:.02em; color:var(--mocha); } .contact-link svg{ width:20px; height:20px; fill:var(--sage); flex-shrink:0; } .contact-link:hover{ color:var(--ink); } .contact-methods a{ font-size:1.05rem; letter-spacing:.02em; } .contact-form{ margin-top:24px; display:flex; flex-direction:column; gap:16px; position:relative; } .contact-form .form-row{ display:flex; flex-direction:column; gap:6px; } .contact-form label{ font-family:'Jost', sans-serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mocha); } .contact-form input, .contact-form select, .contact-form textarea{ font-family:'Jost', sans-serif; font-size:.95rem; color:var(--ink); background:#fff; border:1px solid rgba(122,88,56,.3); border-radius:var(--radius); padding:11px 13px; width:100%; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color:var(--sage); } .contact-form textarea{ resize:vertical; min-height:96px; } .contact-form .form-checks{ display:flex; flex-wrap:wrap; gap:10px 20px; } .contact-form .form-check{ display:flex; align-items:center; gap:8px; font-family:'Jost', sans-serif; font-size:.88rem; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ink); cursor:pointer; } .contact-form .form-check input[type="checkbox"]{ width:16px; height:16px; margin:0; accent-color: var(--sage); cursor:pointer; } .contact-form .form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .contact-form-submit{ align-self:flex-start; margin-top:4px; } .contact-form-submit:disabled{ opacity:.6; cursor:default; } .contact-form-error{ display:none; color:#a33; font-size:.85rem; margin:8px 0 0; } .contact-form-done{ margin-top:24px; } @media (max-width: 900px){ .contact-layout{ grid-template-columns:1fr; } .contact-photo{ order:-1; max-width:360px; margin:0 auto; } } /* ---------------- CTA BAND ---------------- */ .cta-band{ background: var(--ink); color:#f2ede3; text-align:center; padding: 70px 0; } .cta-band h2{ color:#f2ede3; } .cta-band .script{ color: var(--rose-soft); } .cta-band p{ color:#d8cdbd; max-width:480px; margin:14px auto 26px; } .cta-band .btn{ border-color:#cbb59a; color:#f2ede3; } .cta-band .btn:hover{ background:#cbb59a; color:var(--ink); } /* ---------------- FOOTER ---------------- */ footer{ background: var(--ink); color:#c9c1b4; padding: 28px 0; } footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.78rem; letter-spacing:.05em; } footer .foot-social{ display:flex; gap:18px; } footer .foot-social svg{ width:18px; height:18px; fill:#c9c1b4; } footer .foot-social a:hover svg{ fill:#fff; } footer .wrap.foot-credit{ justify-content:center; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1); font-size:.72rem; } footer .foot-credit a{ display:inline-flex; align-items:center; gap:6px; color:#c9c1b4; text-decoration:none; } footer .foot-credit a:hover{ color:#fff; } footer .foot-credit-logo{ height:13px; width:auto; display:inline-block; vertical-align:middle; opacity:.85; transition:opacity .2s ease; } footer .foot-credit a:hover .foot-credit-logo{ opacity:1; } /* ---------------- PAGE HERO (inner pages) ---------------- */ .page-hero{ padding: 56px 0 20px; text-align:center; } .page-hero .eyebrow{ display:block; margin-bottom:10px; } .page-hero h1{ font-size: clamp(2.2rem,5vw,3.4rem); } /* ---------------- SCROLL REVEAL (Home) ---------------- */ .js .reveal, .js .reveal-img{ opacity:0; transform:translateY(30px); transition:opacity 1.1s cubic-bezier(.16,.8,.24,1), transform 1.1s cubic-bezier(.16,.8,.24,1); } .js .reveal-img{ transform:translateY(30px) scale(1.035); } .js .reveal.is-visible, .js .reveal-img.is-visible{ opacity:1; transform:translateY(0) scale(1); } .js .reveal.d1{ transition-delay:.14s; } .js .reveal.d2{ transition-delay:.26s; } .js .reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .75s ease, transform .75s ease; } .js .reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); } .js .reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; } .js .reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.15s; } .js .reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.25s; } .js .reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.35s; } .js .reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.45s; } .js .reveal-stagger.is-visible > *:nth-child(6){ transition-delay:.55s; } @media (prefers-reduced-motion: reduce){ .js .reveal, .js .reveal-img, .js .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ============================================================ MOBILE OVERRIDES — 375px / 390px / 414px ============================================================ */ @media (max-width: 600px){ /* Tighter side padding on small phones */ .wrap{ padding: 0 16px; } /* Hero */ .hero{ padding: 36px 0 52px; } .hero .wrap{ gap: 24px; } .hero-visual{ max-width: 210px; margin: 0 auto 8px; } .hero-title{ font-size: 2.6rem; line-height:1; } .hero-title strong{ margin-top:2px; } .hero-copy .script{ font-size: 1.9rem; margin-bottom:-4px; } .hero-name{ font-size: 1.1rem; letter-spacing:.2em; padding:2px 0; margin: 14px 0 18px; } .hero-actions{ flex-direction: column; gap: 10px; } .hero-actions .btn{ width: 100%; justify-content: center; } /* Trusted strip */ .trusted-strip{ margin-top: 36px; padding-top: 20px; } .logo-track{ gap: 40px; animation-duration: 30s; } .belt-logo{ height:26px; } .belt-logo.belt-logo-tile{ height:36px; } /* Section spacing */ .section{ padding: 48px 0; } .cta-band{ padding: 48px 0; } .cta-band p{ font-size: .92rem; } .cta-band .btn{ display: block; width: 100%; max-width: 280px; margin: 0 auto; } /* Bio visual */ .bio{ gap: 28px; } .bio-visual{ max-width:260px; margin: 0 auto; } .bio-list li{ font-size: .95rem; padding: 8px 0 8px 18px; } blockquote.pull{ font-size: .95rem; } /* Stats */ .stat-row{ gap: 14px; margin: 20px 0; } .stat-row .num{ font-size: 1.9rem; } .stat-row .label{ font-size: .68rem; } /* Services */ .service-list{ grid-template-columns: 1fr; } .service-list li{ font-size: .92rem; } .device-stack{ min-height: 220px; } .service-notes{ padding: 16px 18px; } .service-notes ul{ font-size: .88rem; } /* Rate table — make it work on narrow screens */ .rate-table{ font-size: .9rem; } .rate-table td{ padding: 12px 4px; } .rate-table td:first-child{ font-size: .84rem; } .rate-table td:last-child{ font-size: 1.2rem; } /* Demo grid */ .demo-grid{ grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; } /* Brand grid — 3 per row on mobile */ .brand-grid{ grid-template-columns: repeat(3,1fr); gap: 12px; } /* Page hero */ .page-hero{ padding: 36px 0 12px; } .page-hero h1{ font-size: 2rem; } /* Contact */ .contact-photo{ order:-1; max-width: 260px; margin: 0 auto; } .contact-methods a{ font-size: .92rem; } .contact-methods li{ gap: 10px; padding: 11px 0; } .hero-actions.contact-actions{ flex-direction: column; } .hero-actions.contact-actions .btn{ width: 100%; justify-content: center; } /* Footer */ footer .wrap{ flex-direction: column; align-items: center; text-align: center; gap: 14px; } /* Timeline */ .timeline{ padding-left: 22px; } .timeline-step{ padding-bottom: 26px; } .timeline-step h4{ font-size: 1rem; } /* Script font scale */ .script{ font-size: 2rem; } .section-head h2{ font-size: 1.8rem; } }