/* HTML5 */ html { height:100%; width:100%; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } body, button, input, select, textarea { font-family: inherit!important;} html, body, h1, h2, h3, h4, h5, h6, p, em, strong, abbr, acronym, blockquote, q, cite, ins, del, dfn, a, div, span, pre, hr, address, br, b, i, sub, sup, big, small, tt, table, tr, caption, thead, tbody, tfoot, col, colgroup, form, input, label, textarea, button, fieldset, legend, select, option, optiongroup, ul, ol, li, dl, dt, dd, code, var, kdb, samp, img, object, param, map, area, bdo, iframe, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { padding:0; margin:0; outline:0; font-size:100%; } a:focus { -moz-outline-style:none; } html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} /* text mobile */ abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle;} svg:not(:root) { overflow: hidden; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; *overflow: visible; } table button, table input { *overflow: auto; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0;} /* The guest site: landing, features, sign-up, log in, password reset and OAuth connect. It replaces guest-new.index.css and the Bootstrap 2.3 in thirdparty.css, which the guest layout no longer loads — hence the Bootstrap-shaped names (.btn, .alert, .control-group, .input-block-level, .form-signup) near the bottom, kept for four FOSUser/HWIOAuth templates. Colours are the app's own: the dark set from style.css, the .theme-mint set from theme-light.css, switched by the same the app uses. */ :root { --sw-band-a: #1a5346; --sw-band-b: #194541; --sw-band-b-rgb: 25, 69, 65; --sw-sheet-a: #1a5346; --sw-sheet-b: #194541; --sw-deep: #14292f; --sw-drawer: #112328; --sw-today: #1a6e4f; --sw-ink: #ffffff; --sw-mute: rgba(255, 255, 255, 0.74); --sw-faint: rgba(255, 255, 255, 0.62); --sw-div: #305c56; --sw-rule: #2b5a52; --sw-rec: #28b5d8; --sw-chip-bg: rgba(255, 255, 255, 0.06); --sw-chip-ring: rgba(255, 255, 255, 0.12); --sw-card: rgba(255, 255, 255, 0.04); --sw-card-ring: rgba(255, 255, 255, 0.09); --sw-field: rgba(255, 255, 255, 0.06); --sw-field-ring: rgba(255, 255, 255, 0.16); --sw-accent: #1cbd6c; --sw-accent-hi: #21d47a; --sw-on-accent: #06261a; --sw-soon-bg: rgba(255, 189, 92, 0.16); --sw-soon-ink: #ffc978; --sw-soon-ring: rgba(255, 189, 92, 0.38); --sw-over-bg: rgba(255, 88, 82, 0.2); --sw-over-ink: #ff9d90; --sw-over-ring: rgba(255, 112, 100, 0.5); --sw-list-bg: rgba(73, 202, 137, 0.14); --sw-list-ink: #7fdcae; --sw-list-ring: rgba(73, 202, 137, 0.32); --sw-gmark: #6f9cf5; --sw-md-link: #4fd894; --sw-md-link-rule: rgba(79, 216, 148, 0.42); --sw-lift: 0 1px 2px rgba(0, 0, 0, 0.16), 0 24px 60px -30px rgba(0, 0, 0, 0.75); --sw-logo-filter: none; --sw-panel-end: #14292f; --sw-wrap: 1440px; --sw-gutter: 56px; color-scheme: dark; } .theme-mint { --sw-band-a: #0f5c3a; --sw-band-b: #17724a; --sw-band-b-rgb: 23, 114, 74; --sw-sheet-a: #eaf4ec; --sw-sheet-b: #e4f0e7; --sw-deep: #eaf4ec; --sw-drawer: #112328; --sw-today: #ffffff; --sw-ink: #123024; --sw-mute: #3f5c4c; --sw-faint: #557060; --sw-div: #cbdfd1; --sw-rule: #d3e4d8; --sw-rec: #0c6e88; --sw-chip-bg: #deebe1; --sw-chip-ring: #cde0d3; --sw-card: #ffffff; --sw-card-ring: #cbdfd1; --sw-field: #ffffff; --sw-field-ring: #cbdfd1; --sw-soon-bg: #f8ebd3; --sw-soon-ink: #8a5906; --sw-soon-ring: #e2c48a; --sw-over-bg: #f8e1dd; --sw-over-ink: #a93027; --sw-over-ring: #e7ada4; --sw-list-bg: rgba(73, 202, 137, 0.18); --sw-list-ink: #1d7a4e; --sw-list-ring: rgba(73, 202, 137, 0.42); --sw-gmark: #3563c6; --sw-md-link: #157347; --sw-md-link-rule: rgba(21, 115, 71, 0.42); --sw-lift: 0 1px 2px rgba(18, 48, 36, 0.05), 0 14px 34px -20px rgba(18, 48, 36, 0.4); --sw-logo-filter: brightness(0.82) saturate(1.15); --sw-panel-end: #0b4028; color-scheme: light; } /* ------------------------------------------------------------------ base */ *, *:before, *:after { box-sizing: border-box; } html, body { height: auto; } /* reset.css declares `body, button, input, select, textarea { font-family: inherit!important }`, which nothing on can outrank. The family therefore goes on , and body, the buttons and the inputs all inherit it — which is exactly what that !important asks for. */ html { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body.guest { margin: 0; background: var(--sw-sheet-b); color: var(--sw-ink); font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* :where() carries no specificity, so these resets never outrank a component rule that sets a margin or a colour on the same element. Written as plain `body.guest p` they did — the buttons ended up painting their label in the link green. */ :where(body.guest) :where(h1, h2, h3, h4, h5, p, ul, ol, figure) { margin: 0; padding: 0; } :where(body.guest) :where(ul, ol) { list-style: none; } :where(body.guest) :where(img) { max-width: 100%; height: auto; } /* height: auto so a width/height attribute pair never survives as a fixed height once CSS resizes the width */ :where(body.guest) :where(a) { color: var(--sw-accent); text-decoration: none; } :where(body.guest) :where(a):hover { color: var(--sw-accent-hi); } .sw-wrap { width: 100%; max-width: var(--sw-wrap); margin: 0 auto; padding: 0 var(--sw-gutter); } /* The hero and the features intro carry the header's green down onto the sheet. A plain two-stop ramp creases at both ends — flat green, then an abrupt change of rate, then flat sheet — and on the mint theme that crease reads as a jump, because sRGB interpolation from a saturated green to a near-white spends most of its length already light. These stops trace a smoothstep instead, so the fade leaves the green and lands on the sheet with no visible edge. --sw-band-b-rgb exists only to give the stops an alpha; each section sets the length of the fade with background-size, since the stops are all percentages. */ :root { --sw-fade: linear-gradient(180deg, rgba(var(--sw-band-b-rgb), 1) 0, rgba(var(--sw-band-b-rgb), 0.957) 12.5%, rgba(var(--sw-band-b-rgb), 0.844) 25%, rgba(var(--sw-band-b-rgb), 0.684) 37.5%, rgba(var(--sw-band-b-rgb), 0.5) 50%, rgba(var(--sw-band-b-rgb), 0.316) 62.5%, rgba(var(--sw-band-b-rgb), 0.156) 75%, rgba(var(--sw-band-b-rgb), 0.043) 87.5%, rgba(var(--sw-band-b-rgb), 0) 100%); } .sw-band { background: linear-gradient(180deg, var(--sw-band-a), var(--sw-band-b)); } .sw-eyebrow { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sw-accent); } .sw-h1 { font-size: 66px; line-height: 72px; font-weight: 300; letter-spacing: -1.4px; } .sw-h2 { font-size: 42px; line-height: 50px; font-weight: 300; letter-spacing: -0.8px; } .sw-h3 { font-size: 34px; line-height: 42px; font-weight: 300; letter-spacing: -0.6px; } .sw-lead { font-size: 19px; line-height: 30px; font-weight: 300; color: var(--sw-mute); } .sw-center { text-align: center; } .sw-measure { max-width: 640px; margin-left: auto; margin-right: auto; } /* ------------------------------------------------------------------ header */ .sw-header { position: relative; z-index: 20; background: linear-gradient(180deg, var(--sw-band-a), var(--sw-band-b)); } .sw-header-inner { display: flex; align-items: center; gap: 32px; height: 76px; } .sw-brand { display: flex; align-items: flex-start; gap: 5px; } .sw-logo { display: block; line-height: 0; } .sw-logo img { height: 30px; width: auto; filter: var(--sw-logo-filter); } .sw-logo-beta { margin: 0; font-size: 11px; line-height: 1; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.45); } .sw-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 400; } .sw-nav a { color: rgba(255, 255, 255, 0.72); } .sw-nav a:hover { color: #fff; } .sw-nav a.is-current { color: #fff; font-weight: 600; } /* the language menu, without the Bootstrap dropdown it used to lean on */ .sw-lang { position: relative; } .sw-lang-current { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 4px; color: rgba(255, 255, 255, 0.72); cursor: default; } .sw-lang-caret { width: 9px; height: 9px; opacity: 0.7; } .sw-lang-menu { position: absolute; right: 0; top: 100%; min-width: 130px; padding: 6px 0; border-radius: 10px; background: var(--sw-drawer); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s; } .sw-lang:hover .sw-lang-menu, .sw-lang:focus-within .sw-lang-menu { opacity: 1; visibility: visible; transform: none; } .sw-lang-menu a { display: block; padding: 8px 16px; font-size: 14px; color: rgba(255, 255, 255, 0.72); } .sw-lang-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .sw-theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 50%; background: none; color: rgba(255, 255, 255, 0.85); cursor: pointer; } .sw-theme-toggle:hover { border-color: rgba(255, 255, 255, 0.6); } .sw-theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; } .sw-theme-toggle .sw-theme-icon { display: none; } [data-sw-theme="auto"] .sw-theme-toggle .sw-theme-auto, [data-sw-theme="light"] .sw-theme-toggle .sw-theme-sun, [data-sw-theme="dark"] .sw-theme-toggle .sw-theme-moon { display: block; } /* the burger only exists below the tablet breakpoint */ .sw-nav-check { display: none; } .sw-nav-burger { display: none; } /* ------------------------------------------------------------------ buttons */ .sw-btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border: 0; border-radius: 26px; background: var(--sw-accent); color: var(--sw-on-accent); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-align: center; cursor: pointer; } .sw-btn:hover { background: var(--sw-accent-hi); color: var(--sw-on-accent); } .sw-btn--ghost { background: none; border: 1px solid var(--sw-div); color: var(--sw-mute); font-weight: 400; } .sw-btn--ghost:hover { background: none; border-color: var(--sw-ink); color: var(--sw-ink); } .sw-btn--onband { border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.85); } .sw-btn--onband:hover { border-color: #fff; color: #fff; } .sw-btn--sm { height: 38px; padding: 0 20px; border-radius: 19px; font-size: 14px; } .sw-btn--block { display: flex; width: 100%; } .sw-btn-row { display: flex; justify-content: center; align-items: center; gap: 16px; } .sw-chip { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; border-radius: 15px; background: var(--sw-chip-bg); box-shadow: inset 0 0 0 1px var(--sw-chip-ring); font-size: 12px; letter-spacing: 0.3px; color: var(--sw-mute); } .sw-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sw-accent); } /* ------------------------------------------------------------------ hero */ .sw-hero { padding: 84px 0 0; text-align: center; background: var(--sw-fade) 0 0 / 100% 168px no-repeat, linear-gradient(180deg, var(--sw-sheet-a), var(--sw-sheet-b)); } .sw-hero h1 { margin-top: 26px; } .sw-hero .sw-lead { margin-top: 24px; } .sw-hero .sw-btn-row { margin-top: 34px; } .sw-hero-fine { margin-top: 24px; font-size: 13px; color: var(--sw-faint); } /* The board. A flat render for now — /demo will take this slot later, which is why the figure owns the sizing and the image inside it is replaceable without touching layout. */ .sw-board { padding: 54px 0 0; } .sw-board-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-size: 13px; color: var(--sw-faint); } .sw-board-note svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; } @media (max-width: 640px) { .sw-board-note { align-items: flex-start; text-align: left; } .sw-board-note svg { margin-top: 3px; } } .sw-board-shot { display: block; width: 100%; height: auto; } /* The board render on a phone: five columns scaled to 350px are unreadable, so below the tablet breakpoint the hero shows the phone board instead — which is what the app itself does at that width. */ .sw-board-phone { display: none; width: 320px; max-width: 100%; height: auto; margin: 0 auto; } /* The theme swap lives on a wrapper, never on the image, so it never has to outrank the display an image component sets on itself. */ .sw-only-dark, .sw-only-mint { display: block; } .sw-only-mint { display: none; } .theme-mint .sw-only-dark { display: none; } .theme-mint .sw-only-mint { display: block; } /* ------------------------------------------------------------------ sections */ .sw-section { padding: 96px 0 0; } .sw-section-head { text-align: center; } .sw-section-head .sw-lead { margin: 16px auto 0; max-width: 560px; font-size: 17px; line-height: 28px; } .sw-card { padding: 26px 24px 28px; border-radius: 12px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-card h3 { margin-top: 16px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--sw-ink); } .sw-card p { margin-top: 9px; font-size: 14px; line-height: 23px; font-weight: 300; color: var(--sw-mute); } .sw-card-icon { color: var(--sw-accent); line-height: 0; } .sw-card-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .sw-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 52px; } .sw-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } /* phone block */ .sw-phone-block { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; align-items: center; padding: 56px 60px; border-radius: 16px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-phone-block h2 { font-size: 40px; line-height: 48px; font-weight: 300; letter-spacing: -0.8px; } .sw-phone-block > div > .sw-lead { margin-top: 18px; max-width: 500px; font-size: 17px; line-height: 29px; } .sw-ticks { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; } .sw-tick { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 24px; color: var(--sw-ink); } .sw-tick svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--sw-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sw-phone-shot { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 42px; } /* theme swatch pair */ .sw-swatches { display: flex; gap: 10px; margin-bottom: 22px; } .sw-swatch { position: relative; width: 74px; height: 52px; border-radius: 8px; overflow: hidden; } .sw-swatch--dark { background: linear-gradient(180deg, #1a5346, #194541); } .sw-swatch--mint { background: linear-gradient(180deg, #eaf4ec, #e4f0e7); box-shadow: inset 0 0 0 1px #cbdfd1; } .sw-swatch i { position: absolute; left: 26px; top: 0; bottom: 0; width: 22px; } .sw-swatch--dark i { background: #1a6e4f; } .sw-swatch--mint i { background: #ffffff; } .sw-langs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; height: 52px; font-size: 15px; color: var(--sw-ink); } .sw-langs span { padding: 6px 12px; border-radius: 14px; background: var(--sw-chip-bg); box-shadow: inset 0 0 0 1px var(--sw-chip-ring); } .sw-icon-pair { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; height: 52px; color: var(--sw-accent); } .sw-icon-pair svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* closing call to action */ .sw-cta { margin-top: 100px; padding: 78px var(--sw-gutter) 84px; border-radius: 16px; text-align: center; background: linear-gradient(180deg, var(--sw-band-a), var(--sw-band-b)); } .sw-cta h2 { font-size: 44px; line-height: 52px; font-weight: 300; letter-spacing: -0.9px; color: #fff; } .sw-cta p { margin: 16px auto 0; max-width: 520px; font-size: 17px; line-height: 28px; color: rgba(255, 255, 255, 0.72); } .sw-cta .sw-btn-row { margin-top: 34px; } /* ------------------------------------------------------------------ footer */ .sw-footer { margin-top: 72px; padding: 34px 0; background: var(--sw-drawer); } .sw-footer-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .sw-footer .sw-brand { align-items: baseline; } .sw-footer img { height: 22px; width: auto; } .sw-footer-beta { font-size: 12px; color: rgba(255, 255, 255, 0.34); } .sw-footer-links { display: flex; gap: 26px; margin-left: auto; font-size: 13px; } .sw-footer-links a { color: rgba(255, 255, 255, 0.5); } .sw-footer-links a:hover { color: #fff; } .sw-footer-copy { font-size: 13px; color: rgba(255, 255, 255, 0.34); } /* ------------------------------------------------------------------ features page */ .sw-page-intro { padding: 78px 0 0; text-align: center; background: var(--sw-fade) 0 0 / 100% 156px no-repeat, linear-gradient(180deg, var(--sw-sheet-a), var(--sw-sheet-b)); } .sw-page-intro h1 { font-size: 54px; line-height: 62px; font-weight: 300; letter-spacing: -1.1px; } .sw-page-intro .sw-lead { margin: 20px auto 0; max-width: 610px; font-size: 18px; } .sw-rows { display: flex; flex-direction: column; gap: 28px; padding-top: 72px; } .sw-row { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 64px; align-items: center; padding: 48px 52px; border-radius: 16px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-row--flip { grid-template-columns: minmax(0, 1fr) 480px; } .sw-row h2 { margin-top: 12px; font-size: 34px; line-height: 42px; font-weight: 300; letter-spacing: -0.6px; } .sw-row p { margin-top: 16px; font-size: 16px; line-height: 27px; font-weight: 300; color: var(--sw-mute); } /* ------------------------------------------------------------------ legal pages */ .sw-page-intro .sw-legal-date { margin-top: 14px; font-size: 14px; color: var(--sw-faint); } .sw-legal { max-width: 760px; margin: 0 auto; padding: 64px 0 88px; font-weight: 300; } .sw-legal > section + section { margin-top: 44px; } .sw-legal h2 { font-size: 28px; line-height: 36px; font-weight: 300; letter-spacing: -0.5px; } .sw-legal h3 { margin-top: 28px; font-size: 17px; line-height: 26px; font-weight: 600; } .sw-legal p { margin-top: 14px; font-size: 16px; line-height: 28px; color: var(--sw-mute); } .sw-legal ul { margin-top: 14px; padding-left: 22px; list-style: disc; } .sw-legal li { margin-top: 10px; font-size: 16px; line-height: 28px; color: var(--sw-mute); } .sw-legal b { font-weight: 600; color: var(--sw-ink); } .sw-legal a { color: var(--sw-accent-hi); text-decoration: underline; } .sw-legal a:hover { color: var(--sw-ink); } .sw-legal code { padding: 2px 6px; border-radius: 5px; background: var(--sw-chip-bg); box-shadow: inset 0 0 0 1px var(--sw-chip-ring); font-family: Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; } /* the little board fragments that illustrate each feature */ .sw-vig { border-radius: 12px; background: linear-gradient(180deg, var(--sw-sheet-a), var(--sw-sheet-b)); box-shadow: var(--sw-lift); } .sw-vig--perm { background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-vig-pad { padding: 22px 26px 24px; } .sw-vig-col { padding: 18px 0 20px; } .sw-vig-col h4 { text-align: center; font-size: 18px; font-weight: 300; } .sw-vig-col .sw-vig-date { text-align: center; font-size: 11px; margin-top: 2px; color: var(--sw-mute); } .sw-vig-list { margin: 16px 16px 0; } .sw-vig-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--sw-rule); font-size: 13px; line-height: 20px; font-weight: 300; } .sw-vig-pad .sw-vig-row { padding: 9px 0; font-size: 14px; line-height: 21px; } .sw-vig-row span.sw-vig-text { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.5; } .theme-mint .sw-vig-row span.sw-vig-text { opacity: 1; color: var(--sw-mute); } .sw-vig-row.is-done span.sw-vig-text { opacity: 0.25; text-decoration: line-through; } .theme-mint .sw-vig-row.is-done span.sw-vig-text { opacity: 0.4; } .sw-vig-row.is-recurring span.sw-vig-text { opacity: 1; color: var(--sw-rec); } .sw-vig-blank { border-top: 1px solid var(--sw-rule); height: 28px; } .sw-vig-today { background: var(--sw-today); border-radius: 12px; } .sw-vig-today .sw-vig-row, .sw-vig-today .sw-vig-blank { border-top-color: var(--sw-rule); } .sw-vig-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: center; } .sw-vig-arrow { width: 26px; height: 26px; fill: none; stroke: var(--sw-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sw-badge { flex-shrink: 0; height: 16px; padding: 0 6px; border-radius: 9px; font-size: 10px; line-height: 16px; letter-spacing: 0.2px; background: var(--sw-chip-bg); color: var(--sw-mute); box-shadow: inset 0 0 0 1px var(--sw-chip-ring); } .sw-badge--soon { background: var(--sw-soon-bg); color: var(--sw-soon-ink); box-shadow: inset 0 0 0 1px var(--sw-soon-ring); } .sw-badge--over { background: var(--sw-over-bg); color: var(--sw-over-ink); box-shadow: inset 0 0 0 1px var(--sw-over-ring); } .sw-badge--list { position: relative; overflow: hidden; background: var(--sw-list-bg); color: var(--sw-list-ink); box-shadow: inset 0 0 0 1px var(--sw-list-ring); } .sw-badge--list i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(73, 202, 137, 0.34); } .sw-badge--list b { position: relative; font-weight: inherit; } .sw-gmark { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--sw-gmark); } .sw-vig-perm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; overflow: hidden; padding: 24px 0 20px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-vig-perm-cols > div { border-left: 1px solid var(--sw-div); padding: 0 16px; } .sw-vig-perm-cols > div:first-child { border-left: 0; } .sw-gcal { display: flex; align-items: center; gap: 22px; } .sw-gcal-event { flex-shrink: 0; width: 168px; padding: 16px 16px 18px; border-radius: 12px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); } .sw-gcal-event .sw-gcal-bar { border-left: 3px solid var(--sw-gmark); padding-left: 10px; } .sw-gcal-title { font-size: 13px; font-weight: 600; color: var(--sw-ink); } .sw-gcal-time { font-size: 12px; font-weight: 300; color: var(--sw-mute); margin-top: 2px; } .sw-vig-label { font-size: 11px; color: var(--sw-faint); margin-bottom: 12px; } /* markdown: what you type on the left, what the row shows on the right */ .sw-md { display: flex; align-items: center; gap: 18px; } .sw-md > .sw-vig { flex: 1 1 0; min-width: 0; } .sw-md-row { display: flex; align-items: center; min-width: 0; padding: 9px 0; border-top: 1px solid var(--sw-rule); font-size: 14px; line-height: 21px; font-weight: 300; color: var(--sw-mute); } .sw-md-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-md-raw .sw-md-row { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12.5px; } .sw-md-mark { color: var(--sw-md-link); opacity: 0.72; } .sw-md-out b { font-weight: 600; color: var(--sw-ink); } .sw-md-out i { font-style: italic; } .sw-md-out a { color: var(--sw-md-link); text-decoration: none; border-bottom: 1px solid var(--sw-md-link-rule); } /* drag and drop: the task is in the air, the slot it left is still open */ .sw-vig-ghost { height: 34px; margin-top: 6px; border-radius: 7px; border: 1px dashed var(--sw-div); } .sw-drag-card { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 10px; border-radius: 7px; background: var(--sw-today); box-shadow: var(--sw-lift); transform: rotate(-1.6deg); font-size: 13px; line-height: 20px; font-weight: 300; color: var(--sw-ink); } .sw-drag-card > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-drag-grip { flex-shrink: 0; width: 9px; height: 15px; fill: currentColor; opacity: 0.38; } /* ------------------------------------------------------------------ auth pages */ /* The sign-up and log-in pages carry their own header inside the left panel, so the site nav is hidden on them — two logos stacked is what it looks like otherwise. */ body.auth-page .sw-header { display: none; } .sw-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .sw-auth-aside { display: flex; flex-direction: column; padding: 48px 64px 56px; background: linear-gradient(160deg, var(--sw-band-a), var(--sw-band-b) 45%, var(--sw-panel-end)); } .sw-auth-aside h2 { margin: auto 0 0; max-width: 460px; font-size: 40px; line-height: 50px; font-weight: 300; letter-spacing: -0.8px; color: #fff; } .sw-auth-aside p { margin-top: 18px; max-width: 420px; font-size: 16px; line-height: 27px; color: rgba(255, 255, 255, 0.6); } .sw-auth-aside .sw-logo img { filter: none; } .sw-auth-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; margin: 40px 0 auto; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #1a5346, #194541); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 24px 60px -30px rgba(0, 0, 0, 0.75); } .sw-auth-board > div { padding: 18px 0 20px; border-left: 1px solid #305c56; } .sw-auth-board > div:first-child { border-left: 0; } .sw-auth-board .is-today { background: #1a6e4f; } .sw-auth-board h4 { text-align: center; font-size: 17px; font-weight: 300; color: #fff; } .sw-auth-board .sw-auth-date { text-align: center; font-size: 10px; margin-top: 2px; color: rgba(255, 255, 255, 0.5); } .sw-auth-board ul { margin: 14px 14px 0; } .sw-auth-board li { padding: 5px 0; border-top: 1px solid #2b5a52; font-size: 12px; line-height: 18px; color: #fff; opacity: 0.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sw-auth-board .is-today li { border-top-color: #2c755c; } .sw-auth-board li.is-recurring { color: #28b5d8; opacity: 1; } .sw-auth-board li.is-blank { height: 24px; padding: 0; } .sw-auth-main { display: flex; flex-direction: column; padding: 40px 64px 48px; background: var(--sw-sheet-b); } .sw-auth-switch { display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-size: 14px; color: var(--sw-mute); } .sw-auth-form { width: 380px; max-width: 100%; margin: auto 0; align-self: center; } /* Honeypot: off-screen rather than display:none, which some form fillers skip. */ .sw-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .sw-auth-form h1 { font-size: 34px; line-height: 42px; font-weight: 300; letter-spacing: -0.6px; } .sw-auth-form > p { margin-top: 12px; font-size: 15px; line-height: 25px; color: var(--sw-mute); } .sw-auth-foot { display: flex; gap: 22px; font-size: 13px; color: var(--sw-faint); } .sw-auth-foot a { color: var(--sw-faint); } .sw-auth-foot a:hover { color: var(--sw-mute); } .sw-auth-foot .sw-auth-foot-end { margin-left: auto; } .sw-fine { margin-top: 18px; font-size: 12px; line-height: 20px; color: var(--sw-faint); text-align: center; } .sw-remember { display: flex; align-items: center; margin-top: 18px; font-size: 13px; color: var(--sw-mute); } .sw-remember input { width: 18px; height: 18px; margin: 0 9px 0 0; accent-color: var(--sw-accent); } .sw-remember a { margin-left: auto; color: var(--sw-mute); text-decoration: underline; } .sw-sep { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; } .sw-sep:before, .sw-sep:after { content: ''; flex-grow: 1; height: 1px; background: var(--sw-div); } .sw-sep span { font-size: 11px; letter-spacing: 1.2px; color: var(--sw-faint); } /* ------------------------------------------------------------------ forms The class names below are the ones the un-rewritten FOSUserBundle and HWIOAuthBundle templates already carry. Only the look is new. */ .sw-fields { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; } .sw-form-error { margin-top: 24px; padding: 11px 14px; border-radius: 8px; background: var(--sw-over-bg); color: var(--sw-over-ink); box-shadow: inset 0 0 0 1px var(--sw-over-ring); font-size: 13px; line-height: 20px; } .sw-form-error + .sw-fields { margin-top: 16px; } .control-group { display: block; } .control-group + .control-group { margin-top: 16px; } .control-group label, .sw-fields label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--sw-ink); } .control-group label.ie-placeholder { display: block; } input[type="text"].input-block-level, input[type="email"].input-block-level, input[type="password"].input-block-level, .sw-input { display: block; width: 100%; height: 50px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--sw-field); box-shadow: inset 0 0 0 1px var(--sw-field-ring); color: var(--sw-ink); font-family: inherit; font-size: 15px; font-weight: 300; } input.input-block-level::-webkit-input-placeholder, .sw-input::-webkit-input-placeholder { color: var(--sw-faint); } input.input-block-level::-moz-placeholder, .sw-input::-moz-placeholder { color: var(--sw-faint); } input.input-block-level:focus, .sw-input:focus { outline: 0; box-shadow: inset 0 0 0 2px var(--sw-accent); } .control-group.error input.input-block-level { box-shadow: inset 0 0 0 1px var(--sw-over-ring); } .help-inline { display: block; margin-bottom: 7px; font-size: 12px; line-height: 19px; color: var(--sw-over-ink); } .help-inline.hidden { display: none; } .sw-hint { margin-top: 7px; font-size: 12px; line-height: 19px; color: var(--sw-faint); } .btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border: 0; border-radius: 26px; background: var(--sw-chip-bg); box-shadow: inset 0 0 0 1px var(--sw-chip-ring); color: var(--sw-ink); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; } .btn-block { display: flex; width: 100%; margin-top: 24px; } .btn-success { background: var(--sw-accent); box-shadow: none; color: var(--sw-on-accent); } body.guest .btn-success:hover { background: var(--sw-accent-hi); color: var(--sw-on-accent); } .btn-cancel { background: none; box-shadow: inset 0 0 0 1px var(--sw-div); color: var(--sw-mute); font-weight: 400; } .btn-cancel:hover { color: var(--sw-ink); } /* the one social provider that is actually wired up */ .facebook-login { background: none; box-shadow: inset 0 0 0 1px var(--sw-div); color: var(--sw-ink); font-size: 15px; font-weight: 400; gap: 10px; } .facebook-login:hover { background: none; box-shadow: inset 0 0 0 1px var(--sw-ink); color: var(--sw-ink); } .facebook-login svg { width: 18px; height: 18px; fill: currentColor; } .form-signup, .form-signin { width: 100%; } .max-340 { max-width: 380px; margin: 0 auto; } .divider-autosignup { display: none; } .alert { padding: 18px 20px; border-radius: 12px; background: var(--sw-card); box-shadow: inset 0 0 0 1px var(--sw-card-ring); font-size: 15px; line-height: 24px; color: var(--sw-ink); } .alert-success { box-shadow: inset 0 0 0 1px var(--sw-list-ring); } /* the shell the small guest pages sit in */ .home-form { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 76px); padding: 56px var(--sw-gutter); } .home-form .inner { width: 100%; max-width: 460px; } .home-form .container { width: 100%; } .home-form h2 { margin-bottom: 24px; font-size: 30px; line-height: 38px; font-weight: 300; letter-spacing: -0.5px; } .alternative-action { margin-top: 22px; text-align: center; font-size: 14px; color: var(--sw-mute); } /* ------------------------------------------------------------------ responsive */ @media (max-width: 1180px) { :root { --sw-gutter: 36px; } .sw-h1 { font-size: 52px; line-height: 60px; letter-spacing: -1px; } .sw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-phone-block { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding: 40px; } .sw-row, .sw-row--flip { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 36px; } .sw-row--flip > *:first-child { order: 2; } } @media (max-width: 820px) { :root { --sw-gutter: 20px; } .sw-header-inner { height: 64px; gap: 12px; } .sw-logo img { height: 26px; } /* below the tablet breakpoint the links live behind the burger, and the two controls that must stay reachable — theme and sign-up — stay in the bar */ .sw-nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; cursor: pointer; } .sw-nav-burger i { display: block; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.75); } .sw-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px 0 16px; background: var(--sw-drawer); } .sw-nav-check:checked ~ .sw-nav { display: flex; } .sw-nav > a, .sw-nav > .sw-lang > .sw-lang-current { height: 48px; padding: 0 20px; display: flex; align-items: center; } .sw-nav .sw-btn { width: auto; margin: 12px 20px 0; } .sw-lang-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: none; padding: 0; } .sw-lang-menu a { padding: 12px 34px; } .sw-theme-toggle { margin: 12px 0 0 20px; } .sw-hero { padding-top: 48px; } .sw-h1 { font-size: 38px; line-height: 46px; letter-spacing: -0.8px; } .sw-h2 { font-size: 30px; line-height: 38px; } .sw-hero .sw-lead { font-size: 16px; line-height: 27px; } .sw-btn-row { flex-direction: column; align-items: stretch; gap: 12px; } .sw-btn { width: 100%; height: 54px; } .sw-section { padding-top: 56px; } .sw-grid-4, .sw-grid-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; } .sw-phone-block { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 20px 32px; } .sw-phone-block h2 { font-size: 26px; line-height: 34px; } .sw-cta { margin-top: 56px; padding: 44px 24px 48px; } .sw-cta h2 { font-size: 30px; line-height: 38px; } .sw-page-intro { padding-top: 44px; } .sw-page-intro h1 { font-size: 34px; line-height: 42px; letter-spacing: -0.7px; } .sw-rows { padding-top: 40px; gap: 16px; } .sw-legal { padding: 36px 0 56px; } .sw-legal h2 { font-size: 22px; line-height: 30px; } .sw-row h2 { font-size: 24px; line-height: 32px; } .sw-vig-pair { gap: 12px; } .sw-gcal { flex-direction: column; align-items: stretch; gap: 14px; } .sw-md { flex-direction: column; align-items: stretch; gap: 14px; } .sw-md > .sw-vig-arrow { align-self: center; transform: rotate(90deg); } .sw-gcal-event { width: 100%; } .sw-vig-perm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-vig-perm-cols > div:nth-child(3) { display: none; } .sw-board-shot { display: none; } .sw-board-phone { display: block; } .sw-phone-block .sw-phone-shot { display: none; } .sw-footer { margin-top: 40px; padding: 26px 0 30px; } .sw-footer-inner { flex-direction: column; gap: 16px; text-align: center; } .sw-footer-links { margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 18px; } .sw-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; } .sw-auth-aside { padding: 24px 20px 34px; } .sw-auth-aside h2 { margin-top: 26px; font-size: 30px; line-height: 38px; } .sw-auth-board { display: none; } .sw-auth-main { padding: 28px 20px 32px; } .sw-auth-switch { justify-content: center; } .sw-auth-form { width: 100%; margin: 28px 0 0; } .sw-auth-foot { flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; } .sw-auth-foot .sw-auth-foot-end { margin-left: 0; } .home-form { min-height: 0; padding: 40px 20px 48px; } } /* Two day columns side by side leave ~170px each on a phone, which ellipsises most of a task away, so the pair stacks and the arrow that carries yesterday into today turns to point down instead of right. */ @media (max-width: 640px) { .sw-vig-pair { grid-template-columns: minmax(0, 1fr); } .sw-vig-arrow { justify-self: center; transform: rotate(90deg); } } @media (max-width: 420px) { .sw-h1 { font-size: 32px; line-height: 40px; } .sw-board-note { text-align: left; } }