/*
* RA Design System — Ragnar Academy
* Shared foundation: tokens, reset, utilities, components
* v1.0 — 2026-03-07
*
* Co je zde:
* 1. Design tokens (:root)
* 2. Reset
* 3. Accessibility utilities
* 4. Layout utility
* 5. Typography utilities
* 6. Section layout utilities
* 7. Surface utilities
* 8. Interactive utilities
* 9. Component utilities (pill, icon-system, cta)
* 10. Scroll animation (.fi)
*
* Co NENÍ zde (zůstává inline v každém souboru):
* – Nav, hero, stats, about, pricing, capture, footer layout
* – Sekčně specifické grid/spacing rules
* – Responsive breakpoints pro sekce
*
* Font loading (v každém ):
*
*
*
*
*/
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* Backgrounds */
--ra-bg: #0a0a0f;
--ra-surface-100: #111118;
--ra-surface-200: #16161f;
--ra-surface-300: #1b1b26;
/* Typography */
--ra-text: #ececf2;
--ra-muted: #9292a3;
/* Brand accent — gold */
--ra-gold: #c9a84c;
--ra-gold-dim: rgba(201,168,76,.12);
--ra-gold-soft: rgba(201,168,76,.18);
/* Borders */
--ra-border: rgba(255,255,255,.07);
--ra-border-strong: rgba(201,168,76,.22);
/* Shadows — hybrid values (ztišené oproti CH výchozím) */
--ra-shadow-depth: 0 14px 28px rgba(0,0,0,.24);
--ra-shadow-premium: 0 18px 40px rgba(0,0,0,.30);
--ra-highlight: inset 0 1px 0 rgba(255,255,255,.06);
/* Border radius */
--ra-radius-sm: 10px;
--ra-radius-md: 16px;
--ra-radius-lg: 22px;
--ra-pill: 999px;
/* Spacing scale */
--ra-space-1: 8px;
--ra-space-2: 12px;
--ra-space-3: 16px;
--ra-space-4: 20px;
--ra-space-5: 24px;
--ra-space-6: 32px;
--ra-space-7: 48px;
--ra-space-8: 64px;
/* Motion */
--ra-motion-fast: .2s ease;
--ra-motion-smooth: .34s ease;
}
/* ============================================================
2. RESET
============================================================ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: radial-gradient(circle at top, #11111a 0%, var(--ra-bg) 34%);
color: var(--ra-text);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
img {
display: block;
max-width: 100%;
}
button,
input {
font: inherit;
}
/* ============================================================
3. ACCESSIBILITY UTILITIES
============================================================ */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: 10px;
top: -50px;
background: var(--ra-gold);
color: #0b0b10;
padding: 10px 14px;
border-radius: 0 0 8px 8px;
font-size: 13px;
font-weight: 700;
z-index: 999;
transition: top var(--ra-motion-fast);
}
.skip-link:focus {
top: 0;
}
/* ============================================================
4. LAYOUT UTILITY
============================================================ */
.ra-container {
width: min(1240px, calc(100% - 48px));
margin-inline: auto;
}
@media (max-width: 820px) {
.ra-container {
width: min(100%, calc(100% - 32px));
}
}
/* ============================================================
5. TYPOGRAPHY UTILITIES
============================================================ */
.ra-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ra-gold);
}
.ra-title {
font-size: clamp(30px, 4vw, 46px);
font-weight: 850;
letter-spacing: -1px;
line-height: 1.06;
}
.ra-copy {
color: var(--ra-muted);
}
/* ============================================================
6. SECTION LAYOUT UTILITIES
============================================================ */
.ra-section {
padding: 92px 0;
}
.ra-section-head {
text-align: center;
margin-bottom: 56px;
}
@media (max-width: 820px) {
.ra-section {
padding: 64px 0;
}
.ra-section-head {
margin-bottom: 40px;
}
}
/* ============================================================
7. SURFACE UTILITIES
============================================================ */
/* Standard surface — klidná tmavá vrstva */
.ra-surface {
background: linear-gradient(
180deg,
rgba(22,22,31,.92) 0%,
rgba(17,17,24,.98) 100%
);
border: 1px solid var(--ra-border);
border-radius: var(--ra-radius-md);
box-shadow: var(--ra-highlight);
}
/* Premium surface — pro featured / highlighted karty */
.ra-surface-premium {
background: linear-gradient(
180deg,
rgba(28,28,38,.95) 0%,
rgba(17,17,24,1) 100%
);
border: 1px solid var(--ra-border-strong);
border-radius: var(--ra-radius-md);
box-shadow: var(--ra-highlight), var(--ra-shadow-premium);
}
/* Depth shadow — přidává hloubku nad surface */
.ra-card-depth {
box-shadow: var(--ra-highlight), var(--ra-shadow-depth);
}
/* ============================================================
8. INTERACTIVE UTILITIES
============================================================ */
/* Standardní interaktivní karta */
.ra-interactive {
transition:
transform var(--ra-motion-smooth),
border-color var(--ra-motion-fast),
box-shadow var(--ra-motion-smooth),
background var(--ra-motion-fast);
}
.ra-interactive:hover {
transform: translateY(-2px);
border-color: rgba(201,168,76,.18);
}
/* Premium interaktivní karta — hybrid ztišená varianta */
.ra-interactive-premium {
transition:
transform var(--ra-motion-smooth),
border-color var(--ra-motion-fast),
box-shadow var(--ra-motion-smooth),
background var(--ra-motion-fast);
}
.ra-interactive-premium:hover {
transform: translateY(-2px);
border-color: rgba(201,168,76,.24);
box-shadow: var(--ra-highlight), 0 14px 28px rgba(0,0,0,.30);
}
/* ============================================================
9. COMPONENT UTILITIES
============================================================ */
/* Pill / badge */
.ra-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: var(--ra-pill);
background: var(--ra-gold-dim);
border: 1px solid rgba(201,168,76,.2);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ra-gold);
}
.ra-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ra-gold);
flex-shrink: 0;
}
/* Icon system — base (boxed, s pozadím) */
/* Note: tech-card, stat-card a capture-box mají vlastní override
v sekčním CSS, který ikonu stripuje na bare SVG */
.ra-icon-system {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
background: rgba(201,168,76,.08);
border: 1px solid rgba(201,168,76,.15);
color: var(--ra-gold);
flex-shrink: 0;
transition:
transform var(--ra-motion-fast),
background var(--ra-motion-fast),
border-color var(--ra-motion-fast),
color var(--ra-motion-fast);
}
.ra-icon-system svg {
width: 21px;
height: 21px;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
/* Primary CTA — zlaté tlačítko */
.ra-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 30px;
border-radius: 12px;
background: linear-gradient(180deg, #d7b35a 0%, #c9a84c 100%);
color: #0b0b10;
font-size: 14px;
font-weight: 800;
letter-spacing: .4px;
border: 1px solid rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 10px 24px rgba(201,168,76,.16);
transition:
transform var(--ra-motion-smooth),
box-shadow var(--ra-motion-smooth),
opacity var(--ra-motion-fast);
}
.ra-cta-primary:hover {
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 18px 36px rgba(201,168,76,.22);
}
/* Secondary CTA — outline tlačítko */
.ra-cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 28px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
color: var(--ra-text);
font-size: 14px;
font-weight: 650;
transition: all var(--ra-motion-fast);
}
.ra-cta-secondary:hover {
border-color: var(--ra-border-strong);
color: var(--ra-gold);
}
/* ============================================================
10. SCROLL ANIMATION
============================================================ */
.fi {
opacity: 0;
transform: translateY(18px);
transition: opacity .55s ease, transform .55s ease;
}
.fi.on {
opacity: 1;
transform: none;
}