:root { --v2-ink: #16181d; --v2-ink-soft: #454952; --v2-surface: #ffffff; --v2-surface-alt: #ffffff; --v2-surface-card: #ffffff; --v2-border: #e7e5e1; --v2-footer-bg: #14151a; --v2-radius: 10px; --v2-shadow: 0 10px 30px rgba(20,20,20,0.08); --v2-shadow-hover: 0 18px 40px rgba(20,20,20,0.16); --v2-overlay-soft: rgba(0,0,0,0.4); --v2-scrollbar-thumb: rgba(255,255,255,0.85); } html[data-theme="dark"] { --v2-ink: #ffffff; --v2-ink-soft: #c7cbd4; --v2-surface: #14151a; --v2-surface-alt: #14151a; --v2-surface-card: #1c1e24; --v2-border: #2c2f38; --v2-footer-bg: #0c0d10; --v2-shadow: 0 10px 30px rgba(0,0,0,0.35); --v2-shadow-hover: 0 18px 40px rgba(0,0,0,0.5); --v2-overlay-soft: rgba(0,0,0,0.6); --v2-scrollbar-thumb: rgba(30,30,30,0.85); } html[data-theme="dark"] body { background-color: var(--v2-surface); } html[data-theme="dark"] #consent-banner { background-color: rgba(20,21,26,0.94) !important; border-top-color: var(--v2-border) !important; } html[data-theme="dark"] #consent-banner p { color: var(--v2-ink-soft) !important; } html[data-theme="dark"] #reject-btn { color: var(--v2-ink-soft) !important; border-color: var(--v2-border) !important; } .brand-logo { filter: none; } html[data-theme="dark"] .brand-logo.brand-logo-has-dark-variant { display: none; } html[data-theme="dark"] .brand-logo-dark { display: block; } .brand-logo-dark { display: none; } body { color: var(--v2-ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, .home-featured-title, .section-title { letter-spacing: -0.01em; } header { background-color: var(--v2-surface) !important; border-bottom: 1px solid var(--v2-border); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .v2-header-sticky header { position: sticky; top: 0; } header .brand-logo { filter: none; } .lang-suggest-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; background: var(--v2-surface-alt); border-bottom: 1px solid var(--v2-border); padding: 8px 16px; font-size: 12.5px; color: var(--v2-ink-soft); } .lang-suggest-text { line-height: 1.4; } .lang-suggest-actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .lang-suggest-switch { color: var(--brand-accent-ink, var(--brand-main)) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .lang-suggest-dismiss { background: transparent; border: none; color: var(--v2-ink-soft); cursor: pointer; font-size: 11.5px; font-weight: 600; line-height: 1; padding: 2px 4px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.3px; } .lang-suggest-dismiss:hover { opacity: 1; text-decoration: underline; } nav ul li a { color: var(--v2-ink) !important; font-weight: 600; position: relative; padding-bottom: 4px; } nav ul li a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--brand-accent-ink, var(--brand-main)); transition: right 0.25s ease; } nav ul li a:hover::after, nav ul li a.active::after { right: 0; } nav ul li a.active { color: var(--v2-ink) !important; } .hamburger { color: var(--v2-ink) !important; } .lang-btn { color: var(--v2-ink) !important; border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none; display: inline-block; transition: border-color 0.15s ease, background-color 0.15s ease; transform: translateZ(0); } .lang-btn:hover { border-color: var(--brand-accent-ink, var(--brand-main)); background: var(--v2-surface-alt); } .lang-switcher { position: relative; display: inline-block; } .lang-switcher-trigger { -webkit-appearance: none; appearance: none; background: transparent; border: 1.5px solid var(--v2-border); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; line-height: 1; box-shadow: none; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; transform: translateZ(0); } .lang-switcher-trigger:hover, .lang-switcher:focus-within .lang-switcher-trigger { border-color: var(--brand-accent-ink, var(--brand-main)); background: var(--v2-surface-alt); } .lang-switcher-caret { display: inline-flex; vertical-align: middle; transition: transform 0.2s ease; opacity: 0.6; } .lang-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 96px; background: var(--v2-surface); border: 1.5px solid var(--v2-border); border-radius: 8px; box-shadow: 0 4px 16px rgba(20,20,20,0.06); list-style: none; margin: 0; padding: 5px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 50; } .lang-switcher:hover .lang-switcher-menu, .lang-switcher:focus-within .lang-switcher-menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-switcher:hover .lang-switcher-caret, .lang-switcher:focus-within .lang-switcher-caret { transform: rotate(180deg); } .lang-switcher-menu li { list-style: none; } .lang-switcher-menu li a { display: block; padding: 7px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v2-ink) !important; white-space: nowrap; } .lang-switcher-menu li a:hover { background: var(--v2-surface-alt); color: var(--brand-accent-ink, var(--brand-main)) !important; } .theme-mode-toggle { -webkit-appearance: none; appearance: none; background: transparent; color: var(--v2-ink) !important; border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 6px 12px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; transform: translateZ(0); } .theme-mode-toggle:hover { border-color: var(--brand-accent-ink, var(--brand-main)); background: var(--v2-surface-alt); } .theme-mode-icon { display: block; width: 14px; height: 14px; } .theme-mode-icon-moon { display: none; } html[data-theme="dark"] .theme-mode-icon-sun { display: none; } html[data-theme="dark"] .theme-mode-icon-moon { display: block; } .search-toggle { -webkit-appearance: none; appearance: none; background: transparent; color: var(--v2-ink) !important; border: 1.5px solid var(--v2-border); border-radius: 999px; width: 30px; height: 30px; padding: 0; margin: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .search-toggle:hover { border-color: var(--brand-accent-ink, var(--brand-main)); background: var(--v2-surface-alt); } .sn-search-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; } .sn-search-modal.open { display: flex; } .sn-search-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 14, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .sn-search-modal-box { position: relative; width: 100%; max-width: 640px; height: min(600px, 82vh); max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; background: var(--v2-surface); border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38); padding: 22px; } .sn-search-modal-header { display: flex; align-items: center; gap: 10px; color: var(--v2-ink-soft); flex-shrink: 0; } .sn-search-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: 4px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--brand-accent-ink, var(--brand-main)) transparent; } .sn-search-modal-body::-webkit-scrollbar { width: 7px; } .sn-search-modal-body::-webkit-scrollbar-track { background: transparent; } .sn-search-modal-body::-webkit-scrollbar-thumb { background-color: var(--brand-accent-ink, var(--brand-main)); border-radius: 999px; opacity: 0.6; } .sn-search-modal-body::-webkit-scrollbar-thumb:hover { opacity: 0.9; } .sn-search-modal-body.is-empty { display: flex; flex-direction: column; justify-content: center; } .sn-search-modal-body.is-empty .sn-search-modal-suggest { margin-top: 0; } .sn-search-modal-header input { flex-grow: 1; border: 1.5px solid var(--v2-border); border-radius: 999px; padding: 12px 18px; background: var(--v2-surface-alt); color: var(--v2-ink); font-size: 1rem; min-width: 0; } .sn-search-modal-header input:focus { outline: none; border-color: var(--brand-accent-ink, var(--brand-main)); } .sn-search-modal-close { -webkit-appearance: none; appearance: none; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--v2-border); background: transparent; color: var(--v2-ink) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .sn-search-modal-close:hover { border-color: var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)) !important; } .sn-search-modal-suggest { margin-top: 18px; } .sn-search-modal-suggest-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--v2-ink-soft); margin-bottom: 10px; font-weight: 700; text-align: center; } .sn-search-modal-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .sn-search-modal-chips a { padding: 7px 14px; border: 1.5px solid var(--v2-border); border-radius: 999px; font-size: 0.85rem; color: var(--v2-ink); text-decoration: none; } .sn-search-modal-chips a:hover { border-color: var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)); } .sn-search-modal-hint { margin: 14px 2px 0; font-size: 0.82rem; color: var(--v2-ink-soft); } .sn-search-modal-results { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; } .sn-search-result-card { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; text-decoration: none; color: var(--v2-ink); transition: background-color 0.12s ease; } .sn-search-result-card:hover { background: var(--v2-surface-alt); } .sn-search-result-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--v2-surface-alt); display: flex; align-items: center; justify-content: center; color: var(--v2-ink-soft); } .sn-search-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sn-search-result-body { min-width: 0; } .sn-search-result-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--brand-accent-ink, var(--brand-main)); display: block; margin-bottom: 2px; } .sn-search-result-body strong { display: block; font-size: 0.92rem; margin-bottom: 2px; color: var(--v2-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sn-search-result-snippet { display: block; font-size: 0.8rem; color: var(--v2-ink-soft); line-height: 1.4; } .sn-search-result-snippet mark { background: rgba(255, 208, 0, 0.35); color: inherit; padding: 0 2px; border-radius: 2px; } .sn-search-modal-empty { font-size: 0.85rem; color: var(--v2-ink-soft); text-align: center; padding: 16px 0 4px; } .sn-search-modal-didyoumean { font-size: 0.8rem; font-style: italic; color: var(--v2-ink-soft); margin: 0 2px 6px; } @media (max-width: 640px) { .sn-search-modal-box { height: min(560px, 86vh); max-height: 86vh; border-radius: 16px; padding: 18px; } } .home-hero { background-color: #1c1d22; } .home-hero::after { content: ""; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 46px; height: 3px; background: var(--brand-accent-ink, var(--brand-main)); border-radius: 3px; } .home-hero-inner h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; } .home-hero-inner p { max-width: 620px; margin: 0 auto; } .home-featured-section { background: var(--v2-surface-alt); } .home-featured-title { position: relative; padding-bottom: 18px; margin-bottom: 45px; } .home-featured-title::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 46px; height: 3px; background: var(--brand-accent-ink, var(--brand-main)); border-radius: 3px; } .home-featured-card { box-shadow: var(--v2-shadow); transition: box-shadow 0.3s ease, transform 0.3s ease; background: var(--v2-surface); } .home-featured-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-4px); } .home-featured-card img { transition: transform 0.5s ease; } .home-featured-card:hover img { transform: scale(1.06); } .home-featured-card .caption { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; } .v2-btn { display: inline-block; padding: 13px 28px; background: var(--brand-main); color: var(--brand-contrast, #fff) !important; font-weight: 700; border-radius: 6px; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .v2-btn:hover { opacity: 0.88; transform: translateY(-2px); } footer[role="contentinfo"] { background: var(--v2-footer-bg) !important; border-top: 1px solid var(--v2-border); } .footer-logo { filter: none; } .social-icon { position: relative; display: block; width: 25px; height: 25px; border-radius: 50%; background: var(--v2-border, rgba(255,255,255,0.08)); box-sizing: border-box; transition: background-color 0.2s ease; } .social-icon::before { content: ""; position: absolute; inset: 5px; background-color: var(--v2-ink, #16181d); -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: background-color 0.2s ease; } .social-links a:hover .social-icon { background: var(--brand-main); } .social-links a:hover .social-icon::before { background-color: var(--brand-contrast, #fff); } .footer-heading { position: relative; padding-bottom: 12px; } .footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--brand-accent-ink, var(--brand-main)); } @media (max-width: 768px) { .footer-heading::after { left: 50%; transform: translateX(-50%); } } footer a:hover { color: var(--brand-accent-ink, var(--brand-main)) !important; } html { scroll-behavior: smooth; } .pb-hero { position: relative; min-height: 55vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--brand-contrast, #fff); background-color: var(--brand-dark, #2c1e1f); padding: 60px 24px; overflow: hidden; } .pb-hero.has-image { color: #fff; } .pb-hero.pb-hero-full { min-height: 92vh; } .pb-hero.pb-hero-align-left { justify-content: flex-start; text-align: left; } .pb-hero.pb-hero-align-right { justify-content: flex-end; text-align: right; } .pb-hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; } .pb-hero-bg.pb-hero-zoom { animation: pbHeroZoom 20s ease-out forwards; } @keyframes pbHeroZoom { from { transform: scale(1); } to { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .pb-hero-bg.pb-hero-zoom { animation: none; } } .pb-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.42) 100%); } .pb-hero-inner { position: relative; z-index: 2; max-width: 800px; } .pb-hero-inner h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: 15px; line-height: 1.2; color: inherit; } .pb-hero-inner p { font-size: 1.1rem; opacity: 0.96; color: inherit; } .pb-hero-cta { margin-top: 26px; } @media (max-width: 768px) { .pb-hero { min-height: 46vh; padding: 40px 18px; } .pb-hero.pb-hero-full { min-height: 78vh; } .pb-hero-inner h1 { font-size: 1.7rem; } .pb-hero-inner p { font-size: 0.96rem; } } .pb-image-section { padding: 40px 0; } .pb-image-figure { margin: 0; } .pb-image-figure img { width: 100%; height: auto; display: block; border-radius: var(--v2-radius); } .pb-image-full { padding: 0; } .pb-image-full .pb-image-figure img { border-radius: 0; } .pb-image-figure figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--v2-ink-soft); text-align: center; } .pb-image-full .pb-image-figure { position: relative; } .pb-image-full .pb-image-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 70px 28px 26px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.68) 100%); color: #fff; text-align: center; font-size: 1.05rem; font-weight: 600; line-height: 1.5; } @media (max-width: 768px) { .pb-image-section { padding: 24px 0; } .pb-image-full { padding: 0; } .pb-image-full .pb-image-figure figcaption { padding: 44px 18px 18px; font-size: 0.92rem; } } .pb-text-section { padding: 40px 0; } .pb-text-container { max-width: 900px; margin: 0 auto; line-height: 1.75; color: var(--v2-ink); overflow-wrap: anywhere; word-break: normal; } .pb-text-container p { overflow-wrap: anywhere; } .pb-text-container h1, .pb-text-container h2, .pb-text-container h3 { color: var(--v2-ink); margin-top: 0; } .pb-text-container h1 { font-size: 2rem; } .pb-text-container h2 { font-size: 1.6rem; } .pb-text-container h3 { font-size: 1.3rem; } .pb-text-container a { color: var(--brand-accent-ink, var(--brand-main)); } @media (max-width: 768px) { .pb-text-section { padding: 24px 0; font-size: 0.95rem; } } .pb-featured-section { padding: 60px 0; } .pb-featured-title { text-align: center; font-size: 1.8rem; font-weight: 700; margin-bottom: 36px; color: var(--v2-ink); } .pb-featured-title-link { display: block; text-decoration: none; } .pb-featured-title-link .pb-featured-title { transition: color 0.2s; } .pb-featured-title-link:hover .pb-featured-title { color: var(--brand-accent-ink, var(--brand-main)); text-decoration: underline; } .pb-featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .pb-featured-card { display: block; position: relative; border-radius: var(--v2-radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--v2-shadow); transition: box-shadow 0.25s ease, transform 0.25s ease; } .pb-featured-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-3px); } .pb-featured-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .pb-featured-card:hover img { transform: scale(1.05); } .pb-featured-card .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 15px 15px; color: #fff; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.88) 100%); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } .pb-featured-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-weight: 400; font-size: 0.82rem; opacity: 0.9; } .pb-featured-meta-item svg { margin-right: 3px; vertical-align: -1px; } .pb-featured-btn-wrap { text-align: center; margin-top: 34px; } @media (max-width: 768px) { .pb-featured-section { padding: 36px 0; } .pb-featured-title { font-size: 1.4rem; margin-bottom: 24px; } .pb-featured-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .pb-featured-btn-wrap { margin-top: 24px; } } .pb-cta-section { background: var(--brand-main); padding: 64px 0; text-align: center; } .pb-cta-inner { max-width: 700px; margin: 0 auto; } .pb-cta-section.pb-cta-align-left .pb-cta-inner { margin-left: 0; text-align: left; } .pb-cta-section.pb-cta-align-right .pb-cta-inner { margin-right: 0; text-align: right; } .pb-cta-heading { color: var(--brand-contrast, #fff); font-size: 2rem; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.01em; } .pb-cta-subtext { color: var(--brand-contrast, #fff); opacity: 0.85; font-size: 1.05rem; margin: 0; } .pb-cta-btn-wrap { margin-top: 26px; } .pb-cta-btn { display: inline-block; padding: 13px 30px; background: var(--brand-contrast, #fff); color: var(--brand-main) !important; font-weight: 700; border-radius: 6px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pb-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } @media (max-width: 768px) { .pb-cta-section { padding: 44px 0; } .pb-cta-heading { font-size: 1.5rem; } .pb-cta-subtext { font-size: 0.95rem; } } .pb-404-section { padding: 100px 0 110px; text-align: center; } .pb-404-icon-wrap { display: flex; justify-content: center; color: var(--brand-accent-ink, var(--brand-main)); opacity: 0.9; margin-bottom: 10px; } .pb-404-number { font-size: clamp(56px, 12vw, 130px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--brand-accent-ink, var(--brand-main)); margin: 0 0 6px; } .pb-404-heading { font-size: 1.7rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 14px; } .pb-404-desc { max-width: 480px; margin: 0 auto 36px; color: var(--v2-ink-soft); line-height: 1.7; font-size: 1rem; } .pb-404-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .pb-404-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pb-404-btn-primary { background: var(--brand-main); color: var(--brand-contrast, #fff) !important; box-shadow: var(--v2-shadow); } .pb-404-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--v2-shadow-hover); } .pb-404-btn-secondary { background: transparent; color: var(--v2-ink) !important; border: 1.5px solid var(--v2-border); } .pb-404-btn-secondary:hover { transform: translateY(-2px); border-color: var(--brand-main); color: var(--brand-accent-ink, var(--brand-main)) !important; } @media (max-width: 640px) { .pb-404-section { padding: 64px 0 70px; } .pb-404-actions { flex-direction: column; align-items: stretch; } .pb-404-btn { justify-content: center; } } .pb-stats-section { padding: 60px 0; background: var(--v2-surface-alt); } .pb-stats-title { text-align: center; font-size: 1.6rem; font-weight: 700; margin-bottom: 36px; color: var(--v2-ink); } .pb-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 24px; text-align: center; } .pb-stats-count-1 { grid-template-columns: 1fr; } .pb-stats-count-2 { grid-template-columns: repeat(2, 1fr); } .pb-stats-count-3 { grid-template-columns: repeat(3, 1fr); } .pb-stats-count-5, .pb-stats-count-6 { grid-template-columns: repeat(3, 1fr); } .pb-stats-count-7, .pb-stats-count-8 { grid-template-columns: repeat(4, 1fr); } .pb-stats-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 12px; color: var(--brand-accent-ink, var(--brand-main)); } .pb-stats-icon svg { width: 100%; height: 100%; } .pb-stats-number { font-size: 2.6rem; font-weight: 800; color: var(--brand-accent-ink, var(--brand-main)); letter-spacing: -0.02em; line-height: 1.1; } .pb-stats-label { margin-top: 8px; color: var(--v2-ink-soft); font-weight: 600; font-size: 0.95rem; } @media (max-width: 768px) { .pb-stats-section { padding: 40px 0; } .pb-stats-grid, .pb-stats-count-5, .pb-stats-count-6, .pb-stats-count-7, .pb-stats-count-8 { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; } .pb-stats-icon { width: 34px; height: 34px; margin-bottom: 8px; } .pb-stats-number { font-size: 2rem; } } .pb-team-section { padding: 64px 0; } .pb-team-heading { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 40px; color: var(--v2-ink); } .pb-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 24px; } .pb-team-card { text-align: center; } .pb-team-photo-wrap { margin: 0 auto 16px; width: 140px; height: 140px; } .pb-team-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 4px 16px rgba(0,0,0,0.12); } .pb-team-photo-placeholder { display: flex; align-items: center; justify-content: center; background: var(--brand-main); color: var(--brand-contrast, #fff); font-size: 2.6rem; font-weight: 700; } .pb-team-name { font-weight: 700; font-size: 1.05rem; color: var(--v2-ink); margin-bottom: 4px; } .pb-team-title { font-weight: 600; font-size: 0.85rem; color: var(--v2-ink-soft); margin-bottom: 6px; } .pb-team-bio { color: var(--v2-ink-soft); font-size: 0.9rem; line-height: 1.6; } @media (max-width: 768px) { .pb-team-section { padding: 40px 0; } .pb-team-heading { font-size: 1.4rem; margin-bottom: 28px; } .pb-team-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 16px; } .pb-team-photo-wrap, .pb-team-photo { width: 100px; height: 100px; } .pb-team-photo-placeholder { font-size: 2rem; } } .pb-lf-section { padding: 60px 0; } .pb-lf-box { max-width: 560px; margin: 0 auto; background: var(--v2-surface-card); border: 1px solid var(--v2-border); border-radius: 12px; padding: 36px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } .pb-lf-heading { text-align: center; font-size: 1.6rem; margin: 0 0 10px; color: var(--v2-ink); } .pb-lf-subtext { text-align: center; color: var(--v2-ink-soft); margin: 0 0 24px; } .pb-lf-field { margin-bottom: 14px; flex: 1; min-width: 0; } .pb-lf-row { display: flex; gap: 14px; } .pb-lf-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--v2-ink-soft); margin-bottom: 6px; } .pb-lf-field input, .pb-lf-field textarea, .pb-lf-field select { width: 100%; padding: 12px 14px; border: 1px solid var(--v2-border); border-radius: 8px; font-size: 0.95rem; font-family: inherit; box-sizing: border-box; background: #fff; color: #222; } .pb-lf-field input:focus, .pb-lf-field textarea:focus, .pb-lf-field select:focus { outline: none; border-color: var(--brand-accent-ink, var(--brand-main)); } .pb-lf-notes-field textarea { resize: vertical; } .pb-lf-charcount { display: block; text-align: right; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; margin-top: 4px; color: var(--v2-ink-soft); } .pb-lf-charcount.pb-lf-charcount-warn { color: #e05252; } .pb-lf-kvkk-row { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; } .pb-lf-kvkk-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; cursor: pointer; accent-color: var(--brand-main); } .pb-lf-kvkk-row label { font-size: 0.82rem; line-height: 1.5; color: var(--v2-ink-soft); cursor: pointer; } .pb-lf-kvkk-row label a { color: var(--brand-accent-ink, var(--brand-main)); font-weight: 600; text-decoration: underline; } .pb-lf-turnstile { margin-bottom: 16px; display: flex; justify-content: center; } .pb-lf-btn { width: 100%; padding: 13px; border-radius: 8px; border: none; font-weight: 600; font-size: 0.95rem; cursor: pointer; margin-bottom: 8px; } .pb-lf-btn-primary { background: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-lf-btn-primary:hover { background: var(--brand-dark); } .pb-lf-btn-link { background: none; color: var(--brand-accent-ink, var(--brand-main)); text-decoration: underline; } .pb-lf-otp-info { color: var(--v2-ink-soft); margin-bottom: 14px; } .pb-lf-error { color: #c0392b; margin-top: 10px; font-size: 0.9rem; } .pb-lf-success { text-align: center; font-size: 1.1rem; color: #2e7d32; } @media (max-width: 600px) { .pb-lf-box { padding: 24px 20px; } .pb-lf-row { flex-direction: column; gap: 0; } } .pb-ps-section { padding: 60px 0; } .pb-ps-heading { text-align: center; font-size: 1.8rem; margin-bottom: 32px; color: var(--v2-ink); } .pb-ps-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; } .pb-ps-grid-full { grid-template-columns: 1fr; } .pb-ps-media { position: relative; border-radius: 10px; overflow: hidden; } .pb-ps-media .pb-fs-slide { aspect-ratio: 4 / 3; } .pb-ps-project-name { font-size: 1.4rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 14px; } .pb-ps-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; color: var(--v2-ink-soft); font-size: 0.9rem; } .pb-ps-meta-item svg { margin-right: 4px; vertical-align: -2px; } .pb-ps-desc { color: var(--v2-ink-soft); line-height: 1.75; overflow-wrap: anywhere; } .pb-ps-link-wrap { margin: 20px 0 0; } .pb-ps-link-btn { display: inline-flex; align-items: center; gap: 8px; } .pb-ps-link-btn svg { transition: transform 0.2s ease; flex: 0 0 auto; } .pb-ps-link-btn:hover svg { transform: translateX(3px); } @media (max-width: 768px) { .pb-ps-section { padding: 36px 0; } .pb-ps-heading { font-size: 1.4rem; margin-bottom: 20px; } .pb-ps-grid { grid-template-columns: 1fr; gap: 20px; } } .pb-location-section { padding: 60px 0; } .pb-location-heading { text-align: center; font-size: 1.8rem; margin-bottom: 28px; color: var(--v2-ink); } .pb-location-map { width: 100%; height: 420px; border-radius: 10px; z-index: 1; } .pb-location-caption { text-align: center; margin-top: 16px; color: var(--v2-ink-soft); } @media (max-width: 768px) { .pb-location-section { padding: 36px 0; } .pb-location-map { height: 300px; } } .pb-videotext-section { padding: 60px 0; } .pb-videotext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .pb-videotext-pos-right .pb-videotext-media { order: 2; } .pb-videotext-pos-right .pb-videotext-content { order: 1; } .pb-videotext-heading { font-size: 1.7rem; font-weight: 700; margin: 0 0 14px; color: var(--v2-ink); } .pb-videotext-body { color: var(--v2-ink-soft); line-height: 1.75; overflow-wrap: anywhere; } .pb-videotext-bg-surface { background: var(--v2-surface-alt); } .pb-videotext-bg-brand { background: var(--brand-main); } .pb-videotext-bg-brand .pb-videotext-heading, .pb-videotext-bg-brand .pb-videotext-body { color: var(--brand-contrast, #fff); } .pb-videotext-cta { margin-top: 22px; } .pb-videotext-btn { display: inline-block; padding: 12px 26px; background: var(--brand-main); color: var(--brand-contrast, #fff) !important; font-weight: 700; border-radius: 6px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pb-videotext-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .pb-videotext-bg-brand .pb-videotext-btn { background: var(--brand-contrast, #fff); color: var(--brand-main) !important; } @media (max-width: 768px) { .pb-videotext-section { padding: 36px 0; } .pb-videotext-grid { grid-template-columns: 1fr; gap: 24px; } .pb-videotext-pos-right .pb-videotext-media, .pb-videotext-pos-right .pb-videotext-content { order: initial; } } .pb-imagetext-section { padding: 60px 0; } .pb-imagetext-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .pb-imagetext-pos-right .pb-imagetext-media { order: 2; } .pb-imagetext-pos-right .pb-imagetext-content { order: 1; } .pb-imagetext-media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10px; max-height: 480px; } .pb-imagetext-heading { font-size: 1.7rem; font-weight: 700; margin: 0 0 14px; color: var(--v2-ink); } .pb-imagetext-body { color: var(--v2-ink-soft); line-height: 1.75; overflow-wrap: anywhere; } .pb-imagetext-bg-surface { background: var(--v2-surface-alt); } .pb-imagetext-bg-brand { background: var(--brand-main); } .pb-imagetext-bg-brand .pb-imagetext-heading, .pb-imagetext-bg-brand .pb-imagetext-body { color: var(--brand-contrast, #fff); } .pb-imagetext-cta { margin-top: 22px; } .pb-imagetext-btn { display: inline-block; padding: 12px 26px; background: var(--brand-main); color: var(--brand-contrast, #fff) !important; font-weight: 700; border-radius: 6px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; } .pb-imagetext-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.18); } .pb-imagetext-bg-brand .pb-imagetext-btn { background: var(--brand-contrast, #fff); color: var(--brand-main) !important; } @media (max-width: 768px) { .pb-imagetext-section { padding: 36px 0; } .pb-imagetext-grid { grid-template-columns: 1fr; gap: 24px; } .pb-imagetext-pos-right .pb-imagetext-media, .pb-imagetext-pos-right .pb-imagetext-content { order: initial; } .pb-imagetext-media img { max-height: 320px; } } .pb-video-section { position: relative; } .pb-video-bg-mode { height: 80vh; min-height: 480px; overflow: hidden; } .pb-video-full.pb-video-bg-mode { width: 100%; } .pb-video-bg-wrap { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); overflow: hidden; } .pb-video-bg-iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); border: none; pointer-events: none; } .pb-video-bg-shield { position: absolute; inset: 0; z-index: 1; background: transparent; } .pb-video-bg-shield.has-tint { background: rgba(0,0,0,0.4); } .pb-video-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: #fff; z-index: 2; } .pb-video-text-align-left { align-items: flex-start; text-align: left; } .pb-video-text-align-right { align-items: flex-end; text-align: right; } .pb-video-text-align-left .pb-video-sub, .pb-video-text-align-right .pb-video-sub { max-width: 560px; } .pb-video-headline { font-size: 2.6rem; font-weight: 700; margin: 0 0 14px; text-shadow: none; } .pb-video-sub { font-size: 1.2rem; margin: 0 0 22px; max-width: 700px; } .pb-video-btn { display: inline-block; padding: 12px 30px; border-radius: 999px; background: var(--brand-main); color: var(--brand-contrast, #fff); text-decoration: none; font-weight: 600; transition: background 0.2s ease; } .pb-video-btn:hover { background: var(--brand-dark); } .pb-video-facade { position: relative; cursor: pointer; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; max-width: 900px; margin: 0 auto; } .pb-video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; transition: background 0.2s ease; } .pb-video-facade:hover .pb-video-play-btn { background: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-video-facade-loaded { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; max-width: 900px; margin: 0 auto; } .pb-video-full .pb-video-facade, .pb-video-full .pb-video-facade-loaded { max-width: none; } @media (max-width: 768px) { .pb-video-bg-mode { height: 60vh; min-height: 360px; } .pb-video-headline { font-size: 1.7rem; } .pb-video-sub { font-size: 1rem; } } .pb-fs-section { position: relative; } .pb-fs-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pb-fs-track::-webkit-scrollbar { display: none; } .pb-fs-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 16 / 9; } .pb-fs-full .pb-fs-slide { aspect-ratio: auto; height: 70vh; } .pb-fs-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-fs-caption { position: absolute; inset: 0; display: flex; align-items: center; padding: 28px; } .pb-fs-align-left { justify-content: flex-start; } .pb-fs-align-center { justify-content: center; } .pb-fs-align-right { justify-content: flex-end; } .pb-fs-caption-inner { max-width: min(520px, 100%); padding: 22px 26px; border-radius: 14px; background: rgba(12,12,16,0.56); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; } .pb-fs-align-left .pb-fs-caption-inner { text-align: left; } .pb-fs-align-center .pb-fs-caption-inner { text-align: center; } .pb-fs-align-right .pb-fs-caption-inner { text-align: right; } .pb-fs-caption-heading { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; line-height: 1.25; } .pb-fs-caption-text { font-size: 0.95rem; opacity: 0.92; line-height: 1.5; } .pb-fs-caption-btn { display: inline-block; margin-top: 16px; padding: 10px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.85); color: #fff; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; } .pb-fs-caption-btn:hover { background: #fff; color: #111; } @media (max-width: 600px) { .pb-fs-caption { padding: 18px 54px; } .pb-fs-caption-inner { padding: 16px 18px; max-width: 100%; } .pb-fs-caption-heading { font-size: 1.15rem; } .pb-fs-caption-text { font-size: 0.88rem; } .pb-fs-caption-btn { margin-top: 12px; padding: 8px 20px; font-size: 0.85rem; } } .pb-fs-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--v2-scrollbar-thumb); color: var(--v2-ink); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.15); } .pb-fs-prev { left: 16px; } .pb-fs-next { right: 16px; } @media (max-width: 600px) { .pb-fs-full .pb-fs-slide { height: 50vh; } .pb-fs-nav { width: 36px; height: 36px; font-size: 1.3rem; } } .pb-grouptext-section { padding: 60px 0; } .pb-grouptext-heading { text-align: center; font-size: 1.8rem; margin-bottom: 36px; color: var(--v2-ink); } .pb-grouptext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 28px; } .pb-grouptext-card { overflow-wrap: anywhere; display: flex; flex-direction: column; height: 100%; } .pb-grouptext-title { font-size: 1.2rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 12px; overflow-wrap: anywhere; } .pb-grouptext-text { color: var(--v2-ink-soft); line-height: 1.7; margin-bottom: 14px; overflow-wrap: anywhere; flex: 1 0 auto; } .pb-grouptext-btn { display: inline-block; align-self: flex-start; margin-top: auto; padding: 9px 20px; border-radius: 999px; border: 1px solid var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)); text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: all 0.2s ease; } .pb-grouptext-btn:hover { background: var(--brand-main); color: var(--brand-contrast, #fff); } @media (max-width: 768px) { .pb-grouptext-section { padding: 36px 0; } .pb-grouptext-heading { font-size: 1.4rem; margin-bottom: 24px; } .pb-grouptext-grid { grid-template-columns: 1fr; gap: 24px; } } .pb-faq-section { padding: 60px 0; } .pb-faq-heading { text-align: center; font-size: 1.8rem; margin-bottom: 32px; color: var(--v2-ink); } .pb-faq-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .pb-faq-item { border: 1px solid var(--v2-border); border-radius: 8px; padding: 4px 20px; background: var(--v2-surface-card); } .pb-faq-question { cursor: pointer; list-style: none; padding: 14px 30px 14px 0; font-weight: 600; color: var(--v2-ink); position: relative; } .pb-faq-question::-webkit-details-marker { display: none; } .pb-faq-caret { position: absolute; right: 0; top: 12px; display: inline-flex; color: var(--brand-accent-ink, var(--brand-main)); transition: transform 0.2s ease; } .pb-faq-item[open] .pb-faq-caret { transform: rotate(180deg); } .pb-faq-answer { padding: 0 0 16px 0; color: var(--v2-ink-soft); line-height: 1.7; } @media (max-width: 768px) { .pb-faq-section { padding: 36px 0; } .pb-faq-heading { font-size: 1.4rem; margin-bottom: 20px; } } .pb-projects-list { padding: 14px 0 60px; } .pb-projects-list-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 28px; color: var(--v2-ink); } .pb-projects-list-intro { max-width: 760px; margin: -8px auto 28px; text-align: center; color: var(--v2-ink-soft); font-size: 1.02rem; line-height: 1.6; } .pb-projects-list-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .pb-projects-list-filter { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--v2-border); color: var(--v2-ink-soft); font-size: 0.9rem; text-decoration: none; transition: all 0.2s ease; } .pb-projects-list-filter:hover { border-color: var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)); } .pb-projects-list-filter.active { background: var(--brand-main); border-color: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-projects-list-empty { text-align: center; color: var(--v2-ink-soft); padding: 40px 0; } .pb-projects-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .pb-projects-list-card { display: block; position: relative; border-radius: var(--v2-radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--v2-shadow); transition: box-shadow 0.25s ease, transform 0.25s ease; } .pb-projects-list-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-3px); } .pb-projects-list-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .pb-projects-list-card:hover img { transform: scale(1.05); } .pb-projects-list-card .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 16px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.85) 100%); color: #fff; font-weight: 600; font-size: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } .pb-projects-list-card-title { display: block; } .pb-projects-list-card-meta, .pb-plm-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-weight: 400; font-size: 0.78rem; opacity: 0.92; color: #fff; } .pb-projects-list-card-meta svg, .pb-plm-meta svg { vertical-align: -2px; margin-right: 2px; } .pb-plm-meta-sep { opacity: 0.6; } .pb-projects-list-card-desc, .pb-plm-desc { font-weight: 400; font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.88); margin-top: 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .pb-projects-list-card-client, .pb-plm-client, .pb-plr-client { display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: 0.78rem; margin-top: 6px; opacity: 0.9; } .pb-plr-client { color: var(--v2-ink-soft); margin-bottom: 4px; } .pb-projects-list-card-client svg, .pb-plm-client svg { flex: none; } .v2-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; } .v2-pagination-page, .v2-pagination-nav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--v2-border); color: var(--v2-ink-soft); text-decoration: none; font-size: 0.9rem; flex: none; box-sizing: border-box; } .v2-pagination-page:hover, .v2-pagination-nav:hover { border-color: var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)); } .v2-pagination-page.active { background: var(--brand-main); border-color: var(--brand-main); color: var(--brand-contrast, #fff); } .v2-pagination-nav[aria-disabled="true"] { opacity: 0.35; pointer-events: none; } .v2-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 36px; color: var(--v2-ink-soft); opacity: 0.7; font-size: 0.9rem; flex: none; user-select: none; } @media (max-width: 480px) { .v2-pagination { gap: 6px; } .v2-pagination-page, .v2-pagination-nav { width: 32px; height: 32px; font-size: 0.85rem; } .v2-pagination-ellipsis { width: 16px; height: 32px; } } .pb-projects-list-grid-desc .pb-projects-list-card { aspect-ratio: 3/4; } .pb-projects-list-grid-desc .pb-projects-list-card img { aspect-ratio: 3/4; } .pb-projects-list-grid-desc .caption { padding-top: 46px; } .pb-projects-list-rows { display: flex; flex-direction: column; gap: 48px; } .pb-plr-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .pb-plr-item.pb-plr-reverse { direction: rtl; } .pb-plr-item.pb-plr-reverse > * { direction: ltr; } .pb-plr-media { display: block; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); aspect-ratio: 4/3; } .pb-plr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .pb-plr-item:hover .pb-plr-media img { transform: scale(1.04); } .pb-plr-content { text-align: left; } .pb-plr-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 12px; color: var(--v2-ink); } .pb-plr-title a { color: inherit; text-decoration: none; } .pb-plr-title a:hover { color: var(--brand-accent-ink, var(--brand-main)); } .pb-plr-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; color: var(--v2-ink-soft); font-size: 0.9rem; } .pb-plr-meta-item svg { margin-right: 4px; vertical-align: -2px; } .pb-plr-desc { color: var(--v2-ink-soft); line-height: 1.7; overflow-wrap: anywhere; margin-bottom: 10px; } .pb-plr-btn { display: inline-flex; align-items: center; gap: 8px; } .pb-plr-btn svg { transition: transform 0.2s ease; flex: 0 0 auto; } .pb-plr-btn:hover svg { transform: translateX(3px); } .pb-projects-list-masonry { column-count: 3; column-gap: 22px; } .pb-plm-item { display: block; position: relative; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); margin-bottom: 22px; break-inside: avoid; transition: box-shadow 0.25s ease; } .pb-plm-item:hover { box-shadow: var(--v2-shadow-hover); } .pb-plm-item img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .pb-plm-item:hover img { transform: scale(1.05); } .pb-plm-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.85) 100%); color: #fff; font-weight: 600; font-size: 0.95rem; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } .pb-plm-name { display: block; } @media (max-width: 900px) { .pb-plr-item, .pb-plr-item.pb-plr-reverse { grid-template-columns: 1fr; direction: ltr; gap: 18px; } .pb-projects-list-masonry { column-count: 2; } } @media (max-width: 560px) { .pb-projects-list-masonry { column-count: 1; } } .pb-project-detail { padding: 14px 0 70px; } .pb-breadcrumb { margin-bottom: 14px; font-size: 0.8rem; } .pb-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; } .pb-breadcrumb-item { display: flex; align-items: center; color: var(--v2-ink-soft); } .pb-breadcrumb-sep { display: inline-flex; margin: 0 4px; color: var(--v2-ink-soft); opacity: 0.7; } .pb-breadcrumb-item a { color: var(--v2-ink-soft); text-decoration: none; } .pb-breadcrumb-item a:hover { color: var(--brand-accent-ink, var(--brand-main)); } .pb-breadcrumb-item span[aria-current] { color: var(--v2-ink); font-weight: 600; } @media (max-width: 768px) { .pb-breadcrumb-list { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px; } .pb-breadcrumb-list::-webkit-scrollbar { display: none; } .pb-breadcrumb-item { flex-shrink: 0; } .pb-breadcrumb-item span[aria-current] { display: inline-block; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } } .pb-project-detail-title { font-size: 2.2rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 16px; } .pb-project-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 28px; color: var(--v2-ink-soft); font-size: 0.95rem; } .pb-project-detail-meta-item svg { margin-right: 4px; vertical-align: -2px; color: var(--brand-accent-ink, var(--brand-main)); } .pb-project-detail-client { font-weight: 600; } .pb-project-detail-intro { margin-bottom: 40px; } .pb-pdi-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; } .pb-pdi-split.pb-pdi-reverse { direction: rtl; } .pb-pdi-split.pb-pdi-reverse > * { direction: ltr; } .pb-pdi-split .pb-video-facade, .pb-pdi-split .pb-video-facade-loaded { max-width: none; margin: 0; } .pb-pdi-split .pb-pdi-desc { text-align: left; } .pb-pdi-split.pb-pdi-reverse .pb-pdi-desc { text-align: right; } .pb-pdi-desc { line-height: 1.8; color: var(--v2-ink); font-size: 1.02rem; overflow-wrap: anywhere; } .pb-pdi-desc-only .pb-pdi-desc { max-width: 800px; } @media (max-width: 900px) { .pb-pdi-split, .pb-pdi-split.pb-pdi-reverse { grid-template-columns: 1fr; direction: ltr; gap: 20px; } .pb-pdi-split.pb-pdi-reverse .pb-pdi-desc { text-align: left; } } .pb-pdi-stacked .pb-pdi-video { margin-bottom: 24px; } .pb-pdi-video-full .pb-video-facade, .pb-pdi-video-full .pb-video-facade-loaded { max-width: none; margin: 0; } .pb-pdi-video-bleed .pb-pdi-video { width: 100vw; margin-left: 50%; transform: translateX(-50%); } .pb-pdi-video-bleed .pb-video-facade, .pb-pdi-video-bleed .pb-video-facade-loaded { max-width: none; margin: 0; border-radius: 0; max-height: 80vh; } .pb-video-facade-autoplay { cursor: default; } .pb-video-facade-autoplay .pb-video-play-btn { display: none; } .pb-video-facade-loaded.pb-video-facade-autoplay { position: relative; overflow: hidden; } .pb-video-facade-loaded.pb-video-facade-autoplay > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; pointer-events: none; } .pb-video-facade-loaded.pb-video-facade-autoplay .pb-video-facade-shield { position: absolute; inset: 0; z-index: 1; background: transparent; cursor: default; } .pb-project-detail-tags:empty { display: none; } .pb-project-detail-tags-wrap { margin-top: 44px; } .pb-project-detail-tags-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v2-ink-soft); opacity: 0.75; margin: 0 0 10px; } .pb-project-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .pb-tag { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--v2-surface); border: 1px solid var(--v2-border); color: var(--v2-ink-soft); font-size: 0.85rem; text-decoration: none; transition: all 0.2s ease; } .pb-tag:hover { border-color: var(--brand-main); color: var(--brand-accent-ink, var(--brand-main)); } .pb-lightbox-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; } .pb-lightbox-tags .pb-tag { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #f1f1f3; } .pb-lightbox-tags .pb-tag:hover { border-color: #fff; color: #fff; } .pb-tags-section { padding: 48px 0; } .pb-tags-heading { text-align: center; font-size: 1.6rem; font-weight: 700; margin: 0 0 24px; color: var(--v2-ink); } .pb-tags-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .pb-similar-projects { padding: 36px 0 6px; } .pb-similar-projects-heading, .pb-similar-projects .pb-blog-related-heading { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v2-ink-soft); opacity: 0.8; margin: 0 0 16px; text-align: center; } .pb-related-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 200px)); justify-content: center; gap: 14px; } .pb-related-mini-card { display: flex; flex-direction: column; text-decoration: none; color: var(--v2-ink); background: var(--v2-surface-alt); border: 1px solid var(--v2-border); border-radius: 10px; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .pb-related-mini-card:hover { border-color: var(--brand-accent-ink, var(--brand-main)); transform: translateY(-2px); } .pb-related-mini-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--v2-surface); } .pb-related-mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .pb-related-mini-card:hover .pb-related-mini-thumb img { transform: scale(1.04); } .pb-related-mini-body { padding: 8px 10px 10px; } .pb-related-mini-title { display: block; font-size: 0.82rem; font-weight: 600; line-height: 1.35; color: var(--v2-ink); } .pb-related-mini-loc { display: block; font-size: 0.72rem; font-weight: 400; color: var(--v2-ink-soft); opacity: 0.85; margin-top: 2px; } @media (max-width: 480px) { .pb-related-mini-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 160px)); gap: 10px; } } .pb-tag-detail { padding-top: 14px; } .pb-tag-detail-title { font-size: 2.1rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 16px; } .pb-tag-detail-desc { max-width: 800px; line-height: 1.8; color: var(--v2-ink-soft); margin-bottom: 32px; font-size: 1.02rem; } .pb-tag-detail-empty { color: var(--v2-ink-soft); padding: 20px 0 40px; } .pb-tag-detail-section { padding: 10px 0 46px; } .pb-tag-detail-section-title { font-size: 1.4rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 22px; } .pb-tag-detail-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .pb-tag-detail-image-item { display: block; border-radius: var(--v2-radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--v2-shadow); } .pb-tag-detail-image-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; } .pb-tag-detail-image-item:hover img { transform: scale(1.05); } .pb-tag-detail-pages-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .pb-tag-detail-pages-list a { color: var(--brand-accent-ink, var(--brand-main)); text-decoration: none; font-weight: 600; } .pb-tag-detail-pages-list a:hover { text-decoration: underline; } .pb-tag-detail-similar { padding: 10px 0 46px; } .pb-gallery-toolbar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; } .pb-gallery-toolbar-label { color: var(--v2-ink-soft); font-size: 0.9rem; margin-right: 2px; } .pb-gallery-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-ink-soft); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .pb-gallery-mode-btn:hover { color: var(--v2-ink); border-color: var(--brand-main); } .pb-gallery-mode-btn[aria-pressed="true"] { background: var(--brand-main); border-color: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-project-detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } .pb-gallery-item { margin: 0; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); cursor: pointer; position: relative; } .pb-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; } .pb-gallery-item:hover img { transform: scale(1.04); } .pb-gallery-item:focus-visible { outline: 3px solid var(--brand-main); outline-offset: 2px; } .pb-gallery-mode-grid_modal .pb-gallery-item { aspect-ratio: 4 / 3; } .pb-gallery-mode-grid_modal .pb-gallery-caption { display: none; } .pb-gallery-mode-grid_modal .pb-gallery-item::after, .pb-gallery-mode-sticky_scroll .pb-gallery-item::after { content: ''; position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.55) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E") center/16px no-repeat; opacity: 0; transition: opacity 0.2s; } .pb-gallery-mode-grid_modal .pb-gallery-item:hover::after, .pb-gallery-mode-grid_modal .pb-gallery-item:focus-visible::after, .pb-gallery-mode-sticky_scroll .pb-gallery-item:hover::after, .pb-gallery-mode-sticky_scroll .pb-gallery-item:focus-visible::after { opacity: 1; } .pb-gallery-mode-single_page { display: flex; flex-direction: column; gap: 32px; } .pb-gallery-mode-single_page .pb-gallery-item { aspect-ratio: auto; box-shadow: none; border-radius: var(--v2-radius); background: var(--v2-surface); border: 1px solid var(--v2-border); overflow: hidden; } .pb-gallery-mode-single_page .pb-gallery-item img { width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--v2-surface); } .pb-gallery-mode-single_page .pb-gallery-item:hover img { transform: none; } .pb-gallery-mode-single_page .pb-gallery-caption { display: block; padding: 14px 20px; color: var(--v2-ink-soft); font-size: 0.96rem; line-height: 1.6; border-top: 1px solid var(--v2-border); } .pb-gallery-mode-masonry { display: block; column-count: 3; column-gap: 18px; } .pb-gallery-mode-masonry .pb-gallery-item { break-inside: avoid; margin: 0 0 18px; aspect-ratio: auto; width: 100%; } .pb-gallery-mode-masonry .pb-gallery-item img { height: auto; } .pb-gallery-mode-masonry .pb-gallery-caption { display: block; padding: 10px 14px; color: var(--v2-ink-soft); font-size: 0.92rem; line-height: 1.5; } .pb-gallery-mode-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .pb-gallery-mode-slider .pb-gallery-item { flex: 0 0 80%; scroll-snap-align: start; aspect-ratio: 4/3; } .pb-gallery-mode-slider .pb-gallery-caption { display: none; } @media (min-width: 640px) { .pb-gallery-mode-slider .pb-gallery-item { flex: 0 0 46%; } } @media (min-width: 1024px) { .pb-gallery-mode-slider .pb-gallery-item { flex: 0 0 31.5%; } } .pb-slider-nav { display: flex; justify-content: center; gap: 12px; margin-top: 16px; } .pb-slider-nav-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-ink); cursor: pointer; transition: all 0.2s; } .pb-slider-nav-btn:hover { background: var(--brand-main); border-color: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-gallery-mode-split { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: start; } .pb-split-stage { position: sticky; top: 24px; height: 78vh; } .v2-header-sticky .pb-split-stage { top: calc(var(--v2-header-h, 110px) + 16px); } .pb-split-stage .pb-gallery-item { aspect-ratio: auto; height: 100%; margin: 0; } .pb-split-rail { display: flex; flex-direction: column; gap: 12px; height: 78vh; max-height: 78vh; overflow-y: auto; padding-right: 4px; } .pb-split-rail .pb-gallery-item { aspect-ratio: 4/3; margin: 0; flex-shrink: 0; } .pb-split-rail .pb-gallery-caption { display: none; } .pb-gallery-mode-sticky_scroll { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px; align-items: start; } .pb-scrollstory-stage { position: sticky; top: 24px; height: 78vh; border-radius: 16px; overflow: hidden; box-shadow: var(--v2-shadow); background: var(--v2-surface); } .v2-header-sticky .pb-scrollstory-stage { top: calc(var(--v2-header-h, 110px) + 16px); } .pb-scrollstory-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .pb-scrollstory-frame.is-active { opacity: 1; pointer-events: auto; } .pb-scrollstory-frame .pb-gallery-item { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; } .pb-gallery-mode-sticky_scroll .pb-gallery-caption { display: none; } .pb-gallery-mode-sticky_scroll .pb-sticky-counter { display: none; } .pb-scrollstory-steps { display: flex; flex-direction: column; } .pb-scrollstory-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 8px; opacity: 0.38; transition: opacity 0.35s ease; } .pb-scrollstory-step.is-active { opacity: 1; } .pb-scrollstory-step-count { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; color: var(--brand-accent-ink, var(--brand-main)); margin-bottom: 10px; } .pb-scrollstory-step-caption { font-size: 1.08rem; line-height: 1.75; color: var(--v2-ink); margin: 0; } .pb-lightbox { display: none; position: fixed; inset: 0; z-index: 9999; } .pb-lightbox.is-open { display: flex; flex-direction: column; align-items: center; justify-content: center; } .pb-lightbox-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 11, 0.97); backdrop-filter: blur(6px); } .pb-lightbox-stage { position: relative; z-index: 1; max-width: 92vw; max-height: 74vh; display: flex; align-items: center; justify-content: center; touch-action: pan-y; } .pb-lightbox-img { max-width: 92vw; max-height: 74vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); } .pb-lightbox-info { position: relative; z-index: 1; max-width: 720px; width: 92vw; text-align: center; margin-top: 16px; color: #fff; } .pb-lightbox-caption { font-size: 0.98rem; line-height: 1.6; color: #f1f1f3; } .pb-lightbox-tags:empty { display: none; } .pb-lightbox-counter { margin-top: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; } .pb-lightbox-btn { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; transition: background 0.2s; } .pb-lightbox-btn:hover { background: rgba(255,255,255,0.25); } .pb-lightbox-close { top: 18px; right: 18px; } .pb-lightbox-prev { left: 14px; top: 50%; transform: translateY(-50%); } .pb-lightbox-next { right: 14px; top: 50%; transform: translateY(-50%); } @media (max-width: 768px) { .pb-projects-list { padding: 14px 0 40px; } .pb-projects-list-title { font-size: 1.5rem; } .pb-projects-list-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .pb-project-detail { padding: 14px 0 50px; } .pb-project-detail-title { font-size: 1.5rem; } .pb-project-detail-gallery { grid-template-columns: 1fr; } .pb-gallery-mode-single_page .pb-gallery-item img { max-height: 60vh; } .pb-gallery-mode-masonry { column-count: 2; } .pb-gallery-mode-split { grid-template-columns: 1fr; } .pb-split-stage { position: static; height: auto; } .pb-split-stage .pb-gallery-item { aspect-ratio: 4/3; height: auto; } .pb-split-rail { flex-direction: row; overflow-x: auto; overflow-y: visible; height: auto; max-height: none; } .pb-split-rail .pb-gallery-item { width: 130px; } .pb-gallery-mode-sticky_scroll { display: flex; flex-direction: column; gap: 22px; } .pb-scrollstory-stage { display: contents; } .pb-scrollstory-frame { position: relative; inset: auto; opacity: 1; pointer-events: auto; } .pb-scrollstory-frame .pb-gallery-item { position: relative; width: auto; height: auto; aspect-ratio: 4/3; border-radius: var(--v2-radius); box-shadow: var(--v2-shadow); } .pb-gallery-mode-sticky_scroll .pb-gallery-caption { display: block; } .pb-scrollstory-steps { display: none; } .pb-lightbox-btn { width: 40px; height: 40px; } .pb-lightbox-prev { left: 6px; } .pb-lightbox-next { right: 6px; } .pb-lightbox-close { top: 10px; right: 10px; } } .pb-blog-list { padding: 14px 0 60px; } .pb-blog-list-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 28px; color: var(--v2-ink); } .pb-blog-list-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; } .pb-blog-list-filter { padding: 8px 18px; border-radius: 999px; border: 1px solid var(--v2-border); color: var(--v2-ink-soft); font-size: 0.9rem; text-decoration: none; transition: all 0.2s ease; } .pb-blog-list-filter:hover { border-color: var(--brand-accent-ink, var(--brand-main)); color: var(--brand-accent-ink, var(--brand-main)); } .pb-blog-list-filter.active { background: var(--brand-main); border-color: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-blog-list-empty { text-align: center; color: var(--v2-ink-soft); padding: 40px 0; } .pb-blog-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; } .pb-blog-card { display: flex; flex-direction: column; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); background: var(--v2-surface-card); text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; } .pb-blog-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-3px); } .pb-blog-card-cover { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--v2-surface); } .pb-blog-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .pb-blog-card:hover .pb-blog-card-cover img { transform: scale(1.05); } .pb-blog-card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 999px; background: var(--brand-main); color: var(--brand-contrast, #fff); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } .pb-blog-card-body { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; } .pb-blog-card-cat { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--brand-accent-ink, var(--brand-main)); margin-bottom: 8px; } .pb-blog-card-title { font-size: 1.15rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 10px; line-height: 1.4; } .pb-blog-card-excerpt { color: var(--v2-ink-soft); font-size: 0.92rem; line-height: 1.6; flex: 1; margin-bottom: 12px; overflow-wrap: anywhere; } .pb-blog-card-date { font-size: 0.8rem; color: var(--v2-ink-soft); opacity: 0.85; } .pb-blog-detail { padding: 14px 0 70px; } .pb-blog-detail-cover { border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); margin-bottom: 32px; aspect-ratio: 21/9; background: var(--v2-surface); } .pb-blog-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-blog-detail-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .pb-blog-detail-cat { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--v2-surface); border: 1px solid var(--v2-border); color: var(--brand-accent-ink, var(--brand-main)); font-size: 0.82rem; font-weight: 700; text-decoration: none; } .pb-blog-detail-cat:hover { border-color: var(--brand-main); } .pb-blog-detail-title { font-size: 2.1rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 16px; line-height: 1.3; } .pb-blog-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 36px; color: var(--v2-ink-soft); font-size: 0.92rem; } .pb-blog-detail-meta-item svg { margin-right: 4px; vertical-align: -2px; color: var(--brand-accent-ink, var(--brand-main)); } .pb-blog-detail-bottom-cats, .pb-blog-detail-tags-wrap { margin-top: 40px; } .pb-blog-detail-bottom-cats-label, .pb-blog-detail-tags-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v2-ink-soft); opacity: 0.75; margin: 0 0 10px; } .pb-blog-detail-bottom-cats .pb-blog-detail-cats { margin-bottom: 0; } .pb-share { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--v2-border); } .pb-share-label { font-size: 0.9rem; font-weight: 600; color: var(--v2-ink); margin-right: 4px; } .pb-share-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--v2-border); color: var(--v2-ink-soft); background: var(--v2-surface); cursor: pointer; transition: all 0.2s; text-decoration: none; } .pb-share-btn:hover { border-color: var(--brand-main); color: var(--brand-accent-ink, var(--brand-main)); } .pb-share-btn.is-copied { border-color: #2ecc71; color: #2ecc71; } .pb-share-icon { display: block; width: 18px; height: 18px; background-color: currentColor; -webkit-mask-image: var(--icon-url); mask-image: var(--icon-url); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .pb-copy-icon-check { display: none; } .pb-share-btn.is-copied .pb-copy-icon-default { display: none; } .pb-share-btn.is-copied .pb-copy-icon-check { display: block; animation: pbCopyPop 0.25s ease; } @keyframes pbCopyPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } .pb-share-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--brand-main); color: var(--brand-contrast, #fff); font-size: 0.62rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--v2-surface); } #pb-blog-view-count { white-space: nowrap; } .pb-blog-related { padding: 50px 0 10px; } .pb-blog-related-heading { font-size: 1.5rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 24px; } .pb-blog-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .pb-related-posts-section { padding: 50px 0; } .pb-related-posts-heading { text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--v2-ink); margin: 0 0 26px; } @media (max-width: 768px) { .pb-blog-list { padding: 14px 0 40px; } .pb-blog-list-title { font-size: 1.5rem; } .pb-blog-list-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .pb-blog-detail { padding: 14px 0 50px; } .pb-blog-detail-title { font-size: 1.5rem; } .pb-blog-detail-cover { aspect-ratio: 16/10; } .pb-tag-detail-title { font-size: 1.5rem; } } .pb-video-gallery-section { padding: 60px 0; } .pb-video-gallery-heading { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 36px; color: var(--v2-ink); } .pb-video-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; } .pb-video-gallery-grid[class*="pb-video-gallery-align-"] { display: flex; flex-wrap: wrap; justify-content: flex-start; } .pb-video-gallery-grid.pb-video-gallery-align-center { justify-content: center; } .pb-video-gallery-grid.pb-video-gallery-align-right { justify-content: flex-end; } .pb-video-gallery-grid[class*="pb-video-gallery-align-"] .pb-video-gallery-card { flex: 0 1 300px; max-width: 300px; } .pb-video-gallery-card { display: block; text-decoration: none; color: var(--v2-ink); } .pb-video-gallery-thumb { position: relative; display: block; aspect-ratio: 16/9; border-radius: var(--v2-radius); overflow: hidden; box-shadow: var(--v2-shadow); transition: box-shadow 0.25s ease, transform 0.25s ease; } .pb-video-gallery-card:hover .pb-video-gallery-thumb { box-shadow: var(--v2-shadow-hover); transform: translateY(-3px); } .pb-video-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pb-video-gallery-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.2s ease; } .pb-video-gallery-card:hover .pb-video-gallery-play { background: var(--brand-main); transform: translate(-50%, -50%) scale(1.08); } .pb-video-gallery-caption { display: block; margin-top: 12px; font-weight: 600; font-size: 0.98rem; } .pb-video-gallery-year { color: var(--v2-ink-soft); font-weight: 400; font-size: 0.85rem; margin-left: 6px; } @media (max-width: 768px) { .pb-video-gallery-section { padding: 36px 0; } .pb-video-gallery-heading { font-size: 1.4rem; margin-bottom: 24px; } .pb-video-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .pb-video-gallery-grid[class*="pb-video-gallery-align-"] .pb-video-gallery-card { flex: 0 1 220px; max-width: 220px; } } .pb-nav-strip { background: var(--v2-surface-alt); border-bottom: 1px solid var(--v2-border); border-top: 1px solid var(--v2-border); } .pb-nav-strip-inner { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 14px 20px; justify-content: center; } .pb-nav-strip-item { display: inline-block; padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--v2-ink-soft); font-weight: 600; font-size: 0.9rem; border: 1.5px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .pb-nav-strip-item:hover { color: var(--v2-ink); border-color: var(--v2-border); } .pb-nav-strip-item.active { color: var(--brand-contrast, #fff); background: var(--brand-main); border-color: var(--brand-main); } @media (max-width: 768px) { .pb-nav-strip-inner { padding: 10px 14px; gap: 6px 8px; } .pb-nav-strip-item { padding: 7px 13px; font-size: 0.85rem; } } .pb-contact-info-section { padding: 60px 0; } .pb-contact-info-heading { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 36px; color: var(--v2-ink); } .pb-contact-info-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 270px)); justify-content: center; gap: 20px; max-width: 1180px; margin: 0 auto; } .pb-contact-info-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--v2-radius); background: var(--v2-surface-card); border: 1px solid var(--v2-border); } .pb-contact-info-icon { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-main); color: var(--brand-contrast, #fff); } .pb-contact-info-text { display: flex; flex-direction: column; min-width: 0; } .pb-contact-info-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--v2-ink-soft); margin-bottom: 3px; } .pb-contact-info-value { color: var(--v2-ink); font-weight: 600; font-size: 1rem; text-decoration: none; overflow-wrap: anywhere; } a.pb-contact-info-value:hover { color: var(--brand-accent-ink, var(--brand-main)); text-decoration: underline; } @media (max-width: 768px) { .pb-contact-info-section { padding: 36px 0; } .pb-contact-info-heading { font-size: 1.4rem; margin-bottom: 24px; } .pb-contact-info-list { grid-template-columns: 1fr; } } .pb-project-ref-table-section { padding: 60px 0; } .pb-project-ref-table-heading { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 36px; color: var(--v2-ink); } .pb-project-ref-table-empty { text-align: center; color: var(--v2-ink-soft); } .pb-project-ref-table-year-group { max-width: 860px; margin: 0 auto 36px; } .pb-project-ref-table-year { font-size: 1.2rem; font-weight: 700; color: var(--brand-accent-ink, var(--brand-main)); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--v2-border); } .pb-project-ref-table-list { list-style: none; margin: 0; padding: 0; } .pb-project-ref-table-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--v2-border); } .pb-project-ref-table-row:last-child { border-bottom: none; } .pb-project-ref-table-name { color: var(--v2-ink); font-weight: 600; text-decoration: none; } .pb-project-ref-table-name:hover { color: var(--brand-accent-ink, var(--brand-main)); text-decoration: underline; } .pb-project-ref-table-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.85rem; color: var(--v2-ink-soft); } .pb-project-ref-table-meta-item svg { margin-right: 3px; vertical-align: -2px; } @media (max-width: 768px) { .pb-project-ref-table-section { padding: 36px 0; } .pb-project-ref-table-heading { font-size: 1.4rem; margin-bottom: 24px; } .pb-project-ref-table-row { flex-direction: column; align-items: flex-start; gap: 4px; } } .pb-client-logo-gallery-section { padding: 56px 0; } .pb-client-logo-gallery-heading { text-align: center; font-size: 1.8rem; font-weight: 700; margin: 0 0 32px; color: var(--v2-ink); } .pb-client-logo-gallery-fullwrap { width: 100%; padding: 0; } .pb-client-logo-group { margin-bottom: 34px; } .pb-client-logo-group:last-child { margin-bottom: 0; } .pb-client-logo-group-title { text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--v2-ink-soft); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 18px; } .pb-client-logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; align-items: center; } .pb-client-logo-gallery-full .pb-client-logo-grid { padding: 0 20px; } .pb-client-logo-item { display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--v2-surface-card); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); height: 90px; } .pb-client-logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(0.15); opacity: 0.9; transition: opacity 0.2s ease, filter 0.2s ease; } .pb-client-logo-item:hover img { opacity: 1; filter: grayscale(0); } .pb-client-logo-track { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .pb-client-logo-track-inner { display: flex; gap: 18px; width: max-content; animation: pbClgScroll 28s linear infinite; } .pb-client-logo-track:hover .pb-client-logo-track-inner { animation-play-state: paused; } .pb-client-logo-track .pb-client-logo-item { flex: none; width: 160px; } @keyframes pbClgScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 768px) { .pb-client-logo-gallery-section { padding: 32px 0; } .pb-client-logo-gallery-heading { font-size: 1.4rem; margin-bottom: 22px; } .pb-client-logo-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; } .pb-client-logo-item { height: 70px; padding: 10px; } } @media (prefers-reduced-motion: reduce) { .pb-client-logo-track-inner { animation: none; } }