/* Übermedia site stylesheet */ @import url("tokens.df6981192293.css"); :root { line-height: 1.5; font-size: 18px; font-weight: 300; color: var(--fg); --button-width: 160px; } span.pink { color: var(--pink); } span.blue { color: var(--blue); } body { margin: 0; padding: 0; background-color: var(--bg); line-height: 1.5; font-family: var(--body-font) } /* Email clients (Outlook) don't inherit font/color from , so state them on the text elements directly; headings and .tagline override below. */ p, td, li, a, span, h3 { font-family: var(--body-font); } p, li { color: var(--fg); font-size: 18px; line-height: 1.5; } .banner img { display: block; position: relative; z-index: 1; width: 100%; } .content { position: relative; margin: -21% auto 0; z-index: 2; max-width: 640px; padding: 50px 20px 20px; border-radius: 15px 15px 0 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)); } .content div { margin: 35px auto; } .content-full-width { margin: 0 auto; max-width: 80%; } .help { padding-top: 15px; width: 100%; } .help img { max-width: 100%; margin-top: 20px; height: auto; } a { color: var(--blue); } h1, h2 { font-family: var(--heading-font); color: var(--blue); text-transform: lowercase; } h1 { margin-bottom: 25px; border-bottom: solid var(--blue) 1px; background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 61%); line-height: 1.2; font-size: 34px; font-weight: lighter; } h2 { display: table; margin: 10px 0 0 0; font-size: 24px; font-weight: 400; letter-spacing: 2px; } h3 { display: inline; margin: 0; color: var(--pink); font-weight: 300; text-transform: lowercase; } h4 { margin-top: 7px; text-align: center; font-size: .9rem; font-weight: 300; text-transform: lowercase; } h4 a { font-size: .9rem; } h4 a:hover { font-weight: bolder } h4 a:visited { color: var(--gray-light); } ul.bullets li:not(:last-child) { margin-bottom: 10px; } .pink { color: var(--pink); } .field-row { display: grid; grid-template-columns: 1fr 240px 1fr; align-items: center; margin: 0 0 20px; } .field-row .label { grid-column: 1; justify-self: end; width: 220px; margin-right: 12px; text-align: right; font-size: 0.9rem; text-transform: lowercase; font-weight: bolder } .field-row .value { grid-column: 2; font-size: 16px; text-align: left; } .field-row input.value { padding: 8px; background-color: #2a2a2a; color: #e0e0e0; border: 1px solid #555555; border-radius: 4px; box-sizing: border-box; } /* Flat label/value row for emails — CSS grid (.field-row above) doesn't survive inlining, so email templates use .field instead. */ .field { margin: 0 0 6px; } .field .label { display: inline-block; min-width: 110px; font-weight: bold; text-transform: lowercase; color: var(--gray-light); } .tagline { margin: 40px 0; padding: 10px 0; border-top: solid var(--blue) 1px; line-height: 1.5; text-align: center; font-family: var(--tagline-font); font-style: italic; color: var(--gray-light); } .button { display: block; max-width: var(--button-width); margin: 40px auto; padding: 10px 20px; background-color: var(--blue); border: none; border-radius: 4px; cursor: pointer; text-align: center; text-decoration: none; font-size: 16px; font-weight: bolder; color: #ffffff; } .button:hover { opacity: 0.9; } .error { color: #ff6b6b; } .muted { color: var(--gray-light); }