Spaces:
Running
Running
File size: 3,575 Bytes
9644425 |
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 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
.helpContainer {
margin: 0 auto;
max-width: var(--go-ui-width-screen-lg);
padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md) var(--go-ui-spacing-2xl) var(--go-ui-spacing-md);
}
.helpSection {
background-color: var(--go-ui-color-white);
border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
border-radius: var(--go-ui-border-radius-xl);
padding: var(--go-ui-spacing-2xl);
margin-bottom: var(--go-ui-spacing-xl);
box-shadow: var(--go-ui-box-shadow-sm);
transition: all var(--go-ui-duration-transition-medium) ease;
position: relative;
overflow: hidden;
}
.helpSection:hover {
box-shadow: var(--go-ui-box-shadow-md);
transform: translateY(-2px);
border-color: var(--go-ui-color-gray-30);
}
.sectionHeader {
display: flex;
align-items: center;
margin-bottom: var(--go-ui-spacing-lg);
padding-bottom: var(--go-ui-spacing-md);
border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
}
.sectionIcon {
width: 2rem;
height: 2rem;
margin-right: var(--go-ui-spacing-md);
color: var(--go-ui-color-red-90);
background-color: var(--go-ui-color-red-5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sectionTitle {
color: var(--go-ui-color-black);
font-weight: var(--go-ui-font-weight-semibold);
font-size: var(--go-ui-font-size-xl);
margin: 0;
}
.sectionContent {
color: var(--go-ui-color-gray-700);
line-height: 1.7;
font-size: var(--go-ui-font-size-base);
margin-bottom: var(--go-ui-spacing-lg);
}
.guidelinesList {
list-style: none;
padding: 0;
margin: var(--go-ui-spacing-md) 0;
}
.guidelinesList li {
position: relative;
padding: var(--go-ui-spacing-sm) 0 var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
margin-bottom: var(--go-ui-spacing-sm);
color: var(--go-ui-color-gray-700);
line-height: 1.6;
}
.guidelinesList li::before {
content: '✓';
position: absolute;
left: 0;
top: var(--go-ui-spacing-sm);
color: var(--go-ui-color-green-70);
font-weight: var(--go-ui-font-weight-bold);
font-size: var(--go-ui-font-size-sm);
background-color: var(--go-ui-color-green-5);
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.buttonContainer {
display: flex;
justify-content: center;
margin-top: var(--go-ui-spacing-xl);
}
.featureHighlight {
background: linear-gradient(135deg, var(--go-ui-color-blue-5), var(--go-ui-color-blue-10));
border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-blue-20);
border-radius: var(--go-ui-border-radius-lg);
padding: var(--go-ui-spacing-lg);
margin: var(--go-ui-spacing-lg) 0;
position: relative;
}
.featureHighlight::before {
content: '💡';
position: absolute;
top: var(--go-ui-spacing-md);
right: var(--go-ui-spacing-md);
font-size: 1.5rem;
}
.featureHighlightText {
color: var(--go-ui-color-blue-90);
font-weight: var(--go-ui-font-weight-medium);
margin: 0;
font-size: var(--go-ui-font-size-sm);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.helpSection {
padding: var(--go-ui-spacing-lg);
margin-bottom: var(--go-ui-spacing-lg);
}
.sectionHeader {
flex-direction: column;
text-align: center;
gap: var(--go-ui-spacing-sm);
}
.sectionIcon {
margin-right: 0;
margin-bottom: var(--go-ui-spacing-sm);
}
.actionButton {
padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
font-size: var(--go-ui-font-size-sm);
}
}
|