/* ========================================================================== TemporaryMail.com — shared site design layer -------------------------------------------------------------------------- Loaded on every page from inc/static/meta.php, after main.css. Holds the design tokens, the aurora backdrop, navbar refinements and the shared page furniture (headings, cards, forms, long-form copy, footer). Homepage-specific styling lives in home.css, which loads after this file and reuses the same tokens. The backdrop uses `z-index: -1` deliberately: has no background, so body's background propagates to the canvas and a negative-z-index child paints above it while staying behind all normal content. That avoids giving any wrapper a stacking context, which would otherwise trap fixed modals below the fixed navbar. ========================================================================== */ /* ========================================================================== 1. Design tokens ========================================================================== */ :root{ --tm-accent: #1FB6FF; --tm-accent-2: #6C5CFF; --tm-accent-3: #00D2B4; --tm-ink: #0B1220; --tm-ink-soft: #334155; --tm-muted: #64748B; --tm-surface: rgba(255, 255, 255, 0.78); --tm-surface-solid: #FFFFFF; --tm-hairline: rgba(15, 23, 42, 0.08); --tm-ring: linear-gradient(135deg, rgba(31, 182, 255, 0.65) 0%, rgba(108, 92, 255, 0.50) 52%, rgba(0, 210, 180, 0.45) 100%); --tm-text-gradient: linear-gradient(120deg, #0B1220 0%, #1E6DD8 42%, #6C5CFF 78%, #00B8D9 100%); --tm-shadow-sm: 0 2px 10px -4px rgba(15, 23, 42, 0.12); --tm-shadow: 0 20px 46px -22px rgba(15, 23, 42, 0.30), 0 4px 14px -6px rgba(15, 23, 42, 0.06); --tm-shadow-lg: 0 38px 80px -34px rgba(31, 120, 255, 0.45), 0 12px 30px -14px rgba(15, 23, 42, 0.16); --tm-radius: 24px; --tm-radius-sm: 16px; --tm-ease: cubic-bezier(0.22, 1, 0.36, 1); } body.dark-mode{ --tm-accent: #4DD0FF; --tm-accent-2: #9B8CFF; --tm-accent-3: #2BE8CC; --tm-ink: #F1F5F9; --tm-ink-soft: #CBD5E1; --tm-muted: #94A3B8; --tm-surface: rgba(30, 32, 46, 0.62); --tm-surface-solid: #1B1D2A; --tm-hairline: rgba(255, 255, 255, 0.09); --tm-ring: linear-gradient(135deg, rgba(77, 208, 255, 0.70) 0%, rgba(155, 140, 255, 0.55) 52%, rgba(43, 232, 204, 0.45) 100%); --tm-text-gradient: linear-gradient(120deg, #FFFFFF 0%, #7FD8FF 40%, #A79BFF 74%, #4DE8D2 100%); --tm-shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.55); --tm-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.75), 0 4px 14px -6px rgba(0, 0, 0, 0.35); --tm-shadow-lg: 0 38px 80px -34px rgba(77, 208, 255, 0.35), 0 12px 30px -14px rgba(0, 0, 0, 0.55); } /* ========================================================================== 2. Aurora backdrop (all pages) ========================================================================== */ body:not(.dark-mode){ background: radial-gradient(1200px 620px at 50% -180px, rgba(31, 182, 255, 0.10), transparent 70%), linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 38%, #FFFFFF 100%); } .tm-aurora{ position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint; } /* Colour wash — plain radial gradients (no blur filter) so scrolling stays cheap. */ .tm-aurora::before{ content: ""; position: absolute; inset: -25%; background: radial-gradient(38% 42% at 18% 12%, rgba(31, 182, 255, 0.28), transparent 62%), radial-gradient(34% 38% at 84% 8%, rgba(108, 92, 255, 0.22), transparent 64%), radial-gradient(42% 40% at 64% 62%, rgba(0, 210, 180, 0.14), transparent 66%), radial-gradient(30% 34% at 10% 74%, rgba(31, 182, 255, 0.12), transparent 66%); animation: tm-aurora-drift 34s ease-in-out infinite alternate; will-change: transform; } body.dark-mode .tm-aurora::before{ background: radial-gradient(38% 42% at 18% 12%, rgba(31, 182, 255, 0.24), transparent 62%), radial-gradient(34% 38% at 84% 8%, rgba(126, 92, 255, 0.24), transparent 64%), radial-gradient(42% 40% at 64% 62%, rgba(0, 210, 180, 0.13), transparent 66%), radial-gradient(30% 34% at 10% 74%, rgba(31, 182, 255, 0.12), transparent 66%); } @keyframes tm-aurora-drift{ 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2.5%, 1.8%, 0) scale(1.06); } 100% { transform: translate3d(2.2%, -1.6%, 0) scale(1.03); } } /* Faint engineering grid, faded out towards the edges. */ .tm-aurora::after{ content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(120% 78% at 50% 6%, #000 0%, transparent 72%); mask-image: radial-gradient(120% 78% at 50% 6%, #000 0%, transparent 72%); } body.dark-mode .tm-aurora::after{ background-image: linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px); } /* ========================================================================== 3. Navbar ========================================================================== */ /* -- Condense on scroll (`is-scrolled` set by the script in navbar.php) ---- */ .navbar{ transition: box-shadow .35s ease, transform .35s ease, height .3s var(--tm-ease), background .3s ease; } body.is-scrolled .navbar{ height: 54px; background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 10px 34px rgba(15, 21, 48, 0.14), 0 2px 8px rgba(15, 21, 48, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; } body.is-scrolled.dark-mode .navbar{ background: rgba(18, 19, 28, 0.94) !important; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important; } body.is-scrolled .navbar .logoSlogan{ opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .3s ease; } .navbar .logoSlogan{ max-height: 20px; transition: opacity .25s ease, max-height .3s ease; } @media (max-width: 1023px){ body.is-scrolled .navbar{ height: 50px; } } /* -- Hover underline on desktop links -------------------------------------- */ .navbar .nav-links-bg-screen .navbar-link::before{ content: ""; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--tm-accent), var(--tm-accent-2)); transform: translateX(-50%); transition: width .28s var(--tm-ease); } .navbar .nav-links-bg-screen .navbar-link:hover::before{ width: 16px; } .navbar .nav-links-bg-screen .navbar-link.selectedMenu::before{ width: 0; } /* -- Keyboard focus -------------------------------------------------------- */ .navbar .navbar-link:focus-visible, .navbar-cta:focus-visible, .custom-toggler:focus-visible, .drawer-link:focus-visible, .drawer-close:focus-visible{ outline: 2px solid var(--tm-accent); outline-offset: 2px; border-radius: 10px; } /* -- Mobile toggler -------------------------------------------------------- */ .custom-toggler{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--tm-hairline); background: rgba(255, 255, 255, 0.6); color: var(--tm-ink-soft); font-size: 18px; line-height: 1; transition: background .22s ease, color .22s ease, transform .22s var(--tm-ease); } .custom-toggler:hover{ background: rgba(31, 182, 255, 0.12); color: var(--tm-accent); transform: translateY(-1px); } body.dark-mode .custom-toggler{ background: rgba(255, 255, 255, 0.06); color: var(--tm-ink-soft); } /* -- Drawer ---------------------------------------------------------------- */ .drawer-link{ border-radius: 14px; transition: background .22s ease, color .22s ease, transform .22s var(--tm-ease); } .drawer-link:hover{ background: rgba(31, 182, 255, 0.10); transform: translateX(3px); } body.menu-open .drawer-nav .drawer-link{ animation: tm-drawer-in .42s var(--tm-ease) both; } body.menu-open .drawer-nav .drawer-link:nth-child(1){ animation-delay: .04s; } body.menu-open .drawer-nav .drawer-link:nth-child(2){ animation-delay: .09s; } body.menu-open .drawer-nav .drawer-link:nth-child(3){ animation-delay: .14s; } body.menu-open .drawer-nav .drawer-link:nth-child(4){ animation-delay: .19s; } body.menu-open .drawer-nav .drawer-link:nth-child(5){ animation-delay: .24s; } body.menu-open .drawer-nav .drawer-link:nth-child(6){ animation-delay: .29s; } @keyframes tm-drawer-in{ from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } /* ========================================================================== 4. Shared page header (.info-header + h1.display-4 + p.lead) ========================================================================== */ .info-header h1.display-4, h1.contact-title{ font-size: clamp(2.2rem, 5.2vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; background: var(--tm-text-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* main.css forces a colour onto headings in dark mode — keep the gradient. */ body.dark-mode .info-header h1.display-4, body.dark-mode h1.contact-title{ color: transparent !important; } .info-header p.lead, p.contact-lead{ font-size: 1.05rem; line-height: 1.7; color: var(--tm-muted); max-width: 46em; margin-left: auto; margin-right: auto; } .contact-eyebrow{ display: inline-block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tm-accent); } /* The arrow divider a few pages use under the header. */ .info-header > .standard-icon{ opacity: 0.35; margin: 6px 0 14px; } /* ========================================================================== 5. Shared surfaces — cards and panels ========================================================================== */ .contact-info-card, .contact-form-card, .statusBox > div, .blogPostCard, .blogCard{ border-radius: var(--tm-radius) !important; background: var(--tm-surface); border: 1px solid var(--tm-hairline); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: var(--tm-shadow-sm); transition: transform .32s var(--tm-ease), box-shadow .32s ease, border-color .32s ease; } .contact-info-card:hover, .blogPostCard:hover, .blogCard:hover{ transform: translateY(-4px); border-color: rgba(31, 182, 255, 0.30); box-shadow: 0 20px 40px -24px rgba(31, 120, 255, 0.55); } .statusBox > div{ padding: 18px 12px; } /* ========================================================================== 6. Forms ========================================================================== */ .form-control{ border-radius: 12px; border: 1px solid var(--tm-hairline); background: var(--tm-surface-solid); color: var(--tm-ink); transition: border-color .22s ease, box-shadow .22s ease, background .22s ease; } .form-control:focus{ border-color: rgba(31, 182, 255, 0.55); box-shadow: 0 0 0 4px rgba(31, 182, 255, 0.14); outline: none; } .form-control::placeholder{ color: var(--tm-muted); opacity: 0.75; } body.dark-mode .form-control{ background: rgba(255, 255, 255, 0.05); border-color: var(--tm-hairline); color: var(--tm-ink); } body.dark-mode .form-control:focus{ background: rgba(255, 255, 255, 0.08); } .mainForm{ max-width: 460px; margin: 0 auto; } .mainForm .form-control{ margin-bottom: 12px; } /* Keep the password toggle flush with its rounded input. */ .input-group > .form-control{ border-top-right-radius: 0; border-bottom-right-radius: 0; } /* ========================================================================== 7. Long-form copy (privacy policy, terms of service, blog posts) ========================================================================== */ .info-header .text-left, .legalCopy{ max-width: 46em; margin: 26px auto 0; font-size: 1rem; line-height: 1.78; color: var(--tm-ink-soft); } .info-header .text-left p, .legalCopy p{ margin-bottom: 1.05em; } /* These pages mark section titles with a bare on its own line. */ .info-header .text-left > strong, .legalCopy > strong{ display: block; margin: 2em 0 0.6em; font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; color: var(--tm-ink); } .info-header .text-left a, .legalCopy a{ color: var(--tm-accent); text-decoration: underline; text-underline-offset: 2px; } /* ========================================================================== 8. Footer ========================================================================== */ .siteFooter{ margin-top: 46px; padding-top: 30px; } .footerDivider{ height: 1px; background: linear-gradient(90deg, transparent, var(--tm-hairline) 18%, var(--tm-hairline) 82%, transparent); border: 0; } .footerLinks a{ color: var(--tm-muted); transition: color .2s ease; } .footerLinks a:hover{ color: var(--tm-accent); } .footerBrandName{ font-weight: 800; letter-spacing: -0.02em; color: var(--tm-ink); } .footerBrandTagline{ color: var(--tm-muted); } /* ========================================================================== 9. Reduced motion ========================================================================== */ @media (prefers-reduced-motion: reduce){ .tm-aurora::before{ animation: none !important; } body.menu-open .drawer-nav .drawer-link{ animation: none !important; opacity: 1 !important; transform: none !important; } .contact-info-card:hover, .blogPostCard:hover, .blogCard:hover, .drawer-link:hover, .custom-toggler:hover{ transform: none !important; } }