/* ========================================================================== Ace Collectiv: Ecstatic Dance DJ & Facilitator Training style.css · Design system (cream canvas + vibrant mint pop) -------------------------------------------------------------------------- Tailwind loads via the Play CDN, so its colour/font tokens live in the tailwind.config object in index.html's and MIRROR the variables below. This file is the visual source of truth. Linked AFTER Tailwind. ========================================================================== */ :root { /* Surface */ --cream: #F7F1E3; --cream-soft: #FBF7EE; --card: #FFFFFF; /* Type */ --ink: #1A1E21; --ink-70: rgba(26, 30, 33, 0.70); --ink-58: rgba(26, 30, 33, 0.58); --ink-42: rgba(26, 30, 33, 0.42); /* Accent: vibrant mint pop + readable teal for text */ --mint: #84E1D4; --mint-soft: #A1F3E6; --teal: #0E9A8E; /* readable mint-teal for text on light */ --teal-deep: #0C7F75; /* Lines & glow */ --line: rgba(26, 30, 33, 0.06); --line-strong: rgba(26, 30, 33, 0.14); --glow-mint: rgba(132, 225, 212, 0.55); --glow: rgba(132, 225, 212, 0.30); /* Rhythm */ --nav-h: 76px; --wrap: 72rem; --radius: 18px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } html, body { overflow-x: hidden; max-width: 100%; } body { margin: 0; background-color: var(--cream); background-image: radial-gradient(120% 80% at 80% -10%, var(--cream-soft), var(--cream) 60%); color: var(--ink-70); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--mint); color: var(--ink); } a { color: inherit; text-decoration: none; } /* Responsive media: never overflow their container, keep aspect ratio */ img { display: block; max-width: 100%; height: auto; } svg, video, iframe { max-width: 100%; } [x-cloak] { display: none !important; } :focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 6px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--mint); color: var(--ink); padding: 0.6rem 1.25rem; border-radius: 9999px; font-weight: 600; font-size: 0.85rem; } .skip-link:focus { left: 1rem; top: 1rem; } /* ---------- Layout helpers ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.5rem; } .measure { max-width: 42rem; margin-inline: auto; } .measure-wide { max-width: 52rem; margin-inline: auto; } .section { padding-block: clamp(2.75rem, 5vw, 4rem); } .section--tight{ padding-block: clamp(2.75rem, 5vw, 4rem); } .section > *, .hero > * { position: relative; z-index: 1; } /* ---------- Type scale ---------- */ .t-eyebrow { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--teal); font-weight: 600; } .t-display { font-family: "Aboreto", serif; font-weight: 400; font-size: clamp(2.75rem, 7.5vw, 5.5rem); line-height: 1.03; letter-spacing: 0.03em; color: var(--ink); } .t-h2 { font-family: "Aboreto", serif; font-weight: 400; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; letter-spacing: 0.03em; color: var(--ink); } .t-h3 { font-family: "Aboreto", serif; font-weight: 400; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--ink); } .t-lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; color: var(--ink-58); } .t-meta { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--ink-42); } .t-teal { color: var(--teal); } h1, h2, h3, .t-display, .t-h2, .t-h3 { text-wrap: balance; } p, .t-lead { text-wrap: pretty; } /* ---------- Ambient glows ---------- */ .glow { position: absolute; z-index: 0; pointer-events: none; border-radius: 9999px; filter: blur(90px); } .glow--lg { width: 620px; height: 620px; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: 0.7; } .glow--sm { width: 360px; height: 360px; background: radial-gradient(circle, var(--glow), transparent 65%); opacity: 0.6; } /* ---------- Glass / pods ---------- */ .glass { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px -28px rgba(26, 30, 33, 0.4); } /* ---------- Nav ---------- */ /* ---------- Nav (mobile-first; hamburger < 768px, inline links >= 768px) ---------- */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav--solid { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 6px 24px -20px rgba(26,30,33,0.5); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; } .nav__logo { width: 2.25rem; height: 2.25rem; border-radius: 9999px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); } .nav__wordmark { display: none; font-family: "Aboreto", serif; font-size: 0.875rem; letter-spacing: 0.16em; color: var(--ink); } .nav__right { display: flex; align-items: center; gap: 0.5rem; } /* Desktop link row: hidden on mobile, flex from tablet up */ .nav__links { display: none; } .nav__link { display: inline-flex; align-items: center; min-height: 2.75rem; /* 44px touch target */ font-size: 0.9rem; color: var(--ink-58); transition: color 0.25s var(--ease); } .nav__link:hover { color: var(--teal); } /* Desktop CTA pill: shown from tablet up (on mobile it lives in the panel) */ .nav__cta { display: none; } /* Hamburger button (mobile only) */ .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; } .nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after { content: ""; display: block; position: relative; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease), top 0.3s var(--ease), background 0.2s var(--ease); } .nav__toggle-bar::before { position: absolute; left: 0; top: -7px; } .nav__toggle-bar::after { position: absolute; left: 0; top: 7px; } .nav__toggle.is-open .nav__toggle-bar { background: transparent; } .nav__toggle.is-open .nav__toggle-bar::before { top: 0; transform: rotate(45deg); } .nav__toggle.is-open .nav__toggle-bar::after { top: 0; transform: rotate(-45deg); } /* Mobile dropdown panel */ .nav__mobile { position: absolute; inset-inline: 0; top: 100%; display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.5rem 1.5rem; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); box-shadow: 0 24px 44px -26px rgba(26,30,33,0.45); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } .nav__mobile.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .nav__mobile-link { display: flex; align-items: center; min-height: 48px; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); } .nav__mobile-link:hover { color: var(--teal); } .nav__mobile-cta { width: 100%; margin-top: 0.85rem; } /* >= 480px: room for the wordmark */ @media (min-width: 480px) { .nav__wordmark { display: block; } } /* >= 768px (tablet): inline links, hide hamburger + panel */ @media (min-width: 768px) { .nav__links { display: flex; align-items: center; gap: 1.75rem; } .nav__cta { display: inline-flex; } .nav__toggle, .nav__mobile { display: none; } } /* ---------- Buttons (shared base → identical size; mint pop primary) ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 3.25rem; min-width: 13.5rem; padding-inline: 2rem; border-radius: 9999px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; border: 1px solid transparent; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), letter-spacing 0.3s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); } .btn--primary { background: var(--mint); color: var(--ink); box-shadow: 0 10px 30px -12px var(--glow-mint); } .btn--primary:hover { background: var(--mint-soft); transform: translateY(-2px); box-shadow: 0 0 34px var(--glow-mint); letter-spacing: 0.07em; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); transform: translateY(-2px); } .btn--sm { height: 2.75rem; min-width: 0; padding-inline: 1.25rem; font-size: 0.85rem; letter-spacing: 0.02em; } .btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* Mobile-first CTA pair: stacked + full-width on phones, side-by-side from 480px */ .cta-row { display: flex; flex-direction: column; gap: 1rem; } .cta-row .btn { width: 100%; } @media (min-width: 480px) { .cta-row { flex-direction: row; flex-wrap: wrap; } .cta-row .btn { width: auto; } } /* ---------- Video: cinema canvas (hover scale + mint glow) ---------- */ .video-canvas { padding: 10px; border-radius: 26px; background: linear-gradient(160deg, rgba(132, 225, 212, 0.22), rgba(255, 255, 255, 0.6)); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(26, 30, 33, 0.4); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .video-canvas:hover { transform: scale(1.012); box-shadow: 0 0 60px var(--glow-mint), 0 30px 80px -40px rgba(26,30,33,0.4); } .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px; background: #000; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Full-width welcome video (edge to edge) */ .video-canvas--full { max-width: none; padding: 0; border-radius: 0; border-left: 0; border-right: 0; } .video-canvas--full .video-frame { border-radius: 0; } .video-canvas--full:hover { transform: none; } /* ---------- Accordion (FAQ) ---------- */ .acc { cursor: pointer; border-radius: var(--radius); padding: 1.25rem 1.4rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -26px rgba(26,30,33,0.45); transition: border-color 0.3s var(--ease), background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .acc:hover { border-color: rgba(14, 154, 142, 0.5); transform: translateY(-2px); box-shadow: 0 16px 34px -24px rgba(14, 127, 117, 0.45); } .acc--open { border-color: var(--mint); background: rgba(132, 225, 212, 0.08); } .acc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .acc__plus { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--teal); transition: transform 0.3s var(--ease); } .acc--open .acc__plus { transform: rotate(45deg); } .acc__plus--open { transform: rotate(45deg); } .acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); } .acc--open .acc__body { grid-template-rows: 1fr; } .acc__body > div { overflow: hidden; } .acc__list { margin: 0.5rem 0 0; padding: 0; list-style: none; } .acc__list li { display: flex; gap: 0.625rem; padding-top: 0.5rem; font-size: 0.875rem; color: var(--ink-58); } .acc__list li::before { content: ""; flex: 0 0 auto; width: 5px; height: 5px; margin-top: 0.5rem; border-radius: 9999px; background: var(--mint); box-shadow: 0 0 8px var(--glow-mint); } /* ---------- Segmented selector ---------- */ .seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; padding: 0.4rem; border-radius: 9999px; background: var(--card); border: 1px solid var(--line); } .seg__btn { border: 0; cursor: pointer; padding: 0.6rem 1.2rem; border-radius: 9999px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink-58); background: transparent; transition: color 0.25s var(--ease), background 0.25s var(--ease); } .seg__btn:hover { color: var(--teal-deep); } .seg__btn--on { color: var(--ink); background: var(--mint); } /* ---------- Schedule timeline + filter pills ---------- */ .filter-pill { display: inline-flex; align-items: center; min-height: 2.75rem; /* 44px touch target */ border: 1px solid var(--line-strong); background: #fff; color: var(--ink-58); border-radius: 9999px; padding: 0.5rem 1.125rem; font-size: 0.8125rem; cursor: pointer; transition: all 0.25s var(--ease); } .filter-pill:hover { color: var(--teal-deep); border-color: var(--teal); } .filter-pill--on { color: var(--ink); border-color: transparent; font-weight: 600; background: var(--mint); box-shadow: 0 8px 22px -12px var(--glow-mint); } .timeline { position: relative; margin: 0 0 0 8px; padding: 0 0 0 30px; list-style: none; } .timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--mint), rgba(132, 225, 212, 0.15)); } .timeline__item { position: relative; padding-bottom: 1.375rem; } .timeline__node { position: absolute; left: -30px; top: 6px; width: 13px; height: 13px; border-radius: 9999px; background: var(--cream); border: 3px solid var(--mint); box-shadow: 0 0 14px var(--glow-mint); } .timeline__node--accent { background: var(--mint); } .timeline__card { border-radius: 14px; padding: 1rem 1.125rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -26px rgba(26,30,33,0.45); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .timeline__card:hover { border-color: var(--mint); transform: translateX(3px); } .timeline__card[role="button"] { cursor: pointer; } .timeline__card[aria-expanded="true"] { border-color: var(--mint); background: rgba(132,225,212,0.07); } .timeline__card, .timeline__card h3, .timeline__card span, .timeline__card p { overflow-wrap: break-word; } /* Tighter rail + cards on narrow phones so the 8 modules read comfortably */ @media (max-width: 480px) { .timeline { margin-left: 2px; padding-left: 22px; } .timeline::before { left: 4px; } .timeline__node { left: -22px; width: 11px; height: 11px; } .timeline__card { padding: 0.85rem 0.95rem; } } /* ---------- Kit cards ---------- */ .kit-card { text-align: center; border-radius: 16px; padding: 1.4rem 1.125rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -26px rgba(26,30,33,0.45); font-size: 0.875rem; color: var(--ink-70); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .kit-card:hover { border-color: var(--mint); transform: translateY(-3px); box-shadow: 0 16px 34px -22px var(--glow-mint); } .kit-card__icon { display: block; font-size: 1.6rem; color: var(--teal); margin-bottom: 0.625rem; } .kit-card__img { display: block; height: 2.9rem; width: auto; max-width: 70%; margin: 0 auto 0.75rem; object-fit: contain; } /* ---------- Value list (what you'll receive) ---------- */ .tick { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--mint); color: var(--ink); font-size: 0.75rem; font-weight: 700; box-shadow: 0 0 12px var(--glow-mint); } .divider-mark { text-align: center; color: var(--teal); font-size: 1.05rem; letter-spacing: 0.4em; } /* ---------- Hero (centred, no photo) ---------- */ .hero__content { max-width: 46rem; margin-inline: auto; text-align: center; } .hero__content .cta-row { align-items: center; justify-content: center; } /* ---------- Photo banner bands (full-bleed, zoom on hover) ---------- */ .banner { position: relative; width: 100%; height: clamp(220px, 38vw, 460px); overflow: hidden; } /* Full-height feature band (keeps Osara's face in frame) */ .banner--tall { height: clamp(440px, 84vh, 840px); } .banner--tall .banner__img { object-position: 24% center; } .banner__img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 0.9s var(--ease); } .banner:hover .banner__img { transform: scale(1.06); } .banner__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(26,30,33,0) 45%, rgba(26,30,33,0.18)); transition: opacity 0.5s var(--ease); } .banner:hover .banner__overlay { opacity: 1; } /* Soft cream blend so the bands melt into the page top and bottom */ .banner::before, .banner::after { content: ""; position: absolute; left: 0; right: 0; height: 56px; z-index: 1; pointer-events: none; } .banner::before { top: 0; background: linear-gradient(var(--cream), transparent); } .banner::after { bottom: 0; background: linear-gradient(transparent, var(--cream)); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .price-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.75rem; box-shadow: 0 10px 30px -26px rgba(26,30,33,0.45); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); } .price-card:hover { transform: translateY(-3px); border-color: rgba(132,225,212,0.6); box-shadow: 0 16px 36px -24px var(--glow-mint); } .price-card--featured { border-color: var(--mint); box-shadow: 0 20px 50px -28px var(--glow-mint); } .price-badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--mint); color: var(--ink); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.32rem 0.85rem; border-radius: 9999px; box-shadow: 0 0 16px var(--glow-mint); } .price-name { font-family: "Aboreto", serif; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--ink); } .price-desc { margin-top: 0.25rem; font-size: 0.8rem; color: var(--ink-42); } .price-amount { margin-top: 0.7rem; font-size: 2.25rem; font-weight: 700; line-height: 1; color: var(--ink); } .price-sub { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--teal); } .price-note { margin-top: 0.15rem; font-size: 0.78rem; color: var(--ink-42); } .price-list { list-style: none; margin: 1.3rem 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto; } .price-list li { display: flex; gap: 0.55rem; font-size: 0.85rem; line-height: 1.4; color: var(--ink-70); } .price-list li::before { content: "\2713"; flex: 0 0 auto; color: var(--teal); font-weight: 700; } /* ---------- 1:1 Mentorship card ---------- */ .mentor-card { max-width: 48rem; border-radius: 26px; padding: clamp(1.9rem, 4vw, 3rem); text-align: center; } .mentor-card__name { font-family: "Aboreto", serif; font-size: 1.3rem; letter-spacing: 0.06em; color: var(--ink); } .mentor-card__price { margin-top: 0.5rem; font-size: clamp(2.4rem, 5vw, 3rem); font-weight: 700; line-height: 1; color: var(--ink); } .mentor-card__sub { margin-top: 0.55rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--teal); } .mentor-card__rule { height: 1px; background: var(--line-strong); margin: clamp(1.5rem,3.4vw,2.1rem) auto; max-width: 20rem; } .mentor-grid { display: grid; grid-template-columns: 1fr; gap: 1rem 2.75rem; text-align: left; max-width: 32rem; margin: 0 auto; } @media (min-width: 560px) { .mentor-grid { grid-template-columns: 1fr 1fr; } } .mentor-row { display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--line); } .mentor-row--wide { grid-column: 1 / -1; } .mentor-row__label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-42); } .mentor-row__value { font-size: 0.95rem; color: var(--ink); font-weight: 600; } .mentor-card__cta { margin-top: clamp(1.85rem,4vw,2.4rem); } .price-card .btn { width: 100%; min-width: 0; } /* ---------- Registration ---------- */ .form-shell { box-shadow: 0 30px 90px -44px rgba(14, 127, 117, 0.4); } .form-shell iframe { display: block; width: 100%; background: #fff; border: 0; border-radius: 1rem; } .ribbon { margin-top: 1.375rem; text-align: center; border-radius: 9999px; padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; color: var(--ink); background: linear-gradient(90deg, var(--mint), var(--mint-soft)); box-shadow: 0 10px 30px -12px var(--glow-mint); } /* ---------- Badge + dot ---------- */ .badge { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.6); border-radius: 9999px; padding: 0.375rem 1rem; font-size: 0.75rem; letter-spacing: 0.2em; color: var(--teal); } .dot { width: 6px; height: 6px; border-radius: 9999px; background: var(--mint); box-shadow: 0 0 10px var(--glow-mint); } .dot--pulse { animation: pulse 2s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---------- Testimonials (masonry) ---------- */ .testimonials { columns: 1; column-gap: 1.25rem; } @media (min-width: 640px) { .testimonials { columns: 2; } } @media (min-width: 1024px) { .testimonials { columns: 3; } } .testimonial { break-inside: avoid; margin-bottom: 1.25rem; border-radius: var(--radius); padding: 1.5rem 1.6rem; background: var(--card); border: 1px solid var(--line); box-shadow: 0 10px 30px -26px rgba(26, 30, 33, 0.45); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .testimonial:hover { border-color: var(--mint); transform: translateY(-2px); box-shadow: 0 16px 34px -24px var(--glow-mint); } .testimonial__quote { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ink-70); } .testimonial__author { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.1rem; } .testimonial__avatar { width: 5.5rem; height: 5.5rem; border-radius: 9999px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); } .testimonial__initial { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--mint); color: var(--ink); font-family: "Aboreto", serif; font-size: 1.05rem; box-shadow: 0 0 14px var(--glow-mint); } .testimonial__name { font-weight: 600; color: var(--ink); font-size: 0.875rem; line-height: 1.3; } .testimonial__role { font-size: 0.75rem; color: var(--ink-42); line-height: 1.35; } /* ---------- Featured-at logo strip ---------- */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem 3rem; } .logo-mark { height: clamp(3.5rem, 11vw, 6.5rem); width: auto; opacity: 0.6; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .logo-mark:hover { opacity: 1; transform: translateY(-2px); } /* ---------- Footer ---------- */ .footer { border-top: 1px solid var(--line); padding-block: 3rem; } /* ---------- Scroll reveal ---------- */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } /* ---------- Responsive + motion ---------- */ /* >= 1440px (large desktops): slightly wider content rail to use the space */ @media (min-width: 1440px) { :root { --wrap: 76rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } .dot--pulse { animation: none; } .btn, .acc, .kit-card, .timeline__card, .video-canvas { transition: none; } .banner__img { transition: none; } .banner:hover .banner__img { transform: none; } }