Hugging Face's logo

Spaces:
testfws2025
/
scrollscape-voyager
Running

App Files Community
scrollscape-voyager
File size: 2,187 Bytes
d03961b
 
 
 
 
 
687b9ca
d03961b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
687b9ca
 
d03961b
 
 
 
 
 
 
 
 
687b9ca
 
d03961b
 
 
 
 
 
 
 
 
687b9ca
fda7f47
 
 
 
 
 
 
 
 
 
687b9ca
fda7f47
 
 
 
687b9ca
c85c27d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
687b9ca
fda7f47
 
 
 
 
687b9ca
d03961b
fda7f47
 
 
d03961b
fda7f47
 
 
 
 
 
 
 
d03961b
 
fda7f47
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.font-sans {
    font-family: 'Montserrat', sans-serif;
}

.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Animation classes */
.animate-fade-in {
    animation: fadeIn 1.5s ease-in-out;
}

.animate-slide-up {
    animation: slideUp 1s ease-out;
}

.animate-slide-right {
    animation: slideRight 1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(50px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRight {
    from { 
        opacity: 0;
        transform: translateX(-50px);
    }
    to { 
        opacity: 1;
        transform: translateX(0);
    }
}
/* Section styling */
section {
    min-height: 100vh;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Scroll snap */
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
/* Section transitions */
section {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

section.active {
    opacity: 1;
    transform: translateY(0);
}

section.inactive {
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
}

/* Animation classes */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

[data-animate].animate {
    opacity: 1;
    transform: translateY(0);
}
/* Header styling */
:host {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Content container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}