cclkit4svelte 3.0.0 → 3.1.0

package/dist/PrismaticAmbientGlow.svelte

@@ -0,0 +1,115 @@
+<script context="module" lang="ts">
+  export type PrismaticAmbientGlowTone =
+    | '--peach-pink'
+    | '--sugar-blue'
+    | '--lemon-yellow'
+    | '--akebi-purple';
+
+  export type PrismaticAmbientGlowSize = 'small' | 'medium' | 'large';
+  export type PrismaticAmbientGlowOpacity = 'subtle' | 'standard' | 'strong';
+  export type PrismaticAmbientGlowBlur = 'soft' | 'medium' | 'diffuse';
+  export type PrismaticAmbientGlowPosition =
+    | 'top-left'
+    | 'top-right'
+    | 'center'
+    | 'bottom-left'
+    | 'bottom-right';
+
+  export type PrismaticAmbientGlowProps = {
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor } from './const/config';
+
+  const sizes: Record<PrismaticAmbientGlowSize, string> = {
+    small: '220px',
+    medium: '380px',
+    large: '620px'
+  };
+
+  const opacities: Record<PrismaticAmbientGlowOpacity, string> = {
+    subtle: '0.28',
+    standard: '0.48',
+    strong: '0.68'
+  };
+
+  const blurs: Record<PrismaticAmbientGlowBlur, string> = {
+    soft: '44px',
+    medium: '76px',
+    diffuse: '112px'
+  };
+
+  export let tone: PrismaticAmbientGlowTone = CCLPastelColor.PEACH_PINK;
+  export let size: PrismaticAmbientGlowSize = 'medium';
+  export let opacity: PrismaticAmbientGlowOpacity = 'standard';
+  export let blur: PrismaticAmbientGlowBlur = 'medium';
+  export let position: PrismaticAmbientGlowPosition = 'center';
+
+  $: glowSize = sizes[size];
+  $: glowOpacity = opacities[opacity];
+  $: glowBlur = blurs[blur];
+</script>
+
+<!-- The containing block should use position: relative and isolation: isolate. -->
+<span
+  class="ambient-glow {position}"
+  aria-hidden="true"
+  data-testid="prismatic-ambient-glow"
+  data-tone={tone}
+  data-size={size}
+  data-opacity={opacity}
+  data-blur={blur}
+  data-position={position}
+  style="--glow-color: var({tone}); --glow-size: {glowSize}; --glow-opacity: {glowOpacity}; --glow-blur: {glowBlur};"
+></span>
+
+<style>
+  .ambient-glow {
+    position: absolute;
+    z-index: -1;
+    display: block;
+    width: var(--glow-size);
+    height: var(--glow-size);
+    border-radius: 50%;
+    background: var(--glow-color);
+    filter: blur(var(--glow-blur));
+    opacity: var(--glow-opacity);
+    pointer-events: none;
+  }
+
+  .top-left {
+    top: 0;
+    left: 0;
+    transform: translate(-35%, -35%);
+  }
+
+  .top-right {
+    top: 0;
+    right: 0;
+    transform: translate(35%, -35%);
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: translate(-35%, 35%);
+  }
+
+  .bottom-right {
+    right: 0;
+    bottom: 0;
+    transform: translate(35%, 35%);
+  }
+</style>

package/dist/PrismaticAmbientGlow.svelte.d.ts

