/* ════════════════════════════════════════════════════════════════════════════
netyks-apple-zen.css
Canonical Netyks brand stylesheet — Apple/Jony Ive aesthetic
────────────────────────────────────────────────────────────────────────────
Version: 1.0.0
Updated: 2026-05-22
Hosted: https://auth.netyks.com/media/custom/netyks-apple-zen.css
Source: https://github.com/JuanGuabas/netyks-authentik-theme
────────────────────────────────────────────────────────────────────────────
USAGE (every Netyks app, per Core Rule #10):
════════════════════════════════════════════════════════════════════════════ */
/* ============================================================================
1. DESIGN TOKENS — CSS custom properties (override per-app if needed)
============================================================================ */
:root {
/* Brand colors */
--netyks-purple: #8B5CF6; /* primary brand */
--netyks-indigo: #5B6FE6; /* secondary */
--netyks-purple-deep: #6b4ec7; /* hover / pressed */
--netyks-purple-soft: rgba(139, 92, 246, 0.08); /* tint */
--netyks-gradient: linear-gradient(135deg, #5B6FE6 0%, #8B5CF6 100%);
--netyks-glow: 0 4px 18px rgba(91, 111, 230, 0.28);
/* Hero dark gradient (login / cover / dramatic backgrounds) */
--netyks-hero-bg: linear-gradient(145deg,
#0a0a0f 0%, #111128 40%, #1a1a3e 70%, #0d1b2a 100%);
--netyks-glass-bg: rgba(22, 22, 30, 0.82);
--netyks-glass-blur: blur(40px) saturate(180%);
/* Apple neutral palette */
--netyks-text: #1d1d1f; /* primary text (Apple black) */
--netyks-text-2: #424245; /* secondary text */
--netyks-text-3: #6e6e73; /* tertiary text / labels */
--netyks-text-4: #98989d; /* disabled / hint */
--netyks-bg: #ffffff;
--netyks-bg-2: #fafafa; /* subtle elevated surface */
--netyks-bg-3: #f3f4f6; /* groupings */
--netyks-hairline: #e5e7eb; /* dividers, table rows, soft borders */
--netyks-hairline-2: #d1d5db; /* slightly stronger divider */
/* Surfaces */
--netyks-card-bg: #ffffff;
--netyks-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
0 4px 12px rgba(0, 0, 0, 0.04);
--netyks-card-radius: 12px;
--netyks-pill-radius: 999px;
--netyks-input-radius: 10px;
/* Status colors (sparingly used) */
--netyks-success: #34c759; /* Apple green */
--netyks-warning: #ff9f0a; /* Apple orange */
--netyks-danger: #ff3b30; /* Apple red */
--netyks-info: #5B6FE6; /* uses brand indigo */
/* Type scale (modular, modest) */
--netyks-text-xs: 11px;
--netyks-text-sm: 13px;
--netyks-text-base: 15px;
--netyks-text-md: 17px;
--netyks-text-lg: 22px;
--netyks-text-xl: 28px;
--netyks-text-2xl: 38px;
--netyks-text-3xl: 56px;
/* Spacing scale */
--netyks-space-1: 4px;
--netyks-space-2: 8px;
--netyks-space-3: 12px;
--netyks-space-4: 16px;
--netyks-space-5: 24px;
--netyks-space-6: 32px;
--netyks-space-7: 48px;
--netyks-space-8: 64px;
/* Misc */
--netyks-focus-ring: 0 0 0 3px rgba(91, 111, 230, 0.18);
--netyks-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================================
2. RESET — gentle, Apple-style
============================================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
"SF Pro Text", "Helvetica Neue", "Helvetica",
"Inter", Arial, sans-serif;
font-size: var(--netyks-text-base);
font-weight: 400;
line-height: 1.6;
color: var(--netyks-text);
background: var(--netyks-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--netyks-purple); text-decoration: none; transition: opacity var(--netyks-transition); }
a:hover { opacity: 0.75; }
/* ============================================================================
3. TYPOGRAPHY
============================================================================ */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--netyks-space-3) 0;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--netyks-text);
line-height: 1.25;
}
h1 { font-size: var(--netyks-text-2xl); font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: var(--netyks-text-xl); font-weight: 400; }
h3 { font-size: var(--netyks-text-lg); font-weight: 500; }
h4 { font-size: var(--netyks-text-md); font-weight: 500; }
h5 { font-size: var(--netyks-text-base); font-weight: 500; }
h6 { font-size: var(--netyks-text-sm);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--netyks-text-3); font-weight: 600; }
p { margin: 0 0 var(--netyks-space-4) 0; }
strong { font-weight: 500; color: var(--netyks-text); }
small { font-size: var(--netyks-text-sm); color: var(--netyks-text-3); }
code, pre, kbd {
font-family: "SF Mono", "Menlo", "Monaco", Consolas, monospace;
font-size: 0.92em;
}
code {
background: var(--netyks-bg-3);
padding: 2px 6px;
border-radius: 4px;
color: var(--netyks-text-2);
}
pre {
background: var(--netyks-bg-3);
padding: var(--netyks-space-4);
border-radius: var(--netyks-card-radius);
overflow-x: auto;
line-height: 1.5;
}
pre code { background: transparent; padding: 0; }
blockquote {
margin: var(--netyks-space-4) 0;
padding: var(--netyks-space-3) var(--netyks-space-5);
background: var(--netyks-bg-2);
border-left: 3px solid var(--netyks-purple);
border-radius: 0 var(--netyks-card-radius) var(--netyks-card-radius) 0;
color: var(--netyks-text-2);
}
hr {
border: none;
border-top: 1px solid var(--netyks-hairline);
margin: var(--netyks-space-6) 0;
}
/* Inline accents */
.text-purple { color: var(--netyks-purple); }
.text-muted { color: var(--netyks-text-3); }
.text-xs { font-size: var(--netyks-text-xs); }
.text-sm { font-size: var(--netyks-text-sm); }
.text-lg { font-size: var(--netyks-text-lg); }
.text-xl { font-size: var(--netyks-text-xl); }
.font-light { font-weight: 300; }
.font-regular{ font-weight: 400; }
.font-medium { font-weight: 500; }
/* ============================================================================
4. LAYOUT HELPERS
============================================================================ */
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--netyks-space-5);
}
.container-narrow {
max-width: 720px;
margin: 0 auto;
padding: 0 var(--netyks-space-5);
}
.stack > * + * { margin-top: var(--netyks-space-4); }
.row { display: flex; gap: var(--netyks-space-4); flex-wrap: wrap; }
.row-tight { display: flex; gap: var(--netyks-space-2); flex-wrap: wrap; }
.center { display: flex; align-items: center; justify-content: center; }
/* ============================================================================
5. NAVBAR / HEADER
============================================================================ */
.netyks-navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--netyks-space-3) var(--netyks-space-5);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--netyks-hairline);
position: sticky;
top: 0;
z-index: 100;
}
.netyks-navbar-brand {
display: flex;
align-items: center;
gap: var(--netyks-space-2);
color: var(--netyks-text);
font-weight: 500;
font-size: var(--netyks-text-md);
letter-spacing: -0.01em;
}
.netyks-navbar-brand img { height: 28px; width: auto; }
.netyks-navbar-nav {
display: flex;
gap: var(--netyks-space-5);
list-style: none;
margin: 0; padding: 0;
}
.netyks-navbar-nav a {
color: var(--netyks-text-2);
font-weight: 400;
font-size: var(--netyks-text-sm);
}
.netyks-navbar-nav a:hover { color: var(--netyks-purple); opacity: 1; }
/* ============================================================================
6. HERO (dark gradient banner)
============================================================================ */
.netyks-hero {
position: relative;
padding: var(--netyks-space-8) var(--netyks-space-6);
background: var(--netyks-hero-bg);
color: white;
overflow: hidden;
border-radius: var(--netyks-card-radius);
}
.netyks-hero::after {
content: "";
position: absolute; top: 0; right: 0;
width: 240px; height: 240px;
background: radial-gradient(circle at top right,
rgba(139, 92, 246, 0.35) 0%, transparent 70%);
pointer-events: none;
}
.netyks-hero h1, .netyks-hero h2, .netyks-hero h3,
.netyks-hero p, .netyks-hero a { color: white; }
.netyks-hero p { color: #c7c7cc; }
/* ============================================================================
7. CARDS
============================================================================ */
.netyks-card {
background: var(--netyks-card-bg);
border-radius: var(--netyks-card-radius);
padding: var(--netyks-space-5);
box-shadow: var(--netyks-card-shadow);
border: 1px solid var(--netyks-hairline);
transition: box-shadow var(--netyks-transition);
}
.netyks-card:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
0 8px 24px rgba(0, 0, 0, 0.06);
}
.netyks-card-tight { padding: var(--netyks-space-4); }
.netyks-card-flat {
background: var(--netyks-bg-2);
box-shadow: none;
border: 1px solid var(--netyks-hairline);
}
.netyks-card-glass {
background: var(--netyks-glass-bg);
backdrop-filter: var(--netyks-glass-blur);
-webkit-backdrop-filter: var(--netyks-glass-blur);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
}
/* ============================================================================
8. STAT CARDS (dashboard-style)
============================================================================ */
.netyks-stat {
background: var(--netyks-card-bg);
border-radius: var(--netyks-card-radius);
padding: var(--netyks-space-4) var(--netyks-space-5);
box-shadow: var(--netyks-card-shadow);
border: 1px solid var(--netyks-hairline);
min-width: 140px;
}
.netyks-stat-value {
font-size: var(--netyks-text-xl);
font-weight: 500;
color: var(--netyks-text);
letter-spacing: -0.02em;
margin: 0;
}
.netyks-stat-label {
font-size: var(--netyks-text-xs);
color: var(--netyks-text-3);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: var(--netyks-space-1);
}
/* ============================================================================
9. BUTTONS
============================================================================ */
.netyks-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--netyks-space-2);
padding: 10px 18px;
border: none;
border-radius: 10px;
font-family: inherit;
font-size: var(--netyks-text-sm);
font-weight: 500;
letter-spacing: -0.01em;
cursor: pointer;
transition: all var(--netyks-transition);
white-space: nowrap;
}
.netyks-btn-primary {
background: var(--netyks-gradient);
color: white;
box-shadow: var(--netyks-glow);
}
.netyks-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(91, 111, 230, 0.36);
opacity: 1;
}
.netyks-btn-primary:active {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(91, 111, 230, 0.30);
}
.netyks-btn-secondary {
background: var(--netyks-bg-3);
color: var(--netyks-text);
}
.netyks-btn-secondary:hover {
background: var(--netyks-hairline);
opacity: 1;
}
.netyks-btn-ghost {
background: transparent;
color: var(--netyks-purple);
}
.netyks-btn-ghost:hover {
background: var(--netyks-purple-soft);
opacity: 1;
}
.netyks-btn-danger {
background: var(--netyks-danger);
color: white;
}
.netyks-btn-pill { border-radius: var(--netyks-pill-radius); }
.netyks-btn-sm { padding: 6px 12px; font-size: var(--netyks-text-xs); }
.netyks-btn-lg { padding: 14px 22px; font-size: var(--netyks-text-md); }
.netyks-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* ============================================================================
10. FORMS / INPUTS
============================================================================ */
label {
display: block;
font-size: var(--netyks-text-xs);
font-weight: 500;
color: var(--netyks-text-3);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--netyks-space-1);
}
input, textarea, select {
width: 100%;
padding: 10px 14px;
font-family: inherit;
font-size: var(--netyks-text-base);
color: var(--netyks-text);
background: var(--netyks-bg);
border: 1px solid var(--netyks-hairline-2);
border-radius: var(--netyks-input-radius);
transition: border-color var(--netyks-transition), box-shadow var(--netyks-transition);
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--netyks-indigo);
box-shadow: var(--netyks-focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--netyks-text-4); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--netyks-purple); }
/* ============================================================================
11. TABLES
============================================================================ */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--netyks-text-sm);
}
th {
text-align: left;
font-weight: 500;
font-size: var(--netyks-text-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--netyks-text-3);
padding: 10px 12px 8px 12px;
border-bottom: 1.5px solid var(--netyks-text);
}
td {
padding: 10px 12px;
border-bottom: 1px solid var(--netyks-hairline);
vertical-align: top;
color: var(--netyks-text);
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--netyks-bg-2); }
/* ============================================================================
12. PILLS / BADGES
============================================================================ */
.netyks-pill {
display: inline-block;
padding: 3px 10px;
border-radius: var(--netyks-pill-radius);
font-size: var(--netyks-text-xs);
font-weight: 500;
letter-spacing: 0.02em;
background: var(--netyks-bg-3);
color: var(--netyks-text-2);
}
.netyks-pill-purple { background: var(--netyks-purple-soft); color: var(--netyks-purple-deep); }
.netyks-pill-success { background: rgba(52, 199, 89, 0.12); color: #248a3d; }
.netyks-pill-warning { background: rgba(255, 159, 10, 0.12); color: #c47d00; }
.netyks-pill-danger { background: rgba(255, 59, 48, 0.10); color: #c52e25; }
/* ============================================================================
13. NETYKS FOOTER ── REQUIRED PER CORE RULE #10
============================================================================
Every Netyks-deployed app MUST include this footer on every page.
Minimal HTML usage:
─────────────────────────────────────────────────────────────────────────── */
.netyks-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: var(--netyks-space-5) var(--netyks-space-4);
font-size: var(--netyks-text-xs);
font-weight: 400;
color: var(--netyks-text-3);
letter-spacing: 0.02em;
border-top: 1px solid var(--netyks-hairline);
margin-top: var(--netyks-space-7);
}
.netyks-footer-icon {
width: 14px;
height: 14px;
vertical-align: middle;
}
.netyks-wordmark {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
font-weight: 300;
letter-spacing: 0.18em;
color: var(--netyks-purple);
text-transform: lowercase;
}
/* Dark-background variant (use inside .netyks-hero or dark themes) */
.netyks-footer-dark {
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
}
.netyks-footer-dark .netyks-wordmark { color: white; }
/* ============================================================================
14. UTILITY CLASSES
============================================================================ */
.netyks-divider { height: 1px; background: var(--netyks-hairline); border: 0; margin: var(--netyks-space-5) 0; }
.netyks-mt-0 { margin-top: 0; }
.netyks-mt-2 { margin-top: var(--netyks-space-2); }
.netyks-mt-4 { margin-top: var(--netyks-space-4); }
.netyks-mt-6 { margin-top: var(--netyks-space-6); }
.netyks-text-center { text-align: center; }
.netyks-text-right { text-align: right; }
.netyks-hide-mobile { }
/* ============================================================================
15. DARK THEME (opt-in via .netyks-dark on or )
============================================================================ */
.netyks-dark {
--netyks-text: #f5f5f7;
--netyks-text-2: #c7c7cc;
--netyks-text-3: #8e8e93;
--netyks-text-4: #636366;
--netyks-bg: #0d0d12;
--netyks-bg-2: #15151c;
--netyks-bg-3: #1c1c24;
--netyks-hairline: rgba(255, 255, 255, 0.08);
--netyks-hairline-2: rgba(255, 255, 255, 0.14);
--netyks-card-bg: #16161e;
--netyks-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.40),
0 4px 16px rgba(0, 0, 0, 0.30);
}
/* ============================================================================
16. RESPONSIVE
============================================================================ */
@media (max-width: 768px) {
h1 { font-size: var(--netyks-text-xl); }
h2 { font-size: var(--netyks-text-lg); }
.netyks-navbar { padding: var(--netyks-space-2) var(--netyks-space-4); }
.netyks-navbar-nav { gap: var(--netyks-space-3); }
.netyks-hero { padding: var(--netyks-space-6) var(--netyks-space-4); }
.netyks-hide-mobile { display: none; }
}
/* ============================================================================
17. PRINT
============================================================================ */
@media print {
body { background: white; color: black; }
.netyks-navbar, .netyks-footer { display: none; }
.netyks-card { box-shadow: none; border: 1px solid #ccc; }
a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }
}
/* ──────────────────────────── end of file ─────────────────────────────── */