@times-components/ts-components 1.150.0 → 1.151.0

package/src/components/clarkson-says/components/styles.ts

@@ -0,0 +1,434 @@
+import styled, { keyframes } from 'styled-components';
+
+export const PageContainer = styled.div<{ isEmbeddedMode?: boolean }>`
+  display: grid;
+  place-items: center;
+  font-family: Roboto, sans-serif;
+  margin: 20px auto 0 auto;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  span {
+    margin: 0;
+    padding: 0;
+  }
+`;
+
+export const Card = styled.div<{ isApp?: boolean; embedded?: boolean }>`
+  position: relative;
+  width: 100%;
+  max-width: 680px;
+  margin: auto;
+  color: ${p => (p.isApp ? '#fff' : '#000')};
+  background-color: #fafafa;
+  ${p => !p.embedded && `max-width: 680px; margin: 0 auto;`};
+  @media (min-width: 769px) {
+    min-width: 680px;
+  }
+`;
+
+export const TopBar = styled.div<{ isApp?: boolean }>`
+  width: 100%;
+  height: 3px;
+  background: ${p => (p.isApp ? '#fff' : '#000')};
+`;
+
+export const Section = styled.div`
+  padding: 16px;
+  @media (min-width: 768px) {
+    padding: 32px;
+  }
+`;
+
+export const HeroRow = styled.div`
+  text-align: center;
+`;
+
+export const TitleGroup = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const TitleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 8px;
+`;
+
+export const H1 = styled.h1`
+  font-size: 32px;
+  font-family: Times Modern;
+  font-weight: 700;
+  line-height: 1.12;
+  color: #1a1a1a;
+`;
+
+export const H2 = styled.h2<{ isApp?: boolean }>`
+  font-size: 20px;
+  font-weight: 400;
+  font-family: Times Modern, sans-serif;
+  line-height: 1.12;
+  color: #737373;
+  padding: 0 16px;
+`;
+
+export const ArticlesHeading = styled.h3`
+  font-family: Times Modern;
+  font-size: 24px;
+  font-weight: 400;
+  color: #1a1a1a;
+`;
+
+export const TopicCount = styled.span<{ isApp?: boolean }>`
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 500;
+  font-family: Roboto, sans-serif;
+  color: #737373;
+`;
+
+export const CategoryHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    text-align: left;
+    gap: 4px;
+  }
+`;
+
+export const CategorySubheading = styled.h3`
+  margin-bottom: 16px;
+  font-family: Roboto, sans-serif;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 1.25;
+  color: #1a1a1a;
+`;
+
+export const TopicsRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+`;
+
+export const TopicsWrap = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+
+export const CategoryRowContainer = styled.div<{ isApp?: boolean }>`
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  padding: 16px;
+  margin-bottom: 16px;
+  background: #ffffff;
+  position: relative;
+`;
+
+export const CategoryTopicButton = styled.button<{ isApp?: boolean }>`
+  border: 1px solid #cccccc;
+  color: #404040;
+  padding: 5px 12px;
+  background: #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+  text-transform: none;
+  border-radius: 16px;
+  cursor: pointer;
+  &:hover {
+    background: #f3f4f6;
+  }
+`;
+
+export const ShowMoreButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 16px;
+
+  &[aria-expanded='true'] svg {
+    transform: rotate(180deg);
+  }
+`;
+
+export const ShowMoreButton = styled.button<{ isApp?: boolean }>`
+  border: none;
+  background: transparent;
+  color: #005c8a;
+  font-size: 14px;
+  cursor: pointer;
+  text-decoration: underline;
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const TopicButton = styled.button<{ isApp?: boolean }>`
+  border: 1px solid ${p => (p.isApp ? '#fff' : '#0f766e')};
+  color: ${p => (p.isApp ? '#fff' : '#000')};
+  background: transparent;
+  padding: 4px 8px;
+  font-size: 124x;
+  font-weight: 600;
+  text-transform: uppercase;
+  cursor: pointer;
+  &:hover {
+    background: ${p => (p.isApp ? '#1f2937' : '#e5e7eb')};
+  }
+`;
+
+export const IconButton = styled.button<{ isApp?: boolean }>`
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: ${p => (p.isApp ? '#fff' : '#0f766e')};
+  &:hover {
+    color: ${p => (p.isApp ? '#e5e7eb' : '#1f2937')};
+  }
+`;
+
+// Horizontal scrolling carousel styles
+export const CarouselRow = styled.div`
+  margin-top: 8px;
+  position: relative;
+`;
+
+export const CarouselTrack = styled.div`
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x proximity;
+  padding-bottom: 8px;
+  margin-right: 40px;
+
+  /* hide scrollbar in WebKit */
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+`;
+
+export const CarouselItemButton = styled(TopicButton)`
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+`;
+
+export const CarouselNavButton = styled.button<{
+  isApp?: boolean;
+  side: 'left' | 'right';
+  visible?: boolean;
+}>`
+  position: absolute;
+  top: 0;
+  ${p =>
+    p.side === 'left' ? 'left: 0px;' : 'right: 0px;'} display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  border-radius: 0;
+  border: 1px solid ${p => (p.isApp ? '#fff' : '#000')};
+  color: ${p => (p.isApp ? '#fff' : '#000')};
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  z-index: 2;
+  cursor: pointer;
+  opacity: ${p => (p.visible ? 1 : 0)};
+  pointer-events: ${p => (p.visible ? 'auto' : 'none')};
+  transition: opacity 200ms ease;
+  &:hover {
+    background: ${p => (p.isApp ? '#1f2937' : '#e5e7eb')};
+  }
+`;
+
+export const CardFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  margin-top: 20px;
+  @media (min-width: 768px) {
+    flex-direction: row;
+    width: 100%;
+    gap: 20px;
+    justify-content: center;
+  }
+`;
+
+export const Disclaimer = styled.div<{ isApp?: boolean; marginTop?: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: ${p => (p.marginTop !== undefined ? `${p.marginTop}px` : '0')};
+  span {
+    font-family: Roboto, sans-serif;
+    text-align: center;
+    font-size: 12px;
+    line-height: 1.5;
+    font-weight: 400;
+    color: #404040;
+  }
+`;
+
+export const overlaySpin = keyframes`
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+`;
+
+export const Overlay = styled.div<{ isApp?: boolean }>`
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  background: ${p => (p.isApp ? '#0f172a' : '#ffffff')};
+`;
+
+export const Spinner = styled.div<{ isApp?: boolean }>`
+  width: 40px;
+  height: 40px;
+  border: 3px solid ${p => (p.isApp ? '#fff' : '#1a1a1a')};
+  border-top-color: transparent;
+  border-radius: 9999px;
+  animation: ${overlaySpin} 1s linear infinite;
+  margin-bottom: 24px;
+`;
+
+export const ProgressBarShell = styled.div<{ isApp?: boolean; width?: number }>`
+  height: 3px;
+  background: ${p => (p.isApp ? '#fff' : '#1a1a1a')};
+  width: ${p =>
+    p.width !== undefined && p.width !== null ? `${p.width}%` : '100%'};
+  transition: width 300ms ease;
+`;
+
+export const BackButton = styled.button<{ isApp?: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: 14px;
+  color: ${p => (p.isApp ? '#fff' : '#fff')};
+  background: ${p => (p.isApp ? '#005c8a' : '#005c8a')};
+  padding: 12px 16px;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const Label = styled.h2<{ isApp?: boolean }>`
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 400;
+  text-transform: uppercase;
+  font-family: Roboto, sans-serif;
+  letter-spacing: 0.08em;
+  color: #404040;
+  padding-bottom: 8px !important;
+`;
+
+export const Description = styled.p<{ isApp?: boolean }>`
+  color: #737373;
+  font-family: Roboto, sans-serif;
+  text-align: left;
+  margin-top: 8px !important;
+  margin-bottom: 20px !important;
+  font-size: 16px;
+`;
+
+export const ArticleCard = styled.a<{ isApp?: boolean; clickable?: boolean }>`
+  display: block;
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 4px;
+  border: 1px solid #e6e6e6;
+  text-decoration: none;
+  background: #ffffff;
+  position: relative;
+  color: inherit;
+  ${p =>
+    p.clickable &&
+    `cursor: pointer; &:hover { background: ${
+      p.isApp ? '#1f2937' : '#f9fafb'
+    }; border-color: ${p.isApp ? '#fff' : '#000'}; }`};
+`;
+
+export const ArticleRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const ArticleDate = styled.p<{ isApp?: boolean }>`
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0 0 12px 0 !important;
+  color: #727272;
+`;
+
+export const ArticleHeadline = styled.p<{ isApp?: boolean }>`
+  font-size: 24px;
+  font-weight: 400;
+  font-family: Times Modern;
+  margin: 0 0 12px 0 !important;
+  color: #1a1a1a;
+`;
+
+export const ArticleSnippet = styled.p<{ isApp?: boolean }>`
+  font-style: italic;
+  color: #404040;
+  font-size: 16px;
+`;
+
+export const QuoteBlock = styled.div<{ isApp?: boolean }>`
+  position: relative;
+  margin-top: 16px;
+  padding: 64px 16px;
+  border-radius: 12px;
+  background: ${p => (p.isApp ? '#1f2937' : '#e5e7eb')};
+  color: ${p => (p.isApp ? '#e5e7eb' : '#1f2937')};
+`;
+
+export const QuoteMark = styled.span<{
+  isApp?: boolean;
+  position?: 'left' | 'right';
+}>`
+  position: absolute;
+  pointer-events: none;
+  ${p =>
+    p.position === 'left'
+      ? 'left: 8px; top: 0; transform: translateY(-20px);'
+      : 'right: 8px; bottom: 16px;'} font-family: Georgia, serif;
+  font-size: 108px;
+  height: 64px;
+  line-height: 0.8;
+  color: ${p => (p.isApp ? '#64748b' : '#9ca3af')};
+`;
+
+export const Signature = styled.span<{ isApp?: boolean }>`
+  position: absolute;
+  left: 16px;
+  bottom: 8px;
+  font-weight: 600;
+  color: ${p => (p.isApp ? '#fff' : '#000')};
+`;
+
+export const ResponseCardFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 32px;
+`;