diff --git a/ceramic-coating.html b/ceramic-coating.html index 6cb0321..9fa70b3 100644 --- a/ceramic-coating.html +++ b/ceramic-coating.html @@ -18,24 +18,32 @@ margin: 1rem; } + + + .info-box { + background: + linear-gradient(var(--black) 0 0) padding-box, /*black background*/ + linear-gradient(to left, var(--gold), white, var(--gold)) border-box; + border: 5px solid transparent; + max-width: 80%; width: 80%; padding: 2rem 4rem;; border-radius: 4rem; height: min-content; - border: 2px solid var(--gold); - transition: border 1s ease; + /** border: 2px solid var(--gold); **/ + transition: 1s ease; } .info-box:hover { - border: 2px solid white; } - .info-box h1, p { - color: white; - text-wrap: pretty; + .info-box h1 { + color: var(--gold); + } + .info-box h2 { + color: white; } - .info-flex { display: flex; flex-direction: row; @@ -61,16 +69,27 @@ max-width: 100%; } - li { + #allIncludeList li { text-wrap: nowrap; list-style-position: inside; padding: 0rem; margin: .5rem .5rem; } - li::marker { + + #allIncludeList li::marker { content: "✓ "; - color: var(--gold); - } + } + + ol li ul { + padding-left: 1rem; + } + li { + color: white; + text-align: left; + } + li::marker { + color: var(--gold); + } /** MOBILE */ @media screen and (max-width: 850px) { @@ -120,28 +139,42 @@
some headline details can go in here, then:
dev note:maybe left-align list above, change bullet style, then use existing bullets as first list, then make sub-bullets for the distinguishing characteristics of each package with checkmark bullet?
+