/* ========================================================================== TempMail.pk — Flat SaaS theme (pixel-match rebuild) Replaces the liquid-glass system on the homepage template. Ships independently of the Vite build (no Node on this host). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { --bg: #fbfaf7; --bg-alt: #f4f2ec; --surface: #ffffff; --surface-muted: #f6f5f1; --line: #e2dfd6; --line-soft: #efece5; --line-soft-2: #e7e4dc; --ink: #16181a; --ink-2: #2f302c; --ink-3: #44443e; --ink-3b: #5c5b54; --muted: #8a887f; --accent: #0e7a52; --accent-hover: #0b6644; --accent-deep: #0b5f40; --accent-tint: #eef6f1; --accent-tint-border: #d3e9dd; --accent-on-dark: #5fd39a; --forest: #0e3b2a; --warn-tint: #fdf7f4; --warn-tint-border: #efd9cf; --warn: #b4502d; --star: #c98a12; --shadow-card: 0 24px 48px -32px rgba(22, 24, 26, 0.22); } .flat-theme { background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } .flat-theme a { color: var(--accent); text-decoration: none; } .flat-theme a:hover { color: var(--accent-hover); } .flat-theme ::selection { background: #cfe9dc; } @keyframes tmPulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.6); opacity: 0; } } /* ---- container / section rhythm ---------------------------------- */ .flat-container { max-width: 1200px; margin: 0 auto; padding-left: clamp(16px, 3vw, 32px); padding-right: clamp(16px, 3vw, 32px); } .flat-section { padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); } .flat-eyebrow { font-size: 13px; font-weight: 600; color: var(--accent); } .flat-h1 { margin: 0; /* Was clamp(34px,5.4vw,64px) — the 64px ceiling made the headline wrap to 3 lines on wide viewports, eating vertical space above the tool card for no readability benefit at that size. */ font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; } .flat-h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; } .flat-lead { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-3b); text-wrap: pretty; } .flat-mono { font-family: 'IBM Plex Mono', monospace; } /* ---- header --------------------------------------------------------- */ .flat-header { position: sticky; top: 0; z-index: 30; /* Transparent, not a hard color: .flat-theme (the wrapper right inside ) already paints the real page ground (var(--bg), warm cream). body itself ships plain white, so giving the header its own solid color here — whatever it is — creates a visible seam the instant it doesn't match that wrapper exactly. Letting it show through avoids the mismatch entirely. */ background: transparent; padding: 12px clamp(12px, 2.4vw, 24px) 0; } .flat-header-inner { height: 64px; max-width: 980px; margin: 0 auto; padding: 0 8px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 22px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border: 1px solid var(--line-soft-2); border-radius: 99px; box-shadow: 0 1px 0 rgba(22, 24, 26, 0.02), 0 18px 36px -28px rgba(22, 24, 26, 0.18); } .flat-logo { display: flex; align-items: center; gap: 9px; color: var(--ink); flex-shrink: 0; } .flat-logo-mark { width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 600; } .flat-logo-mark img { max-width: 22px; max-height: 22px; } .flat-logo-text { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .flat-logo-text .muted { color: var(--muted); } .flat-nav { display: flex; gap: 2px; flex-wrap: nowrap; align-items: center; min-width: 0; } .flat-nav-link { display: flex; align-items: center; gap: 5px; padding: 8px 11px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); background: transparent; border: none; cursor: pointer; font-family: inherit; } .flat-nav-link:hover { background: #f0eee7; color: var(--ink); } .flat-nav-link.is-active { background: #f0eee7; color: var(--ink); } .flat-nav-chevron { font-size: 10px; color: var(--muted); } .flat-nav-dropdown { position: absolute; left: 0; margin-top: 8px; z-index: 50; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-card); padding: 8px; max-height: 60vh; overflow-y: auto; } .flat-nav-dropdown a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); } .flat-nav-dropdown a:hover { background: var(--surface-muted); color: var(--ink); } .flat-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .flat-select { appearance: none; -webkit-appearance: none; padding: 8px 26px 8px 14px; border-radius: 99px; border: 1px solid var(--line-soft-2); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238a887f'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 9px center / 13px; font-family: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer; } .flat-btn-dark { padding: 9px 20px; border-radius: 99px; background: var(--ink); color: #fff !important; font-size: 13px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; } .flat-btn-dark:hover { background: #2c2f33; color: #fff !important; } .flat-menu-btn { display: none; width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--line-soft-2); background: var(--surface); align-items: center; justify-content: center; cursor: pointer; } @media (max-width: 1040px) { /* Raised from 900px: with Features/How it works/FAQ added to the desktop nav, 5 links + logo + language + Log in no longer fit a narrower container between ~900-1040px — they'd wrap onto a second line and break the fixed-height header. Switch to the hamburger sooner instead. */ .flat-nav { display: none; } .flat-menu-btn { display: flex; } } .flat-mobile-sheet { position: fixed; inset: 0; z-index: 60; } .flat-mobile-sheet-backdrop { position: absolute; inset: 0; background: rgba(22, 24, 26, 0.45); } .flat-mobile-sheet-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 86vw); background: var(--surface); overflow-y: auto; box-shadow: -24px 0 48px -24px rgba(22, 24, 26, 0.3); } /* ---- hero + tool ------------------------------------------------------ */ .flat-hero { border-bottom: 1px solid var(--line-soft-2); background: linear-gradient(var(--bg), var(--bg-alt)); } .flat-hero-inner { /* Tightened so the tool card (the actual product) sits inside the first viewport on common screen sizes instead of being pushed below the fold by hero whitespace — was clamp(40px,7vw,88px)/clamp(40px,6vw,72px) with a 44px gap; the old ceilings only bit on wide viewports, which is exactly where the tool card was getting pushed out of view. */ padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 28px); } .flat-hero-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .flat-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-3); } .flat-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex-shrink: 0; } .flat-trust-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--ink-3b); } .flat-trust-item { display: flex; align-items: center; gap: 7px; } /* Tool card */ .flat-tool { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 0 rgba(22, 24, 26, 0.03), var(--shadow-card); overflow: hidden; } .flat-tool-top { padding: clamp(18px, 2.4vw, 28px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .flat-tool-addr-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .flat-tool-addr { font-family: 'IBM Plex Mono', monospace; font-size: clamp(20px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); word-break: break-all; cursor: pointer; user-select: all; } .flat-tool-addr .muted { color: var(--muted); } .flat-tool-actions { display: flex; gap: 8px; flex-wrap: wrap; } .flat-btn { padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .flat-btn:hover { background: var(--surface-muted); } .flat-btn-primary { padding: 12px 18px; border-radius: 10px; border: none; background: var(--accent); color: #fff !important; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 132px; display: inline-flex; align-items: center; justify-content: center; } .flat-btn-primary:hover { background: var(--accent-hover); color: #fff !important; } .flat-tool-edit { padding: 0 clamp(18px, 2.4vw, 28px) 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .flat-input-group { flex: 1 1 360px; display: flex; border: 1px solid #d9d5ca; border-radius: 10px; overflow: hidden; background: var(--surface); min-width: 0; } .flat-input-group input { flex: 1; min-width: 0; border: none; outline: none; padding: 12px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--ink); background: transparent; } .flat-input-group .at-sep { display: flex; align-items: center; padding: 0 4px 0 12px; border-left: 1px solid var(--line-soft-2); font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--muted); } .flat-input-group select { appearance: none; -webkit-appearance: none; border: none; outline: none; padding: 12px 14px 12px 2px; font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--ink); background: transparent; cursor: pointer; max-width: 40vw; } .flat-tool-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px clamp(18px, 2.4vw, 28px); border-top: 1px solid var(--line-soft); background: #faf9f5; font-size: 13px; color: var(--ink-3b); } .flat-pulse { position: relative; width: 8px; height: 8px; display: inline-block; flex-shrink: 0; } .flat-pulse span { position: absolute; inset: 0; border-radius: 99px; background: var(--accent); } .flat-pulse span:first-child { animation: tmPulse 1.6s ease-out infinite; } .flat-status-label { display: flex; align-items: center; gap: 9px; } .flat-today { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); } .flat-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--line-soft); min-height: 420px; } .flat-tool-list { border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; } .flat-tool-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); } .flat-tool-list-title { font-size: 14px; font-weight: 700; } .flat-tool-list-count { font-weight: 500; color: var(--muted); } .flat-tool-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 24px; text-align: center; } .flat-tool-empty-title { font-size: 15px; font-weight: 600; } .flat-tool-empty-sub { font-size: 13px; color: var(--muted); max-width: 260px; line-height: 1.55; } .flat-msg-row { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 18px; border: none; border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent; background: var(--surface); text-align: left; font-family: inherit; cursor: pointer; } .flat-msg-row.is-active { border-left-color: var(--accent); background: #f3f8f5; } .flat-msg-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .flat-msg-sender { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .flat-msg-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); flex-shrink: 0; } .flat-msg-dot.read { background: transparent; } .flat-msg-time { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; } .flat-msg-subject { font-size: 13px; color: var(--ink); } .flat-msg-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .flat-tool-reader { display: flex; flex-direction: column; min-width: 0; background: var(--surface); } .flat-reader-empty { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; font-size: 14px; color: var(--muted); } .flat-reader { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2.4vw, 28px); } .flat-reader-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .flat-reader-subject { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; } .flat-reader-meta { font-size: 13px; color: var(--ink-3b); } .flat-reader-body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-3); } .flat-reader-body iframe { width: 100%; border: none; min-height: 120px; } .flat-reader-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .flat-reader-attachment { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-muted); font-size: 13px; color: var(--ink-3); } .flat-reader-footnote { font-size: 12px; color: var(--muted); } /* mobile back button in reader */ .flat-reader-back { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); background: none; border: none; cursor: pointer; padding: 0 0 4px; } @media (max-width: 719px) { .flat-tool-grid.show-reader .flat-tool-list { display: none; } .flat-tool-grid:not(.show-reader) .flat-tool-reader { display: none; } .flat-reader-back { display: inline-flex; } } /* ---- sender strip ------------------------------------------------- */ .flat-strip { border-bottom: 1px solid var(--line-soft-2); background: var(--bg); } .flat-strip-inner { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 36px; } .flat-strip-label { font-size: 13px; color: var(--muted); } .flat-strip-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: #6b6a63; } /* ---- "what is temp mail" bento --------------------------------- */ .flat-bento-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px clamp(24px, 5vw, 72px); align-items: end; } .flat-bento-row { display: flex; flex-wrap: wrap; gap: 14px; } .flat-bento-dark { flex: 1.5 1 460px; min-width: 0; border-radius: 24px; background: var(--ink); color: #f2f1ec; padding: clamp(24px, 3.4vw, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 40px); } .flat-pill-dark { padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: #e9e8e3; } .flat-bento-dark p { margin: 0; font-size: 15px; line-height: 1.7; color: #c3c6c9; text-wrap: pretty; } .flat-timeline-card { border-radius: 18px; background: #202326; border: 1px solid #2c2f33; padding: 20px; display: flex; flex-direction: column; gap: 16px; align-self: start; } .flat-timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .flat-timeline-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7d8185; } .flat-timeline-addr { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent-on-dark); } .flat-timeline { position: relative; display: flex; flex-direction: column; } .flat-timeline-rail { position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; background: #2f3337; } .flat-timeline-item { display: grid; grid-template-columns: 14px 1fr auto; gap: 14px; align-items: start; padding-bottom: 18px; position: relative; } .flat-timeline-item:last-child { padding-bottom: 0; } .flat-timeline-node { width: 10px; height: 10px; margin-top: 5px; border-radius: 99px; background: var(--accent-on-dark); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06); } .flat-timeline-node.is-dim { background: #6b6f73; } .flat-timeline-title { font-size: 14px; font-weight: 600; color: #fff; } .flat-timeline-sub { font-size: 13px; color: #9ea2a5; } .flat-timeline-time { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7d8185; } .flat-bento-green { flex: 1 1 320px; min-width: 0; border-radius: 24px; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); padding: clamp(24px, 3.4vw, 36px); display: flex; flex-direction: column; gap: 18px; } .flat-bento-green-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0b3b28; } .flat-none-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--accent-tint-border); } .flat-none-badge { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--accent); padding: 3px 8px; border-radius: 6px; background: #e3f2ea; } .flat-bento-green p { margin: 0; font-size: 15px; line-height: 1.65; color: #3f6b56; text-wrap: pretty; } /* ---- how it works steps ---------------------------------------- */ .flat-steps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; } .flat-steps-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .flat-step-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; } .flat-step-num { width: 32px; height: 32px; border-radius: 99px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; } .flat-step-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); } /* ---- feature cards ---------------------------------------------- */ .flat-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; } .flat-feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 10px; } .flat-feature-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); } .flat-feature-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; } .flat-feature-text { font-size: 15px; line-height: 1.6; color: var(--ink-3b); } /* ---- use-case bento ----------------------------------------------- */ .flat-usecase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; } .flat-usecase-text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 8px 8px 8px 0; } .flat-usecase-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .flat-usecase-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(22, 24, 26, 0.35); } .flat-usecase-visual { height: 168px; background: var(--surface-muted); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; overflow: hidden; } .flat-usecase-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; } .flat-usecase-title { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; } .flat-usecase-text-sm { font-size: 15px; line-height: 1.6; color: var(--ink-3b); } /* ---- compare cards --------------------------------------------- */ .flat-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; max-width: 920px; width: 100%; margin: 0 auto; } .flat-compare-dark { border-radius: 20px; background: var(--ink); color: #f2f1ec; padding: 30px; display: flex; flex-direction: column; gap: 18px; } .flat-compare-light { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 18px; } .flat-compare-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .flat-compare-pill { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: var(--accent); color: #fff; } .flat-compare-row { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid #2c2f33; } .flat-compare-light .flat-compare-row { border-top-color: var(--line-soft); } .flat-compare-row-label { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8f9396; } .flat-compare-light .flat-compare-row-label { color: var(--muted); } .flat-compare-row-value { font-size: 15px; color: #f2f1ec; } .flat-compare-light .flat-compare-row-value { color: var(--ink-2); } /* ---- Pakistan band --------------------------------------------- */ .flat-forest { border-radius: 24px; background: var(--forest); color: var(--accent-tint); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; } .flat-forest p { margin: 0; font-size: 17px; line-height: 1.65; color: #cfe3d8; text-wrap: pretty; } .flat-forest-pill { padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); font-family: 'IBM Plex Mono', monospace; font-size: 13px; } /* ---- fit panels -------------------------------------------------- */ .flat-fit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; } .flat-fit-panel { border-radius: 18px; padding: 26px; } .flat-fit-panel.is-good { background: #f1f8f4; border: 1px solid var(--accent-tint-border); } .flat-fit-panel.is-bad { background: var(--warn-tint); border: 1px solid var(--warn-tint-border); } .flat-fit-head { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .flat-fit-panel.is-good .flat-fit-head { color: var(--accent-deep); } .flat-fit-panel.is-bad .flat-fit-head { color: #8f3d20; } .flat-fit-list { margin: 0; padding: 0; list-style: none; } .flat-fit-item { display: grid; grid-template-columns: 20px 1fr; gap: 10px; padding: 13px 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .flat-fit-item + .flat-fit-item { border-top: 1px solid #dcebe2; } .flat-fit-panel.is-bad .flat-fit-item { color: var(--ink-3); } .flat-fit-panel.is-bad .flat-fit-item + .flat-fit-item { border-top-color: #f0e2da; } .flat-fit-mark { font-weight: 700; } .flat-fit-panel.is-good .flat-fit-mark { color: var(--accent); } .flat-fit-panel.is-bad .flat-fit-mark { color: var(--warn); } /* ---- reviews ------------------------------------------------------ */ .flat-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; } .flat-review-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .flat-review-stars { font-size: 13px; letter-spacing: 2px; color: var(--star); } .flat-review-quote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); } .flat-review-author { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); } .flat-review-avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-deep); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* ---- FAQ ------------------------------------------------------- */ .flat-faq-layout { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 28px); align-items: flex-start; } .flat-faq-side { flex: 1 1 280px; max-width: 360px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; } .flat-faq-cta { border-radius: 22px; background: var(--ink); color: #fff; padding: 26px; display: flex; flex-direction: column; gap: 16px; } .flat-faq-cta-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 18px; font-weight: 600; } .flat-faq-cta-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .flat-faq-cta-sub { font-size: 14px; line-height: 1.6; color: #b9bcbf; } .flat-btn-white { align-self: flex-start; padding: 11px 16px; border-radius: 10px; background: #fff; color: var(--ink) !important; font-size: 14px; font-weight: 700; } .flat-btn-white:hover { background: #e9e7e0; color: var(--ink) !important; } .flat-faq-addr-card { border-radius: 18px; background: var(--accent-tint); border: 1px solid var(--accent-tint-border); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .flat-faq-addr-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #3f6b56; } .flat-faq-addr-value { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--accent-deep); word-break: break-all; } .flat-faq-list { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .flat-faq-item { border-radius: 18px; border: 1px solid var(--line-soft-2); background: var(--surface-muted); transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; } .flat-faq-item.is-open { border-color: #cfe4d8; background: var(--surface); box-shadow: 0 18px 40px -28px rgba(22, 24, 26, 0.35); } .flat-faq-trigger { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 20px 22px; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: left; } .flat-faq-num { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--muted); } .flat-faq-q { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .flat-faq-icon { flex: none; width: 32px; height: 32px; border-radius: 99px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #fff; color: var(--ink); border: 1px solid var(--line); transition: transform 0.2s, background 0.2s, color 0.2s; } .flat-faq-item.is-open .flat-faq-icon { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(45deg); } .flat-faq-answer { margin: 0; padding: 0 64px 22px 54px; font-size: 15px; line-height: 1.7; color: var(--ink-3b); text-wrap: pretty; } @media (max-width: 640px) { .flat-faq-answer { padding: 0 22px 22px 22px; } .flat-faq-side { position: static; max-width: none; } .flat-header { padding: 10px 12px 0; } .flat-header-inner { height: 58px; padding: 0 8px 0 12px; gap: 10px; border-radius: 20px; } .flat-logo-text { font-size: 16px; } .flat-btn-dark { padding: 8px 14px; font-size: 12.5px; } } /* ---- final CTA -------------------------------------------------- */ .flat-final-cta { border-radius: 24px; background: var(--ink); color: #fff; padding: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .flat-final-cta h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; } .flat-final-cta p { margin: 0; font-size: 16px; line-height: 1.6; color: #b9bcbf; } .flat-btn-accent { padding: 15px 24px; border-radius: 12px; background: var(--accent); color: #fff !important; font-size: 15px; font-weight: 700; } .flat-btn-accent:hover { background: #12935f; color: #fff !important; } /* ---- footer ------------------------------------------------------- */ .flat-footer { border-top: 1px solid var(--line-soft-2); background: var(--bg-alt); } .flat-footer-inner { padding: 56px clamp(16px, 3vw, 32px) 28px; display: flex; flex-direction: column; gap: 40px; } .flat-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; } .flat-footer-brand { display: flex; flex-direction: column; gap: 12px; } .flat-footer-brand-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .flat-footer-brand-desc { font-size: 14px; line-height: 1.6; color: var(--ink-3b); max-width: 240px; } .flat-footer-col { display: flex; flex-direction: column; gap: 9px; } .flat-footer-col-title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .flat-footer-col a { font-size: 14px; color: var(--ink-3); } .flat-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } /* ---- utility: skip-to-tool focus ring --------------------------- */ .flat-theme :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .flat-pulse span:first-child, .flat-usecase-card, .flat-faq-icon, .flat-faq-item { animation: none !important; transition: none !important; } } /* ========================================================================== TempMail.pk — Flat SaaS theme, CONTENT ADDITION New rules only for: CMS page template, single blog post template, and the blog listing / card-grid partial. Appends to tempmail-flat-v1.css. Reuses existing :root custom properties (--bg, --accent, --ink, --line, --shadow-card, etc.) defined in the base stylesheet — nothing here redefines them. No Node/build step; plain CSS, mobile-first breakpoints matching the homepage (900px / 719px / 640px). ========================================================================== */ /* ---- blog listing hero (the $isBlog branch in page.blade.php) ---------- page.blade.php renders inside the parent layout's own ".flat-container", so this is a padded panel, not a full-bleed section — same rounded-panel pattern as .flat-forest rather than a border-bottom hero band. --------- */ .flat-blog-hero { border-radius: 24px; background: linear-gradient(var(--bg-alt), var(--surface)); border: 1px solid var(--line-soft-2); padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 44px); margin-top: clamp(20px, 3vw, 32px); } .flat-blog-hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 720px; margin: 0 auto; } .flat-blog-hero-inner .flat-prose { text-align: left; width: 100%; margin-top: 6px; } /* When the intro HTML above the grid is short (an eyebrow + h1 + one paragraph) it should still read centered like the rest of the hero; only multi-paragraph intros fall back to left-aligned prose rhythm. */ .flat-blog-hero-inner .flat-prose > :first-child { margin-top: 0; } @media (max-width: 640px) { .flat-blog-hero { border-radius: 18px; } } /* ---- breadcrumbs --------------------------------------------------------- */ .flat-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 18px; } .flat-breadcrumbs a { color: var(--ink-3); font-weight: 500; } .flat-breadcrumbs a:hover { color: var(--accent); } .flat-breadcrumbs .sep { color: var(--line); } .flat-breadcrumbs .current { color: var(--muted); } /* ---- article hero (single post) ----------------------------------------- */ .flat-article-hero { position: relative; height: clamp(280px, 42vw, 420px); border-radius: 24px; overflow: hidden; background-color: var(--ink); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; isolation: isolate; } .flat-article-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 17, 18, 0.88) 0%, rgba(15, 17, 18, 0.35) 55%, rgba(15, 17, 18, 0.05) 100%); z-index: 1; } .flat-article-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; width: 100%; padding: clamp(20px, 3.4vw, 44px); } .flat-article-cats { display: flex; flex-wrap: wrap; gap: 8px; } .flat-article-cat-pill { padding: 6px 13px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12.5px; font-weight: 600; color: #fff !important; } .flat-article-cat-pill:hover { background: rgba(255, 255, 255, 0.24); } .flat-article-title { margin: 0; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #fff; text-wrap: balance; max-width: 880px; } .flat-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #dcdcd6; } .flat-article-meta .flat-dot { width: 5px; height: 5px; background: #dcdcd6; } /* Fallback hero when the post has no image: keep the same dark panel so the title/meta stay legible instead of white-on-white. */ .flat-article-hero.no-image { background-color: var(--ink); background-image: linear-gradient(135deg, #1b1e20, #0e3b2a) !important; } .flat-article-hero.no-image::after { background: linear-gradient(to top, rgba(15, 17, 18, 0.55) 0%, rgba(15, 17, 18, 0.15) 100%); } /* ---- article body shell -------------------------------------------------- */ .flat-article-body { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(8px, 2vw, 16px); max-width: 760px; margin: 0 auto; } /* ---- prose: styles generic rich-text HTML from $page->content / $post->content (headings, paragraphs, lists, tables, links, images, blockquotes) to match the flat type scale automatically. -------------- */ .flat-prose { font-size: 17px; line-height: 1.75; color: var(--ink-3); } .flat-prose > *:first-child { margin-top: 0; } .flat-prose > *:last-child { margin-bottom: 0; } .flat-prose p { margin: 0 0 22px; text-wrap: pretty; } .flat-prose h1, .flat-prose h2, .flat-prose h3, .flat-prose h4, .flat-prose h5, .flat-prose h6 { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; scroll-margin-top: 96px; } .flat-prose h1 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; margin: 44px 0 18px; } .flat-prose h2 { font-size: clamp(22px, 2.8vw, 30px); line-height: 1.2; margin: 44px 0 16px; padding-top: 28px; border-top: 1px solid var(--line-soft); } .flat-prose > h2:first-child { border-top: none; padding-top: 0; } .flat-prose h3 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; margin: 32px 0 12px; } .flat-prose h4 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; } .flat-prose ul, .flat-prose ol { margin: 0 0 22px; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; } .flat-prose li { line-height: 1.65; padding-left: 4px; } .flat-prose li::marker { color: var(--accent); font-weight: 600; } .flat-prose li > ul, .flat-prose li > ol { margin-top: 10px; margin-bottom: 0; } .flat-prose a { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-tint-border); text-underline-offset: 3px; } .flat-prose a:hover { color: var(--accent-hover); text-decoration-color: var(--accent-hover); } .flat-prose strong, .flat-prose b { color: var(--ink); font-weight: 700; } .flat-prose em, .flat-prose i { font-style: italic; } .flat-prose code { font-family: 'IBM Plex Mono', monospace; font-size: 0.88em; background: var(--surface-muted); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 6px; color: var(--ink-2); } .flat-prose pre { margin: 0 0 22px; padding: 18px 20px; border-radius: 14px; background: var(--ink); color: #e7e6e1; overflow-x: auto; font-size: 14px; line-height: 1.6; } .flat-prose pre code { background: transparent; border: none; padding: 0; color: inherit; } .flat-prose hr { border: none; border-top: 1px solid var(--line-soft-2); margin: 36px 0; } .flat-prose img { max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line-soft); display: block; margin: 8px 0 22px; } .flat-prose figure { margin: 8px 0 22px; } .flat-prose figure img { margin: 0 0 10px; } .flat-prose figcaption { font-size: 13px; color: var(--muted); text-align: center; } /* Blockquote reuses the dark "bento" treatment sparingly as a pull-quote / callout box — the one deliberate dark accent inside an otherwise light article, matching .flat-bento-dark's palette exactly. */ .flat-prose blockquote { margin: 28px 0; padding: 24px 26px; border-radius: 18px; background: var(--ink); color: #e7e6e1; border: none; } .flat-prose blockquote p { margin: 0; font-size: 17px; line-height: 1.65; color: #d7d6d0; } .flat-prose blockquote p:not(:last-child) { margin-bottom: 12px; } .flat-prose blockquote::before { content: "\201C"; display: block; font-family: Georgia, serif; font-size: 40px; line-height: 1; color: var(--accent-on-dark); margin-bottom: 6px; } .flat-prose table { width: 100%; margin: 0 0 26px; border-collapse: collapse; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .flat-prose table thead { background: var(--surface-muted); } .flat-prose th, .flat-prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); } .flat-prose th { font-weight: 700; color: var(--ink); font-size: 13px; letter-spacing: 0.02em; } .flat-prose td { color: var(--ink-3); } .flat-prose tbody tr:last-child td { border-bottom: none; } .flat-prose caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 8px; } @media (max-width: 640px) { .flat-prose { font-size: 16px; } .flat-prose table { display: block; overflow-x: auto; } } /* ---- article footer / meta bar ------------------------------------------ */ .flat-article-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line-soft-2); } .flat-article-share-label { font-size: 13px; font-weight: 600; color: var(--muted); } /* ---- related reading grid ------------------------------------------------ */ .flat-related { max-width: 1040px; margin: clamp(48px, 6vw, 80px) auto 0; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-soft-2); display: flex; flex-direction: column; gap: 24px; } .flat-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; } .flat-related-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .flat-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } .flat-related-thumb { height: 150px; width: 100%; background: var(--surface-muted); border-bottom: 1px solid var(--line-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .flat-related-thumb img { height: 100%; width: 100%; object-fit: cover; } .flat-related-thumb i { font-size: 26px; color: var(--accent); opacity: 0.55; } .flat-related-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; } .flat-related-cat { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); } .flat-related-title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; color: var(--ink); } .flat-related-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3b); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- post-card grid v2 (blog listing + category pages) ------------------ */ .flat-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; } .flat-post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 0 rgba(22, 24, 26, 0.02); transition: transform 0.2s, box-shadow 0.2s; } .flat-post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .flat-post-card-media { position: relative; height: 200px; width: 100%; background: var(--surface-muted); border-bottom: 1px solid var(--line-soft); overflow: hidden; flex-shrink: 0; } .flat-post-card-media img { height: 100%; width: 100%; object-fit: cover; display: block; } .flat-post-card-cats { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px); } .flat-post-card-cat { padding: 5px 12px; border-radius: 99px; background: rgba(22, 24, 26, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: 12px; font-weight: 600; color: #fff !important; } .flat-post-card-cat:hover { background: var(--ink); } .flat-post-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .flat-post-card-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); } .flat-post-card-excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-3b); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 719px) { .flat-post-grid { gap: 16px; } .flat-post-card-media { height: 176px; } } /* ---- pagination ------------------------------------------------------- Laravel 12's DEFAULT paginator view (Illuminate\Pagination\Tailwind, no custom view registered in this app — confirmed against real rendered markup) is NOT a