spb/phi-conseil

1@import "tailwindcss";2@import "../styles/tokens.css";34@theme inline {5  --color-ivory-50: var(--color-ivory-50);6  --color-ivory-100: var(--color-ivory-100);7  --color-ivory-200: var(--color-ivory-200);8  --color-ivory-300: var(--color-ivory-300);9  --color-pale-100: var(--color-pale-100);10  --color-pale-200: var(--color-pale-200);11  --color-pale-300: var(--color-pale-300);12  --color-pale-400: var(--color-pale-400);13  --color-slate-500: var(--color-slate-500);14  --color-slate-600: var(--color-slate-600);15  --color-slate-700: var(--color-slate-700);16  --color-navy-800: var(--color-navy-800);17  --color-navy-900: var(--color-navy-900);18  --color-gold-300: var(--color-gold-300);19  --color-gold-400: var(--color-gold-400);20  --color-gold-500: var(--color-gold-500);21  --color-gold-600: var(--color-gold-600);22  --color-gold-700: var(--color-gold-700);23  --color-ink-900: var(--color-ink-900);24  --color-ink-700: var(--color-ink-700);25  --color-ink-500: var(--color-ink-500);26  --color-ink-300: var(--color-ink-300);27  --color-danger: var(--color-danger);28  --color-success: var(--color-success);2930  --font-serif: var(--font-serif);31  --font-sans: var(--font-sans);3233  --radius-sm: var(--radius-sm);34  --radius-md: var(--radius-md);35  --radius-lg: var(--radius-lg);36  --radius-xl: var(--radius-xl);37  --radius-pill: var(--radius-pill);3839  --shadow-sm: var(--shadow-sm);40  --shadow-md: var(--shadow-md);41  --shadow-lg: var(--shadow-lg);4243  --ease-out: var(--ease-out);44}4546@layer base {47  html {48    scroll-behavior: smooth;49    -webkit-text-size-adjust: 100%;50  }51  @media (prefers-reduced-motion: reduce) {52    html {53      scroll-behavior: auto;54    }55    *,56    *::before,57    *::after {58      animation-duration: 0.01ms !important;59      animation-iteration-count: 1 !important;60      transition-duration: 0.01ms !important;61    }62  }63  body {64    background: var(--color-ivory-50);65    color: var(--color-ink-700);66    font-family: var(--font-sans);67    font-size: var(--text-base);68    line-height: var(--leading-normal);69    overflow-x: clip;70  }71  h1,72  h2,73  h3,74  h4 {75    font-family: var(--font-serif);76    color: var(--color-navy-900);77    font-weight: 500;78    letter-spacing: -0.01em;79    text-wrap: balance;80  }81  p {82    text-wrap: pretty;83  }84  :focus-visible {85    outline: 3px solid var(--color-slate-500);86    outline-offset: 3px;87    border-radius: var(--radius-sm);88  }89  ::selection {90    background: var(--color-gold-300);91    color: var(--color-navy-900);92  }93}9495@layer components {96  .container-site {97    width: 100%;98    max-width: var(--container-max);99    margin-inline: auto;100    padding-inline: var(--container-pad);101  }102  .section-y {103    padding-block: var(--section-y);104  }105  .overtitle {106    font-family: var(--font-sans);107    font-size: var(--text-xs);108    font-weight: 600;109    letter-spacing: var(--tracking-caps);110    text-transform: uppercase;111    color: var(--color-gold-700);112  }113  .skip-link {114    position: absolute;115    left: 1rem;116    top: -100%;117    z-index: 100;118    padding: 0.5rem 1rem;119    background: var(--color-navy-900);120    color: white;121    border-radius: var(--radius-sm);122  }123  .skip-link:focus {124    top: 1rem;125  }126  .text-display {127    font-size: var(--text-display);128    line-height: var(--leading-tight);129  }130  .text-h2 {131    font-size: var(--text-4xl);132    line-height: var(--leading-snug);133  }134  .text-h3 {135    font-size: var(--text-3xl);136    line-height: var(--leading-snug);137  }138  .text-h4 {139    font-size: var(--text-xl);140    line-height: var(--leading-snug);141  }142  .text-lead {143    font-size: var(--text-lg);144  }145}146147@layer components {148  .prose-site p {149    color: var(--color-ink-700);150  }151  .prose-site a {152    color: var(--color-navy-900);153  }154}155156@keyframes fade-in {157  from {158    opacity: 0;159  }160  to {161    opacity: 1;162  }163}164