diff --git a/public/styles.css b/public/styles.css index 89bec0b..9da0521 100644 --- a/public/styles.css +++ b/public/styles.css @@ -58,7 +58,7 @@ --line-strong:#0A0A0A; --paper: #FFFFFF; --paper-2:#F6F6F4; - --signal:#FFE600; + --signal:#0A0A0A; --wrap: 1200px; --grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; } @@ -314,7 +314,7 @@ p, li { text-wrap: pretty; } .signal-bar { background: var(--black); color: var(--paper); - border-bottom: 4px solid var(--signal); + border-bottom: 1px solid #2B2B2B; } .signal-inner { min-height: 76px; @@ -331,7 +331,7 @@ p, li { text-wrap: pretty; } font-weight: 800; } .signal-inner strong { - color: var(--signal); + color: var(--paper); } .signal-inner strong::before { content: "+ "; @@ -343,9 +343,10 @@ p, li { text-wrap: pretty; } } .signal-inner a { color: var(--black); - background: var(--signal); + background: var(--paper); + border: 1.5px solid var(--paper); padding: 12px 16px; - box-shadow: 4px 4px 0 #000000, inset 0 1px 0 rgba(255,255,255,.35); + box-shadow: inset 0 -2px 0 rgba(10,10,10,.14); } /* ============================================================ @@ -376,7 +377,7 @@ p, li { text-wrap: pretty; } content: ""; width: 8px; height: 8px; - background: var(--signal); + background: var(--black); border: 1.5px solid var(--black); } .hero-title { @@ -445,7 +446,7 @@ p, li { text-wrap: pretty; } } .visual-label .dot { width: 7px; height: 7px; - background: var(--signal); + background: var(--black); border: 1.5px solid var(--black); border-radius: 50%; } @@ -528,7 +529,7 @@ p, li { text-wrap: pretty; } .mission-rail { background: #191919; color: var(--paper); - border-bottom: 5px solid var(--signal); + border-bottom: 1px solid #2B2B2B; padding: 34px 0 44px; } .mission-head { @@ -546,7 +547,7 @@ p, li { text-wrap: pretty; } text-transform: uppercase; font-weight: 800; } -.mission-head span { color: var(--signal); } +.mission-head span { color: var(--paper); } .mission-head span::before { content: "+ "; } .mission-track { position: relative; @@ -561,7 +562,7 @@ p, li { text-wrap: pretty; } top: 15px; height: 2px; background: - linear-gradient(90deg, var(--signal) 0 38%, #5B5B5B 38% 100%); + linear-gradient(90deg, var(--paper) 0 38%, #5B5B5B 38% 100%); } .mission-step { position: relative; @@ -575,14 +576,14 @@ p, li { text-wrap: pretty; } width: 22px; height: 22px; transform: translateX(-50%); - border: 3px solid var(--signal); + border: 3px solid var(--paper); border-radius: 50%; background: #191919; } .mission-step.is-done span, .mission-step.is-active span { - background: var(--signal); - box-shadow: 0 0 0 7px rgba(255,230,0,.1); + background: var(--paper); + box-shadow: 0 0 0 7px rgba(255,255,255,.08); } .mission-step b { display: block; @@ -637,7 +638,7 @@ p, li { text-wrap: pretty; } .product-ui { border: 1.5px solid var(--black); background: var(--paper); - box-shadow: 18px 18px 0 var(--signal), 19.5px 19.5px 0 var(--black); + box-shadow: 18px 18px 0 #D8D8D5, 19.5px 19.5px 0 var(--black); overflow: hidden; } .ui-top { @@ -667,10 +668,10 @@ p, li { text-wrap: pretty; } .ui-status i { width: 7px; height: 7px; - background: var(--signal); + background: var(--black); border: 1px solid var(--black); border-radius: 50%; - box-shadow: 0 0 0 5px rgba(255,230,0,.24); + box-shadow: 0 0 0 5px rgba(10,10,10,.08); } .ui-layout { display: grid; @@ -726,7 +727,8 @@ p, li { text-wrap: pretty; } .ui-pill { flex: none; border: 1px solid var(--black); - background: var(--signal); + background: var(--black); + color: var(--paper); padding: 7px 10px; font-size: 12px; font-weight: 800; @@ -757,8 +759,8 @@ p, li { text-wrap: pretty; } background: #EFEFEA; } .ui-flow .active { - color: var(--black); - background: var(--signal); + color: var(--paper); + background: var(--black); } .ui-metrics { display: grid; @@ -809,8 +811,8 @@ p, li { text-wrap: pretty; } font-weight: 700; } .ui-row.is-hot b { - color: var(--black); - background: var(--signal); + color: var(--paper); + background: var(--black); padding: 5px 7px; } .ui-row.is-done { @@ -1104,7 +1106,7 @@ section[id] { scroll-margin-top: 92px; } .event-section { background: var(--black); color: var(--paper); - border-top: 5px solid var(--signal); + border-top: 1px solid #2B2B2B; padding: 64px 0; } .event-section .section-head { @@ -1144,7 +1146,7 @@ section[id] { scroll-margin-top: 92px; } } .event-card:hover { transform: translateY(-1px); - box-shadow: inset 0 4px 0 var(--signal); + box-shadow: inset 0 4px 0 var(--paper); } .event-card h3 { font-size: 32px; @@ -1162,8 +1164,8 @@ section[id] { scroll-margin-top: 92px; } font-weight: 800; letter-spacing: .08em; text-transform: uppercase; - color: var(--signal); - border-bottom: 1.5px solid var(--signal); + color: var(--paper); + border-bottom: 1.5px solid var(--paper); } /* ============================================================ @@ -1373,7 +1375,7 @@ section[id] { scroll-margin-top: 92px; } grid-template-columns: 1fr; gap: 10px; padding-top: 18px; - padding-bottom: 18px; + padding-bottom: 28px; } .signal-inner a { justify-self: start; } .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 84px 32px 72px; } @@ -1419,7 +1421,7 @@ section[id] { scroll-margin-top: 92px; } bottom: 0; width: 2px; height: auto; - background: linear-gradient(180deg, var(--signal) 0 45%, #5B5B5B 45% 100%); + background: linear-gradient(180deg, var(--paper) 0 45%, #5B5B5B 45% 100%); } .mission-step { min-height: 82px; @@ -1431,7 +1433,7 @@ section[id] { scroll-margin-top: 92px; } transform: none; } .proof-points div { grid-template-columns: 1fr; gap: 4px; } - .product-ui { box-shadow: 10px 10px 0 var(--signal), 11.5px 11.5px 0 var(--black); } + .product-ui { box-shadow: 10px 10px 0 #D8D8D5, 11.5px 11.5px 0 var(--black); } .ui-layout { grid-template-columns: 1fr; min-height: 0; } .ui-sidebar { display: grid;