/* ========================================================================== Interior-page components for the `.vf` design system. -------------------------------------------------------------------------- Every interior template wraps its content in `
` (a sibling of the chrome's own `.vf` wrappers). This file adds the page-level components the homepage doesn't have — interior hero, breadcrumb, article/prose body, tech-stack list, process flow, why-us rows, team grid, case-study metric bands, listing cards, filter bars, pagination. Two rules keep this safe and consistent: 1. EVERYTHING is scoped under `.vf-page`, so it can never reach the header/footer chrome (those are `.vf` WITHOUT `.vf-page`). 2. Colours come ONLY from the `.vf` theme custom properties (--bg/--surface/--surface2/--border/--border-soft/--text/--muted/ --faint/--accent). So light/dark works for free — when the toggle adds `body.dark-theme`, `body.dark-theme .vf` re-points the variables and the whole page re-tones with zero extra rules here. The homepage's own component classes (.scard/.bcard/.ocard/.icard/.ccard, .eyebrow/.sect-head/.btn-accent/.pill, .ptimeline, .expander, .hform …) are defined in home-redesign.css under `.vf` — since `.vf-page` IS a `.vf`, those styles apply inside interior pages too. Templates reuse them directly; this file only adds what's genuinely new, using NON-colliding class names. ========================================================================== */ /* Legacy main_additional.css sets `svg, path { transition: .3s }` globally, which makes any currentColor icon "blink" its fill during the theme-switch View-Transition snapshot. Neutralise it inside our pages (home-redesign.css does the same for the hero watermark). */ .vf-page svg, .vf-page path { transition: none; } /* ---------- dark-mode alternating bands ---------- home-redesign.css re-tones `.tone-alt` via `.vf.dark .tone-alt`, but interior pages keep the wrapper as `vf light` and switch to dark through `body.dark-theme` instead — so that rule never fires and the alt bands would stay light in dark mode. Re-point the same vars under `body.dark-theme .vf` (higher specificity than `.vf.light .tone-alt`, so it wins in dark). Values copied from home-redesign.css's `.vf.dark .tone-alt`. */ body.dark-theme .vf .tone-alt { --bg: #1e1e1d; --bg2: #242423; --surface: #2a2a29; --surface2: #323130; --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.07); } /* The wrapper already inherits `.vf` (font, colour, background:var(--bg), overflow:clip, position:relative). Nothing else needed on the wrapper. */ /* ---------- interior page hero ---------- */ /* Smaller than the homepage hero. Big uppercase Oswald title to match the home display, a breadcrumb above it, and an optional lead paragraph below. */ .vf-page .page-hero { padding: 36px 0 28px; position: relative; } .vf-page .page-hero .ph-head { max-width: 60rem; } .vf-page .page-hero h1, .vf-page .page-hero .ph-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 6.2vw, 80px); line-height: 0.98; letter-spacing: 0.005em; margin: 14px 0 0; color: var(--text); text-wrap: balance; } /* article/job/legal pages use a sentence-case headline (not the big uppercase display) — smaller, normal weight, like the prototype's .article-title */ .vf-page .page-hero .article-title, .vf-page h1.article-title { font-family: var(--font-head); text-transform: none; font-weight: 600; letter-spacing: -0.01em; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; margin: 14px 0 0; max-width: 22ch; color: var(--text); text-wrap: balance; } .vf-page .page-hero .lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); line-height: 1.7; max-width: 56ch; margin-top: 24px; font-weight: 300; } .vf-page .page-hero .hero-cta { margin-top: 34px; } /* ---------- breadcrumb (Yoast outputs
` (so it picks up `.vf section`'s 104px padding) on a hard-coded dark-green block with a washed sage button. Re-skin it as a soft accent-tinted panel that tones with the theme, and turn its button into the vf accent button. */ .vf-page .cta_separator { background: color-mix(in oklab, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border)); border-radius: var(--radius); margin: 44px 0; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px); } .vf-page .cta_separator .cta_wrapper { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .vf-page #blog_page .cta_separator .services__title { font-family: var(--font-head); font-weight: 600; color: var(--text); font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; margin: 0; } .vf-page .cta_separator .description, .vf-page .cta_separator .description p { font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; /* The legacy compiled CSS still forces the inner

to a light #D9D9D9 !important (it was made for the old solid dark-green CTA). On the new light panel that washes the text out, so override it here. Use a theme-token mix (dark in light theme, light in dark theme) and bump the weight to 400 so the subtitle stays readable but subordinate to the head. !important is required to beat the legacy rule's !important. */ color: color-mix(in oklab, var(--text) 78%, var(--muted)) !important; font-weight: 400; margin: 0; max-width: 52ch; } .vf-page #blog_page .cta_separator .simple_button { margin-top: 8px; align-self: center; width: auto; min-width: 0; max-width: none; background: var(--accent); color: var(--accent-ink) !important; border: 1px solid var(--accent); border-radius: 10px; padding: 15px 32px; font-family: var(--font-body); font-weight: 500; font-size: 15px; text-decoration: none; text-align: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .10); transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease; } .vf-page #blog_page .cta_separator .simple_button:hover { background: color-mix(in oklab, var(--accent) 80%, white); color: var(--accent-ink) !important; transform: translateY(-1px); } /* ---------- stats strip (big number + label) ---------- */ .vf-page .stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); align-items: flex-start; } .vf-page .stat .num, .vf-page .stat .counter { font-family: var(--font-head); font-weight: 700; line-height: 1; font-size: clamp(30px, 4vw, 46px); color: var(--text); display: block; } .vf-page .stat .lbl { font-size: 13.5px; color: var(--muted); margin-top: 8px; max-width: 18ch; } /* ---------- generic card grid (.cards/.card) — listings & misc ---------- */ .vf-page .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; } .vf-page .cards.cols-3 { grid-template-columns: repeat(3, 1fr); } .vf-page .cards.cols-2 { grid-template-columns: repeat(2, 1fr); } .vf-page .card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: clamp(24px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; will-change: transform; transition: border-color .2s ease, transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .vf-page .card:hover { border-color: var(--accent); box-shadow: 0 18px 44px rgba(0,0,0,0.16); } .vf-page .card .idx { font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--accent); } .vf-page .card h3 { font-family: var(--font-head); font-size: 21px; line-height: 1.2; color: var(--text); } .vf-page .card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; } .vf-page .card ul { list-style: none; margin: 0; padding: 0; } .vf-page .card ul li { font-size: 13.5px; color: var(--muted); padding: 5px 0 5px 18px; position: relative; } .vf-page .card ul li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .vf-page .card .card-cta { margin-top: auto; padding-top: 18px; } /* ---------- article/resource listing cards (.articles/.article) ---------- Mirrors the homepage .bcard look so blog/insights/resources match home. */ .vf-page .articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .vf-page .article { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; color: inherit; will-change: transform; transition: border-color .2s ease, transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; } .vf-page .article:hover { border-color: var(--accent); box-shadow: 0 18px 44px rgba(0,0,0,0.16); } .vf-page .article .thumb { aspect-ratio: 16/10; background: var(--surface2); background-size: cover; background-position: center; } .vf-page .article .a-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 28px; flex: 1; } .vf-page .article .a-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--faint); } .vf-page .article .a-meta .cat { color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; } .vf-page .article h3 { font-family: var(--font-head); font-size: 20px; line-height: 1.3; color: var(--text); flex: 1; } .vf-page .article .a-read { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); transition: color .2s ease; } .vf-page .article .a-read svg { transition: transform .25s ease; } .vf-page .article:hover .a-read { color: var(--accent); } .vf-page .article:hover .a-read svg { transform: translateX(4px); } /* ---------- service cards with 2-column feature lists (.svc-grid) ---------- Reuses the homepage .scard look (defined in home-redesign.css); this only adds the bottom feature list. */ /* equal-height cards (default grid stretch): the copy stays at the top and the feature list is pinned to the bottom (margin-top:auto), so the lists bottom-align across every card in a row. */ .vf-page .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* one service per row (single column) so each point sits on its own line instead of wrapping across two narrow columns; margin-top:auto pins to bottom */ .vf-page .svc-grid .scard ul { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr; gap: 8px; } .vf-page .svc-grid .scard ul li { list-style: none; font-size: 12.5px; line-height: 1.5; color: var(--muted); padding: 0 0 0 13px; position: relative; } .vf-page .svc-grid .scard ul li::before { content: "›"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } /* ---------- tech-stack list (.stack-list/.stack-row) ---------- */ .vf-page .stack-list { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); } .vf-page .stack-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; padding: 18px clamp(20px, 2.4vw, 30px); border-bottom: 1px solid var(--border); } .vf-page .stack-row:last-child { border-bottom: none; } .vf-page .stack-row .stack-label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; font-weight: 600; color: var(--text); } .vf-page .stack-row .chips .chip { font-size: 12px; padding: 6px 14px; background: var(--surface2); } /* ---------- connected process flow (.proc / .proc-step / .proc-node) ---------- New names (NOT .pstep) so the homepage's .ptimeline .pstep rules don't bleed in. */ .vf-page .proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .vf-page .proc-step { position: relative; } .vf-page .proc-node { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); background: var(--surface); font-family: var(--font-head); font-weight: 700; font-size: 21px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; position: relative; z-index: 1; } .vf-page .proc-step:not(:last-child)::before { content: ""; position: absolute; top: 26px; left: 52px; right: -28px; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--border) 100%); z-index: 0; } .vf-page .proc-step h3 { font-family: var(--font-head); font-size: 20px; color: var(--text); margin-bottom: 10px; } .vf-page .proc-step p { font-size: 14px; color: var(--muted); line-height: 1.7; } .vf-page .proc-step .pmeta { display: inline-block; margin-top: 14px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--accent); } /* breathing room between the "Our Process" heading and the timeline row */ .vf-page .services-process__flow { margin-top: 48px; } /* ---------- why-us cards (.why-list/.why-row) ---------- Compact 2-up card grid (was full-width rows with a big number gutter and a lot of wasted horizontal space). Number sits on top, then title + copy. */ /* feedback (Services): the "Why Work with Hygge Software?" heading sat too close to the cards — give the section heading the same breathing room the other service sections use before their grids. */ .vf-page .services-advantages .sect-head { margin-bottom: 48px; } .vf-page .why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .vf-page .why-row { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 30px 32px; transition: box-shadow .25s ease, border-color .2s ease; } .vf-page .why-row:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.10); border-color: var(--accent); } .vf-page .why-row .why-num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--accent); line-height: 1; margin-bottom: 16px; } .vf-page .why-row h3 { font-family: var(--font-head); font-size: 20px; color: var(--text); margin-bottom: 14px; } .vf-page .why-row p { font-size: 14.5px; color: var(--muted); line-height: 1.7; } /* ---------- vertical timeline (.timeline) ---------- */ .vf-page .timeline { border-left: 2px solid var(--border); padding-left: 34px; display: flex; flex-direction: column; gap: 38px; } .vf-page .timeline .t-item { position: relative; } .vf-page .timeline .t-item::before { content: ""; position: absolute; left: -41px; top: 6px; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 5px var(--bg); } .vf-page .timeline .t-item .t-when { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--accent); } .vf-page .timeline .t-item h3 { font-family: var(--font-head); font-size: 22px; color: var(--text); margin: 6px 0 10px; } .vf-page .timeline .t-item p { font-size: 15px; color: var(--muted); line-height: 1.75; } /* ---------- team photo grid (.team-grid/.team-card) ---------- */ .vf-page .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .vf-page .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s ease, box-shadow .3s ease, transform .35s cubic-bezier(.2,.7,.3,1); } .vf-page .team-card:hover { border-color: var(--accent); box-shadow: 0 18px 44px rgba(0,0,0,0.16); } .vf-page .team-card .photo { width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center top; background-color: var(--surface2); } .vf-page .team-card .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .vf-page .team-card .t-body { padding: 18px 20px 22px; } .vf-page .team-card h3 { font-family: var(--font-head); font-size: 18px; color: var(--text); margin-bottom: 4px; } .vf-page .team-card .role { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; color: var(--accent); } /* ---------- case-study metric band (.cs-band) ---------- */ .vf-page .cs-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; border: 1px solid var(--border); border-radius: 16px; padding: clamp(26px, 3vw, 40px); background: var(--surface); } .vf-page .cs-band .m .v, .vf-page .cs-band .m .counter { display: block; font-family: var(--font-head); font-weight: 700; line-height: 1.05; /* font dialled down from 40px max: a long single-word value (e.g. "Headquarters") has to fit one column without breaking mid-word — this size keeps it whole at every breakpoint while staying bold. */ font-size: clamp(22px, 2.4vw, 34px); color: var(--accent); margin-bottom: 8px; } .vf-page .cs-band .m .k { font-size: 13px; color: var(--muted); } /* feedback (Projects): the metric value lives in `.v` with the animated number in a child `.counter` and the "+"/"%" suffix as a sibling text node. The global `.counter{display:block}` pushed that suffix onto a second line (e.g. "200" then "+"), mis-sizing the block. Making the counter inline keeps each number + suffix on one line (there's no break opportunity inside e.g. "200+"). Mirrors the about-numbers band fix above. */ .vf-page .cs-band .m .counter { display: inline; } /* values can be long free text too (e.g. "Three iterations", "$50K–$100K"), so the value must be allowed to WRAP at spaces — `white-space:nowrap` here forced those onto one line and overflowed into the next column. min-width:0 lets the grid column shrink (grid items default to min-width:auto). We deliberately do NOT use overflow-wrap:break-word: that split single words mid-character ("Headquarter|s"). Words stay whole (the reduced font above keeps even long ones fitting a column). */ .vf-page .cs-band .m { min-width: 0; } .vf-page .cs-band .m .v { overflow-wrap: normal; word-break: normal; hyphens: none; } /* ---------- raw form controls inside .hform (non-CF7 custom forms) ---------- home-redesign.css styles `.vf .hform .wpcf7 input` (needs a .wpcf7 ancestor) and the `.form-container__*` chrome; these rules cover the plain controls of custom forms like the resource report-download form so they match too. */ .vf-page .hform .form-container__input, .vf-page .hform input[type="text"], .vf-page .hform input[type="email"], .vf-page .hform input[type="tel"], .vf-page .hform select, .vf-page .hform textarea { font-family: var(--font-body); font-size: 14.5px; color: var(--text); background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; width: 100%; outline: none; transition: border-color .15s ease; resize: vertical; } .vf-page .hform input::placeholder, .vf-page .hform textarea::placeholder { color: var(--faint); } .vf-page .hform input:focus, .vf-page .hform textarea:focus { border-color: var(--accent); } .vf-page .hform .form-container__button, .vf-page .hform input[type="submit"]:not(.wpcf7-form-control), .vf-page .hform button[type="submit"]:not(.wpcf7-form-control) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; width: auto; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 500; padding: 15px 30px; border-radius: 10px; border: 1px solid transparent; background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.10); transition: transform .22s cubic-bezier(.3,.7,.3,1), background-color .22s ease, box-shadow .22s ease; } .vf-page .hform .form-container__button:hover, .vf-page .hform input[type="submit"]:not(.wpcf7-form-control):hover { background: color-mix(in oklab, var(--accent) 80%, white); transform: translateY(-1px); } .vf-page .hform .single_input_holder { display: flex; flex-direction: column; gap: 14px; } .vf-page .hform fieldset { border: none; margin: 0; padding: 0; min-width: 0; } /* ---------- resource report-download form polish ---------- All rules here are scoped to `#report_form` (unique to single-resources.php), NOT `.hform` — the About referral form and Vacancy application form are also `.vf-page .hform` CF7 forms, and a wider scope would strip their legacy checkbox box / red invalid-state cue too. */ /* title: the legacy `#report_page h3` (main_additional.css: Yanone, 36px) beats the redesign head-font rule by ID; win it back to the page's Oswald heading. Scoped to the form, so the success-message

(outside #report_form) keeps its own styling. font-family/line-height are re-declared on purpose — they are needed to outrank `#report_page h3`, not just to repeat the shared rule. */ .vf-page #report_form .form-container__title { font-family: var(--font-head); font-size: 22px; font-weight: 600; line-height: 1.2; text-align: left; color: var(--text); margin: 0 0 18px; } /* fields: the legacy `.form-container__input { margin-bottom: 20px }` doubles up with the holder's 14px flex gap, making the spacing too loose — drop it so only the gap controls the rhythm */ .vf-page #report_form .form-container__input { margin-bottom: 0; } /* checkbox: home-redesign.css styles the real as a custom box, but the legacy system hides it (`.wpcf7-acceptance input { display:none }`) and draws its own box via `label::before` plus a checkmark via `label::after` (the latter shown once JS adds `.label-selected`). Reveal the styled input and drop BOTH legacy pseudo-elements — otherwise the legacy checkmark stacks on top of the input's own, giving a doubled tick. */ .vf-page #report_form .wpcf7-acceptance input[type="checkbox"] { display: inline-block; } .vf-page #report_form .wpcf7-acceptance label::before, .vf-page #report_form .wpcf7-acceptance label::after { content: none; } /* report-download form success message: hidden until send-report.js adds `.send_report` to the wrapper (matches the legacy toggle, kept theme-aware) */ .vf-page .send_message { display: none; } .vf-page .send_report .send_message { display: block; } .vf-page .send_report #report_form { display: none; } /* ---------- contact panel (reuse home .hform via .contact-grid) ---------- */ .vf-page .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 5vw, 64px); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); padding: clamp(32px, 4vw, 56px); } .vf-page .contact-grid .cg-side { display: flex; flex-direction: column; gap: 18px; } .vf-page .contact-grid h2 { font-size: clamp(30px, 3.6vw, 46px); } /* ---------- two-column bordered grid (.grid-2) ---------- */ .vf-page .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .vf-page .grid-2 .cell { background: var(--surface); padding: clamp(28px, 3.2vw, 44px); } .vf-page .grid-2 .cell h3 { font-family: var(--font-head); font-size: 24px; color: var(--text); margin-bottom: 14px; } .vf-page .grid-2 .cell p { font-size: 15px; color: var(--muted); line-height: 1.75; } /* The global `.vf section { padding: 104px 0 }` rule pushes the filter bar far below the hero title. Trim the listing's top padding so the pills sit closer to the title/subtitle (the hero still supplies its own 28px bottom padding). `.projects-listing` is the projects page's own section — give it the same tight top padding so its filter pills hug the title too (request #1). */ .vf-page .posts-listing, .vf-page .projects-listing { padding-top: 24px; } /* ---------- filter bar (listing pages) ---------- */ /* desktop: keep chips + search on ONE row. nowrap stops the search box from dropping below the pills; the chips block (.f-chips) still wraps internally. margin-bottom adds breathing room between the bar/search and the grid below. */ .vf-page .filter-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-bottom: 32px; } /* flex:1 lets the chips block take the free space and shrink (min-width:0) so the search box fits beside it instead of pushing itself onto a new line */ .vf-page .filter-bar .f-chips { display: flex; flex-wrap: wrap; gap: 9px; flex: 1 1 auto; min-width: 0; } /* The projects page has NO search box: its filter element is BOTH `filter-bar` and `f-chips` on the same node (not a nested chips block). So `.filter-bar`'s `nowrap` applied to it directly and the pills overflowed off the row instead of wrapping. When both classes sit on one element, switch back to wrap so the pills flow onto the next line when they run out of horizontal space (#3). */ .vf-page .filter-bar.f-chips { flex-wrap: wrap; } .vf-page .filter-bar .f-chip, .vf-page .filter-bar .projects-filter__button { font-family: var(--font-body); font-size: 13.5px; color: var(--muted); cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px; transition: all .2s ease; white-space: nowrap; } .vf-page .filter-bar .f-chip:hover, .vf-page .filter-bar .projects-filter__button:hover { border-color: var(--accent); color: var(--text); } .vf-page .filter-bar .f-chip.is-active, .vf-page .filter-bar .projects-filter__button--active { /* Keep the SAME weight as the inactive pill: bolding the active pill made its text wider, which shifted every other pill on selection. The accent background already marks the selection clearly. `font-weight:400` is set explicitly (not just inherited) so no legacy `--active` rule can re-bold it and bring the layout shift back (request #2). */ font-weight: 400; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .vf-page .filter-bar .f-search { /* align-self:flex-start keeps the search at the TOP, level with the first row of pills, instead of being vertically centred against the taller chips block */ margin-left: auto; flex: 0 0 auto; align-self: flex-start; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 16px; } .vf-page .filter-bar .f-search input { border: none; background: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 14px; padding: 11px 0; min-width: 180px; } .vf-page .filter-bar .f-search input::placeholder { color: var(--faint); } /* ---------- pagination ---------- */ .vf-page .pagination, .vf-page #pagination-wrapper { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 48px; } .vf-page .pagination a, .vf-page .pagination span, .vf-page #pagination-wrapper a, .vf-page #pagination-wrapper span { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font-family: var(--font-head); font-size: 15px; color: var(--muted); transition: border-color .2s ease, color .2s ease, background .2s ease; } .vf-page .pagination a:hover, .vf-page #pagination-wrapper a:hover { border-color: var(--accent); color: var(--accent); } .vf-page .pagination .current, .vf-page .pagination [aria-current], .vf-page #pagination-wrapper .current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } /* ---------- vacancy rows (careers listing) ---------- */ /* The careers listing sits in a `.vf section` (default 104px top padding), which left a large empty gap under the hero copy. Tighten just this section's top so the filter chips sit closer to the description. */ .vf-page .vacancies-listing { padding-top: 28px; } .vf-page .vacancies-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .vf-page .vacancy-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 24px clamp(22px, 2.6vw, 32px); transition: border-color .2s ease, box-shadow .3s ease; } .vf-page .vacancy-row:hover { border-color: var(--accent); box-shadow: 0 14px 34px rgba(0,0,0,0.08); } .vf-page .vacancy-row .vr-main { display: flex; flex-direction: column; gap: 12px; } .vf-page .vacancy-row__title { font-family: var(--font-head); font-size: clamp(20px, 2vw, 26px); color: var(--text); transition: color .2s ease; } .vf-page .vacancy-row:hover .vacancy-row__title { color: var(--accent); } .vf-page .vacancy-row .vr-actions { display: flex; align-items: center; gap: 12px; } .vf-page .vacancy-row .vacancies-card__share-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease; } .vf-page .vacancy-row .vacancies-card__share-btn:hover { border-color: var(--accent); color: var(--accent); } /* vacancy perks/info cards */ .vf-page .vacancies__info-list { list-style: none; } /* The job list loads via AJAX, so until it populates the perks block would render high up (in view), get its scroll-reveal "used up" there, then jump down when the jobs arrive — a visible flash. Hide it (no layout space) while loading; projects-filter.js removes `vf-pending` once the jobs are injected, so the perks enter cleanly in their final position. Gated on `vf-js` so it stays visible when JS is unavailable. */ html.vf-js .vf-page .vacancies__info-list.vf-pending { display: none; } .vf-page .vacancies__info-item { align-items: flex-start; } .vf-page .vacancies__info-img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 6px; } .vf-page .vacancies__info-text { font-size: 15px; color: var(--muted); line-height: 1.7; } /* ---------- centered pages (404, thank-you) ---------- */ .vf-page .center-page { padding: clamp(60px, 12vw, 140px) 0; } .vf-page .center-page .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .vf-page .center-page .eyebrow { justify-content: center; } .vf-page .center-page .lead { margin: 16px auto 0; } .vf-page .center-page .hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .vf-page .center-page .breadcrumb { margin-bottom: 18px; } /* ---------- 404 page: text on the left, animated logo on the right ---------- */ .vf-page .not-found-page { padding: clamp(60px, 12vw, 140px) 0; } .vf-page .not-found-page__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 6vw, 96px); } .vf-page .not-found-page__content { flex: 1 1 auto; min-width: 0; } .vf-page .not-found-page .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; } .vf-page .not-found-page__logo { flex: 0 0 auto; line-height: 0; } .vf-page .not-found-page__logo svg { width: clamp(150px, 24vw, 320px); height: auto; display: block; overflow: visible; transform-origin: center; } /* the inner arrow keeps nudging left, trying to slot into the rest of the mark — but it's too big to fit, so it bumps and springs back each time */ .vf-page .not-found-page__logo .nf-mark__inner { transform-box: fill-box; transform-origin: center; animation: nf-try-fit 3s cubic-bezier(.36, 0, .2, 1.2) infinite; } /* the accent chevron gives a tiny shove back on each bump, selling the "won't fit" */ .vf-page .not-found-page__logo .nf-mark__outer { transform-box: fill-box; transform-origin: center; animation: nf-resist 3s ease-out infinite; } @keyframes nf-try-fit { 0% { transform: translateX(0); } 12% { transform: translateX(-5px); } /* presses in toward the logo */ 24% { transform: translateX(0); } /* bumped back out — doesn't fit */ 36% { transform: translateX(-3px); } /* tries again, a little softer */ 48% { transform: translateX(0); } 100% { transform: translateX(0); } /* rests, then repeats */ } @keyframes nf-resist { 0%, 8% { transform: translateX(0); } 14% { transform: translateX(-1.5px); } /* small give when the arrow hits it */ 22% { transform: translateX(0); } 34% { transform: translateX(-1px); } 46% { transform: translateX(0); } 100% { transform: translateX(0); } } /* stack on narrow screens: logo above the text, slightly smaller */ @media (max-width: 860px) { .vf-page .not-found-page__inner { flex-direction: column-reverse; align-items: flex-start; } .vf-page .not-found-page__logo svg { width: clamp(120px, 34vw, 200px); } } /* respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .vf-page .not-found-page__logo svg, .vf-page .not-found-page__logo .nf-mark__inner, .vf-page .not-found-page__logo .nf-mark__outer { animation: none; } } /* ---------- single vacancy (job detail) ---------- The body lives in a
, which inherits the homepage's `padding:104px 0`. That left a big empty band under the hero, so tighten the top here — the hero already supplies its own bottom padding. */ .vf-page .vacancy-body { padding-top: 20px; } /* Pull the title up to the header. The legacy container adds a big top padding (style.min.css clamp ≈ 53px) and the hero adds its own — but the breadcrumb is empty on vacancies, so all that space sat blank above the title. */ .vf-page .vacancy_page__container { padding-top: 0; } .vf-page #vacancy_page .page-hero { padding-top: 24px; } .vf-page .vacancy_page__wrapper { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 56px; align-items: start; margin-top: 8px; } /* Block (not the legacy flex+gap:30px) so spacing under the tabs is controlled solely by the tab bar's own margin below. */ .vf-page .vacancy_tabs__wrapper { display: block; min-width: 0; } /* Tabs as an underline tab bar — clearly NOT the rounded hero tags. The buttons carry `chip`-free markup, so only these rules style them. */ .vf-page .vacancy-tabs { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .vf-page .vacancy-tabs .projects-filter__button { font-family: var(--font-head); font-weight: 500; font-size: 16px; letter-spacing: .01em; color: var(--muted); background: none; border: 0; border-radius: 0; padding: 0 2px 16px; margin-bottom: -1px; cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .vf-page .vacancy-tabs .projects-filter__button:hover { color: var(--text); } .vf-page .vacancy-tabs .projects-filter__button--active { color: var(--text); border-bottom-color: var(--accent); } /* Show the full job text — the legacy 11-line clamp / 400px cap (style.min.css) went with the now-removed "Show more" button. */ .vf-page .vacancy-body .tab-content { max-height: none; overflow: visible; font-size: inherit; } .vf-page .vacancy-body .tab-content__content { display: block; overflow: visible; -webkit-line-clamp: unset; color: var(--text); } /* Editors set inline `color:#0d0d0d` on paragraphs/headings in the WYSIWYG, which is invisible on the dark background. Inline styles can only be beaten with !important — so in dark mode only, re-tone the job text to the theme colours (links stay accent). Light mode keeps the editor's near-black, which reads fine. */ body.dark-theme .vf-page #vacancy_page .tab-content__content :is(p, ul, ol, li, span, em) { color: var(--muted) !important; } body.dark-theme .vf-page #vacancy_page .tab-content__content :is(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--text) !important; } body.dark-theme .vf-page #vacancy_page .tab-content__content a { color: var(--accent) !important; } /* Apply form — ONE card. The aside is the card; the legacy CF7 `.form-container` brings its own background+shadow (style.min.css), which created the nested "two wrappers" look — flatten it and drop its duplicate "Apply Now" title so the outer

"Apply for this role" is the single heading. */ .vf-page .vacancy-apply { position: sticky; top: 96px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: clamp(26px,3vw,36px); } .vf-page .vacancy-apply h2 { font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0 0 20px; } .vf-page .vacancy-apply .form-container { background: none; box-shadow: none; border-radius: 0; max-width: none; width: 100%; padding: 0; text-align: left; } .vf-page .vacancy-apply .form-container__wrapper { display: block; justify-content: flex-start; } .vf-page .vacancy-apply .form-container__title { display: none; } /* Upload CV — full-width dashed dropzone with an upload icon (legacy was a narrow 200px inline pill). Icon is drawn from currentColor so it tracks the label colour on hover. */ .vf-page #vacancy_page .form-container__file-upload { width: 100%; } .vf-page #vacancy_page .form-container__file-label { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: none; box-sizing: border-box; padding: 16px 18px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface2); color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .2s ease, color .2s ease, background-color .2s ease; } .vf-page #vacancy_page .form-container__file-label:hover { border-color: var(--accent); color: var(--text); background: var(--surface); } .vf-page #vacancy_page .form-container__file-label::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%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='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E") center/contain no-repeat; } /* Consent checkbox — modernise to the site-wide input-drawn control (accent fill + checkmark), matching other forms. The vacancy form ships a LEGACY custom box (style.min.css hides the real input and draws `label::before` / `.label-selected::after`); neutralise that and re-show the real input. */ .vf-page #vacancy_page .wpcf7-acceptance label::before, .vf-page #vacancy_page .wpcf7-acceptance label.label-selected::after { content: none; display: none; } .vf-page #vacancy_page .wpcf7-acceptance label { gap: 10px; align-items: flex-start; margin: 0; } .vf-page #vacancy_page .wpcf7-acceptance .wpcf7-list-item-label { transform: none; color: var(--muted); } .vf-page #vacancy_page .wpcf7-acceptance input[type="checkbox"] { appearance: none; -webkit-appearance: none; display: inline-block; width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .vf-page #vacancy_page .wpcf7-acceptance input[type="checkbox"]:hover { border-color: var(--accent); } .vf-page #vacancy_page .wpcf7-acceptance input[type="checkbox"]:checked { background-color: var(--accent); border-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2310231c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; } /* Apply (submit) — full width to match the inputs and the Upload CV button. Legacy style.min.css caps it at max-width:240px, so clear that too. */ .vf-page #vacancy_page .wpcf7 input[type="submit"] { width: 100%; max-width: none; } @media (max-width: 1000px) { .vf-page .vacancy_page__wrapper { grid-template-columns: 1fr; gap: 36px; } .vf-page .vacancy-apply { position: static; } } /* ---------- author page ---------- */ .vf-page .author__title-wrapper { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .vf-page .author__title-wrapper .article-title { margin: 0; } .vf-page .bio-content__link { color: var(--accent); display: inline-flex; transition: transform .2s ease; } .vf-page .bio-content__link:hover { transform: translateY(-2px); } /* ---------- empty state ---------- */ .vf-page .empty-list { text-align: center; padding: 60px 0; color: var(--muted); font-size: 16px; } /* ---------- page show-more expander (distinct from chrome [data-expander]) ---------- Uses [data-pexpander] + #target so it is wired ONLY by redesign-pages.js and never double-bound by the chrome's [data-expander] handler. Reuses the same grid-rows height animation as the homepage .expander. */ .vf-page .pexpander { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1); } .vf-page .pexpander.on { grid-template-rows: 1fr; } .vf-page .pexpander > .pexp-inner { min-height: 0; overflow: hidden; } .vf-page [data-pexpander] .pexp-more { display: inline; } .vf-page [data-pexpander] .pexp-less { display: none; } .vf-page [data-pexpander][aria-expanded="true"] .pexp-more { display: none; } .vf-page [data-pexpander][aria-expanded="true"] .pexp-less { display: inline; } .vf-page [data-pexpander] .exp-arrow { transition: transform .3s ease; } .vf-page [data-pexpander][aria-expanded="true"] .exp-arrow { transform: rotate(180deg); } /* ---------- simple accordion (services dev-areas / tech stacks) ---------- */ .vf-page .acc { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); } .vf-page .acc-item { border-bottom: 1px solid var(--border); } .vf-page .acc-item:last-child { border-bottom: none; } .vf-page .acc-head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px clamp(20px, 2.4vw, 28px); font-family: var(--font-head); font-size: 18px; color: var(--text); } .vf-page .acc-head .acc-ic { color: var(--accent); transition: transform .3s ease; flex-shrink: 0; } .vf-page .acc-item.on .acc-head .acc-ic { transform: rotate(45deg); } .vf-page .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1); } .vf-page .acc-item.on .acc-body { grid-template-rows: 1fr; } .vf-page .acc-body > .acc-inner { min-height: 0; overflow: hidden; } .vf-page .acc-body .acc-inner-pad { padding: 0 clamp(20px, 2.4vw, 28px) 24px; color: var(--muted); font-size: 15px; line-height: 1.75; } /* ========================================================================== About page — restyle legacy sections/sliders to the .vf system. Swiper markup (classes + structure) is kept intact so the existing JS still drives the testimonials/history carousels; we only restyle appearance. Higher specificity (.vf-page .about-*) wins over the legacy main_additional. ========================================================================== */ /* hero image below the title */ .vf-page .about-hero-img { padding-top: 8px; } /* legacy style.min.css hides `.about__img` at desktop (display:none) — force it visible here */ .vf-page .about-hero-img .about__img { display: block; width: 100%; border-radius: 18px; max-height: 520px; object-fit: cover; } /* ===== intro tabs: vertical word-list + quote panel (matches live reference) ===== */ .vf-page .about-tabs { padding-top: 96px; padding-bottom: 72px; } /* lay the tab list and the quote side by side */ .vf-page .about-tabs .wrap { display: flex; gap: clamp(32px, 8vw, 140px); align-items: center; flex-wrap: wrap; } /* stack the tab words in a column (overrides the legacy centred-column + chip-row) */ /* overflow:visible kills the legacy mobile rule (.tabs gets overflow-x:scroll under 768px, which on this vertical layout shows a stray scrollbar) */ .vf-page .about-tabs .tabs { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: clamp(14px, 1.6vw, 26px); margin-bottom: 0; height: auto; overflow: visible; flex: 0 0 auto; } /* each tab is a big condensed word, faint until it is the active one */ .vf-page .about-tabs .tabs__button { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; color: var(--faint); background: transparent; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: left; transition: color .25s ease; } .vf-page .about-tabs .tabs__button:hover { color: var(--muted); } .vf-page .about-tabs .tabs__button.active, .vf-page .about-tabs .tabs__button[aria-selected="true"] { background: transparent; border: 0; color: var(--text); } /* quote column. panels are display-toggled (the tab JS just swaps .active) */ /* height:auto !important overrides the inline height the legacy tab JS sets on mobile (it assumed absolutely-positioned panels); our panels are in flow */ .vf-page .about-tabs .tabs__content { flex: 1 1 480px; max-width: 760px; height: auto !important; overflow: visible; display: block; } .vf-page .about-tabs .tabs__panel { position: static; display: none; } /* fade + slide the quote in each time the tab JS swaps the .active class */ .vf-page .about-tabs .tabs__panel.active { display: block; animation: aboutTabFade .45s cubic-bezier(.2,.7,.3,1) both; } @keyframes aboutTabFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .vf-page .about-tabs .tabs__panel-text { position: relative; padding: 30px 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.75; color: var(--muted); font-weight: 300; } /* decorative opening/closing quotation marks, restored from the reference design */ .vf-page .about-tabs .tabs__panel-text::before, .vf-page .about-tabs .tabs__panel-text::after { content: ''; position: absolute; width: 32px; height: 24px; background-size: cover; background-image: url('data:image/svg+xml;utf8,'); } .vf-page .about-tabs .tabs__panel-text::before { top: 0; left: 0; } .vf-page .about-tabs .tabs__panel-text::after { bottom: 0; right: 0; } /* ===== vision / mission: open two columns + button (matches live reference) ===== */ .vf-page .about-info .wrap { display: flex; align-items: center; justify-content: space-between; gap: clamp(32px, 5vw, 80px); flex-wrap: wrap; } .vf-page .about-info__list { display: flex; gap: clamp(32px, 5vw, 80px); max-width: 820px; list-style: none; margin: 0; padding: 0; } .vf-page .about-info__item { flex: 1 1 0; min-width: 240px; } .vf-page .about-info__title { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; color: var(--text); } .vf-page .about-info__title img { width: clamp(44px, 3.4vw, 60px); height: clamp(44px, 3.4vw, 60px); object-fit: contain; flex-shrink: 0; } .vf-page .about-info__text { font-size: 15px; line-height: 1.75; color: var(--muted); } .vf-page .about-info .sect-actions { margin: 0; flex: 0 0 auto; } /* numbers section: even row of stats, each number + suffix and each label on ONE line */ .vf-page .about-numbers .stats { margin-top: 48px; justify-content: space-between; gap: 32px 40px; } .vf-page .about-numbers .stat { flex: 0 0 auto; } /* feedback (About): the figures (incl. the text "UA" stat) read too small — bump the number size up a step so each stat number has more presence. text-transform uppercases the "ua" text stat so it reads "UA" as intended (digits unaffected). */ .vf-page .about-numbers .stat .num { font-size: clamp(48px, 5.5vw, 76px); white-space: nowrap; text-transform: uppercase; } /* the animated counter is display:block globally — make it inline so the "+"/"%" suffix stays on the same line as the number instead of dropping below it */ .vf-page .about-numbers .stat .counter { display: inline; } /* the "+"/"%" suffix glyphs (esp. % in Oswald) render oversized — drop them to a smaller superscript-style size so they read as a unit with the number */ .vf-page .about-numbers .stat .num-suffix { font-size: 0.6em; vertical-align: baseline; } /* feedback (About): add more padding between the stat number and its label */ .vf-page .about-numbers .stat .lbl { max-width: none; white-space: nowrap; margin-top: 18px; } /* testimonials slider */ .vf-page .about-reviewes__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .vf-page .about-reviewes__header .sect-head { margin-bottom: 0; } .vf-page .reviewes-slider { overflow: hidden; } .vf-page .reviewes-slider .swiper-slide { height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 18px; } .vf-page .reviewes-slider__stars { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; } .vf-page .reviewes-slider__star { width: 16px; height: 16px; } .vf-page .reviewes-slider__star::before { content: '★'; color: var(--accent); font-size: 16px; line-height: 1; } .vf-page .reviewes-slider .testimonial__text { font-size: 16px; line-height: 1.7; color: var(--text); flex: 1; } .vf-page .reviewes-slider .testimonial__name { font-family: var(--font-head); font-size: 16px; color: var(--text); } .vf-page .reviewes-slider .testimonial__position { font-size: 13px; color: var(--muted); } .vf-page .reviewes-slider__user-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .vf-page .reviewes-slider__verefied { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); } .vf-page .reviewes-slider__verefied svg { color: var(--accent); } .vf-page .about-reviewes__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 26px; } .vf-page .swiper-pagination-bullet { background: var(--faint); opacity: 1; } .vf-page .swiper-pagination-bullet-active { background: var(--accent); } /* company history slider */ .vf-page .about-history__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .vf-page .about-history__header .sect-head { margin-bottom: 0; } .vf-page .about-history__buttons { display: flex; gap: 10px; } /* Swiper's stylesheet positions .swiper-button-prev/next absolutely over the slider and adds a glyph via ::after — that's the broken overlapping arrow. Pin them back into the header flow and drop the default glyph so our circular buttons with inline SVGs render correctly. */ .vf-page .about-history__buttons > div, .vf-page .about-history__buttons .swiper-button-prev, .vf-page .about-history__buttons .swiper-button-next { position: static; margin: 0; top: auto; left: auto; right: auto; /* !important + flex-basis beat Swiper's width:calc(...) (~32px) so the buttons stay perfect circles instead of squished ovals */ width: 46px !important; height: 46px !important; flex: 0 0 46px; border-radius: 50%; border: 1px solid var(--border); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, color .2s ease, opacity .2s ease; } .vf-page .about-history__buttons .swiper-button-prev::after, .vf-page .about-history__buttons .swiper-button-next::after { content: none; } .vf-page .about-history__buttons > div:hover { border-color: var(--accent); color: var(--accent); } .vf-page .about-history__buttons .swiper-button-disabled { opacity: .35; cursor: default; } .vf-page .about-history__buttons svg { width: 18px; height: auto; } .vf-page .history-list { overflow: hidden; } /* timeline cards: leave headroom at the top for the connecting line + node */ /* display:flex !important overrides legacy `.history-list__item{display:grid!important}` which placed the copy in a centered 1fr row — that made each title start at a different height. Flow layout + top alignment makes every title start level. */ .vf-page .history-list .swiper-slide.history-list__item { height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 56px 30px 30px; display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 14px; position: relative; overflow: visible; } /* the node dot sits on the timeline, with a soft pulsing ring */ .vf-page .history-list .process-list__circle { position: absolute; top: 22px; left: 30px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent); z-index: 2; animation: histDotPulse 2.4s ease-in-out infinite; } @keyframes histDotPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent); } 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 28%, transparent); } } /* the connecting line runs from each node across the card and the gap to the next node; it animates in (scaleX) once the slider scrolls into view */ .vf-page .history-list .history-list__line { display: block; position: absolute; top: 30px; left: 0; right: -30px; height: 2px; z-index: 1; background: color-mix(in oklab, var(--accent) 50%, transparent); transform: scaleX(0); transform-origin: left center; transition: transform .8s ease; } .vf-page .history-list .history-list__line.in-view { transform: scaleX(1); } .vf-page .history-list .swiper-slide:last-child .history-list__line { display: none; } .vf-page .history-list .process-list__title { font-family: var(--font-head); font-size: 20px; color: var(--text); } .vf-page .history-list .process-list__text { font-size: 14.5px; line-height: 1.7; color: var(--muted); } /* team grid (redesign-global converts the slider to a grid; restyle the cards) */ /* all members in a single row on desktop */ .vf-page .about-teams__slider .swiper-wrapper { grid-template-columns: repeat(5, 1fr); gap: 18px; } .vf-page .about-teams__slider .swiper-slide { grid-column: auto; } /* breathing room between the section heading and the cards */ .vf-page .about-teams .sect-head { margin-bottom: 44px; } .vf-page .about-teams__slider .swiper-slide { border-radius: 16px; overflow: hidden; position: relative; display: flex; align-items: flex-end; background-size: cover; background-position: center top; min-height: 340px; border: 0; } .vf-page .about-teams__slide-content { width: 100%; padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to top, rgba(10,10,9,0.82) 0%, rgba(10,10,9,0.35) 55%, transparent 100%); color: #fff; } .vf-page .about-teams__name { font-family: var(--font-head); font-size: 18px; color: #fff; } .vf-page .about-teams__position { font-size: 13px; color: rgba(255,255,255,0.78); } .vf-page .about-teams__slide-content .social-icons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px; } /* solid white chip + dark glyph reads clearly on the dark portrait gradient (a translucent circle with a white glyph was too low-contrast) */ .vf-page .about-teams__slide-content .social-icons__link { width: 36px; height: 36px; background: #fff; border: 1px solid #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #1b1b19; transition: background .2s ease, border-color .2s ease, color .2s ease; } .vf-page .about-teams__slide-content .social-icons__link:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* literal dark fill (not currentColor) — the legacy `*{color:var(--whiteColor)}` forces the path's color to white in dark mode, which made the glyph vanish on the white chip. A fixed dark fill keeps it legible in both themes. */ .vf-page .about-teams__slide-content .social-icons__link svg { width: 18px; height: 18px; fill: #1b1b19; } .vf-page .about-teams__slide-content .social-icons__link svg path { fill: #1b1b19; } .vf-page .about-teams__slide-content .social-icons__link:hover svg, .vf-page .about-teams__slide-content .social-icons__link:hover svg path { fill: #fff; } /* certificates logo grid */ .vf-page .about-certificates__list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; } .vf-page .about-certificates__item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 140px; } .vf-page .about-certificates__item img { max-height: 120px; width: auto; object-fit: contain; } /* referral program: legacy section is a fixed-height green flex band with white text — reset it to a normal section so our contact panel lays out cleanly */ .vf-page .about-refers { background: transparent; display: block; height: auto; align-items: normal; } .vf-page .contact-grid { align-items: start; max-height: none; overflow: visible; } /* vertically centre the email field/button against the copy on the left */ .vf-page .about-refers .contact-grid { align-items: center; } /* legacy joins the input+submit into one pill (overflow:hidden, no gap) — open it up so there's clear spacing between the field and the Send button */ .vf-page .about-refers__form { overflow: visible; align-items: center; gap: 16px; } .vf-page .about-refers__form .wpcf7-form-control-wrap { flex: 1 1 240px; } .vf-page .about-refers__form input[type="submit"] { height: auto; align-self: stretch; } .vf-page .about-refers .cg-side { text-align: left; } .vf-page .about-refers__title { color: var(--text); text-align: left; } .vf-page .about-refers__text { color: var(--muted); text-align: left; } /* referral copy-link */ .vf-page .about-refers__copy-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; color: var(--text); cursor: pointer; } .vf-page .about-refers__copy-link a { color: inherit; } .vf-page .about-refers__copy-link svg { color: var(--accent); cursor: pointer; } /* ========================================================================== Services page — restyle legacy sections to the .vf system. Keeps legacy hooks the JS needs: #services_show + [data-visible]/.hide, .accordion/.panel (max-height toggled by app.min.js), .process-list. ========================================================================== */ /* frameworks intro: two columns (copy + logo strip) */ /* single-column header (the framework-logo strip was removed) */ .vf-page .services-direction__header { margin-bottom: 56px; } .vf-page .services-direction__header .sect-head { margin-bottom: 0; } .vf-page .direction-icons__list { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0 0 16px; padding: 0; } .vf-page .direction-icons__item { width: 56px; height: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 11px; } .vf-page .direction-icons__item img { max-width: 100%; max-height: 100%; object-fit: contain; } .vf-page .services-direction__text { font-size: 14px; color: var(--muted); } /* direction services use .svc-grid + .scard; legacy .hide removes overflow items until #services_show reveals them. scard h3/p come from home-redesign.css. */ .vf-page .services-direction__list.svc-grid { margin-top: 0; list-style: none; padding: 0; } .vf-page .direction-list__item.hide { display: none; } .vf-page .direction-list__title { font-size: 21px; line-height: 1.2; color: var(--text); } /* feedback (Services): tighten + unify the line spacing inside the "What We Do" cards. The description used line-height 1.7 while the feature list below used 1.5 — match the paragraph to 1.5 so the whole card copy reads as one tight, consistent block. (The selectors out-rank `.vf .scard p {line-height:1.7}`.) */ .vf-page .services-direction__list .scard p, .vf-page .direction-list__text { font-size: 14px; color: var(--muted); line-height: 1.5; } /* feedback (Services): collapsible card grids — show only the first 3 cards by default and reveal the rest with a "Show more" button. The button uses the shared [data-pexpander] hook (redesign-pages.js), which toggles `.on` on the grid; without `.on` we hide every card from the 4th onward. */ .vf-page .svc-grid.is-collapsible:not(.on) > li:nth-child(n+4), .vf-page .ind-grid.is-collapsible:not(.on) > li:nth-child(n+4) { display: none; } .vf-page .svc-more { display: flex; justify-content: center; margin-top: 28px; } .vf-page .svc-more__btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .vf-page .svc-more__chev { transition: transform .25s ease; } /* flip the chevron when the grid is expanded (button aria-expanded toggled by JS) */ .vf-page .svc-more__btn[aria-expanded="true"] .svc-more__chev { transform: rotate(180deg); } /* accordion (legacy