/* ============================================================ SHARED.CSS — Swift Talent Solutions Design System Consolidated cross-page component/utility layer. Load order (per Architecture-Plan.md §2 ITCSS cascade): 1. css/tokens.css 2. css/site.css 3. css/shared.css <-- this file 4. css/tokens-additions.css (optional — new tokens this file's rules reference) 5. css/.css (page-specific residual rules only) Every page currently under "04 Refactored Pages/" loads tokens.css -> site.css -> home.css -> .css, with the sole exception of afspraak.html and strategiegesprek.html, which load only tokens.css -> site.css -> .css (they are a self- contained "dark-landing" template family with no nav/footer and were never wired to home.css). This file is the formal extraction of every class that was PROVEN — by exact byte-for-byte duplication across 2 or more of the 16 page CSS files, or by REFACTOR-SUMMARY.md's own account of home.css being "the second shared layer, loaded by every standalone page" — to be a cross-page-reused pattern, not a homepage-only one. Genuinely homepage-only rules (kanban demo, WhatsApp chat mockup, ad-fan carousel, blog pattern watermarks, hero phone-float mockup, results-bar/gallery pattern positioning) are NOT here; they stay in home.css as page-unique rules, exactly as the "leave page CSS with only page-unique rules" instruction requires. No value in this file was changed from its source. Every consolidation below is a straight copy-and-dedupe: same selector, same declarations, same var(--token) references as the file(s) it was extracted from. Where two files defined the "same" class with genuinely different values, that is called out in Design-System.md's "Standardization Decisions" section and NOT silently merged here. ============================================================ */ /* ============================================================ 1. TYPOGRAPHY ============================================================ */ /* Heading font-family utility — replaced 52 repeated inline font-family:var(--font-heading) declarations on the homepage; reused wherever headline-style numerals/labels appear outside an actual h1-h3 (e.g. calculator output figures). */ .u-font-heading{font-family:var(--font-heading)} /* Long-form article body copy (17px / 1.75) — identical rule independently defined in 6 files: ai-saas-vs-recruitment- marketing-bureau.css, meta-ads-vs-indeed-linkedin.css, werkgeversmerk-klein-budget.css, passieve-kandidaten-bereiken.css, ai-screening-recruitment.css, 9-16-recruitment-advertentie.css. font-size uses --text-md (see tokens-additions.css); line-height uses --leading-loose (see tokens-additions.css). */ .article-body{font-size:var(--text-md,17px);line-height:var(--leading-loose,1.75)} /* GEO "kort antwoord" direct-answer box lede copy — identical rule independently defined in 12 files (see Duplication Audit). */ .answer-box__text{font-size:var(--text-md,17px);line-height:var(--leading-relaxed,1.6)} /* Hero lede / founder-bio copy line-height — same 1.6 value used by .hero-copy (home.css), .founder-copy (home.css) and .error-lede (404.css); consolidated onto the shared token. */ .hero-copy,.founder-copy,.error-lede{line-height:var(--leading-relaxed,1.6)} /* Section-level H1 clamp sizes reused across page-hero variants (aanpak/diensten/resultaten/contact section headers on the homepage, and identically-styled standalone-page article/ comparison heroes). */ .page-h1{font-size:clamp(36px,5.5vw,60px)} .page-h1--sm{font-size:clamp(32px,5vw,48px)} /* Homepage/article hero H1 (full clamp, matches the global h1 rule in site.css exactly but scoped to the hero component so it can be targeted independently of the global element selector). */ .hero-h1{font-size:clamp(40px,7vw,72px)} /* Article-hero category badge (pill above H1: "Strategie", "AI Screening", etc. + reading time). The class carries no declarations of its own on any of the 6 pages that reference it (ai-saas, meta-ads, werkgeversmerk, passieve-kandidaten, ai-screening, 9-16-recruitment) — its 2px corner radius comes from .u-radius-sm applied directly on the element. Declared here as an empty hook, matching every source file, purely so the class's existence and cross-page reuse is documented in one place instead of 6. */ .article-badge{} /* Founder/contact section heading, homepage only but structurally identical treatment to other section-scale headings. */ .founder-heading{font-size:clamp(26px,3.5vw,36px)} .section-heading-sm{font-size:28px} /* ============================================================ 2. SPACING / CONTAINERS ============================================================ */ /* Comparison table needs a horizontal-scroll wrapper on narrow viewports; identical pairing defined independently in 5 files (prijzen, uitzendbureau, werving-en-selectie, zelf-werven, detachering) plus a standalone .compare-table rule (no wrap) in home.css. Consolidated here as the single canonical pair. */ .compare-table-wrap{max-width:100%} .compare-table{min-width:640px} /* Quiz funnel shell max-width — shared structural wrapper used on home teaser, home contact-page quiz and (via its own --lp-* dark-landing variant) strategiegesprek.html. */ .quiz-wrap{max-width:720px} /* ============================================================ 3. COLORS ============================================================ */ /* No standalone color utility classes beyond the token-backed .text-*/.bg-* atoms already shipped in site.css (Tailwind-style arbitrary-value utilities, e.g. .text-\[#066CF4\], .bg-white). Every color used across the 16 pages resolves to a css/tokens.css custom property except the WhatsApp brand palette (#25D366, #075E54, #DCF8C6, #ECE5DD — Meta brand colors, not part of this design system) and the dark-landing template's --dl-* exceptions below (§9 Utilities / Dark-Landing Tokens). See Design-System.md §"Colors" for the full palette reference. */ .gallery-hero-eyebrow{color:var(--blue-300)} /* ============================================================ 4. BUTTONS ============================================================ */ /* .sts-btn / .sts-btn-outline live in site.css and are unchanged — listed here only for completeness of the Buttons section; see Design-System.md. This file adds the CTA-band button variant, which is identical across all 6 "CTA band" instances on the homepage (site.css defines the base .sts-btn; this modifies its hover/transition timing when placed inside a full-bleed blue band). */ .cta-band__btn{border-radius:var(--radius-md);transition:filter var(--duration-fast) var(--ease-standard)} .cta-band__btn:hover{filter:brightness(.92)} /* Hero CTA button — adds the brand drop-shadow on top of the base .sts-btn styling; reused by every hero that carries a primary CTA (home hero, sales-fieldmarketing hero). */ .hero-cta{box-shadow:var(--shadow-brand)} /* Mobile sticky CTA bar mail-link button radius. */ /* Footer text: on mobile/tablet only, a slightly smaller size and tighter line-height than the default .text-sm (14px/20px) — per explicit request. Applies to every element carrying .text-sm inside the footer (column headings and body/link text alike, since both use that same utility class in the footer markup). Desktop (≥1024px) is untouched. */ @media (max-width:1023px){ footer .text-sm{font-size:13px;line-height:1.4} } /* ============================================================ 5. CARDS ============================================================ */ /* Top-accent card (blue 3px top border + rounded corners) — used for "Waarom STS" / "Voor wie" / "Guarantees" cards on the homepage and the sales-fieldmarketing problem/aanpak cards. */ .card-accent-top{border-radius:var(--radius-lg);border-top:3px solid var(--sts-blue)} /* Quiz option card — funnel step choice buttons; base rule lives in site.css (.quiz-opt/.quiz-letter/.quiz-selected), reused verbatim by home.css's quiz teaser/contact instances. The dark-landing family (afspraak/strategiegesprek) intentionally reimplements this with a distinct visual spec (1.5px border, different hover tint, larger letter badge) — see Design-System.md "Standardization Decisions" for why that is a deliberate variant, not drift, and is NOT collapsed into this shared rule. */ .quiz-card{border-radius:var(--radius-lg);border-top:3px solid var(--sts-blue);box-shadow:var(--shadow-md)} /* Testimonial / pull-quote card (contact section). */ .quote-card{border-radius:var(--radius-lg);border-left:3px solid var(--sts-blue)} /* Elevated hover-lift interaction — site.css's .lift class is already shared; documented here for completeness since it is applied to cards across nearly every page. */ /* ============================================================ 6. FORMS ============================================================ */ /* input[type=range].roi-range / .roi-thumb theming lives in site.css and is already shared across all 5 ROI/savings calculator instances (home + 4 comparison pages) — listed here for completeness only, no rules duplicated. */ /* Calculator output figures — identical 4-rule set independently defined in 4 files: uitzendbureau-vs-recruitment-marketing.css, werving-en-selectie-bureau-vs-recruitment-marketing.css, zelf-werven-vs-recruitment-marketing.css, detachering-vs-recruitment-marketing.css. Consolidated verbatim; radius uses the shared --radius-xl token added in tokens-additions.css (12px had no existing token — see that file's rationale). */ .calc-val{font-family:var(--font-mono,monospace)} .calc-panel{border-radius:var(--radius-xl,12px)} .calc-figure{font-family:var(--font-heading)} .calc-diff{font-family:var(--font-heading);color:var(--blue-200)} /* Quiz funnel form field. Base .quiz-input radius from home.css, reused by any page embedding the shared quiz shell (not the dark-landing family, which uses its own --dl-input, see below). */ .quiz-input{border-radius:var(--radius-md)} /* ============================================================ 7. ICONS ============================================================ */ /* No dedicated icon-sprite/icon-font system exists across the 16 pages — all iconography is inline SVG sized via the .w-*/.h-* utilities in site.css, or emoji/character glyphs (FAQ's "+"/"−" via ::after content, star ratings via literal "★" glyphs). No consolidation action needed; documented in Design-System.md for completeness so the "Icons" category isn't silently empty. */ /* ============================================================ 8. HEADER / NAV / FOOTER (site chrome, shared across all standalone pages — everything except the 2 dark-landing pages) ============================================================ */ /* Standalone-page header logo — identical 1-line rule independently defined in 13 files (see Duplication Audit). Intentionally distinct from home.css's .nav-logo (filter:brightness(0) invert(1)), because standalone pages reference the pre-made white lockup SVG asset directly and would double-invert if they reused .nav-logo. Do not merge .header-logo and .nav-logo — they target two different source assets. */ .header-logo{height:26px;width:auto} /* Homepage/dark-header nav logo (blue lockup asset forced white via filter). Kept separate from .header-logo per the note above. */ .nav-logo{height:26px;width:auto;filter:brightness(0) invert(1)} /* Footer logo — identical 1-line rule; only ever defined once (in home.css) and correctly reused (never duplicated) by every other standalone page's CSS, confirmed by source-file audit. Promoted here as the formal shared location. */ .footer-logo{height:28px;width:auto} /* Page shell / router base layout — #sts-root and main flex rules that replace the former per-page inline min-height/flex styles. Reused verbatim by every standalone page. */ #sts-root{min-height:100vh} main{flex:1} /* ============================================================ 9. UTILITIES ============================================================ */ /* ---- Radius / shadow / display atoms ---- Originally defined once in home.css, documented there as replacing repeated inline declarations (border-radius:2px x63, border-radius:4px x48, border-radius:8px x41, display:none x18 etc. in the pre-refactor homepage alone). Every standalone page loads home.css purely to get these five classes plus .u-font-heading (already listed under Typography) — promoting them here makes that dependency explicit instead of implicit through home.css. */ .u-radius-sm{border-radius:var(--radius-sm)} .u-radius-md{border-radius:var(--radius-md)} .u-radius-lg{border-radius:var(--radius-lg)} .u-radius-pill{border-radius:var(--radius-pill)} .u-hidden{display:none} .u-shadow-sm{box-shadow:var(--shadow-sm)} .u-shadow-md{box-shadow:var(--shadow-md)} .u-shadow-lg{box-shadow:var(--shadow-lg)} .u-shadow-brand{box-shadow:var(--shadow-brand)} /* ---- Decorative background patterns ---- .hero-dot-bg is defined once in home.css and reused (via the home.css load) by every standalone page that shows the dotted background texture behind its hero (prijzen, all comparison pages, all article pages, 404 via its own .error-pattern-img positioning). Promoted here as the canonical shared rule. */ .hero-dot-bg{background-image:radial-gradient(rgba(6,108,244,.09) 1.5px,transparent 1.5px);background-size:26px 26px} .dot-bg--light{background-image:radial-gradient(rgba(6,108,244,.07) 1.5px,transparent 1.5px);background-size:26px 26px} /* Hero watermark pattern-image positioning — shared spec for the large translucent pattern-blue.svg placed top-right of a hero. Both home.css's .hero-pattern-img and 404.css's .error-pattern-img use these exact numeric values independently; consolidated to one rule with both selectors (no visual change — same values either way). */ .hero-pattern-img,.error-pattern-img{right:-120px;top:-100px;width:400px;opacity:.16} /* CTA-band watermark pattern-image positioning — identical rule independently defined in 12 files as .cta-pattern-img (see Duplication Audit). home.css's own homepage CTA bands use a differently-named class, .cta-band__pattern, with the SAME property values (right:-10%;top:50%;transform:translateY(-50%); width:44vw;max-width:700px;opacity:.18) — see Design-System.md "Standardization Decisions" for why both selectors are kept (naming reflects two different markup contexts: a single CTA band vs. 6 repeated CTA bands on one page) while sharing one rule body here. */ .cta-pattern-img,.cta-band__pattern{right:-10%;top:50%;transform:translateY(-50%);width:44vw;max-width:700px;opacity:.18} /* Hero badge (eyebrow pill above H1) — defined once in home.css, reused via the home.css load by prijzen, all 4 calculator comparison pages and sales-fieldmarketing (confirmed by source audit: no other file redefines it). Promoted here as canonical. */ .hero-badge{border-radius:var(--radius-sm);max-width:calc(100vw - 48px);flex-wrap:wrap;row-gap:2px} .hero-badge__dot{flex-shrink:0} .hero-badge__text{min-width:0;flex:1 1 auto} /* ---- FAQ accordion (native
/) ---- Defined once in home.css, reused via the home.css load by every page carrying a real FAQ section (home, prijzen, uitzendbureau, werving-en-selectie, zelf-werven, detachering, sales- fieldmarketing). Confirmed by source audit: no other file redefines .faq-q/.faq-a. The 2 dark-landing pages (afspraak, strategiegesprek) do NOT load home.css and instead each carry a near-identical but independently-authored FAQ-marker-hiding rule (details.faq summary + .faq-plus) — see Standardization Decisions for why those two are kept as their own consolidated pair below rather than merged into this one (different selector root: native
vs. this .faq-item/.faq-q pattern). */ .faq-list{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)} .faq-item{border-top:1px solid var(--border-subtle)} .faq-item:first-child{border-top:0} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);width:100%;text-align:left;font-weight:var(--fw-bold);padding:var(--space-5) 0;cursor:pointer;list-style:none} .faq-q::-webkit-details-marker{display:none} .faq-q::marker{content:''} .faq-q::after{content:'+';color:var(--sts-blue);font-size:20px;flex-shrink:0;line-height:1} .faq-item[open] .faq-q::after{content:'\2212'} .faq-a{padding-bottom:var(--space-5);color:var(--text-muted)} /* Dark-landing FAQ marker (afspraak.css + strategiegesprek.css) — byte-for-byte identical in both source files. Consolidated here as the one shared rule for that template family. */ details.faq summary{list-style:none;cursor:pointer} details.faq summary::-webkit-details-marker{display:none} .faq-plus{transition:transform 180ms var(--ease-standard)} details.faq[open] .faq-plus{transform:rotate(45deg)} /* ============================================================ 9b. DARK-LANDING TEMPLATE SHARED TOKENS + RULES (afspraak.html + strategiegesprek.html) ------------------------------------------------------------ Both pages independently declared an identical set of page-scoped custom properties under two different prefixes (--ap-* / --lp-*) plus several identical structural rules. Since the VALUES are byte-for-byte identical (not a legitimate visual variant, just independent duplication because each page was refactored in a separate pass), they are consolidated here under one canonical --dl-* ("dark-landing") prefix. Both afspraak.html and strategiegesprek.html would reference these instead of redeclaring their own :root block — zero visual change, since every value below matches both source files exactly. NOT folded into tokens.css directly: these colors/shadows only ever appear on this 2-page template family, never on the other 14 pages, so per the task's "3+ files" bar for promoting a value into the global token set, they stay scoped here as a documented template-level exception rather than global tokens. See Design-System.md §5 "Fold in --ap-*/--lp-*" for the full consolidation table. ============================================================ */ :root{ --dl-star:#FFB300; /* star-rating gold — no site-wide token equivalent */ --dl-accent-blue:#4E9BFF; /* on-dark eyebrow/mechanism accent — was --ap-mech-blue / --lp-eyebrow-blue */ --dl-border-card:#E4E6E9; /* booking/quiz card border — distinct from --neutral-200 (#DDDFE3) */ --dl-shadow-card:0 24px 60px rgba(11,12,13,.08); /* booking/quiz card shadow — distinct from --shadow-lg */ --dl-radius-card:16px; /* booking/quiz card corner radius — no site-wide token equivalent */ --dl-radius-sm-card:10px; /* repeated small content-card radius throughout both pages */ } /* Page shell (identical in both source files, .ap-shell / .lp-shell) */ .ap-shell,.lp-shell{min-height:100vh;display:flex;flex-direction:column} .ap-main,.lp-main{flex:1} /* Sticky header (identical in both source files) */ .ap-header,.lp-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--neutral-100)} /* Hero dotted background + pattern watermark (identical values in both source files) */ .ap-dotbg,.lp-dotbg{background-image:radial-gradient(rgba(6,108,244,.09) 1.5px,transparent 1.5px);background-size:26px 26px} .ap-hero-pattern,.lp-hero-pattern{right:-100px;top:-80px;width:380px;opacity:.16} /* Star rating + CTA height (identical values) */ .ap-stars{font-size:18px;color:var(--dl-star)} .lp-stars{font-size:20px;color:var(--dl-star)} /* size intentionally larger on strategiegesprek — kept page-specific */ .ap-cta-h,.lp-cta-h{height:52px} /* Booking/quiz card shell (identical structural values; afspraak's is a static
, strategiegesprek's wraps the quiz funnel — selector kept separate so each page's specific box-model context still applies, values consolidated onto shared --dl-* tokens) */ .ap-card{border:1px solid var(--dl-border-card);border-radius:var(--dl-radius-card);background:var(--surface-card);box-shadow:var(--dl-shadow-card)} .quiz-wrap.lp-quiz-card{border:1px solid var(--dl-border-card);border-radius:var(--dl-radius-card);background:var(--surface-card);box-shadow:var(--dl-shadow-card)} /* Repeated small content-card radius (identical value, two names) */ .ap-round,.lp-round{border-radius:var(--dl-radius-sm-card)} /* On-dark eyebrow accent (identical value, two names) */ .ap-eyebrow-mech,.lp-eyebrow-accent{color:var(--dl-accent-blue)} /* Form input theming (identical structural values across both pages' text/select inputs) */ input.ap-input,select.ap-input,input.lp-input{border:1.5px solid var(--neutral-200);border-radius:var(--radius-lg);padding:12px 14px;font-size:var(--text-base);width:100%;transition:border-color var(--duration-fast);background:var(--surface-card)} input.ap-input:focus,select.ap-input:focus,input.lp-input:focus{outline:none;border-color:var(--sts-blue)} /* Thank-you state icon badge (identical value, two names) */ .ap-thanks-icon,.lp-thanks-icon{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--blue-50);display:flex;align-items:center;justify-content:center} /* Smooth-scroll-to-anchor (identical in both source files) */ html{scroll-behavior:smooth} /* NOTE — sticky CTA bar background color is a genuine near-duplicate, NOT consolidated: afspraak.css's .ap-sticky uses background:var(--sts-black) (#000000); strategiegesprek.css's .sts-sticky uses background:var(--neutral-900) (#0B0C0D) — these are two different hex values one shade apart. Merging them would change one page's rendering by ~1% luminance. Kept as two separate rules; see Design-System.md "Standardization Decisions" for the full reasoning. Selectors themselves are also still page-scoped (.ap-sticky / .sts-sticky) — only the shared position:fixed/left/right/bottom/z-index/transition shape is identical, so it is documented but intentionally NOT merged into one selector below. */