dmncjsph/roof-rust-system

1:root {2  --bg: #f7f3ed;3  --surface: rgba(255, 255, 255, 0.88);4  --text: #201a15;5  --muted: #6c6258;6  --line: #ddd2c5;7  --primary: #8f4a1d;8  --primary-dark: #6f3712;9  --accent: #d6a16b;10  --success-bg: #e3f7ea;11  --success-text: #166534;12  --warn-bg: #fff2da;13  --warn-text: #8a5a00;14  --danger-bg: #fde3e3;15  --danger-text: #991b1b;16  --shadow: 0 16px 42px rgba(84, 50, 20, 0.12);17  --radius: 20px;18}19 20* {21  box-sizing: border-box;22}23 24body {25  margin: 0;26  font-family: "Segoe UI", Arial, sans-serif;27  background:28    radial-gradient(circle at top left, rgba(214, 161, 107, 0.18), transparent 28%),29    linear-gradient(180deg, #fbf8f4 0%, #efe7dd 100%);30  color: var(--text);31}32 33a {34  text-decoration: none;35}36 37.container {38  width: min(1400px, calc(100% - 32px));39  margin: 0 auto;40}41 42.site-header {43  position: sticky;44  top: 0;45  z-index: 20;46  backdrop-filter: blur(14px);47  background: rgba(250, 246, 241, 0.76);48  border-bottom: 1px solid rgba(122, 86, 52, 0.12);49}50 51.nav-wrap {52  display: flex;53  align-items: center;54  justify-content: space-between;55  min-height: 76px;56  gap: 20px;57}58 59.brand {60  font-size: 1.05rem;61  font-weight: 700;62  color: var(--primary-dark);63}64 65.nav-links {66  display: flex;67  gap: 10px;68  flex-wrap: wrap;69}70 71.nav-links a {72  color: var(--muted);73  padding: 10px 14px;74  border-radius: 999px;75  font-weight: 600;76  transition: 0.2s ease;77}78 79.nav-links a:hover,80.nav-links a.active {81  background: rgba(143, 74, 29, 0.12);82  color: var(--primary-dark);83}84 85.hero {86  display: grid;87  grid-template-columns: 1.1fr 0.9fr;88  gap: 28px;89  padding: 52px 0 28px;90  align-items: center;91}92 93.badge,94.section-tag {95  display: inline-block;96  padding: 8px 14px;97  border-radius: 999px;98  background: rgba(143, 74, 29, 0.1);99  color: var(--primary-dark);100  font-weight: 700;101  font-size: 0.82rem;102  letter-spacing: 0.03em;103}104 105.hero-text h1,106.page-intro h1 {107  font-size: clamp(2rem, 4vw, 3.2rem);108  line-height: 1.08;109  margin: 16px 0 14px;110}111 112.hero-text p,113.page-intro p,114.glass-card p,115.feature-card p,116.info-card p,117.empty-state p,118.team-info p {119  color: var(--muted);120  line-height: 1.75;121}122 123.hero-actions,124.action-row {125  display: flex;126  gap: 14px;127  flex-wrap: wrap;128  margin-top: 24px;129}130 131.btn {132  border: none;133  border-radius: 14px;134  padding: 13px 18px;135  font-size: 0.95rem;136  font-weight: 700;137  cursor: pointer;138  transition: 0.2s ease;139}140 141.btn-primary {142  background: linear-gradient(135deg, var(--primary), var(--primary-dark));143  color: white;144}145 146.btn-primary:hover {147  transform: translateY(-1px);148  box-shadow: 0 12px 24px rgba(143, 74, 29, 0.24);149}150 151.btn-secondary {152  background: #fff;153  color: var(--text);154  border: 1px solid var(--line);155}156 157.hero-grid,158.analyzer-layout,159.team-grid,160.feature-grid {161  display: grid;162  gap: 18px;163}164 165.glass-card,166.panel,167.info-card,168.team-card,169.feature-card {170  background: var(--surface);171  border: 1px solid rgba(255, 255, 255, 0.52);172  box-shadow: var(--shadow);173  border-radius: var(--radius);174}175 176.glass-card,177.info-card,178.team-card,179.feature-card {180  padding: 22px;181}182 183.panel {184  padding: 24px;185}186 187.page-intro {188  padding: 42px 0 22px;189}190 191.analyzer-layout {192  grid-template-columns: 1fr 1fr;193  align-items: start;194  margin-bottom: 50px;195}196 197.upload-box {198  min-height: 360px;199  border: 2px dashed #ccbba8;200  border-radius: 18px;201  background: #fcfbf9;202  display: flex;203  align-items: center;204  justify-content: center;205  text-align: center;206  padding: 18px;207  cursor: pointer;208  overflow: hidden;209}210 211.upload-main {212  font-size: 1.1rem;213  font-weight: 700;214}215 216.upload-sub {217  margin-top: 8px;218  color: var(--muted);219}220 221.preview-image {222  width: 100%;223  max-height: 260px;224  object-fit: contain;225  border-radius: 14px;226  background: #ffffff;227}228 229.status-message {230  margin-top: 16px;231  font-weight: 600;232  min-height: 24px;233  color: var(--primary-dark);234}235 236.result-badge {237  display: inline-block;238  padding: 10px 16px;239  border-radius: 999px;240  font-weight: 700;241  margin-bottom: 10px;242}243 244.badge-no-rust {245  background: var(--success-bg);246  color: var(--success-text);247}248 249.badge-slight {250  background: var(--warn-bg);251  color: var(--warn-text);252}253 254.badge-visible {255  background: #fde8c9;256  color: #9a3412;257}258 259.badge-heavy {260  background: var(--danger-bg);261  color: var(--danger-text);262}263 264.confidence-text {265  font-size: 1.05rem;266  font-weight: 700;267  margin-bottom: 16px;268}269 270.recommendation-list {271  padding-left: 18px;272  color: var(--muted);273  line-height: 1.7;274}275 276.prob-row {277  margin-bottom: 14px;278}279 280.prob-head {281  display: flex;282  justify-content: space-between;283  margin-bottom: 6px;284  color: var(--muted);285}286 287.prob-bar {288  height: 12px;289  border-radius: 999px;290  background: #eadfd1;291  overflow: hidden;292}293 294.prob-fill {295  height: 100%;296  background: linear-gradient(90deg, var(--primary), var(--accent));297}298 299.feature-section {300  padding: 18px 0 56px;301}302 303.section-heading {304  margin-bottom: 18px;305}306 307.feature-grid {308  grid-template-columns: repeat(3, 1fr);309}310 311.team-grid {312  grid-template-columns: repeat(4, minmax(0, 1fr));313  align-items: start;314  margin-bottom: 50px;315}316 317.team-card {318  display: flex;319  flex-direction: column;320  gap: 14px;321  min-width: 0;322}323 324.team-photo-frame {325  width: 100%;326  aspect-ratio: 1 / 1;327  overflow: hidden;328  border-radius: 18px;329  border: 2px solid #e6d7c8;330  background: #fcfbf9;331}332 333.team-photo {334  width: 100%;335  height: 100%;336  object-fit: cover;337  object-position: center;338  transform: scale(1.08);339}340 341.team-info h3,342.glass-card h3,343.feature-card h3,344.info-card h3 {345  margin-top: 0;346  margin-bottom: 10px;347  color: var(--primary-dark);348  font-size: 1rem;349}350 351.team-info p {352  margin: 6px 0;353  font-size: 0.9rem;354}355 356.hidden {357  display: none !important;358}359 360.empty-state {361  padding: 24px 4px;362}363 364@media (max-width: 1200px) {365  .team-grid {366    grid-template-columns: repeat(2, 1fr);367  }368}369 370@media (max-width: 960px) {371  .hero,372  .analyzer-layout,373  .feature-grid,374  .team-grid {375    grid-template-columns: 1fr;376  }377 378  .nav-wrap {379    flex-direction: column;380    align-items: flex-start;381    padding: 14px 0;382  }383}