@@ -0,0 +1,36 @@
+export type PrismaticAmbientGlowTone = '--peach-pink' | '--sugar-blue' | '--lemon-yellow' | '--akebi-purple';
+export type PrismaticAmbientGlowSize = 'small' | 'medium' | 'large';
+export type PrismaticAmbientGlowOpacity = 'subtle' | 'standard' | 'strong';
+export type PrismaticAmbientGlowBlur = 'soft' | 'medium' | 'diffuse';
+export type PrismaticAmbientGlowPosition = 'top-left' | 'top-right' | 'center' | 'bottom-left' | 'bottom-right';
+export type PrismaticAmbientGlowProps = {
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrismaticAmbientGlow: $$__sveltets_2_IsomorphicComponent<{
+    tone?: PrismaticAmbientGlowTone;
+    size?: PrismaticAmbientGlowSize;
+    opacity?: PrismaticAmbientGlowOpacity;
+    blur?: PrismaticAmbientGlowBlur;
+    position?: PrismaticAmbientGlowPosition;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticAmbientGlow = InstanceType<typeof PrismaticAmbientGlow>;
+export default PrismaticAmbientGlow;

package/dist/PrismaticBookCard.svelte

@@ -0,0 +1,175 @@
+<script context="module" lang="ts">
+  export type PrismaticBookCardTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticBookCardProps = {
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    tone?: PrismaticBookCardTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  export let href: string | undefined = undefined;
+  export let linkLabel: string = 'READ MORE';
+  export let imageUrl: string | undefined = undefined;
+  export let imageAlt: string = '';
+  export let tone: PrismaticBookCardTone = CCLVividColor.STRAWBERRY_PINK;
+
+  const gradientEndColors: Record<string, ColorVar> = {
+    [CCLVividColor.STRAWBERRY_PINK]: CCLPastelColor.LEMON_YELLOW,
+    [CCLVividColor.PINEAPPLE_YELLOW]: CCLPastelColor.PEACH_PINK,
+    [CCLVividColor.SODA_BLUE]: CCLPastelColor.AKEBI_PURPLE,
+    [CCLVividColor.MELON_GREEN]: CCLPastelColor.SUGAR_BLUE,
+    [CCLVividColor.GRAPE_PURPLE]: CCLPastelColor.LEMON_YELLOW,
+    [CCLVividColor.WRAP_GREY]: CCLPastelColor.SUGAR_BLUE
+  };
+  const linkElement = 'a';
+
+  $: gradientStart = `var(${tone})`;
+  $: gradientEnd = `var(${gradientEndColors[tone] ?? CCLPastelColor.LEMON_YELLOW})`;
+  $: accentColor = `var(${tone})`;
+</script>
+
+<article
+  class="prismatic-book-card"
+  style="--gradient-start: {gradientStart}; --gradient-end: {gradientEnd}; --accent-color: {accentColor};"
+>
+  <div class="cover-slot" aria-label={imageUrl ? undefined : imageAlt || undefined}>
+    {#if imageUrl}
+      <img class="cover-image" src={imageUrl} alt={imageAlt} />
+    {:else}
+      <slot name="image">
+        <span class="cover-fallback" aria-hidden="true"></span>
+      </slot>
+    {/if}
+  </div>
+
+  {#if href}
+    <svelte:element
+      this={linkElement}
+      class="link"
+      {href}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <span>{linkLabel}</span>
+      <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M5 3.5L9.5 8L5 12.5" />
+        <path d="M9 8H2.5" />
+      </svg>
+    </svelte:element>
+  {:else}
+    <span class="link-label">
+      <span>{linkLabel}</span>
+      <svg class="link-icon" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+        <path d="M5 3.5L9.5 8L5 12.5" />
+        <path d="M9 8H2.5" />
+      </svg>
+    </span>
+  {/if}
+</article>
+
+<style>
+  .prismatic-book-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+    width: min(100%, 300px);
+    height: 500px;
+    box-sizing: border-box;
+    padding: 24px;
+    border: 1.5px solid color-mix(in srgb, var(--gradient-end) 60%, transparent);
+    border-radius: 34px;
+    background: color-mix(in srgb, var(--color-surface-glass) 82%, transparent);
+    font-family: Inter, sans-serif;
+    letter-spacing: 0;
+  }
+
+  .cover-slot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 360px;
+    overflow: hidden;
+    border-radius: 18px;
+    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
+  }
+
+  .cover-image,
+  .cover-fallback {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .cover-image,
+  .cover-slot :global(img),
+  .cover-slot :global(video) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .link,
+  .link-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+    max-width: 100%;
+    color: var(--accent-color);
+    font-size: 13px;
+    font-weight: 700;
+    line-height: normal;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+  }
+
+  .link-icon {
+    display: block;
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+
+  .link:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 42%, Canvas);
+    outline-offset: 4px;
+  }
+
+  @media (max-width: 320px) {
+    .prismatic-book-card {
+      height: auto;
+      min-height: 500px;
+    }
+
+    .cover-slot {
+      height: auto;
+      aspect-ratio: 7 / 10;
+    }
+  }
+</style>

package/dist/PrismaticBookCard.svelte.d.ts

@@ -0,0 +1,34 @@
+export type PrismaticBookCardTone = '--strawberry-pink' | '--pineapple-yellow' | '--soda-blue' | '--melon-green' | '--grape-purple' | '--wrap-grey';
+export type PrismaticBookCardProps = {
+    href?: string;
+    linkLabel?: string;
+    imageUrl?: string;
+    imageAlt?: string;
+    tone?: PrismaticBookCardTone;
+};
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrismaticBookCard: $$__sveltets_2_IsomorphicComponent<{
+    href?: string | undefined;
+    linkLabel?: string;
+    imageUrl?: string | undefined;
+    imageAlt?: string;
+    tone?: PrismaticBookCardTone;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    image: {};
+}, {}, string>;
+type PrismaticBookCard = InstanceType<typeof PrismaticBookCard>;
+export default PrismaticBookCard;

package/dist/PrismaticGradientButton.svelte

@@ -0,0 +1,211 @@
+<script context="module" lang="ts">
+  export type PrismaticGradientButtonTone = 'primary' | 'secondary';
+  export type PrismaticGradientButtonSize = 'large' | 'medium';
+  export type PrismaticGradientButtonType = 'button' | 'submit' | 'reset';
+</script>
+
+<script lang="ts">
+  import { CCLPastelColor, CCLVividColor } from './const/config';
+  import type { ColorVar } from './const/config';
+
+  type GradientStops = {
+    primaryStart: ColorVar;
+    primaryEnd: ColorVar;
+    secondaryStart: ColorVar;
+    secondaryEnd: ColorVar;
+    disabledStart: ColorVar;
+    disabledEnd: ColorVar;
+  };
+
+  /**
+   * ボタン内に表示するラベル
+   * @default Explore the Lab
+   */
+  export let label: string = 'Explore the Lab';
+
+  /**
+   * ボタンの視覚的な強さ
+   * @default primary
+   */
+  export let tone: PrismaticGradientButtonTone = 'primary';
+
+  /**
+   * ボタンサイズ
+   * @default large
+   */
+  export let size: PrismaticGradientButtonSize = 'large';
+
+  /**
+   * グラデーションの基準色
+   * @default --strawberry-pink
+   */
+  export let color: ColorVar = CCLVividColor.STRAWBERRY_PINK;
+
+  /**
+   * ボタンの非活性状態
+   * @default false
+   */
+  export let disabled: boolean = false;
+
+  /**
+   * button要素のtype属性
+   * @default button
+   */
+  export let type: PrismaticGradientButtonType = 'button';
+
+  /**
+   * クリックイベントハンドラ
+   * @default () => {}
+   */
+  export let onClick: () => void = () => {};
+
+  const fallbackStops: GradientStops = {
+    primaryStart: CCLVividColor.STRAWBERRY_PINK,
+    primaryEnd: CCLVividColor.SODA_BLUE,
+    secondaryStart: CCLPastelColor.PEACH_PINK,
+    secondaryEnd: CCLVividColor.STRAWBERRY_PINK,
+    disabledStart: CCLPastelColor.LEMON_YELLOW,
+    disabledEnd: CCLPastelColor.PEACH_PINK
+  };
+
+  const gradientStops: Record<string, GradientStops> = {
+    [CCLVividColor.STRAWBERRY_PINK]: fallbackStops,
+    [CCLVividColor.PINEAPPLE_YELLOW]: {
+      primaryStart: CCLVividColor.PINEAPPLE_YELLOW,
+      primaryEnd: CCLVividColor.MELON_GREEN,
+      secondaryStart: CCLPastelColor.LEMON_YELLOW,
+      secondaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      disabledStart: CCLPastelColor.LEMON_YELLOW,
+      disabledEnd: CCLPastelColor.PEACH_PINK
+    },
+    [CCLVividColor.SODA_BLUE]: {
+      primaryStart: CCLVividColor.SODA_BLUE,
+      primaryEnd: CCLVividColor.GRAPE_PURPLE,
+      secondaryStart: CCLPastelColor.SUGAR_BLUE,
+      secondaryEnd: CCLVividColor.SODA_BLUE,
+      disabledStart: CCLPastelColor.SUGAR_BLUE,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.MELON_GREEN]: {
+      primaryStart: CCLVividColor.MELON_GREEN,
+      primaryEnd: CCLVividColor.SODA_BLUE,
+      secondaryStart: CCLPastelColor.MATCHA_GREEN,
+      secondaryEnd: CCLVividColor.MELON_GREEN,
+      disabledStart: CCLPastelColor.MATCHA_GREEN,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.GRAPE_PURPLE]: {
+      primaryStart: CCLVividColor.GRAPE_PURPLE,
+      primaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      secondaryStart: CCLPastelColor.AKEBI_PURPLE,
+      secondaryEnd: CCLVividColor.GRAPE_PURPLE,
+      disabledStart: CCLPastelColor.AKEBI_PURPLE,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    },
+    [CCLVividColor.WRAP_GREY]: {
+      primaryStart: CCLVividColor.WRAP_GREY,
+      primaryEnd: CCLVividColor.PINEAPPLE_YELLOW,
+      secondaryStart: CCLPastelColor.CLOUD_GREY,
+      secondaryEnd: CCLVividColor.WRAP_GREY,
+      disabledStart: CCLPastelColor.CLOUD_GREY,
+      disabledEnd: CCLPastelColor.CLOUD_GREY
+    }
+  };
+
+  $: stops = gradientStops[color] ?? fallbackStops;
+  $: gradientStart = disabled
+    ? stops.disabledStart
+    : tone === 'secondary'
+      ? stops.secondaryStart
+      : stops.primaryStart;
+  $: gradientEnd = disabled
+    ? stops.disabledEnd
+    : tone === 'secondary'
+      ? stops.secondaryEnd
+      : stops.primaryEnd;
+  $: gradientStartValue = `var(${gradientStart})`;
+  $: gradientEndValue =
+    color === CCLVividColor.WRAP_GREY && !disabled
+      ? `color-mix(in srgb, var(${CCLVividColor.WRAP_GREY}) 14%, Canvas)`
+      : `var(${gradientEnd})`;
+  $: labelColor = disabled
+    ? `var(${CCLVividColor.WRAP_GREY})`
+    : 'var(--prismatic-gradient-button-primary-fg, Canvas)';
+</script>
+
+<button
+  class="prismatic-gradient-button tone-{tone} size-{size}"
+  style="--gradient-start: {gradientStartValue}; --gradient-end: {gradientEndValue}; --label-color: {labelColor};"
+  on:click={onClick}
+  {disabled}
+  {type}
+>
+  <span class="label">{label}</span>
+</button>
+
+<style>
+  .prismatic-gradient-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: fit-content;
+    min-width: 156px;
+    border: 0;
+    border-radius: 999px;
+    background: linear-gradient(105deg, var(--gradient-start), var(--gradient-end));
+    color: var(--label-color);
+    font-family: inherit;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      transform 160ms ease,
+      filter 160ms ease,
+      opacity 160ms ease;
+  }
+
+  .size-large {
+    min-height: 48px;
+    padding: 0 28px;
+    font-size: 14px;
+  }
+
+  .size-medium {
+    min-height: 40px;
+    min-width: 132px;
+    padding: 0 22px;
+    font-size: 12px;
+  }
+
+  .tone-secondary {
+    color: var(--label-color);
+  }
+
+  .prismatic-gradient-button:hover:not(:disabled) {
+    filter: saturate(1.08) brightness(1.02);
+    transform: translateY(-1px);
+  }
+
+  .prismatic-gradient-button:active:not(:disabled) {
+    filter: saturate(1.02) brightness(0.96);
+    transform: translateY(0);
+  }
+
+  .prismatic-gradient-button:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--gradient-end) 48%, Canvas);
+    outline-offset: 3px;
+  }
+
+  .prismatic-gradient-button:disabled {
+    cursor: not-allowed;
+    opacity: 0.68;
+  }
+
+  .label {
+    display: inline-flex;
+    align-items: center;
+  }
+</style>

