/* ========================================================================= shreebose.com — design tokens, reset, base typography, layout primitives ========================================================================= */ :root { /* Colors */ --c-white: #ffffff; --c-black: #000000; --c-ink: #3a3a3a; --c-ink-muted: #6b6b6b; --c-bg: #ffffff; --c-bg-soft: #f3f3f3; --c-header: #f8f8f8; --c-bg-band: #eaeaea; --c-piper-blue: #1e2bb6; --c-overlay-dark: rgba(0, 0, 0, 0.35); /* Typography — matches live Wix: Montserrat 700 for display/headings, Roboto 100 for body. */ --ff-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --ff-body: "Roboto", "Helvetica Neue", Arial, sans-serif; --ff-nav: "Montserrat", "Helvetica Neue", Arial, sans-serif; --fs-hero: clamp(2.3rem, 7vw, 5.875rem); /* 37 → 94px */ --fs-h1: clamp(1.5rem, 3.5vw, 3.125rem); /* 24 → 50px */ --fs-h1-md: clamp(1.25rem, 2.6vw, 2.1875rem); /* 20 → 35px */ --fs-h2: clamp(1rem, 1.5vw, 1.3125rem); /* 16 → 21px */ --fs-body: clamp(1rem, 1.1vw, 1.0625rem); /* 16 → 17px */ --fs-meta: clamp(0.875rem, 1vw, 0.9375rem); /* 14 → 15px */ --fs-caption: 0.75rem; /* 12px */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.5; /* Spacing scale (rem) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Layout */ --w-content: 1200px; --header-h: 106px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 10px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 150ms; --dur-slow: 300ms; } /* ========================================================================= Reset ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; } a { color: inherit; text-decoration: none; } a:hover { color: inherit; } h1, h2, h3, h4, h5, h6, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--c-piper-blue); outline-offset: 3px; } /* Scroll-triggered reveal: sections with [data-reveal] fade up as they enter the viewport. nav.js toggles .is-visible. Reduced-motion users skip the animation entirely. */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } } /* On-load entrance fade, mirroring the Wix site's load animation: a clean opacity fade. The logo (.brand-mark) and the name (.hero-title) appear immediately; everything else around them fades in — the header tagline + nav, and the hero's credit/sub/social. The inline script adds `.preload` to before first paint so these start hidden; nav.js removes it on load to run the fade. */ /* The title is held hidden (no transition, so it pops in instantly) only until its web font has loaded — nav.js gates the reveal on document.fonts. This stops the brief flash where "Shree Bose" renders in the Arial fallback then swaps to Montserrat. It appears in the correct font from its very first paint. */ .preload .hero-title { opacity: 0; } .brand-tag, .primary-nav, .nav-toggle, .hero-credit, .hero-sub, .hero-social, .press-hero-content { transition: opacity 0.85s var(--ease); } .hero-credit, .hero-sub, .hero-social, .press-hero-content { transition-delay: 0.12s; } .preload .brand-tag, .preload .primary-nav, .preload .nav-toggle, .preload .hero-credit, .preload .hero-sub, .preload .hero-social, .preload .press-hero-content { opacity: 0; } @media (prefers-reduced-motion: reduce) { .brand-tag, .primary-nav, .nav-toggle, .hero-credit, .hero-sub, .hero-social, .press-hero-content { transition: none; } .preload .brand-tag, .preload .primary-nav, .preload .nav-toggle, .preload .hero-credit, .preload .hero-sub, .preload .hero-social, .preload .press-hero-content, .preload .hero-title { opacity: 1; } } /* ========================================================================= Typography helpers ========================================================================= */ .h-display { font-family: var(--ff-display); font-weight: 700; line-height: var(--lh-tight); } .h-section { font-family: var(--ff-display); font-weight: 700; line-height: var(--lh-tight); font-size: var(--fs-h1); color: inherit; text-transform: uppercase; letter-spacing: 0.005em; } .h-meta { font-family: var(--ff-body); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-snug); } .text-body { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); } .text-caption { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--c-ink-muted); } .text-on-dark { color: var(--c-white); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .text-center { text-align: center; } /* Skip link: off-screen until focused, then pinned to the top-left so keyboard users can jump past the header into
. */ .skip-link { position: absolute; left: var(--sp-3); top: -100%; z-index: 100; padding: var(--sp-2) var(--sp-4); background: var(--c-black); color: var(--c-white); font-family: var(--ff-nav); text-decoration: none; } .skip-link:focus { top: var(--sp-3); } /* ========================================================================= Layout primitives ========================================================================= */ .page { background: var(--c-white); } .container { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--sp-5); } @media (min-width: 768px) { .container { padding-inline: var(--sp-6); } } @media (min-width: 1024px) { .container { padding-inline: var(--sp-7); } } .section { padding-block: clamp(72px, 7vw, 128px); } .bg-soft { background: var(--c-bg-soft); color: var(--c-ink); } .bg-band { background: var(--c-bg-band); color: var(--c-ink); } .bg-dark { background: var(--c-black); color: var(--c-white); } .bg-piper { background: var(--c-piper-blue); color: var(--c-white); } .divider { inline-size: 60px; block-size: 2px; background: currentColor; margin-block: var(--sp-3) var(--sp-5); border: 0; } .divider-center { margin-inline: auto; } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-3) var(--sp-6); font-family: var(--ff-nav); font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; background: var(--c-black); color: var(--c-white); border: 1px solid var(--c-black); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); cursor: pointer; } .btn:hover { background: var(--c-white); color: var(--c-black); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--c-black); } .btn-outline:hover { background: var(--c-black); color: var(--c-white); } /* ========================================================================= Social row ========================================================================= */ .social { display: flex; gap: 1.25rem; align-items: center; } .social a { display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .social a:hover { transform: translateY(-2px); opacity: 0.85; } .social .icon { inline-size: 40px; block-size: 40px; display: block; fill: currentColor; } /* ========================================================================= Header / nav ========================================================================= */ .site-header { position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) var(--sp-5); background: var(--c-header); min-block-size: var(--header-h); } @media (min-width: 768px) { .site-header { padding-inline: var(--sp-7); } } @media (min-width: 1200px) { .site-header { /* Center header content within a sensible max-width once viewport exceeds the content track. */ padding-inline: max(var(--sp-7), calc((100vw - var(--w-content)) / 2 + var(--sp-6))); } } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); } .brand-mark { display: block; inline-size: 72px; block-size: 72px; } .brand-tag { display: flex; flex-direction: column; font-family: var(--ff-nav); font-size: 0.9375rem; /* 15px to match Wix */ font-weight: 700; letter-spacing: normal; /* Wix uses default tracking here */ text-transform: uppercase; line-height: 1.2; color: var(--c-ink); } .primary-nav { display: flex; align-items: center; gap: var(--sp-6); font-family: var(--ff-nav); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; } .primary-nav a { color: var(--c-black); padding-block: var(--sp-2); border-bottom: 2px solid transparent; transition: border-color var(--dur-fast) var(--ease); } .primary-nav a:hover { border-bottom-color: var(--c-black); } /* Mobile nav toggle (hamburger) */ .nav-toggle { display: none; inline-size: 44px; block-size: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--c-black); border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle-bar { inline-size: 22px; block-size: 2px; background: var(--c-white); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } @media (max-width: 767px) { .brand-tag { font-size: 0.8125rem; } .brand-mark { inline-size: 56px; block-size: 56px; } .nav-toggle { display: inline-flex; } .primary-nav { display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--c-white); padding: var(--sp-5); border-block-end: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); z-index: 40; } .primary-nav[data-open="true"] { display: flex; } .primary-nav a { padding-block: var(--sp-4); border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .primary-nav a:last-child { border-bottom: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ========================================================================= Hero ========================================================================= */ .hero { position: relative; min-block-size: clamp(620px, 63vw, 920px); isolation: isolate; display: flex; align-items: center; color: var(--c-white); overflow: hidden; } .hero-bg, .hero-bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -1; } .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 28, 0.30) 0%, rgba(6, 10, 28, 0.12) 35%, rgba(6, 10, 28, 0) 58%); z-index: 1; } .hero-bg img { position: relative; z-index: 0; } .hero-content { position: relative; z-index: 2; padding-block: var(--sp-5) var(--sp-10); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); } .hero-credit { font-family: var(--ff-nav); font-weight: 400; font-size: clamp(1rem, 1.25vw, 1.125rem); /* 16 → 18px */ letter-spacing: normal; /* Wix uses default tracking here */ text-transform: uppercase; line-height: 1.25; color: var(--c-white); } .hero-title { font-family: var(--ff-display); font-size: var(--fs-hero); font-weight: 700; letter-spacing: 0; text-transform: uppercase; margin: 0; color: var(--c-white); } .hero-sub { font-family: var(--ff-nav); font-weight: 700; font-size: clamp(1.125rem, 1.46vw, 1.3125rem); /* 18 → 21px */ letter-spacing: normal; /* Wix uses default tracking here */ text-transform: uppercase; line-height: 1.25; color: var(--c-white); } .hero-social { margin-block-start: var(--sp-3); } /* ========================================================================= About ========================================================================= */ .about-grid { display: grid; gap: var(--sp-6); align-items: center; } @media (min-width: 768px) { .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); } /* Photo column breaks out of the container's left padding so the image runs flush to the page edge. */ .about-photo { margin-inline-start: calc(var(--sp-6) * -1); } } @media (min-width: 1024px) { .about-photo { margin-inline-start: calc(var(--sp-7) * -1); } } .about-photo img { inline-size: 100%; aspect-ratio: 2/3; object-fit: cover; } .about .h-section { color: #2f2e2e; letter-spacing: 0; } .about .divider { background: #000; block-size: 3px; margin-inline: 0; } .about-copy p { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-body); color: var(--c-ink); margin-block: 0 var(--sp-4); } .about-copy p a { color: var(--c-ink); border-bottom: 0; } .about-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); } .about-actions .btn { background: #282626; border-color: #282626; color: var(--c-white); border-radius: 0; font-weight: 400; letter-spacing: 0.05em; font-size: 0.9375rem; line-height: 1.2; padding-block: 14px; inline-size: 236px; } .about-actions .btn:hover { background: var(--c-white); color: #282626; border-color: #282626; } /* About-page highlights grid (about.html) */ .about-highlights { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-block-start: var(--sp-7); } @media (min-width: 768px) { .about-highlights { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } } .about-highlights > li { background: var(--c-white); padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } @media (min-width: 768px) { .about-highlights > li { padding: var(--sp-7) var(--sp-6); } } .highlight-year { font-family: var(--ff-nav); font-weight: 700; font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-muted); } .highlight-title { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-h2); text-transform: uppercase; letter-spacing: 0.005em; color: var(--c-black); line-height: var(--lh-snug); } .highlight-body { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); flex: 1 1 auto; } .about-highlights > li .btn { align-self: flex-start; margin-block-start: var(--sp-2); } /* About-page contact CTA */ .about-cta { text-align: center; } .about-cta .divider { margin-inline: auto; } .about-cta-body { font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-body); max-inline-size: 60ch; margin-inline: auto; margin-block: var(--sp-3) var(--sp-6); } .about-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } /* ========================================================================= As Seen In ========================================================================= */ .as-seen-in { padding-block: var(--sp-6); } /* Wider than the standard 1200px container — the Wix band's content runs edge to edge with ~72px gutters at 1440 and logos large enough to pack the row tightly. Box is sized so centering + padding lands the content at ~x72. */ .as-seen-in .container { max-width: 1344px; padding-inline: var(--sp-5); } .as-seen-row { display: grid; gap: var(--sp-5); align-items: center; } @media (min-width: 768px) { .as-seen-row { grid-template-columns: max-content auto minmax(0, 1fr); gap: var(--sp-5); } } .as-seen-label h2 { font-size: var(--fs-h1-md); color: var(--c-black); } .as-seen-label .text-caption { margin-block-start: var(--sp-2); max-inline-size: 22ch; font-size: var(--fs-body); color: var(--c-ink); } /* Thin vertical rule separating the label from the logos (desktop only). */ .as-seen-divider { display: none; inline-size: 1px; block-size: 88px; align-self: center; background: var(--c-ink); } @media (min-width: 768px) { .as-seen-divider { display: block; } } .as-seen-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); } .as-seen-logos li { display: flex; align-items: center; } .as-seen-logos a { position: relative; display: inline-flex; } .as-seen-logos img { max-block-size: 72px; max-inline-size: 160px; inline-size: auto; opacity: 1; transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); } /* Plain glyph logos darken to black on hover (matches the Wix crossfade). */ .as-seen-logos a:not(.logo-swap):hover img { filter: brightness(0); } /* Inverted (white-knockout) logos — NPR, BBC — can't use brightness(0) without blacking out their white letters, so crossfade to the hand-made dark variant. */ .as-seen-logos .logo-swap .logo-hover { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .as-seen-logos .logo-swap .logo-hover img { block-size: 100%; inline-size: 100%; max-block-size: none; max-inline-size: none; } /* Fade only the (opaque) hover image in on top — the default stays at full opacity underneath so the band never shows through mid-transition (no flash). */ .as-seen-logos .logo-swap:hover .logo-hover { opacity: 1; } /* ========================================================================= Overlay sections (Microsoft Ad, STEM Advocacy) ========================================================================= */ .overlay-section { position: relative; isolation: isolate; /* Height tracks viewport width so the full-bleed `cover` background keeps the subject's framing (head no longer cropped) as the window resizes. Kept close to the Wix original (~750px at desktop) so the card isn't lost in a tall frame. */ min-block-size: clamp(480px, 52vw, 740px); display: grid; align-items: center; padding: clamp(40px, 6vw, 96px) clamp(20px, 5vw, 96px); } .overlay-bg, .overlay-bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -1; } .overlay-card { position: relative; z-index: 1; background: var(--c-white); color: var(--c-ink); padding: clamp(28px, 3vw, 56px) clamp(32px, 4vw, 72px); max-inline-size: 540px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); /* Soft shadow lifts the white card off the lighter parts of the photo (e.g. the bright window) so its edges stay defined regardless of what sits behind it. */ box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.35); } .overlay-card h2 { font-size: var(--fs-h1-md); color: var(--c-black); } /* Snugger than the global body leading: inside the narrow card the wide gaps read as awkward, and the Wix original sets these lines tighter (~1.45). */ .overlay-card p { font-weight: 400; font-size: var(--fs-body); line-height: 1.45; } .overlay-card .btn { align-self: center; margin-block-start: var(--sp-3); } /* Nudge the left-anchored card inward so it clears the bright window at the frame edge. */ .overlay-card--bottom-left { justify-self: start; align-self: center; margin-inline-start: clamp(0px, 2.5vw, 48px); } .overlay-card--right { justify-self: end; align-self: center; margin-inline-end: clamp(0px, 2.5vw, 48px); } /* Overlay sections opt out of the section-wide fade-up: the background photo stays put (matching the Wix original) and only the card fades + slides in on reveal. */ .overlay-section[data-reveal] { opacity: 1; transform: none; } .overlay-card { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .overlay-card--right { transform: translateX(40px); } .overlay-section.is-visible .overlay-card { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .overlay-card { opacity: 1; transform: none; transition: none; } } /* ========================================================================= Speeches mosaic ========================================================================= */ .speeches { padding-block: clamp(72px, 7vw, 128px); } .speeches-grid { display: grid; gap: var(--sp-7); } @media (min-width: 1024px) { .speeches-grid { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); align-items: stretch; } } .speeches-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; } @media (min-width: 768px) { .speeches-mosaic { grid-template-columns: repeat(7, 1fr); } } @media (min-width: 1024px) { .speeches-mosaic { grid-template-columns: repeat(9, 1fr); } } .speeches-caption { display: flex; flex-direction: column; gap: 0.25em; text-align: start; color: #000; min-block-size: 4em; margin-block: var(--sp-4) 0; } .speeches-caption-title { font-family: var(--ff-display); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; } .speeches-caption-subtitle { font-family: var(--ff-body); font-weight: 300; font-size: 1rem; line-height: 1.4; } .speeches-mosaic li { aspect-ratio: 84 / 115; } .speeches-mosaic a, .speeches-mosaic .speech-tile, .speeches-mosaic picture, .speeches-mosaic img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .speeches-mosaic a, .speeches-mosaic .speech-tile { position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease); } .speeches-mosaic a::after, .speeches-mosaic .speech-tile::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background var(--dur-fast) var(--ease); } .speeches-mosaic a:hover, .speeches-mosaic .speech-tile:hover { transform: scale(1.04); z-index: 1; } .speeches-mosaic a:hover::after, .speeches-mosaic .speech-tile:hover::after { background: rgba(0, 0, 0, 0.18); } .speeches-copy h2 { color: var(--c-black); } .speeches-copy p { margin-block: 0 var(--sp-4); font-weight: 400; } .speeches-copy p a { color: var(--c-black); border-bottom: 1px solid currentColor; } @media (min-width: 1024px) { .speeches-copy { padding-inline-start: var(--sp-6); border-inline-start: 3px solid #000; } } /* ========================================================================= Famous Faces ========================================================================= */ .famous-intro { max-inline-size: 60ch; margin-inline: auto; margin-block: var(--sp-3) var(--sp-7); } .famous-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } @media (min-width: 768px) { .famous-grid { grid-template-columns: repeat(3, 1fr); } } .famous-tile { display: flex; flex-direction: column; gap: var(--sp-3); } .famous-tile picture, .famous-tile img { inline-size: 100%; aspect-ratio: 5/2; object-fit: cover; } /* Lisa Ling is a tall 4:3 stage photo; anchor its cover-crop to the top so heads aren't cut off. Video-poster tiles stay centered to hide letterboxing. */ .famous-tile--top img { object-position: center top; } .famous-caption { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-meta); text-align: center; color: var(--c-black); line-height: 1.4; } .famous-caption span { display: inline-block; margin-block-start: var(--sp-1); font-weight: 400; font-size: var(--fs-caption); color: var(--c-ink-muted); } .famous-video { position: relative; display: block; overflow: hidden; } .famous-video img { transition: transform var(--dur-slow) var(--ease); } .famous-video:hover img { transform: scale(1.04); } .play-badge { position: absolute; inset: 0; margin: auto; inline-size: 68px; block-size: 68px; border-radius: 50%; background: rgba(204, 0, 0, 0.92); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.85); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .famous-video:hover .play-badge { background: rgba(255, 0, 0, 0.95); transform: scale(1.06); } .play-badge::after { content: ""; inline-size: 0; block-size: 0; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; transform: translateX(3px); } .famous-feature { margin-block: var(--sp-7) 0; max-inline-size: 640px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); } .famous-feature img { inline-size: 100%; block-size: auto; } .famous-feature figcaption { max-inline-size: 60ch; margin-inline: auto; } /* ========================================================================= Piper ========================================================================= */ .piper { padding-block: clamp(72px, 7vw, 128px); color: var(--c-white); } .piper-grid { display: grid; gap: var(--sp-6); align-items: stretch; } @media (min-width: 768px) { .piper-grid { grid-template-columns: minmax(0, 0.39fr) minmax(0, 0.61fr); gap: 0; } } .piper-card { background: var(--c-white); color: var(--c-ink); padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); border-radius: var(--radius-lg); } @media (min-width: 768px) { .piper-card { border-start-end-radius: 0; border-end-end-radius: 0; } } .piper-card h2 { color: var(--c-black); } .piper-role { align-self: flex-start; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--c-piper-blue); font-size: var(--fs-meta); padding: 0.4em 0.9em; border: 1px solid color-mix(in srgb, var(--c-piper-blue) 35%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c-piper-blue) 8%, transparent); } .piper-card p { font-weight: 400; } .piper-card .btn { align-self: flex-start; margin-block-start: var(--sp-3); } .piper-marketing { background: var(--c-white); display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-lg); } @media (min-width: 768px) { .piper-marketing { border-start-start-radius: 0; border-end-start-radius: 0; } } .piper-marketing img { inline-size: 100%; height: auto; } .piper-shop-row { display: grid; gap: var(--sp-5); margin-block-start: var(--sp-6); } @media (min-width: 768px) { .piper-shop-row { grid-template-columns: 1fr 1fr; } } .piper-shop { position: relative; display: block; background: var(--c-white); color: var(--c-ink); overflow: hidden; aspect-ratio: 16/9; border-radius: var(--radius-md); } .piper-shop img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .piper-shop:hover img { transform: scale(1.03); } .piper-shop-label { position: absolute; inset-block-start: var(--sp-4); inset-inline-start: var(--sp-4); background: var(--c-black); color: var(--c-white); padding: var(--sp-2) var(--sp-5); font-family: var(--ff-nav); font-size: var(--fs-meta); letter-spacing: 0.10em; text-transform: uppercase; } .piper-shop:nth-child(2) .piper-shop-label { inset-block-start: auto; inset-inline-start: auto; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); } /* ========================================================================= Footer ========================================================================= */ .site-footer { padding-block: var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); } .site-footer .copy { font-family: var(--ff-body); font-size: var(--fs-caption); color: rgba(255, 255, 255, 0.6); } /* ========================================================================= Press page ========================================================================= */ .press-hero { position: relative; isolation: isolate; min-block-size: clamp(320px, 50vh, 540px); display: flex; align-items: flex-end; color: var(--c-white); overflow: hidden; } .press-hero .hero-bg, .press-hero .hero-bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -1; } .press-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%); z-index: 1; } .press-hero-content { position: relative; z-index: 2; padding-block: var(--sp-7); } .press-hero-content .hero-credit { text-align: center; letter-spacing: 0.08em; } .press-logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-5); align-items: center; justify-items: center; margin-block-start: var(--sp-6); } .press-logo-row img { max-block-size: 110px; inline-size: auto; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .press-logo-row a img { opacity: 0.92; } .press-logo-row a:hover img { opacity: 1; transform: translateY(-2px); } .press-screenshots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); } @media (min-width: 1024px) { .press-screenshots { grid-template-columns: repeat(4, 1fr); } } .press-screenshots img { inline-size: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } /* Only one TV clip has a verified live video; it gets a link + play affordance. */ .tv-clip { position: relative; display: block; overflow: hidden; } .tv-clip img { transition: transform var(--dur-fast) var(--ease); } .tv-clip:hover img, .tv-clip:focus-visible img { transform: scale(1.04); } /* ---- Shared YouTube facade: thumbnail + play button that swaps to an iframe ---- */ .video-embed { position: relative; display: block; inline-size: 100%; aspect-ratio: 16/9; padding: 0; border: 0; background: var(--c-black); cursor: pointer; overflow: hidden; } .video-embed > picture, .video-embed > picture img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } /* Red YouTube-style play badge, used by facades and the linked TV clip. */ .tile-play { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%); inline-size: 64px; aspect-ratio: 1; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); transition: transform var(--dur-fast) var(--ease); pointer-events: none; } .tile-play--external { background: url("data:image/svg+xml;utf8,") center / contain no-repeat; inline-size: 48px; } :where(.broadcast-tile, .tv-clip, .video-embed):hover .tile-play, :where(.broadcast-tile, .tv-clip, .video-embed):focus-visible .tile-play { transform: translate(-50%, -50%) scale(1.12); } .press-broadcast { position: relative; isolation: isolate; padding-block: var(--sp-9); color: var(--c-white); background: var(--c-black); } .broadcast-bg, .broadcast-bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: -1; opacity: 0.55; } /* TEDx wordmark heading — mirrors the original Wix press band. Per TED's brand guide the TEDx wordmark is set in Inter (Light) at letter-spacing 0, "TEDx" in red #EB0028 (Pantone 185) — so this is the official wordmark, not an imitation. */ .tedx-title { margin: 0; line-height: 1; } .tedx-title-mark { font-family: Helvetica, "Inter", Arial, sans-serif; font-weight: 700; font-size: clamp(2.75rem, 8vw, 4.5rem); letter-spacing: 0; color: #EB0028; } /* The "x" in the TEDx wordmark is a smaller, raised, bold glyph (per the official lockup), not a full-size letter. */ .tedx-title-mark .tedx-x { font-size: 0.56em; vertical-align: 0.62em; } .tedx-tagline { margin-block-start: var(--sp-2); font-family: var(--ff-body); font-weight: 300; font-size: var(--fs-caption); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); } .broadcast-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); margin-block-start: var(--sp-6); } @media (min-width: 768px) { .broadcast-tiles { grid-template-columns: repeat(3, 1fr); } } /* Tiles are a video thumbnail (facade) above a caption. Works for both the