lapikud.github.io/src/app.css

/* Global stylesheet */

@import "tailwindcss";

/* Design tokens & theme variables (light defaults) */
:root {
  /* color tokens (light defaults) */
  --orange: #f0941d;
  --orange-light: #ffa940;
  --orange-dark: #d67d0a;
  --black: #000000;
  --off-black: #0d0d0d;
  --white: #ffffff;
  --off-white: #fffdfa;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-800: #262626;
  --gray-900: #171717;

  /* layout tokens */
  --site-padding: clamp(1rem, 2vw, 2rem); /* horizontal page padding */
  --content-max: 1200px; /* main content max width */
  --nav-height: 64px;
  --footer-height: 80px;

  /* spacing scale */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* radius / shadows */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-1: 0 1px 2px rgba(240, 148, 29, 0.2),
    0 1px 3px rgba(240, 148, 29, 0.12);
  --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(240, 148, 29, 0.3);

  /* breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* type scale (fluid base + modular sizes) */
  --fs-base: clamp(0.95rem, 0.9vw + 0.9rem, 1rem);
  --fs-xs: 0.85rem;
  --fs-sm: 0.92rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --line-height: 1.45;

  /* derived component tokens that components can rely on */
  --button-bg: var(--color-surface);
  --button-text: var(--color-text);
  --card-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.96)
  );
  --accent: var(--color-primary);
}

/* Global box sizing & accessible defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, color 160ms ease;
  overflow-x: hidden;
  font-size: var(--fs-lg);
}

/* Basic link & button defaults that components inherit */
a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 550;
}
a:hover {
  text-decoration: underline;
  color: var(--color-primary-600);
}

button,
input[type="button"],
input[type="submit"] {
  font: inherit;
  color: var(--button-text);
  background: var(--button-bg);
  border: 1px solid var(--color-border);
  padding: 0.5em 0.9em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: box-shadow 120ms ease, transform 120ms ease,
    border-color 120ms ease;
}
button:active {
  transform: translateY(1px);
}
button:focus {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  outline-offset: 2px;
}

/* Simple responsive grid that adapts to available width */
.grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Utility: visually hidden (accessible labels) */
.sr-only,
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* Show/hide helpers for breakpoints */
.mobile-only {
  display: block;
}
.desktop-only {
  display: none;
}
@media (min-width: 768px) {
  .mobile-only {
    display: none;
  }
  .desktop-only {
    display: block;
  }
}

/* Navbar & footer helpers so components can assume consistent heights */
.site-header {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
}
.site-footer {
  height: var(--footer-height);
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-border);
  background: transparent;
}

/* Small form controls default */
.input {
  padding: 0.6em 0.8em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: inherit;
}

/* Utility to visually reduce emphasis (muted text) */
.muted {
  color: var(--color-muted);
  font-size: 0.95em;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}