/* ============================================================================ reinwok.com — site.css Loaded on EVERY page. Design tokens, reset, typography, layout containers, buttons, header/nav/dropdowns, logo, page-header, marketing sections, legal-page typography, footer, search overlay (Pagefind), image lightbox, back-to-top, animations. Consolidated from: index.html inline CSS (marketing system, most complete), common/logo-styles.css, the header/footer halves of documentation/docs-styles.css + monday/monday-docs.css + blog/blog-styles.css, and the shared parts of contact/eula/privacy-policy inline CSS. ============================================================================ */ /* ---------------------------------------------------------------- Tokens -- */ /* Palette: a deep-cyan brand family on near-white cyan-tinted surfaces, deep navy ink and a mint CTA accent. Every text/background pair below is >= 4.5:1 (see migration/style-reference.md §8 — the reference site's own cyan and grey text fail AA, so we use darkened variants for anything that carries text and keep the light cyan for fills, borders and decoration only). */ :root { /* Brand — deep cyan. --primary-color is safe as text on white AND as a fill under white text (5.56:1 both ways). --primary-light is decoration only. */ --primary-color: #0C7288; --primary-dark: #095A6B; --primary-light: #4FC3D9; --primary-tint: #E8F6F9; /* Mint CTA accent — always dark ink on the light fill, never white. */ --cta-color: #2FDCB4; --cta-hover: #22CBA4; --cta-border: #1FC9A2; --cta-ink: #04302A; --cta-glow: rgba(47, 220, 180, 0.40); --cta-soft: #C9F7EA; --cta-soft-ink: #0B5A48; --secondary-color: #137A5B; --secondary-dark: #0B5A48; --accent-color: #5C49BE; /* Ink */ --text-primary: #0A2233; --text-secondary: #3F5A6B; --text-light: #5A7080; /* Surfaces — white, a faint cyan band, a hero wash, and a calm navy footer. */ --bg-primary: #FFFFFF; --bg-secondary: #EFF6F8; --bg-tint: #F4FBFC; --bg-dark: #1F323E; --border-color: #DCE8EC; --border-strong: #C3D6DC; /* Layered, low-opacity navy shadows (reference uses navy, never pure black). */ --shadow-sm: 0 1px 2px rgba(10, 34, 51, 0.06), 0 1px 3px rgba(10, 34, 51, 0.08); --shadow-md: 0 4px 12px 4px rgba(10, 34, 51, 0.04), 0 1px 6px rgba(10, 34, 51, 0.10); --shadow-lg: 0 12px 28px rgba(10, 34, 51, 0.10), 0 2px 8px rgba(10, 34, 51, 0.06); --shadow-xl: 0 24px 56px rgba(10, 34, 51, 0.14), 0 4px 12px rgba(10, 34, 51, 0.06); /* Gradients. Both --gradient-primary stops are dark enough to carry white text AND to be used as .gradient-text on white. 222deg is the reference's signature angle; the soft pairs are tint-to-tint, so they take dark ink. */ --gradient-primary: linear-gradient(222deg, #095A6B 0%, #0E7A91 100%); --gradient-secondary: linear-gradient(222deg, #0F5C3E 0%, #1B8F5F 100%); --gradient-accent: linear-gradient(222deg, #4B3AA8 0%, #6E5AC9 100%); --gradient-hero: linear-gradient(180deg, #F4FBFC 0%, #FFFFFF 100%); --gradient-mesh-cyan: linear-gradient(222deg, #A6DCE4 0%, #EAFAFC 100%); --gradient-mesh-blue: linear-gradient(222deg, #BFDCF5 0%, #F4F9FD 100%); --gradient-mesh-violet: linear-gradient(222deg, #D6D3F0 0%, #F8F8FD 100%); /* Radii — small on controls and cards, generous on panels and hero art. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Type scale (reference: headings 600, generous 1.6-1.75 body leading). */ --fs-h1: 54px; --fs-h2: 40px; --fs-h3: 28px; --fs-lead: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fw-heading: 600; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', SFMono-Regular, Monaco, Menlo, Consolas, monospace; } /* Optional per-product accent. The docs layout may set data-product="" on (or on .docs-layout) to restore each app's original brand color. Purely additive — everything works without it. */ /* Each accent is darkened to the same contrast floor as --primary-color, so a product page stays readable and still sits inside the new palette. Both gradient stops carry white text. */ [data-product="monday-workhub"] { --primary-color: #5145E0; --primary-dark: #4035C4; --primary-light: #8E86F2; --primary-tint: #EFEEFD; --gradient-primary: linear-gradient(222deg, #4035C4 0%, #5F52EA 100%); } [data-product="jira-reminders"] { --primary-color: #157F53; --primary-dark: #0F6541; --primary-light: #4FC08D; --primary-tint: #E9F7F0; --gradient-primary: linear-gradient(222deg, #0F5C3E 0%, #178054 100%); } [data-product="jira-label-manager"] { --primary-color: #5C49BE; --primary-dark: #4A3A9C; --primary-light: #9186DC; --primary-tint: #F1EFFA; --gradient-primary: linear-gradient(222deg, #4A3A9C 0%, #6E5AC9 100%); } [data-product="jira-risk-assessment"] { --primary-color: #C0392B; --primary-dark: #9C2D22; --primary-light: #E8796B; --primary-tint: #FBEEEC; --gradient-primary: linear-gradient(222deg, #9C2D22 0%, #C0392B 100%); } /* ------------------------------------------------------------ Reset/base -- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.6; /* Faint cyan page canvas: docs, blog, contact and the legal pages all rely on it. Marketing sections on the homepage paint their own background. */ background: var(--bg-secondary); } /* `height: auto` is required because the build stamps intrinsic width/height attributes on every content (CLS fix): without it, an image scaled down by `max-width: 100%` would keep its full attribute height and distort. */ img { max-width: 100%; height: auto; } /* ------------------------------------------------------------ Containers -- */ .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; } .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 24px; } /* Marketing / legal content stays at the narrower 1200px measure. */ .hero .container, .trusted-by .container, .product-section .container, .cta-section .container, .content-section .container { max-width: 1200px; } .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* --------------------------------------------------------------- Buttons -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: 16px; line-height: 1.5; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; border: 1px solid transparent; cursor: pointer; } /* Primary CTA: mint fill with deep-navy ink (11.4:1). Never white-on-mint. */ .btn-primary { background: var(--cta-color); border-color: var(--cta-border); color: var(--cta-ink); box-shadow: 0 1px 6px var(--cta-glow), 0 1px 3px rgba(10, 34, 51, 0.10); } .btn-primary:hover { background: var(--cta-hover); transform: translateY(-2px); box-shadow: 0 6px 18px var(--cta-glow), 0 2px 6px rgba(10, 34, 51, 0.12); } .btn-secondary { background: white; color: var(--primary-dark); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn-secondary:hover { border-color: var(--primary-color); background: var(--primary-tint); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-white { background: white; color: var(--primary-dark); border-color: white; box-shadow: var(--shadow-md); } .btn-white:hover { background: var(--primary-tint); border-color: var(--primary-tint); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn-outline { background: transparent; color: var(--primary-dark); border: 1px solid var(--primary-color); } .btn-outline:hover { background: var(--primary-tint); transform: translateY(-2px); box-shadow: var(--shadow-sm); } /* On a dark band (.cta-section, .page-header) the outline/secondary variants must flip to light-on-dark or they vanish. */ .cta-section .btn-outline, .cta-section .btn-secondary { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.55); box-shadow: none; } .cta-section .btn-outline:hover, .cta-section .btn-secondary:hover { background: rgba(255, 255, 255, 0.16); border-color: #FFFFFF; } /* Visible keyboard focus for every interactive element in the shared chrome. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--primary-color); outline-offset: 2px; border-radius: 4px; } .cta-section a:focus-visible, .cta-section button:focus-visible, .page-header a:focus-visible, footer a:focus-visible, footer button:focus-visible { outline-color: #FFFFFF; } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transform: none; transition: none; } } /* --- Overrides for inline styles baked into src/index.html ------------------ Those buttons/badges hard-code the old Atlassian palette inline, so they win over the cascade. Two problems this fixes, from CSS only: 1. .btn-primary now uses dark ink on a light mint fill; an inline gradient background overrides only the fill, leaving dark text on a saturated gradient. Normalizing them to the mint CTA also makes every primary button on the site identical. 2. Three inline accent colors land just under 4.5:1 on the new near-white section band. The selectors are pinned to the exact inline value so nothing else is touched. */ .product-section .btn-primary[style*="linear-gradient"], .product-section .btn-primary[style*="--gradient"] { background: var(--cta-color) !important; border-color: var(--cta-border) !important; color: var(--cta-ink) !important; } .product-section .btn-outline[style*="#6161FF"] { color: #5145E0 !important; border-color: #5145E0 !important; } .product-section .product-badge[style*="#6161FF"] { color: #5145E0 !important; } .product-section .feature-icon[style*="#6161FF"] { color: #5145E0 !important; } .product-section h4 span[style*="background: #36B37E"] { background: #178054 !important; } /* Header call-to-action pills (replace the inline styles that common/components.js used to emit on the last two nav items). */ .nav-contact-btn, .nav-cta-btn { padding: 9px 18px; font-size: 14px; border-radius: var(--radius-sm); font-weight: 600 !important; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; line-height: 1.5; } /* Quiet ghost — a soft cyan chip, not a second competing outline button. */ .nav-contact-btn { background: var(--primary-tint); color: var(--primary-dark) !important; border: 1px solid transparent; } .nav-contact-btn:hover { background: #DCF0F6; border-color: var(--primary-light); } /* The one prominent CTA in the bar: mint fill, deep-navy ink. */ .nav-cta-btn { background: var(--cta-color); color: var(--cta-ink) !important; border: 1px solid var(--cta-border); box-shadow: 0 1px 6px var(--cta-glow), 0 1px 3px rgba(10, 34, 51, 0.10); } .nav-cta-btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 5px 14px var(--cta-glow), 0 2px 6px rgba(10, 34, 51, 0.12); } .nav-links a.nav-contact-btn::after, .nav-links a.nav-cta-btn::after { display: none; } /* ---------------------------------------------------------------- Header -- */ /* Scoped to #header (the one site chrome bar partials/header.njk emits), never the bare `header` element: content templates use
too — e.g. layouts/blog.njk's
— and a bare selector made that in-page hero position:fixed, z-index:1000, which covered the real site header and dropped the article body out from under it. */ #header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; z-index: 1000; box-shadow: 0 1px 0 rgba(10, 34, 51, 0.06); transition: box-shadow 0.3s ease, background 0.3s ease; } /* Browsers without backdrop-filter get a solid bar rather than a see-through one. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #header { background: #FFFFFF; } } #header.scrolled { background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 16px rgba(10, 34, 51, 0.07), 0 1px 0 rgba(10, 34, 51, 0.06); } /* `:where(#header)` keeps this off content