package/dist/PrismaticGradientButton.svelte.d.ts

@@ -0,0 +1,51 @@
+export type PrismaticGradientButtonTone = 'primary' | 'secondary';
+export type PrismaticGradientButtonSize = 'large' | 'medium';
+export type PrismaticGradientButtonType = 'button' | 'submit' | 'reset';
+import type { ColorVar } from './const/config';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PrismaticGradientButton: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * ボタン内に表示するラベル
+       * @default Explore the Lab
+       */ label?: string;
+    /**
+       * ボタンの視覚的な強さ
+       * @default primary
+       */ tone?: PrismaticGradientButtonTone;
+    /**
+       * ボタンサイズ
+       * @default large
+       */ size?: PrismaticGradientButtonSize;
+    /**
+       * グラデーションの基準色
+       * @default --strawberry-pink
+       */ color?: ColorVar;
+    /**
+       * ボタンの非活性状態
+       * @default false
+       */ disabled?: boolean;
+    /**
+       * button要素のtype属性
+       * @default button
+       */ type?: PrismaticGradientButtonType;
+    /**
+       * クリックイベントハンドラ
+       * @default () => {}
+       */ onClick?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PrismaticGradientButton = InstanceType<typeof PrismaticGradientButton>;
+export default PrismaticGradientButton;

