/* ========================================================================== DYNAMIC FILM & TV PRODUCTIONS — DESIGN TOKENS Colors, type, spacing and effects. Generated from the brand design system. ========================================================================== */ /* --- Webfonts ----------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300..900;1,300..900&family=Archivo+Expanded:wght@400..800&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"); @font-face { font-family: "Orbitron"; src: url("../assets/fonts/Orbitron-Variable.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } /* ===== colors.css ================================================ */ /* ============================================================ DYNAMIC PRODUCTIONS — COLOR SYSTEM "Hollywood production studio meets modern sportswear brand." Base: black / charcoal / metallic silver / white Accents: electric blue + cinematic gold ============================================================ */ :root { /* ---- Core ink & charcoal (cinematic dark) ---- */ --dp-black: #000000; /* pure black — full-bleed, frames, mattes */ --dp-ink-900: #07080A; /* near-black page base (cool) */ --dp-ink-850: #0B0D11; /* primary dark surface */ --dp-ink-800: #101319; /* charcoal — sections, panels */ --dp-ink-700: #181C24; /* elevated charcoal — cards */ --dp-ink-600: #20242E; /* hover surface / inset */ --dp-ink-500: #2C313D; /* strong border / divider on dark */ --dp-ink-400: #3A4150; /* hairline border on dark */ /* ---- Steel & silver (neutral text + metal) ---- */ --dp-steel-600: #4C5563; /* disabled / faint text on dark */ --dp-steel-500: #6B7484; /* tertiary text */ --dp-steel-400: #8C95A3; /* secondary text on dark */ --dp-silver-300: #B7BCC6; /* metallic silver — captions, meta */ --dp-silver-200: #D2D6DD; /* light silver */ --dp-silver-100: #E7E9ED; /* near-white surface on light */ --dp-white: #FFFFFF; /* ---- Metallic silver gradient (chrome, badges, slate) ---- */ --dp-chrome: linear-gradient(160deg, #FFFFFF 0%, #C4C8CE 28%, #8C95A3 52%, #E7E9ED 74%, #9AA2AF 100%); /* @kind color */ --dp-chrome-soft: linear-gradient(180deg, #E7E9ED 0%, #B7BCC6 50%, #8C95A3 100%); /* @kind color */ /* ---- Electric Blue (primary signal / motion) ---- */ --dp-blue-700: #1A44C2; --dp-blue-600: #2257EE; --dp-blue-500: #2E6BFF; /* PRIMARY electric blue */ --dp-blue-400: #4F86FF; /* hover / lift */ --dp-blue-300: #7FA8FF; /* tint */ --dp-blue-glow: rgba(46, 107, 255, 0.45); /* ---- Cinematic Gold (premium / award / highlight) ---- */ --dp-gold-700: #9C7A2E; --dp-gold-600: #B98F3C; --dp-gold-500: #C8A45A; /* PRIMARY cinematic gold */ --dp-gold-400: #DCBE76; /* hover / sheen */ --dp-gold-300: #ECD7A0; /* tint */ --dp-gold-glow: rgba(200, 164, 90, 0.40); /* ---- Semantic ---- */ --dp-success: #2FB57A; --dp-warning: #C8A45A; --dp-danger: #E5484D; --dp-info: #2E6BFF; /* ============================================================ SEMANTIC ALIASES — author against these, not raw values Default theme = dark (the brand lives in the dark). ============================================================ */ --surface-base: var(--dp-ink-900); --surface-section: var(--dp-ink-800); --surface-card: var(--dp-ink-700); --surface-raised: var(--dp-ink-600); --surface-inverse: var(--dp-white); --text-primary: var(--dp-white); --text-secondary: var(--dp-silver-300); --text-tertiary: var(--dp-steel-400); --text-disabled: var(--dp-steel-600); --text-inverse: var(--dp-ink-900); --text-brand: var(--dp-blue-500); --text-premium: var(--dp-gold-500); --border-hairline: var(--dp-ink-400); --border-strong: var(--dp-ink-500); --border-focus: var(--dp-blue-500); --accent-primary: var(--dp-blue-500); --accent-primary-hov: var(--dp-blue-400); --accent-premium: var(--dp-gold-500); --accent-premium-hov: var(--dp-gold-400); --link: var(--dp-blue-400); --link-hover: var(--dp-blue-300); } /* ------------------------------------------------------------ LIGHT THEME — editorial / print / documents Apply to a subtree with class="dp-light" or [data-theme="light"] ------------------------------------------------------------ */ .dp-light, [data-theme="light"] { --surface-base: var(--dp-white); --surface-section: var(--dp-silver-100); --surface-card: var(--dp-white); --surface-raised: var(--dp-silver-100); --surface-inverse: var(--dp-ink-900); --text-primary: var(--dp-ink-900); --text-secondary: #3A4150; --text-tertiary: var(--dp-steel-500); --text-disabled: #B7BCC6; --text-inverse: var(--dp-white); --border-hairline: #E0E3E8; --border-strong: #C4C8CE; } /* ===== typography.css ============================================ */ /* ============================================================ DYNAMIC PRODUCTIONS — TYPOGRAPHY SYSTEM Display/Brand : Orbitron — cinematic, geometric, all-caps Headings/Body : Archivo — editorial grotesque w/ expanded grade Technical : Space Mono — slate, timecode, metadata ============================================================ */ :root { /* ---- Families ---- */ --font-display: "Orbitron", "Archivo Expanded", "Arial Narrow", sans-serif; --font-expanded: "Archivo Expanded", "Archivo", "Helvetica Neue", sans-serif; --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "Space Mono", "SFMono-Regular", "Roboto Mono", monospace; /* ---- Weights ---- @kind font */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 900; /* @kind font */ /* ---- Type scale (fluid-friendly fixed px; cinematic, large) ---- */ --fs-display-xl: 120px; /* hero brand statement */ --fs-display-l: 88px; --fs-display-m: 64px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 13px; --fs-micro: 11px; /* eyebrows, labels, slate metadata */ /* ---- Line heights ---- */ --lh-tight: 0.96; /* @kind font */ --lh-snug: 1.08; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* ---- Letter spacing ---- @kind font */ --ls-display: 0.06em; /* Orbitron caps want air @kind font */ --ls-eyebrow: 0.28em; /* widely tracked label @kind font */ --ls-label: 0.14em; /* @kind font */ --ls-tight: -0.02em; /* large Archivo headings @kind font */ --ls-normal: 0em; /* @kind font */ } /* ============================================================ TYPE PRIMITIVE CLASSES — optional helpers ============================================================ */ .dp-display { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-display-l); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; } .dp-h1 { font-family: var(--font-expanded); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .dp-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); } .dp-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); } .dp-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-normal); } .dp-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } /* Eyebrow / kicker — the brand's signature widely-tracked label */ .dp-eyebrow { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-micro); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; } /* Technical metadata — timecode, slate fields */ .dp-mono { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); letter-spacing: 0; } /* ===== spacing.css =============================================== */ /* ============================================================ DYNAMIC PRODUCTIONS — SPACING, GRID & RADII Base unit = 4px. Cinematic layouts breathe; use generous space. ============================================================ */ :root { /* ---- Spacing scale (4px base) ---- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; /* ---- Section rhythm ---- */ --section-pad-y: var(--space-32); --section-pad-x: var(--space-12); --gutter: var(--space-6); --content-max: 1280px; --content-narrow: 720px; /* ---- Radii — mostly tight & architectural (sportswear edge) ---- */ --radius-0: 0px; /* hard edge — frames, full-bleed */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; /* default card / control */ --radius-lg: 12px; --radius-xl: 18px; --radius-pill: 999px; /* tags, badges, capsule buttons */ /* ---- Border widths ---- */ --bw-hair: 1px; --bw-base: 1.5px; --bw-bold: 2px; --bw-frame: 3px; /* film-frame accent */ } /* ===== effects.css =============================================== */ /* ============================================================ DYNAMIC PRODUCTIONS — EFFECTS Shadows, glows, motion, gradients, textures. Cinematic = deep blacks, soft falloff, surgical accent glows. ============================================================ */ :root { /* ---- Elevation (shadows tuned for dark surfaces) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.40); --shadow-md: 0 6px 20px rgba(0,0,0,0.45); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55); --shadow-xl: 0 32px 80px rgba(0,0,0,0.65); /* ---- Accent glows (signal / focus / premium) ---- */ --glow-blue: 0 0 0 1px rgba(46,107,255,0.55), 0 0 28px var(--dp-blue-glow); --glow-gold: 0 0 0 1px rgba(200,164,90,0.55), 0 0 28px var(--dp-gold-glow); --focus-ring: 0 0 0 3px rgba(46,107,255,0.40); /* ---- Cinematic backgrounds ---- */ /* Spotlight vignette — radial fall to black, the "stage" look */ --bg-spotlight: radial-gradient(120% 90% at 50% 0%, #1A1F2B 0%, #0B0D11 46%, #000000 100%); /* @kind color */ /* Subtle steel sheen for panels */ --bg-steel: linear-gradient(180deg, #181C24 0%, #0E1119 100%); /* @kind color */ /* Protection scrim for text over imagery */ --scrim-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%); /* @kind color */ --scrim-top: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%); /* @kind color */ /* Accent hairline gradients */ --rule-blue: linear-gradient(90deg, var(--dp-blue-500), transparent); /* @kind color */ --rule-gold: linear-gradient(90deg, var(--dp-gold-500), transparent); /* @kind color */ /* ---- Glass / blur ---- */ --blur-glass: saturate(140%) blur(16px); /* @kind other */ --glass-fill: rgba(16,19,25,0.62); /* @kind color */ --glass-border: rgba(255,255,255,0.08); /* @kind color */ /* ---- Motion — confident, weighted, cinematic (no bounce) ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --ease-snap: cubic-bezier(0.3, 0, 0, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 420ms; /* @kind other */ --dur-cinematic: 720ms; /* @kind other */ /* ---- Film grain opacity token ---- */ --grain-opacity: 0.05; /* @kind other */ }