/* Google Sans (SIL Open Font License, see ../fonts/OFL.txt) — variable, weights 400–700 */ @font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/GoogleSans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Google Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/GoogleSans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Tokens: postal navy ink on envelope white, airmail red and blue. The admin picks the theme in the side menu (dark by default); the server marks it on . */ :root { --paper: #f3f5fa; --ink: #0f1a3d; --muted: #56607d; --line: #d9deea; --field: #ffffff; --airmail-red: #d42a3c; --airmail-blue: #1d46c9; --brand: #1463f3; --gutter: clamp(1rem, 5vw, 4rem); --page-pad: clamp(1.25rem, 3vw, 3rem); /* side padding of the signed-in pages */ /* login page */ --auth-glow: rgba(1, 149, 251, 0.1); --auth-card-bg: rgba(255, 255, 255, 0.9); --auth-card-border: rgba(20, 99, 243, 0.14); --auth-card-shadow: 0 30px 80px rgba(15, 26, 61, 0.16); --auth-field-focus: #f5f9ff; --auth-label-focus: #1463f3; /* loader while the next page loads */ --loader-veil: rgba(243, 245, 250, 0.55); /* cards, inputs and tabs on the signed-in pages */ --card-bg: #ffffff; --card-shadow: 0 12px 32px rgba(15, 26, 61, 0.07); --input-bg: #f6f8fc; --tabs-bg: rgba(255, 255, 255, 0.7); /* dialogs (Password rules) */ --dialog-bg: #ffffff; --violet-text: #6d28d9; --dot-idle: #c9d1e3; } :root[data-theme="dark"] { --paper: #0b1230; --ink: #edf0fa; --muted: #98a2c2; --line: #243058; --field: #111a3f; --airmail-red: #ff5d6e; --airmail-blue: #7b96ff; --auth-glow: rgba(1, 149, 251, 0.16); --auth-card-bg: rgba(14, 23, 56, 0.92); --auth-card-border: rgba(123, 150, 255, 0.18); --auth-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); --auth-field-focus: #111d47; --auth-label-focus: #8cc8ff; --loader-veil: rgba(5, 9, 28, 0.5); --card-bg: linear-gradient(180deg, rgba(22, 33, 78, 0.92), rgba(14, 22, 56, 0.92)); --card-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); --input-bg: rgba(7, 12, 36, 0.55); --tabs-bg: rgba(8, 14, 40, 0.45); --dialog-bg: #10193f; --violet-text: #c4a1ff; --dot-idle: #34437a; } *, *::before, *::after { box-sizing: border-box; } /* Scrollbars, on every part that scrolls: a slim glowing blue line (a bright core fading out to the sides, like the page tabs' underline) on a faint rail. Chrome, Edge and Safari draw it in full; Firefox takes the colours. */ :root { --scroll-core: #5cb6ff; --scroll-rail: rgba(15, 26, 61, 0.1); } :root[data-theme="dark"] { --scroll-core: #c8ecff; --scroll-rail: rgba(123, 150, 255, 0.14); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, transparent 5px, var(--scroll-rail) 5px 7px, transparent 7px); } ::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, transparent 5px, var(--scroll-rail) 5px 7px, transparent 7px); } ::-webkit-scrollbar-thumb { border-radius: 999px; } ::-webkit-scrollbar-thumb:vertical { background: linear-gradient(90deg, transparent 5%, rgba(1, 149, 251, 0.3) 20%, #0195fb 36%, var(--scroll-core) 50%, #0195fb 64%, rgba(1, 149, 251, 0.3) 80%, transparent 95%); } ::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, transparent 5%, rgba(1, 149, 251, 0.3) 20%, #0195fb 36%, var(--scroll-core) 50%, #0195fb 64%, rgba(1, 149, 251, 0.3) 80%, transparent 95%); } ::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-thumb:vertical:active { background: linear-gradient(90deg, rgba(1, 149, 251, 0.15) 0, rgba(1, 149, 251, 0.5) 16%, #0195fb 30%, var(--scroll-core) 50%, #0195fb 70%, rgba(1, 149, 251, 0.5) 84%, rgba(1, 149, 251, 0.15) 100%); } ::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(180deg, rgba(1, 149, 251, 0.15) 0, rgba(1, 149, 251, 0.5) 16%, #0195fb 30%, var(--scroll-core) 50%, #0195fb 70%, rgba(1, 149, 251, 0.5) 84%, rgba(1, 149, 251, 0.15) 100%); } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-corner { background: transparent; } @supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #0195fb transparent; } } /* hidden means hidden, whatever display a class gives the element (.form is a grid...) */ [hidden] { display: none !important; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Loading bar along the top of every page: plain Someless blue (the logo's ring) with a glowing head. Each page load fills it left to right; when it is full the head fades. */ :root { --load-time: 0.9s; --load-ease: cubic-bezier(0.3, 0.6, 0.3, 1); --bar-blue: #0195fb; --bar-glow: rgba(1, 149, 251, 0.85); } .loading-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 4px; overflow-x: clip; overflow-y: visible; pointer-events: none; animation: bar-hide 0.4s ease calc(var(--load-time) + 0.15s) forwards; } .loading-bar-fill { position: relative; width: 100%; height: 100%; background: var(--bar-blue); box-shadow: 0 0 8px rgba(1, 149, 251, 0.45); animation: bar-fill var(--load-time) var(--load-ease) both; } /* The head: a bright streak ending in a glowing tip */ .loading-bar-fill::before, .loading-bar-fill::after { content: ""; position: absolute; right: 0; animation: bar-head-pulse 0.6s ease-in-out infinite alternate, bar-head-out 0.3s ease var(--load-time) forwards; } .loading-bar-fill::before { top: 0; width: 120px; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9)); } .loading-bar-fill::after { top: 50%; width: 10px; height: 10px; margin-top: -5px; translate: 50% 0; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 4px var(--bar-glow), 0 0 24px 8px rgba(1, 149, 251, 0.4); } /* Leaving the page: the bar comes back and creeps forward until the next page arrives */ .is-loading .loading-bar { animation: none; opacity: 1; visibility: visible; } .is-loading .loading-bar-fill { animation: bar-trickle 10s cubic-bezier(0.1, 0.7, 0.2, 1) both; } .is-loading .loading-bar-fill::before, .is-loading .loading-bar-fill::after { animation: bar-head-pulse 0.6s ease-in-out infinite alternate; } /* The next page came in without a reload (page-swap.js): the bar runs on from wherever it had got to (--bar-from, set by loading-bar.js) to the end, and fades away */ .is-finishing .loading-bar { animation: bar-hide 0.4s ease 0.3s forwards; } .is-finishing .loading-bar-fill { animation: bar-finish 0.3s var(--load-ease) both; } .is-finishing .loading-bar-fill::before, .is-finishing .loading-bar-fill::after { animation: bar-head-pulse 0.6s ease-in-out infinite alternate, bar-head-out 0.3s ease 0.3s forwards; } @keyframes bar-fill { from { width: 0; } to { width: 100%; } } @keyframes bar-trickle { from { width: 0; } to { width: 90%; } } @keyframes bar-finish { from { width: var(--bar-from, 0%); } to { width: 100%; } } @keyframes bar-head-pulse { from { opacity: 0.65; } to { opacity: 1; } } @keyframes bar-head-out { to { opacity: 0; } } @keyframes bar-hide { to { opacity: 0; visibility: hidden; } } .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.75rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: inherit; font-size: 1.0625rem; font-weight: 500; text-decoration: none; cursor: pointer; } .button:hover { background: var(--airmail-blue); color: #fff; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 3px; } /* Welcome splash: 6 seconds, then the page moves on to /login */ body.splash { --load-time: 6s; --load-ease: linear; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; } .splash-main { display: grid; justify-items: center; align-content: center; gap: 0.25rem; padding: 2rem var(--gutter); text-align: center; } .splash-animation { width: min(300px, 75vw); aspect-ratio: 4 / 3; } .splash-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .splash-title span { display: inline-block; opacity: 0; } /* Nothing on the splash moves until splash.js adds .is-playing, so the bar, the words, the water animation and the 6-second countdown share one clock. */ body.splash:not(.is-playing) .loading-bar { animation: none; } body.splash:not(.is-playing) .loading-bar-fill { animation: none; width: 0; } body.splash:not(.is-playing) .loading-bar-fill::before, body.splash:not(.is-playing) .loading-bar-fill::after { animation: none; opacity: 0; } body.is-playing .splash-main { animation: splash-out 0.6s ease 5.4s forwards; } body.is-playing .splash-title span { animation: word-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; } body.is-playing .splash-title span:nth-child(1) { animation-delay: 0.3s; } body.is-playing .splash-title span:nth-child(2) { animation-delay: 0.42s; } body.is-playing .splash-title span:nth-child(3) { animation-delay: 0.54s; } body.is-playing .splash-title span:nth-child(4) { animation-delay: 0.66s; } body.is-playing .splash-title span:nth-child(5) { animation-delay: 0.78s; } .splash-footer { padding: 1.5rem var(--gutter); color: var(--muted); font-size: 0.875rem; text-align: center; } @keyframes word-in { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } } @keyframes splash-out { to { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .loading-bar { display: none; } .splash-main, .splash-title span { animation: none !important; opacity: 1 !important; } } /* The very first start: "Preparing your Someless Mail server" (preparing.html). The mail animation, and the steps below it: a green tick when done, a turning blue ring for the one under way, a quiet ring for those still to come. Once ready, it fades out. */ body.preparing { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; } body.preparing .loading-bar { display: none; } .preparing-main { display: grid; justify-items: center; align-content: center; gap: 0.6rem; padding: 2rem var(--gutter); text-align: center; transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s; } body.is-ready .preparing-main { opacity: 0; transform: translateY(-6px); } .preparing-animation { width: min(260px, 70vw); aspect-ratio: 1; } .preparing-title { margin: 0; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } .preparing-text { max-width: 30rem; margin: 0; color: var(--muted); line-height: 1.5; } .preparing-steps { display: grid; gap: 0.75rem; margin: 1.1rem 0 0; padding: 0; list-style: none; text-align: left; } .preparing-step { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-weight: 600; transition: color 0.3s ease; } .preparing-step.is-active, .preparing-step.is-done { color: var(--ink); } .preparing-mark { position: relative; flex: none; box-sizing: border-box; width: 22px; height: 22px; border: 2px solid var(--line); border-radius: 50%; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .preparing-step.is-active .preparing-mark { border-color: #0195fb; border-right-color: transparent; box-shadow: 0 0 12px rgba(1, 149, 251, 0.6); animation: spin 0.9s linear infinite; } .preparing-step.is-done .preparing-mark { border-color: #22c55e; background: #22c55e; box-shadow: 0 0 12px rgba(34, 197, 94, 0.7); } .preparing-step.is-done .preparing-mark::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .preparing-skip { margin-top: 1rem; color: var(--airmail-blue); font-weight: 600; } .preparing-skip[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .preparing-step.is-active .preparing-mark { animation-duration: 2.4s; } .preparing-main { transition: none; } } /* Notice board (board.js): hangs from two ropes, drops in from the top with a swing, then is pulled back up. Green glow for success, red glow for errors. */ .board-wrap { --rope: 70px; --glow: 52, 211, 153; /* success green */ position: fixed; top: 0; left: 0; right: 0; z-index: 150; width: min(92vw, 26rem); margin: 0 auto; transform: translateY(-110%); transform-origin: 50% 0; visibility: hidden; cursor: pointer; } .board-wrap[data-type="error"] { --glow: 255, 93, 110; } .board-wrap.is-down { visibility: visible; animation: board-drop 0.95s linear forwards; } .board-wrap.is-up { visibility: visible; animation: board-lift 0.55s ease-in forwards; } .board-rope { position: absolute; top: 0; width: 4px; height: calc(var(--rope) + 6px); border-radius: 2px; background: repeating-linear-gradient(160deg, #d8b98a 0 4px, #9c7a4c 4px 8px); box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); } .board-rope-left { left: 18%; } .board-rope-right { right: 18%; } .board { position: relative; display: flex; align-items: center; gap: 1rem; margin-top: var(--rope); padding: 1.1rem 1.35rem; border: 1.5px solid rgba(var(--glow), 0.75); border-radius: 18px; background: linear-gradient(180deg, #17235c, #0e1740); color: #edf0fa; text-align: left; box-shadow: 0 0 0 4px rgba(var(--glow), 0.08), 0 0 28px rgba(var(--glow), 0.45), 0 22px 48px rgba(0, 0, 0, 0.55); animation: board-glow 1.6s ease-in-out infinite alternate; } /* metal rings where the ropes hold the board */ .board-ring { position: absolute; top: -7px; width: 14px; height: 14px; border: 3px solid #c8cfe6; border-radius: 50%; background: #0e1740; } .board-ring-left { left: calc(18% - 5px); } .board-ring-right { right: calc(18% - 5px); } .board-icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--glow), 0.15); color: rgb(var(--glow)); box-shadow: 0 0 0 5px rgba(var(--glow), 0.06); } .board-title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } .board-message { margin: 0.15rem 0 0; color: #b4bdd9; font-size: 0.95rem; } /* drop and swing on the ropes, settling like a hanging sign */ @keyframes board-drop { 0% { transform: translateY(-110%) rotate(0deg); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); } 45% { transform: translateY(6%) rotate(2.6deg); animation-timing-function: ease-out; } 62% { transform: translateY(-2%) rotate(-2deg); animation-timing-function: ease-in-out; } 78% { transform: translateY(1%) rotate(1.1deg); animation-timing-function: ease-in-out; } 90% { transform: translateY(0) rotate(-0.5deg); animation-timing-function: ease-in-out; } 100% { transform: translateY(0) rotate(0deg); } } /* a little dip, as if someone takes the weight, then up and away */ @keyframes board-lift { 0% { transform: translateY(0); } 20% { transform: translateY(4%); } 99% { visibility: visible; } 100% { transform: translateY(-130%); visibility: hidden; } /* glow gone too */ } @keyframes board-glow { from { box-shadow: 0 0 0 4px rgba(var(--glow), 0.06), 0 0 18px rgba(var(--glow), 0.3), 0 22px 48px rgba(0, 0, 0, 0.55); } to { box-shadow: 0 0 0 4px rgba(var(--glow), 0.12), 0 0 34px rgba(var(--glow), 0.55), 0 22px 48px rgba(0, 0, 0, 0.55); } } @media (max-width: 480px) { .board-wrap { --rope: 44px; } .board { padding: 0.9rem 1rem; gap: 0.8rem; } .board-icon { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .board-wrap.is-down { animation: none; transform: none; } .board-wrap.is-up { animation: none; visibility: hidden; } .board { animation: none; } } /* Read out by screen readers, not shown */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Shared page pieces */ .wordmark { color: var(--ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; } .page-title { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; } /* a page's title with a line about it */ .page-header { margin: 0 0 1.5rem; } .page-header .page-title { margin-bottom: 0.3rem; } .page-subtitle { margin: 0; color: var(--muted); } .alert { margin: 0 0 1.5rem; padding: 0.75rem 1rem; border-left: 4px solid var(--airmail-blue); background: var(--field); border-radius: 0 8px 8px 0; } .alert-error { border-left-color: var(--airmail-red); } .alert a { color: inherit; font-weight: 500; text-decoration-color: var(--airmail-red); text-underline-offset: 3px; } /* Tabs for the sections of a page (Settings > Account, ...) */ .page-tabs { display: flex; flex-wrap: wrap; /* more tabs than fit: a second row (no scrolling, so the glow isn't cut off) */ gap: 0.4rem; margin: 0 0 1.5rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 16px; background: var(--tabs-bg); } .page-tab { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; flex: 0 1 17rem; padding: 0.7rem 1.25rem; border-radius: 12px; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .page-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { /* side by side on a phone, each as wide as its words; a second row only when they don't fit */ .page-tab { flex: 1 1 auto; padding: 0.65rem 0.8rem; gap: 0.45rem; font-size: 0.92rem; } } .page-tab:hover { color: var(--ink); background: rgba(1, 149, 251, 0.06); } .page-tab[aria-current="page"], .page-tab[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, rgba(1, 149, 251, 0.2), rgba(20, 99, 243, 0.1)); box-shadow: inset 0 0 0 1px rgba(1, 149, 251, 0.55), 0 0 22px rgba(1, 149, 251, 0.22); } /* The chosen tab's glowing underline, lying on the tab bar's bottom edge. It grows out from the middle whenever the tab's page comes in (a tap on it included). */ :root { --tab-line-core: #5cb6ff; } :root[data-theme="dark"] { --tab-line-core: #c8ecff; } .page-tab { position: relative; } .page-tab[aria-current="page"]::after, .page-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: calc(-0.3rem - 2px); /* the bar's padding and border below the tab */ height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(1, 149, 251, 0), #0195fb 22%, var(--tab-line-core) 50%, #0195fb 78%, rgba(1, 149, 251, 0)); filter: drop-shadow(0 0 5px rgba(1, 149, 251, 0.95)) drop-shadow(0 0 12px rgba(1, 149, 251, 0.55)); animation: tab-line-in 0.55s var(--menu-ease) both; } @keyframes tab-line-in { from { opacity: 0; transform: scaleX(0.15); } } @media (prefers-reduced-motion: reduce) { .page-tab[aria-current="page"]::after, .page-tab[aria-selected="true"]::after { animation: none; } } /* Settings cards: full width, one under another, with a glowing divider between them. Each card has its own accent colour (blue, or violet for the password card). */ .settings-stack { display: grid; gap: 1.25rem; } .settings-card { --accent: #0195fb; --accent-edge: rgba(1, 149, 251, 0.3); --accent-ring: rgba(1, 149, 251, 0.2); --badge: linear-gradient(135deg, #1463f3, #0195fb); padding: 1.15rem 1.4rem; border: 1px solid var(--accent-edge); border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-shadow), 0 0 32px -14px var(--accent); transition: border-color 0.3s ease, box-shadow 0.35s ease; } .settings-card-violet { --accent: #8b5cf6; --accent-edge: rgba(139, 92, 246, 0.32); --accent-ring: rgba(139, 92, 246, 0.22); --badge: linear-gradient(135deg, #6d28d9, #a855f7); } .settings-card-teal { --accent: #14b8a6; --accent-edge: rgba(20, 184, 166, 0.34); --accent-ring: rgba(20, 184, 166, 0.22); --badge: linear-gradient(135deg, #0f766e, #2dd4bf); --switch-on: linear-gradient(90deg, #0f766e, #2dd4bf); --switch-glow: rgba(45, 212, 191, 0.55); } .settings-card-blue { --accent: #0195fb; --accent-edge: rgba(1, 149, 251, 0.34); --accent-ring: rgba(1, 149, 251, 0.22); --badge: linear-gradient(135deg, #1463f3, #0195fb); } .card-heading { margin: 0; } /* the header is the button that opens and closes the card */ .card-head { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.25rem 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .card-titles { display: grid; flex: 1; min-width: 0; } .card-chevron { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(127, 127, 127, 0.1); color: var(--muted); transition: transform 0.4s var(--menu-ease), color 0.2s ease, background-color 0.2s ease, box-shadow 0.3s ease; } .card-chevron svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .card-head:hover .card-chevron { color: var(--accent); background: var(--accent-ring); } .settings-card:hover { border-color: var(--accent); } /* Closed to start with: the body unfolds (grid rows 0fr -> 1fr) and fades in. Only with JavaScript, which is what opens it; without it the cards simply stay open. */ .card-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--menu-ease); } .card-body-clip { min-height: 0; overflow-x: visible; overflow-y: clip; } .card-body-content { padding: 1.25rem 0 0.35rem; transition: opacity 0.3s ease, transform 0.45s var(--menu-ease); } html.js .settings-card:not(.is-open) .card-body { grid-template-rows: 0fr; } html.js .settings-card:not(.is-open) .card-body-content { opacity: 0; transform: translateY(-8px); } /* open: the card glows brighter in its colour, the arrow turns, the badge grows a little */ .settings-card.is-open { border-color: var(--accent); box-shadow: var(--card-shadow), 0 0 0 1px var(--accent-ring), 0 0 46px -8px var(--accent); } .settings-card.is-open .card-chevron { transform: rotate(180deg); color: #fff; background: var(--badge); box-shadow: 0 0 14px -2px var(--accent); } .card-badge { transition: transform 0.35s var(--menu-ease), box-shadow 0.35s ease; } .settings-card.is-open .card-badge { transform: scale(1.07); box-shadow: 0 0 26px -2px var(--accent); } /* each click: a pulse of light around the card (collapsible-cards.js adds .is-flaring) */ .settings-card.is-flaring { animation: card-flare 0.75s ease-out; } @keyframes card-flare { 30% { box-shadow: var(--card-shadow), 0 0 0 3px var(--accent-ring), 0 0 64px 4px var(--accent); } } @media (prefers-reduced-motion: reduce) { .card-body, .card-body-content, .card-chevron, .card-badge, .settings-card { transition: none; } .settings-card.is-flaring { animation: none; } } .card-badge { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--badge); color: #fff; box-shadow: 0 8px 22px -6px var(--accent); } .card-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .card-title { display: block; margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; } .card-hint { display: block; margin: 0.1rem 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 400; } /* (qualified with .settings-card so they win over the general .form / .field rules below) */ .settings-card .card-form { max-width: none; gap: 1.1rem; } /* the fields sit side by side across the card (one column on a phone) */ .card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem 1.25rem; align-items: start; } .card-actions { display: flex; justify-content: flex-end; } .settings-card .card-form .card-button, .settings-card .factor-form .card-button { min-width: 12rem; margin-top: 0; background: var(--badge); color: #fff; box-shadow: 0 10px 24px -10px var(--accent); } @media (max-width: 640px) { .settings-card .card-form .card-button { width: 100%; } } /* A glowing line between the settings cards, in the colours of the lines at the account sphere: brightest in the middle and fading at both ends, with a glowing dot at its centre and sparks of light running into it from both sides. */ .glow-divider { position: relative; height: 2px; margin: 0.35rem 2rem; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--sphere-line) 22%, var(--sphere-line-bright) 50%, var(--sphere-line) 78%, transparent); filter: drop-shadow(0 0 5px var(--sphere-line-glow)); } .glow-divider::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--sphere-line-bright), transparent) -25% 0 / 20% 100% no-repeat, linear-gradient(90deg, transparent, var(--sphere-line-bright), transparent) 125% 0 / 20% 100% no-repeat; animation: divider-sparks 4.2s ease-in-out infinite; } .glow-divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--sphere-line-bright); box-shadow: 0 0 10px 2px var(--sphere-line-glow), 0 0 26px 7px var(--sphere-glow); animation: divider-dot 2.4s ease-in-out infinite alternate; } @keyframes divider-sparks { 0%, 30% { background-position: -25% 0, 125% 0; } 100% { background-position: 50% 0, 50% 0; } } @keyframes divider-dot { from { opacity: 0.75; transform: scale(0.8); } to { opacity: 1; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .glow-divider::before, .glow-divider::after { animation: none; } } .settings-card .card-button:hover { filter: brightness(1.1); } /* inputs with an icon at the start; they glow in the card's colour while in use */ .input-wrap { position: relative; } .input-icon { position: absolute; top: 50%; left: 0.85rem; display: grid; translate: 0 -50%; color: var(--muted); pointer-events: none; transition: color 0.2s ease; } .input-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .field .input-wrap input { padding-left: 2.6rem; } .settings-card .field input { background: var(--input-bg); transition: border-color 0.2s ease, box-shadow 0.25s ease; } .settings-card .field input[readonly] { color: var(--muted); cursor: default; } .settings-card .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring), 0 8px 24px -10px var(--accent); } .settings-card .field:focus-within .input-icon { color: var(--accent); } /* "Password must contain": each rule gets a green tick once met (password-rules.js) */ .password-rules { padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); } .password-rules-title { margin: 0 0 0.4rem; font-size: 0.875rem; font-weight: 600; } .password-rules ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; margin: 0; padding: 0; list-style: none; } .password-rules li { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.875rem; transition: color 0.2s ease; } .rule-mark { position: relative; flex: none; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; transition: background-color 0.2s ease, border-color 0.2s ease; } .password-rules li.is-met { color: var(--ink); } .password-rules li.is-met .rule-mark { border-color: #22c55e; background: #22c55e; } .password-rules li.is-met .rule-mark::after { content: ""; position: absolute; top: 1.5px; left: 4.2px; width: 3.5px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; rotate: 45deg; } /* "Password rules" (password-rules-dialog.js). The button sits in the rules box; the dialog wears the password card's violet: the minimum length is a glowing line of 12 dots with the slider's handle on it, and each kind of character has a switch. */ .password-rules-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.4rem; } .password-rules-top .password-rules-title { margin: 0; } .rules-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 999px; background: rgba(139, 92, 246, 0.12); color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .rules-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .rules-button:hover { background: rgba(139, 92, 246, 0.22); box-shadow: 0 0 18px -4px rgba(139, 92, 246, 0.8); } html:not(.js) .rules-button { display: none; } /* the dialog needs JavaScript */ .rules-dialog { --accent: #8b5cf6; --badge: linear-gradient(135deg, #6d28d9, #a855f7); --thumb: 24px; /* the slider's handle */ width: min(calc(100vw - 2rem), 30rem); max-width: none; max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; border: 1px solid rgba(139, 92, 246, 0.5); border-radius: 22px; background: var(--dialog-bg); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 48px -12px rgba(139, 92, 246, 0.8); } .rules-dialog::backdrop { background: var(--loader-veil); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .rules-dialog[open] { animation: dialog-in 0.32s var(--menu-ease) backwards; } /* not held after: a held transform would trap the tips (tooltip.js) */ .rules-dialog[open]::backdrop { animation: fade-in 0.25s ease both; } .rules-dialog.is-closing { animation: dialog-out 0.18s ease both; } .rules-dialog.is-closing::backdrop { animation: fade-out 0.18s ease both; } @keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } } @keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } } .rules-dialog.is-wide { width: min(calc(100vw - 2rem), 36rem); } /* more to choose in it */ .rules-dialog.is-wider { width: min(calc(100vw - 2rem), 42rem); } /* Create a mailbox: more to fill in */ .rules-form { display: grid; gap: 1.35rem; padding: 1.5rem clamp(1.1rem, 4vw, 1.75rem); } .rules-head { display: flex; align-items: center; gap: 0.9rem; } .rules-title { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .rules-hint { margin: 0.1rem 0 0; color: var(--muted); font-size: 0.9rem; } /* Minimum length: the line and its dots lie under a transparent slider, half a handle in from each end, which is exactly where the handle stops for 1 to 12 */ .length-picker { display: grid; gap: 0.45rem; } .length-picker-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .length-value { color: var(--violet-text); font-weight: 700; font-variant-numeric: tabular-nums; } .length-track { position: relative; height: var(--thumb); } .length-line { position: absolute; top: 50%; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); display: flex; justify-content: space-between; pointer-events: none; } .length-line::before, .length-line::after { content: ""; position: absolute; top: -1.5px; left: 0; height: 3px; border-radius: 3px; } .length-line::before { right: 0; background: var(--dot-idle); } /* the glowing part, from 1 up to the chosen length (--value, set by the script) */ .length-line::after { width: calc((var(--value) - 1) / 11 * 100%); background: linear-gradient(90deg, #6d28d9, #a855f7); box-shadow: 0 0 10px rgba(168, 85, 247, 0.85), 0 0 3px rgba(168, 85, 247, 1); transition: width 0.25s var(--menu-ease); } .length-dot { position: relative; z-index: 1; width: 0; } .length-dot::before { content: ""; position: absolute; top: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--dialog-bg); box-shadow: inset 0 0 0 2px var(--dot-idle); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .length-dot.is-lit::before { background: #a855f7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.9); } .length-track input[type="range"] { position: relative; z-index: 2; display: block; width: 100%; height: var(--thumb); margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .length-track input[type="range"]:focus { outline: none; } .length-track input[type="range"]::-webkit-slider-runnable-track { height: var(--thumb); border: 0; background: transparent; } .length-track input[type="range"]::-moz-range-track { height: var(--thumb); border: 0; background: transparent; } .length-track input[type="range"]::-webkit-slider-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, #a855f7 32% 100%); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.25), 0 0 18px 3px rgba(168, 85, 247, 0.8); -webkit-appearance: none; appearance: none; transition: transform 0.15s ease; } .length-track input[type="range"]::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, #a855f7 32% 100%); box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.25), 0 0 18px 3px rgba(168, 85, 247, 0.8); } .length-track input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); } .length-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--dialog-bg), 0 0 0 6px var(--airmail-blue), 0 0 18px 3px rgba(168, 85, 247, 0.8); } .length-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--dialog-bg), 0 0 0 6px var(--airmail-blue), 0 0 18px 3px rgba(168, 85, 247, 0.8); } /* one cell per number, as wide as the gap between two dots and starting half a gap before the first one, so each number sits right under its dot and is easy to click */ .length-numbers { display: grid; grid-template-columns: repeat(12, 1fr); margin: 0 calc(var(--thumb) / 2 - (100% - var(--thumb)) / 22); color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: center; } .length-numbers span { padding: 0.1rem 0; cursor: pointer; transition: color 0.2s ease; } .length-picker .field-hint { margin: 0; } .length-numbers span.is-current { color: var(--violet-text); font-weight: 700; } /* Switches for the kinds of character. The checkbox is still there for the keyboard and screen readers; .switch shows it. */ .rules-toggles { display: grid; gap: 0.5rem; } .rule-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--input-bg); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .rule-toggle:hover { border-color: rgba(139, 92, 246, 0.5); } .rule-toggle:has(input:checked) { border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 0 18px -8px rgba(139, 92, 246, 0.8); } .rule-toggle-text { display: grid; gap: 0.05rem; } .rule-toggle-label { font-weight: 600; } .rule-toggle-hint { color: var(--muted); font-size: 0.8125rem; } .rule-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--dot-idle); transition: background-color 0.25s ease, box-shadow 0.25s ease; } .switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--menu-ease); } .rule-toggle input:checked + .switch, .switch.is-on { background: var(--switch-on, linear-gradient(90deg, #6d28d9, #a855f7)); box-shadow: 0 0 14px var(--switch-glow, rgba(168, 85, 247, 0.6)); } .rule-toggle input:checked + .switch .switch-knob, .switch.is-on .switch-knob { transform: translateX(18px); } .rule-toggle input:focus-visible + .switch { outline: 3px solid var(--airmail-blue); outline-offset: 3px; } /* a switch that is itself a button (two-factor authentication) */ button.switch { padding: 0; border: 0; cursor: pointer; } /* switched on but not finished (two-factor setup waiting for a PIN): grey, no glow */ :root { --switch-pending: #9aa3b2; } :root[data-theme="dark"] { --switch-pending: #5f6a80; } .switch.is-on.is-pending { background: var(--switch-pending); box-shadow: none; } /* on, but it is asking for a PIN before turning off: shown as off until then */ .switch.is-on[aria-expanded="true"] { background: var(--dot-idle); box-shadow: none; } .switch.is-on[aria-expanded="true"] .switch-knob { transform: none; } /* always on (the password): dimmed, with a small lock on the knob */ .switch.is-locked { opacity: 0.65; cursor: not-allowed; } .switch.is-locked .switch-knob { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 11px no-repeat; } .rules-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; } .rules-actions .button { padding: 0.75rem 1.5rem; font-size: 1rem; } .button-quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .button-quiet:hover { background: rgba(139, 92, 246, 0.12); color: var(--ink); } .rules-dialog .rules-save { background: var(--badge); color: #fff; box-shadow: 0 10px 24px -10px var(--accent); } .rules-dialog .rules-save:hover { background: var(--badge); filter: brightness(1.1); } @media (prefers-reduced-motion: reduce) { .rules-dialog[open], .rules-dialog[open]::backdrop, .rules-dialog.is-closing, .rules-dialog.is-closing::backdrop { animation: none; } .length-line::after, .length-dot::before, .switch, .switch-knob, .length-track input[type="range"]::-webkit-slider-thumb { transition: none; } } /* Two-factor authentication card (teal). Two rows: the password (always on, locked) and the PIN from an authenticator app. Setting the PIN up shows a QR code, the key to type in by hand and a PIN box; turning it off asks for a PIN in a box that slides open. */ .factors { display: grid; gap: 0.6rem; } .factor { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--input-bg); } .factor-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: rgba(20, 184, 166, 0.14); color: var(--accent); } .factor-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .factor-text { display: grid; flex: 1; gap: 0.1rem; min-width: 0; } .factor-label { font-weight: 600; } .factor-hint { color: var(--muted); font-size: 0.875rem; } .switch-form { display: flex; margin: 0; } .factor-setup { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.5rem; align-items: start; margin-top: 1rem; padding: 1.1rem; border: 1px dashed var(--accent-edge); border-radius: 16px; animation: reveal-in 0.35s var(--menu-ease) both; scroll-margin: 1.5rem; /* room around it when the page glides down to it */ } .factor-qr { width: 176px; padding: 8px; border-radius: 14px; background: #fff; /* dark on light, as scanners expect, in either theme */ box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.4), 0 0 28px -6px rgba(45, 212, 191, 0.75); } .factor-qr svg { display: block; width: 100%; height: auto; } .factor-list { display: grid; gap: 0.45rem; margin: 0 0 1rem; padding-left: 1.2rem; } .factor-list li::marker { color: var(--accent); font-weight: 700; } /* Text in a box with its copy button inside at the end (copy-box.html: the two-factor key, DNS records); the box glows once copied */ .copy-box { display: flex; align-items: center; gap: 0.4rem; width: fit-content; max-width: 100%; padding: 0.25rem 0.3rem 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); transition: border-color 0.25s ease, box-shadow 0.3s ease; } .copy-box:has(.is-copied) { border-color: rgba(45, 212, 191, 0.7); box-shadow: 0 0 18px -4px rgba(45, 212, 191, 0.7); } .copy-box-text { min-width: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; /* 0 and O, 1 and I told apart */ font-size: 0.9rem; letter-spacing: 0.04em; word-break: break-all; user-select: all; } .copy-box .copy-button { width: 32px; height: 32px; border-color: transparent; background: transparent; } .copy-box .copy-button:hover { background: rgba(20, 184, 166, 0.14); border-color: transparent; } .copy-box .copy-button.is-copied { border-color: transparent; box-shadow: none; } .factor-list .copy-box { margin-top: 0.4rem; } @media (max-width: 640px) { .factor-setup { grid-template-columns: minmax(0, 1fr); justify-items: center; } } /* A button that copies text (copy-button.js): the copy icon turns into a tick that draws itself, the button glows, and "Copied" pops up above it for a moment. */ .copy-button { position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease; } .copy-button:hover { color: var(--ink); border-color: var(--accent-edge, var(--line)); } .copy-button svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease, transform 0.3s var(--menu-ease); } .copy-button .copy-done { opacity: 0; stroke: #2dd4bf; stroke-width: 2.6; stroke-dasharray: 22; stroke-dashoffset: 22; } .copy-button::after { content: "Copied"; position: absolute; bottom: calc(100% + 8px); right: -4px; /* opens leftwards: never past the page's edge on a phone */ padding: 0.2rem 0.55rem; border-radius: 999px; background: #0f766e; color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 0 14px rgba(45, 212, 191, 0.6); opacity: 0; transform: translate(0, 4px); pointer-events: none; transition: opacity 0.2s ease, transform 0.25s var(--menu-ease); } .copy-button.is-copied { color: #2dd4bf; border-color: rgba(45, 212, 191, 0.7); box-shadow: 0 0 18px -2px rgba(45, 212, 191, 0.75); } .copy-button.is-copied .copy-icon { opacity: 0; transform: scale(0.5) rotate(-20deg); } .copy-button.is-copied .copy-done { opacity: 1; animation: tick-draw 0.45s var(--menu-ease) 0.05s forwards; } .copy-button.is-copied::after { opacity: 1; transform: translate(0, 0); } @keyframes tick-draw { to { stroke-dashoffset: 0; } } html:not(.js) .copy-button { display: none; } /* it needs JavaScript */ @media (prefers-reduced-motion: reduce) { .copy-button.is-copied .copy-done { animation: none; stroke-dashoffset: 0; } } .factor-form { display: grid; gap: 0.45rem; } .factor-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .settings-card .factor-form-row .card-button { margin-top: 0; } /* six digits, spaced out and centred (the padding makes up for the space after the last) */ .pin-input { width: 11rem; padding: 0.65rem 0.9rem 0.65rem calc(0.9rem + 0.35em); border: 1.5px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink); font: inherit; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.35em; text-align: center; transition: border-color 0.2s ease, box-shadow 0.25s ease; } .pin-input::placeholder { color: var(--muted); opacity: 0.45; } .settings-card .pin-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring), 0 8px 24px -10px var(--accent); } .factor-off { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255, 93, 110, 0.4); border-radius: 14px; background: rgba(255, 93, 110, 0.06); } html.js .reveal-panel:not(.is-open) { display: none; } .reveal-panel.is-open { animation: reveal-in 0.3s var(--menu-ease) both; } @keyframes reveal-in { from { opacity: 0; transform: translateY(-6px); } } /* Login with two-factor authentication: the PIN step takes the login form's place */ .auth-card .form-head { text-align: center; } .auth-card .form-head .auth-hint { margin-bottom: 0.25rem; } .auth-card .pin-input { width: 100%; font-size: 1.6rem; } .pin-back { justify-self: center; } .auth-card .form.is-entering { animation: step-in 0.4s var(--menu-ease) both; } @keyframes step-in { from { opacity: 0; transform: translateX(18px); } } @media (prefers-reduced-motion: reduce) { .factor-setup, .reveal-panel.is-open, .auth-card .form.is-entering { animation: none; } } /* Forms */ .form { display: grid; gap: 1.25rem; max-width: 24rem; } .form .button { justify-self: start; margin-top: 0.5rem; } .field { display: grid; gap: 0.4rem; } .field-label { font-weight: 500; } .field-hint { color: var(--muted); font-size: 0.875rem; } .field input { width: 100%; padding: 0.75rem 0.9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; } .field input:focus-visible { outline-offset: 0; border-color: var(--airmail-blue); } .field textarea { width: 100%; min-height: 6rem; padding: 0.75rem 0.9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; resize: vertical; } .field textarea:focus-visible { outline-offset: 0; border-color: var(--airmail-blue); } /* Login: in the picked theme, with mail icons floating behind the card */ body.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(55% 45% at 50% 45%, var(--auth-glow), transparent 70%), var(--paper); } .auth-main { position: relative; z-index: 1; display: grid; place-items: center; padding: 1.5rem var(--gutter) 0; } .auth-card { position: relative; width: 100%; padding: 2rem clamp(1.25rem, 5vw, 2.75rem); border: 1px solid var(--auth-card-border); border-radius: 24px; background: var(--auth-card-bg); box-shadow: var(--auth-card-shadow); text-align: center; } .auth-logo { display: block; width: 88px; height: 88px; margin: 0 auto 1rem; filter: drop-shadow(0 8px 24px rgba(1, 149, 251, 0.35)); } .auth-title { margin: 0 0 0.25rem; text-wrap: balance; font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; } .auth-hint { margin: 0 0 1.5rem; color: var(--muted); } .auth-card .form { max-width: none; text-align: left; } .auth-card .alert { text-align: left; } .auth-card .button { background: var(--brand); color: #fff; } .auth-card .button:hover { background: #0f55d6; } .button-block { width: 100%; } .form .button-block { justify-self: stretch; } /* Login fields grow a little and glow while you type in them */ .auth-card .control { display: block; transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); } .auth-card .control:focus-within { transform: scale(1.03); } .auth-card .field input { transition: border-color 0.2s ease, box-shadow 0.28s ease, background-color 0.2s ease; } .auth-card .field input:focus { outline: none; border-color: var(--bar-blue); background-color: var(--auth-field-focus); box-shadow: 0 0 0 4px rgba(1, 149, 251, 0.22), 0 8px 24px rgba(1, 149, 251, 0.18); } .auth-card .field-label { transition: color 0.2s ease; } .auth-card .field:focus-within .field-label { color: var(--auth-label-focus); } /* Spinner inside a button while its form is being sent */ .button { gap: 0.6rem; } .button-spinner { display: none; width: 1.1em; height: 1.1em; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; } .button.is-busy { cursor: progress; } .button.is-busy .button-spinner { display: inline-block; } @keyframes spin { to { rotate: 360deg; } } /* an icon button whose form is on its way: a spinner where its icon was (busy-button.js) */ .icon-button.is-busy { cursor: progress; } .icon-button.is-busy svg { opacity: 0; } .icon-button.is-busy::after { content: ""; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } .auth-footer { position: relative; z-index: 1; padding: 1.5rem var(--gutter); color: var(--muted); font-size: 0.875rem; text-align: center; } /* PixiJS draws the falling logo cards into this layer (login-background.js) */ .login-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .login-bg canvas { display: block; } /* The login card flips from the welcome side to the login form */ .flip-card { width: min(100%, 34rem); perspective: 1600px; } .flip-inner { display: grid; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); } .flip-card.is-flipped .flip-inner { transform: rotateY(180deg); } .face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .face { display: flex; flex-direction: column; justify-content: center; } .face-back { transform: rotateY(180deg); } /* A little sway while it turns, as if the wind caught it */ .flip-card.is-flipping { animation: flip-sway 0.9s cubic-bezier(0.3, 0.7, 0.2, 1); } @keyframes flip-sway { 35% { transform: translateX(14px) rotate(1.5deg) scale(1.03); } } /* Without JavaScript the card can't flip, so show the login form only */ html:not(.js) .face-front { display: none; } html:not(.js) .face-back { transform: none; } .face-back-link { position: absolute; top: 1.1rem; left: 1.25rem; font-size: 0.9375rem; } .face-back-link[hidden] { display: none; } .welcome-animation { width: 150px; aspect-ratio: 1; margin: -1.25rem auto 0; } .welcome-points { display: grid; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; text-align: left; } .welcome-points li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.9rem; border: 1px solid rgba(1, 149, 251, 0.16); border-radius: 12px; background: rgba(1, 149, 251, 0.08); } .welcome-points li::before { content: ""; flex: none; width: 0.45rem; height: 0.8rem; margin: 0 0.25rem 0 0.3rem; border: solid var(--bar-blue); border-width: 0 2.5px 2.5px 0; rotate: 45deg; translate: 0 -2px; } /* Password field with the eye button */ .password-wrap { position: relative; } .password-wrap input { padding-right: 3rem; } .password-toggle { position: absolute; top: 50%; right: 0.35rem; translate: 0 -50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .password-toggle:hover { color: var(--ink); } .password-toggle[hidden] { display: none; } .password-toggle .icon-eye-off, .password-toggle[aria-pressed="true"] .icon-eye { display: none; } .password-toggle[aria-pressed="true"] .icon-eye-off { display: block; } @media (prefers-reduced-motion: reduce) { .auth-card .control { transition: none; } .flip-inner { transition: none; } .flip-card.is-flipping { animation: none; } .auth-card .control:focus-within { transform: none; } .button-spinner { animation-duration: 1.6s; } } /* Signed-in app: top bar, and the side menu with its animated hamburger */ .topbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem var(--page-pad); border-bottom: 1px solid var(--line); } /* The name in the top bar steps aside while the docked menu is expanded (the menu shows the name itself) and slides back when the menu is collapsed to icons. It keeps its place, so the admin chip on the right never moves. */ .topbar .wordmark { margin-right: auto; transition: opacity 0.3s ease, transform 0.38s var(--menu-ease), visibility 0s linear 0s; } @media (min-width: 1024px) { html.menu-docked:not(.menu-rail) .topbar .wordmark { opacity: 0; transform: translateX(-16px); visibility: hidden; /* not reachable with the keyboard while hidden */ transition: opacity 0.2s ease, transform 0.38s var(--menu-ease), visibility 0s linear 0.38s; } } /* Hamburger buttons: the looping Lottie plays; the plain bars show without it */ .menu-button { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; } .menu-button:hover { background: rgba(1, 149, 251, 0.1); } .menu-button-anim { position: absolute; inset: -4px; pointer-events: none; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); } .menu-button-bars { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1); } .menu-button-bars .bar { transform-box: view-box; transform-origin: 12px 12px; transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.25s ease; } .menu-button-anim.is-playing + .menu-button-bars { opacity: 0; } /* a quick spin each time the hamburger is used (side-menu.js adds .is-spinning) */ .menu-button.is-spinning .menu-button-anim, .menu-button.is-spinning .menu-button-bars { animation: button-spin 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); } @keyframes button-spin { from { rotate: -360deg; } } /* the hamburger inside the menu is a little smaller */ .menu-button-side { width: var(--menu-button); height: var(--menu-button); border-radius: 11px; } .menu-button-side .menu-button-bars { width: 21px; height: 21px; } /* Top bar hamburger: narrow screens only. While the menu is open over the page it morphs into an X. */ .menu-button-topbar { margin-left: -0.6rem; } .menu-button-topbar[aria-expanded="true"] .menu-button-anim { opacity: 0; transform: scale(0.5) rotate(-120deg); } .menu-button-topbar[aria-expanded="true"] .menu-button-bars { opacity: 1; transform: rotate(180deg); } .menu-button-topbar[aria-expanded="true"] .bar-top { transform: translateY(5px) rotate(45deg); } .menu-button-topbar[aria-expanded="true"] .bar-mid { opacity: 0; transform: scaleX(0); } .menu-button-topbar[aria-expanded="true"] .bar-bot { transform: translateY(-5px) rotate(-45deg); } @media (min-width: 1024px) { html.js .menu-button-topbar { display: none; } } .topbar-user { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--muted); font-weight: 500; } .topbar-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); color: #fff; font-size: 0.95rem; font-weight: 700; } @media (max-width: 480px) { .topbar-user-name { display: none; } } .link-button { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; } .link-button:hover { color: var(--ink); } /* The side menu is a . Narrow screens: full-screen, the panel slides in from the left, the rest dims and a click there closes it. Wide screens: docked (see below). */ .side-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; } .side-menu::backdrop { background: rgba(5, 9, 28, 0.5); backdrop-filter: blur(4px); } .side-menu[open]::backdrop { animation: fade-in 0.3s ease; } .side-menu.is-closing::backdrop { animation: fade-out 0.28s ease forwards; } .side-menu-panel { position: relative; display: flex; flex-direction: column; width: min(86vw, 20rem); height: 100%; padding: 1rem var(--menu-pad); border-right: 1px solid rgba(1, 149, 251, 0.35); border-radius: 0 22px 22px 0; background: var(--field); color: var(--ink); box-shadow: 18px 0 60px rgba(0, 0, 0, 0.35); } .side-menu[open] .side-menu-panel { animation: menu-in 0.38s cubic-bezier(0.2, 0.85, 0.25, 1); } .side-menu.is-closing .side-menu-panel { animation: menu-out 0.28s ease-in forwards; } /* The right edge glows blue, with a soft light flowing slowly down it */ .side-menu-edge { position: absolute; top: 0; right: -1px; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(1, 149, 251, 0.25) 0%, rgba(1, 149, 251, 0.9) 30%, #9fdcff 40%, rgba(1, 149, 251, 0.9) 50%, rgba(1, 149, 251, 0.25) 80%); background-size: 100% 300%; box-shadow: 0 0 10px 1px rgba(1, 149, 251, 0.6), 0 0 30px 4px rgba(1, 149, 251, 0.22); animation: edge-flow 7s linear infinite; pointer-events: none; } @keyframes edge-flow { from { background-position: 0 100%; } to { background-position: 0 -200%; } } .side-menu-head { display: flex; align-items: center; margin-bottom: 0.75rem; padding: 0.1rem 0 0.9rem 0.25rem; border-bottom: 1px solid var(--line); transition: padding 0.38s var(--menu-ease); } .side-menu-logo { flex: none; width: 38px; height: 38px; margin-right: 0.65rem; filter: drop-shadow(0 5px 14px rgba(1, 149, 251, 0.35)); transition: width 0.38s var(--menu-ease), margin 0.38s var(--menu-ease), opacity 0.2s ease, transform 0.38s var(--menu-ease); } .side-menu-brand { min-width: 0; max-width: 12rem; margin-right: auto; /* keeps the hamburger at the right-hand end */ overflow: hidden; white-space: nowrap; transition: max-width 0.38s var(--menu-ease), opacity 0.2s ease; } .side-menu-name { margin: 0; font-size: 0.975rem; font-weight: 700; letter-spacing: -0.01em; } .side-menu-version { margin: 0; color: var(--muted); font-size: 0.78rem; } /* minmax(0, 1fr): rows stay as wide as the menu (the collapsed strip too), never as wide as their names */ .side-menu-nav { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0.25rem; } .side-menu-foot .side-menu-nav { margin-bottom: 0.25rem; } /* icons sit 1rem in, which also centres them in the collapsed strip, so they never move */ .side-menu-item { position: relative; /* for the beam to the glowing edge */ display: flex; min-width: 0; align-items: center; gap: 0.75rem; width: 100%; padding: 0.62rem 1rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; } /* Each icon sits in a small box; on the current row the pulsing blue hexagon (Lottie, from pineloop) plays behind it without changing the row's height. */ .side-menu-glyph { position: relative; display: grid; place-items: center; flex: none; width: 20px; height: 20px; } .side-menu-icon { position: relative; /* above the hexagon */ z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); transition: color 0.2s ease; } .side-menu-pulse { position: absolute; inset: -12px; pointer-events: none; } .side-menu-item:not([aria-current="page"]) .side-menu-pulse { display: none; } /* the name clips itself (the row doesn't), so the collapsed strip still hides it cleanly */ .side-menu-label { min-width: 0; overflow: hidden; transition: opacity 0.2s ease; } .side-menu-item { transition: background-color 0.2s ease, box-shadow 0.2s ease; } .side-menu-item:hover { background: rgba(1, 149, 251, 0.08); } .side-menu-item:hover .side-menu-icon { color: var(--bar-blue); } /* the page you are on: a soft blue pill, and its icon on the pulsing hexagon (white on the blue hexagon once it plays; blue when there is no animation) */ /* the beam's colours: strong blue on light backgrounds, pale glowing blue on dark ones */ :root { --beam-start: #0195fb; --beam-end: #4db3ff; } :root[data-theme="dark"] { --beam-start: rgba(143, 208, 255, 0.9); --beam-end: #c8ecff; } .side-menu-item[aria-current="page"] { background: linear-gradient(90deg, rgba(1, 149, 251, 0.07), rgba(1, 149, 251, 0.24)); box-shadow: inset 0 0 0 1px rgba(1, 149, 251, 0.32), inset -2px 0 0 var(--beam-start), /* its glowing end */ 8px 0 18px -8px rgba(1, 149, 251, 0.6), 0 4px 14px rgba(1, 149, 251, 0.12); color: var(--ink); font-weight: 600; } /* A beam of light runs from the end of the row to the menu's glowing edge ... */ .side-menu-item[aria-current="page"]::after { content: ""; position: absolute; top: 50%; left: 100%; width: calc(var(--menu-pad) + 1px); height: 2px; margin-top: -1px; background: linear-gradient(90deg, var(--beam-start), var(--beam-end)); box-shadow: 0 0 8px 1px rgba(1, 149, 251, 0.75); transform-origin: left center; animation: beam-in 0.4s cubic-bezier(0.3, 0.7, 0.2, 1) both; pointer-events: none; } /* ... and the edge glows brighter where they meet, breathing gently */ .side-menu-item[aria-current="page"]::before { content: ""; position: absolute; z-index: 2; top: 50%; left: calc(100% + var(--menu-pad)); width: 22px; height: 74px; margin: -37px 0 0 -11px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 241, 255, 0.95), rgba(1, 149, 251, 0.6) 45%, rgba(1, 149, 251, 0)); animation: edge-spot-in 0.45s ease 0.2s both, edge-spot-breathe 1.6s ease-in-out 0.65s infinite alternate; pointer-events: none; } @keyframes beam-in { from { transform: scaleX(0); opacity: 0; } } @keyframes edge-spot-in { from { opacity: 0; transform: scaleY(0.3); } } @keyframes edge-spot-breathe { from { opacity: 0.7; } to { opacity: 1; } } .side-menu-item[aria-current="page"] .side-menu-icon { color: var(--bar-blue); } .side-menu-item[aria-current="page"] .side-menu-pulse.is-playing + .side-menu-icon { color: #fff; } /* the rows slide in one after another as the menu opens */ .side-menu[open] .side-menu-item { animation: item-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .side-menu[open] .side-menu-nav .side-menu-item:nth-child(1) { animation-delay: 0.08s; } .side-menu[open] .side-menu-nav .side-menu-item:nth-child(2) { animation-delay: 0.13s; } .side-menu[open] .side-menu-foot .side-menu-item { animation-delay: 0.14s; } .side-menu[open] .side-menu-foot .side-menu-logout { animation-delay: 0.19s; } .side-menu-foot { margin-top: auto; } .side-menu-foot form { margin: 0; } /* The divider at the bottom of the menu, with the account sphere sitting on it. The lines glow, brightest where they meet the sphere, and a spark of light runs along each of them into it now and then. The sphere glows too, with a soft halo breathing behind it. */ :root { --sphere-glow: rgba(20, 99, 243, 0.45); --sphere-halo: rgba(20, 99, 243, 0.16); --sphere-filter: brightness(1) saturate(1.25) drop-shadow(0 0 2px rgba(20, 99, 243, 0.55)); --sphere-flare-filter: brightness(1.2) saturate(1.7) drop-shadow(0 0 14px rgba(20, 99, 243, 1)); --sphere-burst: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(20, 99, 243, 0.5) 45%, rgba(20, 99, 243, 0) 72%); --sphere-line: rgba(20, 99, 243, 0.3); --sphere-line-bright: rgba(20, 99, 243, 0.95); --sphere-line-glow: rgba(20, 99, 243, 0.5); } :root[data-theme="dark"] { --sphere-glow: rgba(28, 223, 242, 0.6); --sphere-halo: rgba(28, 223, 242, 0.3); --sphere-filter: brightness(1.55) saturate(1.3) drop-shadow(0 0 3px rgba(28, 223, 242, 0.85)); --sphere-flare-filter: brightness(2.8) saturate(1.5) drop-shadow(0 0 16px rgba(175, 247, 255, 1)); --sphere-burst: radial-gradient(closest-side, rgba(225, 252, 255, 1), rgba(28, 223, 242, 0.6) 45%, rgba(28, 223, 242, 0) 72%); --sphere-line: rgba(28, 223, 242, 0.35); --sphere-line-bright: rgba(175, 247, 255, 1); --sphere-line-glow: rgba(28, 223, 242, 0.9); } .account-divider { display: flex; align-items: center; gap: 0.3rem; margin: 0.35rem 0 0.15rem; } .account-divider::before, .account-divider::after { content: ""; flex: 1; height: 2px; border-radius: 2px; filter: drop-shadow(0 0 3px var(--sphere-line-glow)); } /* the spark is the first background layer; it travels towards the sphere */ .account-divider::before { background: linear-gradient(90deg, transparent, var(--sphere-line-bright), transparent) -70% 0 / 40% 100% no-repeat, linear-gradient(90deg, transparent, var(--sphere-line) 55%, var(--sphere-line-bright)); animation: spark-right 3.6s ease-in-out infinite; } .account-divider::after { background: linear-gradient(90deg, transparent, var(--sphere-line-bright), transparent) 170% 0 / 40% 100% no-repeat, linear-gradient(90deg, var(--sphere-line-bright), var(--sphere-line) 45%, transparent); animation: spark-left 3.6s ease-in-out infinite; } @keyframes spark-right { 0%, 35% { background-position: -70% 0, 0 0; } 100% { background-position: 170% 0, 0 0; } } @keyframes spark-left { 0%, 35% { background-position: 170% 0, 0 0; } 100% { background-position: -70% 0, 0 0; } } html:not(.js) .account-divider { gap: 0; } html:not(.js) .account-sphere { display: none; } /* it couldn't open anything */ .account-sphere { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: width 0.38s var(--menu-ease), height 0.38s var(--menu-ease), transform 0.25s ease, filter 0.3s ease; } /* the halo behind the sphere */ .account-sphere::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, var(--sphere-halo), transparent 75%); animation: sphere-breathe 2.8s ease-in-out infinite alternate; pointer-events: none; } @keyframes sphere-breathe { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } } .account-sphere-anim { position: absolute; inset: 0; pointer-events: none; } .account-sphere-anim.is-playing { filter: var(--sphere-filter); } /* a soft glow in its place until the animation has loaded */ .account-sphere-anim:not(.is-playing) { background: radial-gradient(closest-side, var(--sphere-glow), transparent); opacity: 0.5; } .account-sphere:hover { transform: scale(1.08); } .account-sphere:active { transform: scale(0.94); } /* Each click sends out a burst of light (account-panel.js adds .is-flaring): a bright flash that expands into a glowing shockwave ring, the sphere flaring up with a little pop, and the divider lines flashing with it. */ .account-sphere { z-index: 2; } /* the burst shines over the options below */ .account-sphere::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--sphere-line-bright); border-radius: 50%; background: var(--sphere-burst); box-shadow: 0 0 22px 4px var(--sphere-line-glow), inset 0 0 14px var(--sphere-line-glow); opacity: 0; pointer-events: none; } .account-sphere.is-flaring::after { animation: sphere-burst 0.8s cubic-bezier(0.15, 0.7, 0.25, 1); } .account-sphere.is-flaring .account-sphere-anim.is-playing { animation: sphere-flare 0.8s ease-out; } .account-divider.is-flaring::before { animation: spark-right 3.6s ease-in-out infinite, line-flash 0.8s ease-out; } .account-divider.is-flaring::after { animation: spark-left 3.6s ease-in-out infinite, line-flash 0.8s ease-out; } @keyframes sphere-burst { 0% { opacity: 1; transform: scale(0.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(2.5); } } @keyframes sphere-flare { 0% { filter: var(--sphere-filter); transform: scale(1); } 18% { filter: var(--sphere-flare-filter); transform: scale(1.16); } 100% { filter: var(--sphere-filter); transform: scale(1); } } @keyframes line-flash { 0%, 100% { filter: brightness(1) drop-shadow(0 0 3px var(--sphere-line-glow)); } 20% { filter: brightness(2.2) drop-shadow(0 0 9px var(--sphere-line-bright)); } } .account-sphere[aria-expanded="true"] { filter: drop-shadow(0 0 12px var(--sphere-glow)); } .account-sphere[aria-expanded="true"]::before { opacity: 1; } .side-menu.is-rail .account-sphere { width: 44px; height: 44px; } /* The account options unfold below the sphere: the rows of the grid grow from 0fr to 1fr (smooth height), and each part fades and rises in turn. The clip cuts only top and bottom, so the Settings row's beam can still reach the glowing edge. */ .account-panel { display: grid; grid-template-columns: minmax(0, 1fr); /* as wide as the menu, never as wide as the name */ grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--menu-ease); } .account-panel-clip { min-width: 0; min-height: 0; overflow-x: visible; overflow-y: clip; } .account-panel-content { padding-top: 0.35rem; transition: padding 0.38s var(--menu-ease); } /* the icon strip has no name line, so leave room above Settings for its edge glow */ .side-menu.is-rail .account-panel-content { padding-top: 1rem; } .account-panel-content > * { transition: opacity 0.25s ease, transform 0.4s var(--menu-ease); } html.js .account-panel:not(.is-open) { grid-template-rows: 0fr; } html.js .account-panel:not(.is-open) .account-panel-content > * { opacity: 0; transform: translateY(12px); } .account-panel.is-open .account-panel-content > :nth-child(2) { transition-delay: 0.07s; } .account-panel.is-open .account-panel-content > :nth-child(3) { transition-delay: 0.14s; } .account-panel.is-open .account-panel-content > :nth-child(4) { transition-delay: 0.21s; } /* Theme switch (theme.js): a menu row with a small on/off switch, on = dark. The moon and sun swap with a little turn; in the icon strip only the icon shows. */ .theme-switch .side-menu-glyph > .side-menu-icon { grid-area: 1 / 1; transition: opacity 0.25s ease, transform 0.35s var(--menu-ease), color 0.2s ease; } .theme-switch[aria-checked="true"] .theme-icon-sun, .theme-switch[aria-checked="false"] .theme-icon-moon { opacity: 0; transform: rotate(-70deg) scale(0.5); } .theme-switch-track { position: relative; flex: none; width: 34px; height: 20px; margin-left: auto; overflow: hidden; border-radius: 999px; background: var(--line); transition: background-color 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease, width 0.38s var(--menu-ease), margin 0.38s var(--menu-ease); } .theme-switch-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 0.3s var(--menu-ease); } .theme-switch[aria-checked="true"] .theme-switch-track { background: var(--bar-blue); box-shadow: 0 0 10px rgba(1, 149, 251, 0.45); } .theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(14px); } .side-menu.is-rail .theme-switch-track { width: 0; margin-left: 0; opacity: 0; } /* switching theme: a soft cross-fade of the whole page (where the browser can) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; } .side-menu-signed-in { max-height: 2rem; margin: 0 0.3rem 0.4rem; overflow: hidden; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; transition: opacity 0.2s ease, max-height 0.38s var(--menu-ease), margin 0.38s var(--menu-ease); } .side-menu-logout:hover, .side-menu-logout.is-going { background: rgba(255, 93, 110, 0.1); color: var(--airmail-red); } .side-menu-logout:hover .side-menu-icon, .side-menu-logout.is-going .side-menu-icon { color: var(--airmail-red); } /* clicked: stays lit while the logout goes through */ .side-menu-logout.is-going { box-shadow: inset 0 0 0 1px rgba(255, 93, 110, 0.35); font-weight: 600; } /* Wide screens: the menu is always docked beside the page, either expanded or collapsed to a slim strip of icons (side-menu.js). */ :root { --menu-width: 16rem; --rail-width: 4.75rem; --menu-pad: 0.75rem; /* the panel's side padding */ --menu-button: 42px; /* the hamburger inside the menu */ --menu-ease: cubic-bezier(0.2, 0.85, 0.25, 1); } body.app { transition: padding-left 0.38s var(--menu-ease); } @media (min-width: 1024px) { html.menu-docked body.app { padding-left: var(--menu-width); } html.menu-docked.menu-rail body.app { padding-left: var(--rail-width); } } .side-menu.is-docked { inset: 0 auto 0 0; z-index: 50; width: var(--menu-width); overflow: visible; transition: width 0.38s var(--menu-ease); } .side-menu.is-docked .side-menu-panel { width: 100%; border-radius: 0; box-shadow: none; } /* Docked, the menu is simply there: it never slides in, only its width changes */ .side-menu.is-docked .side-menu-panel, .side-menu.is-docked .side-menu-item { animation: none; } /* page load or resize: placed straight away (side-menu.js lifts this two frames later) */ .side-menu.is-instant, .side-menu.is-instant * { transition: none; } /* collapsed: just the icons (their names stay for screen readers and hover tooltips). The logo and name shrink away and the hamburger glides into the logo's place, centred over the icons (the right padding centres it within the strip). */ .side-menu.is-rail { width: var(--rail-width); } .side-menu.is-rail .side-menu-head { padding: 0.1rem calc((var(--rail-width) - 2 * var(--menu-pad) - var(--menu-button)) / 2) 0.9rem 0; } .side-menu.is-rail .side-menu-logo { width: 0; margin-right: 0; opacity: 0; transform: scale(0.6); } .side-menu.is-rail .side-menu-brand { max-width: 0; } /* the words fade out and get clipped as the menu narrows, instead of popping */ .side-menu.is-rail .side-menu-brand, .side-menu.is-rail .side-menu-label, .side-menu.is-rail .side-menu-signed-in { opacity: 0; } .side-menu.is-rail .side-menu-signed-in { max-height: 0; margin-bottom: 0; } @keyframes menu-in { from { transform: translateX(-100%); } } @keyframes menu-out { to { transform: translateX(-100%); } } @keyframes item-in { from { opacity: 0; transform: translateX(-14px); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .side-menu[open] .side-menu-panel, .side-menu.is-closing .side-menu-panel, .side-menu[open]::backdrop, .side-menu.is-closing::backdrop, .side-menu[open] .side-menu-item, .side-menu-edge, .menu-button.is-spinning .menu-button-anim, .menu-button.is-spinning .menu-button-bars { animation: none; } body.app, .side-menu.is-docked, .side-menu-head, .side-menu-logo, .side-menu-brand, .topbar .wordmark, .side-menu-label, .side-menu-signed-in { transition: none; } .side-menu-item[aria-current="page"]::before, .side-menu-item[aria-current="page"]::after { animation: none; } .account-panel, .account-panel-content, .account-panel-content > *, .account-sphere, .theme-switch .side-menu-icon, .theme-switch-track, .theme-switch-knob { transition: none; } .account-divider::before, .account-divider::after, .account-sphere::before, .account-sphere::after, .account-sphere-anim.is-playing { animation: none !important; } .menu-button-anim, .menu-button-bars, .menu-button-bars .bar { transition: none; } } /* The page fills the space next to the menu, lined up with the top bar (a limit only on very wide screens, so lines stay readable) */ .app-main { max-width: 1600px; padding: clamp(1.75rem, 5vh, 3rem) var(--page-pad); } /* While the next page loads (page-loader.js), a soft blurred veil covers only the main area, with the loading animation in its middle. The side menu and the top bar stay sharp. The veil starts where the top bar ends (--loader-top, measured by page-loader.js) and beside the docked menu, following it when it folds to icons. */ .page-loader { position: fixed; inset: var(--loader-top, 0px) 0 0 0; z-index: 40; display: grid; place-items: center; background: var(--loader-veil); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.25s ease, left 0.38s var(--menu-ease); } .page-loader[hidden] { display: none; } .page-loader.is-visible { opacity: 1; } @media (min-width: 1024px) { html.menu-docked .page-loader { left: var(--menu-width); } html.menu-docked.menu-rail .page-loader { left: var(--rail-width); } } .page-loader-box { display: grid; justify-items: center; gap: 0.15rem; transform: scale(0.94); transition: transform 0.3s var(--menu-ease); } .page-loader.is-visible .page-loader-box { transform: none; } .page-loader-animation { width: 110px; height: 110px; } .page-loader-text { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .page-loader, .page-loader-box { transition: none; } } /* The new page's heading takes the focus after a swap (for screen readers); no ring on it */ .app-main h1[tabindex="-1"]:focus { outline: none; } /* A page with nothing to list yet (Domains): a quiet dashed card saying so */ .empty-state { display: grid; justify-items: center; gap: 0.35rem; padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; border: 1.5px dashed var(--line); border-radius: 18px; background: var(--tabs-bg); text-align: center; } .empty-state-badge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 0.6rem; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); color: #fff; box-shadow: 0 10px 26px -8px rgba(1, 149, 251, 0.7); } .empty-state-badge svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .empty-state-title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; } .empty-state-text { max-width: 26rem; margin: 0; color: var(--muted); text-wrap: pretty; } /* Error pages (errors.py): the animation, what went wrong and the way back, centred on the page (signed out) or in the middle of the main area (signed in). */ .error-state { display: grid; justify-items: center; max-width: 32rem; margin: 0 auto; text-align: center; } .app-main .error-state { min-height: min(68vh, 36rem); align-content: center; } .error-animation { width: min(100%, 22rem); margin-bottom: 1.25rem; } .error-animation-not-found { aspect-ratio: 400 / 230; } .error-animation-error { aspect-ratio: 320 / 190; } .error-title { margin: 0 0 0.5rem; text-wrap: balance; font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; } .error-text { margin: 0 0 1.75rem; color: var(--muted); text-wrap: pretty; } .error-state .error-button { background: var(--brand); color: #fff; } .error-state .error-button:hover { background: #0f55d6; } .error-code { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.8125rem; } /* Domains page: the page header with its main button on the right, a search box, and the domains in a table, each with a glowing status dot (on phones every domain becomes a small card). The dialogs are blue like the page, red for deleting. */ .page-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; } .page-header-row > div { flex: 1 1 26rem; max-width: 52rem; } .add-button { gap: 0.5rem; padding: 0.75rem 1.4rem; background: linear-gradient(135deg, #1463f3, #0195fb); color: #fff; box-shadow: 0 10px 24px -10px #0195fb; white-space: nowrap; } .add-button:hover { background: linear-gradient(135deg, #1463f3, #0195fb); filter: brightness(1.12); } .add-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .domain-search { position: relative; max-width: 24rem; margin: 0 0 1rem; } .domain-search .input-icon { left: 1rem; } .domain-search input { width: 100%; padding: 0.7rem 1rem 0.7rem 2.75rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--input-bg); color: var(--ink); font: inherit; transition: border-color 0.2s ease, box-shadow 0.25s ease; } .domain-search input:focus { outline: none; border-color: #0195fb; box-shadow: 0 0 0 4px rgba(1, 149, 251, 0.2); } .domain-search:focus-within .input-icon { color: #0195fb; } .domain-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-shadow); } .domain-table { width: 100%; border-collapse: collapse; } .domain-table th { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; font-weight: 600; text-align: left; } .domain-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); vertical-align: middle; } .domain-table tbody tr:last-child td { border-bottom: 0; } .domain-row { transition: background-color 0.2s ease; } .domain-row:hover { background: rgba(1, 149, 251, 0.05); } .domain-name { font-weight: 600; word-break: break-all; } .domain-provider { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.8rem; font-weight: 500; } .domain-status { display: inline-flex; align-items: center; gap: 0.5rem; } .status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #ff5d6e; box-shadow: 0 0 8px rgba(255, 93, 110, 0.85); } .domain-status.is-ok .status-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.85); } .help-dot { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--muted); font-size: 0.7rem; font-weight: 700; cursor: help; transition: color 0.2s ease, box-shadow 0.25s ease; } .help-dot:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 2px; } .help-dot:hover, .help-dot:focus { color: #0195fb; box-shadow: 0 0 10px -2px rgba(1, 149, 251, 0.8); } /* Tips (tooltip.js): a word of help in a small card of the panel's own, with a point towards what it's about. It rises into place above it (or drops in below it). */ :root { --tip-edge: rgba(20, 99, 243, 0.22); --tip-shadow: 0 14px 34px rgba(15, 26, 61, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; } :root[data-theme="dark"] { --tip-edge: rgba(123, 150, 255, 0.34); --tip-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 28px -8px rgba(1, 149, 251, 0.65); } .tip { position: fixed; z-index: 60; max-width: min(17.5rem, calc(100vw - 24px)); white-space: pre-line; /* a tip can have lines of its own (an example, as a list) */ padding: 0.65rem 0.9rem; border: 1px solid var(--tip-edge); border-radius: 12px; background: var(--dialog-bg); box-shadow: var(--tip-shadow); color: var(--ink); font-size: 0.86rem; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 0.15s ease, transform 0.2s ease, visibility 0s linear 0.2s; } .tip[data-side="below"] { transform: translateY(-5px); } .tip.is-long { max-width: min(24rem, calc(100vw - 24px)); } .tip.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease, transform 0.28s var(--menu-ease), visibility 0s; } /* the point: a corner of the same card, turned towards the element */ .tip::after { content: ""; position: absolute; left: calc(var(--arrow-x, 50%) - 6px); width: 11px; height: 11px; background: var(--dialog-bg); transform: rotate(45deg); } .tip[data-side="above"]::after { bottom: -6.5px; border-right: 1px solid var(--tip-edge); border-bottom: 1px solid var(--tip-edge); } .tip[data-side="below"]::after { top: -6.5px; border-left: 1px solid var(--tip-edge); border-top: 1px solid var(--tip-edge); } @media (prefers-reduced-motion: reduce) { .tip, .tip[data-side="below"], .tip.is-shown { transform: none; transition: opacity 0.15s ease, visibility 0s linear 0.15s; } .tip.is-shown { transition: opacity 0.15s ease, visibility 0s; } } .domain-action { color: var(--airmail-blue); font-weight: 600; text-decoration: none; } .domain-action:hover { text-decoration: underline; text-underline-offset: 3px; } .domain-action.is-disabled { color: var(--muted); opacity: 0.6; cursor: not-allowed; } .domain-delete-cell { width: 1%; text-align: right; } .domain-delete { display: inline-flex; margin: 0; } .domain-none td { color: var(--muted); text-align: center; } .icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease; } .icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-button.is-danger { color: #ff5d6e; } .icon-button.is-danger:hover { border-color: rgba(255, 93, 110, 0.4); background: rgba(255, 93, 110, 0.12); box-shadow: 0 0 14px -4px rgba(255, 93, 110, 0.8); } @media (max-width: 640px) { .domain-table thead { display: none; } .domain-table, .domain-table tbody, .domain-table td { display: block; } .domain-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); } .domain-table tbody tr:last-child { border-bottom: 0; } .domain-table td { padding: 0; border: 0; } .domain-row td:nth-child(2), .domain-row td:nth-child(3) { font-size: 0.9rem; } .domain-row .domain-delete-cell { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: auto; } .domain-none { display: block; padding: 1rem; } } .domain-dialog { --accent: #0195fb; --badge: linear-gradient(135deg, #1463f3, #0195fb); border-color: rgba(1, 149, 251, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 48px -12px rgba(1, 149, 251, 0.8); } .domain-dialog.is-danger { --accent: #ff5d6e; --badge: linear-gradient(135deg, #e11d48, #ff5d6e); border-color: rgba(255, 93, 110, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 48px -12px rgba(255, 93, 110, 0.8); } .domain-dialog .field input { background: var(--input-bg); transition: border-color 0.2s ease, box-shadow 0.25s ease; } .domain-dialog .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(1, 149, 251, 0.22); } .domain-dialog .field:focus-within .input-icon { color: var(--accent); } /* Authenticating a domain (domain.html): a card per DNS record to add, with its type, host and value (ready to copy) and, after a check, a pill saying what DNS holds: green found, grey not yet, amber different. Moving the mail here (MX) sits apart, behind a warning. */ .dns-group { display: grid; gap: 0.85rem; margin: 0 0 1.75rem; } .dns-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; } .dns-group-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } .dns-group-hint { margin: -0.4rem 0 0.2rem; color: var(--muted); font-size: 0.9rem; } .dns-checked { margin: 0; color: var(--muted); font-size: 0.85rem; } .dns-record { display: grid; gap: 0.9rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--card-shadow); transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* a record the check found: a green glow all round, and a faint green light in its corner */ .dns-record.is-found { border-color: rgba(34, 197, 94, 0.7); background: radial-gradient(120% 90% at 0% 0%, rgba(34, 197, 94, 0.1), transparent 55%), var(--card-bg); box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(34, 197, 94, 0.18), 0 0 42px -12px rgba(34, 197, 94, 0.95); } .dns-record.is-different { border-color: rgba(245, 158, 11, 0.5); } /* the head: the record's number, its title and hint, and the check's pill */ .dns-record-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.35rem 0.9rem; } /* the number: glowing in a rounded square, blue until the check finds the record, then green */ .dns-step { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #1463f3, #0195fb); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 18px -3px rgba(1, 149, 251, 0.95); color: #fff; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255, 255, 255, 0.75); transition: background 0.3s ease, box-shadow 0.3s ease; } .dns-record.is-found .dns-step { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 18px -3px rgba(34, 197, 94, 0.95); } .dns-record-titles { min-width: 0; padding-top: 0.2rem; } .dns-record-title { margin: 0; font-size: 1.05rem; font-weight: 700; } .dns-record-hint { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; } .dns-status { flex: none; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; } /* Found: bigger, with a glowing green tick */ .dns-status.is-found { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.95rem 0.38rem 0.45rem; border: 1px solid rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.16); color: var(--ok-text); font-size: 0.92rem; box-shadow: 0 0 20px -4px rgba(34, 197, 94, 0.85); } .dns-status-tick { flex: none; width: 20px; height: 20px; filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.9)); } .dns-status-tick circle { fill: #22c55e; } .dns-status-tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .dns-status.is-missing { background: rgba(152, 162, 194, 0.16); color: var(--muted); } .dns-status.is-different { background: rgba(245, 158, 11, 0.16); color: #f59e0b; } .dns-fields { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.6rem 1rem; align-items: center; margin: 0; } .dns-fields dt { color: var(--muted); font-size: 0.9rem; font-weight: 600; } .dns-fields dd { display: grid; gap: 0.25rem; min-width: 0; margin: 0; } .dns-box { width: fit-content; padding: 0.4rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; } .dns-box.is-placeholder { color: var(--muted); font-family: inherit; font-style: italic; } .dns-full { color: var(--muted); font-size: 0.8rem; word-break: break-all; } .dns-detail { margin: 0; padding: 0.6rem 0.8rem; border-left: 3px solid #f59e0b; border-radius: 0 8px 8px 0; background: rgba(245, 158, 11, 0.08); font-size: 0.9rem; } .dns-record.is-missing .dns-detail { border-left-color: var(--line); background: var(--input-bg); } .dns-warning { margin: 0; padding: 0.8rem 1rem; border: 1px solid rgba(245, 158, 11, 0.45); border-radius: 12px; background: rgba(245, 158, 11, 0.08); font-size: 0.9rem; } .dns-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin: 0 0 1rem; } .dns-actions .button { padding: 0.8rem 1.5rem; } .dns-check { display: flex; margin: 0; } @media (max-width: 640px) { .dns-fields { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .dns-fields dd { margin-bottom: 0.4rem; } .dns-record-head { grid-template-columns: auto minmax(0, 1fr); } .dns-record-head .dns-status { grid-column: 2; justify-self: start; } .dns-actions .button { flex: 1 1 100%; } } /* Back to the list, above a page's title: a small pill whose arrow leans the way it goes */ .back-link { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1rem; padding: 0.4rem 0.9rem 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .back-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--menu-ease); } .back-link:hover { border-color: #0195fb; background: rgba(1, 149, 251, 0.08); color: var(--ink); box-shadow: 0 0 18px -6px rgba(1, 149, 251, 0.8); } .back-link:hover svg { transform: translateX(-3px); } .back-link:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .back-link svg { transition: none; } } /* Fitting in with the mail the domain has already (Zoho Mail, Brevo...). Blue: do this; green: keep yours, or all's well; grey: wait until the mail moves; red: delete now. */ :root { --ok-text: #15803d; } :root[data-theme="dark"] { --ok-text: #4ade80; } .dns-status.is-elsewhere { background: color-mix(in srgb, var(--airmail-blue) 14%, transparent); color: var(--airmail-blue); } /* At the top, for a domain no other mail service uses: a green bar with a light sweeping across it now and then */ .dns-ready { position: relative; display: flex; align-items: center; gap: 0.95rem; margin: 0 0 1.75rem; padding: 1rem 1.3rem; overflow: hidden; border: 1px solid rgba(34, 197, 94, 0.55); border-radius: 16px; background: linear-gradient(100deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.08) 55%, rgba(34, 197, 94, 0.16)); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.1), 0 0 34px -10px rgba(34, 197, 94, 0.85); } .dns-ready::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: translateX(-130%) skewX(-18deg); animation: ready-shine 4s ease-in-out 0.5s infinite; pointer-events: none; } @keyframes ready-shine { 0% { transform: translateX(-130%) skewX(-18deg); } 40%, 100% { transform: translateX(330%) skewX(-18deg); } } .dns-ready-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 0 18px -2px rgba(34, 197, 94, 0.9); } .dns-ready-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dns-ready-icon svg circle { display: none; } /* the badge is the circle */ .dns-ready-title { margin: 0; color: var(--ok-text); font-size: 1.05rem; font-weight: 700; } .dns-ready-text { margin: 0.1rem 0 0; font-size: 0.92rem; } @media (prefers-reduced-motion: reduce) { .dns-ready::after { animation: none; display: none; } } /* Add them all at once: the records as a zone file, for DNS providers that import one */ .dns-import { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem 0.95rem; margin: 0 0 1.75rem; padding: 0.95rem 1.1rem 0.95rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(100deg, rgba(1, 149, 251, 0.1), rgba(139, 92, 246, 0.06)); } .dns-import-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); color: #fff; box-shadow: 0 0 18px -4px rgba(1, 149, 251, 0.85); } .dns-import-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .dns-import-text { min-width: 0; } .dns-import-title { margin: 0; font-size: 1.02rem; font-weight: 700; } .dns-import-hint { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; text-wrap: pretty; } .dns-import-button { padding: 0.7rem 1.3rem; } @media (max-width: 640px) { .dns-import { grid-template-columns: auto minmax(0, 1fr); } .dns-import-button { grid-column: 1 / -1; } /* the whole width, under the words */ } /* On a record's card, when the domain has that record already: one line on what to do */ .dns-action { --tone: var(--airmail-blue); display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.45rem 0 0; color: var(--tone); font-size: 0.9rem; font-weight: 600; } .dns-action.is-keep { --tone: var(--ok-text); } .dns-action svg { flex: none; width: 17px; height: 17px; margin-top: 0.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* The summary at the end of the page: what other mail services have on the domain, framed like an airmail envelope (red and blue stripes along the top): what to do with their records, and what to remove, when */ .dns-found { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.1rem; margin: 0 0 1.75rem; padding: 1.5rem 1.4rem 1.25rem; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg); box-shadow: var(--card-shadow); } .dns-found::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--airmail-red) 0 12px, transparent 12px 18px, var(--airmail-blue) 18px 30px, transparent 30px 36px); } .dns-found-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); color: #fff; box-shadow: 0 0 16px -3px rgba(1, 149, 251, 0.8); } .dns-found-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dns-found-body { display: grid; gap: 0.75rem; min-width: 0; } .dns-found-title { margin: 0.55rem 0 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } .dns-found-text { margin: 0; color: var(--muted); font-size: 0.92rem; } .dns-services { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .dns-service { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.35rem 0.45rem 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); } .dns-service-name { font-weight: 700; font-size: 0.92rem; margin-right: 0.15rem; } .dns-role { padding: 0.12rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--airmail-blue) 12%, transparent); color: var(--airmail-blue); font-size: 0.78rem; font-weight: 600; } .dns-todo { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .dns-todo-item { --tone: var(--airmail-blue); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.65rem; font-size: 0.93rem; } .dns-todo-item.is-keep { --tone: var(--ok-text); } .dns-todo-item.is-move { --tone: var(--muted); } .dns-todo-item > svg { width: 18px; height: 18px; margin-top: 0.15rem; fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dns-todo-body { display: grid; gap: 0.4rem; min-width: 0; } .dns-todo-body p { margin: 0; } .dns-now { display: grid; gap: 0.3rem; } .dns-now-label { color: var(--muted); font-size: 0.82rem; font-weight: 600; } .dns-now code { padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--input-bg); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; word-break: break-all; } .dns-remove { display: grid; gap: 0.75rem; margin-top: 0.35rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .dns-remove-title { margin: 0; font-size: 1.05rem; font-weight: 700; } /* What to remove, in the summary: a group per moment (now, when the mail moves, if a service is no longer used), each record as the domain provider lists it */ .dns-delete-group { display: grid; gap: 0.35rem; padding: 0.9rem 1.1rem 0.5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--input-bg); } .dns-delete-group.is-now { border-color: color-mix(in srgb, var(--airmail-red) 50%, transparent); } .dns-delete-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 700; } .dns-delete-title svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .dns-delete-group.is-now .dns-delete-title svg { stroke: var(--airmail-red); } .dns-delete-hint { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.9rem; } .dns-delete-rows { margin: 0; padding: 0; list-style: none; } .dns-delete-row { display: grid; grid-template-columns: 4.5rem minmax(4rem, max-content) minmax(0, 1fr); align-items: center; gap: 0.3rem 0.9rem; padding: 0.65rem 0; border-top: 1px solid var(--line); } .dns-delete-row .dns-box { padding: 0.2rem 0.55rem; font-size: 0.8rem; } .dns-delete-host, .dns-delete-value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.86rem; } .dns-delete-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dns-delete-note { grid-column: 2 / -1; margin: 0; color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; } .dns-delete-note code { color: var(--ink); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.82rem; } .dns-keep { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.2rem 0 0; font-size: 0.92rem; } .dns-keep svg { flex: none; width: 18px; height: 18px; margin-top: 0.12rem; fill: none; stroke: var(--ok-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { .dns-found { grid-template-columns: minmax(0, 1fr); padding: 1.4rem 1.1rem 1.1rem; } .dns-found-title { margin-top: 0; } .dns-delete-row { grid-template-columns: auto minmax(0, 1fr); } .dns-delete-value, .dns-delete-note { grid-column: 1 / -1; } } /* A menu row for a page that's on its way: "Soon" beside its name */ .side-menu-soon { margin-left: 0.5rem; padding: 0.08rem 0.45rem; border-radius: 999px; background: rgba(1, 149, 251, 0.14); color: #4db3ff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; vertical-align: 0.1em; } :root:not([data-theme="dark"]) .side-menu-soon { color: var(--brand); } /* SMTP & API (smtp.html): the settings apps send with, and the keys they log in with */ .smtp-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1.5rem; padding: 0.8rem 1rem; border: 1px solid color-mix(in srgb, var(--airmail-blue) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--airmail-blue) 9%, transparent); font-size: 0.92rem; } .smtp-note svg { flex: none; width: 19px; height: 19px; margin-top: 0.1rem; fill: none; stroke: var(--airmail-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Ready to send: the checklist at the top of SMTP & API (engine/checks.py). A green glow once it can send; each check a mark: a green tick, a red ring to do, an amber warning. */ .ready-card { display: grid; gap: 0.85rem; margin: 0 0 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--card-shadow); } .ready-card.is-ready { border-color: rgba(34, 197, 94, 0.55); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.1), 0 0 34px -10px rgba(34, 197, 94, 0.85); } .ready-card.is-ready .smtp-title { color: var(--ok-text); } .ready-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; } .ready-catching-up { margin: 0; color: #f59e0b; font-size: 0.9rem; } .ready-list { display: grid; margin: 0; padding: 0; list-style: none; } .ready-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 0.15rem 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--line); } .ready-item:first-child { border-top: 0; } .ready-mark { position: relative; box-sizing: border-box; width: 20px; height: 20px; border: 2px solid #ff5d6e; border-radius: 50%; box-shadow: 0 0 8px rgba(255, 93, 110, 0.55); } .ready-item.is-ok .ready-mark { border-color: #22c55e; background: #22c55e; box-shadow: 0 0 10px rgba(34, 197, 94, 0.75); } .ready-item.is-ok .ready-mark::after { content: ""; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .ready-item.is-warning .ready-mark { border-color: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, 0.6); } .ready-item.is-warning .ready-mark::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; color: #f59e0b; font-size: 0.72rem; font-weight: 800; line-height: 1; } .ready-title { font-weight: 600; } .ready-detail { grid-column: 2; color: var(--muted); font-size: 0.9rem; } .ready-link { grid-column: 2; justify-self: start; color: var(--airmail-blue); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .ready-link:hover, .ready-link:focus-visible { text-decoration: underline; } /* Settings > Mail server name: the name in use, the choice of it (one card per authenticated domain, like the key variants), then what the name needs, marked like Ready to send */ .server-name-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; } .mail-server-form { display: grid; gap: 1.1rem; margin-top: 1.25rem; } .mail-server-needs { display: grid; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .proxy-fields { grid-column: 2; grid-template-columns: 8.5rem minmax(0, 1fr); margin-top: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); } .proxy-fields .dns-full { word-break: normal; overflow-wrap: break-word; } /* words, not a record value */ @media (max-width: 640px) { .proxy-fields { grid-template-columns: minmax(0, 1fr); padding: 0.8rem; } } .mail-server-empty { display: grid; justify-items: center; gap: 0.5rem; padding: 0.5rem 0 0.75rem; text-align: center; } .mail-server-empty .empty-state-title, .mail-server-empty .empty-state-text { margin: 0; } .switch-list { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.2rem; color: var(--muted); } .switch-list strong { color: var(--ink); overflow-wrap: anywhere; } .smtp-card { display: grid; gap: 1rem; margin: 0 0 2rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--card-shadow); } .smtp-title { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; } .smtp-fields { grid-template-columns: 7.5rem minmax(0, 1fr); } /* The two ports side by side, each with its encryption under it */ .smtp-ports { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 0.9rem; } .smtp-port { display: grid; justify-items: start; gap: 0.3rem; } .smtp-or { align-self: center; margin-top: -1.3rem; color: var(--muted); font-style: italic; } /* level with the boxes */ .smtp-ports-note { display: block; margin-top: 0.45rem; } .smtp-keys { display: grid; gap: 1rem; } .smtp-keys .domain-search { margin: 0; } .key-hint { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.9rem; color: var(--muted); } .key-label { display: none; color: var(--muted); } /* each key's own login, copied with its button */ .key-login .copy-box { padding: 0.1rem 0.15rem 0.1rem 0.6rem; } .key-login .copy-box-text { font-size: 0.85rem; word-break: normal; white-space: nowrap; } .key-login .copy-box .copy-button { width: 28px; height: 28px; } /* the new key, in a green dialog */ .domain-dialog.is-success { --accent: #22c55e; --badge: linear-gradient(135deg, #16a34a, #22c55e); border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 48px -12px rgba(34, 197, 94, 0.8); } .domain-dialog.is-success .field { display: grid; gap: 0.45rem; } .domain-dialog.is-success .copy-box { width: 100%; } .domain-dialog.is-success .copy-box-text { word-break: break-all; } /* Choosing a key's length: cards that light up when chosen */ .key-choices { display: grid; gap: 0.55rem; min-width: 0; margin: 0; padding: 0; border: 0; } .key-choices legend { padding: 0; margin-bottom: 0.55rem; } .variant-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .choice-card { position: relative; display: grid; gap: 0.2rem; border: 1px solid var(--line); background: var(--input-bg); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .choice-card { align-content: start; padding: 0.8rem 0.9rem; border-radius: 14px; } .choice-card input { position: absolute; opacity: 0; pointer-events: none; } .choice-card:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); } .choice-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 1px var(--accent), 0 0 30px -4px color-mix(in srgb, var(--accent) 85%, transparent), inset 0 0 22px -8px color-mix(in srgb, var(--accent) 70%, transparent); } /* the tick in the corner: an empty ring, filled and glowing on the chosen card */ .choice-card { padding-right: 2.6rem; } .choice-tick { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 50%; transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease; } .choice-tick svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: opacity 0.2s ease, transform 0.3s var(--menu-ease); } .choice-card:has(input:checked) .choice-tick { border-color: transparent; background: var(--badge); box-shadow: 0 0 14px -1px var(--accent); } .choice-card:has(input:checked) .choice-tick svg { opacity: 1; transform: none; } .choice-card:has(input:focus-visible) { outline: 3px solid var(--airmail-blue); outline-offset: 2px; } .choice-title { font-weight: 700; } .choice-card:has(input:checked) .choice-title { color: var(--accent); } .choice-text { color: var(--muted); font-size: 0.84rem; line-height: 1.4; } /* Dropdowns (dropdown.js): a button showing the choice, and a list in a card of its own that drops down (or up, when there's more room there). Without JavaScript, the plain list. */ select[data-dropdown] { width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); font: inherit; } select[data-dropdown-ready] { display: none; } .dropdown { position: relative; } .dropdown-button { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.25s ease; } .dropdown-button:hover { border-color: color-mix(in srgb, var(--accent, #0195fb) 60%, var(--line)); } .dropdown-button:focus-visible, .dropdown.is-open .dropdown-button { outline: none; border-color: var(--accent, #0195fb); box-shadow: 0 0 0 4px rgba(1, 149, 251, 0.22); } .dropdown-button svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--menu-ease); } .dropdown.is-open .dropdown-button svg { transform: rotate(180deg); } .dropdown-list { position: absolute; left: 0; right: 0; z-index: 5; max-height: 20rem; margin: 0; padding: 0.35rem; overflow: auto; list-style: none; border: 1px solid var(--tip-edge); border-radius: 14px; background: var(--dialog-bg); box-shadow: var(--tip-shadow); outline: none; animation: dropdown-down 0.2s var(--menu-ease) both; } .dropdown-list[data-side="below"] { top: calc(100% + 6px); } .dropdown-list[data-side="above"] { bottom: calc(100% + 6px); animation-name: dropdown-up; } @keyframes dropdown-down { from { opacity: 0; transform: translateY(-6px); } } @keyframes dropdown-up { from { opacity: 0; transform: translateY(6px); } } .dropdown-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.8rem; border-radius: 10px; cursor: pointer; } .dropdown-option.is-active { background: color-mix(in srgb, var(--accent, #0195fb) 14%, transparent); } .dropdown-option[aria-selected="true"] { color: var(--accent, #0195fb); font-weight: 700; } .dropdown-option svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; } .dropdown-option[aria-selected="true"] svg { visibility: visible; } .dropdown-list:focus-visible .dropdown-option.is-active { box-shadow: inset 0 0 0 2px var(--accent, #0195fb); } @media (prefers-reduced-motion: reduce) { .dropdown-list { animation: none; } .dropdown-button svg { transition: none; } } @media (max-width: 640px) { .smtp-card { padding: 1.1rem; } .smtp-fields { grid-template-columns: minmax(0, 1fr); } .key-row .domain-delete-cell { grid-row: 1 / span 6; } .key-row .key-label { display: inline; } .key-row .key-login { display: flex; align-items: center; gap: 0.4rem; } .variant-options { grid-template-columns: minmax(0, 1fr); } } /* The guide button on SMTP & API: the coding animation in a glowing blue ring. A click flashes it, and the page turns over (page-flip.js). */ /* the header's buttons stay together on the right (not the text block's flexible width) */ .page-header-row > .page-header-actions { flex: 0 0 auto; max-width: none; margin-left: auto; } .page-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.1rem; } .docs-button { position: relative; display: grid; place-items: center; flex: none; width: 72px; height: 72px; padding: 5px; border: 2px solid rgba(1, 149, 251, 0.75); border-radius: 50%; background: var(--dialog-bg); /* a face of its own, so the whole animation sits inside the ring */ box-shadow: 0 0 22px -4px rgba(1, 149, 251, 0.9), inset 0 0 16px -4px rgba(1, 149, 251, 0.6); transition: transform 0.3s var(--menu-ease), box-shadow 0.3s ease, border-color 0.3s ease; } .docs-button:hover { transform: scale(1.06); border-color: #4db3ff; box-shadow: 0 0 32px -2px rgba(1, 149, 251, 1), inset 0 0 18px -4px rgba(1, 149, 251, 0.8); } .docs-button:focus-visible { outline: 3px solid var(--airmail-blue); outline-offset: 4px; } .docs-button-anim, .docs-button-still { grid-area: 1 / 1; } .docs-button-anim { width: 100%; height: 100%; overflow: hidden; border-radius: 50%; } .docs-button-still { width: 30px; height: 30px; fill: none; stroke: #0195fb; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .docs-button-anim.is-playing + .docs-button-still { display: none; } .docs-button::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(200, 236, 255, 0.95), 0 0 34px 10px rgba(1, 149, 251, 0.9); opacity: 0; pointer-events: none; } .docs-button.is-flashing { animation: docs-pop 0.45s ease-out; } .docs-button.is-flashing::after { animation: docs-flash 0.55s ease-out; } @keyframes docs-pop { 35% { transform: scale(1.14); filter: brightness(1.45) drop-shadow(0 0 14px #4db3ff); } } @keyframes docs-flash { 0% { opacity: 1; transform: scale(0.95); } 100% { opacity: 0; transform: scale(1.9); } } .back-link.is-flashing { animation: back-flash 0.45s ease-out; } @keyframes back-flash { 35% { box-shadow: 0 0 0 2px rgba(200, 236, 255, 0.8), 0 0 26px rgba(1, 149, 251, 0.9); color: var(--ink); } } /* Page flips (page-flip.js): the main area turns about the middle of the screen until edge-on, and the next page turns in from the other side */ html.is-page-flipping body, body:has(#app-main.flip-in), body:has(#app-main.flip-in-back) { overflow-x: clip; } #app-main.flip-out { animation: page-flip-out 0.34s cubic-bezier(0.5, 0, 0.75, 0) forwards; } #app-main.flip-out-back { animation: page-flip-out-back 0.34s cubic-bezier(0.5, 0, 0.75, 0) forwards; } #app-main.flip-in { animation: page-flip-in 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; } #app-main.flip-in-back { animation: page-flip-in-back 0.46s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes page-flip-out { to { transform: perspective(1800px) rotateY(-90deg); opacity: 0.3; } } @keyframes page-flip-out-back { to { transform: perspective(1800px) rotateY(90deg); opacity: 0.3; } } @keyframes page-flip-in { from { transform: perspective(1800px) rotateY(90deg); opacity: 0.3; } } @keyframes page-flip-in-back { from { transform: perspective(1800px) rotateY(-90deg); opacity: 0.3; } } /* The SMTP guide (smtp-docs.html): language tabs, and each example in a code window, dark in both themes, with its file name and a copy button */ .guide-code, .guide-notes { display: grid; gap: 1rem; margin: 0 0 2rem; } .code-tabs { margin: 0; } .code-tabs .page-tab { flex: 1 1 0; min-width: 5.5rem; padding: 0.6rem 0.9rem; border: 0; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; } /* each language's logo in a round white badge, which lights up with its tab */ .code-tabs .page-tab { gap: 0.6rem; } .lang-badge { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(123, 150, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25); transition: box-shadow 0.25s ease, transform 0.3s var(--menu-ease); } .lang-badge img { width: 22px; height: 22px; object-fit: contain; } .page-tab:hover .lang-badge { transform: scale(1.06); } .page-tab[aria-selected="true"] .lang-badge { box-shadow: 0 0 0 2px #0195fb, 0 0 16px -2px rgba(1, 149, 251, 0.95); } .code-panel { display: grid; gap: 0.85rem; } .code-install { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin: 0; } .code-install-label { color: var(--muted); font-size: 0.9rem; font-weight: 600; } .code-window { overflow: hidden; border: 1px solid rgba(123, 150, 255, 0.28); border-radius: 16px; background: #0a1030; box-shadow: var(--card-shadow), 0 0 30px -14px rgba(1, 149, 251, 0.7); } .code-window-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.6rem 0.55rem 1.1rem; border-bottom: 1px solid rgba(123, 150, 255, 0.2); background: rgba(255, 255, 255, 0.03); } .code-file { color: #98a2c2; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; } .copy-button.code-copy { display: inline-grid; grid-template-columns: 18px auto; align-items: center; column-gap: 0.4rem; width: auto; height: auto; padding: 0.4rem 0.75rem; border-color: rgba(123, 150, 255, 0.3); border-radius: 9px; background: rgba(255, 255, 255, 0.04); /* the code window is dark in both themes */ color: #c8d2f0; font: inherit; font-size: 0.85rem; font-weight: 600; } .copy-button.code-copy:hover { background: rgba(1, 149, 251, 0.16); color: #fff; } .copy-button.code-copy::after { display: none; } /* the window would cut the bubble off: the label says it */ .code-copy-label, .code-copy-done { grid-area: 1 / 2; } .code-copy-done { visibility: hidden; color: #2dd4bf; } .copy-button.code-copy.is-copied .code-copy-label { visibility: hidden; } .copy-button.code-copy.is-copied .code-copy-done { visibility: visible; } .code-block { margin: 0; padding: 1.1rem 1.25rem 1.25rem; overflow-x: auto; color: #e6ebff; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.88rem; line-height: 1.65; tab-size: 4; } .code-block:focus-visible { outline: 2px solid #4db3ff; outline-offset: -2px; } .code-comment { color: #7d8bb5; font-style: italic; } .code-string { color: #7ee0b8; } .code-keyword { color: #c4a1ff; } .code-number { color: #ffb86b; } .guide-list { display: grid; gap: 0.75rem; margin: 0; padding: 0 0 0 1.2rem; } .guide-list li { padding-left: 0.2rem; line-height: 1.55; } .guide-list li::marker { color: #0195fb; } .guide-value { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92rem; } .smtp-card .dns-full a { color: var(--airmail-blue); } @media (max-width: 640px) { .page-header-actions { width: 100%; } .page-header-actions .add-button { flex: 1 1 auto; } .code-block { font-size: 0.8rem; padding: 0.9rem 1rem 1rem; } } @media (prefers-reduced-motion: reduce) { .docs-button, .docs-button::after, .back-link { animation: none !important; transition: none; } } /* Credits (credits.html): the Someless Tricks logo rises onto a stage of warm light (the one moment of motion), then the maker's photo and quote, the hard work, why Someless Mail, the thanks, and the donation */ .credits { --accent: #0195fb; --badge: linear-gradient(135deg, #1463f3, #0195fb); display: grid; gap: 1.5rem; max-width: 66rem; } .credits .page-header { margin: 0; } .credits a:not(.button) { color: var(--accent); font-weight: 600; } .credits-stage { display: grid; justify-items: center; gap: 1.1rem; padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse 58% 68% at 50% 40%, rgba(255, 146, 28, 0.24), transparent 72%), var(--card-bg); box-shadow: var(--card-shadow); text-align: center; } .credits-logo { width: min(100%, 580px); height: auto; filter: drop-shadow(0 18px 34px rgba(255, 112, 0, 0.35)); animation: credits-rise 1s var(--menu-ease) both; } @keyframes credits-rise { from { opacity: 0; transform: translateY(22px) scale(0.93); filter: drop-shadow(0 0 0 rgba(255, 112, 0, 0)); } } .credits-lead { max-width: 34rem; margin: 0; color: var(--muted); font-size: 1.12rem; line-height: 1.5; text-wrap: balance; } .credits-lead strong { color: var(--ink); } .credits-maker, .credits-card, .credits-features li, .credits-donate { border: 1px solid var(--line); border-radius: 20px; background: var(--card-bg); box-shadow: var(--card-shadow); } .credits-maker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); padding: clamp(1.25rem, 3.5vw, 2.25rem); } .credits-photo { width: clamp(150px, 19vw, 210px); height: auto; aspect-ratio: 1; object-fit: cover; border: 4px solid transparent; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb 55%, #ff9a1f) border-box; /* the ring */ box-shadow: 0 0 42px -8px rgba(1, 149, 251, 0.85); } .credits-name { margin: 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.02em; } .credits-role { margin: 0.1rem 0 1rem; color: var(--muted); } .credits-quote { margin: 0 0 1rem; padding: 0.9rem 1.1rem 0.9rem 1.25rem; border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: rgba(1, 149, 251, 0.09); font-size: 1.12rem; font-weight: 600; line-height: 1.5; quotes: "\201C" "\201D"; } .credits-quote p { margin: 0; text-wrap: pretty; } .credits-quote p::before { content: open-quote; } .credits-quote p::after { content: close-quote; } .credits-maker-words > p { margin: 0; line-height: 1.65; } .credits-card { padding: clamp(1.25rem, 3vw, 1.75rem); } .credits-card p { max-width: 72ch; margin: 0.65rem 0 0; line-height: 1.65; } .credits-heading { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; } .credits-built { color: var(--muted); font-size: 0.92rem; } .credits-why { display: grid; gap: 1rem; } .credits-why-lead { max-width: 72ch; margin: 0; color: var(--muted); line-height: 1.6; } .credits-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; } .credits-features li { padding: 1.15rem 1.2rem 1.2rem; border-radius: 18px; } .credits-feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--badge); color: #fff; box-shadow: 0 8px 20px -8px rgba(1, 149, 251, 0.9); } .credits-feature-icon svg, .credits-donate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .credits-features h3 { margin: 0.85rem 0 0.3rem; font-size: 1.02rem; font-weight: 700; } .credits-features p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; } .credits-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .credits-option { padding: 1rem 1.15rem; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); } .credits-option h3 { margin: 0 0 0.3rem; font-size: 0.98rem; font-weight: 700; } .credits-option p { margin: 0; font-size: 0.9rem; line-height: 1.5; } .credits-option.is-ours { border: 1px solid rgba(1, 149, 251, 0.7); background: rgba(1, 149, 251, 0.1); color: var(--ink); box-shadow: 0 0 30px -10px rgba(1, 149, 251, 0.9); } .credits-donate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-color: rgba(244, 63, 94, 0.45); background: linear-gradient(110deg, rgba(244, 63, 94, 0.14), rgba(1, 149, 251, 0.07)), var(--card-bg); } .credits-donate-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #e11d48, #fb7185); color: #fff; box-shadow: 0 0 26px -6px rgba(244, 63, 94, 0.9); } .credits-donate-icon svg { fill: currentColor; } .credits-donate-words p { margin: 0.35rem 0 0; color: var(--muted); line-height: 1.6; } .button.credits-donate-button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.6rem; background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 12px 26px -12px rgba(244, 63, 94, 0.95); } .button.credits-donate-button:hover { filter: brightness(1.08); } .credits-donate-button svg { width: 18px; height: 18px; fill: currentColor; } @media (max-width: 900px) { .credits-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .credits-compare { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .credits-maker { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .credits-quote { border-left: 0; border-top: 3px solid var(--accent); border-radius: 0 0 14px 14px; text-align: left; } .credits-maker-words > p { text-align: left; } .credits-features { grid-template-columns: minmax(0, 1fr); } .credits-donate { grid-template-columns: auto minmax(0, 1fr); } .button.credits-donate-button { grid-column: 1 / -1; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .credits-logo { animation: none; } } /* Senders (senders.html): a card per sender, its name and address with a round initial, and what makes other mail servers trust it (its domain, DKIM, DMARC) */ .sender-list { display: grid; gap: 0.9rem; margin-top: 1.25rem; } .sender-row { border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--card-shadow); transition: border-color 0.25s ease, box-shadow 0.3s ease; } .sender-row:hover { border-color: rgba(1, 149, 251, 0.45); box-shadow: var(--card-shadow), 0 0 26px -12px rgba(1, 149, 251, 0.8); } .sender-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 1rem 1.25rem; } .sender-avatar, .phone-avatar { display: grid; place-items: center; flex: none; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb 60%, #4db3ff); box-shadow: 0 0 14px -3px rgba(1, 149, 251, 0.9); color: #fff; font-weight: 800; } .sender-avatar { width: 38px; height: 38px; font-size: 1rem; } .sender-who { flex: 1 1 16rem; min-width: 0; margin: 0; font-size: 1rem; font-weight: 400; overflow-wrap: anywhere; } .sender-name { font-weight: 700; } .sender-email { color: var(--muted); } .sender-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } .sender-edit { padding: 0.5rem 1.1rem; font-size: 0.92rem; } .sender-delete { display: inline-flex; margin: 0; } .sender-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 0; padding: 0.9rem 1.25rem 1rem; border-top: 1px solid var(--line); } .sender-facts dt { color: var(--muted); font-size: 0.8rem; font-weight: 600; } .sender-facts dd { display: flex; align-items: center; gap: 0.4rem; margin: 0.2rem 0 0; font-weight: 600; overflow-wrap: anywhere; } .sender-facts dd svg { flex: none; width: 18px; height: 18px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sender-facts dd.is-yes svg { stroke: #22c55e; filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.7)); } .sender-facts dd.is-no svg { stroke: #ff5d6e; } .sender-none { margin: 0; color: var(--muted); } .sender-test { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; font-size: 0.92rem; } .sender-test svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* the last test email, across the card; and the one being sent, in its dialog */ .sender-last-test { grid-column: 1 / -1; } .sender-last-test dd { flex-wrap: wrap; gap: 0.2rem 0.75rem; } .test-meta { color: var(--muted); font-size: 0.85rem; font-weight: 500; } .test-result, .test-status { color: var(--muted); } .test-result.is-delivered, .test-status.is-delivered { color: var(--ok-text); } .test-result.is-bounced, .test-status.is-bounced { color: #ff5d6e; } .test-result.is-retrying, .test-status.is-retrying { color: #f59e0b; } /* The test email's line in its dialog: the text centred between two glowing lines. Waiting, a light runs along them; delivered, they flare, a glow flashes between them and a tick draws itself after the text. Red when it bounced, amber while it's being tried again. */ .test-status { --line: #0195fb; --line-light: #9fdcff; position: relative; isolation: isolate; /* the flash stays behind the text, not behind the dialog */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem; margin: 0.2rem 0; padding: 1rem 0.5rem; font-weight: 600; text-align: center; overflow-wrap: anywhere; } .test-status[hidden] { display: none; } .test-status::before, .test-status::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line-light) 50%, var(--line) 82%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--line) 80%, transparent); } .test-status::before { top: 0; } .test-status::after { bottom: 0; } /* waiting: the line twice as long, sliding by, so its light runs along */ .test-status.is-queued::before, .test-status.is-queued::after { background-size: 200% 100%; animation: line-run 1.6s linear infinite; } @keyframes line-run { from { background-position: 100% 0; } to { background-position: -100% 0; } } .test-status.is-bounced { --line: #ff5d6e; --line-light: #ffb3bc; } .test-status.is-retrying { --line: #f59e0b; --line-light: #fde68a; } .test-status-flash { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 50% 50%, rgba(1, 149, 251, 0.5), transparent 70%); opacity: 0; pointer-events: none; } .test-status-spinner, .test-status-tick { display: none; flex: none; } .test-status.is-queued .test-status-spinner { display: inline-block; width: 0.75rem; height: 0.75rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } .test-status.is-delivered { color: var(--ok-text); } .test-status.is-delivered::before, .test-status.is-delivered::after { animation: line-flare 1.2s ease-out both; } @keyframes line-flare { 0% { box-shadow: 0 0 0 transparent; filter: brightness(1); } 30% { box-shadow: 0 0 26px 3px rgba(1, 149, 251, 0.95); filter: brightness(1.8); } 100% { box-shadow: 0 0 14px rgba(1, 149, 251, 0.85); filter: brightness(1.15); } } .test-status.is-delivered .test-status-flash { animation: status-flash 1.4s ease-out both; } @keyframes status-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0.35; } } .test-status.is-delivered .test-status-tick { display: inline-block; width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.9)); animation: tick-pop 0.45s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .test-status-tick circle { fill: #22c55e; } .test-status-tick path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; } .test-status.is-delivered .test-status-tick path { animation: tick-draw 0.4s 0.55s ease-out forwards; } @keyframes tick-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes tick-draw { to { stroke-dashoffset: 0; } } .test-status.is-bounced { color: #ff5d6e; } .test-status.is-retrying { color: #f59e0b; } @media (prefers-reduced-motion: reduce) { .test-status::before, .test-status::after, .test-status-flash, .test-status.is-delivered .test-status-tick, .test-status.is-delivered .test-status-tick path { animation: none !important; } .test-status.is-delivered .test-status-flash { opacity: 0.35; } .test-status-tick path { stroke-dashoffset: 0; } .test-status.is-queued .test-status-spinner { animation-duration: 2.4s; } } .smtp-note a { color: var(--airmail-blue); font-weight: 600; } .empty-state-action { margin-top: 0.4rem; } /* Adding a sender (sender-form.html): the form, and beside it a phone showing the sender as an inbox will, filled in as you type (sender-form.js) */ .sender-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; gap: 2rem 3rem; max-width: 64rem; } .sender-form { display: grid; gap: 1.4rem; } .sender-form .field input { background: var(--input-bg); transition: border-color 0.2s ease, box-shadow 0.25s ease; } .sender-form .field input:focus { outline: none; border-color: #0195fb; box-shadow: 0 0 0 4px rgba(1, 149, 251, 0.22), 0 8px 24px -10px #0195fb; } .sender-form .field:focus-within .input-icon { color: #0195fb; } .sender-form .field-hint { margin: -0.1rem 0 0.15rem; line-height: 1.5; transition: color 0.2s ease; } .sender-form .field-hint a { color: var(--airmail-blue); font-weight: 600; } /* the address: typed before the @, the domain picked beside it */ .email-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(11rem, auto); gap: 0.6rem; align-items: stretch; } .email-parts .dropdown, .email-parts .dropdown-button { height: 100%; } .sender-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.4rem; } .sender-form-actions .button { padding: 0.8rem 1.5rem; } .phone { position: relative; margin: 0; padding: 10px 10px 0; border: 2px solid rgba(123, 150, 255, 0.45); border-bottom: 0; border-radius: 44px 44px 0 0; background: linear-gradient(180deg, rgba(123, 150, 255, 0.14), transparent 70%); box-shadow: 0 0 40px -18px rgba(1, 149, 251, 0.9); -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); } .phone-screen { display: grid; gap: 0.7rem; padding: 0.8rem 1.1rem 2.2rem; border-radius: 34px 34px 0 0; background: var(--dialog-bg); } .phone-status { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.78rem; font-weight: 600; } .phone-notch { width: 5.2rem; height: 1.15rem; border-radius: 999px; background: #000; box-shadow: inset 0 0 0 1px rgba(123, 150, 255, 0.25); } .phone-signal { display: flex; align-items: flex-end; gap: 2px; height: 0.7rem; } .phone-signal i { width: 3px; border-radius: 1px; background: var(--muted); } .phone-signal i:nth-child(1) { height: 40%; } .phone-signal i:nth-child(2) { height: 70%; } .phone-signal i:nth-child(3) { height: 100%; } .phone-toolbar { display: flex; align-items: center; gap: 0.9rem; color: var(--muted); } .phone-toolbar span { flex: 1; } .phone-toolbar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .phone-folder { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0; font-weight: 700; } .phone-dot { width: 9px; height: 9px; border: 1.5px solid var(--muted); border-radius: 50%; } .phone-when { margin: -0.45rem 0 0 1.15rem; color: var(--muted); font-size: 0.8rem; } .phone-from { display: flex; align-items: center; gap: 0.5rem; } .phone-from-label { color: var(--muted); font-size: 0.85rem; } .phone-sender { display: flex; flex: 1; align-items: center; gap: 0.55rem; min-width: 0; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border: 1px solid rgba(1, 149, 251, 0.45); border-radius: 999px; background: color-mix(in srgb, #0195fb 10%, transparent); box-shadow: 0 0 22px -10px #0195fb; } .phone-avatar { width: 32px; height: 32px; font-size: 0.85rem; } .phone-sender-text { display: grid; min-width: 0; line-height: 1.25; } .phone-name { overflow: hidden; font-weight: 700; font-size: 0.9rem; text-overflow: ellipsis; white-space: nowrap; } .phone-email { overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; } .phone-lines { display: grid; gap: 0.45rem; margin-top: 0.4rem; } .phone-lines i { height: 0.5rem; border-radius: 999px; background: var(--line); } .phone-lines i:nth-child(2) { width: 85%; } .phone-lines i:nth-child(3) { width: 60%; } @media (max-width: 900px) { .sender-layout { grid-template-columns: minmax(0, 1fr); } .phone { width: min(22rem, 100%); justify-self: center; } } @media (max-width: 640px) { .sender-facts { grid-template-columns: minmax(0, 1fr); } .sender-actions { margin-left: 0; } .sender-form-actions .button { flex: 1 1 auto; } .email-parts { grid-template-columns: minmax(0, 1fr); } } /* The celebration when a domain is authenticated (celebrate.js): over the page, under the notice board, and clicks go straight through */ .celebrate { position: fixed; inset: 0; z-index: 140; width: 100%; height: 100%; pointer-events: none; } /* Settings > Miscellaneous > Automatic domain checks: the switch, then how often as a row of pills (greyed while it's off), and a custom time in hours or days (settings-misc.js) */ .checks-about { margin: 0 0 1.1rem; color: var(--muted); line-height: 1.6; } .checks-about strong { color: var(--ink); } .checks-form { display: grid; gap: 1.1rem; max-width: 44rem; } .checks-every { display: grid; gap: 0.7rem; margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity 0.25s ease; } .checks-every.is-off { opacity: 0.45; } .every-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; } .every-choice input, .unit-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .every-choice span { display: inline-block; padding: 0.55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease; } .every-choice span:hover { border-color: rgba(45, 212, 191, 0.55); } .every-choice input:checked + span { border-color: rgba(45, 212, 191, 0.8); color: var(--ink); background: color-mix(in srgb, #14b8a6 16%, var(--input-bg)); box-shadow: 0 0 18px -6px rgba(45, 212, 191, 0.9); } .every-choice input:focus-visible + span, .unit-switch input:focus-visible + span { outline: 2px solid #2dd4bf; outline-offset: 2px; } .checks-every.is-off .every-choice span, .checks-every.is-off .unit-switch span { cursor: default; } .every-custom { display: grid; grid-template-columns: minmax(0, 12rem) auto; align-items: center; gap: 0.5rem 0.75rem; } .every-custom[hidden] { display: none; } .every-amount input { padding-left: 2.6rem; background: var(--input-bg); } /* room for the clock */ .unit-switch { justify-self: start; display: inline-flex; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); } .unit-switch span { display: inline-block; padding: 0.45rem 0.95rem; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--muted); transition: background-color 0.2s ease, color 0.2s ease; } .unit-switch input:checked + span { background: linear-gradient(135deg, #0d9488, #2dd4bf); color: #fff; box-shadow: 0 0 14px -4px rgba(45, 212, 191, 0.9); } .every-in-days { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.9rem; } /* the highlight glides between Minutes, Hours and Days (settings-misc.js); a converted number fades in */ .unit-switch.has-glider { position: relative; isolation: isolate; } .unit-switch.has-glider span { position: relative; z-index: 1; } .unit-switch.has-glider input:checked + span { background: transparent; box-shadow: none; } .unit-switch-glider { position: absolute; top: 0.2rem; bottom: 0.2rem; left: 0; z-index: 0; border-radius: 999px; background: linear-gradient(135deg, #0d9488, #2dd4bf); box-shadow: 0 0 14px -4px rgba(45, 212, 191, 0.9); pointer-events: none; transition: transform 0.38s var(--menu-ease), width 0.38s var(--menu-ease); } .unit-switch.is-settling .unit-switch-glider { transition: none; } .every-amount input.is-converted { animation: amount-in 0.35s ease; } @keyframes amount-in { from { color: transparent; } } @media (prefers-reduced-motion: reduce) { .unit-switch-glider { transition: none; } .every-amount input.is-converted { animation: none; } } .checks-status { margin: 0; color: var(--muted); font-size: 0.9rem; } @media (max-width: 640px) { .every-custom { grid-template-columns: minmax(0, 1fr); } } /* A Save that waits for a change (save-when-changed.js): grey and locked until then, hovered or not (as specific as the cards' own button colours, which it has to win over) */ .button.is-locked, .button.is-locked:hover, .settings-card .card-form .card-button.is-locked, .settings-card .card-form .card-button.is-locked:hover { background: var(--input-bg); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); filter: none; cursor: not-allowed; transform: none; } /* Mailboxes (mailboxes.html): a card per inbox, in teal, with its storage as a bar that fills from teal to blue, and its aliases as chips. The dialogs are the domains' blue ones. */ .mailbox-list { display: grid; gap: 0.9rem; margin-top: 1.25rem; } .mailbox-row { --tone: #14b8a6; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg); box-shadow: var(--card-shadow); transition: border-color 0.25s ease, box-shadow 0.3s ease; } .mailbox-row:hover { border-color: rgba(20, 184, 166, 0.5); box-shadow: var(--card-shadow), 0 0 26px -12px rgba(45, 212, 191, 0.85); } .mailbox-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 1rem 1.25rem; } .mailbox-badge { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #0d9488, #14b8a6 55%, #0195fb); box-shadow: 0 0 14px -3px rgba(45, 212, 191, 0.9); color: #fff; } .mailbox-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mailbox-who { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; } .mailbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; } .mailbox-button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1rem; font-size: 0.92rem; } .mailbox-button svg { flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mailbox-count { min-width: 1.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--ink); font-size: 0.78rem; font-weight: 700; text-align: center; } .mailbox-delete { display: inline-flex; margin: 0; } .mailbox-open { display: inline-flex; margin: 0; } .icon-button.is-webmail { color: #2dd4bf; } .icon-button.is-webmail:hover { border-color: rgba(45, 212, 191, 0.6); box-shadow: 0 0 16px -4px rgba(45, 212, 191, 0.8); } .mailbox-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.9rem 2rem; padding: 0.9rem 1.25rem 1.1rem; border-top: 1px solid var(--line); } .mailbox-label { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; } .storage-bar { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--line) 80%, transparent); } .storage-bar span { position: absolute; inset: 0 auto 0 0; width: max(var(--used), 0%); border-radius: inherit; background: linear-gradient(90deg, #14b8a6, #0195fb); box-shadow: 0 0 10px rgba(45, 212, 191, 0.8); } .mailbox-storage-text { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.88rem; } .mailbox-storage-text strong { color: var(--ink); } .mailbox-none { margin: 0; color: var(--muted); font-size: 0.9rem; } .alias-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .alias-chips li { padding: 0.2rem 0.65rem; border: 1px solid rgba(20, 184, 166, 0.45); border-radius: 999px; background: color-mix(in srgb, #14b8a6 9%, transparent); font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; } .smtp-note.is-warning { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.1); } .smtp-note.is-warning svg { stroke: #f59e0b; } /* in the dialogs: storage as a number and its unit; the aliases, each with its trash button */ .storage-parts { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.6rem; align-items: stretch; } .storage-parts .dropdown, .storage-parts .dropdown-button { height: 100%; } .domain-dialog .password-rules { margin: -0.5rem 0 0; } .alias-list { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .alias-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.4rem 0.35rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; } .alias-email { min-width: 0; font-weight: 600; overflow-wrap: anywhere; } .alias-delete { display: inline-flex; margin: 0; } .alias-delete .icon-button { width: 34px; height: 34px; } .alias-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 0.5rem 0.6rem; } .alias-add .field-label { grid-column: 1 / -1; } .alias-add .rules-save { white-space: nowrap; } /* Configuration details: what a mail app asks for, a row per way to connect (server, port, security), each value with its copy button */ .config-group { display: grid; gap: 0.55rem; padding-top: 1rem; border-top: 1px solid var(--line); } .config-title { margin: 0; font-size: 1rem; font-weight: 700; } .config-title span { margin-left: 0.45rem; color: var(--muted); font-size: 0.85rem; font-weight: 500; } .config-row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem 6rem; align-items: end; gap: 0.6rem; margin: 0; } .config-row.is-login { grid-template-columns: minmax(0, 1fr) 13.6rem; } .config-cell { display: grid; gap: 0.3rem; min-width: 0; } .config-cell dt { color: var(--muted); font-size: 0.8rem; font-weight: 600; } .config-cell dd { min-width: 0; margin: 0; } .config-cell .copy-box { width: 100%; } .config-cell .copy-box-text { overflow-wrap: anywhere; } .config-plain { display: flex; align-items: center; min-height: 2.6rem; font-weight: 600; } .config-or { display: flex; align-items: center; justify-content: flex-end; min-height: 2.6rem; color: var(--muted); font-style: italic; } /* Set it up on a device (config-devices.js): the phone at the top right turns the card over, to a tab each for Android, iPhone and Windows PC */ .config-dialog .rules-form { position: relative; } .config-face { display: grid; gap: 1.35rem; min-width: 0; } .config-face[hidden] { display: none; } .config-dialog .rules-head { min-height: 64px; padding-right: 4.75rem; } /* room for the phone */ .docs-button.config-flip { position: absolute; top: 1.2rem; right: clamp(1.1rem, 4vw, 1.75rem); z-index: 2; width: 64px; height: 64px; padding: 4px; cursor: pointer; } .config-flip .docs-button-still { display: grid; place-items: center; color: #0195fb; } .config-flip .docs-button-still svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .config-flip.is-back { border-color: #4db3ff; } /* on the back: the way back */ .device-tabs .dialog-tab { padding-inline: 0.75rem; white-space: nowrap; } .platform-icon { flex: none; height: 18px; width: auto; } .platform-icon.is-android { height: 13px; } .platform-icon path { transition: fill 0.25s ease; } .dialog-tab[aria-selected="true"] .platform-icon path { fill: #fff; } /* white on the blue */ .device-panel { display: grid; gap: 0.9rem; min-width: 0; } .device-panel[hidden] { display: none; } .device-lead { margin: 0; font-weight: 600; } .device-steps { display: grid; gap: 0.6rem; margin: 0; padding-left: 1.35rem; line-height: 1.55; } .device-steps li { padding-left: 0.2rem; } .device-steps li::marker { color: var(--accent); font-weight: 700; } .device-steps code, .device-note code { padding: 0.08rem 0.4rem; border: 1px solid var(--line); border-radius: 7px; background: var(--input-bg); font-size: 0.9em; font-weight: 700; overflow-wrap: anywhere; } .device-note { margin: 0; padding-top: 0.85rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .device-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1.1rem 1.35rem; } .device-code { display: grid; justify-items: center; gap: 0.7rem; } .device-qr { display: grid; place-items: center; width: 164px; height: 164px; padding: 6px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 0 28px -8px rgba(1, 149, 251, 0.75); } .device-qr svg { display: block; width: 100%; height: 100%; opacity: 0; transform: scale(0.94); transition: opacity 0.35s ease, transform 0.45s var(--menu-ease); } .device-qr.is-ready svg { opacity: 1; transform: none; } .device-qr-wait { width: 30px; height: 30px; border: 3px solid rgba(1, 149, 251, 0.25); border-top-color: #0195fb; border-radius: 50%; animation: spin 0.8s linear infinite; } .device-download { width: 100%; padding: 0.6rem 1rem; justify-content: center; font-size: 0.9rem; } @media (max-width: 640px) { .device-tabs .dialog-tab { gap: 0.35rem; padding-inline: 0.45rem; font-size: 0.9rem; } .device-profile { grid-template-columns: minmax(0, 1fr); } .device-code { justify-self: center; } .docs-button.config-flip { width: 56px; height: 56px; } .config-dialog .rules-head { padding-right: 4rem; } } @media (prefers-reduced-motion: reduce) { .device-qr svg { transition: none; } .device-qr-wait { animation: none; } } @media (max-width: 640px) { .mailbox-facts { grid-template-columns: minmax(0, 1fr); } .mailbox-actions { width: 100%; margin-left: 0; } .mailbox-button { flex: 1 1 auto; justify-content: center; } .alias-add { grid-template-columns: minmax(0, 1fr); } .config-row, .config-row.is-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .config-cell.is-wide, .config-cell.is-two { grid-column: 1 / -1; } .config-or { display: none; } .config-title span { display: block; margin: 0.15rem 0 0; } } /* Settings > Miscellaneous > Webmail sign-in lock: how many tries, then how long a wait */ .lock-fields { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: start; } .lock-wait { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; } .lock-wait .input-wrap { flex: 0 1 9rem; } @media (max-width: 640px) { .lock-fields { grid-template-columns: minmax(0, 1fr); } } /* Need help? on the Authenticate page (help-links.js): the button, at the start of the row, and the dialog's links, each with how far it got */ .dns-actions .help-open { display: inline-flex; align-items: center; gap: 0.5rem; margin-right: auto; } .help-open svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .help-create { display: grid; gap: 1.1rem; } .help-create .field[hidden] { display: none; } .help-expires { margin: 0; padding: 0; border: 0; } .help-links { display: grid; gap: 0.7rem; padding-top: 1rem; border-top: 1px solid var(--line); } .help-link-list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .help-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 0.4rem 0.8rem; padding: 0.35rem 0.1rem; } .help-divider { margin: 0.4rem 1.5rem; list-style: none; } .help-link-main { display: grid; gap: 0.4rem; min-width: 0; } .help-link-title { margin: 0; font-weight: 700; } .help-link-made { color: var(--muted); font-weight: 500; } .help-link-lock { width: 16px; height: 16px; margin-right: 0.3rem; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .help-link-until { margin: 0; color: var(--muted); font-size: 0.85rem; } .help-link .copy-box { width: 100%; } .help-link .copy-box-text { overflow-wrap: anywhere; } .help-link-state { align-self: start; padding: 0.25rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .help-link-state.is-opened { border-color: rgba(1, 149, 251, 0.5); color: #0195fb; } .help-link-state.is-authenticated { border-color: rgba(34, 197, 94, 0.5); color: var(--ok-text); } .help-link-delete { display: inline-flex; margin: 0; } .help-link-none { margin: 0; color: var(--muted); font-size: 0.9rem; } .help-link-url { justify-self: start; max-width: 100%; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; } .help-panel { display: grid; gap: 1.1rem; } .help-panel[hidden] { display: none; } .help-panel:not([hidden]) { animation: panel-in 0.3s ease both; } /* the tab just opened fades in */ @keyframes panel-in { from { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .help-panel:not([hidden]) { animation: none; } } /* the dialog's two tabs, the highlight gliding to the one open (help-links.js) */ .dialog-tabs { position: relative; isolation: isolate; display: flex; padding: 0.25rem; border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); } .dialog-tab { position: relative; z-index: 1; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; transition: color 0.25s ease; } .dialog-tab[aria-selected="true"] { color: #fff; } .dialog-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .dialog-tab-count { min-width: 1.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: rgba(1, 149, 251, 0.18); font-size: 0.8rem; } .dialog-tab[aria-selected="true"] .dialog-tab-count { background: rgba(255, 255, 255, 0.22); } .dialog-tabs-glider { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; z-index: 0; border-radius: 999px; background: linear-gradient(135deg, #1463f3, #0195fb); box-shadow: 0 0 16px -4px rgba(1, 149, 251, 0.85); pointer-events: none; transition: transform 0.38s var(--menu-ease), width 0.38s var(--menu-ease); } .dialog-tabs.is-settling .dialog-tabs-glider { transition: none; } @media (prefers-reduced-motion: reduce) { .dialog-tabs-glider { transition: none; } } @media (max-width: 640px) { .dns-actions .help-open { margin-right: 0; } .help-link { grid-template-columns: minmax(0, 1fr) auto; } .help-link-state { grid-column: 1; grid-row: 2; justify-self: start; } .help-link-delete { grid-column: 2; grid-row: 1; } } /* Settings > Account > Secure the panel and webmail: whether this page came over HTTPS, then the steps, with tables of what to type where, each value ready to copy */ .secure-now { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0; padding: 0.8rem 1rem; border: 1px solid; border-radius: 12px; font-weight: 600; } .secure-now svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .secure-now.is-ok { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); color: var(--ok-text); } .secure-now.is-warning { border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.09); color: #f59e0b; } .secure-part { display: grid; gap: 0.85rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } .secure-now + .secure-part { border-top: 0; padding-top: 0.4rem; } .secure-title { margin: 0; font-size: 1.15rem; font-weight: 700; } .secure-text { margin: 0; color: var(--muted); line-height: 1.55; } .secure-text code, .secure-list code, .secure-text strong code { padding: 0.05rem 0.35rem; border-radius: 6px; background: var(--input-bg); color: var(--ink); font-size: 0.88em; overflow-wrap: anywhere; } .secure-step { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0; font-size: 1rem; font-weight: 700; } .secure-step-number { display: grid; place-items: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); box-shadow: 0 0 12px -3px rgba(1, 149, 251, 0.85); color: #fff; font-size: 0.85rem; } .secure-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; } .secure-table { width: 100%; min-width: 34rem; border-collapse: collapse; } .secure-table th, .secure-table td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .secure-table tr:last-child > * { border-bottom: 0; } .secure-table thead th { background: var(--input-bg); color: var(--muted); font-size: 0.8rem; font-weight: 700; } .secure-table tbody th { color: var(--muted); font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .secure-table .copy-box { width: auto; } .secure-full { display: block; margin-top: 0.3rem; color: var(--muted); font-size: 0.8rem; } .secure-list { display: grid; gap: 0.55rem; margin: 0; padding-left: 1.2rem; line-height: 1.55; } .secure-list a, .secure-text a { color: var(--airmail-blue); font-weight: 600; } .secure-code { position: relative; min-width: 0; } /* in a grid: the code scrolls in its box, the page doesn't widen */ .secure-code pre { margin: 0; padding: 1rem 3.5rem 1rem 1.1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--input-bg); font-size: 0.88rem; line-height: 1.6; } .secure-code .copy-button { position: absolute; top: 0.6rem; right: 0.6rem; } .secure-table .copy-box-text { overflow-wrap: anywhere; } /* columns apart: a line between them, values in the middle, and each proxy host's column named in a colour of its own (the web interface blue, the webmail teal) */ .secure-table th + th, .secure-table th + td, .secure-table td + td { border-left: 1px solid var(--line); } .secure-table td, .secure-table thead th + th { text-align: center; } .secure-table td .copy-box { display: inline-flex; max-width: 100%; } .secure-for { display: inline-block; padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; } .secure-for.is-panel { background: rgba(1, 149, 251, 0.16); color: #4db3ff; box-shadow: inset 0 0 0 1px rgba(1, 149, 251, 0.45); } .secure-for.is-webmail { background: rgba(20, 184, 166, 0.16); color: #2dd4bf; box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.45); } /* on a phone: each row a block of its own, every value under its column's name */ @media (max-width: 640px) { .secure-table-wrap { overflow: visible; border: 0; border-radius: 0; } .secure-table { min-width: 0; } .secure-table thead { display: none; } .secure-table, .secure-table tbody, .secure-table tr, .secure-table th, .secure-table td { display: block; } .secure-table tr { margin-bottom: 0.6rem; padding: 0.35rem 0; border: 1px solid var(--line); border-radius: 14px; } .secure-table th, .secure-table td, .secure-table th + td, .secure-table td + td { padding: 0.35rem 0.85rem; border: 0; text-align: left; } .secure-table tbody th { color: var(--ink); font-size: 0.95rem; white-space: normal; } .secure-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; } .secure-table .copy-box { width: 100%; } } /* The profile picture (settings-avatar.js): its preview in the username card, and the dialog to place it: the picture behind a glowing circle, the rest dimmed */ .avatar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; } .avatar-preview { display: grid; place-items: center; flex: none; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #1463f3, #0195fb); box-shadow: 0 0 0 3px var(--card-bg, #0b1535), 0 0 0 5px rgba(1, 149, 251, 0.55), 0 0 26px -4px rgba(1, 149, 251, 0.8); color: #fff; font-size: 2.2rem; font-weight: 800; } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .avatar-about { display: grid; flex: 1 1 18rem; gap: 0.4rem; min-width: 0; } .avatar-title { margin: 0; font-weight: 700; } .avatar-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; } .avatar-choose { display: inline-flex; align-items: center; gap: 0.5rem; } .avatar-choose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .avatar-remove { margin: 0; } .avatar-remove-button { display: inline-flex; align-items: center; gap: 0.5rem; } .avatar-remove[hidden] { display: none; } .avatar-split { height: 1px; margin: 1.2rem 0; background: var(--line); } img.topbar-avatar.is-picture { display: block; padding: 0; object-fit: cover; box-shadow: 0 0 12px -3px rgba(1, 149, 251, 0.8); } .avatar-stage { position: relative; justify-self: center; width: min(300px, 100%); aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: repeating-conic-gradient(var(--input-bg) 0 25%, transparent 0 50%) 0 0 / 22px 22px; cursor: grab; touch-action: none; user-select: none; } .avatar-stage.is-dragging { cursor: grabbing; } .avatar-stage:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .avatar-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; } .avatar-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(4, 10, 30, 0.62), inset 0 0 0 2px rgba(159, 220, 255, 0.95), 0 0 24px 2px rgba(1, 149, 251, 0.75); pointer-events: none; } .avatar-zoom { display: flex; align-items: center; gap: 0.7rem; } .avatar-zoom svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; } .avatar-zoom input { flex: 1; accent-color: #0195fb; }