/* ============================================================ Atlas Trust & Security page — page-specific styles (DARK). Loaded by templates/trust.html only. Dark/near-black theme (matches the agency surface). Cards are dark so the black-background graphics in static/assets blend into the card's open space — the subject floats, large and partially bleeding off the edge, away from the text. One white "special" card stands out at the very end. Built on the --f-* foundation tokens (flipped dark via ) + the marketing.css chrome, with the hardcoded-light bits overridden below. ============================================================ */ :root { --accent: #f4f4f5; /* no blue — links/emphasis use bold + underline */ --accent-hover: #ffffff; --accent-soft: rgba(255, 255, 255, 0.07); --accent-edge: rgba(255, 255, 255, 0.24); --f-accent: #a1a1aa; /* override foundation blue (eyebrows, focus rings) */ --page-bg: #000000; /* page behind everything — pitch black, like the agency page */ --card-bg: #101010; /* icon/standard cards — near-black so glyphs + SVG icons float */ --card-edge: #242424; /* card border */ --surface: #161616; /* chips, pills, icon tiles */ --surface-2: #1c1c1c; --bg: #0e0e0e; --bg-tint: #161616; --bg-soft: #141414; --bg-hover: #242424; --border-light: #1f1f1f; --border: #242424; --border-strong: #333333; --grid-line: rgba(255, 255, 255, 0.1); /* blueprint lines on pure black */ --text: #f4f4f5; --text-2: #a1a1aa; --text-muted: #71717a; --ok: #4ade80; --ok-soft: rgba(34, 197, 94, 0.16); --ok-edge: rgba(34, 197, 94, 0.38); --soon: #fbbf24; --soon-soft: rgba(245, 158, 11, 0.16); --soon-edge: rgba(245, 158, 11, 0.40); --card-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.7); } /* ============================================================ Dark chrome overrides (marketing.css hardcodes these light) ============================================================ */ body { background: var(--page-bg); } .page-slab { background: transparent; margin-top: 0.25rem; padding-bottom: 3.5rem; } @media (min-width: 768px) { .page-slab { margin-top: 0.5rem; padding-bottom: 6rem; } } .page-hero { padding-bottom: 0.75rem; } .page-hero h1 { color: var(--f-ink); } .page-hero p { color: rgba(255, 255, 255, 0.66); } .section-header h2 { color: var(--f-ink); } .section-header p { color: rgba(255, 255, 255, 0.62); } .header-inner.scrolled { background: #0d0d0d; border-color: var(--border-strong); } .header-logo-text { color: var(--f-ink); } .nav-toggle { background: var(--surface); border-color: var(--border); } .nav-toggle span { background: var(--f-ink); } .footer { background: #000000; border-top-color: var(--border-light); } .footer-logo-text { color: var(--f-ink); } .footer-brand p { color: var(--text-2); } .fm-footer-col__label { color: var(--f-ink); } .fm-footer-col__link { color: var(--text-2); } .fm-footer-col__link:hover { color: var(--f-ink); } .footer-bottom { color: var(--text-muted); } /* footer CTA needs contrast on the #000 footer — white pill instead of dark gradient */ .footer-cta { background: #ffffff; color: #0a0a0a; } .footer-cta:hover { background: #ececec; } /* Header "Create Account" → white pill matching the footer CTA + the page's white-button scheme on dark */ .btn-primary { background: #ffffff; color: #0a0a0a; } .btn-primary:hover { background: #ececec; } /* Payment-method chips → dark-grey (card surface + border) instead of white, with breathing room below */ .footer-payments { margin-bottom: 1.75rem; } .footer-pay { background: var(--card-bg); border-color: var(--card-edge); box-shadow: none; } /* These two logos are dark on the dark chips — recolor: Apple Pay (black) → white; Discover → white wordmark while the orange stays orange (invert + 180° hue-rotate whitens the black text and round-trips the orange back to orange). */ .footer-pay img[alt="Apple Pay"] { filter: invert(1); } .footer-pay img[alt="Discover"] { filter: invert(1) hue-rotate(180deg); } /* Anchor offset so quick-nav jumps clear the sticky header */ main section[id] { scroll-margin-top: 88px; } /* ============================================================ Blueprint grid — faint vertical rails framing the content column + a large horizontal rule per section. Sits behind the content on the pure-black background. ============================================================ */ main { position: relative; } main::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2rem, 1150px); /* a touch outside the 1110px content column */ border-left: 1px solid var(--grid-line); border-right: 1px solid var(--grid-line); pointer-events: none; z-index: 0; } main > * { position: relative; z-index: 1; } .page-slab .section { border-top: 1px solid var(--grid-line); } /* ============================================================ Quick category nav (chips under the hero) ============================================================ */ .tb-nav-wrap { padding-top: 0.5rem; padding-bottom: 4rem; } @media (min-width: 768px) { .tb-nav-wrap { padding-top: 0.75rem; padding-bottom: 7rem; } } /* Section eyebrows → pill (matching the card-title pills) with a dot texture, above the title */ .section-header .f-section-eyebrow, .page-hero .f-section-eyebrow { display: inline-block; margin-bottom: 0.95rem; font-family: "Mona Sans", Inter, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--f-ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4rem 0.95rem; line-height: 1.2; } .section-header .f-section-eyebrow::before, .section-header .f-section-eyebrow::after, .page-hero .f-section-eyebrow::before, .page-hero .f-section-eyebrow::after { content: none; } .tb-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 760px; margin: 0 auto; } .tb-nav__chip { font-family: "Mona Sans", Inter, sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--text-2); padding: 0.5rem 0.95rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); transition: color 0.18s, border-color 0.18s, background 0.18s; } .tb-nav__chip:hover { color: var(--f-ink); border-color: var(--text-muted); background: var(--surface-2); } @media (min-width: 1024px) { /* keep all topic chips on one line on desktop */ .tb-nav { flex-wrap: nowrap; max-width: none; } .tb-nav__chip { white-space: nowrap; } } /* ============================================================ Bento grid + cards ============================================================ */ .tb-grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; } @media (min-width: 768px) { .tb-grid { grid-template-columns: repeat(6, 1fr); gap: 0.8rem; } .tb-card--6 { grid-column: span 6; } .tb-card--4 { grid-column: span 4; } .tb-card--3 { grid-column: span 3; } .tb-card--2 { grid-column: span 2; } } .tb-card { border: 1px solid var(--card-edge); background: var(--card-bg); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; text-align: left; box-shadow: var(--card-shadow); } /* ---- Card body (icon tile + title + copy) ---- */ .tb-card__body { padding: 1.5rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .tb-card__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--surface); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--f-ink); flex-shrink: 0; margin-bottom: 0.15rem; } .tb-card__icon svg { width: 23px; height: 23px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Secondary-card icon — a line/symbol SVG from assets/icons (filled #CCCCCC), sits directly on the #101010 card; smaller than a main-card glyph. */ .tb-card__icon-svg { width: 64px; height: 64px; object-fit: contain; display: block; align-self: center; /* center the icon horizontally */ margin: 0.4rem 0 0.85rem; /* breathing room above + below */ } @media (min-width: 768px) { .tb-card__icon-svg { width: 76px; height: 76px; } } /* Secondary icon sub-cards: centered icon + pill-eyebrow title + centered copy */ .tb-card__body:has(.tb-card__icon-svg) .tb-card__title { align-self: flex-start; font-family: "Mona Sans", Inter, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--f-ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.4rem 0.9rem; line-height: 1.25; } /* Stat row — number/spec cards live on their own row beneath the icon cards */ .tb-specs { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-top: 1rem; margin-bottom: 1.35rem; } @media (min-width: 600px) { .tb-specs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } /* Non-main cards (icon cards, number/stat cards, the PCI note) share a layered background: a dot-matrix field (back), a gradient in the card colour that masks the dots at the bottom and reveals them toward the top (middle), content in front. */ .tb-card--2, .tb-card--3, .tb-card--spec { position: relative; } .tb-card--2::before, .tb-card--3::before, .tb-card--spec::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.6px); background-size: 15px 15px; } .tb-card--2::after, .tb-card--3::after, .tb-card--spec::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--card-bg) 0%, var(--card-bg) 6%, transparent 72%); } .tb-card--2 .tb-card__body, .tb-card--3 .tb-card__body, .tb-card--spec .tb-card__body { position: relative; z-index: 2; } /* Spec / stat ("data") number cards — pill eyebrow above the value (background treatment shared above) */ .tb-card--spec .tb-card__body { gap: 0.65rem; justify-content: center; padding: 1.6rem 1.5rem; } .tb-spec__value { display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem; /* space between the pill eyebrow and the value */ margin: 0.2rem 0 0.5rem; /* extra top + bottom breathing room around the title */ font-family: "Mona Sans", Inter, system-ui, sans-serif; font-size: clamp(1.7rem, 4vw, 2.15rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; color: var(--f-ink); } /* The old inline subtitle is now a pill eyebrow sitting above the value */ .tb-spec__value .tb-spec__plus { order: -1; align-self: flex-start; display: inline-block; margin: 0; font-family: "Mona Sans", Inter, sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--f-ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0.34rem 0.72rem; line-height: 1.25; } .tb-spec__label { font-size: 0.86rem; color: var(--f-ink-soft); line-height: 1.45; margin-top: 0.1rem; } .tb-card__title { font-family: "Mona Sans", Inter, system-ui, sans-serif; font-size: 1.18rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; color: var(--f-ink); margin: 0; } .tb-card__desc { font-size: 0.93rem; color: var(--f-ink-soft); line-height: 1.55; margin: 0; } .tb-card__desc a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-edge); text-underline-offset: 2px; transition: text-decoration-color 0.18s; } .tb-card__desc a:hover { text-decoration-color: var(--accent); } /* Links read as bold underlined text, never a blue color */ .tb-card__desc a, .tb-card__list a, .tb-tag__link { font-weight: 600; } .tb-card code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82em; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 0.05em 0.4em; color: var(--f-ink); } /* ============================================================ Graphic feature cards — large image bleeds into the card, text sits beside/below it in the open space. Image black bg blends into the near-black card; a mask fades the seam. ============================================================ */ .tb-card--graphic { display: grid; grid-template-columns: 1fr; padding: 0; position: relative; background: #000; /* pitch black — matches the graphics' black background */ border-color: var(--grid-line); /* same faint line as the background grid */ } /* Border glow — one faint white segment that slowly orbits the whole border; per-card --tb-dur / --tb-delay make each one move differently. */ @property --tb-ang { syntax: ""; inherits: false; initial-value: 0deg; } .tb-card--graphic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--tb-ang), transparent 0deg 302deg, rgba(255, 255, 255, 0.3) 338deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 4; animation: tb-orbit var(--tb-dur, 17s) linear infinite; animation-delay: var(--tb-delay, 0s); } @keyframes tb-orbit { to { --tb-ang: 360deg; } } @media (prefers-reduced-motion: reduce) { .tb-card--graphic::after { animation: none; } } /* Randomize the orbit per graphic card — different speed + start point each */ #payments .tb-card--graphic::after { --tb-dur: 16s; --tb-delay: -2s; } #accounts .tb-card--graphic::after { --tb-dur: 21s; --tb-delay: -9s; } #messaging .tb-card--graphic::after { --tb-dur: 18s; --tb-delay: -13s; } #safety .tb-card--graphic::after { --tb-dur: 24s; --tb-delay: -6s; } .tb-card__media { position: relative; overflow: hidden; /* oversized graphics are clipped, never grow the card */ display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .tb-card__media img { width: auto; height: auto; max-width: min(92%, 360px); /* sized by width; height is free to overflow + be clipped */ object-fit: contain; clip-path: inset(1.5px); /* trim faint downscale fringe (e.g. the CTA cursor on #101010) */ } /* Black graphic cards: image fills the panel FLUSH (no media padding) at ONE fixed height for all of them; overflow is cropped, so it never changes the card height. Only the text keeps its padding. */ .tb-card--graphic .tb-card__media { height: 230px; padding: 0; } .tb-card--graphic .tb-card__media img { width: auto; height: auto; max-width: min(82%, 256px); max-height: 78%; object-fit: contain; object-position: center; clip-path: none; } .tb-card--graphic .tb-card__body { justify-content: center; } @media (min-width: 768px) { /* side-by-side + one uniform fixed card height for every graphic card */ .tb-card--graphic { grid-template-columns: minmax(0, 0.92fr) 1fr; align-items: stretch; height: 340px; } .tb-card--graphic .tb-card__media { height: 100%; padding: 0; } /* flush left — text column keeps its padding */ .tb-card--graphic .tb-card__body { padding: 1.9rem 2rem; } } /* (Former flag-graphic rule removed — Safety now uses a contained Clear Graphics glyph like the other graphic cards.) */ /* ---- CTA card (last on the page) — #101010 with a transparent chrome-arrow graphic ---- */ .tb-card--cta { display: grid; grid-template-columns: 1fr; padding: 0; background: #101010; } .tb-card--cta .tb-card__media { min-height: 220px; } .tb-card--cta .tb-card__media img { max-width: min(58%, 185px); max-height: 150px; } .tb-card--cta .tb-card__body { padding: 2rem 2rem 2.2rem; gap: 0.7rem; } .tb-card--cta .tb-card__title { color: var(--f-ink); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.02em; } .tb-card--cta .tb-card__desc { color: var(--f-ink-soft); } .tb-card--cta .tb-card__cta { align-self: flex-start; margin-top: 0.4rem; } /* CTA button needs contrast on the dark card — white pill instead of the dark gradient */ .tb-card__cta.auth-btn { background: #ffffff; color: #0a0a0a; } .tb-card__cta.auth-btn:hover { background: #ececec; } @media (min-width: 768px) { .tb-card--cta { grid-template-columns: 1fr 1fr; align-items: center; } .tb-card--cta .tb-card__media { min-height: 100%; height: 100%; } .tb-card--cta .tb-card__body { padding: 2.6rem 2.6rem; } } /* CTA is the last section — drop its trailing padding so it sits flush to the footer */ #cta { padding-bottom: 0; } /* ============================================================ Specialty cards ============================================================ */ /* ---- In-card checklist (unused now but kept for reuse) ---- */ .tb-card__list { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.15rem 0 0; } .tb-card__list li { position: relative; padding-left: 1.6rem; font-size: 0.9rem; color: var(--f-ink-soft); line-height: 1.5; } .tb-card__list li strong { color: var(--f-ink); font-weight: 600; } .tb-card__list li::before { content: ""; position: absolute; left: 0; top: 0.12rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.62rem; } /* ---- Note card (PCI posture) — plain card (no dot-matrix), spaced from the cards above ---- */ .tb-card--note { background: var(--card-bg); margin-top: 1.25rem; } .tb-card--note .tb-card__body { gap: 0.6rem; } .tb-card__note-head { display: flex; align-items: center; gap: 0.65rem; } .tb-card__note-head .tb-card__icon { margin-bottom: 0; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); border-color: var(--accent-edge); color: var(--accent); } .tb-card__note-head .tb-card__icon svg { width: 19px; height: 19px; } .tb-card__note-head h3 { font-family: "Mona Sans", Inter, sans-serif; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--f-ink); margin: 0; } .tb-card--note .tb-card__desc { font-size: 0.96rem; line-height: 1.62; color: var(--text-2); } .tb-card--note strong { color: var(--f-ink); font-weight: 600; } /* ---- Status tags ---- */ .tb-tag { display: inline-flex; align-items: center; align-self: flex-start; font-family: "Mona Sans", Inter, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.28rem 0.6rem; border-radius: 999px; background: var(--surface); color: var(--text-2); border: 1px solid var(--border-strong); white-space: nowrap; } .tb-tag--live { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-edge); } .tb-tag--soon { background: var(--soon-soft); color: var(--soon); border-color: var(--soon-edge); } .tb-tag__link { color: inherit; text-decoration: underline; } /* Header dropdown nav → moved to static/css/marketing.css (shared, theme-aware via --f-* tokens). */ /* ============================================================ "Learn more" pill + info modal ============================================================ */ .tb-card__more { align-self: flex-start; margin-top: 1.05rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.05rem; background: #fff; color: #0a0a0a; border: 0; border-radius: 999px; font-family: inherit; font-size: 0.8rem; font-weight: 650; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .tb-card__more:hover { transform: translateY(-1px); background: #ededed; box-shadow: 0 8px 22px rgba(255, 255, 255, 0.16); } .tb-card__more svg { width: 13px; height: 13px; } .tb-card__info { display: none; } .tb-card--graphic .tb-card__more { position: relative; z-index: 5; } .tb-modal { position: fixed; inset: 0; z-index: 200; display: none; } .tb-modal.is-open { display: block; } .tb-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(5px); animation: tb-fade 0.2s ease; } .tb-modal__panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2rem)); max-height: 85vh; overflow-y: auto; background: #0e0e0e; border: 1px solid var(--border-strong); border-radius: 20px; padding: 2.1rem 2.1rem 2.3rem; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7); animation: tb-rise 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .tb-modal__close { position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border-strong); border-radius: 10px; color: var(--text-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .tb-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .tb-modal__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; } .tb-modal__title { font-family: "Mona Sans", Inter, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--f-ink); margin: 0 2.6rem 1.15rem 0; line-height: 1.2; } .tb-modal__body p { font-size: 0.96rem; line-height: 1.68; color: var(--f-ink-soft); margin: 0 0 0.95rem; } .tb-modal__body p:last-child { margin-bottom: 0; } .tb-modal__body strong { color: var(--f-ink); font-weight: 600; } .tb-modal__body em { color: var(--f-ink); font-style: italic; } @keyframes tb-fade { from { opacity: 0; } } @keyframes tb-rise { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); } } @media (prefers-reduced-motion: reduce) { .tb-modal__panel, .tb-modal__backdrop { animation: none; } } /* ============================================================ Scroll reveal — content rises + fades in as it enters view, cascading row by row: each card is delayed by its position in its row (a JS-set `--ri`), so a row's cards stagger left→right and each row restarts. JS adds `.tb-reveal`, so with no JS (or reduced-motion) everything stays visible. One-shot. ============================================================ */ @media (prefers-reduced-motion: no-preference) { .tb-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--ri, 0) * 0.08s), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--ri, 0) * 0.08s); will-change: opacity, transform; } .tb-reveal.is-inview { opacity: 1; transform: none; } }