/* === tokens.css === */ /* ===================================================================== LANDING FACTORY — Color Token Engine (tokens.css) Изменяй ТОЛЬКО 4 базовых токена на :root (инжектируются из sites.json). Все ~85 производных пересчитываются автоматически через color-mix(in oklab). НЕ ПИШИ hex в шаблонах — только var(--...) ===================================================================== */ /* === Base defaults. Реальные значения инжектируются inline на из sites.json === */ :root { --brand: #c8a96e; --surface: #ffffff; --ink: #111010; --on-brand: #111010; } /* === Derived — живут на body, пересчитываются при смене темы === */ body { /* Font defaults — overridden by inline style when display_font/body_font set in sites.json */ --display-font: 'Playfair Display', serif; --body-font: 'Inter', sans-serif; /* Foundation */ --s-page-bg: color-mix(in oklab, var(--surface) 98%, var(--ink)); --s-bg-light: var(--surface); --s-bg-mid: color-mix(in oklab, var(--surface) 92%, var(--ink)); --s-bg-bold: var(--ink); --s-bg-hero: var(--ink); --s-hero-overlay: rgba(0,0,0,0.52); --s-header-bg: var(--ink); --s-footer-bg: var(--ink); /* Typography light */ --s-heading: var(--ink); --s-text: color-mix(in oklab, var(--ink) 88%, var(--surface)); --s-text-muted: color-mix(in oklab, var(--ink) 55%, var(--surface)); /* Typography bold/dark sections */ --s-heading-bold: var(--surface); --s-text-bold: color-mix(in oklab, var(--surface) 92%, var(--ink)); --s-text-muted-bold: color-mix(in oklab, var(--surface) 55%, var(--ink)); /* Links, labels, em */ --s-link: var(--brand); --s-link-hover: color-mix(in oklab, var(--brand) 80%, var(--ink)); --s-section-label: var(--brand); --s-em: var(--brand); /* Brand variants */ --primary: var(--brand); --primary-hover: color-mix(in oklab, var(--brand) 85%, var(--ink)); --primary-soft: color-mix(in oklab, var(--brand) 18%, transparent); --gold: var(--brand); --gold-light: color-mix(in oklab, var(--brand) 65%, var(--surface)); --dark: var(--ink); --on-accent: var(--on-brand); --on-dark: var(--surface); /* Cards */ --s-card-bg: var(--surface); --s-card-bg-hover: color-mix(in oklab, var(--surface) 96%, var(--ink)); --s-card-border: color-mix(in oklab, var(--ink) 10%, transparent); --s-card-border-hover: color-mix(in oklab, var(--brand) 50%, transparent); --s-card-shadow: 0 10px 24px color-mix(in oklab, var(--ink) 10%, transparent); --s-divider: color-mix(in oklab, var(--ink) 8%, transparent); /* Buttons */ --btn-primary-bg: var(--brand); --btn-primary-text: var(--on-brand); --btn-primary-hover: color-mix(in oklab, var(--brand) 85%, var(--ink)); --btn-ghost-bg: transparent; --btn-ghost-text: var(--ink); --btn-ghost-border: color-mix(in oklab, var(--ink) 14%, transparent); --btn-ghost-hover: color-mix(in oklab, var(--surface) 95%, var(--ink)); --btn-header-bg: var(--brand); --btn-header-text: var(--on-brand); --btn-disabled-bg: color-mix(in oklab, var(--ink) 10%, var(--surface)); --btn-disabled-text: color-mix(in oklab, var(--ink) 40%, var(--surface)); /* Forms */ --input-bg: var(--surface); --input-border: color-mix(in oklab, var(--ink) 16%, transparent); --input-border-focus: var(--brand); --input-text: color-mix(in oklab, var(--ink) 92%, var(--surface)); --input-label: color-mix(in oklab, var(--ink) 55%, var(--surface)); --input-label-active: var(--brand); --input-placeholder: color-mix(in oklab, var(--ink) 40%, var(--surface)); /* States */ --focus-ring: color-mix(in oklab, var(--brand) 35%, transparent); --selection-bg: color-mix(in oklab, var(--brand) 22%, transparent); --shadow-sm: 0 2px 6px color-mix(in oklab, var(--ink) 8%, transparent); --shadow-md: 0 8px 20px color-mix(in oklab, var(--ink) 12%, transparent); --shadow-lg: 0 20px 48px color-mix(in oklab, var(--ink) 18%, transparent); /* Fixed — внешние бренды и семантика, НЕ выводить из --brand */ --btn-wa-bg: #25d366; --btn-viber-bg: #7360f2; --btn-tg-bg: #2aabee; --input-error: #d4493a; --input-success: #2f8e5e; /* Backward-compat aliases */ --cta: var(--dark); --brand-light: var(--gold-light); } /* ── Пресеты ───────────────────────────────────────────────────────── */ body.theme-light { --brand:#c8a96e; --surface:#ffffff; --ink:#111010; --on-brand:#111010; } body.theme-warm { --brand:#c8a96e; --surface:#fdf8f3; --ink:#2a1005; --on-brand:#111010; } body.theme-technical { --brand:#fbbf24; --surface:#0d1117; --ink:#e6edf4; --on-brand:#0d1117; } body.theme-mono { --brand:#0a0a0a; --surface:#ffffff; --ink:#0a0a0a; --on-brand:#ffffff; } body.theme-emerald { --brand:#10b981; --surface:#f4faf7; --ink:#0c1f17; --on-brand:#ffffff; } body.theme-rose { --brand:#c8926a; --surface:#fdf9f7; --ink:#1a0e0e; --on-brand:#ffffff; } /* ── Niched presets ─────────────────────────────────────────────── */ /* Beauty / Salon */ body.theme-blush { --brand:#d4607a; --surface:#fef8fa; --ink:#2a0a14; --on-brand:#ffffff; } body.theme-pearl { --brand:#b8976a; --surface:#fdfcfa; --ink:#1a1614; --on-brand:#1a1614; } /* Food & Cafe */ body.theme-espresso { --brand:#e8a87c; --surface:#1a0f08; --ink:#f5ede6; --on-brand:#1a0f08; } body.theme-bistro { --brand:#c0522a; --surface:#faf4ec; --ink:#2d1506; --on-brand:#ffffff; } /* Auto / Service */ body.theme-garage { --brand:#e53935; --surface:#0e0e0e; --ink:#e8e8e8; --on-brand:#ffffff; } body.theme-pro-service{ --brand:#1e88e5; --surface:#f4f8fc; --ink:#0d1b2a; --on-brand:#ffffff; } /* Masters / Craft */ body.theme-craftsman { --brand:#d4843a; --surface:#faf6f0; --ink:#1e1208; --on-brand:#ffffff; } body.theme-workshop { --brand:#ffd600; --surface:#0e0e0e; --ink:#e8e8e8; --on-brand:#0e0e0e; } /* ── bgSlot ────────────────────────────────────────────────────────── */ .bg-slot-a { background: var(--s-bg-light); color: var(--s-text); } .bg-slot-b { background: var(--s-bg-mid); color: var(--s-text); } /* === style.css === */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body-font);line-height:1.6;background:var(--s-bg-mid);color:var(--s-text)} a{text-decoration:none;color:inherit} img{display:block;max-width:100%} /* HEADER */ header{background:transparent;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between;position:absolute;top:0;left:0;right:0;z-index:100} .logo{font-family:var(--display-font);font-size:21px;color:#fff;letter-spacing:0.03em} nav{display:flex;gap:36px;align-items:center} nav a{color:rgba(255,255,255,0.70);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;transition:color 0.2s} nav a:hover{color:#fff} .btn-header{background:var(--btn-header-bg) !important;color:var(--btn-header-text) !important;padding:10px 24px;border-radius:var(--lf-radius-btn, 2px);font-size:11px !important;font-weight:600 !important;letter-spacing:0.12em !important;text-transform:uppercase !important;transition:background 0.2s} .btn-header:hover{background:var(--primary-hover) !important} /* HERO */ .hero{position:relative;height:100svh;display:flex;align-items:stretch;overflow:hidden} .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center top} .hero-overlay{position:absolute;inset:0;background:var(--s-hero-overlay)} .hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;height:100%;box-sizing:border-box;padding:clamp(72px,10svh,112px) 48px clamp(32px,5svh,64px);max-width:700px} .hero-label{display:inline-flex;align-items:center;gap:12px;color:var(--brand);font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;margin-bottom:clamp(12px,2svh,32px)} .hero-label::before{content:'';width:36px;height:1px;background:var(--brand)} .hero h1{font-family:var(--display-font);font-size:clamp(40px,min(5.5vw,7.5svh),82px);font-weight:900;line-height:1.05;color:#fff;margin-bottom:clamp(10px,2svh,28px)} .hero h1 em{font-style:italic;color:var(--gold-light)} .hero-sub{color:rgba(255,255,255,0.82);font-size:17px;font-weight:400;max-width:420px;margin-bottom:clamp(20px,4svh,48px);line-height:1.65} .hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);padding:17px 40px;border-radius:var(--lf-radius-btn, 2px);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;transition:background 0.2s;display:inline-block} .btn-primary:hover{background:var(--btn-primary-hover)} .btn-ghost{color:var(--s-text-muted-bold);font-size:13px;display:inline-flex;align-items:center;gap:8px;border-bottom:1px solid color-mix(in oklab,var(--on-dark) 20%,transparent);padding-bottom:2px;transition:color 0.2s,border-color 0.2s} .btn-ghost:hover{color:var(--on-dark);border-color:color-mix(in oklab,var(--on-dark) 50%,transparent)} /* btn-ghost on dark hero background — always override to white */ .hero .btn-ghost{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.28)} .hero .btn-ghost:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)} .hero-stats{display:flex;gap:52px;margin-top:clamp(28px,5svh,80px);padding-top:clamp(16px,3svh,40px);border-top:1px solid rgba(255,255,255,0.15)} .stat-num{font-family:var(--display-font);font-size:38px;font-weight:700;color:#fff;line-height:1;white-space:nowrap} .stat-num span{color:var(--brand);font-size:22px} .stat-label{color:rgba(255,255,255,0.60);font-size:11px;margin-top:6px;letter-spacing:0.06em;text-transform:uppercase} /* SECTION COMMON */ /* bgSlot — defined in tokens.css */ section{padding:100px 48px} .section-label{display:inline-flex;align-items:center;gap:10px;color:var(--brand);font-size:11px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px} .section-label::before{content:'';width:24px;height:1px;background:var(--brand)} .section-title{font-family:var(--display-font);font-size:clamp(32px,4vw,50px);font-weight:700;line-height:1.12;margin-bottom:52px;max-width:560px;color:var(--s-heading)} /* SERVICES */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2px;background:var(--s-card-border);border:2px solid var(--s-card-border)} .service-item{background:var(--s-card-bg);padding:36px 32px;display:flex;justify-content:space-between;align-items:flex-start;transition:background 0.25s} .service-item:hover{background:var(--dark)} .service-item:hover .service-name{color:var(--on-dark)} .service-item:hover .service-desc{color:var(--s-text-muted-bold)} .service-item:hover .service-price{color:var(--brand)} .service-name{font-family:var(--display-font);font-size:17px;font-weight:600;transition:color 0.25s;color:var(--s-text)} .service-desc{font-size:13px;color:var(--s-text-muted);margin-top:6px;transition:color 0.25s} .service-price{font-family:var(--display-font);font-size:22px;font-weight:700;color:var(--s-text);padding-left:24px;transition:color 0.25s;text-align:right;word-break:break-word;min-width:0} .service-item--stacked{flex-direction:column;gap:8px} .service-item--stacked .service-price{padding-left:0;text-align:left;font-size:17px} /* GALLERY */ .gallery{padding:80px 48px} /* TEAM */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px} .team-card{background:var(--s-card-bg);overflow:hidden} .team-photo{width:100%;height:320px;object-fit:cover;object-position:top;filter:grayscale(20%);transition:filter 0.3s} .team-card:hover .team-photo{filter:grayscale(0%)} .team-info{padding:28px 28px 32px} .team-name{font-family:var(--display-font);font-size:22px;font-weight:700;margin-bottom:4px} .team-role{color:var(--brand);font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px} .team-bio{font-size:14px;color:var(--s-text-muted);line-height:1.75} /* FOOTER */ footer{background:var(--s-footer-bg);padding:28px 48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px} .footer-logo{font-family:var(--display-font);font-size:15px;color:var(--s-text-muted-bold)} .footer-copy{font-size:11px;color:color-mix(in oklab,var(--on-dark) 30%,transparent);letter-spacing:0.06em} .footer-links{display:flex;gap:20px} .footer-links a{font-size:11px;color:color-mix(in oklab,var(--on-dark) 35%,transparent);letter-spacing:0.06em;transition:color 0.2s} .footer-links a:hover{color:var(--brand)} /* LANG SWITCHER */ .lang-switcher{display:flex;gap:4px;margin-left:16px} .lang-btn{background:transparent;border:1px solid color-mix(in oklab,var(--on-dark) 25%,transparent);color:color-mix(in oklab,var(--on-dark) 55%,transparent);padding:5px 10px;min-height:44px;display:inline-flex;align-items:center;border-radius:2px;font-size:10px;font-weight:600;letter-spacing:0.1em;cursor:pointer;transition:all 0.2s;font-family:var(--body-font)} .lang-btn:hover{border-color:color-mix(in oklab,var(--on-dark) 60%,transparent);color:var(--on-dark)} .lang-btn--active{border-color:var(--brand);color:var(--brand)} .menu-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:9px;background:transparent;border:0;cursor:pointer;margin-left:12px;z-index:101} .menu-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s;filter:drop-shadow(0 0 2px rgba(0,0,0,.7))} .menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-toggle.is-active span:nth-child(2){opacity:0} .menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* SOCIAL CALLBACK FLOAT */ .social-callback-float{position:fixed;bottom:32px;right:24px;z-index:999;display:flex;flex-direction:column;gap:12px;align-items:center} .scb-float-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.22);transition:transform 0.2s,box-shadow 0.2s} .scb-float-btn:hover{transform:scale(1.08);box-shadow:0 8px 28px rgba(0,0,0,0.3)} .scb-wa{background:#25D366} .scb-viber{background:#7360f2} .scb-telegram{background:#0088cc} /* PRICE LIST */ .price-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} /* bold variant overrides */ /* CONTACT FORM — base (variants defined further below) */ /* PRIVACY POLICY */ .privacy-policy{background:var(--s-card-bg);padding:80px 48px} .privacy-inner{max-width:900px;margin:0 auto} .privacy-policy h2{font-family:var(--display-font);font-size:clamp(22px,2.5vw,32px);font-weight:700;margin-bottom:24px} .privacy-modal{display:none;position:fixed;inset:0;z-index:9999;align-items:center;justify-content:center} .privacy-modal.is-open{display:flex} .privacy-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(3px)} .privacy-modal-box{position:relative;z-index:1;background:var(--s-card-bg);border-radius:4px;max-width:720px;width:90%;max-height:85vh;overflow-y:auto;padding:52px 48px;margin:auto} .privacy-modal-close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:28px;cursor:pointer;color:#aaa;line-height:1;transition:color 0.2s} .privacy-modal-close:hover{color:var(--s-heading)} .privacy-policy p,.privacy-policy li{font-size:14px;color:var(--s-text-muted);line-height:1.85;margin-bottom:12px} .privacy-policy ul{padding-left:20px;margin-bottom:12px} .privacy-policy li{list-style:disc} .privacy-policy a{color:var(--brand);text-decoration:underline} /* TRUSTBAR */ .trustbar{padding:28px 48px} .trustbar__list{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;list-style:none} .trustbar__item{display:flex;align-items:center;gap:10px;color:var(--s-text-muted);font-size:13px;font-weight:500} .trustbar__icon{font-size:18px;color:var(--brand)} /* ===== THEME: WARM ===== */ .theme-warm{--display-font:'Cormorant Garamond',serif} .theme-warm .btn-primary,.theme-warm .wa-btn,.theme-warm .viber-btn{border-radius:6px} .theme-warm .btn-header{border-radius:6px !important} /* .theme-warm services bg — теперь через var(--s-bg-light) */ .theme-warm .services-grid{background:transparent;border:none;gap:12px} .theme-warm .service-item{border-radius:6px;border:1px solid rgba(0,0,0,0.07)} .theme-warm .service-item:hover{background:var(--cta);border-color:transparent} .theme-warm .team-card{border-radius:8px;overflow:hidden} /* .theme-warm faq bg — теперь через var(--s-bg-mid) */ /* .theme-warm process bg — теперь через var(--s-bg-light) */ /* ===== THEME: ELEGANT ===== */ .theme-elegant .btn-primary,.theme-elegant .wa-btn,.theme-elegant .viber-btn{border-radius:32px} .theme-elegant .btn-header{border-radius:32px !important} /* .theme-elegant .services bg — equals root default, removed to fix specificity */ .theme-elegant .services-grid{background:transparent;border:none;gap:16px} .theme-elegant .service-item{border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow:0 2px 16px rgba(0,0,0,0.04)} .theme-elegant .service-item:hover{background:var(--cta);border-color:transparent;box-shadow:none} .theme-elegant .hero-overlay{background:linear-gradient(160deg,rgba(10,10,10,0.72) 0%,rgba(10,10,10,0.4) 100%)} .theme-elegant .team-card{border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08)} /* .theme-elegant .faq bg — equals root default, removed to fix specificity */ /* .theme-elegant .process bg — equals root default, removed to fix specificity */ .theme-elegant .scb-float-btn{border-radius:10px} /* ===== THEME: TECHNICAL ===== */ .theme-technical{--display-font:'Montserrat',sans-serif;--body-font:'Montserrat',sans-serif;--lf-radius-btn:4px;--lf-radius-card:4px}.theme-technical,.theme-espresso,.theme-garage,.theme-workshop{--on-dark:var(--ink);--dark:var(--surface);--s-footer-bg:var(--surface);--s-bg-bold:var(--surface);--cta:var(--brand)} .theme-technical .hero h1{font-weight:800;letter-spacing:-0.02em} .theme-technical .section-title{font-weight:700;letter-spacing:-0.02em} .theme-technical .logo{font-weight:700;letter-spacing:-0.03em} .theme-technical .btn-primary,.theme-technical .wa-btn,.theme-technical .viber-btn{font-weight:700;letter-spacing:0.06em} .theme-technical .btn-header{border-radius:4px !important} /* services bg — var(--s-bg-light) */ .theme-technical .services .section-label{color:var(--brand)} /* section-title color — var(--s-heading) */ .theme-technical .services-grid{background:var(--s-card-bg);border-color:var(--s-card-border)} .theme-technical .service-item{background:var(--s-bg-light)} .theme-technical .service-item:hover{background:rgba(255,255,255,0.06)} /* service-name — var(--s-text) */ /* service-desc — var(--s-text-muted) */ .theme-technical .service-price{color:var(--brand)} /* process bg — var(--s-bg-light) */ /* process section-title — var(--s-heading) */ /* step-title — var(--s-text) */ /* step-desc — var(--s-text-muted) */ /* faq bg — var(--s-bg-mid) */ /* faq section-title — var(--s-heading) */ /* faq-item border — var(--s-divider) */ /* faq-item first border — var(--s-divider) */ /* faq-q color — var(--s-text) */ /* faq-a color — var(--s-text-muted) */ /* reviews bg — var(--s-bg-light) */ /* review-card bg/border — var(--s-card-bg)/var(--s-card-border) */ /* review-text — var(--s-text-muted) */ /* review-name — var(--s-text) */ /* review-meta — var(--s-text-muted) */ /* ══════════════════════════════════════════════════════════════════ VARIANT: HERO ═══════════════════════════════════════════════════════════════════ */ /* HERO -- SPLIT */ .hero--split{height:100svh;display:grid;grid-template-columns:1.2fr 0.8fr;grid-template-rows:1fr;position:relative} .hero-split-text{background:var(--surface);display:flex;align-items:center;padding:0;border-right:1px solid color-mix(in oklab,var(--ink) 8%,transparent);position:relative} .hero-split-inner{padding:88px 56px 72px;max-width:640px;width:100%;color:var(--ink)} .hero-split-image{position:relative;overflow:hidden;min-height:0} .hero-split-img-wrap{position:absolute;inset:0} .hero-split-img-wrap img{width:100%;height:100%;object-fit:cover;display:block} .hero-split-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.3) 0%,transparent 60%)} .hero-stats--split{display:flex;gap:32px;margin-top:52px;padding-top:32px;border-top:1px solid color-mix(in oklab,var(--ink) 15%,transparent);flex-wrap:wrap} .hero-split-text::before{content:'';position:absolute;top:0;left:0;right:0;height:96px;background:linear-gradient(to bottom,rgba(0,0,0,0.38) 0%,transparent 100%);z-index:1;pointer-events:none} .hero--split h1{color:var(--ink)} .hero--split .hero-sub{color:color-mix(in oklab,var(--ink) 72%,var(--surface))} .hero--split .hero-label{color:var(--brand)} .hero--split .stat-num{color:var(--brand)} .hero--split .stat-label{color:color-mix(in oklab,var(--ink) 60%,transparent)} /* HERO -- BOLD */ .hero--bold{position:relative;height:100svh;display:flex;align-items:stretch;overflow:hidden} .hero-overlay--bold{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.58) 42%,rgba(0,0,0,0.10) 100%)} .hero-bold-deco{display:none} .hero-inner--bold{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;box-sizing:border-box;padding:0 48px clamp(32px,6svh,64px);max-width:720px} .hero-label--centered{justify-content:flex-start} .hero-h1--bold{font-size:clamp(50px,6vw,88px);color:#fff} .hero-sub--bold{max-width:520px;margin-bottom:44px} .hero-actions--centered{justify-content:flex-start} .btn-primary--lg{padding:18px 52px;font-size:16px} .hero-stats--bold{display:flex;justify-content:flex-start;gap:52px;margin-top:52px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.12);flex-wrap:wrap} .hero-stat-item--bold{text-align:left} /* ══════════════════════════════════════════════════════════════════ VARIANT: SERVICES ═══════════════════════════════════════════════════════════════════ */ /* SERVICES -- SPLIT / ZIGZAG */ .services-split-header{padding:80px 48px 48px} .services-zigzag{display:flex;flex-direction:column} .service-row{display:grid;grid-template-columns:0.8fr 1.2fr;align-items:center;gap:0;border-top:1px solid var(--s-card-border)} .service-row--reverse{direction:rtl} .service-row--reverse .service-row-content{direction:ltr} .service-row--reverse .service-row-icon{direction:ltr} .service-row-icon{display:flex;align-items:center;justify-content:center;font-size:clamp(52px,6vw,80px);font-family:var(--display-font);font-weight:900;color:var(--brand);background:var(--s-bg-mid);min-height:180px;opacity:0.85} .service-row-content{padding:44px 52px} .service-row-name{font-family:var(--display-font);font-size:22px;font-weight:700;color:var(--s-text);margin-bottom:10px} .service-row-desc{font-size:15px;color:var(--s-text-muted);line-height:1.8;margin-bottom:16px} .service-row-price{font-size:13px;font-weight:600;color:var(--brand);letter-spacing:0.06em;text-transform:uppercase} /* SERVICES -- BOLD */ .services--bold .section-label::before{background:var(--brand)} .services-bold-grid{display:flex;flex-direction:column;gap:2px;margin-top:40px} .service-bold-card{display:grid;grid-template-columns:96px 1fr minmax(100px,160px);align-items:start;gap:24px;padding:32px 40px;background:var(--s-card-bg);border-left:3px solid transparent;border-bottom:1px solid var(--s-divider);transition:border-color .25s,background .25s} .service-bold-card:hover{border-left-color:var(--brand)} .service-bold-num{font-family:var(--display-font);font-size:48px;font-weight:900;color:var(--s-divider);line-height:1;text-align:center} .service-bold-name{font-family:var(--display-font);font-size:21px;font-weight:700;color:var(--s-heading);margin-bottom:6px} .service-bold-desc{font-size:14px;color:var(--s-text-muted);line-height:1.75} .service-bold-price{font-size:13px;font-weight:600;color:var(--brand);letter-spacing:0.08em;text-transform:uppercase;word-break:break-word;min-width:0} /* ══════════════════════════════════════════════════════════════════ ═══════════════════════════════════════════════════════════════════ */ /* --- Standard --- */ /* --- Split / Table --- */ /* --- Bold / Dark Cards --- */ /* ══════════════════════════════════════════════════════════════════ TEAM VARIANTS ═══════════════════════════════════════════════════════════════════ */ /* --- Standard --- */ .team--standard{padding-top:80px;padding-bottom:80px} .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:32px} .team-card{border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08)} .team-photo{width:100%;aspect-ratio:3/4;object-fit:cover} .team-info{padding:20px} .team-name{font-family:var(--display-font);font-size:20px;font-weight:700;margin-bottom:4px} .team-role{font-size:13px;color:var(--cta);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px} .team-bio{font-size:14px;opacity:.65;line-height:1.7} /* --- Split --- */ .team--split{padding-top:80px;padding-bottom:80px} .team-split-list{display:flex;flex-direction:column;gap:48px} .team-split-row{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:center} .team-split-row--rev{grid-template-columns:1fr 260px} .team-split-row--rev .team-split-photo-wrap{order:2} .team-split-row--rev .team-split-body{order:1} .team-split-photo-wrap{border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.12)} .team-split-photo{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .team-split-name{font-family:var(--display-font);font-size:26px;font-weight:700;margin-bottom:6px} .team-split-role{font-size:13px;color:var(--brand);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px} .team-split-bio{font-size:15px;opacity:.7;line-height:1.8} /* --- Bold --- */ .team-bold-heading{font-family:var(--display-font);font-size:clamp(26px,4vw,42px);font-weight:700;color:var(--s-heading);margin-bottom:48px} .team-bold-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px} .team-bold-card{border-radius:16px;overflow:hidden;border:1px solid var(--s-card-border);background:var(--s-card-bg);transition:border-color .2s} .team-bold-card:hover{border-color:var(--brand)} .team-bold-photo{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} .team-bold-info{padding:20px} .team-bold-name{font-family:var(--display-font);font-size:20px;font-weight:700;color:var(--s-heading);margin-bottom:4px} .team-bold-role{font-size:12px;color:var(--brand);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .team-bold-bio{font-size:13px;color:var(--s-text-muted);line-height:1.7} /* ══════════════════════════════════════════════════════════════════ TRUSTBAR VARIANTS ═══════════════════════════════════════════════════════════════════ */ /* --- Standard --- */ .trustbar--standard{padding:20px 0} .trustbar--standard .trustbar__list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 32px} .trustbar--standard .trustbar__item{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--s-text)} .trustbar--standard .trustbar__icon{font-size:18px} /* --- Split / Cards --- */ .trustbar--split{padding:64px 0;color:var(--s-text)} .trustbar-split-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;max-width:1100px;margin:0 auto;padding:0 40px} .trustbar-split-card{background:var(--s-card-bg);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border:1px solid var(--s-card-border);transition:box-shadow .2s} /* trustbar-split-card — теперь через var(--s-card-bg) / var(--s-card-border) */ .trustbar-split-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.09)} .trustbar-split-icon{font-size:32px} .trustbar-split-text{font-size:14px;font-weight:500;color:var(--s-text-muted);line-height:1.5} /* --- Bold --- */ .trustbar--bold{padding:20px 0} .trustbar-bold-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:0;border-top:1px solid var(--s-divider);border-bottom:1px solid var(--s-divider)} .trustbar-bold-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 40px;border-right:1px solid var(--s-divider)} .trustbar-bold-item:last-child{border-right:none} .trustbar-bold-icon{font-size:28px} .trustbar-bold-text{font-size:13px;color:var(--s-text-muted);text-align:center;font-weight:500;max-width:160px;line-height:1.4} /* ══════════════════════════════════════════════════════════════════ GALLERY VARIANTS ═══════════════════════════════════════════════════════════════════ */ /* --- Standard --- */ .gallery--standard{padding-top:80px;padding-bottom:80px} .gallery-std-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .gallery-std-item{border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--s-card-bg);border:1px solid var(--s-card-border)} .gallery-std-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease,filter .3s} .gallery-std-item:hover img{transform:scale(1.04);filter:brightness(1.05)} /* --- Split --- */ .gallery--split{padding-top:80px;padding-bottom:80px} .gallery-split-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start} .gallery-split-featured{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3} .gallery-split-featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .gallery-split-featured:hover img{transform:scale(1.03)} .gallery-split-rest{display:grid;grid-template-columns:1fr 1fr;gap:12px} .gallery-split-thumb{border-radius:10px;overflow:hidden;aspect-ratio:1/1} .gallery-split-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .gallery-split-thumb:hover img{transform:scale(1.06)} /* --- Bold --- */ .gallery--bold{padding-top:80px;padding-bottom:80px} .gallery-bold-inner{max-width:1200px;margin:0 auto} .gallery-bold-title{font-family:var(--display-font);font-size:clamp(26px,4vw,42px);font-weight:700;color:var(--s-heading);margin-bottom:32px} .gallery-bold-mosaic{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:280px 280px;gap:6px} .gallery-bold-item{position:relative;overflow:hidden;cursor:pointer} .gallery-bold-item--featured{grid-row:span 2} .gallery-bold-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .4s} .gallery-bold-item:hover img{transform:scale(1.06);filter:brightness(.65)} .gallery-bold-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,transparent 55%);opacity:0;transition:opacity .3s;font-size:14px;color:var(--on-dark);font-weight:500;letter-spacing:.02em} .gallery-bold-item:hover .gallery-bold-overlay{opacity:1} .gallery-bold-item--featured .gallery-bold-overlay{font-size:16px;font-family:var(--display-font);font-weight:600} /* ══════════════════════════════════════════════════════════════════ NEW VARIANTS RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media(max-width:900px){ /* base */ header{padding:0 24px} section{padding:72px 24px} .hero-inner{padding:100px 24px 60px} footer{padding:24px;flex-direction:column;text-align:center} .footer-links{justify-content:center} /* price list */ .price-items{grid-template-columns:1fr} /* contact form */ /* process */ /* team */ .team-split-row,.team-split-row--rev{grid-template-columns:1fr;text-align:center} .team-split-row--rev .team-split-photo-wrap{order:0} .team-split-row--rev .team-split-body{order:0} .team-split-photo-wrap{max-width:260px;margin:0 auto} /* contacts */ /* trustbar */ .trustbar-bold-item{border-right:none;border-bottom:1px solid rgba(255,255,255,0.07);width:100%} /* gallery */ .gallery-std-grid{grid-template-columns:1fr 1fr} .gallery-bold-mosaic{grid-template-columns:1fr;grid-template-rows:auto} .gallery-bold-item--featured{grid-row:auto;aspect-ratio:16/9} .gallery-bold-item:not(.gallery-bold-item--featured){aspect-ratio:4/3} .gallery-split-layout{grid-template-columns:1fr} .gallery-split-featured{aspect-ratio:16/9} } @media(max-width:600px){ /* base */ .hero h1{font-size:clamp(38px,10vw,60px)} .hero{min-height:100svh;height:auto} .menu-toggle{display:flex;background:rgba(0,0,0,.35);border-radius:8px;backdrop-filter:blur(4px)} .logo{margin-right:auto;font-size:17px;max-width:calc(100% - 180px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} header{position:fixed;background:color-mix(in oklab,var(--dark) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} nav{display:flex;position:fixed;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--dark,#111);padding:8px 24px 18px;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 14px 26px rgba(0,0,0,.28);transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:99} nav.is-open{opacity:1;visibility:visible;transform:translateY(0)} nav a{padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.08);font-size:13px} nav .btn-header{margin-top:12px;text-align:center;padding:14px 24px;border-bottom:0} /* hero: prevent overlap with fixed header on small screens */ .hero-inner{justify-content:flex-start;padding-top:116px} .hero-inner--bold{padding-bottom:40px} .hero-actions{flex-direction:column;align-items:flex-start;gap:12px} .hero .btn-ghost{font-size:14px;padding-bottom:4px} .hero-actions--centered{align-items:center} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gallery-std-grid{grid-template-columns:1fr} .gallery-split-rest{grid-template-columns:1fr} .template-grid{grid-template-columns:1fr} /* blocks */ .trustbar-split-grid{padding:0 20px} } /* ============================================================= price_list block — redesigned Theme-neutral: relies only on --s-* / --cta / --brand ============================================================= */ /* Tokens local to this block (lets us tune density once) */ .price-list { --pl-pad-y: 56px; /* down from 80px */ --pl-pad-x: 24px; --pl-max-w: 1120px; --pl-row-py: 16px; --pl-row-gap: 0; --pl-cat-gap: 28px; /* between category groups */ --pl-header-gap: 28px; /* heading → content */ --pl-radius: 12px; --pl-leader: rgba(0,0,0,0.18); } /* In dark themes leader dots need to be light */ .theme-technical .price-list, .price-list--bold { --pl-leader: rgba(255,255,255,0.22); } .price-list { position: relative; padding: var(--pl-pad-y) var(--pl-pad-x); color: var(--s-text); } .price-list > * { max-width: var(--pl-max-w); margin-left: auto; margin-right: auto; } /* ─── shared heading ─── */ .price-list .section-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 10px; } .price-list .section-label::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; } .price-list .section-title { font-family: var(--display-font, inherit); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.1; color: var(--s-heading); margin: 0 0 var(--pl-header-gap); max-width: var(--pl-max-w); text-wrap: balance; } /* Optional intro line under the title (kept tight) */ .price-list .pl-intro { margin: -16px 0 var(--pl-header-gap); color: var(--s-text-muted); font-size: 1rem; max-width: 640px; } /* ─── shared row primitives ─── */ .pl-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 16px; padding: var(--pl-row-py) 0; border-bottom: 1px dashed var(--s-divider, rgba(0,0,0,0.08)); } .pl-row:last-child { border-bottom: 0; } .pl-name { font-weight: 500; color: var(--s-heading); font-size: 1rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pl-desc { display: block; font-size: 0.85rem; color: var(--s-text-muted); font-weight: 400; margin-top: 4px; line-height: 1.45; } .pl-price { font-weight: 600; color: var(--s-heading); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1rem; } /* leader-dot row (price_list--standard) */ .pl-row.is-leader { grid-template-columns: minmax(0, max-content) 1fr max-content; } .pl-row.is-leader .pl-leader { border-bottom: 1px dotted var(--pl-leader); align-self: end; margin: 0 8px 6px; height: 0; } /* pl-photo — thumbnail в прайс-листе (фото блюда, стрижки и т.д.) */ .pl-photo { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; align-self: center; } .pl-row--has-photo { grid-template-columns: 64px 1fr auto; align-items: center; } .pl-row--has-photo.is-leader { grid-template-columns: 64px minmax(0, max-content) 1fr max-content; } @media (max-width: 480px) { .pl-photo { width: 52px; height: 52px; border-radius: 6px; } } /* Featured pin chip — novel idea #2 */ .pl-pin { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: color-mix(in oklab, var(--cta) 18%, transparent); color: var(--cta); border: 1px solid color-mix(in oklab, var(--cta) 35%, transparent); } /* Category heading */ .pl-cat { font-family: var(--display-font, inherit); font-size: 1.2rem; font-weight: 600; color: var(--s-heading); letter-spacing: -0.01em; margin: 0 0 8px; display: flex; align-items: baseline; gap: 12px; } .pl-cat .pl-cat-meta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-text-muted); font-weight: 500; font-family: inherit; } /* "Edge tag" — novel idea, stitches block to neighbour above */ .pl-edge-tag { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--cta); color: #fff; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; padding: 7px 14px; border-radius: 999px; white-space: nowrap; } /* ============================================================= VARIANT: standard Two-column grid of category groups, leader-dot rows ============================================================= */ .price-list--standard .pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 32px var(--pl-cat-gap); max-width: var(--pl-max-w); margin: 0; } .price-list--standard .pl-cat-group { background: var(--s-card-bg); border: 1px solid var(--s-card-border); border-radius: var(--pl-radius); padding: 24px 24px 8px; } .price-list--standard .pl-cat { padding-bottom: 12px; border-bottom: 1px solid var(--s-divider); margin-bottom: 4px; } /* ============================================================= VARIANT: split Left rail: sticky scroll-spy category tabs + intro Right: full price table ============================================================= */ .price-list--split .pl-split { display: grid; grid-template-columns: 220px 1fr; gap: 56px; max-width: var(--pl-max-w); margin: 0; align-items: start; } .price-list--split .pl-rail { position: sticky; top: 32px; } .price-list--split .pl-rail-title { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-text-muted); margin-bottom: 12px; } .price-list--split .pl-tabs { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--s-divider); } .price-list--split .pl-tab { background: transparent; border: 0; color: var(--s-text-muted); font: inherit; font-size: 0.95rem; text-align: left; padding: 8px 14px; margin-left: -1px; border-left: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; font-family: inherit; } .price-list--split .pl-tab:hover { color: var(--s-heading); } .price-list--split .pl-tab.is-active { color: var(--s-heading); border-left-color: var(--cta); font-weight: 600; } .price-list--split .pl-tab-count { margin-left: 6px; color: var(--s-text-muted); font-weight: 400; font-size: 0.8em; } .price-list--split .pl-cat-group + .pl-cat-group { margin-top: var(--pl-cat-gap); padding-top: var(--pl-cat-gap); border-top: 1px solid var(--s-divider); } /* ============================================================= VARIANT: bold Always dark (--s-bg-bold). Big numbered categories. No card chrome — pure typography. ============================================================= */ .price-list--bold { background: var(--cta); /* client primary_color, injected per-client in body style */ color: var(--s-text-bold, #fff); --s-heading: var(--s-text-bold, #fff); --s-text-muted: rgba(255,255,255,0.55); --s-divider: rgba(255,255,255,0.12); } .price-list--bold .section-label { color: var(--brand-light, var(--brand)); } .price-list--bold .section-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.015em; } .price-list--bold .pl-cat-group { display: grid; grid-template-columns: 88px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--s-divider); } .price-list--bold .pl-cat-group:last-child { border-bottom: 1px solid var(--s-divider); } .pl-cat-num { font-family: var(--display-font, inherit); font-size: 2rem; font-weight: 300; color: var(--cta); font-variant-numeric: tabular-nums; line-height: 1; } .price-list--bold .pl-cat { font-size: 1.75rem; font-weight: 600; margin-bottom: 14px; } .price-list--bold .pl-row { grid-template-columns: 1fr auto; padding: 14px 0; border-bottom: 1px solid var(--s-divider); } .price-list--bold .pl-name { font-size: 1.05rem; } .price-list--bold .pl-price { color: var(--brand-light, var(--cta)); font-size: 1.05rem; } /* ============================================================= Responsive ============================================================= */ @media (max-width: 900px) { .price-list--split .pl-split { grid-template-columns: 1fr; gap: 24px; } .price-list--split .pl-rail { position: static; } .price-list--split .pl-tabs { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--s-divider); } .price-list--bold .pl-cat-group { grid-template-columns: 1fr; gap: 12px; } } /* ============================================================ assets/blocks/_tokens.css Per-theme defaults consumed by all blocks. Block CSS reads --theme-btn-radius; if missing, the block-local default (10px) wins. Override here, in style.css, or inline on per client. ============================================================ */ :root { /* light/default — moderately rounded */ --theme-btn-radius: 8px; --theme-input-radius: 8px; } .theme-elegant { --theme-btn-radius: 32px; --theme-input-radius: 12px; } .theme-warm { /* hospitality / cafe / restaurant — pill buttons feel organic */ --theme-btn-radius: 999px; --theme-input-radius: 999px; } .theme-technical { /* engineering / auto / industrial — almost square */ --theme-btn-radius: 2px; --theme-input-radius: 2px; } /* ============================================================= cta block — call-to-action Theme-neutral: relies only on --s-* / --cta / --brand ============================================================= */ .cta { --cta-pad-y: 64px; --cta-pad-x: 24px; --cta-max-w: 1120px; --cta-radius: 14px; /* Per-theme overridable (set on body or :root). Block ships with sane defaults that work everywhere if the host site doesn't override. */ --btn-radius: var(--theme-btn-radius, 10px); --input-radius: var(--theme-input-radius, var(--btn-radius)); position: relative; padding: var(--cta-pad-y) var(--cta-pad-x); color: var(--s-text); } .cta > * { max-width: var(--cta-max-w); margin-left: auto; margin-right: auto; } /* ─── heading bits ─── */ .cta .section-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; display: inline-flex; align-items: center; gap: 10px; } .cta .section-label::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; } .cta .section-title { font-family: var(--display-font, inherit); font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1.08; color: var(--s-heading); margin: 0 0 14px; text-wrap: balance; } .cta .cta-sub { color: var(--s-text-muted); font-size: 1.05rem; line-height: 1.55; margin: 0 0 28px; max-width: 560px; } /* ─── status pill (novel #1: live availability) ─── */ .cta-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 500; color: var(--s-text-muted); background: var(--s-card-bg); border: 1px solid var(--s-card-border); padding: 6px 12px; border-radius: 999px; /* status pill stays pill; it's a chip, not a button */ margin-bottom: 18px; } .cta-status .cta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cta); position: relative; box-shadow: 0 0 0 0 color-mix(in oklab, var(--cta) 60%, transparent); animation: cta-pulse 2.4s ease-out infinite; } @keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cta) 60%, transparent); } 70% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--cta) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cta) 0%, transparent); } } /* ─── buttons ─── */ .cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: var(--btn-radius); font: inherit; font-weight: 600; font-size: 0.98rem; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: var(--cta, var(--cta)); color: var(--on-accent, #fff); transition: transform .15s, box-shadow .15s, background .15s; font-family: inherit; } .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in oklab, var(--cta) 28%, transparent); } .cta-btn .cta-arrow { display: inline-block; transition: transform .2s; } .cta-btn:hover .cta-arrow { transform: translateX(3px); } .cta-btn--ghost { background: transparent; color: var(--s-heading); border-color: var(--s-card-border); } .cta-btn--ghost:hover { background: var(--s-card-bg); box-shadow: none; transform: none; } .cta-tel { color: var(--s-text-muted); font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .cta-tel strong { color: var(--s-heading); font-weight: 600; } .cta-tel:hover strong { color: var(--cta); } /* ─── benefits (3 quick ticks) ─── */ .cta-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 24px; margin: 22px 0 28px; padding: 0; list-style: none; } .cta-benefits li { display: flex; align-items: flex-start; gap: 10px; color: var(--s-text); font-size: 0.92rem; line-height: 1.4; } .cta-benefits li::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in oklab, var(--cta) 18%, transparent); border: 1px solid color-mix(in oklab, var(--cta) 40%, transparent); background-image: linear-gradient(45deg, transparent 38%, var(--cta) 38% 46%, transparent 46%, transparent 54%, var(--cta) 54% 62%, transparent 62%); background-size: 10px 10px; background-repeat: no-repeat; background-position: center; margin-top: 2px; } /* ============================================================= VARIANT: standard — centered, single column ============================================================= */ .cta--standard { text-align: left; } .cta--standard .cta-card { background: var(--s-card-bg); border: 1px solid var(--s-card-border); border-radius: var(--cta-radius); padding: 40px 44px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; } .cta--standard .cta-form { display: grid; gap: 10px; background: var(--s-bg-mid); border: 1px solid var(--s-card-border); border-radius: 12px; padding: 20px; } .cta--standard .cta-form-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-text-muted); font-weight: 500; } .cta--standard .cta-form-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; } .cta--standard .cta-input { background: var(--s-card-bg); border: 1px solid var(--s-card-border); border-radius: var(--input-radius); padding: 12px 18px; font: inherit; color: var(--s-text); outline: none; transition: border-color .15s; font-family: inherit; } .cta--standard .cta-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 18%, transparent); } .cta--standard .cta-form-note { font-size: 0.78rem; color: var(--s-text-muted); } /* ============================================================= VARIANT: split — image + text, asymmetric ============================================================= */ .cta--split .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .cta--split .cta-img { aspect-ratio: 4 / 5; border-radius: var(--cta-radius); background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--cta) 8%, var(--s-bg-mid)) 0 6px, color-mix(in oklab, var(--cta) 14%, var(--s-bg-mid)) 6px 12px); border: 1px solid var(--s-card-border); position: relative; display: flex; align-items: flex-end; padding: 18px; } .cta--split .cta-img-caption { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--s-text-muted); background: var(--s-card-bg); border: 1px solid var(--s-card-border); padding: 4px 10px; border-radius: 6px; } .cta--split .cta-img-tag { position: absolute; top: 18px; left: 18px; background: var(--cta); color: #fff; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; border-radius: var(--btn-radius); } /* ============================================================= VARIANT: bold — full-bleed dark, dramatic typography ============================================================= */ .cta--bold { background: var(--cta, var(--s-bg-bold)); color: var(--s-text-bold, #fff); --s-heading: var(--s-text-bold, #fff); --s-text: var(--s-text-bold, #fff); --s-text-muted: rgba(255,255,255,0.55); --s-card-bg: rgba(255,255,255,0.04); --s-card-border: rgba(255,255,255,0.12); --s-divider: rgba(255,255,255,0.12); --s-bg-light: var(--ink); } .cta--bold .section-label { color: var(--brand-light, var(--brand)); } .cta--bold .cta-eyebrow { display: block; font-family: var(--display-font, inherit); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 400; font-style: italic; color: var(--s-text-muted); margin-bottom: 8px; } .cta--bold .section-title { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; margin-bottom: 28px; } .cta--bold .cta-bold-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; padding-top: 32px; border-top: 1px solid var(--s-divider); } .cta--bold .cta-next { font-family: var(--display-font, inherit); text-align: right; } .cta--bold .cta-next-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-text-muted); font-family: inherit; } .cta--bold .cta-next-slot { font-size: 1.6rem; color: var(--brand-light, var(--cta)); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; } .cta--bold .cta-btn { background: var(--brand); color: var(--on-brand); padding: 18px 32px; font-size: 1.05rem; } .cta--bold .cta-tel { color: rgba(255,255,255,0.55); } .cta--bold .cta-tel strong { color: var(--on-dark); } /* =============================================== */ /* ============================================================= RESPONSIVE — hero--split, services, cta Breakpoints: 900px (tablet/large mobile), 600px (small mobile) ============================================================= */ @media (max-width: 900px) { /* ── HERO SPLIT ── */ .hero--split { grid-template-columns: 1fr; min-height: 100svh; height: auto; } .hero-split-image { display: none; } .hero-split-inner { padding: 100px 24px 60px; max-width: 100%; } .hero-stats--split { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:36px; padding-top:24px; } /* ── SERVICES ZIGZAG ── */ .service-row, .service-row--reverse { grid-template-columns: 1fr; direction: ltr; } .service-row-icon { min-height: 90px; font-size: 52px; } .service-row-content { padding: 28px 24px; } /* ── SERVICES BOLD ── */ .service-bold-card { grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 24px; } .service-bold-num { font-size: 36px; } .service-bold-price { grid-column: 2; } /* ── CTA STANDARD ── */ .cta--standard .cta-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; } /* ── CTA SPLIT ── */ .cta--split .cta-grid { grid-template-columns: 1fr; gap: 32px; } .cta--split .cta-img { aspect-ratio: 16 / 9; } /* ── CTA BOLD ── */ .cta--bold .cta-bold-grid { grid-template-columns: 1fr; gap: 24px; } .cta--bold .cta-next { text-align: left; } } @media (max-width: 600px) { /* ── HERO BOLD ── */ .hero-inner--bold { padding: 80px 20px 52px; } .hero--bold { min-height: 100svh; height: auto; } .hero-stats--bold { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:24px; padding-top:20px; } /* ── SERVICES BOLD compact ── */ .service-bold-card { grid-template-columns: 1fr; padding: 18px 20px; } .service-bold-num { display: none; } .service-bold-price { grid-column: auto; } } /* ── GALLERY LIGHTBOX ── */ .gallery-lightbox{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s} .gallery-lightbox.is-open{opacity:1;pointer-events:all} .gallery-lb-overlay{position:absolute;inset:0;cursor:zoom-out} .gallery-lb-img-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center} .gallery-lb-img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:6px;display:block;box-shadow:0 24px 80px rgba(0,0,0,.6)} .gallery-lb-close{position:absolute;top:20px;right:24px;z-index:2;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;line-height:1} .gallery-lb-close:hover{background:rgba(255,255,255,.28)} .gallery-lb-prev,.gallery-lb-next{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.12);border:none;color:#fff;font-size:26px;width:52px;height:52px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;line-height:1} .gallery-lb-prev{left:20px} .gallery-lb-next{right:20px} .gallery-lb-prev:hover,.gallery-lb-next:hover{background:rgba(255,255,255,.28)} .gallery-lb-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.55);font-size:13px;letter-spacing:.04em;z-index:2;font-variant-numeric:tabular-nums} @media(max-width:600px){.gallery-lb-prev{left:8px}.gallery-lb-next{right:8px}.gallery-lb-close{top:12px;right:12px}} /* === faq.css === */ /* ============================================================= faq block — call-to-action Theme-neutral: relies only on --s-* / --cta / --brand. Spacing inherits from lf-spacing.css. ============================================================= */ /* ── resets: browser defaults ── */ .faq--standard .faq-list, .faq--split .faq-list, .faq--bold .faq-grid { list-style: none; padding: 0; margin: 0; } .faq { position: relative; color: var(--s-text); } /* ─── headings ─── */ .faq .section-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); display: inline-flex; align-items: center; gap: 10px; } .faq .section-label::before { content: ""; width: 18px; height: 1px; background: currentColor; display: inline-block; } .faq .section-title { font-family: var(--display-font, inherit); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.1; color: var(--s-heading); text-wrap: balance; } .faq .faq-intro { color: var(--s-text-muted); font-size: 1rem; max-width: 640px; margin-bottom: var(--lf-header-gap, 32px); } /* ─── search bar (novel #1) ─── */ .faq-search { position: relative; margin-bottom: var(--lf-group-gap, 28px); max-width: 480px; } .faq-search-input { width: 100%; background: var(--s-card-bg); border: 1px solid var(--s-card-border); border-radius: var(--theme-btn-radius, 10px); padding: 12px 16px 12px 42px; font: inherit; color: var(--s-text); outline: none; transition: border-color .15s; box-sizing: border-box; font-family: inherit; } .faq-search-input:focus { border-color: var(--cta); } .faq-search-input::placeholder { color: var(--s-text-muted); } .faq-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 1.5px solid var(--s-text-muted); border-radius: 50%; pointer-events: none; } .faq-search-icon::after { content: ""; position: absolute; width: 1.5px; height: 6px; background: var(--s-text-muted); bottom: -5px; right: -2px; transform: rotate(-45deg); transform-origin: top; } .faq-search-count { margin-top: 8px; font-size: 0.8rem; color: var(--s-text-muted); } /* ============================================================= VARIANT: standard Clickable card-style accordion. + is INSIDE the row, next to the question. Whole card is clickable. ============================================================= */ .faq--standard .faq-list { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; } .faq--standard .faq-item { background: var(--s-card-bg); border: 1px solid var(--s-card-border); border-radius: var(--lf-radius-card, 12px); transition: border-color .15s, box-shadow .15s; list-style: none; overflow: hidden; padding: 0; } .faq--standard .faq-item:hover { border-color: color-mix(in oklab, var(--cta) 35%, var(--s-card-border)); } .faq--standard .faq-item[open] { border-color: color-mix(in oklab, var(--cta) 55%, var(--s-card-border)); box-shadow: 0 4px 18px color-mix(in oklab, var(--cta) 10%, transparent); } .faq--standard .faq-summary { display: grid; grid-template-columns: 32px 1fr auto; gap: 16px; align-items: center; padding: 20px 24px; cursor: pointer; list-style: none; user-select: none; } .faq--standard .faq-summary::-webkit-details-marker { display: none; } .faq--standard .faq-toggle { width: 32px; height: 32px; border-radius: 50%; background: color-mix(in oklab, var(--cta) 12%, transparent); color: var(--cta); display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 400; line-height: 1; transition: transform .25s, background .15s; flex-shrink: 0; } .faq--standard .faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--cta); color: var(--s-bg-light, #fff); } .faq--standard .faq-q { color: var(--s-heading); font-weight: 600; font-size: 1.02rem; line-height: 1.4; } .faq--standard .faq-pin { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: color-mix(in oklab, var(--cta) 14%, transparent); color: var(--cta); white-space: nowrap; } .faq--standard .faq-a { padding: 0 24px 22px 72px; color: var(--s-text-muted); line-height: 1.55; font-size: 0.95rem; } .faq--standard .faq-helpful { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--s-text-muted); } .faq--standard .faq-helpful-btn { background: transparent; border: 1px solid var(--s-card-border); color: var(--s-text-muted); padding: 4px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 0.78rem; transition: border-color .15s, color .15s; } .faq--standard .faq-helpful-btn:hover { border-color: var(--cta); color: var(--cta); } /* ============================================================= VARIANT: split Sticky left rail with categories; right column with accordion. ============================================================= */ .faq--split .faq-split { display: grid; grid-template-columns: 240px 1fr; gap: 56px; max-width: var(--lf-max-w, 1200px); margin: 0 auto; align-items: start; } .faq--split .faq-rail { position: sticky; top: 32px; } .faq--split .faq-rail-title { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-text-muted); margin-bottom: 14px; } .faq--split .faq-cats { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--s-divider); } .faq--split .faq-cat { background: transparent; border: 0; color: var(--s-text-muted); font: inherit; text-align: left; padding: 10px 16px; margin-left: -1px; border-left: 2px solid transparent; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; display: flex; align-items: baseline; justify-content: space-between; } .faq--split .faq-cat:hover { color: var(--s-heading); } .faq--split .faq-cat.is-active { color: var(--s-heading); border-left-color: var(--cta); font-weight: 600; } .faq--split .faq-cat-count { color: var(--s-text-muted); font-weight: 400; font-size: 0.85em; } .faq--split .faq-list { display: grid; gap: 8px; } .faq--split .faq-item { list-style: none; border-bottom: 1px solid var(--s-divider); padding: 0; } .faq--split .faq-item:last-child { border-bottom: 0; } .faq--split .faq-summary { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 0; cursor: pointer; list-style: none; } .faq--split .faq-summary::-webkit-details-marker { display: none; } .faq--split .faq-q { color: var(--s-heading); font-weight: 500; font-size: 1rem; } .faq--split .faq-toggle { font-size: 1.4rem; color: var(--cta); font-weight: 300; transition: transform .25s; } .faq--split .faq-item[open] .faq-toggle { transform: rotate(45deg); } .faq--split .faq-a { padding: 0 0 20px; color: var(--s-text-muted); line-height: 1.55; font-size: 0.95rem; max-width: 720px; } /* ============================================================= VARIANT: bold Numbered 2-column editorial grid. Always-open Q/A. Big numbers. No toggle — these are the canonical answers, always visible. ============================================================= */ .faq--bold .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lf-group-gap, 32px) var(--lf-item-gap, 24px); max-width: var(--lf-max-w, 1200px); margin: 0 auto; } .faq--bold .faq-item { display: grid; grid-template-columns: 64px 1fr; gap: 20px; list-style: none; padding: 0; border: 0; background: none; } .faq--bold .faq-num { font-family: var(--display-font, inherit); font-size: 1.6rem; font-weight: 300; color: var(--cta); font-variant-numeric: tabular-nums; line-height: 1; border-top: 1px solid var(--s-divider); padding-top: 14px; } .faq--bold .faq-body { border-top: 1px solid var(--s-divider); padding-top: 14px; } .faq--bold .faq-q { font-family: var(--display-font, inherit); font-size: 1.25rem; font-weight: 600; color: var(--s-heading); margin: 0 0 10px; letter-spacing: -0.01em; } .faq--bold .faq-a { color: var(--s-text-muted); line-height: 1.6; font-size: 0.96rem; } /* footer note common to all variants */ .faq-footer { text-align: center; margin-top: var(--lf-group-gap, 32px); padding-top: 24px; border-top: 1px solid var(--s-divider); color: var(--s-text-muted); font-size: 0.92rem; } .faq-footer a { color: var(--cta); font-weight: 500; text-decoration: none; } .faq-footer a:hover { text-decoration: underline; } /* ============================================================= Responsive ============================================================= */ @media (max-width: 900px) { .faq--split .faq-split { grid-template-columns: 1fr; gap: 20px; } .faq--split .faq-rail { position: static; } .faq--split .faq-cats { flex-direction: row; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--s-divider); padding-bottom: 2px; } .faq--split .faq-cat { margin-left: 0; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; } .faq--split .faq-cat.is-active { border-left-color: transparent; border-bottom-color: var(--cta); } .faq--bold .faq-grid { grid-template-columns: 1fr; } .faq--standard .faq-summary { padding: 16px 18px; } .faq--standard .faq-a { padding: 0 18px 18px 60px; } } /* ── VARIANTS (split, bold) — moved from style.css ── */ ═══════════════════════════════════════════════════════════════════ */ /* FAQ -- SPLIT (two-column numbered) */ .faq-split-header{padding:80px 48px 48px} .faq-split-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:0;border-top:1px solid var(--s-card-border)} .faq-split-item{display:flex;gap:24px;padding:36px 48px;border-bottom:1px solid var(--s-card-border);border-right:1px solid var(--s-card-border)} .faq-split-item:nth-child(even){border-right:none} .faq-split-num{font-family:var(--display-font);font-size:36px;font-weight:900;color:var(--brand);opacity:0.35;line-height:1;flex-shrink:0;min-width:44px} .faq-split-q{font-size:16px;font-weight:600;color:var(--s-text);margin-bottom:12px;line-height:1.5} .faq-split-a{font-size:14px;color:var(--s-text-muted);line-height:1.85} /* FAQ -- BOLD (Flowbite accordion) */ .faq-accordion{margin-top:40px;display:flex;flex-direction:column;gap:2px} .faq-acc-item{border:1px solid var(--s-card-border);border-radius:8px;overflow:hidden;transition:border-color .25s} .faq-acc-item--open{border-color:var(--brand)} .faq-acc-btn{display:flex;align-items:center;gap:20px;width:100%;padding:22px 28px;background:var(--s-card-bg);border:none;cursor:pointer;text-align:left;transition:background .2s} .faq-acc-btn:hover{background:var(--s-bg-mid)} .faq-acc-item--open .faq-acc-btn{background:var(--s-bg-mid)} .faq-acc-icon{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#111;font-family:var(--display-font);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0} .faq-acc-q{flex:1;font-size:16px;font-weight:500;color:var(--s-heading);line-height:1.5} .faq-acc-chevron{width:18px;height:18px;color:var(--s-text-muted);flex-shrink:0;transition:transform .3s ease} .faq-acc-item--open .faq-acc-chevron{transform:rotate(180deg);color:var(--brand)} .faq-acc-body{overflow:hidden} .faq-acc-a{padding:0 28px 24px 80px;font-size:15px;color:var(--s-text-muted);line-height:1.85} /* ══════════════════════════════════════════════════════════════════ @media(max-width:900px){ .faq-split-grid{grid-template-columns:1fr} .faq-split-item{border-right:none;padding:24px} .faq-acc-a{padding:0 24px 20px 44px} } /* ── Theme overrides — moved from style.css ── */ .theme-technical .faq .section-label{color:var(--brand)} /* === process.css === */ /* ============================================================= process block — how-we-work / steps Theme-neutral; spacing from lf-spacing.css. ============================================================= */ /* ── resets: browser defaults + legacy style.css overrides ── */ /*
    /