/* ===== styles/tokens.css ===== */ /* Juwix tokens — generated from the Juwix Playful System (tokens.json). Themes: light (default), dark, clean. Set data-theme on . */ :root { --canvas: #FFFFFF; /* was #F5ECEA (soft pink) until Oct 2026 */ --surface: #FFFFFF; --surface-sunken: #E0E0E0; --ink: #2D2D33; /* was #292929 */ --ink-body: #4F4F57; /* was #474747 */ --ink-muted: #64646B; /* was #5C5C5F */ --line: #E6E1E0; --line-strong: #858585; --pink: #E8004E; --pink-ink: #C8003F; --pink-hover: #C8003F; --on-pink: #FFFFFF; --blush: #FCECF1; --violet: #4753C7; --periwinkle: #9A98F7; --lilac: #EDEBFF; --alice: #E3EDFD; --mint: #E4F3CC; --butter: #FFF3BF; --night: #05173B; --on-night: #FFFFFF; --sticker-yellow: #FAE252; --sticker-orange: #F5BE48; --sticker-lime: #ADDA5D; --sticker-red: #ED6F6F; --on-sticker: #292929; --success: #146D3F; --warning: #8A5A00; --danger: #B3261E; --glow-success: #E4F3CC; --glow-warning: #FFF3BF; --focus: #05173B; --shadow-card: 0 1px 2px rgba(41,41,41,0.04), 0 8px 28px rgba(41,41,41,0.05); --shadow-float: 0 12px 32px rgba(41,41,41,0.10), 0 24px 70px rgba(83,97,215,0.14); --shadow-sticky: 4px 10px 0 rgba(0,0,0,0.18); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 24px; --radius-pill: 999px; --font-display: "Open Sans", system-ui, sans-serif; --font-body: "Open Sans", system-ui, sans-serif; --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive; /* Buttons: soft fills */ --btn-primary-bg: #2D2D33; --btn-primary-fg: #FFFFFF; --btn-primary-hover: #000000; --btn-icon-bg: #E8004E; --btn-icon-fg: #FFFFFF; --btn-secondary-bg: #FFFFFF; --btn-secondary-fg: #292929; --btn-secondary-hover: #FCECF1; /* From the social media templates (Figma "Social media templates") */ --blue: #5361D7; /* colour blocks; white text on it 5.2:1 */ --on-blue: #FFFFFF; --blue-ink: #4753C7; /* blue text on cream/white: 5.4:1 */ --glow-blue: #D3D8F6; /* decoration only: the big soft gradient */ --glow-pink: #F6CFDB; /* decoration only */ color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --canvas: #05173B; --surface: #0D2350; --surface-sunken: #122B5C; --ink: #F5F5F5; --ink-body: #D6DBE8; --ink-muted: #A9B3CC; --line: #1C2F60; --line-strong: #7D8BB0; --pink: #FF5C8A; --pink-ink: #FF7AA0; --pink-hover: #FF7AA0; --on-pink: #05173B; --blush: #3A1030; --violet: #B8B6FF; --periwinkle: #9A98F7; --lilac: #1E2A66; --alice: #122B5C; --mint: #1B3A2A; --butter: #3A3212; --night: #020B1F; --on-night: #F5F5F5; --blue: #3B47B8; --on-blue: #FFFFFF; --blue-ink: #A9B1FF; --glow-blue: #1E2A66; --glow-pink: #3A1030; --sticker-yellow: #FAE252; --sticker-orange: #F5BE48; --sticker-lime: #ADDA5D; --sticker-red: #ED6F6F; --on-sticker: #292929; --success: #7FD49B; --warning: #F5BE48; --danger: #FF8A80; --glow-success: #1B3A2A; --glow-warning: #3A3212; --focus: #FAE252; --shadow-card: 0 2px 4px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.35); --shadow-float: 0 10px 30px rgba(0,0,0,0.4), 0 24px 80px rgba(0,0,0,0.4); --shadow-sticky: 2px 6px 0 rgba(0,0,0,0.45); --btn-primary-bg: #F5F5F5; --btn-primary-fg: #05173B; --btn-primary-hover: #FFFFFF; --btn-icon-bg: #FF5C8A; --btn-icon-fg: #05173B; --btn-secondary-bg: #0D2350; --btn-secondary-fg: #F5F5F5; --btn-secondary-hover: #263578; color-scheme: dark; } } :root[data-theme="dark"] { --canvas: #05173B; --surface: #0D2350; --surface-sunken: #122B5C; --ink: #F5F5F5; --ink-body: #D6DBE8; --ink-muted: #A9B3CC; --line: #1C2F60; --line-strong: #7D8BB0; --pink: #FF5C8A; --pink-ink: #FF7AA0; --pink-hover: #FF7AA0; --on-pink: #05173B; --blush: #3A1030; --violet: #B8B6FF; --periwinkle: #9A98F7; --lilac: #1E2A66; --alice: #122B5C; --mint: #1B3A2A; --butter: #3A3212; --night: #020B1F; --on-night: #F5F5F5; --blue: #3B47B8; --on-blue: #FFFFFF; --blue-ink: #A9B1FF; --glow-blue: #1E2A66; --glow-pink: #3A1030; --sticker-yellow: #FAE252; --sticker-orange: #F5BE48; --sticker-lime: #ADDA5D; --sticker-red: #ED6F6F; --on-sticker: #292929; --success: #7FD49B; --warning: #F5BE48; --danger: #FF8A80; --glow-success: #1B3A2A; --glow-warning: #3A3212; --focus: #FAE252; --shadow-card: 0 2px 4px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.35); --shadow-float: 0 10px 30px rgba(0,0,0,0.4), 0 24px 80px rgba(0,0,0,0.4); --shadow-sticky: 2px 6px 0 rgba(0,0,0,0.45); --btn-primary-bg: #F5F5F5; --btn-primary-fg: #05173B; --btn-primary-hover: #FFFFFF; --btn-icon-bg: #FF5C8A; --btn-icon-fg: #05173B; --btn-secondary-bg: #0D2350; --btn-secondary-fg: #F5F5F5; --btn-secondary-hover: #263578; color-scheme: dark; } :root[data-theme="clean"] { /* Low friction (Oct 2026): calm, predictable and still friendly. Warm paper instead of stark white, soft slate instead of black, muted pastels so colour can still mark areas and states. All text pairs stay at 4.5:1 or more (body text 8:1). */ --canvas: #FAF9F6; --surface: #FFFFFF; --surface-sunken: #F1F0EC; --ink: #2E3040; --ink-body: #474A5A; --ink-muted: #5E6170; --line: #E3E1DB; --line-strong: #8A8B95; --pink: #B0386A; --pink-ink: #A3325E; --pink-hover: #8E2A51; --on-pink: #FFFFFF; --blush: #F7E9EE; --violet: #4A47A3; --periwinkle: #ECEBF8; --lilac: #ECEBF8; --alice: #E8EEF7; --mint: #E6F1E2; --butter: #F8F0D8; --night: #2E3040; --on-night: #FFFFFF; --blue: #4B56A3; --on-blue: #FFFFFF; --blue-ink: #434E9A; --glow-blue: #FAF9F6; --glow-pink: #FAF9F6; --sticker-yellow: #F6EDC8; --sticker-orange: #F3E2CA; --sticker-lime: #E3EDD2; --sticker-red: #F3DADA; --on-sticker: #2E3040; --success: #2F6B45; --warning: #7A5300; --danger: #A3312A; --glow-success: #E6F1E2; --glow-warning: #F8F0D8; --focus: #434E9A; --shadow-card: none; --shadow-float: none; --shadow-sticky: none; --btn-primary-bg: #434E9A; --btn-primary-fg: #FFFFFF; --btn-primary-hover: #36407F; --btn-icon-bg: #FFFFFF; --btn-icon-fg: #434E9A; --btn-secondary-bg: #FFFFFF; --btn-secondary-fg: #2E3040; --btn-secondary-hover: #F1F0EC; color-scheme: light; } /* ===== styles/base.css ===== */ /* Juwix base: fonts, reset, page layout helpers, global motion rules. Load after styles/tokens.css and before the components. */ /* Fonts are self-hosted (no request to Google: faster and GDPR-friendly). Open Sans and Caveat, SIL Open Font License. */ @font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/open-sans-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Open Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/open-sans-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/open-sans-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/open-sans-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Open Sans";font-style:italic;font-weight:400;font-display:swap;src:url("../assets/fonts/open-sans-latin-400-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/caveat-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/caveat-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root { --jx-dot: color-mix(in srgb, var(--line-strong) 16%, transparent); --jx-ease: cubic-bezier(.2, .7, .2, 1); --jx-scribble-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M4 14C44 6 104 4 196 9'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M26 19C76 13 128 13 176 16'/%3E%3C/svg%3E"); --jx-scribble-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' d='M40 16C80 4 176 4 204 30C226 52 150 74 90 72C30 70 6 52 14 34C22 16 70 8 118 8'/%3E%3C/svg%3E"); --jx-scribble-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 24' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' d='M4 14C12 2 20 2 28 14S44 26 52 14 68 2 76 14 92 26 100 14 116 2 128 12'/%3E%3C/svg%3E"); } .jx, .jx * { box-sizing: border-box; } .jx { font-family: var(--font-body); font-size: 16px; line-height: 27px; color: var(--ink-body); } .jx :where(h1, h2, h3, h4) { font-family: var(--font-display); color: var(--ink); margin: 0; text-wrap: balance; } .jx :where(p) { margin: 0; max-width: 68ch; } /* Keyboard focus: one clear ring everywhere (main, top bar, dock, footer) */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } /* Plain text links (sources, footer, inline): always underlined, and on hover the underline thickens and the colour shifts to pink, so they clearly read as links. */ a:not([class]) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-thickness .15s; } a:not([class]):hover { color: var(--pink-ink); text-decoration-thickness: 3px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--canvas); color: var(--ink-body); font-family: var(--font-body); font-size: 16px; line-height: 27px; } img { max-width: 100%; height: auto; } .wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 600px) { .wrap { padding-inline: 24px; } } .skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } /* ---------- Sections: each one fits in one screen on desktop ---------- */ .section { position: relative; padding-block: clamp(64px, 11vh, 120px); } @media (min-width: 900px) and (min-height: 700px) { .section--screen { min-height: min(86vh, 820px); display: flex; flex-direction: column; justify-content: center; } } .section__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(28px, 5vh, 48px); max-width: 620px; } .section__head h2 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; } .section__head p { font-size: 17px; line-height: 29px; } .section__head--center { margin-inline: auto; text-align: center; align-items: center; } /* Eyebrow: a short handwritten label in Caveat, like "Client story" in the templates. Always repeated by the heading. */ .eyebrow { font: 600 24px/26px var(--font-hand); color: var(--pink-ink); } [data-theme="clean"] .eyebrow { font: 600 14px/19px var(--font-body); } /* ---------- The ground: warm cream with big, soft colour gradients (as in the social templates) ---------- */ body { background-color: var(--canvas); } main { position: relative; overflow-x: clip; } /* Soft colour glows, placed per section. Decoration only. */ .glow { position: absolute; z-index: -1; width: calc(var(--size, 520px) * 1.25); aspect-ratio: 1; border-radius: 50%; opacity: .9; background: radial-gradient(circle, var(--c, var(--glow-blue)) 0%, transparent 66%); pointer-events: none; filter: blur(24px); } .glow--pink { --c: var(--glow-pink); } .glow--lilac { --c: var(--glow-blue); } .glow--alice { --c: var(--glow-blue); } .glow--yellow { --c: var(--glow-pink); } [data-theme="clean"] body { background-image: none; } [data-theme="clean"] .glow { display: none; } [data-calm] body { background-image: none; } /* ---------- Micro animations ---------- Elements start visible. Only when JS runs (html.js) and motion is allowed, [data-reveal] elements fade up once as they scroll into view. */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--jx-ease), transform .6s var(--jx-ease); transition-delay: var(--d, 0s); } html.js:not([data-theme="clean"]) [data-reveal].is-in { opacity: 1; transform: none; } html.js:not([data-theme="clean"]) [data-reveal="pop"] { transform: scale(.94) rotate(var(--tilt, 0deg)); } html.js:not([data-theme="clean"]) [data-reveal="pop"].is-in { transform: rotate(var(--tilt, 0deg)); } } html { scroll-padding-bottom: 120px; } [id] { scroll-margin-top: 24px; } /* Motion: nothing moves in Clean mode or with reduced motion */ :is([data-theme="clean"], [data-calm]) * { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::after, *::before { animation: none !important; transition: none !important; } } /* Visually hidden, still read by screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Calm version (Oct 2026): one playful moment per screen. Section labels are small capitals in the body font; the handwriting is kept for a few small accents. */ .eyebrow, [data-theme="clean"] .eyebrow { font: 600 13px/18px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--pink-ink); } /* ===== components/canvas/canvas.css ===== */ /* Canvas: the dotted mindmap ground with soft colour glows Component: canvas. Uses tokens from styles/tokens.css. */ .jx-canvas { position: relative; isolation: isolate; background-color: var(--canvas); background-image: radial-gradient(circle, var(--jx-dot) 1.3px, transparent 1.6px); background-size: 24px 24px; background-position: 12px 12px; } .jx-canvas::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 12% 18%, var(--blush), transparent 70%), radial-gradient(35% 45% at 88% 30%, var(--lilac), transparent 70%), radial-gradient(30% 40% at 70% 95%, var(--alice), transparent 70%); } /* Clean mode */ [data-theme="clean"] .jx-canvas { background: var(--canvas); } [data-theme="clean"] .jx-canvas::before { display: none; } [data-calm] .jx-canvas { background-image: none; } /* ===== components/connector/connector.css ===== */ /* Connector: dashed line between nodes (decorative) Component: connector. Uses tokens from styles/tokens.css. */ .jx-connector { position: absolute; pointer-events: none; overflow: visible; color: var(--periwinkle); z-index: 0; } .jx-connector path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; } .jx-connector circle { fill: currentColor; } /* Clean mode */ :is([data-theme="clean"], [data-calm]) :is(.jx-connector, .jx-deco) { display: none; } /* ===== components/button/button.css ===== */ /* Button: primary, secondary, ghost Component: button. Uses tokens from styles/tokens.css. */ .jx-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 8px 8px 20px; border-radius: var(--radius-pill); border: 2px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; line-height: 20px; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s var(--jx-ease), box-shadow .15s; } .jx-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .jx-btn--primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-icon-bg); transform: translateY(-1px); } .jx-btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--line); } .jx-btn--secondary:hover { background: var(--btn-secondary-hover); border-color: var(--btn-secondary-fg); transform: translateY(-1px); } .jx-btn--ghost { background: transparent; color: var(--pink-ink); padding-left: 14px; padding-right: 14px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .jx-btn--ghost:hover { background: var(--blush); border-color: currentColor; text-decoration-thickness: 3px; } .jx-btn:not(:has(.jx-btn__icon)):not(.jx-btn--ghost) { padding-right: 20px; } .jx-btn__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--btn-icon-bg); color: var(--btn-icon-fg); transition: transform .2s var(--jx-ease); } .jx-btn--secondary .jx-btn__icon { background: var(--btn-icon-bg); color: var(--btn-icon-fg); } .jx-btn:hover .jx-btn__icon { transform: translateX(3px) rotate(-8deg); } .jx-btn__icon svg { width: 16px; height: 16px; } /* Clean mode */ [data-theme="clean"] .jx-btn--primary { box-shadow: none; } [data-theme="clean"] .jx-btn--secondary { border-color: var(--line-strong); } [data-theme="clean"] .jx-btn:hover { transform: none; } /* ===== components/chip/chip.css ===== */ /* Chip: pill labels for tags and topics Component: chip. Uses tokens from styles/tokens.css. */ .jx-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; } .jx-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--lilac); color: var(--ink); border: 2px solid transparent; font: 600 14px/19px var(--font-body); } .jx-chip--pink { background: var(--blush); } .jx-chip--yellow { background: var(--sticker-yellow); color: var(--on-sticker); } .jx-chip--outline { background: var(--surface); border-color: var(--line); } [data-theme="clean"] .jx-chip--outline { border-color: var(--line-strong); } .jx-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); } .jx-chip--plain::before { display: none; } /* Clean mode */ [data-theme="clean"] .jx-chip { border: 1px solid var(--line); } [data-theme="clean"] .jx-chip::before { display: none; } /* ===== components/mark/mark.css ===== */ /* Mark: a scribbled word inside a heading Component: mark. Uses tokens from styles/tokens.css. */ /* As in the templates: the key word gets a colour, no scribble. Pink on large text only (3.98:1 on cream). */ .jx-mark { position: relative; white-space: nowrap; color: var(--pink); } .jx-mark::after { display: none; } .jx-mark::after { content: ""; position: absolute; pointer-events: none; background: var(--pink); -webkit-mask: var(--jx-mask) center / 100% 100% no-repeat; mask: var(--jx-mask) center / 100% 100% no-repeat; } .jx-mark--underline { --jx-mask: var(--jx-scribble-underline); } .jx-mark--underline::after { left: -2%; right: -2%; bottom: -0.22em; height: 0.34em; } .jx-mark--squiggle { --jx-mask: var(--jx-scribble-squiggle); } .jx-mark--squiggle { color: var(--blue-ink); } .jx-mark--squiggle::after { left: 0; right: 0; bottom: -0.25em; height: 0.3em; background: var(--violet); } .jx-mark--circle { --jx-mask: var(--jx-scribble-circle); } .jx-mark--circle::after { left: -9%; right: -9%; top: -18%; bottom: -22%; } .jx-mark--highlight { color: var(--pink); } .jx-mark--highlight::after { display: none; } @media (prefers-reduced-motion: no-preference) { :root:not([data-calm]) .jx-mark::after { animation: jx-draw .7s .25s var(--jx-ease) both; } } @keyframes jx-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } /* Clean mode */ [data-theme="clean"] .jx-mark { color: inherit; } [data-theme="clean"] .jx-mark::after { display: none; } [data-theme="clean"] .jx-mark--highlight { background: none; font-weight: 600; } [data-calm] .jx-mark::after { opacity: .35; } /* ===== components/note/note.css ===== */ /* Hand note: a handwritten margin annotation (decorative) Component: note. Uses tokens from styles/tokens.css. */ .jx-note { display: inline-flex; align-items: flex-end; gap: 6px; font-family: var(--font-hand); font-weight: 600; font-size: 28px; line-height: 30px; color: var(--pink-ink); transform: rotate(-4deg); } .jx-note svg { width: 56px; height: 34px; flex: none; color: var(--pink); } /* Clean mode */ [data-theme="clean"] .jx-note { display: none; } [data-calm] .jx-note { transform: none; } /* ===== components/node/node.css ===== */ /* Node: the mindmap card (+ small variant for floating cards) Component: node. Uses tokens from styles/tokens.css. */ .jx-node { --tone: var(--blush); --tone-ink: var(--pink-ink); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 0% 0%, var(--tone), transparent 55%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--ink-body); transition: transform .2s var(--jx-ease), box-shadow .2s; } .jx-node--lilac { --tone: var(--lilac); --tone-ink: var(--violet); } .jx-node--alice { --tone: var(--alice); --tone-ink: var(--violet); } .jx-node--sticker { --tone: var(--glow-warning); --tone-ink: var(--ink); } .jx-node--mint { --tone: var(--mint); --tone-ink: var(--success); } .jx-node--butter { --tone: var(--butter); --tone-ink: var(--ink); } /* Filled node: the whole card in its tone (text keeps 7.8:1+ on every tone, both themes) */ .jx-node--fill { background: var(--tone); border-color: color-mix(in srgb, var(--tone-ink) 14%, transparent); } /* Clickable node (has a .jx-node__link): the title underlines on hover and keyboard focus. Nodes without a link have no hover state, so they never look clickable. */ .jx-node h3 { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s; } .jx-node:has(.jx-node__link:hover) h3, .jx-node:has(.jx-node__link:focus-visible) h3 { text-decoration-color: currentColor; } .jx-node:has(.jx-node__link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--line-strong); } .jx-node__link { transition: text-decoration-thickness .15s; } .jx-node:has(.jx-node__link:hover) .jx-node__link { text-decoration-thickness: 3px; } .jx-node__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--surface); color: var(--tone-ink); box-shadow: 0 1px 2px rgba(5,23,59,.08), 0 0 0 1px var(--line); } .jx-node__icon svg { width: 24px; height: 24px; } .jx-node__eyebrow { font-weight: 600; font-size: 14px; line-height: 18px; color: var(--tone-ink); } .jx-node h3 { font-size: 20px; line-height: 27px; font-weight: 600; } .jx-node p { font-size: 15.5px; line-height: 25px; } .jx-node__link { margin-top: auto; padding-top: 4px; font-weight: 600; color: var(--tone-ink); text-underline-offset: 4px; text-decoration-thickness: 2px; } .jx-node--sticker .jx-node__link { color: var(--ink); } .jx-node__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .jx-node--center { border: 2px solid var(--pink); box-shadow: var(--shadow-float); } .jx-node--sm { padding: 16px 18px; gap: 7px; } .jx-node--sm .jx-node__icon { width: 40px; height: 40px; } .jx-node--sm .jx-node__icon svg { width: 20px; height: 20px; } .jx-node--sm h3 { font-size: 17px; line-height: 22px; } .jx-node--sm p { font-size: 15px; line-height: 22px; } /* Clean mode */ [data-theme="clean"] .jx-node { background: var(--surface); } [data-theme="clean"] .jx-node:has(.jx-node__link:hover) { transform: none; box-shadow: none; border-color: var(--ink); } /* ===== components/stat/stat.css ===== */ /* Data card: a real figure with a source Component: stat. Uses tokens from styles/tokens.css. */ .jx-stat { --tone: var(--blush); --fill: var(--pink); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; } .jx-stat--lilac { --tone: var(--lilac); --fill: var(--violet); } .jx-stat--alice { --tone: var(--alice); --fill: var(--violet); } .jx-stat__num { margin: 0; font: 600 44px/1 var(--font-display); letter-spacing: -0.02em; color: var(--pink); font-variant-numeric: tabular-nums; } .jx-stat__num small { font-size: .5em; font-weight: 600; margin-left: 2px; } .jx-stat__label { margin: 0; font-size: 15.5px; line-height: 23px; color: var(--ink-body); max-width: 32ch; } .jx-stat__label strong { color: var(--ink); } .jx-stat__source { margin-top: auto; padding-top: 6px; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .jx-stat__source a { color: inherit; text-underline-offset: 3px; } .jx-stat__bar { height: 12px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; } .jx-stat__bar span { display: block; height: 100%; width: var(--value, 50%); border-radius: inherit; background: var(--fill); } .jx-stat__dots { display: flex; gap: 8px; } .jx-stat__dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); } .jx-stat__dots span.is-on { background: var(--fill); border-color: var(--fill); } .jx-stat--sm { padding: 16px 18px 14px; gap: 5px; } .jx-stat--sm .jx-stat__num { font-size: 32px; } .jx-stat--sm .jx-stat__label { font-size: 15px; line-height: 21px; } .jx-stat--todo { border: 1.5px dashed var(--line-strong); box-shadow: none; background: var(--surface); } [data-theme="clean"] .jx-stat { background: var(--surface); } /* ===== components/sticky/sticky.css ===== */ /* Sticky note Component: sticky. Uses tokens from styles/tokens.css. */ .jx-sticky { --tilt: -2deg; --paper: var(--sticker-yellow); display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; max-width: 280px; background: var(--paper); color: var(--on-sticker); border-radius: 4px 4px var(--radius-md) 4px; box-shadow: var(--shadow-sticky); transform: rotate(var(--tilt)); font-size: 16px; line-height: 24px; font-weight: 600; } .jx-sticky--orange { --paper: var(--sticker-orange); --tilt: 1.5deg; } .jx-sticky--lime { --paper: var(--sticker-lime); --tilt: -1deg; } .jx-sticky--red { --paper: var(--sticker-red); --tilt: 2deg; } .jx-sticky--lilac { --paper: var(--periwinkle); --tilt: -1.5deg; } .jx-sticky__sign { font-family: var(--font-hand); font-size: 20px; line-height: 23px; font-weight: 600; } /* Clean mode */ [data-theme="clean"] .jx-sticky { border: 1px solid var(--line); box-shadow: none; } [data-theme="clean"] .jx-sticky__sign { font-family: var(--font-body); font-size: 15.5px; line-height: 22px; font-weight: 600; } :is([data-theme="clean"], [data-calm]) .jx-sticky { transform: none; } /* ===== components/polaroid/polaroid.css ===== */ /* Polaroid photo frame (+ taped and small variants) Component: polaroid. Uses tokens from styles/tokens.css. */ .jx-polaroid { --tilt: -2deg; margin: 0; display: flex; flex-direction: column; gap: 10px; width: 220px; padding: 12px 12px 14px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-sticky); transform: rotate(var(--tilt)); } .jx-polaroid:nth-child(even) { --tilt: 2deg; } .jx-polaroid__photo { aspect-ratio: 1; width: 100%; max-width: 100%; border-radius: 4px; object-fit: cover; background: radial-gradient(80% 80% at 30% 20%, var(--blush), var(--lilac)); } .jx-polaroid figcaption { font-family: var(--font-hand); font-weight: 600; font-size: 22px; line-height: 24px; color: var(--blue-ink); text-align: left; } .jx-polaroid figcaption span { display: block; font-family: var(--font-body); font-size: 14px; line-height: 18px; font-weight: 400; color: var(--ink-muted); } .jx-polaroid--taped { position: relative; } .jx-polaroid--taped::before { display: none; content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: var(--sticker-yellow); opacity: .75; border-radius: 2px; } .jx-polaroid--sm { width: 180px; } .jx-polaroid__photo { height: auto; } /* Clean mode */ [data-theme="clean"] .jx-polaroid { border: 1px solid var(--line); box-shadow: none; } [data-theme="clean"] .jx-polaroid figcaption { font-family: var(--font-body); font-size: 15.5px; line-height: 22px; font-weight: 600; } [data-theme="clean"] .jx-polaroid--taped::before { display: none; } :is([data-theme="clean"], [data-calm]) .jx-polaroid { transform: none; } /* ===== components/cutout/cutout.css ===== */ /* Cutout: portrait on a round tint disc Component: cutout. Uses tokens from styles/tokens.css. */ /* Cutout portrait on a tint disc (the style of the current team photos) */ .jx-cutout { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 220px; position: relative; } .jx-cutout__disc { --disc: var(--blush); position: relative; width: 200px; aspect-ratio: 1; max-width: 100%; border-radius: 50%; overflow: hidden; background: var(--disc); box-shadow: 0 0 0 6px var(--surface), var(--shadow-card); } .jx-cutout--lilac .jx-cutout__disc { --disc: var(--lilac); } .jx-cutout--alice .jx-cutout__disc { --disc: var(--alice); } .jx-cutout--yellow .jx-cutout__disc { --disc: var(--sticker-yellow); } .jx-cutout__disc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .jx-cutout figcaption { text-align: center; font: 600 17px/22px var(--font-display); color: var(--ink); } .jx-cutout figcaption span { display: block; font: 400 15px/21px var(--font-body); color: var(--ink-muted); } .jx-cutout__spark { position: absolute; top: -6px; right: 4px; width: 40px; height: 34px; color: var(--pink); } /* Clean mode */ [data-calm] .jx-cutout__spark { display: none; } [data-theme="clean"] .jx-cutout__disc { box-shadow: 0 0 0 1px var(--line); } [data-theme="clean"] .jx-cutout__spark { display: none; } /* ===== components/photo/photo.css ===== */ /* Photo frame + "photo needed" slot Component: photo. Uses tokens from styles/tokens.css. */ .jx-photo { margin: 0; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .jx-photo__img { display: block; width: 100%; max-width: 100%; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; border-radius: var(--radius-xl); background: var(--surface-sunken); box-shadow: var(--shadow-card); } .jx-photo--contain .jx-photo__img { object-fit: contain; background: radial-gradient(70% 70% at 30% 30%, var(--lilac), var(--alice)); padding: 16px; } .jx-photo__tag { position: absolute; top: 16px; left: 16px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--sticker-yellow); color: var(--on-sticker); font: 600 14px/19px var(--font-body); box-shadow: var(--shadow-sticky); transform: rotate(-3deg); } .jx-photo figcaption { font-size: 15px; line-height: 22px; color: var(--ink-muted); } .jx-photo figcaption strong { color: var(--ink); } /* Shot slot: a placeholder that states which real photo is needed */ .jx-photo-slot { display: flex; flex-direction: column; justify-content: center; gap: 6px; aspect-ratio: var(--ratio, 4 / 3); max-width: 100%; padding: 20px; border-radius: var(--radius-xl); border: 1.5px dashed var(--line-strong); background: var(--surface); color: var(--ink-body); font-size: 15px; line-height: 22px; } .jx-photo-slot b { font: 600 16px/21px var(--font-display); color: var(--ink); } .jx-photo-slot::before { content: "Photo needed"; align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--blush); color: var(--pink-ink); font: 600 13px/19px var(--font-body); } /* Clean mode */ [data-theme="clean"] .jx-photo__tag { border: 1px solid var(--line); box-shadow: none; transform: none; } [data-theme="clean"] .jx-photo--contain .jx-photo__img { background: var(--surface-sunken); } /* ===== components/callout/callout.css ===== */ /* Callout: info, success, warning, error messages Component: callout. Uses tokens from styles/tokens.css. */ .jx-callout { --tone: var(--alice); --tone-ink: var(--violet); display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 20px 24px; border-radius: var(--radius-md); background: radial-gradient(60% 140% at 0% 50%, var(--tone), transparent 60%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .jx-callout--success { --tone: var(--glow-success); --tone-ink: var(--success); } .jx-callout--warning { --tone: var(--glow-warning); --tone-ink: var(--warning); } .jx-callout--danger { --tone: var(--blush); --tone-ink: var(--danger); } .jx-callout__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--surface); color: var(--tone-ink); box-shadow: 0 0 0 1px var(--line); } .jx-callout__icon svg { width: 24px; height: 24px; } .jx-callout strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 23px; color: var(--ink); } .jx-callout p { font-size: 15.5px; line-height: 24px; color: var(--ink-body); } /* Clean mode */ [data-theme="clean"] .jx-callout { background: var(--surface); } /* ===== components/choice/choice.css ===== */ /* Choice: big pill radio options (router + quiz) Component: choice. Uses tokens from styles/tokens.css. */ .jx-router { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; } .jx-router legend { padding: 0; margin-bottom: 16px; font: 600 26px/31px var(--font-display); color: var(--ink); } .jx-router__options { display: flex; flex-wrap: wrap; gap: 12px; } .jx-router__option { position: relative; } .jx-router__option input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jx-router__option label { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(5,23,59,.04); font: 600 15.5px/20px var(--font-body); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s var(--jx-ease); } .jx-router__option label:hover { border-color: var(--ink); } .jx-router__option label:hover::before { border-color: var(--ink); } .jx-router__option label::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); flex: none; } .jx-router__option input:checked + label { background: var(--blush); border-color: var(--pink); box-shadow: 0 0 0 1px var(--pink); } .jx-router__option input:checked + label::before { border-color: var(--pink); background: radial-gradient(circle, var(--pink) 45%, var(--surface) 50%); } .jx-router__option input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; } .jx-router__answer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 2px dashed var(--periwinkle); } .jx-router__answer p { font-size: 16px; line-height: 25px; color: var(--ink-body); min-width: 0; flex: 1 1 260px; } .jx-router__answer strong { color: var(--ink); } /* Clean mode */ [data-theme="clean"] .jx-router__answer { border-style: solid; border-color: var(--line); } [data-theme="clean"] .jx-router__option label { border-color: var(--line-strong); } /* ===== components/mode-switch/mode-switch.css ===== */ /* Mode switch: Light / Dark / Low friction (value "clean") Component: mode-switch. Uses tokens from styles/tokens.css. */ .jx-mode { position: relative; display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); min-width: 0; } .jx-mode legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .jx-mode input { position: absolute; opacity: 0; width: 1px; height: 1px; } .jx-mode label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--radius-pill); font: 600 14px/19px var(--font-body); color: var(--ink); cursor: pointer; } .jx-mode label svg { width: 18px; height: 18px; flex: none; } .jx-mode input:checked + label { background: var(--ink); color: var(--surface); } .jx-mode input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; } .jx-mode__hint { display: block; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .jx-mode label { transition: background-color .15s, box-shadow .15s; } .jx-mode input:not(:checked) + label:hover { background: var(--lilac); box-shadow: inset 0 0 0 1.5px var(--ink); } /* Narrow screens: tighter labels so "Low friction" fits at 320px */ @media (max-width: 399px) { .jx-mode label { padding: 8px 10px; gap: 6px; } } /* ===== components/blog-card/blog-card.css ===== */ /* Blog card: a node with a photo and topic pills Component: blog-card. Uses tokens from styles/tokens.css. */ .jx-post { --tone: var(--blush); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 12px 24px; border-radius: var(--radius-lg); background: radial-gradient(120% 60% at 0% 100%, var(--tone), transparent 50%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .2s var(--jx-ease), box-shadow .2s; min-width: 0; } .jx-post--lilac { --tone: var(--lilac); } .jx-post--alice { --tone: var(--alice); } /* Clickable card: the title underlines on hover and keyboard focus */ .jx-post h3 { text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: text-decoration-color .2s; } .jx-post:has(.jx-post__link:hover) h3, .jx-post:has(.jx-post__link:focus-visible) h3 { text-decoration-color: currentColor; } .jx-post:has(.jx-post__link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-float); border-color: var(--line-strong); } .jx-post:has(.jx-post__link:hover) .jx-post__link { text-decoration-thickness: 3px; } .jx-post__media { position: relative; margin: 0; } .jx-post__media img, .jx-post__media .jx-photo-slot { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--radius-lg) - 6px); background: radial-gradient(80% 80% at 30% 20%, var(--blush), var(--lilac)); } .jx-post__media .jx-photo-slot { display: flex; background: var(--surface); border-radius: calc(var(--radius-lg) - 6px); padding: 16px; } .jx-post__media--contain img { object-fit: contain; padding: 12px; background: radial-gradient(70% 70% at 30% 30%, var(--lilac), var(--alice)); } .jx-post__body { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; flex: 1; } .jx-post__pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .jx-post__pills .jx-chip { min-height: 32px; padding: 5px 12px; font-size: 13px; line-height: 18px; } .jx-post h3 { font-size: 19px; line-height: 25px; font-weight: 600; } .jx-post p { font-size: 15.5px; line-height: 24px; } .jx-post__meta { font-size: 14px; line-height: 18px; color: var(--ink-muted); } .jx-post__link { margin-top: auto; font-weight: 600; color: var(--pink-ink); text-underline-offset: 4px; text-decoration-thickness: 2px; } .jx-post__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } [data-theme="clean"] .jx-post { background: var(--surface); } [data-theme="clean"] .jx-post:has(.jx-post__link:hover) { transform: none; box-shadow: none; border-color: var(--ink); } /* ===== components/motion/motion.css ===== */ /* Motion: small hover and entrance effects shared by components. All of it switches off in Clean mode and with reduced motion (see base.css). */ /* Scribbles draw when their block scrolls in */ html.js [data-reveal]:not(.is-in) .jx-mark::after { animation-play-state: paused; } /* Data bars grow once */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .jx-stat__bar span { transform-origin: left; transform: scaleX(0); transition: transform 1.1s .2s var(--jx-ease); } html.js:not([data-theme="clean"]) .is-in .jx-stat__bar span, html.js:not([data-theme="clean"]) .jx-stat.is-in .jx-stat__bar span { transform: none; } } /* Hover only on things you can click: the icon of a clickable card wiggles. Cards, stickers, polaroids and chips without a link have no hover state. */ .jx-node, .jx-stat, .jx-post, .jx-sticky, .jx-polaroid { transition: transform .25s var(--jx-ease), box-shadow .25s; } .jx-node:has(.jx-node__link:hover) .jx-node__icon svg { animation: jx-wiggle .5s var(--jx-ease); } @keyframes jx-wiggle { 30% { transform: rotate(-12deg) scale(1.08); } 60% { transform: rotate(8deg); } } /* Dot pulse for "live" markers */ .pulse { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--success); } @media (prefers-reduced-motion: no-preference) { html:not([data-theme="clean"]) .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: jx-pulse 2s ease-out 3; } } @keyframes jx-pulse { to { transform: scale(2.6); opacity: 0; } } /* ===== sections/topbar/topbar.css ===== */ /* Section: top bar with logo, display modes and the contact link. It scrolls away with the page; navigation lives in the dock at the bottom. Mobile first: logo left and modes right; the contact button is hidden (Contact is in the dock and the closing band); from 720px all three on one row with the modes in the middle. */ .topbar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo modes"; align-items: center; gap: 14px 12px; padding-block: 20px 0; } .topbar .brand { grid-area: logo; justify-self: start; } .topbar__modes { grid-area: modes; justify-self: end; } .topbar__cta { grid-area: cta; display: none; } /* Compact mode switch: each option stays at least 24 × 24px (WCAG 2.2, 2.5.8 Target Size) */ .topbar .jx-mode { padding: 3px; gap: 2px; } .topbar .jx-mode label { gap: 6px; padding: 3px 10px; min-height: 28px; font-size: 12.5px; line-height: 16px; } .topbar .jx-mode label svg { width: 14px; height: 14px; } /* Narrowest screens (< 375px): icons only, so the logo keeps its size. The words stay for screen readers. */ .topbar .jx-mode .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (min-width: 375px) { .topbar .jx-mode .txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; } } @media (min-width: 720px) { .topbar { grid-template-columns: 1fr auto 1fr; grid-template-areas: "logo modes cta"; gap: 14px 16px; padding-block: 24px 0; } .topbar__modes { justify-self: center; } .topbar__cta { display: inline-flex; justify-self: end; } } .brand { display: inline-flex; align-items: center; border-radius: 8px; } .brand img { height: 30px; width: auto; display: block; } @media (min-width: 720px) { .brand img { height: 34px; } } .brand .logo-light { display: none; } :root[data-theme="dark"] .brand .logo-dark { display: none; } :root[data-theme="dark"] .brand .logo-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .brand .logo-dark { display: none; } :root:not([data-theme]) .brand .logo-light { display: block; } } /* The contact link uses the primary button (components/button). On small screens the label shrinks a little. */ .topbar__cta { padding-left: 16px; font-size: 14.5px; } @media (min-width: 720px) { .topbar__cta { padding-left: 20px; font-size: 15.5px; } } /* ===== sections/hero/hero.css ===== */ /* Section: hero with a centre video and small floating chips. Hierarchy: 1. headline, 2. video, 3. chips (icon + 2 bold words + one short line). Mobile first: text, video and chips stack. From 1200px the chips float around the text and the video. */ .hero { padding-block: clamp(48px, 10vh, 104px) clamp(32px, 4vh, 48px); } /* ---------- Base (mobile) ---------- */ .jx-fhero { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; } .jx-fhero__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; min-width: 0; } .jx-fhero__text h1 { font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; } .jx-fhero__text p { font-size: 17px; line-height: 28px; max-width: 34ch; } .jx-fhero__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } /* The location tag: a white pill, slightly tilted, like the labels in the social templates */ .jx-fhero__text .hero__tag { display: inline-flex; align-items: center; margin: 0; padding: 5px 16px; border-radius: var(--radius-pill); background: var(--surface); color: var(--pink-ink); font: 600 13px/18px var(--font-body); letter-spacing: .01em; white-space: nowrap; max-width: 100%; box-shadow: 0 1px 2px rgba(41,41,41,.06); transform: rotate(-3deg); } /* ---------- Video ---------- */ .jx-fhero__board { position: relative; min-width: 0; width: 100%; } .jx-fhero__media { position: relative; margin: 0; } .hero__frame { position: relative; overflow: hidden; border-radius: var(--radius-xl); box-shadow: 0 0 0 6px var(--surface), var(--shadow-float); background: var(--surface-sunken); } .hero__video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; } /* Pause / play: always available while the video moves (WCAG 2.2.2) */ .hero__toggle { position: absolute; right: 12px; bottom: 12px; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } .hero__toggle[hidden] { display: none; } .hero__toggle svg { width: 18px; height: 18px; } .hero__toggle:hover { background: var(--blush); } .hero__toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .hero__toggle .hero__toggle-play { display: none; } .hero__toggle.is-paused .hero__toggle-play { display: block; } .hero__toggle.is-paused .hero__toggle-pause { display: none; } /* Enlarge: opens the video in a dialog, so the text in it is easy to read */ .hero__expand { position: absolute; left: 12px; bottom: 12px; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); } .hero__expand[hidden] { display: none; } .hero__expand svg { width: 18px; height: 18px; } .hero__expand:hover { background: var(--blush); } .hero__expand:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .hero-dialog { width: min(1200px, calc(100vw - 32px)); max-width: none; padding: 16px; border: 0; border-radius: var(--radius-xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); } .hero-dialog::backdrop { background: rgba(5, 23, 59, .78); } .hero-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .hero-dialog__title { margin: 0; font: 600 20px/1.2 var(--font-display); } .hero-dialog__close { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; } .hero-dialog__close svg { width: 18px; height: 18px; } .hero-dialog__close:hover { background: var(--blush); } .hero-dialog__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .hero-dialog__video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 140px); border-radius: 12px; background: #05173B; } .hero__note { display: none; } /* ---------- Chips ---------- */ .hero__floats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } .hero-chip { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); min-width: 0; } .hero-chip p { margin: 0; display: flex; flex-direction: column; min-width: 0; } .hero-chip strong { font: 600 16px/21px var(--font-display); color: var(--ink); } .hero-chip p span { font-size: 14px; line-height: 19px; color: var(--ink-muted); } .hero-chip__icon { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-fg); } .hero-chip__icon svg { width: 20px; height: 20px; } .hero-chip--pink { --chip-bg: var(--glow-pink); --chip-fg: var(--pink-ink); } .hero-chip--blue { --chip-bg: var(--glow-blue); --chip-fg: var(--blue-ink); } .hero-chip--mint { --chip-bg: var(--mint); --chip-fg: var(--ink); } /* The stat chip: the number is the icon */ .hero-chip--stat { padding-left: 16px; } .hero-chip .hero-chip__num { flex-direction: row; align-items: baseline; font: 600 30px/1 var(--font-display); color: var(--pink-ink); letter-spacing: -0.02em; white-space: nowrap; flex: none; } .hero-chip__num small { font-size: 16px; margin-left: 1px; } .hero-chip .hero-chip__text { display: block; font-size: 14px; line-height: 19px; color: var(--ink-body); } .hero-chip__text a { display: block; font-size: 12.5px; color: var(--ink-muted); } @media (min-width: 600px) { .hero__video { aspect-ratio: 16 / 9; } .hero__floats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-chip--stat { flex-direction: column; align-items: flex-start; gap: 4px; } } /* ---------- From 900px: centred text ---------- */ @media (min-width: 900px) { .jx-fhero { justify-items: center; gap: 72px; } .jx-fhero__text { align-items: center; text-align: center; max-width: 760px; } .jx-fhero__text h1 { font-size: 46px; line-height: 1.08; } .jx-fhero__text p { max-width: 52ch; margin-inline: auto; } .jx-fhero__actions { justify-content: center; } .jx-fhero__board { width: 72%; } .hero__floats { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; } /* Handwritten note under the video, arrow pointing up at it */ .hero__note { display: inline-flex; position: absolute; z-index: 2; left: 8%; top: calc(100% + 10px); align-items: flex-start; } } /* ---------- From 1200px: chips float around the text and the video ---------- Text-side chips are placed from the top of the hero, video-side chips from the bottom, so they keep their spot whatever the text height. Left/right are measured from the centre line. */ @media (min-width: 1200px) { .jx-fhero__text { max-width: 600px; } .jx-fhero__board { width: 58%; } .hero__floats { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; } .hero-chip { position: absolute; width: max-content; max-width: 260px; pointer-events: auto; rotate: var(--tilt, 0deg); } /* 1. Stat: left of the headline */ .hero-chip--stat { right: calc(50% + 330px); top: 64px; max-width: min(220px, calc(50% - 340px)); flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; } .hero-chip--stat .hero-chip__num { font-size: 40px; } /* 2. No overlays: right of the tag, high */ .hero-chip--pink { left: calc(50% + 330px); top: 24px; max-width: min(260px, calc(50% - 340px)); } /* 3. The whole flow: left of the video, overlapping its edge */ .hero-chip--blue { right: calc(79% - 48px); bottom: 34%; } /* 4. Co-created: right of the video, low */ .hero-chip--mint { left: calc(79% - 48px); bottom: 12%; max-width: 250px; } .hero__note { left: 4%; } } @media (min-width: 1300px) { .hero-chip--stat { right: calc(50% + 360px); } .hero-chip--pink { left: calc(50% + 360px); } } /* ---------- Low friction (clean) mode ---------- */ [data-theme="clean"] .hero-chip, [data-theme="clean"] .hero__tag { transform: none; rotate: 0deg; } [data-theme="clean"] .hero__tag { box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .hero-chip { box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .hero-chip__icon { border: 1px solid var(--line); } [data-theme="clean"] .hero__note { display: none; } [data-theme="clean"] .hero__frame { box-shadow: 0 0 0 1px var(--line); } /* Brand & content chip: two small photos from real shoots, stacked like prints */ .hero-chip--photo { padding-left: 12px; } .hero-chip__pics { position: relative; flex: none; width: 76px; height: 52px; } .hero-chip__pics img { position: absolute; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 2px solid var(--surface); box-shadow: 0 4px 10px -4px rgba(45,45,51,.35); } .hero-chip__pics img:first-child { left: 0; top: 0; rotate: -6deg; } .hero-chip__pics img:last-child { left: 30px; top: 6px; rotate: 5deg; } @media (min-width: 1200px) { .hero-chip--photo { right: calc(50% + 330px); top: 64px; max-width: min(250px, calc(50% - 340px)); flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; } .hero-chip--photo .hero-chip__pics { width: 112px; height: 64px; } .hero-chip--photo .hero-chip__pics img { width: 58px; height: 58px; } .hero-chip--photo .hero-chip__pics img:last-child { left: 50px; top: 4px; } } @media (min-width: 1300px) { .hero-chip--photo { right: calc(50% + 360px); } } [data-theme="clean"] .hero-chip__pics img { rotate: 0deg; box-shadow: none; } /* ===================================================================== Wall hero (Oct 2026): the hero is a dotted board. The headline sits in the middle; post-its, a photo from a shoot and the team video (as a polaroid) are stuck around it. - On load the post-its are slapped on one by one (not on scroll). - With a mouse they shift a little with the pointer (depth --z) and can be dragged around. - Post-its are decoration (aria-hidden); a hidden list carries their meaning for screen readers. - Low friction and reduced motion: everything sits still, straight, no entrance, no dragging. Phones: text first, then a smaller wall with the video and four post-its. ===================================================================== */ .hero--wall { padding-block: 12px clamp(24px, 4vh, 48px); } .hwall { position: relative; width: min(1320px, calc(100% - 24px)); margin-inline: auto; padding: clamp(40px, 8vh, 72px) 16px 0; border-radius: 36px; isolation: isolate; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px, radial-gradient(55% 60% at 50% 40%, var(--canvas) 30%, transparent 75%), radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--blue) 12%, var(--canvas)), transparent 70%), radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--blush) 80%, var(--canvas)), transparent 70%), var(--canvas); } .hwall__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 620px; pointer-events: none; } .hwall__text > * { pointer-events: auto; } .hwall__text h1 { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -0.025em; } .hwall__lead { margin: 0; font-size: 17px; line-height: 28px; max-width: 46ch; color: var(--ink-body); } .hwall .hero__tag { display: inline-flex; margin: 0; padding: 5px 16px; border-radius: 99px; background: var(--surface); color: var(--pink-ink); font: 600 13px/18px var(--font-body); box-shadow: 0 1px 2px rgba(41,41,41,.06); transform: rotate(-3deg); white-space: nowrap; max-width: 100%; } /* The wall area with the items. Phones: a 380px box under the text. */ .hwall__items { position: relative; height: 400px; margin-top: 28px; } .hwall__item { position: absolute; left: var(--mx, var(--x)); top: var(--my, var(--y)); z-index: 1; translate: calc(-50% + var(--dx, 0px) + var(--px, 0) * var(--z, .5) * 22px) calc(-50% + var(--dy, 0px) + var(--py, 0) * var(--z, .5) * 22px); rotate: var(--r, 0deg); transition: translate .5s cubic-bezier(.2,.8,.2,1); } .hwall .hnote--desk { display: none; } .hnote { display: grid; place-items: center; width: 92px; height: 92px; padding: 10px; background: var(--c); color: #2D2D33; text-align: center; font: 600 19px/1.05 var(--font-hand); box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 10px 18px -8px rgba(45,45,51,.35); border-radius: 2px 2px 10px 2px; user-select: none; } .hnote::before { content: ""; position: absolute; top: -9px; left: 50%; width: 38px; height: 16px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, #FFFFFF 55%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .hpola { margin: 0; padding: 10px 10px 0; background: #FFFFFF; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 34px -14px rgba(45,45,51,.4); user-select: none; } .hpola figcaption { padding: 8px 4px 10px; text-align: center; font: 600 20px/1 var(--font-hand); color: #C8003F; } .hpola--video { width: min(78%, 340px); } .hpola--video .hero__frame { border-radius: 3px; box-shadow: none; } .hpola--video .hero__video { aspect-ratio: 16 / 9; } .hpola--photo { width: 150px; } .hpola--photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; } .hwall__hint { display: none; } /* Phones: four post-its in the corners of the small wall */ @media (max-width: 899px) { .hwall__text h1 { font-size: clamp(32px, 8.4vw, 40px); } } /* From 900px: the whole board is the wall, text centred on top */ @media (min-width: 900px) { .hwall { min-height: clamp(680px, 88vh, 860px); display: grid; place-items: center; padding: 56px 32px; } .hwall__text { align-items: center; text-align: center; margin-top: -40px; } .hwall__text h1 { font-size: clamp(44px, 4.6vw, 64px); } .hwall__lead { margin-inline: auto; } .hwall .jx-fhero__actions { justify-content: center; } .hwall__items { position: absolute; inset: 0; height: auto; margin: 0; } .hwall__item { left: var(--x); top: var(--y); } .hwall .hnote--desk { display: grid; } .hwall .hpola--photo.hnote--desk { display: block; } .hnote { width: 118px; height: 118px; font-size: 25px; padding: 12px; } /* Bigger video polaroid, kept clear of the buttons under the text and of the board edge */ .hwall .hpola--video { --pw: clamp(220px, 50vw - 345px, 340px); width: var(--pw); left: calc(100% - 20px - var(--pw) / 2); } .hpola--photo { width: clamp(130px, 12vw, 170px); } .hwall__hint { position: absolute; left: 36%; top: 88%; z-index: 1; display: inline-flex; flex-direction: column; align-items: flex-start; translate: -50% 0; rotate: -6deg; font: 600 19px/1 var(--font-hand); color: var(--ink-muted); } .hwall__hint { flex-direction: row; align-items: center; gap: 6px; } .hwall__hint svg { order: -1; width: 46px; height: 28px; scale: -1 1; rotate: 20deg; color: var(--pink-ink); } } /* The hint only makes sense with a mouse */ @media (hover: none), (pointer: coarse) { .hwall__hint { display: none !important; } } /* Dragging (mouse only; set up in hero.js) */ .hwall.is-toy .hwall__item { cursor: grab; touch-action: none; } .hwall.is-toy .hwall__item.is-dragging { cursor: grabbing; z-index: 3; transition: none; scale: 1.06; } .hwall.is-toy .hnote.is-dragging { box-shadow: 0 2px 3px rgba(0,0,0,.08), 0 26px 40px -12px rgba(45,45,51,.45); } .hwall.is-toy .hpola--video .hero__toggle { cursor: pointer; } /* Entrance: slapped on one by one after the headline (only when motion is welcome) */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .hwall__item { animation: hwall-slap .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.35s + var(--i) * 110ms); } html.js:not([data-theme="clean"]) .hwall__hint { animation: hwall-fade .6s ease 2.2s both; } html.js:not([data-theme="clean"]) .hwall__text { animation: hwall-fade .7s ease both; } } @keyframes hwall-slap { 0% { opacity: 0; transform: scale(1.35) translateY(-26px) rotate(8deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes hwall-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Dark mode: the board keeps its depth, post-its stay paper-coloured */ :root[data-theme="dark"] .hwall { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), radial-gradient(60% 70% at 100% 100%, #3A1030, transparent 70%), var(--canvas); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .hwall { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 24px 24px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), radial-gradient(60% 70% at 100% 100%, #3A1030, transparent 70%), var(--canvas); } } /* Low friction: a calm, straight board */ [data-theme="clean"] .hwall { background: var(--canvas); border: 1px solid var(--line); } [data-theme="clean"] .hwall__item, [data-theme="clean"] .hwall .hero__tag { rotate: 0deg; transform: none; } [data-theme="clean"] .hnote, [data-theme="clean"] .hpola { box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .hnote::before, [data-theme="clean"] .hwall__hint { display: none; } /* Icon stickers between the post-its: round, white, one icon. Calmer than another note. */ .hicon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--blue-ink); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 22px -10px rgba(83,97,215,.45); user-select: none; } .hicon svg { width: 26px; height: 26px; } .hicon--lilac { background: var(--lilac); } .hwall .hicon.hnote--desk { display: none; } @media (min-width: 900px) { .hicon { width: 68px; height: 68px; } .hicon svg { width: 30px; height: 30px; } .hwall .hicon.hnote--desk { display: grid; } } [data-theme="clean"] .hicon { box-shadow: none; border: 1px solid var(--line); } /* ===== sections/logos/logos.css ===== */ /* Section: "Trusted by". One floating strip with a small label and the client logos, no boxes. Mobile first: label above, logos in a wrapping row; from 900px label and logos side by side. */ .logos-section { padding-block: clamp(24px, 5vh, 56px); } .logos-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 20px; border-radius: var(--radius-card, 24px); background: var(--surface); box-shadow: var(--shadow-soft); border: 1px solid var(--card-edge, transparent); } .logos-strip__label { margin: 0; font: 500 13px/18px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; } .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; list-style: none; margin: 0; padding: 0; } .logos li { display: grid; place-items: center; height: 52px; } .logos img { max-height: 34px; max-width: 120px; width: auto; height: auto; display: block; } .logos img[alt="Voka"] { max-height: 44px; } .logos img[alt="Seezon"] { max-height: 50px; } .logos .wordmark { font: 600 15px/20px var(--font-display); color: #B3261E; text-align: center; } :root[data-theme="dark"] .logos li { padding: 6px 10px; border-radius: 10px; background: #FFFFFF; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .logos li { padding: 6px 10px; border-radius: 10px; background: #FFFFFF; } } @media (min-width: 900px) { .logos-strip { flex-direction: row; gap: 32px; padding: 14px 32px; border-radius: 999px; } .logos-strip__label { padding-right: 32px; border-right: 1px solid var(--line); } .logos { flex: 1; flex-wrap: nowrap; justify-content: space-between; gap: 24px; } } [data-theme="clean"] .logos-strip { box-shadow: none; border-color: var(--line); } /* ===== sections/solutions/solutions.css ===== */ /* Section: Solutions. Split layout: the intro on the left (sticky on wide screens), the four areas as floating cards in a 2x2 grid on the right. Mobile first: intro above, one column; two columns from 600px; split from 1000px. */ .solutions { padding-block: clamp(56px, 9vh, 104px); } .sol-split { display: grid; gap: 32px; } .sol-split__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 520px; } .sol-split__intro h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; } .sol-split__intro p { margin: 0; font-size: 17px; line-height: 28px; color: var(--ink-body); } .solutions__cards { display: grid; grid-template-columns: 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; } @media (min-width: 600px) { .solutions__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .sol-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; } .sol-split__intro { position: sticky; top: 120px; padding-top: 12px; } .solutions__cards { gap: 24px; } .solutions__cards > li:nth-child(even) { transform: translateY(32px); } /* a gentle stagger, like the team cards */ } .solution { position: relative; min-width: 0; } .solution .jx-node { height: 100%; padding: 24px; gap: 12px; } .solution .jx-node__icon { width: 44px; height: 44px; margin-bottom: 8px; } .solution .jx-node__icon svg { width: 22px; height: 22px; } .solution .jx-node h3 { font-size: 19px; line-height: 25px; } .solution .jx-node p { margin: 0; font-size: 15.5px; line-height: 24px; } .solution .jx-node__link { margin-top: auto; padding-top: 8px; } .solution .jx-node--butter { --tone: var(--butter); --tone-ink: var(--ink); } [data-theme="clean"] .solutions__cards > li:nth-child(even) { transform: none; } /* ===== sections/quizblock/quizblock.css ===== */ /* Section: quiz as a colour block on the homepage, right after Solutions. Same quiz as on the Solutions page (service.js); here on the brand blue with white text, the answers as white floating tiles, a few soft rings for depth. */ .quizblock { padding-block: clamp(24px, 5vh, 56px); } .quizblock .svc-quiz--block { --focus: #FFFFFF; padding: 32px 20px; border: 0; border-radius: 32px; color: var(--on-blue); background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #FFFFFF 18%, transparent), transparent 70%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 70%), var(--blue); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--blue) 70%, transparent); } .quizblock .svc-quiz--block .eyebrow { color: color-mix(in srgb, #FFFFFF 85%, var(--blue)); } .quizblock .svc-quiz--block .svc-quiz__intro h2 { color: #FFFFFF; font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em; } .quizblock .svc-quiz--block .svc-quiz__intro p, .quizblock .svc-quiz--block .svc-quiz__nojs { color: color-mix(in srgb, #FFFFFF 90%, var(--blue)); } .quizblock .svc-quiz--block .svc-quiz__nojs a { color: #FFFFFF; } .quizblock .svc-quiz--block .svc-quiz__q legend { color: #FFFFFF; } .quizblock .svc-quiz--block .svc-quiz__opts label { border-color: transparent; border-radius: 16px; box-shadow: 0 10px 24px -14px rgba(5,23,59,.5); transition: transform .2s var(--jx-ease), box-shadow .2s; } .quizblock .svc-quiz--block .svc-quiz__opts label:hover { transform: translateY(-2px); border-color: transparent; } .quizblock .svc-quiz--block .svc-quiz__opts label:has(input:checked) { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 3px #FFFFFF, 0 10px 24px -14px rgba(5,23,59,.5); } .quizblock .svc-quiz--block .svc-quiz__opts label:has(input:focus-visible) { outline: 3px solid #FFFFFF; outline-offset: 3px; } .quizblock .svc-quiz--block .jx-btn--primary { background: #FFFFFF; color: var(--ink); } .quizblock .svc-quiz--block .svc-quiz__result { border: 0; border-radius: 20px; color: var(--ink-body); } .quizblock .svc-quiz--block .svc-quiz__result .jx-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); } .quizblock__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .quizblock__deco i { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, #FFFFFF 22%, transparent); } .quizblock__deco i:nth-child(1) { width: 420px; height: 420px; right: -140px; top: -180px; } .quizblock__deco i:nth-child(2) { width: 260px; height: 260px; right: -60px; top: -100px; } .quizblock__deco i:nth-child(3) { display: none; width: 16px; height: 16px; left: 30%; bottom: 32px; border: 0; background: var(--pink); } @media (min-width: 1000px) { .quizblock__deco i:nth-child(3) { display: block; } } @media (min-width: 720px) { .quizblock .svc-quiz--block { padding: 44px; } } @media (min-width: 1000px) { .quizblock .svc-quiz--block { padding: 56px; column-gap: 64px; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .quizblock .svc-quiz--block .svc-quiz__opts label:hover { transform: none; } } [data-theme="clean"] .quizblock .svc-quiz--block { background: var(--blue); box-shadow: none; } [data-theme="clean"] .quizblock__deco { display: none; } /* ===== sections/finder/finder.css ===== */ /* Section: Find your fit, below the solutions. A full-width card: the questions on the left (one at a time, options stacked, Back and Next side by side) and an empty frame on the right. On the answer, a copy of the matching solution card moves from the overview into the frame (logic in sections/solutions/solutions.js). Mobile first: questions, then the frame below; side by side from 900px. */ .fit { padding-block: clamp(48px, 8vh, 88px); } .fit .section__head { margin-bottom: clamp(20px, 3vh, 28px); } .fit .finder { width: 100%; } /* Finder */ .finder { position: relative; padding: 22px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); min-width: 0; } .finder__form, .finder__result { display: flex; flex-direction: column; gap: 18px; } .finder__top { display: flex; align-items: center; justify-content: space-between; } .finder__label { font: 600 14px/19px var(--font-body); color: var(--pink-ink); } .finder__dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; } .finder__dots li { width: 26px; height: 6px; border-radius: 99px; background: var(--surface-sunken); transition: background-color .3s, width .3s var(--jx-ease); } .finder__dots li.is-done { background: var(--pink); } .finder__dots li.is-now { background: var(--pink); width: 40px; } .finder__step { border: 0; margin: 0; padding: 0; min-width: 0; } .finder__step legend { padding: 0; margin-bottom: 14px; font: 600 18px/24px var(--font-display); color: var(--ink); } .finder__num { display: inline-grid; place-items: center; min-width: 40px; height: 26px; margin-right: 6px; padding: 0 8px; border-radius: 99px; background: var(--sticker-yellow); color: var(--on-sticker); font: 600 13px/1 var(--font-body); vertical-align: 3px; } .finder .jx-router__options { flex-direction: column; gap: 8px; } .finder .jx-router__option label { width: 100%; min-height: 44px; padding: 10px 16px; font-size: 15px; border-radius: 14px; } .finder .jx-router__option label:hover { transform: translateX(3px); } .finder__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; } .finder__error { margin: 0; color: var(--danger); font-weight: 600; font-size: 15px; } html.js .finder__step[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .finder__step.is-entering { animation: jx-step-in .35s var(--jx-ease); } html.js:not([data-theme="clean"]) .finder__result:not([hidden]) { animation: jx-step-in .45s var(--jx-ease); } } @keyframes jx-step-in { from { opacity: 0; transform: translateX(16px); } } .finder__result h3 { font: 600 24px/27px var(--font-display); } .finder__result p { font-size: 15.5px; line-height: 24px; } .finder__form[hidden], .finder__result[hidden] { display: none; } .finder .jx-router__option label:hover { border-color: var(--ink); background: var(--surface); } .finder__back[hidden] { display: none; } .finder__hint { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); } /* Layout: questions left, frame right */ .finder { display: grid; grid-template-columns: 1fr; gap: 24px; } .finder__main { min-width: 0; } .finder__answer { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; } .finder__answer .finder__nav { margin-left: -14px; } /* The empty frame: shows there is room for a card, without pretending to be one */ .finder__slot { position: relative; display: grid; place-items: center; min-height: 180px; min-width: 0; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--canvas) 60%, transparent); transition: border-color .3s, background-color .3s; } .finder__slot-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 20px; text-align: center; font: 600 14.5px/20px var(--font-body); color: var(--ink-muted); } .finder__slot-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-muted); } .finder__slot-icon svg { width: 20px; height: 20px; } .finder__slot.is-filled { border-color: transparent; background: transparent; place-items: stretch; } .finder__slot.is-filled .finder__slot-empty { display: none; } .finder__card { position: relative; z-index: 5; width: 100%; } .finder__card .jx-node { height: auto; } @media (min-width: 720px) { .fit .finder { padding: 28px 32px; } .finder__step legend { font-size: 20px; line-height: 26px; margin-bottom: 16px; } .finder .jx-router__option label { min-height: 48px; font-size: 15.5px; padding: 11px 18px; } .finder__result h3 { font-size: 28px; line-height: 32px; } } @media (min-width: 900px) { .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: stretch; } .finder__slot { min-height: 300px; } .finder__slot.is-filled { align-content: center; } } /* ===== sections/facts/facts.css ===== */ /* Section: "Why it matters". The live facts stage (styles and script live with the process section: process.css "Impact" block and process.js), placed just before the scroll story as the why before the how. */ .facts { padding-block: clamp(56px, 9vh, 104px) clamp(24px, 4vh, 48px); } .facts .pimpact { margin-top: clamp(16px, 3vh, 32px); } .facts__head { margin-bottom: 0; } .facts .pimpact__chips { margin-top: -16px; } .facts .pimpact__title { margin-top: clamp(24px, 5vh, 56px); } /* ===== sections/process/process.css ===== */ /* Section: "One system, three phases". White cards with a polaroid photo and real figures (calm, as in the social templates). Mobile first: one column. From 1000px three steps in a row, joined by scribbled arrows. */ .process { padding-block: clamp(56px, 9vh, 104px); } .flow { display: grid; grid-template-columns: 1fr; gap: 28px; list-style: none; margin: 0 0 clamp(24px, 4vh, 40px); padding: 0; } .flow__step { position: relative; display: flex; flex-direction: column; min-width: 0; max-width: 520px; } .flow__step .jx-sticky { max-width: none; padding: 20px 22px 44px; z-index: 1; background: var(--surface); color: var(--ink-body); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; transform: none; } .flow__step .jx-board__step { font: 600 24px/26px var(--font-hand); color: var(--pink-ink); opacity: 1; } [data-theme="clean"] .flow__step .jx-board__step { font: 600 14px/19px var(--font-body); } .flow__step h3 { font: 600 20px/26px var(--font-display); color: var(--ink); } .flow__step .jx-sticky p { font-weight: 400; font-size: 15.5px; line-height: 24px; } .flow__photo { align-self: flex-end; width: 128px; margin: -30px 10px 0 0; z-index: 2; --tilt: 3deg; transform: rotate(var(--tilt)); } .flow__photo figcaption { font-size: 17px; line-height: 20px; } .flow__arrow { display: none; } @media (min-width: 1000px) { .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } .flow__step { max-width: none; } .flow__arrow { display: block; position: absolute; right: -64px; top: 24px; width: 76px; height: 38px; color: var(--pink); z-index: 3; } .flow__step:nth-child(2) .flow__arrow { color: var(--blue); } } /* ---------- Scroll story: "from post-it to product" ---------- Only when .process--story is on the section (set by process.js: not in Low friction, not with reduced motion). Otherwise the three cards above stay, and the story is hidden. How it works: process.js sets --p (0 to 1) while you scroll through .pstory. Every moving part has a paused keyframe animation of 100s; animation-delay: calc(var(--p) * -100s) puts it at that point. So 40% in a keyframe is "40% scrolled". --s shifts one element later on the same keyframes (2s = 2% later). */ .pstory { display: none; } .process--story .flow { display: none; } .process--story .pstory { display: block; position: relative; height: 340vh; margin-bottom: clamp(24px, 4vh, 40px); } .process--story.section--screen { display: block; } .pstory__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto auto auto auto; gap: 12px; padding-block: 16px 96px; align-content: center; } .pstory [class^="ps-"], .pstory [class*=" ps-"] { animation-duration: 100s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--p, 0) * -100s + var(--s, 0s)); } /* Text: all three titles, the active one opens */ .pstory__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pstory__step { padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, box-shadow .2s; } .pstory__num { display: block; font: 600 18px/20px var(--font-hand); color: var(--pink-ink); } .pstory__step h3 { margin: 0; font: 600 16px/22px var(--font-display); color: var(--ink); } .pstory__step p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } .pstory__step[aria-current] { border-color: var(--ink); box-shadow: var(--shadow-card); } .pstory__active { margin: 0; font-size: 15.5px; line-height: 24px; color: var(--ink-body); min-height: 48px; } .pstory__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pstory__progress span { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; position: relative; } .pstory__progress span::after { content: ""; position: absolute; inset: 0; background: var(--pink); transform-origin: left; transform: scaleX(clamp(0, calc(var(--p, 0) * 3 - var(--i)), 1)); } .pstory__hint { display: none; } /* The scene: everything in % of the box, text in container units so it scales */ .pstory__scene { position: relative; align-self: start; justify-self: center; width: 100%; max-width: min(760px, calc((100svh - 300px) * 1.25)); aspect-ratio: 5 / 4; container-type: inline-size; border-radius: var(--radius-xl); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--surface); border: 1px solid var(--line); overflow: hidden; } /* Phase 1: six post-its gather into one */ .ps-note { position: absolute; left: var(--x); top: var(--y); z-index: var(--z); width: 19%; aspect-ratio: 1; display: grid; place-items: center; padding: 4%; translate: -50% -50%; rotate: var(--r); background: var(--c); color: var(--on-sticker); box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 10px 22px rgba(41,41,41,.14); font: 600 3.6cqw/1.05 var(--font-hand); text-align: center; animation-name: ps-note; } .ps-note--main { background: var(--pink); color: var(--on-pink); } @keyframes ps-note { 0%, 3% { left: var(--x); top: var(--y); rotate: var(--r); opacity: 1; scale: 1; } 22% { left: 50%; top: 46%; rotate: var(--rf); opacity: 1; scale: 1; } 28% { left: 50%; top: 46%; rotate: var(--rf); opacity: var(--o30, 0); scale: 1; } 36% { left: 50%; top: 46%; rotate: var(--rf); opacity: var(--o30, 0); scale: 1.15; } 40%, 100% { left: 50%; top: 46%; rotate: 0deg; opacity: 0; scale: 1.6; } } .ps-circle { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; fill: none; stroke: var(--pink); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1; animation-name: ps-draw-circle; } @keyframes ps-draw-circle { 0%, 22% { stroke-dashoffset: 1; opacity: 0; } 23% { stroke-dashoffset: 1; opacity: 1; } 31% { stroke-dashoffset: 0; opacity: 1; } 35% { opacity: 1; stroke-dashoffset: 0; } 38%, 100% { opacity: 0; stroke-dashoffset: 0; } } .ps-label { position: absolute; left: 50%; top: 69%; z-index: 9; translate: -50% 0; font: 600 4.4cqw/1 var(--font-hand); color: var(--pink-ink); white-space: nowrap; animation-name: ps-label; } @keyframes ps-label { 0%, 25% { opacity: 0; translate: -50% 12px; } 29%, 34% { opacity: 1; translate: -50% 0; } 38%, 100% { opacity: 0; translate: -50% 0; } } /* Phase 2: the post-it grows into a browser window, first wireframe, then colour */ .ps-win { position: absolute; left: 50%; top: 46%; z-index: 10; width: 74%; height: 68%; translate: -50% -50%; border-radius: 3cqw; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float); overflow: hidden; animation-name: ps-win; } @keyframes ps-win { 0%, 34% { opacity: 0; scale: .26; rotate: 2deg; border-radius: 1cqw; } 37% { opacity: 1; scale: .3; rotate: 2deg; border-radius: 1cqw; } 46%, 100% { opacity: 1; scale: 1; rotate: 0deg; border-radius: 3cqw; } } .ps-win__bar { position: absolute; inset: 0 0 auto; height: 9%; display: flex; align-items: center; gap: 1.2cqw; padding-left: 3%; background: var(--surface-sunken); } .ps-win__bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--line-strong); } .ps-b { position: absolute; border-radius: .8cqw; animation-name: ps-block; } @keyframes ps-block { 0%, 45% { opacity: 0; translate: 0 6px; background: var(--surface-sunken); } 49% { opacity: 1; translate: 0 0; background: var(--surface-sunken); } 56% { opacity: 1; translate: 0 0; background: var(--surface-sunken); } 62%, 100% { opacity: 1; translate: 0 0; background: var(--fill); } } .ps-b--h1 { left: 7%; top: 18%; width: 44%; height: 7%; } .ps-b--h2 { left: 7%; top: 28%; width: 32%; height: 7%; } .ps-b--t1 { left: 7%; top: 40%; width: 42%; height: 3%; } .ps-b--t2 { left: 7%; top: 45.5%; width: 34%; height: 3%; } .ps-b--btn { left: 7%; top: 54%; width: 20%; height: 8%; border-radius: 999px; } .ps-b--img { left: 58%; top: 16%; width: 35%; height: 47%; border-radius: 1.6cqw; } .ps-b--c1, .ps-b--c2, .ps-b--c3 { top: 71%; width: 26%; height: 21%; border-radius: 1.4cqw; } .ps-b--c1 { left: 7%; } .ps-b--c2 { left: 37%; } .ps-b--c3 { left: 67%; } /* Phase 3: the focus ring follows the keyboard order, checks appear, it goes live */ .ps-focus { position: absolute; z-index: 2; border: .7cqw solid var(--focus); border-radius: 999px; box-shadow: 0 0 0 .5cqw var(--surface); animation-name: ps-focus; } @keyframes ps-focus { 0%, 66% { opacity: 0; left: 5.5%; top: 52.5%; width: 23%; height: 11%; border-radius: 999px; } 68%, 72% { opacity: 1; left: 5.5%; top: 52.5%; width: 23%; height: 11%; border-radius: 999px; } 75%, 78% { opacity: 1; left: 5.5%; top: 69.5%; width: 29%; height: 24%; border-radius: 2cqw; } 81%, 84% { opacity: 1; left: 35.5%; top: 69.5%; width: 29%; height: 24%; border-radius: 2cqw; } 87%, 89% { opacity: 1; left: 65.5%; top: 69.5%; width: 29%; height: 24%; border-radius: 2cqw; } 92%, 100% { opacity: 0; left: 65.5%; top: 69.5%; width: 29%; height: 24%; border-radius: 2cqw; } } .ps-live { position: absolute; right: 3%; top: 1.5%; padding: .4cqw 1.6cqw; border-radius: 999px; background: var(--success); color: var(--surface); font: 600 2.2cqw/1.4 var(--font-body); --s: 22s; animation-name: ps-pop; } .ps-badge { position: absolute; z-index: 12; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.1cqw 2cqw 1.1cqw 1.2cqw; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--ink); font: 600 2.6cqw/1 var(--font-body); white-space: nowrap; animation-name: ps-pop; } .ps-badge svg { width: 3.4cqw; height: 3.4cqw; padding: .5cqw; border-radius: 50%; background: var(--success); color: var(--surface); } .ps-badge--1 { left: 3%; top: 26%; } .ps-badge--2 { right: 2%; top: 44%; } .ps-badge--3 { right: 4%; bottom: 5%; } @keyframes ps-pop { 0%, 70% { opacity: 0; scale: .6; } 73%, 100% { opacity: 1; scale: 1; } } .ps-result { position: absolute; left: 3%; bottom: 5%; z-index: 12; display: flex; flex-direction: column; gap: .6cqw; width: 20%; padding: 1.6cqw; rotate: -3deg; background: var(--sticker-yellow); color: var(--on-sticker); box-shadow: 0 8px 18px rgba(41,41,41,.14); font: 600 2.8cqw/1.05 var(--font-hand); --s: 14s; animation-name: ps-pop; } .ps-result svg { width: 100%; height: auto; overflow: visible; } .ps-result path { stroke: var(--success); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: ps-line 100s linear both paused; animation-delay: calc(var(--p, 0) * -100s); } @keyframes ps-line { 0%, 86% { stroke-dashoffset: 1; } 95%, 100% { stroke-dashoffset: 0; } } .ps-yay { position: absolute; left: 34%; top: 85%; z-index: 12; font: 600 5cqw/1 var(--font-hand); color: var(--pink-ink); rotate: -6deg; --s: 25s; animation-name: ps-pop; } @media (min-width: 900px) { .pstory__pin { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); grid-template-rows: 1fr; column-gap: 48px; align-items: center; padding-block: 48px; } .pstory__steps { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; gap: 12px; align-self: center; } .pstory__step { padding: 18px 20px; } .pstory__num { font-size: 22px; line-height: 24px; } .pstory__step h3 { font-size: 21px; line-height: 27px; } .pstory__step[aria-current] p { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-top: 6px; font-size: 15.5px; line-height: 24px; } .pstory__progress, .pstory__active { display: none; } .pstory__scene { grid-column: 2; grid-row: 1; align-self: center; } } /* ---------- Impact: a live stage with three facts, plus a ticker ---------- Left: tabs with story-style progress bars, the figure, label and source. Right: one big picture per fact, no card around it, that builds itself again every time its fact comes up. The facts rotate on their own (7s each) once the stage is on screen. It stops on hover or focus, with the Pause button, when a tab is chosen, in Low friction and with reduced motion (then you click the tabs). The EAA clock ticks every second. The ticker below shows how we work. Without JavaScript all three facts are shown one under the other. */ .pimpact { margin-top: clamp(56px, 9vh, 104px); display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 5vh, 48px); } .pfacts__stage { width: 100%; display: grid; gap: 28px; align-items: center; } @media (min-width: 900px) { .pfacts__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); } } /* Text side */ .pfacts__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .pfacts__tabs { display: flex; gap: 8px; width: 100%; max-width: 420px; } .pfacts__tab { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 44px; padding: 6px 2px; background: none; border: 0; cursor: pointer; font: 500 14px/18px var(--font-body); color: var(--ink-muted); text-align: left; } .pfacts__tab[aria-selected="true"] { color: var(--ink); } .pfacts__tab:hover { color: var(--ink); } .pfacts__tab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; } .pfacts__bar { display: block; width: 100%; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; } .pfacts__bar i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--blue); transform-origin: left; transform: scaleX(0); } .pfacts__tab[aria-selected="true"] .pfacts__bar i { transform: scaleX(1); } .pfacts__panel { display: flex; flex-direction: column; gap: 10px; } .pfacts__panel[hidden] { display: none; } .pimpact__num { margin: 0; font: 700 clamp(64px, 8vw, 112px)/.95 var(--font-display); letter-spacing: -0.045em; color: var(--ink); font-variant-numeric: tabular-nums; } .pimpact__num--date { font-size: clamp(48px, 5.6vw, 80px); } .pimpact__label { margin: 0; max-width: 34ch; font-size: 18px; line-height: 28px; color: var(--ink-body); } .pimpact__source { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .pimpact__source a { color: inherit; text-underline-offset: 3px; } .pfacts__pause { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font: 500 14px/18px var(--font-body); color: var(--ink); cursor: pointer; } .pfacts__pause[hidden] { display: none; } .pfacts__pause:hover { border-color: var(--line-strong); } .pfacts__pause:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .pfacts__pauseicon { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--lilac); } .pfacts__pauseicon::before, .pfacts__pauseicon::after { content: ""; position: absolute; top: 8px; width: 3px; height: 10px; border-radius: 2px; background: var(--blue-ink); } .pfacts__pauseicon::before { left: 9px; } .pfacts__pauseicon::after { left: 14px; } .pfacts__pause[aria-pressed="true"] .pfacts__pauseicon::after { display: none; } .pfacts__pause[aria-pressed="true"] .pfacts__pauseicon::before { left: 10px; top: 8px; width: 0; height: 0; border-radius: 0; background: none; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--blue-ink); } /* Without JS: every fact visible, stage pictures hidden */ html:not(.js) .pfacts__tabs, html:not(.js) .pfacts__viz { display: none; } html:not(.js) .pfacts__panel[hidden] { display: flex; } /* Picture side: a soft blob with two orbits, scenes stacked in one cell */ .pfacts__viz { position: relative; display: grid; place-items: center; min-height: 320px; aspect-ratio: 6 / 5; isolation: isolate; } .pfacts__viz::before { content: ""; position: absolute; inset: 6% 8%; z-index: -2; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lilac) 100%, transparent), color-mix(in srgb, var(--blue) 8%, transparent) 70%, transparent); } .pfacts__orbit { position: absolute; inset: 2% 4%; z-index: -1; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--blue) 30%, transparent); } .pfacts__orbit--2 { inset: 16% 20%; border-style: solid; border-color: color-mix(in srgb, var(--ink) 8%, transparent); } .pf-scene { grid-area: 1 / 1; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: scale(.94); transition: opacity .45s ease, transform .6s var(--jx-ease), visibility 0s .45s; } .pfacts[data-fact="0"] .pf-scene--people, .pfacts[data-fact="1"] .pf-scene--errors, .pfacts[data-fact="2"] .pf-scene--cal { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .6s var(--jx-ease) .1s, visibility 0s; } /* People */ .pf-scene--people { position: relative; } .pp-grid { display: grid; grid-template-columns: repeat(5, 34px); gap: 16px 26px; } .pp { position: relative; display: block; width: 34px; height: 46px; } .pp::before, .pp::after { content: ""; position: absolute; left: 50%; translate: -50% 0; background: color-mix(in srgb, var(--ink) 16%, transparent); } .pp::before { top: 0; width: 17px; height: 17px; border-radius: 50%; } .pp::after { bottom: 0; width: 34px; height: 25px; border-radius: 17px 17px 6px 6px; } .pp--on::before, .pp--on::after { background: var(--blue-ink); } .pf-tag { position: absolute; right: -28px; top: -20px; padding: 6px 12px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-soft); font: 600 14px/18px var(--font-body); color: var(--blue-ink); rotate: 6deg; } /* A page being scanned for errors */ .pwin { position: relative; width: min(380px, 78vw); height: 240px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-soft); padding: 34px 20px 18px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 14px 8px 8px 1fr; gap: 10px 16px; overflow: hidden; } .pwin__bar { position: absolute; left: 14px; top: 12px; display: flex; gap: 5px; } .pwin__bar b { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 16%, transparent); } .pwin__h, .pwin__t, .pwin__img, .pwin__btn { display: block; border-radius: 5px; background: color-mix(in srgb, var(--ink) 10%, transparent); } .pwin__h { grid-column: 1; width: 90%; background: color-mix(in srgb, var(--ink) 22%, transparent); } .pwin__t { grid-column: 1; } .pwin__t--s { width: 70%; } .pwin__img { grid-column: 2; grid-row: 1 / span 4; border-radius: 10px; background: linear-gradient(135deg, var(--lilac), color-mix(in srgb, var(--blue) 25%, var(--surface))); } .pwin__btn { grid-column: 1; grid-row: 4; align-self: end; width: 56%; height: 26px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 24%, transparent); } .pwin__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--blue) 35%, transparent); opacity: 0; } .perr { position: absolute; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 22%, transparent); } .perr::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px/1 var(--font-body); color: #fff; } /* Calendar with a live clock */ .pf-scene--cal { gap: 18px; } .pcal { width: min(300px, 70vw); padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-soft); } .pcal__head { display: block; margin-bottom: 10px; font: 600 14px/18px var(--font-body); color: var(--ink); } .pcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font: 500 12px/24px var(--font-body); color: var(--ink-muted); } .pcal__grid b { font-weight: 600; opacity: .7; } .pcal__grid i { position: relative; z-index: 0; font-style: normal; } .pcal__grid .is-day { color: #fff; font-weight: 700; } .pcal__grid .is-day::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; translate: -50% -50%; z-index: -1; border-radius: 50%; background: var(--blue); } .pf-clock { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow-soft); font: 600 15px/20px var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; } .pf-clock__label { font-weight: 500; color: var(--ink-muted); } .pf-clock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } /* Ticker */ .pticker { position: relative; width: min(1240px, calc(100vw - 32px)); overflow: hidden; padding-block: 8px; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .pticker__track { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; list-style: none; margin: 0; padding: 0; } .pticker__track li { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; background: var(--surface); box-shadow: 0 6px 16px -10px rgba(83,97,215,.45); border: 1px solid var(--card-edge, transparent); font: 500 14px/20px var(--font-body); color: var(--ink); white-space: nowrap; } .pticker__track li[aria-hidden] { display: none; } .pticker__track img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .pproof__dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--success); color: var(--surface); font-size: 12px; } .pproof__dot--blue { background: var(--lilac); color: var(--blue-ink); } .pproof__dot--pink { background: var(--blush); color: var(--pink-ink); } .pproof__dot svg { width: 14px; height: 14px; } .pimpact__title { margin: 0; max-width: 30ch; text-align: center; font: 600 clamp(24px, 2.8vw, 36px)/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); } .pimpact__chips { list-style: none; margin: -12px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; } .pimpact__chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--ink); font: 500 15px/20px var(--font-body); text-decoration: none; } .pimpact__chips a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; } .pimpact__chips a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .pi-chipicon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lilac); color: var(--blue-ink); } .pi-chipicon svg { width: 16px; height: 16px; } /* Motion: only with .is-auto (set by process.js when motion is welcome) */ .pfacts.is-auto .pfacts__tab[aria-selected="true"] .pfacts__bar i { transform: scaleX(0); animation: pf-progress 7s linear forwards; animation-play-state: paused; } .pfacts.is-auto.is-playing .pfacts__tab[aria-selected="true"] .pfacts__bar i { animation-play-state: running; } .pfacts.is-auto .pf-scene .pp { opacity: 0; scale: .5; } .pfacts.is-auto[data-fact="0"] .pf-scene--people .pp { animation: pp-in .4s var(--jx-ease) forwards; animation-delay: calc(.25s + var(--i) * 40ms); } .pfacts.is-auto .pf-scene--people .pp--on { filter: grayscale(1) opacity(.3); } .pfacts.is-auto[data-fact="0"] .pf-scene--people .pp--on { animation: pp-in .4s var(--jx-ease) forwards, pp-light .5s var(--jx-ease) forwards; animation-delay: calc(.25s + var(--i) * 40ms), calc(1.4s + var(--i) * 70ms); } .pfacts.is-auto .pf-tag { opacity: 0; translate: 0 8px; } .pfacts.is-auto[data-fact="0"] .pf-tag { animation: pf-pop .5s var(--jx-ease) 2.6s forwards; } .pfacts.is-auto .pf-scene--errors .perr { opacity: 0; scale: 0; } .pfacts.is-auto[data-fact="1"] .pwin__scan { animation: pf-scan 2.4s ease-in-out .3s forwards; } .pfacts.is-auto[data-fact="1"] .pf-scene--errors .perr { animation: perr-in .45s cubic-bezier(.34,1.56,.64,1) forwards, perr-ping 1.6s ease-out 2; animation-delay: calc(.3s + var(--y) * 24ms), calc(3s + var(--i) * 120ms); } .pfacts.is-auto .pf-scene--cal .is-day::before { scale: 0; } .pfacts.is-auto[data-fact="2"] .pf-scene--cal .is-day::before { animation: pf-in .55s cubic-bezier(.34,1.56,.64,1) .6s forwards; } .pfacts.is-auto .pf-clock { opacity: 0; translate: 0 8px; } .pfacts.is-auto[data-fact="2"] .pf-clock { animation: pf-pop .5s var(--jx-ease) 1.1s forwards; } .pfacts.is-auto .pf-clock__dot { animation: pf-live 1.6s ease-out infinite; } .pticker.is-moving .pticker__track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: pf-marquee 40s linear infinite; } .pticker.is-moving .pticker__track li[aria-hidden] { display: inline-flex; } .pticker.is-moving:hover .pticker__track, .pfacts.is-paused .pticker__track { animation-play-state: paused; } @keyframes pf-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pp-in { to { opacity: 1; scale: 1; } } @keyframes pp-light { 0% { filter: grayscale(1) opacity(.3); translate: 0 0; } 40% { translate: 0 -8px; } 100% { filter: none; translate: 0 0; } } @keyframes pf-pop { to { opacity: 1; translate: 0 0; } } @keyframes pf-scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes perr-in { to { opacity: 1; scale: 1; } } @keyframes perr-ping { 0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 22%, transparent); } 60% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 22%, transparent); } } @keyframes pf-in { to { scale: 1; } } @keyframes pf-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 50%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } } @keyframes pf-marquee { to { transform: translateX(-50%); } } @media (max-width: 899px) { .pfacts__viz { order: -1; min-height: 0; aspect-ratio: 1 / 1; max-width: 420px; width: 100%; justify-self: center; } .pp-grid { grid-template-columns: repeat(5, 26px); gap: 12px 18px; } .pp { width: 26px; height: 36px; } .pp::before { width: 13px; height: 13px; } .pp::after { width: 26px; height: 20px; } .pf-tag { right: -8px; } } [data-theme="clean"] .pfacts__orbit, [data-theme="clean"] .pfacts__viz::before { display: none; } [data-theme="clean"] .pwin, [data-theme="clean"] .pcal, [data-theme="clean"] .pf-clock, [data-theme="clean"] .pf-tag, [data-theme="clean"] .pticker__track li { box-shadow: none; border: 1px solid var(--line); } @media (min-width: 900px) { .pfacts__panel { min-height: 236px; justify-content: center; } } /* ===== sections/blog/blog.css ===== */ /* Section: Insights teaser. Projects and blog posts look clearly different: - Project: a picture on a coloured stage, the client in a floating pill, a folder label. Hover: the picture straightens and lifts, and a "View case" bubble follows the pointer (mouse only). - Blog: no picture, a sheet of lined paper, slightly tilted, a pen label, date and reading time, a handwritten note. Hover: the sheet straightens and a highlighter sweeps over the title. Layout: the lead project large on the left; a second project and a blog post stacked on the right. */ .blog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 5vh, 48px); } .blog__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .ins-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .ins-legend li { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 899px) { .blog__side { align-items: flex-start; } } /* Type labels with their own icon and colour */ .itype { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 99px; font: 600 12.5px/18px var(--font-body); letter-spacing: .04em; text-transform: uppercase; } .itype::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .itype--project { background: var(--lilac); color: var(--blue-ink); --icon: 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='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); } .itype--blog { background: color-mix(in srgb, var(--sticker-yellow, #FBE36A) 55%, var(--surface)); color: var(--ink); --icon: 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='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E"); } .ins-mix { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } .ins-mix > li { display: flex; min-width: 0; } @media (min-width: 900px) { .ins-mix { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 28px 32px; } .ins-mix__lead { grid-row: 1 / span 2; } } /* Project card */ .icase { --stage: var(--lilac); position: relative; flex: 1; display: flex; flex-direction: column; gap: 18px; padding: 12px 12px 24px; border-radius: var(--radius-card, 24px); background: var(--surface); box-shadow: var(--shadow-soft); border: 1px solid var(--card-edge, transparent); transition: box-shadow .3s; } .icase--blush { --stage: var(--blush); } .icase__stage { position: relative; display: grid; place-items: center; padding: 28px 28px 0; border-radius: 18px; overflow: hidden; background: radial-gradient(70% 90% at 80% 0%, color-mix(in srgb, #FFFFFF 60%, transparent), transparent 70%), var(--stage); } .icase__stage img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: 12px 12px 0 0; box-shadow: 0 -2px 30px -10px rgba(45,45,51,.25); transform: translateY(10px) rotate(-1.5deg); transform-origin: 50% 100%; transition: transform .5s var(--jx-ease); } .icase--side .icase__stage { padding: 22px 22px 0; } .icase--side .icase__stage img { aspect-ratio: 16 / 8; object-position: 0 0; } .icase__client { position: absolute; left: 16px; top: 14px; padding: 5px 12px; border-radius: 99px; background: var(--surface); box-shadow: 0 6px 16px -8px rgba(45,45,51,.3); font: 600 13px/18px var(--font-body); color: var(--ink); transition: transform .4s var(--jx-ease); } .icase__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 12px; flex: 1; } .icase h3 { margin: 0; font-size: 22px; line-height: 29px; font-weight: 600; } .ins-mix__lead .icase h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; } .icase__body > p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-body); } .icase__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .icase__tags li { padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; line-height: 20px; color: var(--ink-body); } .icase__link { margin-top: auto; padding-top: 4px; } .icase__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .icase__cursor { position: absolute; left: 0; top: 0; z-index: 2; padding: 8px 14px; border-radius: 99px; background: var(--ink); color: var(--surface); font: 600 13px/16px var(--font-body); pointer-events: none; opacity: 0; scale: .6; translate: var(--cx, 50%) var(--cy, 50%); transition: opacity .2s, scale .25s var(--jx-ease); white-space: nowrap; } .icase:has(.icase__link:hover) .icase__stage img, .icase:has(.icase__link:focus-visible) .icase__stage img { transform: translateY(0) rotate(0); } .icase:has(.icase__link:hover) .icase__client { transform: translateY(-2px) rotate(-2deg); } .icase:has(.icase__link:hover), .icase:has(.icase__link:focus-visible) { box-shadow: var(--shadow-soft-hover); } .icase.has-cursor .icase__cursor { opacity: 1; scale: 1; } /* Blog note */ .inote { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 28px 26px 40px; border-radius: 6px 22px 22px 6px; color: var(--ink); background: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--pink) 35%, transparent) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 29px, color-mix(in srgb, var(--blue) 14%, transparent) 29px 30px), color-mix(in srgb, #FFF8DC 55%, var(--surface)); background-position: 0 0, 0 14px, 0 0; box-shadow: var(--shadow-soft); rotate: 1.2deg; transition: rotate .4s var(--jx-ease), box-shadow .3s, translate .4s var(--jx-ease); } .inote__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .inote__meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); } .inote h3 { margin: 4px 0 0; font-size: 22px; line-height: 30px; font-weight: 600; } .inote__hl { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--sticker-yellow, #FBE36A) 80%, transparent) 58%) no-repeat 0 0 / 0% 100%; transition: background-size .7s var(--jx-ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .inote > p { margin: 0; font-size: 16px; line-height: 30px; color: var(--ink-body); } .inote__scribble { position: absolute; right: 22px; top: 18px; font: 600 22px/1 var(--font-hand); color: var(--pink-ink); rotate: 8deg; } .inote__link { margin-top: auto; } .inote__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .inote:has(.inote__link:hover), .inote:has(.inote__link:focus-visible) { rotate: 0deg; translate: 0 -4px; box-shadow: var(--shadow-soft-hover); } .inote:has(.inote__link:hover) .inote__hl, .inote:has(.inote__link:focus-visible) .inote__hl { background-size: 100% 100%; } .inote .inote__link::before, .icase .icase__link::before { content: ""; order: 2; flex: none; width: 18px; height: 18px; background: var(--pink-ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s var(--jx-ease); } .inote__link, .icase__link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; text-decoration: none; } .inote:has(.inote__link:hover) .inote__link::before, .icase:has(.icase__link:hover) .icase__link::before { transform: translateX(4px); } /* Dark mode: the paper turns into a soft night sheet */ :root[data-theme="dark"] .inote { background: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--pink) 45%, transparent) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 29px, color-mix(in srgb, #FFFFFF 8%, transparent) 29px 30px), var(--surface); background-position: 0 0, 0 14px, 0 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .inote { background: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--pink) 45%, transparent) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(180deg, transparent 0 29px, color-mix(in srgb, #FFFFFF 8%, transparent) 29px 30px), var(--surface); background-position: 0 0, 0 14px, 0 0; } } :root[data-theme="dark"] .inote__hl { background-image: linear-gradient(transparent 58%, color-mix(in srgb, var(--pink) 45%, transparent) 58%); } /* Calm modes */ @media (prefers-reduced-motion: reduce) { .icase__stage img, .icase__client, .inote, .inote__hl, .icase__cursor { transition: none; } .icase__cursor { display: none; } } [data-theme="clean"] .icase__stage img { transform: none; } [data-theme="clean"] .inote { rotate: none; box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .icase { box-shadow: none; border-color: var(--line); } [data-theme="clean"] .icase__cursor, [data-theme="clean"] .inote__scribble { display: none; } @media (min-width: 900px) { .blog__head { flex-wrap: nowrap; } .ins-legend { flex-direction: column; align-items: flex-end; } } @media (min-width: 900px) { .blog__side .jx-quiet { align-self: flex-end; } } @media (max-width: 599px) { .inote__scribble { top: auto; bottom: 26px; right: 18px; } } :root[data-theme="dark"] .itype--blog { background: #FAE252; color: #2D2D33; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .itype--blog { background: #FAE252; color: #2D2D33; } } /* Hover or focus on a card: its link text underlines, so it is clear what you will open */ .icase:has(.icase__link:hover) .icase__link, .icase:has(.icase__link:focus-visible) .icase__link, .inote:has(.inote__link:hover) .inote__link, .inote:has(.inote__link:focus-visible) .inote__link { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; } /* ===== sections/team/team.css ===== */ /* Section: About. The two founders as cards on a wave, with rings and dots behind them. Mobile first: head, then the cards in a 2-column grid; from 760px the cards sit in a row on the wave. */ .team { display: flex; flex-direction: column; align-items: center; text-align: center; } .team__head { margin: 0 auto; max-width: 620px; } .team__head p { margin-inline: auto; } .team__stage { position: relative; width: min(1240px, calc(100vw - 32px)); margin-top: 40px; padding: 24px 0 40px; } .team__deco { position: absolute; inset: 0; pointer-events: none; overflow-x: clip; } .team__wave { position: absolute; left: 0; top: 50%; width: 100%; height: 140px; transform: translateY(-50%); fill: none; } .team__wave path { stroke: color-mix(in srgb, var(--blue) 45%, transparent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; } .team__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); } .team__ring--outer { width: min(480px, 90%); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); } .team__ring--inner { width: min(360px, 62%); aspect-ratio: 1; background: radial-gradient(circle, color-mix(in srgb, var(--lilac) 90%, transparent) 0%, transparent 70%); } .team__bub { position: absolute; border-radius: 50%; } .team__bub--pink { width: 14px; height: 14px; background: color-mix(in srgb, var(--pink) 55%, transparent); left: 33%; top: 8%; } .team__bub--blue { width: 18px; height: 18px; background: color-mix(in srgb, var(--blue) 50%, transparent); right: 30%; top: 12%; } .team__bub--mint { width: 22px; height: 22px; background: color-mix(in srgb, #7BB342 60%, transparent); left: 38%; bottom: 6%; } .team__bub--lilac { width: 10px; height: 10px; background: color-mix(in srgb, var(--pink) 30%, transparent); right: 38%; bottom: 10%; } .team__cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0 auto; padding: 0; max-width: 520px; } .team__cards > li { display: flex; } .team__cards > li:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: min(100%, 300px); } .tcard { flex: 1; margin: 0; padding: 22px 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-float); display: flex; flex-direction: column; align-items: center; gap: 14px; } .tcard__photo { display: block; width: 112px; aspect-ratio: 1; border-radius: 50%; padding: 6px; } .tcard__photo--lilac { background: var(--lilac); } .tcard__photo--pink { background: var(--blush); } .tcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 50%; } .tcard figcaption { display: flex; flex-direction: column; align-items: center; gap: 8px; } .tcard figcaption strong { font-size: 20px; line-height: 26px; color: var(--ink); } .tcard__role { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-body); } .tcard--note { justify-content: center; text-align: left; align-items: flex-start; gap: 6px; padding: 24px 22px; } .tcard__kicker { font-size: 13px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--pink-ink); } .tcard__big { margin: 0; font-family: var(--font-display, inherit); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ink); } .tcard__big::after { content: ""; display: block; width: 44px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--blue); } .tcard__small { margin: 6px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-body); } .tcard__mail { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--blue-ink); text-underline-offset: 3px; } .team__cta { margin: 8px 0 0; } .team__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-weight: 500; font-size: 17px; color: var(--ink); text-decoration: none; } .team__link svg { width: 20px; height: 20px; transition: transform .25s var(--jx-ease, ease); } .team__link:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; } .team__link:hover svg { transform: translate(2px, -2px); } @media (max-width: 759px) { .team__wave, .team__ring--outer, .team__bub { display: none; } .team__cards > li[style] { --tilt: 0deg !important; } } @media (min-width: 760px) { .team__stage { padding: 48px 0 64px; } .team__cards { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 3vw, 40px); max-width: none; } .team__cards > li { width: 230px; margin-top: var(--dy, 0px); } .team__cards > li:nth-child(3) { width: 250px; } .team__cards > li > .tcard { transform: none; } .tcard__photo { width: 128px; } html:not(.js) .team__cards > li, [data-theme="clean"] .team__cards > li { transform: rotate(var(--tilt, 0deg)); } } @media (prefers-reduced-motion: reduce) { .team__link svg { transition: none; } } [data-theme="clean"] .team__deco { display: none; } [data-theme="clean"] .team__cards > li { transform: none !important; margin-top: 0; } [data-theme="clean"] .tcard { box-shadow: none; } /* ===== sections/closing/closing.css ===== */ /* Section: closing band with the single primary call to action. A blue colour block, like the story templates. Mobile first: text above the photo. From 900px side by side. */ .closing { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding: 32px 22px; border-radius: var(--radius-xl); background: var(--blue); color: var(--on-blue); overflow: hidden; } .closing h2 { color: var(--on-blue); font: 600 28px/1.15 var(--font-display); } .closing p { font-size: 17px; line-height: 29px; color: var(--on-blue); margin: 16px 0 28px; } .closing img { width: 100%; max-width: 320px; justify-self: center; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; transform: rotate(3deg); border: 14px solid #FFFFFF; border-bottom-width: 48px; box-shadow: var(--shadow-sticky); } .closing .jx-btn--primary:focus-visible { outline-color: var(--sticker-yellow); } @media (min-width: 900px) { .closing { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); padding: 48px; } .closing h2 { font-size: 40px; line-height: 1.12; } } [data-theme="clean"] .closing img { transform: none; box-shadow: none; } /* ===== sections/article/article.css ===== */ /* Section: article. The blog post template (pages in src/pages/blog//index.html). Built for calm reading: one column of max 68 characters, a short answer first ("In short"), clear headings, a contents list, sources at the end. Mobile first: one column with a collapsible contents list; from 1000px the contents sit in a sticky column on the left. */ /* ---------- Header ---------- */ .post__head { padding-top: clamp(32px, 6vh, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .crumbs li { display: inline-flex; align-items: center; gap: 8px; } .crumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .crumbs [aria-current] { color: var(--ink-body); } .post__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } .post__pills .jx-chip { min-height: 32px; padding: 5px 12px; font-size: 13px; line-height: 18px; } .post__head h1 { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; max-width: 20ch; } .post__lead { font-size: 18px; line-height: 30px; color: var(--ink-body); max-width: 60ch; } .post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .post__meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 16px; border-radius: 50%; background: currentColor; vertical-align: middle; } .post__by { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; } .post__by img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--surface); } .post__cover { margin: clamp(24px, 4vh, 40px) 0 0; } .post__cover img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-xl); box-shadow: 0 0 0 6px var(--surface), var(--shadow-float); } .post__cover figcaption { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--ink-muted); } /* ---------- Layout ---------- */ /* .post is a .wrap: header, cover, contents and body. On mobile they stack in that order. */ .post { padding-bottom: clamp(48px, 8vh, 88px); } .post__aside { margin-top: 28px; } .post__body { margin-top: 28px; } @media (min-width: 1000px) { .post__aside, .post__body { margin-top: clamp(40px, 6vh, 56px); } } /* Contents */ .toc { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 12px 18px; cursor: pointer; list-style: none; font: 600 16px/22px var(--font-display); color: var(--ink); border-radius: var(--radius-lg); } .toc summary::-webkit-details-marker { display: none; } .toc summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s; } .toc details[open] summary::after { transform: rotate(-135deg) translateY(-1px); } .toc summary:hover { background: var(--lilac); } .toc ol { margin: 0; padding: 0 10px 12px; list-style: none; counter-reset: toc; } .toc li { counter-increment: toc; } .toc a { display: flex; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink-body); font-size: 14.5px; line-height: 20px; text-decoration: none; } .toc a::before { content: counter(toc); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); font: 600 12px/1 var(--font-body); } .toc a:hover { background: var(--lilac); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .toc a[aria-current="true"] { color: var(--ink); font-weight: 600; } .toc a[aria-current="true"]::before { background: var(--pink); color: var(--on-pink); } /* ---------- Prose ---------- */ .prose { min-width: 0; max-width: 68ch; font-size: 17px; line-height: 30px; color: var(--ink-body); } .prose > * + * { margin-top: 18px; } .prose h2 { margin-top: 48px; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 24px; } .prose h3 { margin-top: 32px; font-size: 19px; line-height: 26px; font-weight: 600; color: var(--ink); } .prose h2 + *, .prose h3 + * { margin-top: 10px; } .prose p, .prose ul, .prose ol { margin-bottom: 0; } .prose strong { color: var(--ink); } .prose ul, .prose ol { padding-left: 24px; } .prose li + li { margin-top: 8px; } .prose ul li::marker { color: var(--pink); } .prose ol li::marker { color: var(--pink-ink); font-weight: 600; } .prose a:not([class]) { color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; } .prose a:not([class]):hover { color: var(--pink-ink); text-decoration-thickness: 3px; } /* "In short": the answer first, for readers in a hurry and for search engines */ .post__short { position: relative; padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(120% 90% at 0% 0%, var(--butter), transparent 60%), var(--surface); box-shadow: var(--shadow-card); } .prose .post__short h2 { margin: 0 0 8px; font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: 0; } .post__short ul { margin: 0; padding-left: 22px; font-size: 16px; line-height: 26px; } .prose > .post__short { margin-top: 0; } /* Steps: a numbered list with a soft tint per step */ .post__steps { padding: 0 !important; list-style: none; counter-reset: step; display: grid; gap: 12px; } .post__steps li { counter-increment: step; position: relative; margin: 0 !important; padding: 16px 18px 16px 60px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); } .post__steps li::before { content: counter(step); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sticker-yellow); color: var(--on-sticker); font: 600 14px/1 var(--font-body); } .post__steps strong { display: block; font-family: var(--font-display); font-size: 17px; line-height: 23px; } /* Pull quote as a sticky note */ .post__quote { margin: 32px 0 0; max-width: 460px; --tilt: -1.5deg; } .post__quote p { margin: 0; font: 600 19px/27px var(--font-display); } .post__quote footer { font-size: 14px; line-height: 20px; font-weight: 600; } /* Questions people ask */ .post__faq h3 { margin-top: 24px; } /* Sources */ .post__sources { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; line-height: 24px; } .prose .post__sources h2 { margin-top: 0; font-size: 19px; line-height: 26px; } .post__sources ol { padding-left: 22px; } /* After the article: about the writer + tags */ .post__about { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 40px; padding: 20px 22px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 0% 0%, var(--lilac), transparent 60%), var(--surface); border: 1px solid var(--line); } .post__about img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .post__about p { margin: 0; font-size: 15.5px; line-height: 25px; } .post__about strong { display: block; font: 600 17px/23px var(--font-display); color: var(--ink); } /* Related posts reuse the blog section grid */ .related .section__head { margin-bottom: 24px; } .related .blog__grid { display: grid; grid-template-columns: 1fr; gap: 24px; list-style: none; margin: 0; padding: 0; } .related .blog__grid > li { min-width: 0; display: flex; } .related .blog__grid .jx-post { flex: 1; } @media (min-width: 600px) { .related .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 720px) { .post__head h1 { font-size: 42px; } .prose h2 { font-size: 28px; line-height: 34px; } } @media (min-width: 1000px) { .post { display: grid; grid-template-columns: 240px minmax(0, 68ch); column-gap: 64px; justify-content: center; } .post__head { grid-column: 2; grid-row: 1; } .post__cover { grid-column: 1 / -1; grid-row: 2; } .post__aside { grid-column: 1; grid-row: 3; } .post__body { grid-column: 2; grid-row: 3; } .toc { position: sticky; top: 24px; } .toc summary { pointer-events: none; } .toc summary::after { display: none; } } /* ---------- Clean mode ---------- */ [data-theme="clean"] .post__short, [data-theme="clean"] .post__about { background: var(--surface); box-shadow: none; } [data-theme="clean"] .post__cover img { box-shadow: 0 0 0 1px var(--line); } [data-theme="clean"] .post__steps li::before { border: 1px solid var(--line-strong); } /* ===== sections/case/case.css ===== */ /* Section: case. The portfolio case template (pages in src/pages/work//index.html). Reuses the article layout (.post, .toc, .prose from sections/article) and adds the blocks a case needs: facts, phases, tables, findings, user stories, traceability, accessibility results, deliverables, photo slots and "to fill" markers. Mobile first; tables scroll sideways inside their own box. */ /* ---------- At a glance ---------- */ .case-facts { width: 100%; margin: 8px 0 0; padding: 18px 20px; display: grid; grid-template-columns: 1fr; gap: 14px 28px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .case-facts > div { min-width: 0; } .case-facts dt { font: 600 13px/18px var(--font-body); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; } .case-facts dd { margin: 2px 0 0; font-size: 15.5px; line-height: 23px; color: var(--ink); } @media (min-width: 600px) { .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .case-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- "To fill" marker: visible on drafts so nothing invented slips through ---------- */ .case-todo { display: block; padding: 12px 16px; border-radius: var(--radius-md); border: 1.5px dashed var(--warning); background: color-mix(in srgb, var(--butter) 55%, var(--surface)); color: var(--ink); font-size: 15px; line-height: 23px; } .case-todo::before { content: "To fill · "; font-weight: 600; color: var(--ink); } span.case-todo { display: inline; padding: 1px 6px; border-radius: 6px; } /* ---------- Media: one image, two side by side, or before / after ---------- */ .case-media { margin: 28px 0 0; } .case-media img, .case-media .jx-photo-slot { display: flex; width: 100%; border-radius: var(--radius-lg); } .case-media img { height: auto; box-shadow: 0 0 0 4px var(--surface), var(--shadow-card); } .case-media figcaption { margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .case-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 28px 0 0; } .case-gallery .case-media { margin: 0; } @media (min-width: 600px) { .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .case-compare .case-media figcaption strong { display: inline-block; margin-right: 6px; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); font-size: 13px; } .case-compare .case-media:last-child figcaption strong { background: var(--mint); } /* ---------- Phases: a numbered timeline ---------- */ .case-phases { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; gap: 12px; counter-reset: phase; } .case-phases > li { counter-increment: phase; position: relative; margin: 0 !important; padding: 16px 18px 16px 64px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; line-height: 24px; } .case-phases > li::before { content: counter(phase); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--pink); color: var(--on-pink); font: 600 15px/1 var(--font-body); } .case-phases h3 { margin: 0 !important; font-size: 17px; line-height: 23px; } .case-phases .case-phases__when { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .case-phases p { margin: 6px 0 0 !important; } .case-phases p b { color: var(--ink); } /* ---------- Tables ---------- */ .case-table { margin-top: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); } .case-table:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .case-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 22px; } .case-table caption { padding: 12px 16px 0; text-align: left; font: 600 15px/21px var(--font-display); color: var(--ink); } .case-table th, .case-table td { padding: 10px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); } .case-table thead th { border-top: 0; font-size: 13px; line-height: 18px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); } .case-table tbody th { color: var(--ink); font-weight: 600; } /* Status labels: always a word, never colour alone */ .case-tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: var(--radius-pill); font: 600 13px/20px var(--font-body); white-space: nowrap; background: var(--surface-sunken); color: var(--ink); } .case-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot, currentColor); } .case-tag--high { background: var(--glow-pink); color: var(--ink); --dot: var(--pink-ink); } .case-tag--medium { background: var(--butter); color: var(--ink); } .case-tag--low { background: var(--glow-blue); color: var(--ink); --dot: var(--blue-ink); } .case-tag--pass { background: var(--mint); color: var(--ink); } /* ---------- Findings ---------- */ .case-findings { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; gap: 14px; counter-reset: finding; } .case-findings > li { counter-increment: finding; margin: 0 !important; padding: 18px 20px; border-radius: var(--radius-lg); background: radial-gradient(110% 80% at 0% 0%, var(--glow-pink), transparent 55%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 15.5px; line-height: 24px; } .case-findings__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .case-findings__head::before { content: "Finding " counter(finding); font: 600 13px/18px var(--font-body); color: var(--pink-ink); text-transform: uppercase; letter-spacing: .04em; } .case-findings h3 { flex-basis: 100%; margin: 4px 0 0 !important; font-size: 18px; line-height: 25px; } .case-findings dl { margin: 10px 0 0; display: grid; gap: 6px; } .case-findings dt { font-weight: 600; color: var(--ink); display: inline; } .case-findings dt::after { content: ": "; } .case-findings dd { display: inline; margin: 0; } .case-findings dl > div { min-width: 0; } /* ---------- User story with acceptance criteria ---------- */ .case-story { margin-top: 20px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--blue); font-size: 15.5px; line-height: 24px; } .case-story__id { font: 600 13px/18px var(--font-body); color: var(--blue-ink); text-transform: uppercase; letter-spacing: .04em; } .case-story > p { margin: 6px 0 0 !important; font: 600 17px/25px var(--font-display); color: var(--ink); } .case-story h4 { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; } .case-story ol { margin: 6px 0 0 !important; } .case-story li b { color: var(--ink); } /* ---------- Traceability: finding → requirement → design → test ---------- */ .case-trace { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; gap: 10px; } .case-trace > li { position: relative; margin: 0 !important; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 22px; } .case-trace b { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; } .case-trace > li + li::before { content: ""; position: absolute; left: 24px; top: -11px; width: 2px; height: 10px; background: var(--pink); } @media (min-width: 720px) { .case-trace { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .case-trace > li + li::before { left: -14px; top: 50%; width: 12px; height: 2px; } } /* ---------- Key figures ---------- */ .case-kpis { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .case-kpis > li { margin: 0 !important; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 15px; line-height: 22px; } .case-kpis strong { display: block; font: 600 34px/1.1 var(--font-display); color: var(--pink-ink); letter-spacing: -0.02em; } /* ---------- Deliverables checklist ---------- */ .case-deliverables { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; grid-template-columns: 1fr; gap: 8px 20px; } .case-deliverables > li { position: relative; margin: 0 !important; padding: 8px 12px 8px 44px; border-radius: 32px; background: var(--surface); font-size: 15.5px; line-height: 23px; } .case-deliverables > li::before { content: ""; position: absolute; left: 10px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; } @media (min-width: 600px) { .case-deliverables { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Quote from the client */ .case-quote { margin: 32px 0 0; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--blue); color: var(--on-blue); } .case-quote p { margin: 0; font: 600 19px/28px var(--font-display); color: inherit; } .case-quote footer { margin-top: 10px; font-size: 14px; line-height: 20px; } /* Next step at the end */ .case-next { margin-top: 48px; padding: 24px; border-radius: var(--radius-lg); background: radial-gradient(120% 90% at 100% 0%, var(--glow-blue), transparent 60%), var(--surface); border: 1px solid var(--line); } .prose .case-next h2 { margin-top: 0; font-size: 22px; line-height: 28px; } .case-next .jx-btn { margin-top: 14px; } /* ---------- Work overview (src/pages/work/index.html) ---------- */ .work-head { padding-top: clamp(32px, 6vh, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } .work-head h1 { font-size: 32px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; max-width: 22ch; } .work-head p { font-size: 18px; line-height: 30px; max-width: 60ch; margin: 0; } .work-head__title, .work-head__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .work-head .jx-chip { min-height: 30px; padding: 4px 12px; font-size: 13.5px; line-height: 18px; } /* From 900px: title on the left, intro on the right, both ending on the same line */ @media (min-width: 900px) { .work-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: end; } .work-head__intro { padding-bottom: 6px; } } .work-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 24px; } .work-card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; transition: translate .2s, box-shadow .2s; } .work-card__media { margin: 0; aspect-ratio: 16 / 10; background: var(--surface-sunken); } .work-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-card__media .jx-photo-slot { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; border-width: 0 0 1.5px; } .work-card__media--soon { display: grid; place-items: center; background: radial-gradient(70% 90% at 20% 20%, var(--glow-pink), transparent 70%), radial-gradient(70% 90% at 85% 80%, var(--glow-blue), transparent 70%), var(--surface); } .work-card__media--soon span { font: 600 32px/1 var(--font-hand); color: var(--pink-ink); rotate: -3deg; } [data-theme="clean"] .work-card__media--soon { background: var(--surface-sunken); } [data-theme="clean"] .work-card__media--soon span { font-family: var(--font-body); font-size: 20px; rotate: 0deg; } .work-card__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; } .work-card__client { font: 600 13px/18px var(--font-body); color: var(--pink-ink); text-transform: uppercase; letter-spacing: .04em; } .work-card h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; } .work-card p { margin: 0; font-size: 15.5px; line-height: 24px; } .work-card .jx-chips { gap: 6px; } .work-card .jx-chip { min-height: 28px; padding: 3px 10px; font-size: 13px; line-height: 18px; } .work-card__link { margin-top: auto; padding-top: 6px; align-self: flex-start; font-weight: 600; color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .work-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .work-card:hover { translate: 0 -4px; box-shadow: var(--shadow-float); } .work-card:hover .work-card__link { text-decoration-thickness: 3px; } .work-card:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; } .work-card__link:focus-visible { outline: none; } .work-also { margin-top: 48px; } .work-also h2 { font-size: 22px; line-height: 28px; } @media (min-width: 720px) { .work-head h1 { font-size: 42px; } .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Survey results as accessible bars (a real list, the numbers are text) ---------- */ .case-bars { margin-top: 20px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); } .case-bars h3 { margin: 0 !important; font-size: 17px; line-height: 23px; } .case-bars > p { margin: 4px 0 0 !important; font-size: 14px; line-height: 20px; color: var(--ink-muted); } .case-bars ol { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; display: grid; gap: 10px; } .case-bars li { margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 15px; line-height: 21px; } .case-bars li b { color: var(--ink); font-variant-numeric: tabular-nums; } .case-bars li::after { content: ""; grid-column: 1 / -1; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--bar, var(--blue)) var(--v), var(--surface-sunken) var(--v)); } .case-bars--pink { --bar: var(--pink); } /* ---------- Personas ---------- */ .case-personas { list-style: none; padding: 0 !important; margin: 20px 0 0; display: grid; grid-template-columns: 1fr; gap: 14px; } .case-personas > li { margin: 0 !important; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); font-size: 15px; line-height: 23px; } .case-personas h3 { margin: 0 !important; font-size: 18px; line-height: 24px; } .case-personas h3 span { display: block; font: 600 14px/20px var(--font-body); color: var(--ink-muted); } .case-personas .case-tag { margin-top: 8px; } .case-personas blockquote { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--pink); font-weight: 600; color: var(--ink); } .case-personas p { margin: 8px 0 0 !important; } @media (min-width: 600px) { .case-personas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Findings: category tag instead of a severity guess */ .case-tag--a11y { background: var(--glow-pink); color: var(--ink); --dot: var(--pink-ink); } .case-tag--content { background: var(--butter); color: var(--ink); } .case-tag--nav { background: var(--glow-blue); color: var(--ink); --dot: var(--blue-ink); } .case-tag--strategy { background: var(--mint); color: var(--ink); } /* Live link to the client's site */ .case-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* Privacy note: data in the screens has been changed */ .case-privacy { position: relative; width: 100%; max-width: 72ch; margin: 0; padding: 14px 18px 14px 52px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-size: 15.5px; line-height: 24px; color: var(--ink-body); } .case-privacy::before { content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z'/%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'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.3-8 11-4.6-1.7-8-6-8-11V5z'/%3E%3C/svg%3E") center / contain no-repeat; } .case-privacy strong { color: var(--ink); } /* ---------- Low friction (clean) mode ---------- */ [data-theme="clean"] .case-facts, [data-theme="clean"] .case-findings > li, [data-theme="clean"] .case-kpis > li, [data-theme="clean"] .work-card { box-shadow: none; background: var(--surface); } [data-theme="clean"] .case-next { background: var(--surface); } [data-theme="clean"] .work-card:hover { translate: none; } [data-theme="clean"] .case-deliverables > li { border: 1px solid var(--line); } [data-theme="clean"] .case-bars li::after { outline: 1px solid var(--line-strong); } @media (prefers-reduced-motion: reduce) { .work-card { transition: none; } .work-card:hover { translate: none; } } /* Wide screens: a case gets a wider column than a blog post, so screens and tables are readable. Running text keeps its 68-character line. */ @media (min-width: 1000px) { .post.case { grid-template-columns: 240px minmax(0, 780px); } .case .prose { max-width: 780px; } .case .prose > p, .case .prose > ul:not([class]), .case .prose > ol:not([class]), .case .prose > h2, .case .prose > h3 { max-width: 68ch; } /* The header lines up with the cover image on the left, over the full width */ .post.case .post__head { grid-column: 1 / -1; max-width: none; } .case .post__head h1 { max-width: 20ch; } .case .post__lead { max-width: 64ch; } } /* A quote in its original language, with an English translation under it */ .case-quote .case-quote__en { margin-top: 10px; font: 400 16px/25px var(--font-body); color: inherit; opacity: .92; } /* ===== sections/service/service.css ===== */ /* Section: service. The Solutions overview (src/pages/solutions/index.html) and one landing page per service (src/pages/solutions//index.html). Reuses .crumbs, .jx-node, .jx-chip, .jx-btn and .work-card. Every area has a tone: add .svc-tone--journeys / --product / --eaa / --brand to a wrapper. */ .svc-tone--journeys { --tone: var(--mint); --tone-ink: var(--success); } .svc-tone--product { --tone: var(--lilac); --tone-ink: var(--violet); } .svc-tone--eaa { --tone: var(--blush); --tone-ink: var(--pink-ink); } .svc-tone--brand { --tone: var(--butter); --tone-ink: var(--ink); } /* Area label: a chip in the area's tone */ .svc-area { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 6px; border-radius: var(--radius-pill); background: var(--tone, var(--lilac)); color: var(--ink); font: 600 14px/19px var(--font-body); text-decoration: none; } .svc-area__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--tone-ink); } .svc-area__icon svg { width: 14px; height: 14px; } a.svc-area:hover { text-decoration: underline; text-underline-offset: 3px; } [data-theme="clean"] .svc-area { border: 1px solid var(--line-strong); } .svc-link { font-weight: 600; color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .svc-link:hover { text-decoration-thickness: 3px; } /* ---------- Hero of a service page ---------- */ .svc-top { padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(40px, 7vh, 72px); } .svc-hero { display: grid; gap: 40px; } .svc-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .svc-hero h1 { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; max-width: 17ch; } .svc-hero__lead { margin: 0; font-size: 18px; line-height: 30px; max-width: 56ch; } .svc-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 8px; } .svc-hero__media { position: relative; margin: 0 0 18px; min-width: 0; } .svc-hero__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-float); } .svc-hero__media figcaption { position: absolute; left: 16px; bottom: -18px; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: 14px; line-height: 20px; color: var(--ink-body); rotate: -1.5deg; } .svc-hero__media figcaption b { color: var(--ink); } [data-theme="clean"] .svc-hero__media figcaption { position: static; rotate: 0deg; margin-top: 10px; box-shadow: none; border: 0; padding: 0; background: none; max-width: none; } [data-theme="clean"] .svc-hero__media { margin-bottom: 0; } [data-theme="clean"] .svc-hero__media img { box-shadow: none; } @media (min-width: 900px) { .svc-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 64px; align-items: center; } .svc-hero h1 { font-size: 46px; } } /* ---------- Blocks on a service page ---------- */ .svc-block { padding-block: clamp(40px, 7vh, 72px); } .svc-block h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; } .svc-block__head { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin-bottom: 28px; } .svc-block__head p { margin: 0; font-size: 17px; line-height: 28px; } /* Sounds familiar: three things clients say */ .svc-signals { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .svc-signals li { position: relative; padding: 18px 20px 18px 52px; border-radius: var(--radius-lg); background: radial-gradient(130% 120% at 0% 0%, var(--tone), transparent 65%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); font: 600 17px/25px var(--font-body); color: var(--ink); } .svc-signals li::before { content: "“"; position: absolute; left: 18px; top: 8px; font: 600 40px/1 var(--font-display); color: var(--tone-ink); } @media (min-width: 760px) { .svc-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc-signals li:nth-child(2) { translate: 0 14px; } } [data-theme="clean"] .svc-signals li { background: var(--surface); box-shadow: none; translate: none !important; } /* What we do: numbered steps */ .svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: step; } .svc-steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); } .svc-steps li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tone); color: var(--ink); font: 600 16px/1 var(--font-body); border: 1px solid color-mix(in srgb, var(--tone-ink) 25%, transparent); } .svc-steps h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; } .svc-steps p { margin: 0; font-size: 15.5px; line-height: 24px; } @media (min-width: 640px) { .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .svc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* What you get + inclusive note */ .svc-get { display: grid; gap: 24px; } .svc-get__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .svc-get__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 25px; color: var(--ink); } .svc-get__list li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--tone-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.4 15.6-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%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'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm-1.4 15.6-4.3-4.3 1.4-1.4 2.9 2.9 6.1-6.1 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; } .svc-note { align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--radius-lg); background: var(--tone); border: 1px solid color-mix(in srgb, var(--tone-ink) 18%, transparent); color: var(--ink); } .svc-note h3 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; } .svc-note p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink); } .svc-note a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; } @media (min-width: 860px) { .svc-get { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; } } [data-theme="clean"] .svc-note { background: var(--surface); border-color: var(--line-strong); } /* In practice: cases (reuses .work-grid / .work-card) */ .svc-cases .work-grid { margin-top: 0; } .work-card__part { font-size: 15.5px; line-height: 24px; } .work-card__part b { color: var(--ink); } @media (min-width: 1040px) { .svc-cases--3 .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .svc-empty { padding: 22px; border-radius: var(--radius-lg); border: 1.5px dashed var(--line-strong); max-width: 640px; } .svc-empty p { margin: 0; font-size: 16px; line-height: 26px; } /* Often combined with */ .svc-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } @media (min-width: 720px) { .svc-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* FAQ */ .svc-faq { display: grid; gap: 12px; max-width: 820px; } .svc-faq details { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); } .svc-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font: 600 17px/24px var(--font-body); color: var(--ink); border-radius: inherit; } .svc-faq summary::-webkit-details-marker { display: none; } .svc-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate .2s; } .svc-faq details[open] summary::after { rotate: 225deg; translate: 0 3px; } .svc-faq summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .svc-faq details > div { padding: 0 20px 20px; } .svc-faq details p { margin: 0; font-size: 16px; line-height: 26px; } @media (prefers-reduced-motion: reduce) { .svc-faq summary::after { transition: none; } } /* ---------- Solutions overview ---------- */ /* Per area: the title on top, the service cards in one row below. No frame around the area, so it stays calm. */ .svc-jump { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .svc-areas { display: grid; gap: clamp(64px, 10vh, 112px); margin-top: clamp(48px, 8vh, 88px); } .svc-areablock { scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 24px; } .svc-areablock__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 680px; } .svc-areablock__label { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 14px/18px var(--font-body); color: var(--tone-ink); text-transform: uppercase; letter-spacing: .05em; } .svc-areablock__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); border: 1px solid color-mix(in srgb, var(--tone-ink) 20%, transparent); } .svc-areablock__icon svg { width: 18px; height: 18px; } .svc-areablock__head h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; } .svc-areablock__head p:not(.svc-areablock__label) { margin: 0; font-size: 17px; line-height: 28px; } .svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .svc-list .jx-node { height: 100%; } .svc-list .jx-node h3 { font-size: 19px; line-height: 25px; } .svc-list .jx-node p { font-size: 15.5px; line-height: 24px; } @media (min-width: 640px) { .svc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .svc-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .svc-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Quiz between the areas */ .svc-quiz { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 20px; padding: 28px 20px; border-radius: var(--radius-xl); background: radial-gradient(90% 90% at 0% 100%, var(--glow-blue), transparent 60%), var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .svc-quiz__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 620px; } .svc-quiz__intro h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; font-weight: 600; } .svc-quiz__intro p { margin: 0; font-size: 17px; line-height: 28px; } .svc-quiz__nojs { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); } .svc-quiz__form { display: grid; gap: 18px; } .svc-quiz__form[hidden], .svc-quiz__q[hidden], .svc-quiz__actions[hidden], .svc-quiz__result[hidden] { display: none; } .svc-quiz__q { margin: 0; padding: 0; border: 0; min-width: 0; } .svc-quiz__q legend { padding: 0; margin-bottom: 12px; font: 600 18px/25px var(--font-body); color: var(--ink); } .svc-quiz__opts { display: grid; gap: 10px; } .svc-quiz__opts label { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; font: 600 16px/22px var(--font-body); color: var(--ink); } .svc-quiz__opts label:hover { border-color: var(--line-strong); } .svc-quiz__opts label:has(input:checked) { border-color: var(--ink); background: var(--tone, var(--blush)); } .svc-quiz__opts--list label:has(input:checked) { background: var(--blush); } .svc-quiz__opts input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--pink-ink); } .svc-quiz__opts input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .svc-quiz__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); } .svc-quiz__icon svg { width: 17px; height: 17px; } .svc-quiz__result { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--ink); } .svc-quiz__kicker { margin: 0; font: 600 14px/18px var(--font-body); color: var(--pink-ink); text-transform: uppercase; letter-spacing: .05em; } .svc-quiz__result h3 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; } .svc-quiz__why { margin: 0; font-size: 16.5px; line-height: 27px; max-width: 60ch; } .svc-quiz__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; } .svc-quiz__pair { margin: 0; font-size: 15.5px; line-height: 24px; } .svc-quiz__again { margin-top: 4px; padding: 6px 0; background: none; border: 0; font: 600 15px/20px var(--font-body); color: var(--ink-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .svc-quiz__again:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } @media (min-width: 720px) { .svc-quiz { padding: 36px; } .svc-quiz__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .svc-quiz { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 48px; align-items: start; padding: 44px; } .svc-quiz__intro, .svc-quiz__nojs { grid-column: 1; } .svc-quiz__form, .svc-quiz__result { grid-column: 2; grid-row: 1 / span 2; } } [data-theme="clean"] .svc-quiz { background: var(--surface); box-shadow: none; } /* ---------- Free EAA check ---------- */ .eaa-check { display: grid; gap: 18px; max-width: 820px; } .eaa-check fieldset { margin: 0; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); min-width: 0; } .eaa-check legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font: 600 18px/25px var(--font-body); color: var(--ink); } .eaa-check legend span { display: block; margin-top: 2px; font: 400 15px/22px var(--font-body); color: var(--ink-muted); } .eaa-check__opts { clear: both; display: grid; gap: 8px; } .eaa-check label { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--line); cursor: pointer; font-size: 16px; line-height: 23px; color: var(--ink); } .eaa-check label:hover { border-color: var(--line-strong); } .eaa-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pink-ink); } .eaa-check label:has(input:checked) { border-color: var(--ink); background: var(--blush); } .eaa-check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .eaa-check__opts--2 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .eaa-result { max-width: 820px; margin-top: 18px; padding: 24px; border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--surface); } .eaa-result[hidden] { display: none; } .eaa-result h3 { margin: 0; font-size: 22px; line-height: 28px; } .eaa-result p { margin: 10px 0 0; font-size: 16.5px; line-height: 27px; } .eaa-result .jx-btn { margin-top: 16px; } .eaa-result--yes { background: var(--blush); } .eaa-result--maybe { background: var(--butter); } .eaa-result--no { background: var(--mint); } [data-theme="clean"] .eaa-result { background: var(--surface); } .eaa-small { max-width: 820px; margin: 14px 0 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); } .eaa-rules { display: grid; gap: 14px; max-width: 820px; margin: 0; padding: 0; list-style: none; } .eaa-rules li { padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); font-size: 16px; line-height: 26px; } .eaa-rules b { color: var(--ink); } /* Case pages: service pills are links */ .post__pills a.jx-chip { color: var(--ink); text-decoration: none; } .post__pills a.jx-chip:hover { text-decoration: underline; text-underline-offset: 3px; } .post__pills a.jx-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .work-card__title { margin: 0; font-size: 21px; line-height: 27px; font-weight: 600; color: var(--ink); } .svc-quiz__links[hidden] { display: none; } .svc-pairs-line { margin: 0 auto; padding-block: 8px clamp(32px, 5vh, 48px); font-size: 17px; line-height: 28px; color: var(--ink-body); } .svc-pairs-line a { color: var(--ink); font-weight: 600; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* ===== sections/svcpage/svcpage.css ===== */ /* Service landing pages (template, Oct 2026), in the homepage language. 1. Hero: text left; right a dotted board with the case image as a polaroid, two post-its (the first steps) and an icon sticker. On load they are stuck on one by one; with a mouse they shift with the pointer. 2. "In short": an answer-first fact sheet straight under the hero. It answers "What is X at Juwix?" in one paragraph and lists who it is for, what you get, how it works, where and what it is often combined with. Written for people in a hurry, and easy to quote for Google and AI assistants. 3. Signals as tilted post-its, steps as a timeline whose line draws in, deliverables that tick in one by one. Low friction and reduced motion: everything straight and still. */ /* ---------- Hero board ---------- */ .svc-board { position: relative; border-radius: 32px; padding: 28px 28px 40px; isolation: isolate; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--tone) 85%, var(--canvas)), transparent 70%), radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--blue) 10%, var(--canvas)), transparent 70%), var(--canvas); } .svc-board > * { translate: calc(var(--px, 0) * var(--z, 1) * 12px) calc(var(--py, 0) * var(--z, 1) * 12px); rotate: var(--r, 0deg); transition: translate .5s cubic-bezier(.2,.8,.2,1); } .svc-pola { margin: 0; padding: 10px 10px 0; background: #FFFFFF; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 22px 40px -18px rgba(45,45,51,.45); } .svc-board .svc-pola img { border: 0; border-radius: 4px; box-shadow: none; aspect-ratio: 4 / 3; } .svc-board .svc-pola figcaption { position: static; max-width: none; margin: 0; padding: 10px 6px 12px; border: 0; border-radius: 0; background: none; box-shadow: none; rotate: 0deg; font-size: 14px; line-height: 20px; color: #4F4F57; } .svc-board .svc-pola figcaption b { color: #2D2D33; } .svc-pin { position: absolute; display: grid; place-items: center; width: 104px; height: 104px; padding: 10px; text-align: center; color: #2D2D33; font: 600 21px/1.05 var(--font-hand); background: var(--pin, var(--sticker-yellow)); border-radius: 2px 2px 10px 2px; box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 12px 20px -10px rgba(45,45,51,.4); } .svc-pin::before { content: ""; position: absolute; top: -9px; left: 50%; width: 38px; height: 16px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, #FFFFFF 55%, transparent); } .svc-pin--a { left: -14px; top: -18px; --pin: var(--sticker-yellow); } .svc-pin--b { right: -10px; bottom: 6px; --pin: color-mix(in srgb, var(--tone) 70%, #FFFFFF); } .svc-sticker { position: absolute; right: 18px; top: -22px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--surface); color: var(--tone-ink); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 12px 22px -10px rgba(83,97,215,.45); } .svc-sticker svg { width: 28px; height: 28px; } @media (max-width: 599px) { .svc-pin { width: 84px; height: 84px; font-size: 17px; } .svc-pin--a { left: -6px; } .svc-board { padding: 22px 18px 30px; } } /* ---------- In short ---------- */ .svc-short { padding-block: 0 clamp(32px, 6vh, 64px); } .svc-short__card { display: grid; gap: 28px; padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-card, 24px); background: var(--surface); box-shadow: var(--shadow-soft); border: 1px solid var(--card-edge, transparent); position: relative; overflow: hidden; } .svc-short__card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--tone-ink); opacity: .6; } .svc-short__lead { display: flex; flex-direction: column; gap: 12px; } .svc-short__lead h2 { margin: 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; } .svc-short__answer { margin: 0; font-size: 18px; line-height: 30px; color: var(--ink); } .svc-updated { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); } .svc-facts { margin: 0; display: grid; gap: 0; } .svc-facts > div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); } .svc-facts > div:first-child { border-top: 0; padding-top: 0; } .svc-facts dt { font: 600 12.5px/18px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--tone-ink); } .svc-facts dd { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-body); } .svc-facts dd a { color: var(--ink); font-weight: 500; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; } @media (min-width: 960px) { .svc-short__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; } .svc-facts > div { grid-template-columns: 170px minmax(0, 1fr); column-gap: 20px; } } .svc-tone--brand .svc-facts dt, .svc-tone--brand .svc-short__card::before { color: var(--ink); background-color: transparent; } .svc-tone--brand .svc-short__card::before { background: var(--sticker-orange); } /* ---------- Signals as post-its ---------- */ .svc .svc-signals li { padding: 24px 22px 26px 22px; border: 0; border-radius: 3px 3px 14px 3px; background: color-mix(in srgb, var(--tone) 75%, #FFFFFF); color: #2D2D33; font: 600 22px/1.2 var(--font-hand); box-shadow: 0 1px 1px rgba(0,0,0,.05), 0 14px 24px -14px rgba(45,45,51,.4); rotate: -1.5deg; } .svc .svc-signals li:nth-child(2) { rotate: 1.5deg; background: color-mix(in srgb, var(--sticker-yellow) 70%, #FFFFFF); } .svc .svc-signals li:nth-child(3) { rotate: -.5deg; } .svc .svc-signals li::before { content: ""; left: 50%; top: -9px; width: 40px; height: 16px; translate: -50% 0; rotate: 3deg; background: color-mix(in srgb, #FFFFFF 60%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,.06); font: inherit; } /* ---------- Steps as a timeline ---------- */ .svc-steps--line { position: relative; } .svc-steps--line li { border: 0; background: var(--surface); box-shadow: var(--shadow-soft); border-radius: var(--radius-card, 24px); } .svc-steps--line li::before { width: 40px; height: 40px; border: 0; background: var(--tone); color: var(--tone-ink); font-weight: 700; box-shadow: 0 0 0 6px var(--canvas); position: relative; z-index: 1; } @media (min-width: 1040px) { .svc-steps--line { gap: 24px; padding-top: 4px; } .svc-steps--line::before { content: ""; position: absolute; left: 44px; right: 44px; top: 46px; height: 2px; background: linear-gradient(90deg, var(--tone-ink), color-mix(in srgb, var(--blue) 50%, transparent)); opacity: .35; transform-origin: left; } } /* ---------- Deliverables tick in ---------- */ .svc .svc-get__list li { padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: 0 6px 16px -12px rgba(83,97,215,.5); } .svc .svc-note { border: 0; border-radius: var(--radius-card, 24px); box-shadow: var(--shadow-soft); rotate: 1deg; } /* ---------- FAQ: soft cards ---------- */ .svc .svc-faq details { border: 0; box-shadow: var(--shadow-soft); border-radius: 18px; transition: box-shadow .3s; } .svc .svc-faq details[open] { box-shadow: var(--shadow-soft-hover); } .svc .svc-faq details[open] summary { color: var(--tone-ink); } .svc-tone--brand .svc-faq details[open] summary { color: var(--ink); } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .svc-board > * { animation: svc-slap .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.3s + var(--i, 0) * .14s); } html.js:not([data-theme="clean"]) .svc-steps--line::before { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .2s; } html.js:not([data-theme="clean"]) .svc-steps--line:has(li.is-in)::before { transform: scaleX(1); } html.js:not([data-theme="clean"]) .svc-get__list li::before { scale: 0; transition: scale .4s cubic-bezier(.34,1.56,.64,1) .35s; } html.js:not([data-theme="clean"]) .svc-get__list li.is-in::before { scale: 1; } html.js:not([data-theme="clean"]) .svc .svc-faq details > div { animation: svc-open .35s ease; } } @keyframes svc-slap { 0% { opacity: 0; transform: scale(1.25) translateY(-18px); } 100% { opacity: 1; transform: none; } } @keyframes svc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Dark mode board */ :root[data-theme="dark"] .svc-board { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), var(--canvas); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .svc-board { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), var(--canvas); } } :root[data-theme="dark"] .svc .svc-signals li { background: color-mix(in srgb, var(--sticker-yellow) 70%, #FFFFFF); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .svc .svc-signals li { background: color-mix(in srgb, var(--sticker-yellow) 70%, #FFFFFF); } } :root[data-theme="dark"] .svc-pin--b { --pin: #E6E3FF; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .svc-pin--b { --pin: #E6E3FF; } } /* Low friction */ [data-theme="clean"] .svc-board { background: var(--canvas); border: 1px solid var(--line); } [data-theme="clean"] .svc-board > *, [data-theme="clean"] .svc .svc-signals li, [data-theme="clean"] .svc .svc-note { rotate: 0deg; translate: none; } [data-theme="clean"] .svc-pin, [data-theme="clean"] .svc-pola, [data-theme="clean"] .svc-sticker, [data-theme="clean"] .svc .svc-signals li, [data-theme="clean"] .svc-short__card, [data-theme="clean"] .svc-steps--line li, [data-theme="clean"] .svc .svc-faq details, [data-theme="clean"] .svc .svc-get__list li { box-shadow: none; border: 1px solid var(--line); } /* Second post-it on the right edge, so it never covers the caption */ .svc-pin--b { bottom: auto; top: 44%; right: -22px; } @media (max-width: 599px) { .svc-pin--b { right: -8px; top: 52%; } } /* Cases on service pages: floating cards with a quiet link, like the homepage */ .svc .work-card { border: 0; border-radius: var(--radius-card, 24px); box-shadow: var(--shadow-soft); transition: transform .3s var(--jx-ease), box-shadow .3s; } .svc .work-card:has(.work-card__link:hover) { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); } .svc .work-card__link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; text-decoration: none; } .svc .work-card__link::before { content: ""; order: 2; width: 18px; height: 18px; background: var(--pink-ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s var(--jx-ease); } .svc .work-card:has(.work-card__link:hover) .work-card__link { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 5px; } .svc .work-card:has(.work-card__link:hover) .work-card__link::before { transform: translateX(4px); } [data-theme="clean"] .svc .work-card { box-shadow: none; border: 1px solid var(--line); transform: none; } /* ===== sections/solpage/solpage.css ===== */ /* Page: Solutions overview, in the homepage language (Oct 2026). 1. Hero: text left; on the right a small "map" on a dotted board: your question in the middle, four area stickers around it, joined by drawn lines. The stickers are the jump links. On load the lines draw and the stickers pop in. With a mouse the stickers shift with the pointer (depth). Hover on a sticker lights up its line. 2. Areas: head on the left (sticky, with a big number that fills in its colour when it comes into view), service cards on the right that come in one by one. 3. The quiz is the blue colour block, like on the homepage. Low friction and reduced motion: no drawing, popping or depth; everything is shown straight away. */ .solpage { padding-top: clamp(24px, 4vh, 48px); } /* ---------- Hero ---------- */ .sol-hero { display: grid; gap: 32px; align-items: center; margin-bottom: clamp(48px, 9vh, 104px); } .sol-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; } .sol-hero__text h1 { margin: 0; font-size: clamp(36px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.03em; } .sol-hero__text p { margin: 0; font-size: 18px; line-height: 29px; color: var(--ink-body); max-width: 44ch; } @media (min-width: 1000px) { .sol-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); } } .sol-map { position: relative; border-radius: 32px; isolation: isolate; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 13%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(45% 45% at 50% 50%, var(--canvas) 20%, transparent 80%), radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--blue) 12%, var(--canvas)), transparent 70%), radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--blush) 80%, var(--canvas)), transparent 70%), var(--canvas); } .sol-map ul { list-style: none; margin: 0; padding: 0; } .sol-map__lines, .sol-map__you { display: none; } /* Phones: a 2x2 grid of stickers on the board */ .sol-map { padding: 16px; } .sol-map ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sol-map__item a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-soft); color: var(--ink); text-decoration: none; transition: transform .3s var(--jx-ease), box-shadow .3s; } .sol-map__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tone); color: var(--tone-ink); } .sol-map__icon svg { width: 22px; height: 22px; } .sol-map__name { font: 600 16px/21px var(--font-display); } .sol-map__count { font-size: 13px; line-height: 18px; color: var(--ink-muted); } .sol-map__item a:hover, .sol-map__item a:focus-visible { box-shadow: var(--shadow-soft-hover); } .sol-map__item a:hover .sol-map__name { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .sol-map__item a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } @media (min-width: 700px) { .sol-map { aspect-ratio: 1 / .86; padding: 0; } .sol-map ul { display: block; position: absolute; inset: 0; } .sol-map__item { position: absolute; left: var(--x); top: var(--y); width: 190px; translate: calc(-50% + var(--px, 0) * var(--z, 1) * 14px) calc(-50% + var(--py, 0) * var(--z, 1) * 14px); transition: translate .5s cubic-bezier(.2,.8,.2,1); } .sol-map__item:nth-child(1) { --z: .8; rotate: -3deg; } .sol-map__item:nth-child(2) { --z: 1.2; rotate: 2deg; } .sol-map__item:nth-child(3) { --z: 1; rotate: 2.5deg; } .sol-map__item:nth-child(4) { --z: .7; rotate: -2deg; } .sol-map__item a { padding: 18px; border-radius: 22px; } .sol-map__item a:hover, .sol-map__item a:focus-visible { transform: translateY(-4px) rotate(0deg); } .sol-map__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; fill: none; overflow: visible; } .sol-map__lines path { stroke: color-mix(in srgb, var(--blue) 35%, transparent); stroke-width: 2; stroke-dasharray: .012 .018; vector-effect: non-scaling-stroke; transition: stroke .3s, stroke-width .3s; } .sol-map__you { display: block; position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 8px 14px; border-radius: 99px; background: var(--ink); color: var(--surface); font: 600 18px/1 var(--font-hand); rotate: -4deg; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(45,45,51,.5); } .sol-map:has(.sol-map__item:nth-child(1) a:is(:hover, :focus-visible)) .sol-map__lines path:nth-child(1), .sol-map:has(.sol-map__item:nth-child(2) a:is(:hover, :focus-visible)) .sol-map__lines path:nth-child(2), .sol-map:has(.sol-map__item:nth-child(3) a:is(:hover, :focus-visible)) .sol-map__lines path:nth-child(3), .sol-map:has(.sol-map__item:nth-child(4) a:is(:hover, :focus-visible)) .sol-map__lines path:nth-child(4) { stroke: var(--pink); stroke-width: 3; stroke-dasharray: none; } } /* ---------- Areas: sticky head left, cards right, a dashed route along the numbers ---------- */ .solpage .svc-areas { position: relative; gap: clamp(56px, 10vh, 112px); } .svc-areablock__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); border: 2px dashed color-mix(in srgb, var(--tone-ink) 45%, transparent); color: var(--tone-ink); font: 700 18px/1 var(--font-display); transition: background-color .5s ease .2s, border-color .5s ease .2s, color .5s ease .2s; } .svc-areablock__head.is-in .svc-areablock__num, html:not(.js) .svc-areablock__num { background: var(--tone); border-style: solid; border-color: transparent; } .solpage .svc-areablock__icon { display: none; } /* the number badge already carries the colour */ .solpage .svc-areablock__head h2 { font-size: clamp(28px, 3.2vw, 42px); letter-spacing: -0.02em; } .solpage .svc-list .jx-node__icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); } .solpage .svc-list .jx-node:has(.jx-node__link:hover) .jx-node__icon { transform: rotate(-8deg) scale(1.08); } @media (min-width: 1000px) { .solpage .svc-areablock { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; } .solpage .svc-areablock__head { position: sticky; top: 112px; } .solpage .svc-list--3, .solpage .svc-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .solpage .svc-list--3 > li:last-child { grid-column: 1 / -1; } .solpage .svc-list--3 > li:last-child .jx-node { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: start; } .solpage .svc-list--3 > li:last-child .jx-node > :not(.jx-node__icon) { grid-column: 2; } .solpage .svc-list--3 > li:last-child .jx-node__icon { grid-row: 1 / span 3; } .solpage .quizblock--inline { margin-left: 0; } } /* The quiz between the areas: the blue block, full width of the column */ .quizblock--inline { padding: 0; } /* ---------- Motion (only when welcome) ---------- */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .sol-map__lines path { stroke-dashoffset: 1; animation: sol-draw 1.1s ease forwards; animation-delay: calc(.45s + var(--n, 0) * .15s); } html.js:not([data-theme="clean"]) .sol-map__lines path:nth-child(2) { --n: 1; } html.js:not([data-theme="clean"]) .sol-map__lines path:nth-child(3) { --n: 2; } html.js:not([data-theme="clean"]) .sol-map__lines path:nth-child(4) { --n: 3; } html.js:not([data-theme="clean"]) .sol-map__item { animation: sol-pop .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.9s + var(--i) * .12s); } html.js:not([data-theme="clean"]) .sol-map__you { animation: sol-pop .5s cubic-bezier(.34,1.56,.64,1) .25s both; } } @keyframes sol-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } 99% { stroke-dasharray: 1 1; stroke-dashoffset: 0; } to { stroke-dashoffset: 0; } } @keyframes sol-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } } /* Dark mode board */ :root[data-theme="dark"] .sol-map { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), radial-gradient(60% 70% at 100% 100%, #3A1030, transparent 70%), var(--canvas); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .sol-map { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), radial-gradient(60% 70% at 100% 100%, #3A1030, transparent 70%), var(--canvas); } } /* Low friction */ [data-theme="clean"] .sol-map { background: var(--canvas); border: 1px solid var(--line); } [data-theme="clean"] .sol-map__item { rotate: 0deg !important; translate: -50% -50% !important; } [data-theme="clean"] .sol-map__item a { box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .sol-map__item a:hover { transform: none; } @media (max-width: 699px) { [data-theme="clean"] .sol-map__item { translate: none !important; } } /* ===== sections/contact/contact.css ===== */ /* Section: contact. The contact page (src/pages/contact/index.html), its thank-you page, and the simple text pages: accessibility statement and 404. */ .contact { padding-top: clamp(28px, 5vh, 56px); } .contact__grid { display: grid; gap: 40px; } .contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .contact__intro h1 { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; max-width: 14ch; } .contact__lead { margin: 0; font-size: 18px; line-height: 30px; max-width: 46ch; } .contact__ways { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; width: 100%; max-width: 420px; } .contact__ways li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); } .contact__ways .jx-node__icon { flex: none; width: 40px; height: 40px; color: var(--pink-ink); } .contact__ways .jx-node__icon svg { width: 20px; height: 20px; } .contact__ways b { display: block; font-size: 14px; line-height: 18px; color: var(--ink-muted); font-weight: 600; } .contact__ways a, .contact__ways span { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; overflow-wrap: anywhere; } .contact__promise { margin: 0; font-size: 15.5px; line-height: 24px; color: var(--ink-body); max-width: 46ch; } @media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: start; } .contact__intro h1 { font-size: 46px; } .contact__intro { position: sticky; top: 24px; } } /* The form */ .cform { display: grid; gap: 20px; padding: 24px 20px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } @media (min-width: 600px) { .cform { padding: 32px; } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } } .cform__row { display: grid; gap: 20px; } .cform__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cform label, .cform legend { font: 600 16px/22px var(--font-body); color: var(--ink); } .cform__opt { font-weight: 400; color: var(--ink-muted); } .cform__hint { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--ink-muted); } .cform input[type="text"], .cform input[type="email"], .cform select, .cform textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--radius-md); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 400 16px/24px var(--font-body); } .cform textarea { min-height: 160px; resize: vertical; } .cform select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px; background-repeat: no-repeat; } .cform input:focus-visible, .cform select:focus-visible, .cform textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); } .cform [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; } .cform__error { margin: 0; display: flex; gap: 8px; align-items: flex-start; font: 600 15px/21px var(--font-body); color: var(--danger); } .cform__error[hidden] { display: none; } .cform__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--danger); color: var(--surface); font-size: 13px; line-height: 1; } .cform__summary { padding: 16px 18px; border-radius: var(--radius-md); border: 2px solid var(--danger); background: var(--surface); } .cform__summary[hidden] { display: none; } .cform__summary h2 { margin: 0; font-size: 18px; line-height: 24px; color: var(--ink); } .cform__summary ul { margin: 8px 0 0; padding-left: 20px; } .cform__summary li { font-size: 15.5px; line-height: 24px; } .cform__summary a { color: var(--danger); font-weight: 600; } .cform__privacy { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); } .cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cform .jx-btn { justify-self: start; } [data-theme="clean"] .cform { box-shadow: none; } /* Simple text pages: accessibility statement, thank-you and 404 */ .textpage { padding-top: clamp(28px, 5vh, 56px); padding-bottom: clamp(48px, 8vh, 88px); } .textpage__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; } .textpage__head h1 { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; } .textpage__head p { margin: 0; font-size: 18px; line-height: 30px; } .textpage__body { max-width: 760px; margin-top: 32px; } .textpage__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; color: var(--ink-muted); } .textpage__meta b { color: var(--ink-body); } .textpage__actions { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 8px; } .textpage__status { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--glow-warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); color: var(--ink); } .textpage__status p { margin: 0 !important; color: var(--ink) !important; } [data-theme="clean"] .textpage__status { background: var(--surface); border-color: var(--line-strong); } @media (min-width: 720px) { .textpage__head h1, .contact__intro h1 { font-size: 46px; } } /* ===== sections/insights/insights.css ===== */ /* Section: insights. The Insights page (src/pages/insights/index.html): projects and blog on one page. A filter (All / Projects / Blog) appears when JavaScript runs; without it, both parts simply show. Reuses .work-head and .work-card from case.css. */ /* Filter: three buttons, a pill slides under the active one */ .ins-filter { position: relative; display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .ins-filter[hidden] { display: none; } .ins-filter__pill { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink); transform: translateX(var(--x, 5px)); width: var(--w, 0); transition: transform .35s var(--jx-ease, ease), width .35s var(--jx-ease, ease); } .ins-filter__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px 8px 12px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 600 15px/20px var(--font-body); cursor: pointer; transition: color .25s; } .ins-filter__opt svg { width: 18px; height: 18px; flex: none; } .ins-filter__opt[aria-pressed="true"] { color: var(--surface); } .ins-filter__opt:hover:not([aria-pressed="true"]) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .ins-filter__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .ins-filter__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lilac); color: var(--ink); font-size: 12.5px; line-height: 1; } .ins-filter__opt[aria-pressed="true"] .ins-filter__count { background: var(--pink); color: var(--on-pink); } @media (max-width: 420px) { .ins-filter__opt { padding: 8px 12px 8px 10px; font-size: 14px; gap: 6px; } .ins-filter__opt svg { display: none; } } /* The two parts */ .ins-sec { margin-top: clamp(40px, 7vh, 72px); scroll-margin-top: 24px; } .ins-sec[hidden] { display: none; } .ins-sec__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; max-width: 680px; } .ins-sec__head h2 { margin: 0; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; font-weight: 600; } .ins-sec__head p { margin: 6px 0 0; font-size: 16.5px; line-height: 27px; } .ins-sec__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px; border-radius: 12px; background: var(--blush); color: var(--pink-ink); } .ins-sec__icon--blog { background: var(--butter); color: var(--ink); } .ins-sec__icon svg { width: 22px; height: 22px; } .ins-note { margin: 20px 0 0; font-size: 15.5px; line-height: 24px; color: var(--ink-muted); } .ins-note a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; } /* Project grid: the first one is wide, the rest two by two */ .ins-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } .ins-grid .work-card .jx-chips { gap: 6px; } .ins-type { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/16px var(--font-body); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); } .ins-type::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--pink); } .ins-type--blog::before { border-radius: 50%; background: var(--sticker-orange); } @media (min-width: 720px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ins-item--feature { grid-column: 1 / -1; } } @media (min-width: 960px) { .ins-card--feature { flex-direction: row; } .ins-card--feature .work-card__media { flex: 0 0 58%; aspect-ratio: 16 / 10; } .ins-card--feature .work-card__body { padding: 32px; justify-content: center; } .ins-card--feature .work-card__title { font-size: 28px; line-height: 34px; } .ins-card--feature p { font-size: 17px; line-height: 27px; } } /* Blog posts: image left, text right */ .ins-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .ins-post { position: relative; display: grid; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; transition: translate .2s, box-shadow .2s; } .ins-post__media { margin: 0; aspect-ratio: 16 / 9; background: var(--surface-sunken); } .ins-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ins-post__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; } .ins-post h3 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 600; color: var(--ink); } .ins-post p { margin: 0; font-size: 15.5px; line-height: 24px; } .ins-post__meta { display: flex; gap: 8px; font-size: 14px !important; color: var(--ink-muted); } .ins-post:hover { translate: 0 -4px; box-shadow: var(--shadow-float); } .ins-post:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; } .ins-post .work-card__link { margin-top: 4px; } @media (min-width: 760px) { .ins-post { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .ins-post__media { aspect-ratio: auto; min-height: 100%; } .ins-post__body { padding: 28px; justify-content: center; } } [data-theme="clean"] .ins-post { box-shadow: none; } [data-theme="clean"] .ins-post:hover { translate: none; } /* Motion: cards come in one by one after a filter change (not in Low friction, not with reduced motion) */ @media (prefers-reduced-motion: no-preference) { :root:not([data-theme="clean"]) .ins-sec.is-entering .ins-item { animation: ins-in .45s var(--jx-ease, ease) both; animation-delay: calc(var(--i, 0) * 60ms); } } @keyframes ins-in { from { opacity: 0; translate: 0 14px; } } @media (prefers-reduced-motion: reduce) { .ins-filter__pill { transition: none; } } [data-theme="clean"] .ins-filter__pill { transition: none; } /* Blog notes */ .ins-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; } @media (min-width: 760px) { .ins-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .ins-notes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } .ins-notes > li { display: flex; } .inote--page { min-height: 260px; } .inote__topics { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .inote__topics li { padding: 2px 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); font-size: 13px; line-height: 20px; color: var(--ink-body); } .inote--next { flex: 1; display: grid; place-items: center; min-height: 200px; border: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 6px 22px 22px 6px; background: transparent; box-shadow: none; rotate: -1.5deg; text-align: center; font: 600 24px/1.2 var(--font-hand); color: var(--ink-muted); } /* Entrance: rows slide in one by one when the page opens or the filter changes */ @media (prefers-reduced-motion: no-preference) { html.js:not([data-theme="clean"]) .ins-pola, html.js:not([data-theme="clean"]) .ins-notes > li { animation: ins-in .5s var(--jx-ease) both; animation-delay: calc(.1s + var(--i, 0) * 70ms); } } @keyframes ins-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } [data-theme="clean"] .inote--next { rotate: 0deg; } /* Compact top, so the case index starts high on the screen */ .insights { padding-top: 8px; } .insights .work-head { padding-top: 8px; } .insights .ins-sec { margin-top: clamp(28px, 4vh, 44px); } .insights .ins-sec__head { align-items: center; margin-bottom: 14px; } .insights .ins-sec__head h2 { font-size: clamp(24px, 2.2vw, 28px); } .insights .ins-sec__head p { margin-top: 2px; font-size: 15.5px; line-height: 24px; color: var(--ink-muted); } .insights .ins-sec__icon { width: 40px; height: 40px; } @media (min-width: 900px) { .insights .work-head h1 { font-size: clamp(40px, 3.8vw, 52px); } } /* ===================================================================== Projects as polaroids on a dotted board (replaces the case index, Oct 2026). Every project shows its thumbnail. Small, slightly tilted prints in three columns, so all projects fit on about one screen. Hover or focus: the print straightens, lifts, and the title underlines. The last print is a dashed "your project?" placeholder. ===================================================================== */ .ins-board { list-style: none; margin: 0; padding: clamp(20px, 3vw, 36px); display: grid; gap: clamp(20px, 2.6vw, 32px); border-radius: 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, color-mix(in srgb, var(--blue) 10%, var(--canvas)), transparent 70%), radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--blush) 80%, var(--canvas)), transparent 70%), var(--canvas); } @media (min-width: 900px) { .ins-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ins-pola { display: flex; } .ins-pola__card { position: relative; flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 16px; background: #FFFFFF; border-radius: 6px; color: #2D2D33; box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 18px 32px -16px rgba(45,45,51,.4); rotate: var(--r, 0deg); transition: rotate .4s var(--jx-ease), translate .4s var(--jx-ease), box-shadow .3s; } .ins-pola__card::before { content: ""; position: absolute; top: -9px; left: 50%; width: 46px; height: 18px; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, #FFFFFF 50%, var(--stage, var(--lilac))); opacity: .9; box-shadow: 0 1px 2px rgba(0,0,0,.08); } .ins-pola__media { margin: 0 0 6px; border-radius: 3px; overflow: hidden; background: var(--stage); } .ins-pola__media img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 0; transition: transform .6s var(--jx-ease); } .ins-pola__client { margin: 0; padding: 0 4px; font: 600 19px/1.1 var(--font-hand); color: #C8003F; } .ins-pola__title { margin: 0; padding: 0 4px; font-size: 17px; line-height: 23px; font-weight: 600; color: #2D2D33; } .ins-pola__tags { list-style: none; margin: 4px 0 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 4px; } .ins-pola__tags li { padding: 1px 8px; border-radius: 99px; background: color-mix(in srgb, var(--stage, var(--lilac)) 70%, #FFFFFF); font-size: 12.5px; line-height: 20px; color: #4F4F57; } /* The polaroid paper stays white in dark mode, so its chips keep a light paper tint too (text 7:1) */ :root[data-theme="dark"] .ins-pola__tags li { background: #EEEEF3; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ins-pola__tags li { background: #EEEEF3; } } .ins-pola__link { position: absolute; inset: 0; z-index: 1; border-radius: 6px; } .ins-pola__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; } .ins-pola:has(.ins-pola__link:hover) .ins-pola__card, .ins-pola:has(.ins-pola__link:focus-visible) .ins-pola__card { rotate: 0deg; translate: 0 -6px; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 28px 44px -16px rgba(45,45,51,.45); } .ins-pola:has(.ins-pola__link:hover) .ins-pola__media img { transform: scale(1.04); } .ins-pola:has(.ins-pola__link:hover) .ins-pola__title, .ins-pola:has(.ins-pola__link:focus-visible) .ins-pola__title { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Placeholder print */ .ins-pola--next .ins-pola__card { background: transparent; box-shadow: none; border: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); color: var(--ink-body); } .ins-pola--next .ins-pola__card::before { display: none; } .ins-pola__media--empty { display: grid; place-items: center; aspect-ratio: 16 / 11; background: color-mix(in srgb, var(--ink) 4%, transparent); font: 600 22px/1 var(--font-hand); color: var(--ink-muted); } .ins-pola--next .ins-pola__title { font-size: 15px; line-height: 22px; font-weight: 400; color: var(--ink-body); } .ins-pola--next .ins-pola__client { color: var(--ink-muted); } @media (prefers-reduced-motion: reduce) { .ins-pola__card, .ins-pola__media img { transition: none; } } :root[data-theme="dark"] .ins-board { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), var(--canvas); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .ins-board { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, #FFFFFF 12%, transparent) 1px, transparent 1.6px) 0 0 / 22px 22px, radial-gradient(70% 80% at 0% 0%, #1E2A66, transparent 70%), var(--canvas); } } [data-theme="clean"] .ins-board { background: var(--surface-sunken); } [data-theme="clean"] .ins-pola__card { rotate: 0deg; box-shadow: none; border: 1px solid var(--line); } [data-theme="clean"] .ins-pola__card::before { display: none; } [data-theme="clean"] .ins-pola__client { color: var(--pink-ink); font: 600 13px/18px var(--font-body); text-transform: uppercase; letter-spacing: .05em; } /* Phones: two small prints per row, without the service tags */ @media (max-width: 599px) { .ins-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 16px 12px; border-radius: 24px; } .ins-pola__card { padding: 6px 6px 10px; gap: 4px; } .ins-pola__tags { display: none; } .ins-pola__client { font-size: 15px; } .ins-pola__title { font-size: 14px; line-height: 19px; } .ins-pola--next .ins-pola__title { font-size: 13px; line-height: 18px; } } @media (min-width: 900px) { .ins-pola__media img { aspect-ratio: 16 / 10; } } /* ===== sections/footer/footer.css ===== */ /* Section: site footer. A soft gradient shell with a short call to action on top and a white card with the logo, link columns, the display mode switch and the copyright. */ .site-footer { margin-top: 96px; padding: 0 12px 12px; } .site-footer__shell { max-width: 1320px; margin: 0 auto; padding: 72px 12px 12px; border-radius: 32px; border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); background: radial-gradient(60% 75% at 0% 0%, color-mix(in srgb, var(--blue) 16%, var(--canvas)) 0%, transparent 72%), radial-gradient(60% 75% at 100% 100%, #CFEFFB 0%, transparent 72%), radial-gradient(50% 50% at 90% 10%, color-mix(in srgb, var(--blush) 80%, transparent) 0%, transparent 70%), var(--canvas); } .site-footer__cta { max-width: 620px; margin: 0 auto 64px; padding: 0 12px; text-align: center; } .site-footer__title { margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); } .site-footer__cta p { margin: 16px auto 0; max-width: 460px; color: var(--ink-body); font-size: 17px; line-height: 26px; } .site-footer__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; } body:has(#contact-form) .site-footer__cta { display: none; } body:has(#contact-form) .site-footer__shell { padding-top: 12px; } .site-footer__card { padding: 32px 24px 20px; border-radius: 24px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); backdrop-filter: blur(8px); } .site-footer__top { display: grid; gap: 40px; } .site-footer__about p { margin: 16px 0 20px; max-width: 300px; color: var(--ink-body); font-size: 15px; line-height: 22px; } .site-footer .brand img { height: 26px; } .site-footer .logo-light { display: none; } :root[data-theme="dark"] .site-footer .logo-light { display: block; } :root[data-theme="dark"] .site-footer .logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .site-footer .logo-dark { display: none; } :root:not([data-theme]) .site-footer .logo-light { display: block; } } .site-footer__mail { display: inline-flex; align-items: center; gap: 16px; padding: 5px 5px 5px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-body); font-size: 15px; text-decoration: none; min-height: 44px; } .site-footer__mailbtn { padding: 8px 16px; border-radius: 999px; background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 500; font-size: 14px; line-height: 20px; } .site-footer__mail:hover .site-footer__mailbtn { background: var(--pink-ink); } .site-footer__mail:focus-visible { outline: 3px solid var(--focus, var(--blue)); outline-offset: 3px; } .site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } .site-footer__h { margin: 0 0 12px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .02em; color: var(--ink-muted); } .site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .site-footer__cols a { display: inline-block; padding: 4px 0; color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 400; text-decoration: none; } .site-footer__cols a:hover { text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 4px; } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); } .site-footer__bottom small { color: var(--ink-muted); font-size: 14px; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; } .site-footer__legal small { white-space: nowrap; } .site-footer__legal small:not(:last-child)::after { content: "·"; margin: 0 8px; } @media (min-width: 900px) { .site-footer { padding: 0 24px 24px; } .site-footer__shell { padding: 96px 16px 16px; } .site-footer__card { padding: 40px 40px 24px; } .site-footer__top { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } .site-footer__cols { grid-template-columns: repeat(4, auto); gap: 48px; } } :root[data-theme="dark"] .site-footer__shell { background: radial-gradient(60% 70% at 0% 0%, #1E2A66 0%, transparent 70%), radial-gradient(55% 70% at 100% 100%, #0E3550 0%, transparent 70%), var(--canvas); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .site-footer__shell { background: radial-gradient(60% 70% at 0% 0%, #1E2A66 0%, transparent 70%), radial-gradient(55% 70% at 100% 100%, #0E3550 0%, transparent 70%), var(--canvas); } } [data-theme="clean"] .site-footer__shell { background: var(--canvas); } [data-theme="clean"] .site-footer__card { backdrop-filter: none; background: var(--surface); } /* ===== sections/dock/dock.css ===== */ /* Section: the dock. A floating navigation bar, sticky at the bottom of the screen. html has scroll-padding-bottom so focused elements never hide behind it. */ .dock { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; } .dock__bar { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); animation: jx-dock-in .6s .2s var(--jx-ease) both; } @keyframes jx-dock-in { from { transform: translateY(24px); opacity: 0; } } .dock__mark { display: inline-flex; padding: 6px 8px 6px 0; margin-right: 6px; border-right: 1px solid var(--line); } .dock__mark img { height: 22px; width: auto; display: block; padding-right: 12px; } .dock__mark .logo-light { display: none; } :root[data-theme="dark"] .dock__mark .logo-dark { display: none; } :root[data-theme="dark"] .dock__mark .logo-light { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .dock__mark .logo-dark { display: none; } :root:not([data-theme]) .dock__mark .logo-light { display: block; } } /* Base (mobile): links sit in a menu that opens upwards */ .dock__nav { display: none; gap: 2px; } .dock__nav.is-open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); padding: 10px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); } .dock__nav a { position: relative; padding: 14px 16px; border-radius: var(--radius-pill); font: 600 16px/21px var(--font-body); color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; } .dock__nav a:hover { background: var(--lilac); box-shadow: inset 0 0 0 1.5px var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .dock__nav a[aria-current]:hover { background: var(--ink); text-decoration: underline; } .dock__nav a[aria-current] { background: var(--ink); color: var(--surface); } .dock__menu:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); } .dock__menu { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); border: 0; background: var(--ink); color: var(--surface); font: 600 14px/19px var(--font-body); cursor: pointer; } /* From 720px: links in the bar, no menu button */ @media (min-width: 720px) { .dock__nav, .dock__nav.is-open { display: flex; flex-direction: row; position: static; padding: 0; border: 0; box-shadow: none; background: none; } .dock__nav a { padding: 8px 14px; font-size: 15px; } .dock__menu { display: none; } } body { padding-bottom: 96px; } [data-theme="clean"] .dock__bar { box-shadow: none; border-color: var(--line-strong); } .dock__mark:hover img { transform: rotate(-3deg); } .dock__mark img { transition: transform .2s var(--jx-ease); } /* Insights submenu. Opens upwards from the button (the dock sits at the bottom of the screen). In the phone menu it opens in place, under the button. */ .dock__group { position: relative; display: flex; flex-direction: column; } .dock__sub-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; padding: 14px 16px; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink); font: 600 16px/21px var(--font-body); cursor: pointer; transition: background-color .2s, color .2s; } .dock__sub-toggle svg { width: 14px; height: 14px; transition: transform .25s var(--jx-ease); } .dock__sub-toggle[aria-expanded="false"] svg { transform: rotate(180deg); } .dock__sub-toggle:hover { background: var(--lilac); box-shadow: inset 0 0 0 1.5px var(--ink); } .dock__sub-toggle.is-current { background: var(--ink); color: var(--surface); } .dock__sub-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .dock__sub { list-style: none; margin: 0; padding: 4px 0 4px 12px; display: none; flex-direction: column; gap: 2px; } .dock__sub.is-open { display: flex; } .dock__sub a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; } .dock__sub b { display: block; font-size: 15.5px; line-height: 20px; } .dock__sub small { display: block; font: 400 13.5px/18px var(--font-body); color: var(--ink-muted); } .dock__sub a:hover small { color: var(--ink-body); } .dock__sub-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blush); color: var(--pink-ink); } .dock__sub-icon--blog { background: var(--butter); color: var(--ink); } .dock__sub-icon svg { width: 18px; height: 18px; } .dock__nav .dock__sub-all { font-size: 14px; color: var(--ink-body); padding-left: 62px; } @media (min-width: 720px) { .dock__sub-toggle { padding: 8px 12px 8px 14px; font-size: 15px; } .dock__sub { position: absolute; left: 50%; bottom: calc(100% + 14px); width: 290px; padding: 8px; display: flex; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-float); visibility: hidden; opacity: 0; transform: translate(-50%, 8px) scale(.97); transform-origin: 50% 100%; transition: opacity .2s, transform .25s var(--jx-ease), visibility 0s .25s; } .dock__sub.is-open { visibility: visible; opacity: 1; transform: translate(-50%, 0) scale(1); transition: opacity .2s, transform .25s var(--jx-ease), visibility 0s; } .dock__sub::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); } .dock__nav .dock__sub a { border-radius: var(--radius-md); padding: 10px; } .dock__nav .dock__sub-all { padding: 10px 10px 8px 58px; } } @media (prefers-reduced-motion: reduce) { .dock__sub, .dock__sub.is-open, .dock__sub-toggle svg { transition: none; } } [data-theme="clean"] .dock__sub, [data-theme="clean"] .dock__sub.is-open { transition: none; box-shadow: none; border-color: var(--line-strong); } /* ===== styles/finish.css ===== */ /* Type weights (October 2026). Loaded last, after all components and sections. Bold (700) only for big figures. Page titles, section titles, card titles, buttons and links are 600. Small labels (chips, eyebrows, types, counts) are 500, so they stay readable without shouting. */ .jx h1, .jx-fhero__text h1 { font-weight: 600; letter-spacing: -0.025em; } .jx-stat__num, .pimpact__num, .hero-chip__num { font-weight: 700; } b, strong { font-weight: 600; } .jx-chip, .ins-type, .ins-filter__count, .work-card__client, .svc-areablock__label, .eyebrow, .crumbs, .post__pills .jx-chip, .pi-chip, .cform__opt { font-weight: 500; } .eyebrow, [data-theme="clean"] .eyebrow { font-weight: 600; } .svc-signals li { font-weight: 400; } .svc-faq summary { font-weight: 500; } /* ===== styles/unify.css ===== */ /* One visual language (Oct 2026), taken from the team section and the footer. - Blue-lilac is the base for backgrounds, lines and glows. Pink stays the brand colour, used for small accents only: the mark in a heading, the arrow in a button, a dot. - Cards float: white, 24px radius, no visible border, a soft blue-tinted shadow. - Links inside cards and sections are quiet: ink text with an arrow, no thick underline. - Layout changes per section (split, strip, bento, centred) so the page keeps a rhythm. Loaded last, so these rules win over the component and section defaults. */ :root { --radius-card: 24px; --shadow-soft: 0 1px 2px rgba(45,45,51,.04), 0 12px 30px -12px rgba(83,97,215,.18), 0 30px 60px -32px rgba(83,97,215,.20); --shadow-soft-hover: 0 1px 2px rgba(45,45,51,.05), 0 18px 40px -12px rgba(83,97,215,.26), 0 40px 70px -32px rgba(83,97,215,.26); --card-edge: transparent; --arrow: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] { --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -14px rgba(0,0,0,.55); --shadow-soft-hover: 0 1px 2px rgba(0,0,0,.3), 0 22px 50px -14px rgba(0,0,0,.65); --card-edge: color-mix(in srgb, var(--ink) 8%, transparent); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 16px 40px -14px rgba(0,0,0,.55); --shadow-soft-hover: 0 1px 2px rgba(0,0,0,.3), 0 22px 50px -14px rgba(0,0,0,.65); --card-edge: color-mix(in srgb, var(--ink) 8%, transparent); } } /* Eyebrows and glows lean blue-lilac */ .eyebrow, [data-theme="clean"] .eyebrow { color: var(--blue-ink); } .glow--pink, .glow--yellow { --c: var(--glow-blue); } /* Quiet link: ink text with an arrow that nudges on hover */ .jx-quiet, .jx-node__link, .jx-post__link, .jx-btn--ghost { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--ink); font-weight: 500; text-decoration: none; } .jx-quiet { min-height: 44px; font-size: 16px; } .jx-quiet::before, .jx-node__link::before, .jx-post__link::before, .jx-btn--ghost::before { content: ""; order: 2; flex: none; width: 18px; height: 18px; background: var(--pink-ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; transition: transform .25s var(--jx-ease, ease); } .jx-quiet:hover, .jx-btn--ghost:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--blue) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; } .jx-quiet:hover::before, .jx-btn--ghost:hover::before, .jx-node:has(.jx-node__link:hover) .jx-node__link::before, .jx-node:has(.jx-node__link:focus-visible) .jx-node__link::before, .jx-post:has(.jx-post__link:hover) .jx-post__link::before, .jx-post:has(.jx-post__link:focus-visible) .jx-post__link::before { transform: translateX(4px); } .jx-btn--ghost { padding-inline: 12px; } .jx-btn--ghost:hover { background: transparent; border-color: transparent; } .jx-node:has(.jx-node__link:hover) .jx-node__link, .jx-post:has(.jx-post__link:hover) .jx-post__link { text-decoration: none; } @media (prefers-reduced-motion: reduce) { .jx-quiet::before, .jx-node__link::before, .jx-post__link::before, .jx-btn--ghost::before { transition: none; } } /* Floating cards */ .jx-node, .jx-post { border-radius: var(--radius-card); border-color: var(--card-edge); background: var(--surface); box-shadow: var(--shadow-soft); transition: transform .3s var(--jx-ease, ease), box-shadow .3s; } .jx-node:has(.jx-node__link:hover), .jx-node:has(.jx-node__link:focus-visible), .jx-post:has(.jx-post__link:hover), .jx-post:has(.jx-post__link:focus-visible) { transform: translateY(-4px); box-shadow: var(--shadow-soft-hover); border-color: var(--card-edge); } .jx-node__icon { border-radius: 14px; background: var(--tone); color: var(--tone-ink); box-shadow: none; } .jx-post__media img { border-radius: 16px; } @media (prefers-reduced-motion: reduce) { .jx-node:has(.jx-node__link:hover), .jx-post:has(.jx-post__link:hover) { transform: none; } } /* Clean mode keeps plain borders and no shadows */ [data-theme="clean"] .jx-node, [data-theme="clean"] .jx-post { border-color: var(--line); box-shadow: none; } [data-theme="clean"] .jx-node:has(.jx-node__link:hover), [data-theme="clean"] .jx-post:has(.jx-post__link:hover) { transform: none; box-shadow: none; border-color: var(--ink); } /* Process story: steps float like the other cards, the board sits on a soft lilac field */ .pstory__step { border-color: transparent; background: transparent; border-radius: 18px; } .pstory__step[aria-current] { border-color: var(--card-edge); background: var(--surface); box-shadow: var(--shadow-soft); } .pstory__num { color: var(--blue-ink); } .pstory__scene { border-color: transparent; box-shadow: var(--shadow-soft); border-radius: var(--radius-card); } [data-theme="clean"] .pstory__step { border-color: var(--line); } [data-theme="clean"] .pstory__step[aria-current] { border-color: var(--ink); box-shadow: none; } [data-theme="clean"] .pstory__scene { box-shadow: none; border-color: var(--line); } .tcard { border-color: var(--card-edge); box-shadow: var(--shadow-soft); border-radius: var(--radius-card); } [data-theme="clean"] .tcard { border-color: var(--line); } /* ===== styles/calm.css ===== */ /* Low friction mode (data-theme="clean"), Oct 2026. Autism-friendly and still pleasant: no motion, no decoration that competes for attention, fewer words (secondary intro lines and extra sections are left out), the same order on every page, soft colour to mark areas and actions, and links that always look like links. Loaded last, so it has the final word in this mode. Content that is hidden here is never essential: every page keeps its heading, its main text, its actions and the way to contact us. */ /* ---------- Calm reading ---------- */ [data-theme="clean"] body { background: var(--canvas); } [data-theme="clean"] .jx p, [data-theme="clean"] .jx li { line-height: 1.7; } [data-theme="clean"] .jx a:not([class]) { text-decoration: underline; text-underline-offset: 3px; } [data-theme="clean"] .jx-quiet, [data-theme="clean"] .jx-node__link, [data-theme="clean"] .jx-post__link, [data-theme="clean"] .icase__link, [data-theme="clean"] .inote__link, [data-theme="clean"] .work-card__link, [data-theme="clean"] .team__link { text-decoration: underline; text-decoration-color: var(--blue-ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } [data-theme="clean"] .eyebrow { color: var(--blue-ink); } [data-theme="clean"] *, [data-theme="clean"] *::before, [data-theme="clean"] *::after { animation: none !important; transition-duration: 0s !important; } /* ---------- Fewer words, fewer extras ---------- */ [data-theme="clean"] .section__head p, [data-theme="clean"] .hero__tag, [data-theme="clean"] .hwall__items, [data-theme="clean"] .pticker, [data-theme="clean"] .pfacts__orbit, [data-theme="clean"] .pimpact__title, [data-theme="clean"] .ins-legend, [data-theme="clean"] .icase__tags, [data-theme="clean"] .team__deco, [data-theme="clean"] .tcard__small, [data-theme="clean"] .flow__photo, [data-theme="clean"] .site-footer__cta p, [data-theme="clean"] .sol-map__lines, [data-theme="clean"] .sol-map__you, [data-theme="clean"] .svc-areablock__head p:not(.svc-areablock__label), [data-theme="clean"] .svc-pin, [data-theme="clean"] .svc-sticker, [data-theme="clean"] .svc-block:has(.svc-signals), [data-theme="clean"] .svc-note, [data-theme="clean"] .svc-pairs-line, [data-theme="clean"] .sol-split__intro p, [data-theme="clean"] .svc-steps--line::before, [data-theme="clean"] .quizblock__deco, [data-theme="clean"] .glow { display: none !important; } /* ---------- Homepage hero: just the message and the two actions, on soft paper ---------- */ [data-theme="clean"] .hwall { min-height: 0; padding: clamp(40px, 8vh, 80px) 24px; background: linear-gradient(180deg, var(--lilac), var(--canvas)); border: 0; } [data-theme="clean"] .hwall__text { margin-top: 0; } [data-theme="clean"] .hwall__text h1 .jx-mark { color: var(--blue-ink); } /* ---------- Colour marks the areas: a soft band on top of each card ---------- */ [data-theme="clean"] .jx-node, [data-theme="clean"] .sol-map__item a, [data-theme="clean"] .svc-steps--line li { border: 1px solid var(--line); border-top: 6px solid var(--tone, var(--lilac)); box-shadow: none; } [data-theme="clean"] .jx-node__icon, [data-theme="clean"] .sol-map__icon { background: var(--tone); color: var(--tone-ink); border: 0; } [data-theme="clean"] .svc-short__card { border: 1px solid var(--line); background: linear-gradient(180deg, var(--tone, var(--lilac)) 0 8px, var(--surface) 8px); } [data-theme="clean"] .svc-short__card::before { display: none; } [data-theme="clean"] .svc-board { background: var(--tone, var(--lilac)); border: 0; padding: 16px; } [data-theme="clean"] .svc-pola { border: 0; } [data-theme="clean"] .svc-areablock__num { background: var(--tone); border: 0; color: var(--tone-ink); } [data-theme="clean"] .sol-map { background: var(--surface-sunken); border: 0; } [data-theme="clean"] .pstat, [data-theme="clean"] .pfacts__viz { box-shadow: none; } [data-theme="clean"] .pfacts__viz::before { background: var(--lilac); } [data-theme="clean"] .inote { background: var(--butter); border: 1px solid var(--line); } [data-theme="clean"] .icase__stage { background: var(--stage); } /* Quiz: a calm blue block instead of black */ [data-theme="clean"] .quizblock .svc-quiz--block { background: var(--blue); } /* Footer: soft paper, no gradient */ [data-theme="clean"] .site-footer__shell { background: var(--surface-sunken); border: 0; } [data-theme="clean"] .site-footer__card { background: var(--surface); border: 1px solid var(--line); }