File size: 3,778 Bytes
4e4ffa2 6ddeff6 3801a9a 6ddeff6 3801a9a 6ddeff6 a924a9b 150bcb1 a924a9b 150bcb1 6b7fc80 965dca3 a924a9b 4e4ffa2 a924a9b 150bcb1 a924a9b 150bcb1 a924a9b 6405e3d a924a9b 150bcb1 a924a9b 63051b3 150bcb1 6b7fc80 |
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 |
/* Hero section enhancements */
.min-h-\[500px\] {
min-height: 500px;
}
/* Hero button hover effect */
.btn-accent {
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-accent:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 24px rgba(141, 198, 63, 0.35);
}
:root {
--vlc-navy: #002060;
--vlc-navy-700: #001a50;
--vlc-sky: #00A0E9;
--vlc-leaf: #8DC63F;
--vlc-ink: #1F2A44;
--vlc-card: #ffffff;
--vlc-navy-50: #F5F7FF;
--vlc-navy-100: #ECF1FF;
--vlc-sky-50: #F0FAFF;
--vlc-leaf-50: #F4FAEC;
--vlc-sky-700: #0086C1;
--vlc-leaf-700: #79b32e;
}
body {
padding: 0;
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
width: 100%;
overflow-x: hidden;
color: var(--vlc-ink);
line-height: 1.6;
}
/* Alert message styles */
#fail_email, #success_email {
position: fixed;
top: 1.5rem;
right: 1.5rem;
max-width: 24rem;
width: 90%;
z-index: 9999;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: opacity 0.3s ease, transform 0.3s ease;
}
#fail_email .flex, #success_email .flex {
padding: 0.75rem 1rem;
}
#fail_email .p-4, #success_email .p-4 {
padding: 1rem;
}
/* Notification component styles are now in the component itself */
h1, h2, h3, h4 {
color: var(--vlc-navy);
font-weight: 700;
margin-top: 0;
}
.pattern-grid {
background:
linear-gradient(transparent 23px, rgba(0,32,96,.06) 24px),
linear-gradient(90deg, transparent 23px, rgba(0,32,96,.06) 24px);
background-size: 24px 24px;
}
.pattern-navy {
background:
radial-gradient(24px 24px at 12% 10%, rgba(255,255,255,.06) 0 6px, transparent 7px),
radial-gradient(24px 24px at 64% 28%, rgba(255,255,255,.05) 0 6px, transparent 7px),
radial-gradient(24px 24px at 30% 72%, rgba(255,255,255,.04) 0 6px, transparent 7px),
linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.14));
background-color: var(--vlc-navy);
}
.pattern-leaf {
background:
linear-gradient(135deg, rgba(141,198,63,.18), rgba(0,160,233,.12)),
radial-gradient(600px 300px at 10% -10%, rgba(141,198,63,.20), transparent 60%),
radial-gradient(600px 300px at 110% 110%, rgba(0,160,233,.18), transparent 60%);
background-color: var(--vlc-leaf-50);
}
.pattern-sky {
background:
radial-gradient(18px 18px at 20% 30%, rgba(0,160,233,.14) 0 6px, transparent 7px),
radial-gradient(18px 18px at 72% 64%, rgba(141,198,63,.14) 0 6px, transparent 7px),
linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.25));
background-color: var(--vlc-sky-50);
}
.pattern-diamond {
--c: rgba(0,32,96,.06);
background:
conic-gradient(from 45deg, transparent 0 25%, var(--c) 0 50%, transparent 0 75%, var(--c) 0) 12px 12px/24px 24px,
conic-gradient(from 45deg, var(--c) 0 25%, transparent 0 50%, var(--c) 0 75%, transparent 0)/24px 24px;
}
.card {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 32, 96, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 12px rgba(0, 32, 96, 0.15);
}
.btn-primary {
background: var(--vlc-navy);
color: white;
transition: background 0.2s ease;
}
.btn-primary:hover {
background: var(--vlc-navy-700);
}
.btn-accent {
background: var(--vlc-leaf);
color: var(--vlc-navy);
transition: background 0.2s ease;
}
.btn-accent:hover {
background: var(--vlc-leaf);
opacity: 0.9;
}
/* Ensure feather icons are visible */
[data-feather] {
display: inline-block;
vertical-align: middle;
}
|