/* ========================================================= CherryLaw — front-page.css CSS specyficzny dla strony głównej (one-pager). Ładowany warunkowo tylko na front-page (inc/enqueue.php). 1:1 z Claude Design (index.html ). ========================================================= */ /* Hero headline – delicate, italic, all burgundy */ .hero h1.hero-headline{ font-family: Arial, sans-serif; font-weight: 400; font-style: normal; font-size: clamp(40px, 5.6vw, 88px); letter-spacing: -0.015em; line-height: 1.05; color: var(--burgund); } .hero h1.hero-headline .second{ display:block; color: var(--burgund); font-style: normal; } .hero h1.hero-headline .ampersand{ color: var(--burgund); font-style: normal; } /* =================== HERO =================== */ .hero{ padding: 160px 0 110px; position: relative; overflow: visible; /* let the tree breathe past the section bounds */ background: #fff; } .hero::before{ /* very subtle dotted ground line */ content:""; position:absolute;left:0;right:0;bottom:0;height:1px; background: linear-gradient(90deg, transparent 0, var(--gray-line) 12%, var(--gray-line) 88%, transparent 100%); } .hero-grid{ display:grid; grid-template-columns: 1.1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; z-index: 2; } .hero-text{ position: relative; z-index: 3; } .hero-eyebrow-row{ display:flex; align-items:center; gap:18px; margin-bottom: 36px; color: var(--ink-3); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } .hero-eyebrow-row .dot{ width:6px;height:6px;border-radius:50%;background:var(--burgund); display:inline-block; animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.45;transform:scale(0.7);} } .hero h1{ font-size: clamp(54px, 8.4vw, 132px); color: var(--burgund); } .hero h1 .second{ display:block; color: var(--ink); } .hero h1 .ampersand{ font-style: italic; font-family: Arial, sans-serif; font-weight: 400; color: var(--burgund); } .hero-sub{ margin-top: 38px; font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-2); max-width: 580px; line-height: 1.6; } .hero-meta{ margin-top: 56px; display:flex; gap: 48px; flex-wrap:wrap; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .hero-meta div b{ display:block; color: var(--ink); font-family:"Arial Black",Arial; font-weight:900; font-size: 22px; letter-spacing:-0.01em; margin-bottom: 4px; text-transform: none; } /* ============================================================ Cherry tree — full, frameless, lightweight CSS-only animation ============================================================ */ .hero-tree{ position: absolute; right: clamp(-180px, -8vw, -40px); top: 40px; bottom: -260px; width: min(900px, 62vw); pointer-events: none; z-index: 1; overflow: visible; } .trunk-extend{ display: block; } .hero-tree svg{ width: 100%; height: 100%; overflow: visible; display:block; } /* UWAGA (sprawdzone pomiarem 06.08.2026): kuszące jest przeniesienie kołysania z grupy na element razem z will-change:transform „dla GPU". W A/B na Lighthouse to POGARSZA wynik ~3x (TBT 105 ms → 2 230 ms): promocja do własnej warstwy sprawia, że każdy z ~6 tys. rozkwitających kwiatów unieważnia i przerastrowuje CAŁĄ wielką warstwę, zamiast małego prostokąta. Zostawiamy animację na grupie. */ .tree-sway{ transform-origin: 50% 95%; animation: sway 9s ease-in-out infinite; } @keyframes sway{ 0%,100% { transform: rotate(-0.55deg) translateY(0); } 50% { transform: rotate(0.55deg) translateY(-2px); } } .tree-branch{ fill: none; stroke: var(--burgund); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: grow var(--gd, 1.4s) cubic-bezier(.55,.05,.25,1) forwards; animation-delay: var(--gd-start, 0s); } @keyframes grow{ to { stroke-dashoffset: 0; } } .blossom{ transform-box: fill-box; transform-origin: center; opacity: 0; animation: bloom .7s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--bd, 2.4s); } @keyframes bloom{ 0% { opacity:0; transform: scale(0); } 60% { opacity:1; transform: scale(1.15); } 100% { opacity:1; transform: scale(1); } } .leaf{ transform-box: fill-box; transform-origin: center; opacity: 0; animation: bloom .8s cubic-bezier(.34,1.56,.64,1) forwards; animation-delay: var(--bd, 2.4s); } .petal{ position: absolute; width: 9px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--pink-deep); opacity: 0; top: -20px; will-change: transform, opacity; animation: fall var(--fd, 11s) linear infinite; animation-delay: var(--fs, 0s); } .petal.alt{ background: var(--pink); width: 8px; height: 8px; } @keyframes fall{ 0% { opacity:0; transform: translate3d(0, 0, 0) rotate(0deg); } 8% { opacity: .9; } 50% { opacity: .9; transform: translate3d(-32px, 50vh, 0) rotate(220deg); } 90% { opacity: .6; } 100% { opacity: 0; transform: translate3d(20px, 100vh, 0) rotate(540deg); } } @media (prefers-reduced-motion: reduce){ .tree-sway, .petal{ animation: none; } .tree-branch{ stroke-dashoffset: 0; } .blossom, .leaf{ opacity: 1; transform: none; animation: none; } } /* =================== PHILOSOPHY =================== */ .philosophy{ background: var(--burgund); color: #f8eee9; padding: clamp(110px, 14vw, 200px) 0; position: relative; overflow:hidden; } .philosophy::after{ content:none; } .phil-grid{ display:grid; grid-template-columns: 1fr 1.4fr; gap: clamp(40px, 6vw, 96px); align-items: flex-start; } .philosophy .eyebrow{ color:#f0bcc2; } .philosophy h2{ font-size: clamp(40px, 5.6vw, 88px); color:#fff; margin-top: 22px; } .phil-body p{ font-size: clamp(17px, 1.35vw, 21px); color:#e9d8d6; line-height: 1.6; max-width: 56ch; } .phil-body p + p{ margin-top: 22px; } .phil-cta{ margin-top: 44px; display:inline-flex; align-items:center; gap:14px; color:#fff; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.5); padding: 8px 0; transition: gap .25s, border-color .25s; } .phil-cta:hover{ gap: 22px; border-color:#fff; } .phil-cta svg{width:18px;height:18px;} .phil-pull{ border-left: 2px solid rgba(248, 217, 224, 0.4); padding-left: 28px; margin-top: 60px; font-style: italic; color: #f8d9e0; font-size: 15px; max-width: 32ch; } .phil-pull b{ display:block; font-style: normal; font-family: "Arial Black", Arial; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-top: 12px; } /* =================== SERVICES =================== */ .services{ background: #fff; padding: clamp(110px, 14vw, 180px) 0; } .services-head{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; padding-bottom: 60px; border-bottom: 1px solid var(--gray-line); } .services-head h2{ font-size: clamp(40px, 5.4vw, 84px); color: var(--ink); margin-top: 22px; } .services-head .lede{ color: var(--ink-2); font-size: 17px; max-width: 46ch; padding-bottom: 12px; } .svc-row{ display:grid; grid-template-columns: 1fr 1.2fr auto; gap: 32px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--gray-line); position: relative; cursor: pointer; transition: padding .35s ease; } .svc-row::before{ content:""; position:absolute; left:-100vw; right:-100vw; top:0; bottom:0; background: var(--gray); opacity:0; transition: opacity .35s ease; z-index: -1; } .svc-row:hover{ padding-left: 12px; padding-right: 12px; } .svc-row:hover::before{ opacity: 1; } .svc-num{ font-family: "Arial Black", Arial; font-size: 18px; color: var(--burgund); letter-spacing: 0; } .svc-title{ font-family: "Arial Black", Arial; font-weight: 900; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; } .svc-desc{ color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 48ch; } .svc-arrow{ width:48px;height:48px; border:1px solid var(--gray-line); border-radius:50%; display:inline-flex;align-items:center;justify-content:center; color: var(--ink); transition: all .35s cubic-bezier(.7,0,.3,1); } .svc-row:hover .svc-arrow{ background: var(--burgund); color: #fff; border-color: var(--burgund); transform: rotate(-45deg); } .svc-arrow svg{width:16px;height:16px;} /* =================== PEOPLE =================== */ .people{ background: var(--pink); padding: clamp(110px, 14vw, 180px) 0; position: relative; overflow: hidden; } .people-grid{ display:grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 96px); align-items: center; } .people h2{ font-size: clamp(40px, 5.4vw, 84px); color: var(--burgund-ink); margin-top: 22px; } .people h2 .green{ color: var(--green-accent); font-style: italic; font-weight: 400; font-family: Arial, sans-serif; } .people p{ margin-top: 28px; font-size: clamp(16px, 1.2vw, 19px); color: #4a2a30; max-width: 44ch; line-height: 1.6; } .people-cta{ margin-top: 44px; display:inline-flex; align-items:center; gap:14px; color: var(--burgund); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--burgund); padding: 8px 0; transition: gap .25s; } .people-cta:hover{ gap: 22px; } .people-photo{ position: relative; aspect-ratio: 4/3; overflow:hidden; background: var(--gray); } .people-photo img{ width:100%; height:100%; object-fit: cover; display:block; filter: contrast(1.02) saturate(0.95); } .people-copy{ padding-top: 18px; font-family: Arial, sans-serif; font-size: clamp(16px, 1.2vw, 19px); color: var(--ink-2); line-height: 1.65; max-width: 56ch; } .people-copy p + p{ margin-top: 22px; } .people-copy-pull{ margin-top: 32px !important; padding-top: 22px; border-top: 1px solid var(--gray-line); font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; color: var(--burgund-ink); font-size: 18px; line-height: 1.5; letter-spacing: -0.01em; } .people-photo .badge{ position:absolute; left:20px; bottom:20px; background: rgba(255,255,255,0.92); color: var(--burgund); font-family: "Arial Black", Arial; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 10px 14px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .people-stats{ margin-top: 56px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 32px; border-top: 1px solid rgba(67,8,18,0.18); max-width: 540px; } .people-stats div b{ display:block; font-family: "Arial Black", Arial; font-size: clamp(28px, 3vw, 38px); color: var(--burgund); letter-spacing: -0.02em; margin-bottom: 6px; } .people-stats div span{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #4a2a30; } /* =================== TESTIMONIALS =================== */ .testimonials{ background: #fff; padding: clamp(110px, 14vw, 180px) 0; } .test-head{ text-align:center; margin-bottom: 80px; } .test-grid{ display:grid; grid-template-columns: 1fr; gap: 32px; max-width: 920px; margin: 0 auto; } .test-card{ border: 1px solid var(--gray-line); padding: 56px 48px; position: relative; min-height: 320px; display:flex; flex-direction: column; justify-content: space-between; } .test-quote{ font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.45; color: var(--ink); letter-spacing: 0; } .test-quote .cursor{ display:inline-block; width: 2px; height: 1em; background: var(--burgund); transform: translateY(4px); margin-left: 2px; animation: blink 1s steps(2) infinite; } @keyframes blink{ 50%{opacity:0;} } .test-quote.typewriter{ font-family: Arial, Helvetica, sans-serif; font-style: italic; letter-spacing: 0; } .test-quote.typewriter .cursor{ background: currentColor; } .test-foot{ margin-top: 36px; display:flex; justify-content: space-between; align-items: flex-end; color: var(--ink-3); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .test-mark{ position: absolute; top: 20px; right: 28px; font-family: "Arial Black", Arial; font-size: 80px; color: var(--burgund); line-height: 1; opacity:.18; } .test-cta-wrap{ margin-top: 60px; text-align: center; } .test-cta{ display:inline-flex; align-items:center; gap:14px; color: var(--burgund); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--burgund); padding: 8px 0; transition: gap .25s; } .test-cta:hover{ gap: 22px; } /* =================== CONTACT =================== */ .contact{ background: var(--burgund-ink); color: #f1dde0; padding: clamp(110px, 14vw, 180px) 0 60px; position: relative; overflow: hidden; } .contact::before{ content:""; position:absolute; right:-200px; top:-200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(248,217,224,0.06), transparent 65%); } .contact h2{ font-size: clamp(40px, 5.4vw, 84px); color: #fff; margin-top: 22px; max-width: 16ch; } .contact-head{ display:flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .contact-team-link{ display:inline-flex; align-items:center; gap: 12px; color: #fff; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.35); margin-bottom: 24px; transition: gap .25s, border-color .2s; } .contact-team-link:hover{ gap: 18px; border-bottom-color: #fff; } .contact-people{ display:flex; flex-direction: column; gap: 0; margin-top: 80px; border-top: 1px solid rgba(255,255,255,0.12); } .contact-person{ display:grid; grid-template-columns: 200px 1fr auto; gap: 40px; align-items: center; padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,0.12); } .contact-person .label{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c39296; } .contact-person h3{ font-family: "Arial Black", Arial; font-size: clamp(22px, 2vw, 28px); color: #fff; letter-spacing: -0.01em; margin: 0; } .contact-person a.email{ color: #f1dde0; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 2px; transition: border-color .2s, color .2s; font-size: 15px; } .contact-person a.email:hover{ color:#fff; border-bottom-color:#fff; } /* Office – a place card */ .contact-visit-wrap{ margin-top: 90px; position: relative; } .contact-visit-eyebrow{ display:flex; align-items:center; gap: 18px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #c39296; margin-bottom: 22px; } .contact-visit-eyebrow::after{ content:""; flex:1; height:1px; background: rgba(255,255,255,0.12); } .contact-office{ background: #f6e6e9; color: var(--burgund-ink); display:grid; grid-template-columns: 56px 1fr; gap: 0; align-items: stretch; border-radius: 2px; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0,0,0,0.5); position: relative; } .contact-office .office-sidebar{ background: var(--burgund); color: #f6e6e9; display:flex; align-items: center; justify-content: center; padding: 28px 0; } .contact-office .office-sidebar span{ writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .42em; text-transform: uppercase; font-weight: 700; } .contact-office .office-body{ padding: 28px 40px; display:flex; flex-direction: column; justify-content: center; gap: 10px; } .contact-office .office-tag{ font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: #8a3845; margin: 0; } .contact-office h3{ font-family: "Arial Black", Arial; font-size: clamp(28px, 2.6vw, 40px); color: var(--burgund-ink); letter-spacing: -0.035em; line-height: 0.95; margin: 0; } .contact-office h3 .it{ font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--burgund); } .contact-office .addr{ color: #6b2a36; font-size: 15px; letter-spacing: .04em; margin-top: 6px; display:flex; flex-direction: column; gap: 2px; } .contact-office .addr .coords{ font-family: "Courier New", monospace; font-size: 11px; letter-spacing: .14em; color: #a26772; margin-top: 6px; } .contact-office a.email{ color: var(--burgund); border-bottom: 1px solid rgba(122,26,42,0.35); padding-bottom: 2px; font-size: 15px; display:inline-block; margin-top: 10px; align-self: flex-start; } .contact-office a.email:hover{ color: var(--burgund-ink); border-bottom-color: var(--burgund-ink); } .contact-icons{ display:flex; gap: 14px; margin-top: 22px; } .contact-icons a{ width:44px; height:44px; border:1px solid rgba(255,255,255,0.2); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color: #fff; transition: all .25s; padding: 0; border-bottom: 1px solid rgba(255,255,255,0.2); } .contact-icons a:hover{ background:#fff; color: var(--burgund); border-color:#fff; } .contact-icons svg{width:16px;height:16px;} .contact-bottom{ margin-top: 40px; display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; font-size: 12px; color: #a87a80; letter-spacing: .12em; text-transform: uppercase; } .contact-bottom a:hover{ color:#fff; } .contact-legal{ display:flex; align-items:center; gap: 14px; } .contact-legal .legal-sep{ color:#a87a80; } .contact .logo-large{ margin-top: 60px; font-family: "Arial Black", Arial; font-weight: 900; font-size: clamp(120px, 22vw, 320px); line-height: 0.85; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.18); text-stroke: 1px rgba(255,255,255,0.18); user-select: none; pointer-events: none; overflow: hidden; white-space: nowrap; } /* =================== Responsive =================== */ @media (max-width: 960px){ .hero{padding: 140px 0 70px;} .hero-grid{grid-template-columns: 1fr; gap:12px;} .hero-copy, .hero-text{order: 2;} .hero-tree{ order: 1; position: relative; right: auto; top: auto; bottom: auto; width: 100%; height: 420px; margin-top: 0; margin-bottom: -70px; } .trunk-extend{ display: none; } .phil-grid, .services-head, .people-grid, .test-grid{ grid-template-columns: 1fr; } .services-head{gap:24px;} .svc-row{grid-template-columns: 1fr auto; gap:18px;} .svc-desc{grid-column: 1 / span 2; max-width: none;} .contact-person{ grid-template-columns: 1fr; gap: 12px; align-items: flex-start; } .contact-office{ grid-template-columns: 44px 1fr; } .contact-office .office-body{ padding: 32px 28px; } .contact-office h3{ font-size: clamp(36px, 9vw, 56px); } .contact-legal{ flex: 1 0 100%; justify-content: flex-start; gap: 14px; } }