|
1 | 1 | /* Xcode × AI developer survey report |
2 | 2 | Look: near-black stage with film grain, soft per-chapter glow, rounded shadcn-style surfaces, |
3 | 3 | floating iOS-style frosted-glass sidebar, centered chapter headers, generous spacing. |
4 | | - Sections: tokens · grain · gate · sidebar · hero · chapter head · cards · controls · parts 1–5 · wall · responsive. */ |
| 4 | + Sections: tokens · grain · sidebar · hero · chapter head · cards · controls · parts 1–5 · wall · responsive. */ |
5 | 5 |
|
6 | 6 | /* Tokens (shadcn semantics, dark) */ |
7 | 7 | :root { |
@@ -48,26 +48,6 @@ mark { padding: 0; color: var(--foreground); background: none; font-weight: 600; |
48 | 48 | /* Film grain over everything (static SVG turbulence) */ |
49 | 49 | body::after { position: fixed; z-index: 60; inset: 0; pointer-events: none; opacity: .36; mix-blend-mode: soft-light; content: ""; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); } |
50 | 50 |
|
51 | | -/* Access gate */ |
52 | | -.auth-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--background); transition: opacity .3s, visibility .3s; } |
53 | | -.auth-card { width: min(100%, 420px); padding: 36px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 24px 60px rgb(0 0 0 / .5); } |
54 | | -.auth-eyebrow { margin-bottom: 28px; color: var(--muted-foreground); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-align: center; } |
55 | | -.auth-label { display: grid; gap: 4px; margin-bottom: 18px; font-size: 28px; font-weight: 600; line-height: 1.2; text-align: center; } |
56 | | -.auth-label small { color: var(--muted-foreground); font-size: 13px; font-weight: 400; } |
57 | | -.auth-card input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); outline: 0; color: var(--foreground); background: var(--background); font: inherit; } |
58 | | -.auth-card input:focus { border-color: #60a5fa; box-shadow: 0 0 0 3px rgb(96 165 250 / .22); } |
59 | | -.auth-error { min-height: 20px; margin: 8px 0; color: #fca5a5; font-size: 12px; text-align: center; } |
60 | | -.auth-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 18px; border: 0; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--foreground); } |
61 | | -.auth-submit:hover { background: #fff; } |
62 | | -.auth-submit-arrow { flex: none; width: 18px; height: 18px; transition: transform .2s; } |
63 | | -.auth-submit:hover .auth-submit-arrow { transform: translateX(3px); } |
64 | | -.auth-submit-copy { display: flex; align-items: baseline; gap: 8px; } |
65 | | -.auth-submit-copy strong { font-weight: 600; } |
66 | | -.auth-submit-copy small { color: #52525b; font-size: 12px; } |
67 | | -html.is-authenticated .auth-gate { visibility: hidden; opacity: 0; pointer-events: none; } |
68 | | -html:not(.is-authenticated) { overflow: hidden; } |
69 | | -html:not(.is-authenticated) .app { visibility: hidden; } |
70 | | - |
71 | 51 | /* Floating frosted-glass sidebar (iOS 18 style) */ |
72 | 52 | .sidebar { position: fixed; z-index: 40; top: 50%; left: var(--G); display: flex; flex-direction: column; gap: 18px; width: var(--side-w); max-height: calc(100vh - 40px); padding: 18px 14px 14px; transform: translate(-16px, -50%); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .4s ease; |
73 | 53 | border: 1px solid rgb(255 255 255 / .13); border-radius: 12px; |
|
0 commit comments