@fluid-theme/core 0.4.3

package/src/core/base.css

@@ -0,0 +1,884 @@
+/**
+ * Fluid Framework - Base Element Styles
+ * @layer base
+ *
+ * Default styles for native HTML elements.
+ * These establish the rhythm and feel without requiring classes.
+ * Every element should feel intentional, refined, unhurried.
+ */
+
+@layer base {
+  /* ========================================
+     DOCUMENT
+     ======================================== */
+
+  body {
+    font-family: var(--font-body, var(--font-system));
+    font-size: var(--font-size-base);
+    line-height: var(--leading-normal);
+    color: var(--color-text);
+    background-color: var(--color-background);
+  }
+
+  ::selection {
+    background-color: var(--color-selection);
+    color: var(--color-text);
+  }
+
+
+  /* ========================================
+     TYPOGRAPHY - Headings
+     Confident but not aggressive
+     ======================================== */
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading, var(--font-system));
+    color: var(--color-text);
+    font-weight: var(--weight-semibold);
+    line-height: var(--leading-tight);
+    letter-spacing: var(--tracking-tight);
+    margin-block-start: 0;
+    margin-block-end: var(--space-4);
+  }
+
+  h1 {
+    font-size: var(--font-size-4xl);
+    font-weight: var(--weight-bold);
+    letter-spacing: -0.03em;
+  }
+
+  h2 {
+    font-size: var(--font-size-3xl);
+    letter-spacing: -0.02em;
+  }
+
+  h3 {
+    font-size: var(--font-size-2xl);
+    letter-spacing: -0.015em;
+  }
+
+  h4 {
+    font-size: var(--font-size-xl);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  h5 {
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-medium);
+    letter-spacing: var(--tracking-normal);
+  }
+
+  h6 {
+    font-size: var(--font-size-base);
+    font-weight: var(--weight-medium);
+    letter-spacing: var(--tracking-normal);
+  }
+
+  /* Subheadings following main headings */
+  :is(h1, h2, h3) + :is(h2, h3, h4) {
+    margin-block-start: var(--space-2);
+  }
+
+
+  /* ========================================
+     TYPOGRAPHY - Body Text
+     Room to breathe
+     ======================================== */
+
+  p {
+    margin-block-end: var(--space-5);
+    max-inline-size: var(--container-prose);
+  }
+
+  /* Last child shouldn't add extra space */
+  p:last-child {
+    margin-block-end: 0;
+  }
+
+  strong, b {
+    font-weight: var(--weight-semibold);
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  small {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+  /* Subscript and superscript */
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sup {
+    inset-block-start: -0.5em;
+  }
+
+  sub {
+    inset-block-end: -0.25em;
+  }
+
+
+  /* ========================================
+     LINKS
+     Subtle, inviting interaction
+     ======================================== */
+
+  a {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.15em;
+    transition:
+      color var(--duration-normal) var(--ease-fluid),
+      text-decoration-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  a:hover {
+    color: var(--accent-hover);
+    text-decoration-thickness: 2px;
+  }
+
+  /* Links that look like text but reveal on hover */
+  a[data-subtle] {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  a[data-subtle]:hover {
+    color: var(--accent);
+    text-decoration: underline;
+  }
+
+
+  /* ========================================
+     LISTS
+     Structured with breathing room
+     Theme-specific list markers
+     ======================================== */
+
+  ul, ol {
+    padding-inline-start: var(--space-6);
+    margin-block-end: var(--space-5);
+  }
+
+  li {
+    margin-block-end: var(--space-2);
+  }
+
+  li:last-child {
+    margin-block-end: 0;
+  }
+
+  /* Nested lists */
+  li > ul,
+  li > ol {
+    margin-block-start: var(--space-2);
+    margin-block-end: 0;
+  }
+
+  /* === Themed list markers ===
+     Each child theme gets a distinctive marker
+     Note: Uses :not([class]) to avoid overriding nav dropdowns and other styled lists */
+
+  /* Still: Clean disc (default - minimal) */
+  [data-motion="still"] ul:not([class]) {
+    list-style-type: disc;
+  }
+
+  /* Serene: Open circle - elegant, understated */
+  [data-motion="serene"] ul:not([class]) {
+    list-style-type: circle;
+  }
+
+  /* Stream: Dash - modern, horizontal emphasis */
+  [data-motion="stream"] ul:not([class]) {
+    list-style-type: none;
+    padding-inline-start: var(--space-5);
+  }
+  [data-motion="stream"] ul:not([class]) > li {
+    position: relative;
+  }
+  [data-motion="stream"] ul:not([class]) > li::before {
+    content: "—";
+    position: absolute;
+    inset-inline-start: calc(var(--space-5) * -1);
+    color: var(--accent);
+    font-weight: var(--weight-bold);
+  }
+
+  /* Cascade: Filled circle - friendly, rounded */
+  [data-motion="cascade"] ul:not([class]) {
+    list-style-type: none;
+    padding-inline-start: var(--space-6);
+  }
+  [data-motion="cascade"] ul:not([class]) > li {
+    position: relative;
+  }
+  [data-motion="cascade"] ul:not([class]) > li::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: calc(var(--space-6) * -1);
+    inset-block-start: 0.55em;
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    background: var(--accent);
+    border-radius: var(--radius-full);
+  }
+
+  /* Rapids: Chevron - energetic, forward motion */
+  [data-motion="rapids"] ul:not([class]) {
+    list-style-type: none;
+    padding-inline-start: var(--space-6);
+  }
+  [data-motion="rapids"] ul:not([class]) > li {
+    position: relative;
+  }
+  [data-motion="rapids"] ul:not([class]) > li::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: calc(var(--space-6) * -1);
+    inset-block-start: 0.4em;
+    inline-size: 0;
+    block-size: 0;
+    border-block-start: 0.35em solid transparent;
+    border-block-end: 0.35em solid transparent;
+    border-inline-start: 0.5em solid var(--accent);
+  }
+
+  /* Tsunami: Square - bold, impactful */
+  [data-motion="tsunami"] ul:not([class]) {
+    list-style-type: none;
+    padding-inline-start: var(--space-6);
+  }
+  [data-motion="tsunami"] ul:not([class]) > li {
+    position: relative;
+  }
+  [data-motion="tsunami"] ul:not([class]) > li::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: calc(var(--space-6) * -1);
+    inset-block-start: 0.5em;
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    background: var(--accent);
+  }
+
+  /* Definition lists */
+  dl {
+    margin-block-end: var(--space-5);
+  }
+
+  dt {
+    font-weight: var(--weight-semibold);
+    margin-block-end: var(--space-1);
+  }
+
+  dd {
+    margin-inline-start: var(--space-6);
+    margin-block-end: var(--space-4);
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     BLOCKQUOTES
+     Thoughtful, set apart
+     ======================================== */
+
+  blockquote {
+    position: relative;
+    padding-inline-start: var(--space-6);
+    margin-block: var(--space-6);
+    border-inline-start: 3px solid var(--color-border);
+    color: var(--color-text-muted);
+    font-style: italic;
+  }
+
+  blockquote::before {
+    content: none; /* No decorative quotes - let content speak */
+  }
+
+  blockquote cite {
+    display: block;
+    margin-block-start: var(--space-3);
+    font-size: var(--font-size-sm);
+    font-style: normal;
+    color: var(--color-text-subtle);
+  }
+
+  blockquote cite::before {
+    content: "— ";
+  }
+
+
+  /* ========================================
+     CODE
+     Technical but approachable
+     ======================================== */
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    background-color: var(--color-surface);
+    padding-inline: var(--space-1-5);
+    padding-block: var(--space-0-5);
+    border-radius: var(--radius-sm);
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-relaxed);
+    background-color: var(--color-surface);
+    padding: var(--space-5);
+    border-radius: var(--radius-lg);
+    overflow-x: auto;
+    margin-block-end: var(--space-5);
+    tab-size: 2;
+  }
+
+  pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+    border-radius: 0;
+  }
+
+  kbd {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background-color: var(--color-surface-raised);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    padding-inline: var(--space-1-5);
+    padding-block: var(--space-0-5);
+    box-shadow: var(--shadow-xs);
+  }
+
+  samp {
+    font-family: var(--font-mono);
+  }
+
+  var {
+    font-style: italic;
+    font-weight: var(--weight-medium);
+  }
+
+
+  /* ========================================
+     HORIZONTAL RULES
+     Quiet separation
+     ======================================== */
+
+  hr {
+    border: none;
+    border-block-start: 1px solid var(--color-border-subtle);
+    margin-block: var(--space-10);
+  }
+
+
+  /* ========================================
+     MEDIA
+     Graceful presentation
+     ======================================== */
+
+  figure {
+    margin-block: var(--space-6);
+  }
+
+  figcaption {
+    margin-block-start: var(--space-3);
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    text-align: center;
+  }
+
+
+  /* ========================================
+     TABLES
+     Clean, readable data
+     ======================================== */
+
+  table {
+    inline-size: 100%;
+    margin-block-end: var(--space-5);
+    border-collapse: collapse;
+    font-variant-numeric: tabular-nums;
+  }
+
+  th, td {
+    padding: var(--space-3) var(--space-4);
+    text-align: start;
+    border-block-end: 1px solid var(--color-border-subtle);
+  }
+
+  th {
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  /* Striped rows - subtle */
+  tbody tr:nth-child(even) {
+    background-color: oklch(from var(--shadow-color) l c h / 0.02);
+  }
+
+  /* Hover state - gentle highlight */
+  tbody tr {
+    transition: background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  tbody tr:hover {
+    background-color: oklch(from var(--shadow-color) l c h / 0.04);
+  }
+
+
+  /* ========================================
+     FORMS - Inputs
+     Inviting, not intimidating
+     ======================================== */
+
+  label {
+    display: block;
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-medium);
+    margin-block-end: var(--space-2);
+    color: var(--color-text);
+  }
+
+  input,
+  textarea,
+  select {
+    inline-size: 100%;
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-base);
+    line-height: var(--leading-normal);
+    color: var(--color-text);
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-input, var(--radius-md));
+    /* Subtle 3D effect - layered shadows create depth */
+    box-shadow:
+      inset 0 1px 2px oklch(from var(--shadow-color) l c h / 0.04),
+      0 1px 0 oklch(from var(--theme-light) l c h / 0.6);
+    transition:
+      border-color var(--duration-normal) var(--ease-fluid),
+      box-shadow var(--duration-normal) var(--ease-fluid),
+      background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  input:hover,
+  textarea:hover,
+  select:hover {
+    border-color: var(--color-text-subtle);
+  }
+
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: 2px solid transparent;
+    border-color: var(--accent);
+    /* Focus: glow ring + maintain subtle 3D */
+    box-shadow:
+      var(--shadow-glow),
+      inset 0 1px 2px oklch(from var(--shadow-color) l c h / 0.03);
+    /* Soft focus background - subtle tint */
+    background-color: color-mix(in oklch, var(--accent) 8%, var(--color-background));
+  }
+
+  /* Dark mode: stronger tint needed for visibility */
+  @media (prefers-color-scheme: dark) {
+    input:focus,
+    textarea:focus,
+    select:focus {
+      background-color: color-mix(in oklch, var(--accent) 15%, var(--color-background));
+    }
+  }
+
+  [data-theme="dark"] input:focus,
+  [data-theme="dark"] textarea:focus,
+  [data-theme="dark"] select:focus {
+    background-color: color-mix(in oklch, var(--accent) 15%, var(--color-background));
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-text-subtle);
+    opacity: 1;
+  }
+
+  /* Disabled state */
+  input:disabled,
+  textarea:disabled,
+  select:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: var(--color-surface);
+  }
+
+  textarea {
+    min-block-size: 8rem;
+    resize: vertical;
+  }
+
+
+  /* ========================================
+     FORMS - Buttons
+     Clear call to action, never garish
+     ======================================== */
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-5);
+    font-size: var(--font-size-base);
+    font-weight: var(--weight-medium);
+    line-height: var(--leading-none);
+    color: var(--white);
+    background-color: var(--accent);
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition:
+      background-color var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-fast) var(--ease-settle),
+      box-shadow var(--duration-normal) var(--ease-fluid);
+  }
+
+  button:hover {
+    background-color: var(--accent-hover);
+    box-shadow: var(--shadow-sm);
+  }
+
+  button:active {
+    transform: scale(0.98);
+    box-shadow: none;
+  }
+
+  button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  button:disabled:hover {
+    background-color: var(--accent);
+    box-shadow: none;
+    transform: none;
+  }
+
+
+  /* ========================================
+     INTERACTIVE ELEMENTS
+     Native HTML interactivity
+     ======================================== */
+
+  details {
+    margin-block-end: var(--space-4);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--space-4);
+  }
+
+  summary {
+    font-weight: var(--weight-medium);
+    cursor: pointer;
+    padding: var(--space-2);
+    margin: calc(var(--space-4) * -1);
+    margin-block-end: 0;
+    border-radius: var(--radius-md);
+    transition: background-color var(--duration-normal) var(--ease-fluid);
+  }
+
+  summary:hover {
+    background-color: var(--color-surface);
+  }
+
+  details[open] summary {
+    margin-block-end: var(--space-4);
+    border-block-end: 1px solid var(--color-border-subtle);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  /* Hide default marker in webkit */
+  summary::-webkit-details-marker {
+    display: none;
+  }
+
+  summary::marker {
+    content: "";
+  }
+
+  summary::before {
+    content: "▸";
+    display: inline-block;
+    margin-inline-end: var(--space-2);
+    transition: transform var(--duration-normal) var(--ease-settle);
+  }
+
+  details[open] summary::before {
+    transform: rotate(90deg);
+  }
+
+
+  /* ========================================
+     SEMANTIC ELEMENTS
+     Meaningful markup, meaningful styles
+     ======================================== */
+
+  mark {
+    background-color: oklch(90% 0.08 90);
+    padding-inline: var(--space-1);
+    border-radius: var(--radius-sm);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    mark {
+      background-color: oklch(40% 0.08 90);
+      color: oklch(95% 0.02 90);
+    }
+  }
+
+  abbr[title] {
+    text-decoration: underline dotted;
+    cursor: help;
+  }
+
+  address {
+    font-style: normal;
+    margin-block-end: var(--space-5);
+  }
+
+  time {
+    font-variant-numeric: tabular-nums;
+  }
+
+
+  /* ========================================
+     METER & PROGRESS
+     Visual feedback with viewport animation
+     ======================================== */
+
+  meter,
+  progress {
+    inline-size: 100%;
+    block-size: var(--space-2);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  progress {
+    appearance: none;
+    background-color: var(--color-surface);
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-full);
+  }
+
+  progress::-webkit-progress-value {
+    background-color: var(--accent);
+    border-radius: var(--radius-full);
+    /* Animate to draw attention when visible */
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  progress::-moz-progress-bar {
+    background-color: var(--accent);
+    border-radius: var(--radius-full);
+    transition: inline-size var(--duration-slow) var(--ease-fluid);
+  }
+
+  /* Animated progress - starts at 0 and fills to value when in viewport */
+  progress[data-animate] {
+    --progress-value: 73;  /* Default: NSW easter egg */
+  }
+
+  progress[data-animate]::-webkit-progress-value {
+    animation: progress-fill var(--duration-slower) var(--ease-fluid) forwards;
+    animation-play-state: paused;
+  }
+
+  progress[data-animate][data-visible]::-webkit-progress-value {
+    animation-play-state: running;
+  }
+
+  @keyframes progress-fill {
+    from { inline-size: 0; }
+    to { inline-size: 100%; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    progress[data-animate]::-webkit-progress-value {
+      animation: none;
+    }
+  }
+
+
+  /* ========================================
+     DIALOG
+     Modal overlay styling
+     ======================================== */
+
+  dialog {
+    max-inline-size: min(90vw, var(--container-sm));
+    padding: var(--space-6);
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-xl);
+    background-color: var(--color-background);
+  }
+
+  dialog::backdrop {
+    background-color: oklch(from var(--shadow-color) l c h / 0.5);
+    backdrop-filter: blur(4px);
+  }
+
+
+  /* ========================================
+     SKIP LINK
+     Accessibility: Jump to main content
+     Hidden until focused for keyboard users
+     ======================================== */
+
+  .skip-link {
+    position: absolute;
+    inset-block-start: var(--space-4);
+    inset-inline-start: var(--space-4);
+    z-index: var(--z-max);
+    padding: var(--space-3) var(--space-5);
+    background-color: var(--accent);
+    color: var(--white);
+    font-weight: var(--weight-medium);
+    text-decoration: none;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-200%);
+    transition: transform var(--duration-fast) var(--ease-fluid);
+  }
+
+  .skip-link:focus {
+    transform: translateY(0);
+    outline: 2px solid transparent;
+    box-shadow:
+      var(--shadow-lg),
+      0 0 0 3px var(--color-background),
+      0 0 0 5px var(--accent);
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC TYPOGRAPHY
+     Motion styles affect text presentation
+     ======================================== */
+
+  /* Still: Clean, precise, Swiss-style typography */
+  [data-motion="still"] h1,
+  [data-motion="still"] h2,
+  [data-motion="still"] h3 {
+    font-weight: var(--weight-medium);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  /* Serene: Elegant, classical typography */
+  [data-motion="serene"] h1,
+  [data-motion="serene"] h2 {
+    font-weight: var(--weight-normal);
+    letter-spacing: 0;
+    font-style: italic;
+  }
+
+  /* Rapids: Bold, italic, aggressive sports feel */
+  [data-motion="rapids"] h1,
+  [data-motion="rapids"] h2,
+  [data-motion="rapids"] h3 {
+    font-weight: 900;
+    font-style: italic;
+    text-transform: uppercase;
+    letter-spacing: -0.02em;
+    line-height: 0.95;
+  }
+  [data-motion="rapids"] h1 {
+    font-size: clamp(var(--font-size-3xl), 8vw, var(--font-size-5xl));
+  }
+
+  /* Tsunami: Maximum impact, dramatic typography */
+  [data-motion="tsunami"] h1,
+  [data-motion="tsunami"] h2 {
+    font-weight: 900;
+    text-transform: uppercase;
+    letter-spacing: -0.03em;
+    line-height: 0.9;
+  }
+  [data-motion="tsunami"] h1 {
+    font-size: clamp(var(--font-size-4xl), 10vw, 6rem);
+  }
+
+
+  /* ========================================
+     PRINT STYLES
+     Clean output for paper
+     ======================================== */
+
+  @media print {
+    body {
+      font-size: 12pt;
+      line-height: 1.5;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      page-break-after: avoid;
+      break-after: avoid;
+    }
+
+    p, blockquote, ul, ol, table {
+      page-break-inside: avoid;
+      break-inside: avoid;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+
+    /* Show URLs for external links */
+    a[href^="http"]::after {
+      content: " (" attr(href) ")";
+      font-size: 0.8em;
+      color: var(--color-text-muted);
+    }
+
+    pre, code {
+      background-color: var(--color-surface-raised, #f5f5f5);
+    }
+
+    /* Hide overlays and fixed UI on print */
+    .modal,
+    .toast-container,
+    .settings-fab,
+    .settings-drawer,
+    .scroll-progress,
+    .nav {
+      display: none !important;
+    }
+
+    /* Preserve badge/alert colors on print */
+    .badge,
+    .alert {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+      border: 1px solid currentColor;
+    }
+  }
+}