/* =========================================================================== Tilting The Balance — site styles Design system carried over from aiismycoach.com: primary Tailwind "sky" accent Tailwind "fuchsia" display Playfair Display body Inter surfaces white / gray-50, 12-16px radii, restrained shadows Hand-authored, ~1 file, no framework. Fonts are local (../fonts.css). =========================================================================== */ /* fonts.css is linked from the page (in parallel with this file) rather than @import-ed here, which would serialize the two requests. */ :root { --primary-50: #f0f9ff; --primary-100: #e0f2fe; --primary-200: #bae6fd; --primary-400: #38bdf8; --primary-500: #0ea5e9; --primary-600: #0284c7; --primary-700: #0369a1; --primary-800: #075985; --accent-50: #fdf4ff; --accent-100: #fae8ff; --accent-500: #d946ef; --accent-600: #c026d3; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827; --yellow-400: #facc15; --display: "Playfair Display", Georgia, "Times New Roman", serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06); --shadow: 0 2px 6px rgba(0, 0, 0, .12); --shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, .16); --wrap: 1120px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(3.5rem, 8vw, 6.5rem); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--gray-700); background: radial-gradient(1200px 800px at 88% -120px, var(--accent-50) 0%, transparent 60%), radial-gradient(1400px 900px at -240px 18%, var(--primary-50) 0%, transparent 55%), radial-gradient(1100px 750px at 110% 72%, var(--primary-50) 0%, transparent 60%), #fff; -webkit-font-smoothing: antialiased; } /* Scenery backdrop pinned to the viewport bottom: stays present while scrolling, shows through plain/translucent sections, and sits behind opaque section backgrounds (washes, dark bands, cards, footer). The sun and sailboat are separate layers, animated by scroll travel. */ .scenery { position: fixed; left: 0; right: 0; top: 0; height: 100vh; /* fallback */ height: 100dvh; /* tracks iOS Safari's dynamic toolbar */ opacity: .72; pointer-events: none; z-index: -1; overflow: hidden; } .scenery-terrain { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 24vh, 260px); background: url("../img/landscape-backdrop.svg") bottom center / cover no-repeat; } .scenery-fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 24vh, 260px); background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 40%); } .scenery-sun { position: absolute; left: 0; top: 0; width: 116px; height: 116px; border-radius: 50%; background: radial-gradient(circle, #fdba74 0%, #fed7aa 45%, rgba(254, 215, 170, 0) 74%); transform: translate3d(5vw, 20%, 0); transition: opacity .8s ease; will-change: transform; } .scenery-boat { position: absolute; left: 0; bottom: calc(clamp(150px, 24vh, 260px) * .13); width: 54px; height: 45px; opacity: .85; transform: translate3d(16vw, 0, 0); will-change: transform; } .scenery-cloud { position: absolute; left: 0; top: 0; width: 170px; height: 62px; opacity: .8; will-change: transform; } .scenery-cloud:nth-of-type(2) { width: 130px; height: 48px; opacity: .65; } .scenery-cloud:nth-of-type(3) { width: 105px; height: 39px; opacity: .55; } /* static fallback spread (no JS / reduced motion) */ .scenery-cloud:nth-of-type(1) { transform: translate3d(12vw, 12%, 0); } .scenery-cloud:nth-of-type(2) { transform: translate3d(52vw, 30%, 0); } .scenery-cloud:nth-of-type(3) { transform: translate3d(80vw, 16%, 0); } .scenery-birds { position: absolute; left: 0; top: 0; width: 60px; height: 26px; opacity: .75; transform: translate3d(38vw, 18%, 0); will-change: transform; } .scenery-plane { position: absolute; left: 0; top: 0; width: 52px; height: 20px; opacity: .7; transform: translate3d(-160px, 5%, 0); will-change: transform; } /* On phones the fixed, scroll-animated scenery is fragile in mobile Safari (dynamic-toolbar resizing, inline-SVG sizing quirks). Hide it there and let the body's soft gradient wash carry the background — bulletproof, no JS. */ @media (max-width: 768px) { .scenery { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--display); color: var(--gray-900); line-height: 1.18; letter-spacing: -0.015em; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); } h2 { font-size: clamp(1.75rem, 3.8vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); } p { margin: 0 0 1.15rem; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--primary-600); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--primary-700); } /* --- layout ------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 46rem; margin-inline: auto; } section { padding-block: var(--section-y); } .surface-tint { background: rgba(255, 255, 255, .35); } .surface-wash { background: linear-gradient(160deg, var(--primary-50) 0%, #fff 55%, var(--accent-50) 100%); background: linear-gradient(160deg, color-mix(in srgb, var(--primary-50) 75%, transparent) 0%, rgba(255, 255, 255, .5) 55%, color-mix(in srgb, var(--accent-50) 75%, transparent) 100%); } .surface-dark { background: linear-gradient(160deg, var(--primary-800) 0%, var(--gray-900) 100%); color: #e5edf5; } .surface-dark h1, .surface-dark h2, .surface-dark h3 { color: #fff; } .center { text-align: center; } .eyebrow { font-family: var(--body); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-600); margin: 0 0 .9rem; } .surface-dark .eyebrow { color: var(--primary-200); } .lead { font-size: 1.15rem; color: var(--gray-600); } .surface-dark .lead { color: #cbd9e6; } /* --- buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--body); font-size: 1.02rem; font-weight: 600; line-height: 1.2; padding: .95rem 1.9rem; border-radius: var(--radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease; } .btn-primary { background: var(--primary-600); color: #fff; } .btn-primary:hover { background: var(--primary-700); color: #fff; box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn-secondary { background: #fff; color: var(--gray-900); border-color: var(--gray-200); } .btn-secondary:hover { border-color: var(--primary-600); color: var(--primary-700); box-shadow: var(--shadow); transform: translateY(-1px); } .btn-on-dark { background: #fff; color: var(--primary-700); } .btn-on-dark:hover { background: var(--primary-50); color: var(--primary-800); box-shadow: var(--shadow-lg); transform: translateY(-1px); } .btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--primary-400); outline-offset: 2px; } .btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.9rem; } .center .btn-row { justify-content: center; } .btn-note { font-size: .92rem; color: var(--gray-500); margin: .9rem 0 0; } .surface-dark .btn-note { color: #a9bccf; } /* --- header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); } /* The header shares the page's 1120px measure so the logo and the CTA line up with the content edges below. Below 880px it wraps into a two-row layout. */ .site-header .wrap { display: flex; align-items: center; gap: 1.4rem; min-height: 74px; } .brand { flex: 0 0 auto; } .brand img { width: 190px; } /* margin-inline auto centers the links in the space between the brand and the CTA. */ .nav { display: flex; gap: 1rem; margin-inline: auto; flex-wrap: wrap; align-items: center; justify-content: center; } .nav a { font-size: .93rem; font-weight: 500; color: var(--gray-600); text-decoration: none; transition: color .15s ease; } .nav a:hover, .nav a[aria-current="page"] { color: var(--primary-600); } /* --- nav dropdowns ------------------------------------------------------ */ /* Flex (not block) so the wrapper hugs the button exactly — a block wrapper leaves descender space under the inline button and the trigger renders a pixel or two lower than the sibling links. */ .nav-drop { position: relative; display: flex; align-items: center; } .nav-drop > button { font-family: var(--body); font-size: .93rem; font-weight: 500; line-height: 1.7; /* match the anchors, which inherit the body line-height */ color: var(--gray-600); background: none; border: 0; padding: 0; cursor: pointer; transition: color .15s ease; display: inline-flex; align-items: baseline; gap: .3rem; } .nav-drop > button:hover { color: var(--primary-600); } .nav-drop .caret { font-size: .7em; transition: transform .15s ease; } .nav-drop.open .caret { transform: rotate(180deg); } /* A dropdown holding the current page keeps its trigger highlighted. */ .nav-drop:has(a[aria-current="page"]) > button { color: var(--primary-600); } .nav-menu { display: none; position: absolute; top: calc(100% + .65rem); left: 50%; transform: translateX(-50%); min-width: 14.5rem; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .55rem; z-index: 60; } /* Shown on hover or when click-pinned (.open). Keyboard access works through .open alone: Enter on the trigger toggles it, and the script closes the menu when focus leaves the dropdown — a :focus-within trigger here would fight the click toggle (a focused trigger could never close its menu). */ .nav-drop.open .nav-menu, .nav-drop:hover .nav-menu { display: block; } /* Bridge the gap between trigger and menu so hover does not drop. */ .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; } .nav-menu a { display: block; padding: .5rem .8rem; border-radius: 8px; white-space: nowrap; } .nav-menu a:hover { background: var(--primary-50); } @media (max-width: 880px) { /* On the wrapped nav an absolute flyout would overflow the screen; the menu expands in place instead, on its own full-width row. Hover / focus alone no longer opens it — only the button's click handler — so a stray tap cannot half-open a menu that reflows the whole nav. */ .nav-drop:hover .nav-menu { display: none; } .nav-drop.open .nav-menu { display: block; } .nav-drop.open { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; } .nav-drop .nav-menu { position: static; transform: none; min-width: 0; width: 100%; max-width: 24rem; margin: .4rem auto 0; box-shadow: var(--shadow-sm); } .nav-menu::before { content: none; } .nav-menu a { white-space: normal; text-align: center; } } .header-cta { flex: 0 0 auto; } .header-cta .btn { padding: .68rem 1.25rem; font-size: .95rem; } @media (max-width: 880px) { .site-header .wrap { flex-wrap: wrap; min-height: 0; padding-block: .85rem; gap: .75rem 1rem; } .nav { order: 3; width: 100%; margin-left: 0; gap: .55rem 1rem; justify-content: center; } .header-cta { margin-left: auto; } .brand img { width: 150px; } } /* Below ~420px the logo and CTA together exceed the line, pushing the button onto its own row and making the header four rows tall. Shrink both so they stay on one line with the nav beneath. */ @media (max-width: 430px) { .brand img { width: 128px; } .header-cta .btn { padding: .6rem .85rem; font-size: .88rem; } .nav a { font-size: .9rem; } } /* --- hero --------------------------------------------------------------- */ .hero { padding-block: clamp(3.5rem, 9vw, 7rem); } /* Book renders shown inline with their copy: identical height everywhere. */ .book-art { display: flex; justify-content: center; margin-block: 1.8rem 2rem; } .book-art img { height: clamp(280px, 38vw, 400px); width: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Life With AI figure: smaller, octagon-clipped image centered under the title. */ .ai-figure { display: flex; justify-content: center; margin-block: 1.8rem 2.2rem; } .ai-figure img { width: clamp(200px, 44vw, 300px); height: auto; clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .18)); } .hero h1 { max-width: 20ch; } .hero .lead { font-size: clamp(1.08rem, 1.7vw, 1.28rem); max-width: 60ch; } .hero .question { font-family: var(--display); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-style: italic; color: var(--primary-700); margin: 0 0 1.1rem; } .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.15fr .85fr; align-items: center; } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 340px; margin-inline: auto; margin-bottom: 2rem; } } .hero-art { margin-bottom: 1.75rem; } .hero-art img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; } /* --- generic two-column split ------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1fr; align-items: center; } .split.media-right .split-media { order: 2; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split.media-right .split-media { order: 0; } } .split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Breathing room beneath content images site-wide (matches .book-art/.ai-figure). */ .split-media { margin-bottom: 1.75rem; } @media (max-width: 880px) { .split-media { margin-bottom: 2rem; } } /* --- pull quote --------------------------------------------------------- */ .pullquote { font-family: var(--display); font-size: clamp(1.35rem, 3vw, 2rem); font-style: italic; line-height: 1.4; color: var(--gray-900); text-align: center; max-width: 24ch; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); } /* --- checklist ---------------------------------------------------------- */ .checklist { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; } .checklist li { position: relative; padding-left: 2.1rem; color: var(--gray-700); } .checklist li::before { content: ""; position: absolute; left: 0; top: .42em; width: 1.35rem; height: 1.35rem; border-radius: 9999px; background: var(--primary-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230284c7'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center / .95rem no-repeat; } /* --- cards -------------------------------------------------------------- */ .cards { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 2.5rem; } .card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.9rem; transition: box-shadow .2s ease, transform .2s ease; } /* Cards in a row have different amounts of copy; pin their CTAs to the bottom so the buttons line up across the row instead of stair-stepping. */ .card > .btn-row { margin-top: auto; } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card h3 { margin-bottom: .5rem; } .card p { color: var(--gray-600); font-size: .99rem; } /* --- testimonials ------------------------------------------------------- */ .quote-card { display: flex; flex-direction: column; } .quote-card .avatar { width: 68px; height: 68px; border-radius: 9999px; object-fit: cover; margin-bottom: 1.1rem; } .quote-card .stars { color: var(--yellow-400); letter-spacing: .12em; margin-bottom: .7rem; font-size: 1rem; } .quote-card blockquote { margin: 0 0 1.1rem; font-size: 1rem; color: var(--gray-700); } .quote-card .who { font-weight: 600; color: var(--gray-900); font-size: .95rem; margin: auto 0 0; } /* --- forms -------------------------------------------------------------- */ .form-card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.6rem, 4vw, 2.5rem); max-width: 32rem; margin-inline: auto; } .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .93rem; font-weight: 600; color: var(--gray-900); margin-bottom: .4rem; } .field .req { color: var(--accent-600); } .field input { width: 100%; font-family: var(--body); font-size: 1rem; padding: .8rem 1rem; color: var(--gray-900); border: 1px solid var(--gray-300); border-radius: var(--radius); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(14, 165, 233, .18); } .form-card .btn { width: 100%; } .form-note { font-size: .85rem; color: var(--gray-500); margin: .9rem 0 0; text-align: center; } /* --- embed placeholder -------------------------------------------------- */ .embed-slot { border: 2px dashed var(--primary-200); border-radius: var(--radius-lg); background: var(--primary-50); padding: clamp(1.8rem, 5vw, 3rem); text-align: center; color: var(--gray-600); } .embed-slot strong { display: block; color: var(--gray-900); margin-bottom: .5rem; font-size: 1.05rem; } .embed-slot code { display: inline-block; margin-top: .6rem; font-size: .82rem; background: #fff; border: 1px solid var(--primary-200); border-radius: 6px; padding: .3rem .55rem; color: var(--primary-800); word-break: break-all; } /* --- steps -------------------------------------------------------------- */ .steps { counter-reset: step; display: grid; gap: 1.4rem; margin-top: 2.2rem; padding: 0; list-style: none; } .steps li { position: relative; padding-left: 3.4rem; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -.15em; width: 2.3rem; height: 2.3rem; border-radius: 9999px; display: grid; place-items: center; font-family: var(--body); font-weight: 700; font-size: .98rem; color: #fff; background: linear-gradient(135deg, var(--primary-500), var(--accent-500)); } .steps h3 { margin-bottom: .25rem; } /* --- FAQ ---------------------------------------------------------------- */ .faq { max-width: 46rem; margin: 2.5rem auto 0; display: grid; gap: .9rem; text-align: left; } .faq details { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.05rem 3.2rem 1.05rem 1.3rem; font-weight: 600; color: var(--gray-900); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 1.3rem; top: 1.05rem; font-family: var(--body); font-size: 1.25rem; line-height: 1.5; color: var(--primary-600); } .faq details[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--primary-700); } .faq .faq-a { padding: 0 1.3rem 1.25rem; } .faq .faq-a p { color: var(--gray-600); font-size: .99rem; } /* --- footer ------------------------------------------------------------- */ .site-footer { background: var(--gray-900); color: #9aa8b8; padding-block: clamp(2.5rem, 6vw, 4rem); font-size: .93rem; } .site-footer img.mark { width: 200px; margin: 0 auto 1.6rem; } .site-footer a { color: #cbd9e6; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: center; margin-bottom: 1.6rem; padding: 0; list-style: none; } .footer-nav-secondary { font-size: .86rem; margin-top: -0.6rem; } .footer-nav-secondary a { color: #9aa8b8; } .footer-social { display: flex; gap: 1rem; justify-content: center; margin: 0 0 1.6rem; padding: 0; list-style: none; } .footer-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(255, 255, 255, .08); color: #cbd9e6; transition: background-color .15s ease, color .15s ease; } .footer-social a:hover { background: var(--primary-600); color: #fff; } .footer-social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; } .footer-legal { text-align: center; color: #7d8b9c; font-size: .86rem; } .footer-legal a { color: #9aa8b8; } /* --- legal pages -------------------------------------------------------- */ /* Long statutory copy: dial the display type down so numbered clause headings read as structure rather than as marketing headlines. */ .legal-copy { font-size: 1rem; } .legal-copy h2 { font-family: var(--body); font-size: 1.06rem; font-weight: 700; color: var(--gray-900); margin: 2.2rem 0 .7rem; letter-spacing: 0; line-height: 1.4; } .legal-copy h2:first-child { margin-top: 0; } /* A run of consecutive headings is a table of contents, not a set of section titles — close the gap so it reads as a list. */ .legal-copy h2 + h2 { margin-top: .45rem; } .legal-copy p { color: var(--gray-600); margin-bottom: .95rem; } .legal-copy a { word-break: break-word; } /* --- the 10 categories wheel -------------------------------------------- */ .wheel-art svg { width: 100%; max-width: 430px; margin-inline: auto; display: block; } .wheel-seg path { transition: transform .18s ease, filter .18s ease; transform-origin: 200px 200px; } .wheel-seg text { font-family: var(--body); font-size: 15px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .wheel-seg:hover path, .wheel-seg.active path { transform: scale(1.05); filter: saturate(1.2); } .wheel-center { font-family: var(--display); font-weight: 600; fill: var(--gray-900); text-anchor: middle; } .wheel-list { list-style: none; counter-reset: cat; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .3rem; } .wheel-list li { counter-increment: cat; display: flex; align-items: center; gap: .7rem; padding: .42rem .7rem; border-radius: 8px; font-size: .97rem; color: var(--gray-700); transition: background-color .15s ease; } .wheel-list li::before { content: counter(cat); flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 9999px; display: grid; place-items: center; background: var(--c); color: #fff; font-size: .8rem; font-weight: 700; } .wheel-list li:hover, .wheel-list li.active { background: var(--gray-100); } /* --- scroll reveal ------------------------------------------------------- The .reveal class is added by script, and the hidden initial state only applies under html.js-reveal (also script-set), so content is never hidden when JS is off. The script skips all of it under prefers-reduced-motion. */ html.js-reveal .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease-out, transform .55s ease-out; } html.js-reveal .reveal.in-view { opacity: 1; transform: none; } html.js-reveal .cards .card.reveal:nth-child(2) { transition-delay: .09s; } html.js-reveal .cards .card.reveal:nth-child(3) { transition-delay: .18s; } html.js-reveal .cards .card.reveal:nth-child(4) { transition-delay: .09s; } html.js-reveal .cards .card.reveal:nth-child(5) { transition-delay: .18s; } html.js-reveal .cards .card.reveal:nth-child(6) { transition-delay: .27s; } /* --- micro-polish -------------------------------------------------------- */ /* Primary CTAs get an arrow that eases forward on hover. */ .btn-primary::after, .btn-on-dark::after { content: "\2192"; font-size: .95em; transition: transform .18s ease; } .btn-primary:hover::after, .btn-on-dark:hover::after { transform: translateX(3px); } .form-card .btn::after { content: none; } /* form submit buttons stay plain */ /* Decorative quotation mark behind testimonial cards. */ .quote-card { position: relative; overflow: hidden; } .quote-card::before { content: "\201C"; position: absolute; top: -.6rem; right: .9rem; font-family: var(--display); font-size: 6.5rem; line-height: 1; color: var(--primary-100); pointer-events: none; } .quote-card > * { position: relative; } /* Dropdown menus rise in gently. The desktop flyout is centered with translateX(-50%), so its keyframes must carry that through; the in-flow mobile menu gets a plain fade instead. */ @keyframes menu-in { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes menu-in-static { from { opacity: 0; } to { opacity: 1; } } .nav-drop.open .nav-menu, .nav-drop:hover .nav-menu { animation: menu-in .16s ease-out; } @media (max-width: 880px) { .nav-drop.open .nav-menu, .nav-drop:hover .nav-menu { animation-name: menu-in-static; } } /* --- 404 ----------------------------------------------------------------- */ .error-code { font-family: var(--display); font-size: clamp(5rem, 14vw, 9rem); line-height: 1; background: linear-gradient(135deg, var(--primary-500), var(--accent-500)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 .5rem; } /* --- utilities ---------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; background: var(--primary-700); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 var(--radius) 0; z-index: 100; } .skip-link:focus { left: 0; top: 0; color: #fff; } .trademark { font-size: .62em; vertical-align: super; letter-spacing: 0; }