/* ============================================================================ * CyclingSoft — "Modernist" skin (PAX-3597) * * Tenant-scoped overlay: loaded ONLY on the CyclingSoft public website, as the * LAST stylesheet in , so it wins over the general niche's Tailwind build. * * Two jobs: * 1. Foundations + design tokens for the imported Claude "Modernist" look * (Archivo, ink-on-warm-grey, tomato-red #ec3013 accent, sharp corners, * thick 2px ink dividers). * 2. Component styles (`.cs-*`) for the tenant-own block views in * tenant_custom/cyclingsoft/views/website/blocks/*.php, plus a light skin * for the blocks still rendered by the generic partials (cycling_pricing, * faq). * * Fully reversible: delete this file + the views dir → site reverts to general. * ==========================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap'); /* ── Design tokens ─────────────────────────────────────────────────────────*/ :root { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-primary: #ec3013; --color-accent: #ec3013; --accent-color: #ec3013; --color-brand: #ec3013; --color-secondary: #ae1800; --color-primary-text: #ffffff; --radius: 0px; --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif; --ink: #201e1d; --ink-divider: rgba(32, 30, 29, .40); } /* ── Foundations ───────────────────────────────────────────────────────────*/ body { background: var(--color-bg) !important; color: var(--color-text) !important; font-family: "Archivo", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .font-heading, .font-bold, .font-semibold, .font-extrabold { font-family: "Archivo", system-ui, sans-serif !important; letter-spacing: -0.02em; } [class*="rounded"] { border-radius: 0 !important; } a { text-underline-offset: 3px; } /* ── Header ─────────────────────────────────────────────────────────────── */ header.sticky { background: var(--color-bg) !important; border-bottom: 2px solid var(--ink-divider) !important; box-shadow: none !important; backdrop-filter: none !important; } header a[href="/"] .font-bold.text-lg, header .font-bold.text-lg { color: var(--color-text) !important; font-weight: 900 !important; letter-spacing: -0.02em; } header a[href="/"]::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; background: var(--color-accent); } header nav a:hover { color: var(--color-accent) !important; } footer { border-top: 2px solid var(--ink-divider); } /* ══════════════════════════════════════════════════════════════════════════ * Modernist component library (.cs-*) — used by the tenant-own block views. * ════════════════════════════════════════════════════════════════════════ */ .cs-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .cs-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent); } .cs-section { border-top: 2px solid var(--ink-divider); } .cs-section:first-child { border-top: 0; } /* ── Hero ─────────────────────────────────────────────────────────────────*/ .cs-hero { background: var(--color-bg); padding: 72px 0 64px; } .cs-hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } @media (min-width: 900px) { .cs-hero__grid { grid-template-columns: 1.05fr .95fr; gap: 56px; } } .cs-hero__title { font-size: clamp(38px, 6vw, 66px); font-weight: 900; line-height: .98; letter-spacing: -0.03em; color: var(--ink); margin: 14px 0 20px; } .cs-hero__sub { font-size: clamp(16px, 2vw, 20px); line-height: 1.5; max-width: 42ch; color: var(--color-neutral-800); } .cs-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-weight: 800; letter-spacing: -0.01em; border: 2px solid var(--ink); background: var(--color-accent); color: #fff; text-decoration: none; transition: transform .12s ease, background .12s ease; } .cs-btn:hover { transform: translate(-2px, -2px); background: var(--color-secondary); } .cs-btn--ghost { background: transparent; color: var(--ink); } .cs-btn--ghost:hover { background: var(--ink); color: #fff; } .cs-hero__cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } /* ── Screenshot placeholder panel (shared by hero + tekst_foto) ────────────*/ .cs-shot { position: relative; border: 2px solid var(--ink); background: #fff; aspect-ratio: 4 / 3; overflow: hidden; } .cs-shot svg { display: block; width: 100%; height: 100%; } .cs-shot__tag { position: absolute; left: 0; top: 0; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; } /* ── Prose / positioning (titel_tekst) ─────────────────────────────────────*/ .cs-prose { padding: 64px 0; } .cs-prose--center { text-align: center; } .cs-prose__title { font-size: clamp(28px, 4vw, 44px); font-weight: 900; line-height: 1.04; letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 0; } .cs-prose--center .cs-prose__inner { max-width: 720px; margin: 0 auto; } .cs-prose__body { margin-top: 20px; font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); } .cs-prose__body > p { margin: 0 0 14px; } .cs-prose__body strong { color: var(--ink); font-weight: 800; } .cs-prose__body ul { list-style: none; margin: 20px 0 0; padding: 0; } .cs-prose__body li { position: relative; padding: 12px 0 12px 30px; border-top: 1px solid var(--ink-divider); font-size: 16px; line-height: 1.5; } .cs-prose__body li::before { content: ""; position: absolute; left: 0; top: 19px; width: 12px; height: 12px; background: var(--color-accent); } /* ── Features grid ─────────────────────────────────────────────────────────*/ .cs-features { padding: 64px 0; } .cs-features__head { text-align: center; max-width: 640px; margin: 0 auto 44px; } .cs-features__title { font-size: clamp(26px, 3.5vw, 40px); font-weight: 900; letter-spacing: -0.025em; color: var(--ink); } .cs-features__intro { margin-top: 14px; color: var(--color-neutral-800); font-size: 17px; line-height: 1.55; } .cs-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 2px solid var(--ink); } @media (min-width: 640px) { .cs-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .cs-grid--3 { grid-template-columns: repeat(3, 1fr); } } .cs-card { padding: 28px 24px; background: var(--color-bg); border-right: 2px solid var(--ink-divider); border-bottom: 2px solid var(--ink-divider); } .cs-card__chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--color-accent); color: #fff; margin-bottom: 16px; } .cs-card__chip svg { width: 22px; height: 22px; stroke: #fff; color: #fff; } .cs-card__title { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em; } .cs-card__body { font-size: 14px; line-height: 1.6; color: var(--color-neutral-700); } /* ── Text + photo alternating rows ────────────────────────────────────────*/ .cs-media { padding: 56px 0; } .cs-media__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } @media (min-width: 860px) { .cs-media__grid { grid-template-columns: 1fr 1fr; gap: 56px; } .cs-media__grid--reverse .cs-media__text { order: 2; } } .cs-media__title { font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.025em; color: var(--ink); margin: 12px 0 14px; } .cs-media__body { font-size: 16px; line-height: 1.65; color: var(--color-neutral-800); } /* ── CTA band ──────────────────────────────────────────────────────────────*/ .cs-cta { background: var(--ink); color: #fff; padding: 72px 0; text-align: center; } .cs-cta__title { font-size: clamp(28px, 4vw, 46px); font-weight: 900; letter-spacing: -0.025em; margin: 0 0 12px; } .cs-cta__sub { font-size: 18px; opacity: .85; max-width: 560px; margin: 0 auto 30px; } .cs-cta__row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .cs-cta .cs-btn--ghost { color: #fff; border-color: #fff; } .cs-cta .cs-btn--ghost:hover { background: #fff; color: var(--ink); } /* ══════════════════════════════════════════════════════════════════════════ * Skin for blocks still rendered by generic partials (cycling_pricing, faq). * ════════════════════════════════════════════════════════════════════════ */ .uppercase.tracking-wider, .uppercase.tracking-wide, .text-indigo-600, .text-indigo-400 { color: var(--color-accent) !important; } /* Pricing cards */ .grid .flex.flex-col[class*="rounded"] { border-radius: 0 !important; border: 2px solid var(--ink-divider) !important; box-shadow: none !important; background: var(--color-bg) !important; } .border-emerald-200, .border-emerald-300 { border-radius: 0 !important; border: 2px solid var(--color-accent) !important; background: #fff2ef !important; } [class*="text-emerald"], [class*="text-green"] { color: var(--color-accent) !important; } [class*="border-emerald"], [class*="border-green"] { border-color: var(--color-accent) !important; } [class*="bg-emerald"], [class*="bg-green"] { background: #fff2ef !important; } /* FAQ accordion */ .space-y-3 > [x-data] { border-radius: 0 !important; border: 2px solid var(--ink-divider) !important; background: var(--color-bg) !important; } .space-y-3 > [x-data] .font-medium { font-weight: 800 !important; }