package/dist/PrismaticSectionHeading.svelte

@@ -0,0 +1,70 @@
+<script context="module" lang="ts">
+  export type PrismaticSectionHeadingTone =
+    | '--strawberry-pink'
+    | '--pineapple-yellow'
+    | '--soda-blue'
+    | '--melon-green'
+    | '--grape-purple'
+    | '--wrap-grey';
+
+  export type PrismaticSectionHeadingProps = {
+    eyebrow?: string;
+    title?: string;
+    tone?: PrismaticSectionHeadingTone;
+  };
+</script>
+
+<script lang="ts">
+  import { CCLVividColor } from './const/config';
+
+  export let eyebrow: string = 'LATEST';
+  export let title: string = 'Latest Stories';
+  export let tone: PrismaticSectionHeadingTone = CCLVividColor.STRAWBERRY_PINK;
+
+  $: toneValue = `var(${tone})`;
+</script>
+
+<div class="prismatic-section-heading" style="--eyebrow-color: {toneValue};">
+  <p class="eyebrow">{eyebrow}</p>
+  <h2 class="title">{title}</h2>
+</div>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
+
+  .prismatic-section-heading {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+    width: min(100%, 600px);
+    min-height: 80px;
+    color: color-mix(in srgb, var(--palette-grape-900) 42%, var(--palette-wrap-900));
+    font-family: 'DotGothic16', sans-serif;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .eyebrow,
+  .title {
+    margin: 0;
+    max-width: 100%;
+    font-weight: 400;
+  }
+
+  .eyebrow {
+    color: var(--eyebrow-color);
+    font-size: 12px;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+
+  .title {
+    color: inherit;
+    font-size: 42px;
+    line-height: 1.05;
+  }
+</style>