separacao com o css

2026-06-09 00:24:16 -03:00
parent f741a3b564
commit c9060863a2
2 changed files with 183 additions and 51 deletions
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,148 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: Arial, sans-serif;
+  color: #1f2937;
+  background:
+    linear-gradient(135deg, rgba(199, 70, 52, 0.12), transparent 38%),
+    linear-gradient(225deg, rgba(31, 41, 55, 0.08), transparent 34%),
+    #f7f7f4;
+}
+
+main {
+  width: min(1120px, 92vw);
+  margin: 0 auto;
+  padding: 40px 0;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 72px;
+}
+
+.oracle-logo {
+  width: 132px;
+  height: auto;
+  flex: 0 0 auto;
+  display: block;
+}
+
+h1 {
+  max-width: 760px;
+  margin: 0;
+  font-size: clamp(2.75rem, 7vw, 5.5rem);
+  line-height: 0.95;
+  letter-spacing: 0;
+  color: #161616;
+}
+
+p {
+  margin: 0;
+  line-height: 1.6;
+}
+
+.header-title {
+  color: #4b5563;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero {
+  max-width: 860px;
+}
+
+.eyebrow {
+  margin-bottom: 18px;
+  color: #c74634;
+  font-size: 0.86rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.lead {
+  max-width: 720px;
+  margin-top: 24px;
+  color: #374151;
+  font-size: 1.2rem;
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 32px;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0 20px;
+  border-radius: 4px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.button-primary {
+  color: #ffffff;
+  background: #312d2a;
+}
+
+.button-secondary {
+  color: #312d2a;
+  border: 1px solid #9ca3af;
+  background: rgba(255, 255, 255, 0.58);
+}
+
+.benefits {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+  margin-top: 56px;
+}
+
+.benefit {
+  min-height: 150px;
+  padding: 22px;
+  border: 1px solid #dedbd2;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.benefit h2 {
+  margin: 0 0 10px;
+  color: #161616;
+  font-size: 1.05rem;
+}
+
+.benefit p {
+  color: #4b5563;
+  font-size: 0.96rem;
+}
+
+@media (max-width: 720px) {
+  main {
+    padding: 28px 0;
+  }
+
+  .page-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 12px;
+    margin-bottom: 48px;
+  }
+
+  .benefits {
+    grid-template-columns: 1fr;
+  }
+}