/* ========================================================== STRONA WIZYTÓWKOWA — website.css Premium design-studio page for business card websites. Class prefix: ws- (website) 1. SHARED / 2. HERO / 3. PROBLEMS / 4. ANATOMY 5. DELIVERABLES / 6. PROCESS / 7. TECH / 8. PORTFOLIO 9. FAQ / 10. CTA / 11. RESPONSIVE / 12. REDUCED MOTION ========================================================== */ /* ── 0. PAGE-SPECIFIC ACCENT COLORS ───────────────────────── */ /* Each page type sets data-page on to get a unique accent */ body[data-page="firmowa"] { --ws-page: #2563EB; --ws-page-glow: rgba(37,99,235,0.18); --ws-page-soft: rgba(37,99,235,0.08); } body[data-page="landing"] { --ws-page: #F97316; --ws-page-glow: rgba(249,115,22,0.18); --ws-page-soft: rgba(249,115,22,0.08); } body[data-page="ecommerce"] { --ws-page: #10B981; --ws-page-glow: rgba(16,185,129,0.18); --ws-page-soft: rgba(16,185,129,0.08); } body[data-page="portfolio"] { --ws-page: #8B5CF6; --ws-page-glow: rgba(139,92,246,0.18); --ws-page-soft: rgba(139,92,246,0.08); } body[data-page="blog"] { --ws-page: #14B8A6; --ws-page-glow: rgba(20,184,166,0.18); --ws-page-soft: rgba(20,184,166,0.08); } body[data-page="kursowa"] { --ws-page: #F59E0B; --ws-page-glow: rgba(245,158,11,0.18); --ws-page-soft: rgba(245,158,11,0.08); } body[data-page="dashboard"] { --ws-page: #06B6D4; --ws-page-glow: rgba(6,182,212,0.18); --ws-page-soft: rgba(6,182,212,0.08); } body[data-page="aplikacja"] { --ws-page: #6366F1; --ws-page-glow: rgba(99,102,241,0.18); --ws-page-soft: rgba(99,102,241,0.08); } body[data-page="indywidualny"] { --ws-page: #F43F5E; --ws-page-glow: rgba(244,63,94,0.18); --ws-page-soft: rgba(244,63,94,0.08); } /* Fallback: strona-wizytowkowa (default blue) */ body:not([data-page]) { --ws-page: var(--c-accent); --ws-page-glow: var(--c-accent-glow); --ws-page-soft: rgba(59, 130, 246, 0.08); } /* ── 1. SHARED ───────────────────────────────────────────── */ .ws-section { padding-block: var(--section-py); position: relative; } .ws-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-page); background: var(--ws-page-soft); border: 1px solid var(--ws-page-glow); border-radius: 99px; margin-bottom: 20px; width: fit-content; } .ws-section-header { text-align: center; max-width: 680px; margin-inline: auto; margin-bottom: clamp(48px,6vw,72px); } .ws-section-title { font-size: var(--text-h2); margin-block: 12px 16px; } .ws-section-desc { font-size: var(--text-body); line-height: 1.7; color: var(--c-muted); } /* Staggered reveal children */ .reveal[data-reveal="stagger"] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal[data-reveal="stagger"].reveal--visible > * { opacity: 1; transform: translateY(0); } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(1) { transition-delay: 0s; } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(2) { transition-delay: .08s; } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(3) { transition-delay: .16s; } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(4) { transition-delay: .24s; } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(5) { transition-delay: .32s; } .reveal[data-reveal="stagger"].reveal--visible > *:nth-child(6) { transition-delay: .4s; } /* ── 2. HERO ─────────────────────────────────────────────── */ .ws-hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: calc(var(--header-h) + 40px); } /* CSS grid background */ .ws-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(96,165,250,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 70%); pointer-events: none; } /* Floating gradient orbs */ .ws-hero__orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; will-change: transform; } .ws-hero__orb--1 { width: 500px; height: 500px; background: radial-gradient(circle, var(--ws-page-glow), transparent 70%); top: -10%; right: 5%; animation: ws-orb1 18s ease-in-out infinite alternate; } .ws-hero__orb--2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.12), transparent 70%); bottom: 5%; left: -5%; animation: ws-orb2 22s ease-in-out infinite alternate; } .ws-hero__orb--3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(16,185,129,0.08), transparent 70%); top: 30%; left: 30%; animation: ws-orb3 15s ease-in-out infinite alternate; } @keyframes ws-orb1 { to { transform: translate(-40px,30px) scale(1.1); } } @keyframes ws-orb2 { to { transform: translate(30px,-40px) scale(1.08); } } @keyframes ws-orb3 { to { transform: translate(-20px,-25px) scale(.92); } } .ws-hero > .container { position: relative; z-index: 2; width: 100%; } .ws-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px); align-items: center; padding-block: clamp(40px,6vw,80px); } /* Hero text */ .ws-hero__content { display: flex; flex-direction: column; } .ws-hero__title { font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--c-text); margin-bottom: 20px; } .ws-hero__title-gradient { background: linear-gradient(135deg, var(--ws-page), var(--c-violet-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ws-hero__desc { font-size: clamp(1rem, 1.1vw + .2rem, 1.125rem); color: var(--c-muted); line-height: 1.7; max-width: 480px; margin-bottom: 32px; } .ws-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } .ws-hero__visual { display: flex; justify-content: center; align-items: center; } /* ── Multi-device mockup ── */ .ws-mockup { position: relative; width: 100%; max-width: 480px; } .ws-mockup__laptop { background: var(--c-surface); border: 1px solid var(--c-border-hover); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 10px 10px 0; box-shadow: 0 0 0 1px rgba(96,165,250,0.08), 0 20px 60px rgba(0,0,0,0.4), 0 0 80px var(--ws-page-glow); position: relative; } .ws-mockup__laptop::before { /* camera notch */ content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: var(--c-surface-2); border-radius: 50%; border: 1px solid var(--c-border); } .ws-mockup__screen { background: var(--c-bg); border-radius: var(--r-sm) var(--r-sm) 0 0; aspect-ratio: 16/10; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-bottom: none; } .ws-mockup__screen-nav { height: 28px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); display: flex; align-items: center; padding: 0 12px; gap: 8px; flex-shrink: 0; } .ws-mockup__screen-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-subtle); } .ws-mockup__screen-nav-dot:nth-child(1) { background: #EF4444; } .ws-mockup__screen-nav-dot:nth-child(2) { background: #F59E0B; } .ws-mockup__screen-nav-dot:nth-child(3) { background: var(--c-success); } .ws-mockup__screen-nav-bar { flex: 1; height: 8px; background: var(--c-border); border-radius: 4px; margin-left: auto; max-width: 120px; } /* Screen: fake hero block */ .ws-mockup__screen-hero { padding: 14px 16px; flex-shrink: 0; } .ws-mockup__screen-hero-title { height: 12px; width: 60%; border-radius: 4px; margin-bottom: 8px; opacity: .7; background: linear-gradient(90deg, var(--ws-page), var(--c-violet)); } .ws-mockup__screen-hero-sub, .ws-mockup__screen-hero-sub2 { height: 8px; background: var(--c-border); border-radius: 4px; margin-bottom: 6px; } .ws-mockup__screen-hero-sub { width: 80%; } .ws-mockup__screen-hero-sub2 { width: 50%; margin-bottom: 12px; } .ws-mockup__screen-hero-btn { height: 14px; width: 70px; background: var(--c-accent); border-radius: 4px; opacity: .6; } /* Screen: fake cards grid */ .ws-mockup__screen-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 0 16px 12px; flex: 1; } .ws-mockup__screen-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .ws-mockup__screen-card-img { height: 20px; background: var(--c-border-hover); border-radius: 3px; opacity: .4; } /* ---- Animated mini charts (dashboard) ---- */ [data-page="dashboard"] .ws-mockup__screen-card-chart { display: flex; align-items: flex-end; gap: 3px; height: 28px; padding: 2px 0; } [data-page="dashboard"] .ws-mockup__bar { flex: 1; height: var(--h, 50%); background: var(--c-accent); border-radius: 2px 2px 0 0; opacity: 0.7; animation: dashboardBarPulse 2.4s ease-in-out infinite alternate; transform-origin: bottom; } [data-page="dashboard"] .ws-mockup__bar:nth-child(1) { animation-delay: 0s; } [data-page="dashboard"] .ws-mockup__bar:nth-child(2) { animation-delay: 0.3s; } [data-page="dashboard"] .ws-mockup__bar:nth-child(3) { animation-delay: 0.6s; } [data-page="dashboard"] .ws-mockup__bar:nth-child(4) { animation-delay: 0.9s; } [data-page="dashboard"] .ws-mockup__bar:nth-child(5) { animation-delay: 1.2s; } @keyframes dashboardBarPulse { 0% { transform: scaleY(1); opacity: 0.5; } 50% { transform: scaleY(1.25); opacity: 0.85; } 100% { transform: scaleY(0.8); opacity: 0.6; } } /* Line chart */ [data-page="dashboard"] .ws-mockup__screen-card-chart--line { display: flex; align-items: stretch; height: 28px; } [data-page="dashboard"] .ws-mockup__line-svg { width: 100%; height: 100%; color: var(--c-accent); animation: dashboardLineScroll 4s linear infinite; } @keyframes dashboardLineScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-12px); } } .ws-mockup__screen-card-line { height: 5px; background: var(--c-border); border-radius: 3px; } .ws-mockup__screen-card-line:last-child { width: 60%; } /* Screen: fake footer */ .ws-mockup__screen-footer { height: 20px; background: var(--c-surface); border-top: 1px solid var(--c-border); flex-shrink: 0; } /* Laptop base */ .ws-mockup__laptop-base { height: 12px; background: linear-gradient(to bottom, var(--c-surface-2), var(--c-surface)); border: 1px solid var(--c-border); border-top: none; border-radius: 0 0 6px 6px; margin: 0 -2px; } /* Phone (overlapping) */ .ws-mockup__phone { position: absolute; bottom: 24px; left: -20px; width: 110px; background: var(--c-surface); border: 2px solid var(--c-border-hover); border-radius: 16px; padding: 8px 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 40px var(--ws-page-glow); animation: ws-phone-float 4s ease-in-out infinite; z-index: 3; } .ws-mockup__phone::before { /* notch */ content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; background: var(--c-bg); border-radius: 4px; } .ws-mockup__phone-screen { background: var(--c-bg); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; aspect-ratio: 9/16; max-height: 180px; } .ws-mockup__phone-screen-bar { height: 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); } .ws-mockup__phone-screen-hero { padding: 10px 6px; flex-shrink: 0; } .ws-mockup__phone-screen-hero-title { height: 6px; width: 70%; border-radius: 3px; margin-bottom: 6px; opacity: .7; background: linear-gradient(90deg, var(--ws-page), var(--c-violet)); } .ws-mockup__phone-screen-hero-sub, .ws-mockup__phone-screen-hero-sub2 { height: 4px; background: var(--c-border); border-radius: 3px; margin-bottom: 4px; } .ws-mockup__phone-screen-hero-sub { width: 90%; } .ws-mockup__phone-screen-hero-sub2 { width: 60%; margin-bottom: 8px; } .ws-mockup__phone-screen-cards { display: flex; flex-direction: column; gap: 4px; padding: 0 6px 8px; flex: 1; } .ws-mockup__phone-screen-card { height: 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; } @keyframes ws-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ── 3. PROBLEMS ─────────────────────────────────────────── */ .ws-problems { background: var(--c-surface); position: relative; } .ws-problems__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; } .ws-problems__card { padding: var(--card-p); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); display: flex; flex-direction: column; } .ws-problems__card:hover { border-color: var(--c-border-hover); box-shadow: var(--shadow-hover); transform: translateY(-4px); } .ws-problems__card-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-md); margin-bottom: 20px; flex-shrink: 0; } .ws-problems__card-icon--red { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #F87171; } .ws-problems__card-icon--amber { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); color: #FBBF24; } .ws-problems__card-icon--blue { background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.2); color: var(--c-accent-light); } .ws-problems__card-icon--violet{ background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2); color: var(--c-violet-light); } .ws-problems__card-icon--green { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); color: #34D399; } .ws-problems__card-icon--rose { background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.2); color: #FB7185; } .ws-problems__card-title { font-size: var(--text-h3); font-weight: 700; color: var(--c-text); margin-bottom: 10px; line-height: 1.3; } .ws-problems__card-desc { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.65; } /* ── 4. ANATOMY ──────────────────────────────────────────── */ .ws-anatomy__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px,5vw,72px); align-items: start; } .ws-anatomy__mockup { position: sticky; top: calc(var(--header-h) + 32px); } /* Browser frame */ .ws-anatomy__browser { background: var(--c-surface); border: 1px solid var(--c-border-hover); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } .ws-anatomy__browser-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); } .ws-anatomy__browser-dots { display: flex; gap: 5px; } .ws-anatomy__browser-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-subtle); } .ws-anatomy__browser-dot:nth-child(1) { background: #EF4444; } .ws-anatomy__browser-dot:nth-child(2) { background: #F59E0B; } .ws-anatomy__browser-dot:nth-child(3) { background: var(--c-success); } .ws-anatomy__browser-url { flex: 1; height: 22px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px; margin-left: 8px; } /* Interactive zones */ .ws-anatomy__screen { background: var(--c-bg); padding: 12px; display: flex; flex-direction: column; gap: 6px; } .ws-anatomy__zone { border: 1.5px dashed var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; opacity: .6; transition: border-color .35s cubic-bezier(.4,0,.2,1), background .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1); will-change: transform; } .ws-anatomy__zone:hover { border-style: solid; border-color: var(--ws-page); background: var(--ws-page-soft); box-shadow: 0 0 28px var(--ws-page-glow); opacity: 1; transform: scale(1.025) translateX(4px); } .ws-anatomy__zone--active { border-style: solid; border-color: var(--ws-page); background: var(--ws-page-soft); box-shadow: 0 0 28px var(--ws-page-glow); opacity: 1; transform: scale(1.025) translateX(4px); } .ws-anatomy__zone-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 600; color: var(--ws-page); text-transform: uppercase; letter-spacing: .08em; pointer-events: none; transition: color .3s ease, letter-spacing .3s ease; } .ws-anatomy__zone:hover .ws-anatomy__zone-label, .ws-anatomy__zone--active .ws-anatomy__zone-label { letter-spacing: .12em; } .ws-anatomy__zone--hero { min-height: 64px; } .ws-anatomy__zone--cta { min-height: 36px; } .ws-anatomy__zone--opinie { min-height: 48px; } .ws-anatomy__zone--oferta { min-height: 56px; } .ws-anatomy__zone--faq { min-height: 44px; } .ws-anatomy__zone--form { min-height: 40px; } .ws-anatomy__zone--footer { min-height: 28px; } .ws-anatomy__zone-inner { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; pointer-events: none; } .ws-anatomy__zone-line { height: 4px; background: var(--c-border); border-radius: 2px; transition: background .3s ease, width .4s cubic-bezier(.4,0,.2,1); } .ws-anatomy__zone:hover .ws-anatomy__zone-line, .ws-anatomy__zone--active .ws-anatomy__zone-line { background: color-mix(in srgb, var(--ws-page) 30%, transparent); } .ws-anatomy__zone-line:nth-child(1) { width: 60%; } .ws-anatomy__zone-line:nth-child(2) { width: 40%; } .ws-anatomy__zone:hover .ws-anatomy__zone-line:nth-child(1), .ws-anatomy__zone--active .ws-anatomy__zone-line:nth-child(1) { width: 75%; } .ws-anatomy__zone:hover .ws-anatomy__zone-line:nth-child(2), .ws-anatomy__zone--active .ws-anatomy__zone-line:nth-child(2) { width: 55%; } /* Explanation cards */ .ws-anatomy__explanations { display: flex; flex-direction: column; gap: 12px; } .ws-anatomy__explain-card { padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); cursor: pointer; transition: border-color .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), background .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.34,1.56,.64,1); will-change: transform; } .ws-anatomy__explain-card:hover { border-color: var(--ws-page); background: var(--ws-page-soft); box-shadow: 0 4px 24px var(--ws-page-glow); transform: scale(1.02) translateX(4px); } .ws-anatomy__explain-card--active { border-color: var(--ws-page); background: var(--ws-page-soft); box-shadow: 0 4px 24px var(--ws-page-glow); transform: scale(1.02) translateX(4px); } .ws-anatomy__explain-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ws-anatomy__explain-num { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-family: var(--font-mono); font-size: .65rem; font-weight: 700; color: var(--ws-page); background: var(--ws-page-soft); border-radius: 6px; flex-shrink: 0; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease; } .ws-anatomy__explain-card:hover .ws-anatomy__explain-num, .ws-anatomy__explain-card--active .ws-anatomy__explain-num { transform: scale(1.15); } .ws-anatomy__explain-name { font-size: var(--text-sm); font-weight: 700; color: var(--c-text); } .ws-anatomy__explain-why { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.6; margin-bottom: 6px; } .ws-anatomy__explain-stat { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ws-page); font-weight: 500; transition: color .3s ease; } /* ── 5. DELIVERABLES (Bento grid) ────────────────────────── */ .ws-deliverables__grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: minmax(160px,auto); gap: 16px; } /* Symmetric bento: row1 = 2+2, row2 = 1+1+1+1, row3 = 2+2, row4 = 1+1 */ .ws-deliverables__item:nth-child(1), .ws-deliverables__item:nth-child(2), .ws-deliverables__item:nth-child(7), .ws-deliverables__item:nth-child(8) { grid-column: span 2; } /* Last row (items 9,10) — center the remaining 2 items */ .ws-deliverables__item:nth-child(9) { grid-column: 2 / span 1; } .ws-deliverables__item:nth-child(10) { grid-column: 3 / span 1; } .ws-deliverables__item { padding: var(--card-p); background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .ws-deliverables__item:hover { border-color: var(--c-border-hover); box-shadow: var(--shadow-hover); transform: translateY(-4px); } .ws-deliverables__item-icon { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; background: linear-gradient(135deg, var(--ws-page-soft), rgba(139,92,246,0.1)); border: 1px solid var(--ws-page-glow); color: var(--ws-page); } .ws-deliverables__item-title { font-size: var(--text-h3); font-weight: 700; color: var(--c-text); margin-bottom: 8px; } .ws-deliverables__item-desc { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.65; flex: 1; } /* ── 6. PROCESS (Vertical timeline) ──────────────────────── */ .ws-process__timeline { position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; } .ws-process__line { position: absolute; left: 32px; top: 0; bottom: 0; width: 2px; background: var(--c-border); transform: translateX(-50%); z-index: 0; } .ws-process__line-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(to bottom, var(--ws-page), var(--c-violet)); border-radius: 2px; transition: height 0.6s ease; box-shadow: 0 0 12px var(--ws-page-glow); } .ws-process__step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; position: relative; z-index: 1; padding: 20px 0; } .ws-process__step-circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-surface); border: 2px solid var(--c-border); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--c-muted); flex-shrink: 0; transition: border-color var(--t-base), color var(--t-base), box-shadow var(--t-base), background var(--t-base); } .ws-process__step--visible .ws-process__step-circle, .ws-process__step:hover .ws-process__step-circle { border-color: var(--ws-page); color: var(--ws-page); background: var(--ws-page-soft); box-shadow: 0 0 20px var(--ws-page-glow); } .ws-process__step-content { padding: 14px 20px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); transition: border-color var(--t-base), box-shadow var(--t-base); } .ws-process__step--visible .ws-process__step-content, .ws-process__step:hover .ws-process__step-content { border-color: var(--c-border-hover); box-shadow: 0 4px 24px rgba(0,0,0,0.2); } .ws-process__step-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .ws-process__step-icon { color: var(--ws-page); flex-shrink: 0; } .ws-process__step-title { font-size: clamp(.95rem, 1vw + .2rem, 1.1rem); font-weight: 700; color: var(--c-text); } .ws-process__step-desc { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.6; } /* ── 7. TECH ─────────────────────────────────────────────── */ .ws-tech__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .ws-tech__tile { position: relative; padding: 28px 20px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-lg); text-align: center; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .ws-tech__tile:hover { border-color: var(--ws-page); box-shadow: 0 0 28px var(--ws-page-glow); transform: translateY(-3px); } .ws-tech__tile::after { /* gradient border glow */ content: ''; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, var(--ws-page-glow), rgba(139,92,246,0.15)); z-index: -1; opacity: 0; transition: opacity var(--t-base); } .ws-tech__tile:hover::after { opacity: 1; } .ws-tech__tile-name { font-family: var(--font-display); font-size: clamp(1.1rem, 1.2vw + .3rem, 1.4rem); font-weight: 700; color: var(--c-text); margin-bottom: 8px; } .ws-tech__tile-desc { font-size: var(--text-xs); color: var(--c-muted); line-height: 1.5; } /* ── 8. PORTFOLIO ────────────────────────────────────────── */ .ws-portfolio__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .ws-portfolio__card { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base); } .ws-portfolio__card:hover { border-color: var(--c-border-hover); box-shadow: var(--shadow-hover); transform: translateY(-5px); } .ws-portfolio__card-media { position: relative; aspect-ratio: 16/9; overflow: hidden; } .ws-portfolio__card-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .ws-portfolio__card:hover .ws-portfolio__card-img { transform: scale(1.05); } /* Gradient placeholders */ .ws-portfolio__card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-subtle); } .ws-portfolio__card-placeholder--1 { background: linear-gradient(135deg, var(--c-surface), rgba(59,130,246,0.08), var(--c-surface-2)); } .ws-portfolio__card-placeholder--2 { background: linear-gradient(135deg, var(--c-surface-2), rgba(139,92,246,0.08), var(--c-surface)); } .ws-portfolio__card-placeholder--3 { background: linear-gradient(135deg, var(--c-surface), rgba(16,185,129,0.08), var(--c-surface-2)); } /* Hover overlay */ .ws-portfolio__card-overlay { position: absolute; inset: 0; background: rgba(6,11,20,0.75); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; opacity: 0; transition: opacity var(--t-base); } .ws-portfolio__card:hover .ws-portfolio__card-overlay { opacity: 1; } .ws-portfolio__card-overlay-title { font-size: var(--text-h3); font-weight: 700; color: var(--c-text); } .ws-portfolio__card-body { padding: var(--card-p); } .ws-portfolio__card-category { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; background: var(--ws-page-soft); border: 1px solid var(--ws-page-glow); border-radius: 99px; color: var(--ws-page); margin-bottom: 12px; } .ws-portfolio__card-title { font-size: var(--text-h3); font-weight: 700; color: var(--c-text); margin-bottom: 8px; } .ws-portfolio__card-desc { font-size: var(--text-sm); color: var(--c-muted); line-height: 1.65; } .ws-portfolio__card-cta { margin-top: 16px; } /* ── 9. FAQ (Accordion) ──────────────────────────────────── */ .ws-faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; } .ws-faq__item { border-bottom: 1px solid var(--c-border); } .ws-faq__item:first-child { border-top: 1px solid var(--c-border); } .ws-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-display); font-size: clamp(.95rem, 1vw + .2rem, 1.0625rem); font-weight: 600; color: var(--c-text); line-height: 1.4; transition: color var(--t-fast); } .ws-faq__question:hover { color: var(--c-accent-light); } .ws-faq__chevron { flex-shrink: 0; width: 20px; height: 20px; color: var(--c-muted); transition: transform 0.3s ease, color var(--t-fast); } .ws-faq__item--open .ws-faq__chevron { transform: rotate(180deg); color: var(--c-accent-light); } .ws-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .ws-faq__item--open .ws-faq__answer { max-height: 400px; } .ws-faq__answer-inner { padding-bottom: 22px; font-size: var(--text-body); color: var(--c-muted); line-height: 1.7; } /* ── 10. CTA ─────────────────────────────────────────────── */ .ws-cta { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 50% at 30% 50%, var(--ws-page-soft), transparent), radial-gradient(ellipse 60% 50% at 70% 50%, rgba(139,92,246,0.08), transparent), var(--c-bg); border-block: 1px solid var(--c-border); } .ws-cta::before { /* rotating shimmer */ content: ''; position: absolute; inset: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--ws-page-soft) 90deg, transparent 180deg, rgba(139,92,246,0.03) 270deg, transparent 360deg); animation: ws-cta-shimmer 20s linear infinite; pointer-events: none; } @keyframes ws-cta-shimmer { to { transform: rotate(360deg); } } .ws-cta__inner { position: relative; z-index: 1; text-align: center; max-width: 600px; margin: 0 auto; padding-block: clamp(60px,8vw,100px); } .ws-cta__title { font-size: var(--text-h2); font-weight: 700; color: var(--c-text); margin-bottom: 16px; } .ws-cta__desc { font-size: var(--text-body); color: var(--c-muted); line-height: 1.7; margin-bottom: 36px; } .ws-cta .btn--primary { padding: 16px 36px; font-size: 1rem; } .ws-cta .btn--whatsapp { padding: 16px 36px; font-size: 1rem; } /* ── 11. RESPONSIVE ──────────────────────────────────────── */ /* Tablet (1024px) */ @media (max-width: 1024px) { .ws-hero__inner { grid-template-columns: 1fr; text-align: center; } .ws-hero__content { align-items: center; } .ws-hero__desc { max-width: 560px; } .ws-hero__actions { justify-content: center; } .ws-hero__visual { margin-top: 40px; } .ws-mockup { max-width: 380px; } .ws-problems__grid { grid-template-columns: repeat(2,1fr); } .ws-anatomy__inner { grid-template-columns: 1fr; } .ws-anatomy__mockup { position: static; } .ws-anatomy__explanations { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; } .ws-deliverables__grid { grid-template-columns: repeat(2,1fr); } .ws-deliverables__item:nth-child(n) { grid-column: span 1; } .ws-tech__grid { grid-template-columns: repeat(3,1fr); } .ws-portfolio__grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; } } /* Small tablet (768px) */ @media (max-width: 768px) { .ws-hero__visual { display: none; } .ws-problems__grid { grid-template-columns: 1fr; } /* Anatomy: compact stacked — mockup becomes compact zone-chips, cards below */ .ws-anatomy__inner { grid-template-columns: 1fr; gap: 24px; } .ws-anatomy__mockup { position: static; max-width: 100%; } .ws-anatomy__browser { border-radius: var(--r-md); } .ws-anatomy__browser-bar { padding: 6px 10px; } .ws-anatomy__browser-dots { gap: 4px; } .ws-anatomy__browser-dot { width: 6px; height: 6px; } .ws-anatomy__browser-url { height: 16px; } .ws-anatomy__screen { padding: 8px; gap: 4px; } /* Make zones compact chips on mobile */ .ws-anatomy__zone { padding: 6px 10px !important; min-height: auto !important; display: flex; align-items: center; gap: 8px; } .ws-anatomy__zone-inner { display: none; } .ws-anatomy__zone-label { font-size: .6rem; } /* Explanations: horizontal scroll on tablet */ .ws-anatomy__explanations { display: flex; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 10px; padding-bottom: 8px; scrollbar-width: none; } .ws-anatomy__explanations::-webkit-scrollbar { display: none; } .ws-anatomy__explain-card { min-width: 240px; flex-shrink: 0; scroll-snap-align: start; padding: 14px 16px; } .ws-anatomy__explain-why { display: none; } .ws-process__step { grid-template-columns: 48px 1fr; gap: 16px; } .ws-process__step-circle { width: 48px; height: 48px; font-size: var(--text-xs); } .ws-process__line { left: 24px; } .ws-deliverables__grid { grid-template-columns: 1fr; } .ws-tech__grid { grid-template-columns: repeat(2,1fr); } } /* Mobile (480px) */ @media (max-width: 480px) { .ws-hero__actions { flex-direction: column; width: 100%; } .ws-hero__actions .btn { justify-content: center; width: 100%; } /* Anatomy: even more compact on small phones */ .ws-anatomy__screen { gap: 3px; padding: 6px; } .ws-anatomy__zone { padding: 5px 8px !important; } .ws-anatomy__explain-card { min-width: 200px; padding: 12px 14px; } .ws-process__step { grid-template-columns: 40px 1fr; gap: 12px; } .ws-process__step-circle { width: 40px; height: 40px; font-size: .7rem; } .ws-process__step-content { padding: 14px 16px; } .ws-tech__tile { padding: 20px 14px; } .ws-cta .btn--primary { width: 100%; justify-content: center; } } /* ── 12. REDUCED MOTION ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ws-hero__orb, .ws-mockup__phone, .ws-cta::before { animation: none; } .reveal[data-reveal="stagger"] > * { transition-duration: 0.01ms; } } /* WS-CTA buttons row */ .ws-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; justify-content: center; margin-top: 8px; } .ws-cta__buttons .btn { display: flex; align-items: center; justify-content: center; } @media (max-width: 480px) { .ws-cta__buttons { flex-direction: column; width: 100%; } .ws-cta__buttons .btn { width: 100%; justify-content: center; } } /* WhatsApp styles — defined in style.css (loaded on all pages) */ /* ws-cta__buttons layout above */