/* ========================================================================== variables.css — DESIGN TOKENS -------------------------------------------------------------------------- Every colour, spacing, radius, shadow and font setting lives here. Other CSS files must use these variables instead of raw values. Change a value here and it updates across the whole website. Button fills stay dark enough for white text. Decorative gradients (logo, title bars, page glow) can be brighter. ========================================================================== */ :root { /* ------------------------------------------------------------------ BACKGROUNDS ------------------------------------------------------------------ */ --color-bg-primary: #090b14; /* page background */ --color-bg-secondary: #10131f; /* header, footer, featured tray */ --color-bg-surface: #171b2e; /* panels, menus, trending cards */ --color-bg-card: #141828; /* standard app cards */ --color-bg-card-hover: #1c2238; --color-bg-overlay: rgba(9, 11, 20, 0.88); /* sticky header */ --color-bg-placeholder: rgba(255, 255, 255, 0.035); /* Optional full-page background image. Path is relative to this css/ folder, e.g. url("../assets/images/site-background.webp") */ --image-page-background: none; /* ------------------------------------------------------------------ TEXT ------------------------------------------------------------------ */ --color-text-primary: #f4f6ff; --color-text-secondary: #c5c9e2; /* body copy — keep this light */ --color-text-muted: #9aa0bd; /* meta, votes, copyright */ --color-text-inverse: #120816; /* text on bright badges */ --color-link: #67e8f9; --color-link-hover: #ffffff; /* ------------------------------------------------------------------ ACCENTS & NEON Primary is dark enough to sit under white button text. ------------------------------------------------------------------ */ --color-accent-primary: #5c4de6; /* dark enough for white button text */ --color-accent-secondary: #22d3ee; --color-accent-tertiary: #ff4d8d; --color-neon-purple: #a78bfa; --color-neon-cyan: #67e8f9; --color-neon-pink: #fb7185; --gradient-accent: linear-gradient(180deg, var(--color-neon-purple), var(--color-accent-primary)); --gradient-button: linear-gradient( 180deg, var(--color-accent-primary) 0%, color-mix(in srgb, var(--color-accent-primary) 75%, #12081f) 100% ); --gradient-neon: linear-gradient(100deg, #d8ccff 0%, #9d8cff 42%, var(--color-neon-cyan) 100%); --gradient-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 42%); --gradient-card: var(--gradient-sheen); --gradient-divider: linear-gradient( 90deg, transparent, color-mix(in srgb, var(--color-accent-primary) 70%, transparent), color-mix(in srgb, var(--color-accent-secondary) 55%, transparent), transparent ); --gradient-page-glow: radial-gradient(ellipse 55% 28% at 8% -8%, color-mix(in srgb, var(--color-accent-primary) 28%, transparent), transparent 68%), radial-gradient(ellipse 40% 24% at 100% 0%, color-mix(in srgb, var(--color-accent-secondary) 16%, transparent), transparent 70%); /* ------------------------------------------------------------------ BORDERS & FOCUS ------------------------------------------------------------------ */ --color-border-subtle: rgba(255, 255, 255, 0.08); --color-border-default: rgba(255, 255, 255, 0.14); --color-border-accent: color-mix(in srgb, var(--color-accent-primary) 72%, transparent); --color-focus: #67e8f9; --border-width: 1px; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 55%, transparent); /* ------------------------------------------------------------------ BUTTONS ------------------------------------------------------------------ */ --button-min-height: 44px; --button-padding-x: 1.15rem; --button-font-size: var(--font-size-sm); --button-radius: var(--radius-pill); --button-primary-background: var(--gradient-button); --button-primary-text: #ffffff; --button-primary-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent-primary) 38%, transparent); --button-secondary-background: transparent; --button-secondary-text: var(--color-text-primary); --button-secondary-border: var(--color-border-default); --button-secondary-background-hover: var(--color-bg-card-hover); /* ------------------------------------------------------------------ STATUS, RATING & BADGES ------------------------------------------------------------------ */ --color-success: #34d399; --color-warning: #fbbf24; --color-danger: #f87171; --color-rating-star: #f5c451; --color-rating-star-empty: rgba(255, 255, 255, 0.22); --color-badge-new-background: var(--color-accent-tertiary); --color-badge-new-text: var(--color-text-inverse); /* ------------------------------------------------------------------ SHADOWS ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.5); --shadow-card: 0 10px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-card-hover: 0 16px 32px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 35%, transparent); --shadow-icon: 0 8px 16px rgba(0, 0, 0, 0.45); --shadow-neon: var(--button-primary-shadow); --shadow-focus: var(--focus-ring); /* ------------------------------------------------------------------ BORDER RADIUS ------------------------------------------------------------------ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --radius-app-icon: 22%; /* ------------------------------------------------------------------ SPACING clamp() values grow with the screen, so most spacing needs no media query. ------------------------------------------------------------------ */ --space-3xs: 0.125rem; /* 2px */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 0.75rem; /* 12px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4.5rem; /* 72px */ --section-spacing: clamp(2rem, 1.1rem + 2.6vw, 4.5rem); --page-gutter: clamp(1rem, 0.45rem + 2vw, 2rem); --card-gap: clamp(0.75rem, 0.45rem + 0.8vw, 1.25rem); --card-padding: var(--space-md); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --max-width-content: 1200px; --max-width-text: 68ch; --header-height: 64px; --app-icon-size: 56px; --app-icon-size-large: 80px; /* DIWA / YONO grid columns. Homepage rows = diwaAppsToShow ÷ columns. */ --catalog-columns-mobile: 2; /* under 768px */ --catalog-columns-tablet: 4; /* 768px – 1023px */ --catalog-columns-desktop: 6; /* 1024px and up */ --catalog-columns: var(--catalog-columns-mobile); --catalog-icon-size: 64px; --catalog-icon-size-desktop: 84px; /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-heading: var(--font-family-base); --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); --font-size-xl: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); --font-size-2xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); --font-size-3xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-base: 1.6; --letter-spacing-heading: -0.02em; --letter-spacing-label: 0.06em; /* ------------------------------------------------------------------ MOTION & LAYERING ------------------------------------------------------------------ */ --transition-fast: 160ms ease; --transition-base: 220ms ease; --z-header: 100; --z-mobile-menu: 90; /* ------------------------------------------------------------------ BREAKPOINTS (REFERENCE ONLY) CSS cannot use variables inside @media rules. Only 768px and 1280px are used in responsive.css. Catalog columns come from --catalog-columns-*; trending is 1 then 3. ------------------------------------------------------------------ */ --breakpoint-sm: 480px; /* large phones */ --breakpoint-md: 768px; /* tablets — desktop navigation starts here */ --breakpoint-lg: 1024px; /* small laptops */ --breakpoint-xl: 1280px; /* desktops — content width grows */ }