/* ========================================================================== Robot Zebra — AI Workshop for Agencies Structure and copy: approved mockup (rz-warsztat-v2) Look and feel: robotzebra.agency — the tokens below are the values declared in that site's Elementor kit, not sampled approximations. ========================================================================== */ /* --------------------------------------------------------------- 1. Fonts */ /* Mona Sans is loaded from Google Fonts in the of each page, matching how robotzebra.agency serves it. Variable weight 200..900, so every weight used here (400 body, 500 headings, 600 UI, 700 list markers) comes from a single file. No @font-face needed — the hosted stylesheet supplies them. */ /* --------------------------------------------------------------- 2. Tokens */ :root { /* Brand palette — robotzebra.agency Elementor kit-8 */ --blue: #2999fd; --lime: #caff00; --ink: #000000; --text: #484848; --muted: #888888; --line: #dfdee5; --white: #ffffff; --soft: #f2f1f6; --page: #fafafa; /* On-blue variants. Kept at full white: the brand blue is bright enough that even pure white only reaches 2.97:1, so any transparency costs legibility for no real gain. Hierarchy on blue comes from size, not opacity. */ --on-blue-text: #ffffff; --on-blue-fill: rgba(255, 255, 255, 0.15); --on-blue-line: rgba(255, 255, 255, 0.3); /* Contrast-safe companions to the brand greys/blue, for small text only. --muted (#888888) is 3.40:1 on the page background, which fails WCAG AA below 18px; --blue is 2.97:1 on white. These pass at 4.8:1 and read as the same colours at small sizes. */ --muted-strong: #6e6e6e; --blue-ink: #1a72d0; /* The eyebrow chip's own hairline — a soft indigo the agency site uses for this component specifically, rather than the general --line grey. */ --eyebrow-line: rgba(99, 110, 223, 0.3); /* Radii — the brand is pill-and-large-radius throughout */ --r-panel: 34px; --r-card: 20px; --r-sm: 12px; --r-pill: 999px; /* Measure — every section shares one column width so content aligns down the whole page. --wrap-wide is the header shell only. */ --wrap: 1000px; --wrap-wide: 1240px; --gutter: 24px; /* Type */ --font: 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --track: -0.025em; /* brand: -2px at 80px, -1px at 40px */ } /* --------------------------------------------------------------- 3. Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--text); background: var(--page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; } /* --------------------------------------------------------------- 4. Type */ h1, h2, h3 { color: var(--ink); font-weight: 500; /* brand headings are medium, never bold */ letter-spacing: var(--track); line-height: 1.06; text-wrap: balance; } h1 { font-size: clamp(34px, 4.6vw, 60px); margin-bottom: 20px; } h2 { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.1; margin-bottom: 18px; } h3 { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; } p { margin-bottom: 14px; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 600; color: var(--ink); } .lead { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--text); max-width: 62ch; margin-bottom: 30px; } .micro { font-size: 13.5px; color: var(--muted-strong); margin-top: 14px; } /* Emphasis word inside a heading, the way the brand does it */ .hl { color: var(--lime); } /* --------------------------------------------------- 5. Layout primitives */ .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .sec { padding: 76px 0; } .sec--soft { background: var(--soft); } /* Blue emphasis panel: full-bleed edge to edge, but still carrying the brand's large corner radius, so the page background shows through at the corners. */ .panel { position: relative; overflow: hidden; padding: 84px 0; border-radius: var(--r-panel); background: var(--blue); color: var(--on-blue-text); isolation: isolate; } .panel h1, .panel h2, .panel h3 { color: var(--white); } .panel .lead { color: var(--on-blue-text); } .panel .micro { color: rgba(255, 255, 255, 0.92); } .panel strong, .panel b { color: var(--white); } /* Faint arcs echoing the brand hero background */ .panel::before { content: ''; position: absolute; inset: -30% -10% auto -30%; height: 160%; z-index: -1; background: radial-gradient(60% 60% at 12% 30%, rgba(255, 255, 255, 0.11), transparent 70%), radial-gradient(45% 45% at 88% 12%, rgba(255, 255, 255, 0.09), transparent 70%); pointer-events: none; } /* Decorative four-point sparkle */ .sparkle { position: absolute; z-index: -1; color: var(--lime); pointer-events: none; } .sparkle svg { width: 100%; height: auto; fill: currentColor; } .sparkle--hero { width: clamp(90px, 13vw, 190px); top: 6%; right: -22px; } .sparkle--price { width: clamp(70px, 8vw, 120px); bottom: 8%; left: -18px; } .sparkle--cta { width: clamp(70px, 8vw, 130px); top: 10%; right: -20px; } /* -------------------------------------------------------------- 6. Eyebrow Matched to robotzebra.agency's `.elementor-element-6599f17`: chip padding 5px 14px, border-radius 10px, transparent fill, 1px hairline rgba(99,110,223,.3) text 18px / 500 / 1.333, black dot 6px lime, radius 2px, 6px clear of the label, blinking on a 0.75s loop (their `flickerAnimation`: opacity 1 -> 0 -> 1) --------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; padding: 5px 14px; border: 1px solid var(--eyebrow-line); border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.333; } .eyebrow::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 2px; background: var(--lime); animation: eyebrow-blink 0.75s infinite; } @keyframes eyebrow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .panel .eyebrow { border-color: var(--on-blue-line); color: var(--white); } /* -------------------------------------------------------------- 7. Buttons Ported from robotzebra.agency's `.button-style.button-border`: shell border-radius 20px, 1px border, padding 6px 30px 6px 6px badge 48x48, border-radius 15px, lime, 18px black arrow label 16px / 1.625, weight 600, 10px clear of the badge Hover is three moves at once: a blue fill wipes rightward across the button, the badge turns blue with it, the label rolls up while a copy rolls in beneath it, and the arrow slides out right as a second slides in from left. One deliberate departure from the source: the agency site insets its fill (left:20px, top/bottom:6px, width -> calc(100% - 26px)), leaving a white frame around a rounded inner block. Here the fill covers the whole shell. --------------------------------------------------------------------------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 6px 30px 6px 6px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.625; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; overflow: hidden; /* clips the fill below to the rounded shell */ } /* The blue fill, wiping rightward across the whole button. inset:0 with an explicit width means `right` is ignored, so the block grows from the left edge and covers the shell completely — no white frame left around it. */ .btn::before { content: ''; position: absolute; z-index: 0; inset: 0; width: 0; background: var(--blue); transition: width 0.4s ease; } .btn:hover::before, .btn:focus-visible::before { width: 100%; } .btn:hover, .btn:focus-visible { border-color: var(--blue); } .btn__ico { position: relative; z-index: 1; display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; overflow: hidden; border-radius: 15px; background: var(--lime); transition: background 0.4s ease; } .btn:hover .btn__ico, .btn:focus-visible .btn__ico { background: var(--blue); } .btn__arw { position: absolute; width: 18px; height: 18px; stroke: var(--ink); stroke-width: 2; fill: none; transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); } .btn__arw:first-child { transition-delay: 0.1s; } .btn__arw + .btn__arw { transform: translateX(-200%); transition-delay: 0s; } .btn:hover .btn__arw:first-child, .btn:focus-visible .btn__arw:first-child { transform: translateX(200%); transition-delay: 0s; } .btn:hover .btn__arw + .btn__arw, .btn:focus-visible .btn__arw + .btn__arw { transform: translateX(0); transition-delay: 0.1s; } .btn__label { position: relative; z-index: 1; display: inline-block; margin-left: 10px; overflow: hidden; white-space: nowrap; transition: color 0.3s ease; } .btn__label > span { display: block; transition: transform 0.3s ease, opacity 0.3s ease; } /* the second copy sits on top, waiting below the fold of the label box */ .btn__label > span + span { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; } .btn:hover .btn__label, .btn:focus-visible .btn__label { color: var(--white); } .btn:hover .btn__label > span:first-child, .btn:focus-visible .btn__label > span:first-child { transform: translateY(-100%); opacity: 0; } .btn:hover .btn__label > span + span, .btn:focus-visible .btn__label > span + span { transform: translateY(0); opacity: 1; } .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .panel .btn { border-color: transparent; } .panel .btn:focus-visible { outline-color: var(--white); } /* On a blue panel a blue fill would make the button vanish into the background, so it wipes black instead with a light arrow — the same substitution the agency site makes for its own on-blue button variant. */ .panel .btn::before { background: var(--ink); } .panel .btn:hover, .panel .btn:focus-visible { border-color: var(--ink); } .panel .btn:hover .btn__ico, .panel .btn:focus-visible .btn__ico { background: var(--ink); } .panel .btn:hover .btn__arw, .panel .btn:focus-visible .btn__arw { stroke: var(--white); } /* Small variant — the site's own 40x40 / radius-10 badge override */ .btn--sm { padding: 5px 22px 5px 5px; border-radius: 16px; font-size: 15px; } .btn--sm .btn__ico { width: 40px; height: 40px; border-radius: 10px; } .btn--sm .btn__arw { width: 16px; height: 16px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; } /* --------------------------------------------------------------- 8. Header */ .site-header { position: sticky; top: 0; z-index: 40; padding: 14px 0; background: rgba(250, 250, 250, 0.86); backdrop-filter: saturate(150%) blur(10px); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gutter); } .brand { display: inline-flex; align-items: center; flex-shrink: 0; /* the wordmark must never be squeezed by the CTA beside it */ padding: 11px 24px; border-radius: var(--r-pill); background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); text-decoration: none; } .brand img { width: auto; height: 34px; } /* ----------------------------------------------------------------- 9. Hero */ .hero { padding: clamp(56px, 7vw, 104px) 0 clamp(60px, 7vw, 108px); } .hero .lead { max-width: 58ch; margin-bottom: 24px; } /* ---------------------------------------------------------------- 10. Cards */ .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 6px; } .card { padding: 26px 22px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .card h3 { margin-bottom: 8px; } .card p { font-size: 15.5px; line-height: 1.55; } /* ---------------------------------------------------------- 12. Facilitator */ .blist { list-style: none; margin-top: 4px; } .blist li { position: relative; padding: 13px 0 13px 30px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.5; } .blist li:first-child { border-top: none; } .blist li::before { content: ''; position: absolute; left: 2px; top: 21px; width: 9px; height: 9px; border-radius: 2px; background: var(--lime); } /* ------------------------------------------------------------------ 17. FAQ */ .faq { padding: 22px 0; border-top: 1px solid var(--line); } .faq:first-of-type { border-top: none; padding-top: 4px; } .faq__q { display: block; margin-bottom: 7px; color: var(--ink); font-size: 17px; font-weight: 600; font-style: normal; letter-spacing: -0.01em; } /* renders quote marks by default — the copy supplies its own voice */ .faq__q::before, .faq__q::after { content: none; } .faq p { font-size: 15.5px; line-height: 1.6; margin-bottom: 0; } /* ------------------------------------------------------------ 18. Final CTA */ .footcta { text-align: center; } .footcta .lead { margin: 0 auto 10px; } .footcta .cta-row { justify-content: center; } .contact-line { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; margin-top: 24px; font-size: 15.5px; font-weight: 500; } .contact-line a { padding-bottom: 2px; border-bottom: 1px solid var(--on-blue-line); color: var(--white); text-decoration: none; } .contact-line a:hover { border-bottom-color: var(--white); } /* --------------------------------------------------------------- 19. Footer */ .site-footer { padding: 34px 0 40px; text-align: center; color: var(--muted-strong); font-size: 13.5px; } .site-footer a { border-bottom: 1px solid var(--line); color: var(--muted-strong); text-decoration: none; } .site-footer a:hover { color: var(--ink); } /* -------------------------------------------------- 20. Sticky mobile CTA */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(12px); } .mobile-cta .btn { width: 100%; justify-content: center; padding-right: 16px; } /* -------------------------------------------------------------- 21. A11y */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; background: var(--ink); color: var(--white); text-decoration: none; } .skip:focus { left: 0; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------- 23. Preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; /* essential alongside the duration: without it an `infinite` animation (the eyebrow dot) would loop every 0.01ms instead of stopping */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } @media print { .site-header, .mobile-cta, .sparkle { display: none !important; } body { padding-bottom: 0; background: #fff; } .panel { border: 1px solid #ccc; background: #fff; color: #000; } .panel h1, .panel h2, .panel h3, .panel .lead, .contact-line a { color: #000; } } /* ------------------------------------------------------- 11. AI model chips */ .ai-strip { display: flex; list-style: none; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .ai-chip { padding: 7px 15px; border: 1px solid var(--on-blue-line); border-radius: var(--r-pill); background: var(--on-blue-fill); color: var(--white); font-size: 14px; font-weight: 500; line-height: 1.2; } /* ------------------------------------------------------------- 12. Video */ /* Dark 16:9 frame. Drop the provider iframe straight in and it fills the box; the placeholder below is only there until there's a real video to embed. */ .video { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-top: 6px; overflow: hidden; border-radius: var(--r-card); background: #12161c; text-align: center; } .video iframe, .video video { width: 100%; height: 100%; border: 0; } .video__play { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--lime); } .video__play svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--ink); } .video__ph { color: rgba(255, 255, 255, 0.62); font-size: 14px; } /* --------------------------------------------------------------- 13. Steps */ .steps { counter-reset: step; margin-top: 6px; } .step { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); } .step:first-child { padding-top: 6px; border-top: none; } /* Oversized faded numerals, the way the brand runs its process sections */ .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); color: var(--line); font-size: 46px; font-weight: 500; line-height: 0.9; letter-spacing: var(--track); } .step p { margin: 0; font-size: 15.5px; line-height: 1.55; } /* ---------------------------------------------------------------- 14. Form */ .form { margin-top: 6px; padding: 30px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); } .field { margin-bottom: 16px; } .field--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field label { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 600; } /* Pill fields with a soft fill and no border — the brand's own form idiom */ .form input, .form select, .form textarea { width: 100%; height: 52px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--soft); color: var(--ink); font-family: inherit; font-size: 15px; } .form textarea { height: auto; min-height: 112px; padding: 15px 20px; border-radius: var(--r-card); line-height: 1.5; resize: vertical; } .form select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23484848' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; } .form ::placeholder { color: var(--muted-strong); opacity: 1; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--blue); background: var(--white); } .consent { display: flex; align-items: flex-start; gap: 11px; margin: 12px 0; color: var(--text); font-size: 14px; line-height: 1.45; } .consent input[type='checkbox'] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; padding: 0; border-radius: 4px; accent-color: var(--blue); } /* Hugs its label and centres. `.btn` is inline-flex, so auto margins alone wouldn't centre it — it has to become block-level at its content width. */ .form .btn { display: flex; width: fit-content; margin: 12px auto 0; } .form .micro { text-align: center; } /* ------------------------------------------------- 15. Cross-surface tweaks */ /* .blist reads on light by default; on a blue panel it needs the pale rule */ .panel .blist li { border-top-color: var(--on-blue-line); } /* Secondary button, used on the blue hero next to the primary. `.panel .btn` zeroes the border at the same specificity, so this has to match it. */ .btn--outline { background: transparent; color: var(--white); } .panel .btn--outline { border-color: var(--on-blue-line); } /* --------------------------------------------------------- 16. Responsive */ @media (max-width: 1024px) { :root { --r-panel: 30px; } .sec { padding: 66px 0; } .panel { padding: 72px 0; } } @media (max-width: 1024px) and (min-width: 768px) { .grid3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { :root { --r-panel: 24px; --r-card: 16px; --gutter: 20px; } body { font-size: 16.5px; padding-bottom: calc(84px + env(safe-area-inset-bottom)); } .site-header { position: static; padding: 12px 0; background: none; backdrop-filter: none; } .sec { padding: 52px 0; } .panel { padding: 56px 0; } .hero { padding: 44px 0 50px; } h3 { font-size: 18px; } .eyebrow { font-size: 16px; } .grid3, .field--two { grid-template-columns: 1fr; } .card { padding: 22px 20px; } .form { padding: 22px 18px; } /* numeral moves above the step text rather than beside it */ .step { grid-template-columns: 1fr; gap: 4px; padding: 20px 0; } .step::before { font-size: 34px; } .contact-line { flex-direction: column; gap: 6px; } .mobile-cta { display: block; } .sparkle--hero { top: auto; right: -34px; bottom: -30px; } .sparkle--cta { top: -24px; right: -26px; } } @media (max-width: 479px) { .eyebrow { padding: 5px 12px; font-size: 15px; } .brand { padding: 9px 17px; } .brand img { height: 28px; } .btn--sm { padding: 4px 16px 4px 4px; border-radius: 14px; font-size: 14px; } .btn--sm .btn__ico { width: 36px; height: 36px; border-radius: 9px; } } /* Below ~380px the logo and header CTA cannot both sit at full size; the sticky bottom bar already carries the CTA on mobile. */ @media (max-width: 379px) { .site-header .btn { display: none; } }