by the block editor – hide the empty leftovers */ .entry > p:empty, .home p:empty, .contact-grid > p:empty { display: none; } .bss-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ---------------------------------------------------------------- figures / images */ .entry figure, .home figure { margin: 0; } .wp-block-image img { height: auto; max-width: 100%; vertical-align: bottom; } /* ---------------------------------------------------------------- buttons */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; } .wp-block-button__link, .wp-element-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border: 1.5px solid var(--orange); border-radius: 999px; background: var(--orange); color: #fff; font: 600 15px/1.2 var(--font); text-decoration: none; box-shadow: 0 8px 22px rgba(255,103,0,.25); transition: background-color .2s, border-color .2s, color .2s, transform .2s; } .wp-block-button__link:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: #fff; transform: translateY(-1px); } .is-style-outline .wp-block-button__link { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; } .is-style-outline .wp-block-button__link:hover { background: var(--navy); color: #fff; } .on-dark .is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.4); } .on-dark .is-style-outline .wp-block-button__link:hover { border-color: #fff; background: rgba(255,255,255,.08); } /* buttons / tabs shown in the page hero (first Buttons block with class "hero-actions") */ .page-hero .hero-actions { margin-top: 28px; gap: 8px; } .page-hero .hero-actions .wp-block-button__link { min-height: 40px; padding: 0 18px; font-size: 14.5px; } .page-hero .hero-actions .is-style-outline .wp-block-button__link { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.25); } .page-hero .hero-actions .is-current .wp-block-button__link { pointer-events: none; } /* ---------------------------------------------------------------- page content (= .prose of the static site) */ .entry { min-width: 0; font-size: 16.5px; line-height: 1.75; color: #2b3644; } .entry > * { margin-top: 0; margin-bottom: 0; } .entry > * + * { margin-top: 1.1em; } .entry > :where(p, h2, h3, h4, ul, ol, .wp-block-quote, .wp-block-table, details, .wp-block-buttons, .accordion, .stat-row, .values, .mission-figure, .link-list, .doc-list) { max-width: 820px; } .entry > h2 { margin-top: 1.8em; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--ink); } .entry > h3 { margin-top: 1.6em; font-size: 20px; font-weight: 700; color: var(--ink); } .entry > h4 { margin-top: 1.4em; font-size: 17px; font-weight: 700; color: var(--ink); } .entry > h2:first-child, .entry > h3:first-child { margin-top: 0; } .entry strong { color: var(--ink); font-weight: 650; } .entry a:not(.wp-block-button__link) { color: var(--orange-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-word; } .entry .lead { font-size: 19px; line-height: 1.6; color: var(--ink); font-weight: 500; } .entry ul.wp-block-list:not(.link-list):not(.doc-list):not(.hero-badges):not(.contact-list) { list-style: none; padding-left: 0; } .entry ul.wp-block-list:not(.link-list):not(.doc-list):not(.hero-badges):not(.contact-list) > li { position: relative; padding-left: 22px; } .entry ul.wp-block-list:not(.link-list):not(.doc-list):not(.hero-badges):not(.contact-list) > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 2px; background: var(--orange); } .entry ol.wp-block-list { padding-left: 1.3em; } .entry ol.wp-block-list > li::marker { color: var(--orange-ink); font-weight: 700; } .entry li + li { margin-top: .45em; } .entry li > .wp-block-list { margin-top: .45em; } .entry .wp-block-quote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--orange); font-style: italic; } .entry .wp-block-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; } .entry .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; } .entry .wp-block-table td, .entry .wp-block-table th { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .entry .wp-block-table tr:last-child td { border-bottom: 0; } .entry > .wp-block-image img { border-radius: 10px; } .page-section--soft .entry > :where(p, h2, h3, ul) { max-width: 900px; } /* ---------------------------------------------------------------- accordion (Group "Akordeon" + Details blocks) */ .accordion > * + * { margin-top: 0; } .accordion details > :not(summary) { margin: 0; padding: 0 22px; color: #3a4553; font-size: 15.5px; line-height: 1.7; } .accordion details > :not(summary) + :not(summary) { padding-top: .8em; } .accordion details > :last-child:not(summary) { padding-bottom: 20px; } .accordion details > ul.wp-block-list { padding-left: 22px; } .wp-block-details summary { list-style: none; } /* ---------------------------------------------------------------- stats row, values, gallery, mission */ .stat-row > * { margin: 0; } .stat-row .stat-value { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; } .stat-row .stat-label { margin-top: 8px; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.75); } .values .wp-block-image img { width: 72px; height: 72px; } .values .value-title { margin: 0; font-weight: 700; color: var(--ink); } .mission-figure > * { margin: 0; } .gallery > figure { margin: 0; } /* ---------------------------------------------------------------- link list / documents */ .entry .link-list { padding: 0; list-style: none; } .entry .link-list li + li { margin-top: 0; } .doc-list { padding: 0; list-style: none; } /* the doc-list grid already has a 10px gap - no extra li margin (.entry li + li would add 0.45em on top) */ .entry .doc-list li + li { margin-top: 0; } .doc-list a::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E") center / contain no-repeat; } .entry .doc-list a { color: var(--ink); text-decoration: none; } /* ---------------------------------------------------------------- cards (Group "Karta" …) */ .card > * { margin-top: 0; margin-bottom: 0; } .card > h2, .card > .wp-block-heading { font-size: 18.5px; font-weight: 700; line-height: 1.35; color: inherit; } .card > h2 a { color: inherit; text-decoration: none; } .card > p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--muted); } .card--dark > p, .card--imgbg > p { color: rgba(255,255,255,.78); } .card--accent > p { color: rgba(255,255,255,.9); } .card > .wp-block-buttons { margin-top: 18px; } .card .card-more { margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 600; } .entry .card .card-more a, .card .card-more a { color: var(--orange-ink); text-decoration: none; } .card .card-more a:hover { color: var(--orange-hover); } figure.card-icon { margin: 0 0 18px; } figure.card-icon img { width: 40px; height: 40px; } .card .small-caps { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; color: inherit; } .card .big-number { margin-top: 0; font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: inherit; } /* tile with a photo behind the icon */ .card--imgbg { position: relative; isolation: isolate; overflow: hidden; color: #fff; border: 0; background: var(--navy); } .card--imgbg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(35,54,76,.86), rgba(15,26,39,.94)); } .card--imgbg > .card-bg { position: absolute; inset: 0; z-index: -2; margin: 0; } .card--imgbg > .card-bg img { width: 100%; height: 100%; object-fit: cover; } .card--imgbg h2 { color: #fff; } /* photo tile (Image "Kafelek zdjęciowy") */ .photo-tile, .is-style-photo-tile { min-height: 240px; margin: 0; border-radius: var(--radius); overflow: hidden; background: linear-gradient(150deg, var(--navy-mid), var(--navy)); } .photo-tile img, .is-style-photo-tile img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; } /* brands / logos */ .brands { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 16px; } figure.brand { margin: 0; } figure.brand img { max-height: 48px; width: auto; } /* steps */ .step > * { margin-top: 0; margin-bottom: 0; } .step > h2 { font-size: 19px; font-weight: 800; } .step .step-body, .step .step-extra { margin-top: 10px; } .step .step-body > * + *, .step .step-extra > * + * { margin-top: .7em; } .step .step-extra { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.6; } .step .wp-block-details { margin-top: 12px; font-size: 13.5px; color: var(--muted); } .step .wp-block-details summary { cursor: pointer; font-weight: 700; color: var(--orange-ink); } .step .wp-block-details > p { margin-top: 8px; } /* Q&A cards */ .qa-card .answer { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--soft); font-size: 14.5px; line-height: 1.6; color: var(--ink); } .qa-card .answer > p { margin: 0; color: var(--ink); font-size: 14.5px; } .lang-pl .qa-card .answer::before { content: "Jak pomaga outsourcing"; } .lang-en .qa-card .answer::before { content: "How outsourcing helps"; } .qa-card .answer::before { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); } /* downloads / video */ .download-card, .video-card { display: block; max-width: 900px; padding: 26px; } .download-card > figure { max-width: 220px; margin-top: 18px; } .download-card > figure img { border-radius: 12px; } .video-card > .video-thumb { margin: -26px -26px 22px; min-height: 0; } .video-card > .video-thumb img { width: 100%; max-height: 360px; object-fit: cover; } .page-section--soft .entry > .card + .card { margin-top: 20px; } /* people */ .people > * { margin: 0; } .person > figure.person-photo { margin: 0; } .person-body > * { margin-top: 0; margin-bottom: 0; } .person-body > h2 { font-size: 22px; font-weight: 800; } .person-body > p.role { margin-top: 8px; } .person-body > p.person-quote { margin-top: 16px; } .person-body > p:not(.role):not(.person-quote), .person-body > ul { margin-top: 14px; color: #3a4553; font-size: 15.5px; line-height: 1.7; } .person-photo.is-missing { aspect-ratio: 4 / 5; } /* article list ([bss_posts]) inside page content */ .entry > .list-toolbar { max-width: none; margin-bottom: 26px; } .entry > .news-grid { max-width: none; } /* form notice */ .form-notice { margin-bottom: 18px; padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; background: #e9f8ef; color: #17643a; border: 1px solid #b9e6c9; } .form-notice--error, .form-notice--fast { background: #fdeceb; color: #9b1c1c; border-color: #f5c2bf; } /* ---------------------------------------------------------------- home page (blocks) */ .home > .wp-block-group { margin: 0; } .home-hero { background: var(--navy-deep) url(../img/hero.png) center / cover no-repeat; } .home-hero .hero-main > * { margin-top: 0; margin-bottom: 0; } .home-hero .eyebrow { margin: 0; } .home-hero .hero-title { margin: 18px 0 22px; font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -.035em; color: #fff; } .home-hero .hero-title span { color: var(--orange); } .home-hero .hero-actions-home { margin-top: 34px; gap: 12px; } .home-hero .hero-actions-home .wp-block-button__link { min-height: 48px; padding: 0 26px; } .home .hero-social { margin-top: 40px; } .home .hero-social > * { margin: 0; } .home .hero-social-label { font-size: 14px; color: rgba(255,255,255,.6); } .home .hero-social-links { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; } .home .hero-social-links .wp-social-link { margin: 0; border-radius: 999px; background: transparent !important; border: 1.5px solid rgba(255,255,255,.25); transition: border-color .2s, background-color .2s; } .home .hero-social-links .wp-social-link:hover { border-color: var(--orange); background: rgba(255,103,0,.15) !important; transform: none; } .home .hero-social-links .wp-social-link a { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #fff !important; } .home .hero-social-links .wp-social-link svg { width: 17px; height: 17px; fill: currentColor; } .home .hero-card > * { margin-top: 0; margin-bottom: 0; } .home .hero-stats { margin-top: 18px; } .home .hero-stat-value { margin: 0; font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #fff; } .home .hero-stat-value em { font-style: normal; color: var(--orange); } .home .hero-stat-label { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.72); } .home .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; } .home .hero-badges li { padding: 6px 12px; border-radius: 999px; background: rgba(255,103,0,.16); color: #ffb88a; font-size: 12.5px; font-weight: 600; } .home .section-head > * { margin: 0; } .home .section-head-title > * { margin: 0; } .home .section-head-title h2 { margin-top: 14px; } .home .section-head .wp-block-quote { margin: 0; padding-left: 22px; border-left: 3px solid var(--orange); font-size: 18px; font-style: italic; color: var(--ink); } .home .section-head .wp-block-quote p { margin: 0; } .home .section-head .wp-block-quote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--muted); } .home .section-head-text > * { margin: 0; } .home .section-head-actions { margin-top: 22px !important; } .home .section-head-actions .wp-block-button__link { min-height: 38px; padding: 0 16px; font-size: 14px; } .home .section-head > p { color: var(--muted); font-size: 17px; } .home .service-card > * { margin-top: 0; margin-bottom: 0; } .home figure.service-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0; border-radius: 18px; background: var(--orange-soft); } .home figure.service-icon img { width: 52px; height: 52px; } .home .service-card h3 { margin: 22px 0 14px; font-size: 20px; font-weight: 700; } .home .service-card h3 a { color: inherit; text-decoration: none; } .home .service-card > ul { margin: 0 0 24px; } .home .service-more { margin-top: auto !important; } .home .service-more a { color: inherit; text-decoration: none; } .home .numbers-grid > * { margin: 0; } .home .stat > * { margin: 0; } .home .stat-label { margin-top: 12px !important; } .home .contact-info > * { margin-top: 0; margin-bottom: 0; } .home .contact-list { margin: 26px 0 0; padding: 0; list-style: none; } .home .contact-list li { position: relative; display: block; padding: 14px 0 14px 34px; border-top: 1px solid rgba(255,255,255,.1); } .home .contact-list li::before { content: ""; position: absolute; left: 0; top: 17px; width: 20px; height: 20px; background: var(--orange); -webkit-mask: var(--ci) center / contain no-repeat; mask: var(--ci) center / contain no-repeat; } .home .contact-list li:nth-child(1) { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); } .home .contact-list li:nth-child(2) { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); } .home .contact-list li:nth-child(3) { --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); } .home .contact-list strong { display: inline-block; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 400; } .home .contact-list a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.3); } .home .contact-info .legal { margin-top: 18px; } .home .contact-info .map { margin-top: 24px; } /* ========================================================================== Restructure 2026-10 – long About page, merged career pages, KSeF tile, contact section (about.css + career.css + news.css; keep this order – later rules rely on the cards/steps above) ========================================================================== */ /* ===================================================================== About page ("O nas" / "About us") – append to wp.css. Markup: .entry > section.about-section#anchor > h2 (section title) + the content of the former sub-page, whose headings were demoted one level (h2 -> h3). The in-page navigation is the "hero-actions" buttons block that the theme moves into the navy page header. ===================================================================== */ /* Vertical rhythm inside a section = what .entry gives its direct children (the sections are the only direct children now, so the old .entry > * rules have to be repeated one level down). */ .entry .about-section > * { margin-top: 0; margin-bottom: 0; } .entry .about-section > * + * { margin-top: 1.1em; } .entry .about-section > :where(p, h2, h3, h4, ul, ol, .wp-block-quote, .wp-block-table, details, .wp-block-buttons, .accordion, .stat-row, .values, .mission-figure, .link-list, .doc-list) { max-width: 820px; } /* same text measure as .entry > … */ /* Separation between sections: more air, plus a thin divider from the second section on. */ .entry > .about-section + .about-section { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--line); } @media (max-width: 640px) { .entry > .about-section + .about-section { margin-top: 48px; padding-top: 40px; } } /* Anchor offset for the sticky header: html already has scroll-padding-top = header + 12px (style.css), so only a little extra air is added here – plus the WordPress admin bar for logged-in editors. */ .about-section { scroll-margin-top: 12px; } .admin-bar .about-section { scroll-margin-top: 44px; } @media (max-width: 782px) { .admin-bar .about-section { scroll-margin-top: 58px; } } /* Section title (h2): bigger than the former page-level h2 (28px), which is now an h3; short orange bar as accent. */ .entry .about-section > h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--ink); } .entry .about-section > h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 16px; border-radius: 3px; background: var(--orange); } /* Sub-headings: the demoted h3 keeps the look of the old page-level h2 (.entry > h2 in wp.css). */ .entry .about-section > h3 { margin-top: 1.8em; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--ink); } .entry .about-section > h2 + * { margin-top: 24px; } /* space under the title bar (also when an h3 follows directly) */ /* --------------------------------------------------------------------- h3 twins of the existing h2 rules, so a demoted heading inside a component looks exactly like the old h2 (generic – also usable by other long pages that demote their headings). .card h3 / .card > .wp-block-heading already exist in style.css / wp.css and need no twin. --------------------------------------------------------------------- */ .person h3, .person-body > h3 { font-size: 22px; font-weight: 800; } /* = .person h2, .person-body > h2 */ .mission-figure > h3 { font-size: 1.5em; font-weight: 700; } /* the old h2 had no rule: browser default h2 size/weight */ .step h3, .step > h3 { font-size: 19px; font-weight: 800; } /* = .step h2, .step > h2 */ .card > h3 a { color: inherit; text-decoration: none; } /* = .card > h2 a */ .card--imgbg h3 { color: #fff; } /* = .card--imgbg h2 */ /* ===================================================================== Career package - "Nasze benefity" + merged "Proces rekrutacyjny" Append-style snippet: add AFTER wp.css (it relies on .card, .card-grid, .steps, .step from style.css / wp.css). ===================================================================== */ /* ---------------------------------------------------------------- Nasze benefity 8 text-only cards: Group "Siatka kart" (.card-grid.card-grid--3 + .benefit-grid) > 8 x Group "Karta" (.card.benefit-card) > h2. The old icons were never archived and the new benefits have none, so the badge is drawn in CSS. */ /* 8 cards = 4 x 2 on desktop (3 columns would leave a half-empty last row), 2 x 4 on tablets, 1 column on phones */ .card-grid.benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .card-grid.benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .card-grid.benefit-grid { grid-template-columns: 1fr; } } /* equal, comfortable card height even when a title fits on one line */ .card.benefit-card { min-height: 168px; } /* orange round check badge with a soft halo (pure CSS: white check on --orange, no image needed) */ .benefit-card::before { content: ""; flex: none; align-self: flex-start; width: 40px; height: 40px; margin: 6px 0 26px 6px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 20px 20px no-repeat; box-shadow: 0 0 0 6px var(--orange-soft); } /* the title: slightly stronger than the inherited body colour, may shrink so long words never overflow the card */ .card.benefit-card > h2 { min-width: 0; color: var(--ink); } /* gentle hover (the cards are not links, so no lift - just a warmer border and a deeper shadow; the transition comes from .card) */ .card.benefit-card:hover { border-color: rgba(255,103,0,.35); box-shadow: var(--shadow-md); } /* phones: one card per row, badge on the left of the title, compact */ @media (max-width: 640px) { .card.benefit-card { flex-direction: row; align-items: center; gap: 18px; min-height: 0; padding: 20px; } .benefit-card::before { align-self: center; margin: 6px 0 6px 6px; } /* centred against a title that wraps to 2-3 lines */ } /* ---------------------------------------------------------------- Proces rekrutacyjny (one page, two sections) Group (section, id specjalisci/studenci or professionals/students) > h2 + .steps (4 x .step). */ /* anchor jumps from the hero buttons: adds to html { scroll-padding-top } (sticky header) so the heading is not flush with the header */ .recruitment-section { scroll-margin-top: 12px; } /* logged-in editors: the sticky header sits below the WordPress admin bar (32px, 46px on narrow screens), so add that much (same values as .about-section) */ .admin-bar .recruitment-section { scroll-margin-top: 44px; } @media (max-width: 782px) { .admin-bar .recruitment-section { scroll-margin-top: 58px; } } /* divider and air between the two sections (beats ".entry > * + *", which only sets 1.1em) */ .recruitment-section + .recruitment-section { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); } /* section heading = same size as the other h2 of content pages (.entry > h2), plus the short orange accent used across the site */ .recruitment-section > h2 { margin: 0 0 28px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; color: var(--ink); } .recruitment-section > h2::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--orange); } @media (max-width: 640px) { .recruitment-section + .recruitment-section { margin-top: 48px; padding-top: 36px; } .recruitment-section > h2 { margin-bottom: 22px; } } /* the step headings were demoted h2 -> h3: h3 twins of the h2 selectors in style.css (".step h2") and wp.css (".step > h2") keep the look identical */ .step h3, .step > h3 { font-size: 19px; font-weight: 800; } /* ========================================================================== news package (append after wp.css) 1. KSeF tile on /aktualnosci 2. home-page contact section (card | map) Uses only the existing custom properties (--navy, --orange, --shadow-*, --radius ...). Selectors are deliberately specific (.card.ksef-tile / #kontakt) because wp.css and ".entry a:not(.wp-block-button__link)" (orange link colour) would otherwise win. ========================================================================== */ /* ------------------------------------------------------------------ 1. KSeF tile */ /* The tile = dark card (card--dark gives navy gradient + white text), full width of .entry, roomier than the 26px default. isolation + overflow keep the glow below inside the rounded corners. */ .card.ksef-tile { isolation: isolate; overflow: hidden; padding: 34px 36px; } /* Orange glow in the top-right corner (same recipe as .page-hero::before); z-index:-1 keeps it behind the text. */ .card.ksef-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 260px at 100% 0%, rgba(255,103,0,.28), transparent 65%); } /* "KSeF" label: pill in the style of the home-page badges (.hero-badges), on its own line above the title. No text-transform on purpose, the brand is spelled "KSeF". */ .card.ksef-tile > .tag { align-self: flex-start; margin: 0 0 16px; padding: 4px 12px; border-radius: 999px; background: rgba(255,103,0,.16); color: #ffb88a; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; } /* Title: bigger than the 18.5px of ordinary cards, so the tile reads as the featured item. */ .card.ksef-tile > .wp-block-heading { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } /* The title is a link: keep the white card text colour, no underline (beats ".entry a" = orange-ink). */ .entry .card.ksef-tile > .wp-block-heading a { color: inherit; text-decoration: none; } /* Teaser paragraph (every
that is neither the label nor the "more" line): larger than the 15px card text, limited line length. */ .card.ksef-tile > p:not(.tag):not(.card-more) { max-width: 760px; margin-top: 14px; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.82); } /* "read more" line (p.card-more): a little more air above and a larger size than in small cards. */ .card.ksef-tile > .card-more { padding-top: 22px; font-size: 15.5px; } /* Link colour: brand orange (#ff6700 has ~5:1 contrast on navy; the default orange-ink is too dark on this background). */ .entry .card.ksef-tile .card-more a { color: var(--orange); } .entry .card.ksef-tile .card-more a:hover { color: #fff; } /* Whole tile clickable like the article cards below (those are single ): the link's ::after covers the card (.card is position:relative, the