/* CloudSurf Landing Page — app.css
Project-specific overrides on top of surf-ui.css.
surf-ui.css provides: reset, nav, buttons, forms, sections, hero, footer,
badges, empty-state, focus-visible, responsive nav, reduced-motion. */
/* ============================================================
VARIABLE OVERRIDES & ALIASES
============================================================ */
:root {
/* Light mode (default) */
--background: #fafafa;
--surface: #ffffff;
--surface-hover: #f0f0f2;
--border: #e2e4e9;
--text: #171717;
--text-muted: #6b7280;
--nav-bg: rgba(255, 255, 255, 0.45);
--glass-bg: rgba(255, 255, 255, 0.5);
--glass-border: rgba(255, 255, 255, 0.6);
--glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
--radius: 12px;
--radius-sm: 8px;
/* Aliases used in templates */
--card: var(--surface);
--card-hover: var(--surface-hover);
--foreground: var(--text);
--muted-foreground: var(--text-muted);
/* surf-parse shell var-hooks → cloudsurf frosted-glass values. The shell
geometry/structure ships in surfdoc.css; we only re-skin via these vars
plus the bespoke backdrop-filter/sheen rules below. */
--shell-nav-bg: rgba(255, 255, 255, 0.45);
--shell-btn-bg: var(--glass-bg);
--shell-drawer-bg: var(--glass-bg);
--shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.5);
--shell-control-border: var(--glass-border);
--shell-nav-h: 64px;
/* surf-parse web-block component tokens (DOG-3) → cloudsurf values. These
set ONLY token values; the matching app.css specificity-tie overrides were
deleted now that surfdoc.css exposes the hooks. (var(--surface)/var(--radius)
resolve per-theme at the consuming rule, so both themes stay correct.) */
--ws-hero-btn-radius: var(--radius-sm); /* 8px, not the pill default */
--ws-cta-radius: var(--radius-sm);
--ws-feature-card-bg: var(--surface);
--ws-feature-card-pad: 32px;
--ws-feature-card-radius: var(--radius); /* 12px */
--ws-feature-card-hover-transform: none; /* cards never lift on hover */
}
[data-theme="dark"] {
--background: #050510;
--surface: rgba(12, 12, 28, 0.85);
--surface-hover: rgba(20, 20, 40, 0.9);
--border: rgba(255, 255, 255, 0.08);
--text: #e5e5e5;
--text-muted: #8a8a9a;
--nav-bg: rgba(10, 10, 24, 0.45);
--glass-bg: rgba(22, 22, 40, 0.5);
--glass-border: rgba(255, 255, 255, 0.12);
--glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--shell-nav-bg: rgba(10, 12, 24, 0.55);
--shell-btn-bg: var(--glass-bg);
--shell-drawer-bg: var(--glass-bg);
--shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.08);
--shell-control-border: var(--glass-border);
}
/* Toy-Story sky, seam-free by construction: the blue is a pure CSS gradient
(no image, so it can never show a tile seam) painted on and pinned to
the viewport (`fixed`), and the clouds are a separate TRANSPARENT png tiled
over it on . Decoupling the color from the clouds is what kills the
old three-band seam — the gradient is continuous at any page length, and the
cloud tile is transparent so repeating it produces no edge. The page color
matches the gradient's settle color (#aae2fa) so the first paint, before the
gradient renders, is already sky blue with no white flash. */
html { background-color: #aae2fa; }
/* The sky lives on so it overrides surf-parse's `body { background:
var(--background) }` (#fafafa) default. Three layers, no seam possible:
the transparent clouds png tiled on top, a short light-crown gradient band
pinned to the very top (no-repeat, fixed height), and the solid #aae2fa
fill below from background-color. The color is pure CSS, so it can never
show a tile seam; the cloud tile is transparent, so repeating it adds no edge. */
body {
background-color: #aae2fa;
background-image:
url('/assets/clouds-bg.png'),
linear-gradient(to bottom, #d8effc 0%, #aae2fa 100%);
background-repeat: repeat, no-repeat;
background-size: 1100px auto, 100% 620px;
background-position: center top, center top;
background-attachment: scroll, scroll;
}
/* data-theme lives ON , so the root override must be html[data-theme],
not a descendant selector. Dark clears the light gradient + clouds. */
html[data-theme="dark"] {
background-color: #050510;
background-image: none;
}
[data-theme="dark"] body {
background: var(--background) url('/assets/stars-tile.png');
background-attachment: fixed;
}
/* ============================================================
SHELL RE-SKIN (doc.surf frosted-glass flavor)
surf-parse (surfdoc.css) owns the shell geometry, background, and borders
via --shell-* vars (assigned above). These rules layer ONLY cloudsurf's
bespoke liquid-glass effects (backdrop blur + inner sheen) on top — the
one thing the var-hooks can't express.
============================================================ */
/* Liquid-glass top bar: heavy blur + saturation, an inner top sheen, and a
soft drop shadow so it reads as a pane of glass floating over the sky. */
.surfdoc-shell-nav {
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(15, 23, 42, 0.07);
}
[data-theme="dark"] .surfdoc-shell-nav {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35);
}
/* Circular glass control buttons (menu + theme toggle) + the reading-frame
capsule back button — same frosted-glass treatment. */
.surfdoc-shell-menu-btn,
.surfdoc-shell-theme-toggle,
.surfdoc-doc-back {
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* iOS-style liquid-glass drawer panel: deep blur + inner sheen. */
.surfdoc-shell-drawer {
backdrop-filter: blur(30px) saturate(180%);
-webkit-backdrop-filter: blur(30px) saturate(180%);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .surfdoc-shell-drawer {
box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Soft glass blur behind the drawer scrim. */
.surfdoc-shell-scrim {
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.nav-links {
gap: 4px;
}
.nav-links a:not(.nav-cta) {
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
padding: 6px 12px;
border-radius: 4px;
transition: background 150ms ease, color 150ms ease;
}
.nav-links a:not(.nav-cta):hover {
color: var(--text);
background: var(--surface);
}
.nav-site-link {
color: var(--text-muted);
font-size: 0.875rem;
font-weight: 500;
padding: 6px 12px;
border-radius: 4px;
text-decoration: none;
transition: background 150ms ease, color 150ms ease;
}
.nav-site-link:hover {
color: var(--text);
background: var(--surface);
}
.nav-cta {
padding: 6px 16px;
font-size: 0.875rem;
}
/* ============================================================
BUTTON OVERRIDES
============================================================ */
.btn {
border-radius: var(--radius-sm);
}
.btn-submit {
width: 100%;
margin-top: 8px;
}
.btn-danger {
background: transparent;
color: #ef4444;
}
.btn-danger:hover {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
color: #ef4444;
}
/* ============================================================
SECTION OVERRIDES
============================================================ */
.section-inner {
max-width: 960px;
padding: 96px 24px;
}
.section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
}
/* ============================================================
HERO OVERRIDES
============================================================ */
.hero {
padding-top: 0;
}
.hero .section-inner {
padding-top: 120px;
padding-bottom: 80px;
}
.hero-headline {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.05;
margin-bottom: 20px;
}
.hero-subtitle {
max-width: 520px;
margin-bottom: 40px;
}
/* Hero brand (unique to cloudsurf) */
.hero-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 28px;
}
.hero-emblem {
width: 180px;
height: 180px;
margin-bottom: 8px;
}
.hero-brand-name {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
}
/* ============================================================
FORM OVERRIDES
============================================================ */
.form-group {
margin-bottom: 16px;
}
/* Bare input/textarea styling (templates use not .form-input) */
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 0.9375rem;
line-height: 1.5;
transition: border-color 150ms ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Footer (surfdoc-shell-footer*) structure + skin ships in surfdoc.css and is
palette-driven, so no overrides needed here. */
/* ============================================================
BADGE OVERRIDE
============================================================ */
.badge {
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--accent);
color: #fff;
border-radius: 10px;
font-size: 0.75rem;
font-weight: 700;
margin-left: 4px;
border: none;
letter-spacing: 0;
}
/* ============================================================
PRODUCTS (unique to cloudsurf.com)
============================================================ */
.products-section {
border-top: none;
}
.products-section .section-inner {
padding-bottom: 48px;
}
.products-label {
font-size: 1.25rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
margin-bottom: 16px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.products-label + .products-grid {
margin-bottom: 40px;
}
.products-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 680px;
margin: 0 auto;
}
/* Single-item rows (e.g. Tools) span the full width instead of leaving a
lopsided half-empty grid cell. */
.products-grid-single {
grid-template-columns: 1fr;
}
.product-card {
display: flex;
align-items: center;
gap: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px 28px;
color: var(--text);
text-decoration: none;
transition: all 200ms ease;
}
.product-card[data-product="surf"] { --product-accent: #2E8AD8; }
.product-card[data-product="mako"] { --product-accent: #1466B4; }
.product-card[data-product="wavesite"] { --product-accent: #2B6CB0; }
.product-card[data-product="surfdoc"] { --product-accent: #D97706; }
.product-card[data-product="surfcontext"] { --product-accent: #6366f1; }
/* If a row has an odd trailing card (e.g. 3 cards in a 2-col grid),
center it under the pair instead of leaving it stuck to the left. */
.products-grid > .product-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
max-width: calc(50% - 12px);
margin-inline: auto;
width: 100%;
}
.product-card:hover {
background: var(--surface-hover);
border-color: var(--product-accent, var(--accent));
color: var(--text);
}
.product-body {
display: flex;
align-items: center;
gap: 16px;
flex: 1;
min-width: 0;
}
.product-emblem {
border-radius: 8px;
object-fit: contain;
flex-shrink: 0;
}
.product-name {
font-weight: 700;
font-size: 1.125rem;
display: block;
}
.product-tagline {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.4;
margin-top: 2px;
}
.product-arrow {
flex-shrink: 0;
color: var(--text-muted);
transition: transform 200ms ease, color 200ms ease;
}
.product-card:hover .product-arrow {
color: var(--product-accent, var(--accent));
}
/* ============================================================
ABOUT / VALUES (unique to cloudsurf.com)
============================================================ */
.about-section {
border-top: none;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.value-card {
padding: 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.value-icon {
color: var(--accent);
margin-bottom: 16px;
}
.value-card h3 {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 8px;
}
.value-card p {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.6;
}
/* ============================================================
CONTACT FORM (unique to cloudsurf.com)
============================================================ */
.contact-section {
border-top: none;
}
.contact-form {
max-width: 640px;
margin: 0 auto;
}
/* ============================================================
LEGAL PAGES (unique to cloudsurf.com)
============================================================ */
.legal-section {
padding-top: 0;
color: var(--text);
}
.legal-section .section-inner {
padding-top: 56px;
padding-bottom: 32px;
}
.legal-updated {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 32px;
}
.legal-embed,
.legal-content .surfdoc-embed {
margin-top: 24px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
background: #fff;
}
.legal-embed iframe,
.legal-content .surfdoc-embed iframe {
width: 100%;
height: 80vh;
border: none;
display: block;
}
.legal-content {
max-width: 720px;
color: var(--text);
}
.legal-content h2 {
font-size: 1.25rem;
font-weight: 700;
margin-top: 32px;
margin-bottom: 12px;
}
.legal-content p {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 16px;
}
.legal-content ul {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 16px;
padding-left: 24px;
}
.legal-content li {
margin-bottom: 6px;
}
.legal-trademark {
margin-top: 48px;
padding-top: 24px;
font-size: 0.875rem;
}
/* ============================================================
BACK BUTTON (shared across subpages)
============================================================ */
/* iOS-style back: a rounded pill, tinted to the accent, with a chevron. */
.back-link {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--accent);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
padding: 6px 14px 6px 10px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border);
transition: background 150ms ease, transform 150ms ease;
margin-bottom: 20px;
}
.back-link:hover {
color: var(--accent);
background: var(--surface-hover);
text-decoration: none;
}
.back-link:active {
transform: scale(0.97);
}
.back-link svg {
width: 16px;
height: 16px;
}
/* ============================================================
SUPPORT PAGE (unique to cloudsurf.com)
============================================================ */
.support-hero { padding: 4rem 0 2rem; text-align: center; }
.support-hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.support-subtitle { color: var(--text-muted); font-size: 1.1rem; }
.support-products { padding: 2rem 0; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.support-card {
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
background: var(--surface);
}
.support-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.support-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.support-card ul {
list-style: none;
padding: 0;
margin: 0 0 1rem;
font-size: 0.9rem;
}
.support-card ul li {
padding: 0.25rem 0;
padding-left: 1.2rem;
position: relative;
}
.support-card ul li::before {
content: "\2022";
position: absolute;
left: 0;
color: var(--accent, #3b82f6);
}
.support-link {
font-size: 0.85rem;
color: var(--accent, #3b82f6);
text-decoration: none;
}
.support-link:hover { text-decoration: underline; }
.support-contact { padding: 0 0 4rem; }
.support-contact .section-inner { max-width: 960px; margin: 0 auto; padding: 2rem 24px 0; }
.support-contact h2 { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: center; }
.support-contact p { color: var(--text-muted); margin-bottom: 1.5rem; text-align: center; }
.support-email { margin-bottom: 2rem; text-align: center; }
.support-email a {
font-size: 1.1rem;
color: var(--accent, #3b82f6);
text-decoration: none;
font-weight: 500;
}
.support-email a:hover { text-decoration: underline; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
/* ============================================================
ADMIN LOGIN (unique to cloudsurf.com)
============================================================ */
.admin-login {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
padding-top: 52px;
}
.login-card {
width: 100%;
max-width: 400px;
padding: 40px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.login-card h1 {
font-size: 1.5rem;
margin-bottom: 24px;
}
/* ============================================================
STATS DASHBOARD (unique to cloudsurf.com)
============================================================ */
.stats-section {
padding-top: 52px;
}
.stats-section .section-inner {
padding-top: 80px;
padding-bottom: 32px;
}
.stats-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.stats-header h2 {
font-size: 1.25rem;
font-weight: 700;
}
.stats-mrr {
font-size: 1.125rem;
font-weight: 700;
color: #22c55e;
}
.table-wrap {
overflow-x: auto;
}
.stats-table {
width: 100%;
border-collapse: collapse;
font-size: 0.875rem;
}
.stats-table th {
text-align: left;
padding: 8px 16px;
font-weight: 600;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.stats-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--border);
}
.stats-table th.num,
.stats-table td.num {
text-align: right;
}
.stats-table tbody tr:hover {
background: var(--surface);
}
.product-cell {
font-weight: 700;
white-space: nowrap;
}
.mrr-cell {
color: #22c55e;
font-weight: 600;
}
.highlights-cell {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.highlight-tag {
display: inline-flex;
gap: 4px;
padding: 2px 8px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.75rem;
color: var(--text-muted);
white-space: nowrap;
}
.highlight-tag strong {
color: var(--text);
}
/* ============================================================
INBOX (unique to cloudsurf.com)
============================================================ */
.inbox-section .section-inner {
padding-top: 80px;
}
.stats-section + .inbox-section .section-inner {
padding-top: 32px;
}
.inbox-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
}
.inbox-header h1 {
font-size: 1.75rem;
}
.inbox-count {
font-size: 0.875rem;
color: var(--accent);
font-weight: 600;
}
.message-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.message-row {
padding: 20px 24px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: opacity 300ms ease;
}
.message-row.unread {
border-left: 3px solid var(--accent);
}
.message-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 8px;
font-size: 0.875rem;
}
.message-sender {
font-weight: 700;
color: var(--text);
}
.message-email {
color: var(--text-muted);
}
.message-time {
color: var(--text-muted);
margin-left: auto;
}
.message-subject {
font-weight: 600;
margin-bottom: 4px;
}
.message-body {
color: var(--text-muted);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 12px;
white-space: pre-wrap;
}
.message-actions {
display: flex;
gap: 8px;
}
/* ============================================================
CONFIG FORM / AI DASHBOARD (unique to cloudsurf.com)
============================================================ */
.config-form {
margin-top: 4px;
}
.config-row {
display: flex;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
}
.config-row .form-group {
margin-bottom: 0;
flex: 1;
min-width: 180px;
}
.config-save {
margin-bottom: 0;
white-space: nowrap;
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
}
.label-hint {
font-weight: 400;
color: var(--text-muted);
font-size: 0.75rem;
}
.provider-badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 4px;
color: #22c55e;
font-size: 0.8125rem;
font-weight: 600;
}
.stats-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.nowrap {
white-space: nowrap;
}
/* ============================================================
SURFDOC BLOCK OVERRIDES
============================================================ */
/* Logo — override surf-ui.css defaults:
- `margin: 2rem 0` → zero both (gap controlled by hero padding only)
- img `display: inline-block` → block (removes baseline descender gap) */
.surfdoc-logo {
padding-top: 64px;
padding-bottom: 0;
margin: 0;
}
.surfdoc-logo img {
display: block;
margin: 0 auto;
}
/* (DOG-3) The base `.surfdoc-hero` margin/padding + `.surfdoc-hero-headline`
size/line-height overrides were DEAD CODE and have been removed: every hero on
the site renders as `.surfdoc-hero-transparent` (its own padding/margin win by
source order), and surfdoc.css's `.surfdoc .surfdoc-hero-headline` (0,2,0) always
beat this 0,1,0 rule — the headline already renders at the crate's clamp, never
the 4rem here. Reviving the larger headline is a deliberate design change, not a
token refactor; left for a content/design pass. */
.surfdoc-hero-subtitle {
max-width: 520px;
margin: 0 auto 40px;
}
/* (DOG-3) `.surfdoc-hero-btn` radius is now the --ws-hero-btn-radius token value
set in :root; the specificity-tie override here was deleted. */
/* Features */
.surfdoc-features {
border: none;
padding: 0;
}
/* (DOG-3) `.surfdoc-feature-card` bg/padding/radius are now the --ws-feature-card-*
token values set in :root; the value-tie override here was deleted. The hover
BACKGROUND change below is additive (surfdoc.css's hover only lifts), so it stays
website-local; the hover-lift cancel moved to --ws-feature-card-hover-transform. */
.surfdoc-feature-card:hover {
background: var(--surface-hover);
}
.surfdoc-feature-icon {
color: var(--accent);
}
.surfdoc-feature-title {
font-weight: 700;
font-size: 1.125rem;
}
.surfdoc-feature-body {
color: var(--text-muted);
line-height: 1.6;
}
/* Sections */
.surfdoc-section {
border-top: none;
}
.surfdoc-section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.surfdoc-section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 8px;
}
.surfdoc-section-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
margin-bottom: 48px;
}
.section-dark {
background: var(--surface);
}
/* Stats */
.surfdoc-stats {
display: flex;
justify-content: center;
gap: 32px;
padding: 32px 24px;
max-width: 960px;
margin: 0 auto;
flex-wrap: wrap;
}
.surfdoc-stat {
text-align: center;
}
.surfdoc-stat-value {
font-size: 2rem;
font-weight: 800;
color: var(--text);
line-height: 1.2;
}
.surfdoc-stat-label {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 4px;
}
/* Pipeline */
.surfdoc-pipeline {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
padding: 16px 0;
}
.surfdoc-pipeline-step {
text-align: center;
flex: 1;
min-width: 120px;
max-width: 180px;
}
.surfdoc-pipeline-label {
font-weight: 700;
font-size: 0.9375rem;
margin-bottom: 4px;
}
.surfdoc-pipeline-desc {
font-size: 0.8125rem;
color: var(--text-muted);
line-height: 1.4;
}
.surfdoc-pipeline-arrow {
color: var(--text-muted);
font-size: 1.25rem;
margin-top: 8px;
}
/* CTA button — (DOG-3) radius is now the --ws-cta-radius token value in :root. */
.surfdoc-cta-primary {
background: var(--accent);
color: #fff;
}
.surfdoc-cta-primary:hover {
opacity: 0.9;
}
/* ============================================================
SOLUTIONS PAGE (unique to cloudsurf.com)
============================================================ */
/* (Removed stale `body:has(.solutions-process) .surfdoc-hero` override: the
solutions page now renders the shared transparent hero — same as
careers/support — and no longer emits a `.solutions-process` wrapper.) */
.solutions-process {
border-top: none;
}
.solutions-process .section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.solutions-process .section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 8px;
}
.solutions-process .section-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
margin-bottom: 48px;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.process-card {
padding: 32px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition: all 200ms ease;
}
.process-card:hover {
background: var(--surface-hover);
transform: translateY(-2px);
}
.process-number {
display: block;
font-size: 2rem;
font-weight: 800;
color: #2563eb;
margin-bottom: 12px;
line-height: 1;
}
.process-card h3 {
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 8px;
}
.process-card p {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.6;
}
.solutions-cta-section {
border-top: none;
}
.solutions-cta-section .section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.solutions-cta-section .section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 8px;
}
.solutions-cta-section .section-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
margin-bottom: 32px;
text-align: center;
}
/* ============================================================
CAREERS PAGE (unique to cloudsurf.com)
============================================================ */
.careers-stack-section {
border-top: none;
}
.careers-stack-section .section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.careers-stack-section .section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 8px;
}
.careers-stack-section .section-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
margin-bottom: 48px;
}
.stack-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.stack-card {
padding: 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.stack-card h3 {
font-weight: 700;
font-size: 0.9375rem;
margin-bottom: 4px;
}
.stack-card p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
.careers-roles-section {
border-top: none;
}
.careers-roles-section .section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.careers-roles-section .section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 32px;
}
.role-card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
padding: 32px;
}
.role-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.role-header h3 {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
}
.role-badge {
display: inline-flex;
padding: 4px 12px;
background: rgba(37, 99, 235, 0.08);
border: 1px solid rgba(37, 99, 235, 0.2);
border-radius: 4px;
color: #2563eb;
font-size: 0.8125rem;
font-weight: 600;
}
.role-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.role-detail {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.6;
}
.role-detail strong {
color: var(--text);
min-width: 100px;
display: inline-block;
}
/* Multi-role layout: stacked cards with breathing room between them. */
.roles-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.role-summary {
color: var(--text);
font-size: 1.0625rem;
line-height: 1.6;
margin: 0 0 24px;
}
.role-block {
margin-bottom: 20px;
}
.role-block h4 {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin: 0 0 10px;
}
.role-block ul {
margin: 0;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.role-block li {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.55;
}
.role-stack {
font-size: 0.9375rem;
color: var(--text-muted);
line-height: 1.6;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.role-stack strong {
color: var(--text);
margin-right: 6px;
}
.careers-apply-section {
border-top: none;
}
.careers-apply-section .section-inner {
max-width: 960px;
margin: 0 auto;
padding: 48px 24px 96px;
}
.careers-apply-section .section-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
margin-bottom: 8px;
}
.careers-apply-section .section-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
margin-bottom: 16px;
}
/* ============================================================
HERO ACTIONS (landing CTA row under hero)
============================================================ */
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 0 auto 8px;
}
/* Secondary hero button: frosted glass so it stays legible over the sky. */
.hero-actions .btn-ghost {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-color: rgba(15, 23, 42, 0.14);
color: var(--text);
}
.hero-actions .btn-ghost:hover {
background: rgba(255, 255, 255, 0.85);
border-color: rgba(15, 23, 42, 0.22);
}
[data-theme="dark"] .hero-actions .btn-ghost {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .hero-actions .btn-ghost:hover {
background: rgba(255, 255, 255, 0.15);
}
/* When the hero is immediately followed by the CTA row (landing page),
drop the hero's bottom padding so the buttons sit just beneath the
subtitle — the subtitle's own margin supplies the gap. */
.surfdoc-hero:has(+ .hero-actions) {
padding-bottom: 0;
}
.surfdoc-hero:has(+ .hero-actions) .surfdoc-hero-subtitle {
margin-bottom: 28px;
font-size: clamp(1.375rem, 3.5vw, 2rem);
font-weight: 500;
letter-spacing: 0.01em;
max-width: none;
}
/* Mission statement (landing — under "Our Mission", above the cards) */
.mission-statement {
text-align: center;
font-size: clamp(1.5rem, 3.5vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text);
max-width: 760px;
margin: 0 auto 8px;
}
/* ============================================================
FROSTED HOME CARDS (light mode only)
The Platforms/Tools/Standards product cards and the Mission
feature cards sit over the sky background on the home page —
give them the same frosted-glass treatment as the nav so the
sky reads through while text stays legible. Scoped to `.home`
so the shared card classes on subpages keep their solid surface.
============================================================ */
[data-theme="light"] .home .product-card,
[data-theme="light"] .home .surfdoc-feature-card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .home .product-card:hover,
[data-theme="light"] .home .surfdoc-feature-card:hover {
background: rgba(255, 255, 255, 0.72);
}
/* Light theme only: the category eyebrow labels (news/research/events cards)
and the Mission feature icon-chips render too faint over the bright frosted
cards. Deepen the blue (and firm up the chip) so they read clearly. Dark
theme keeps the brand --accent untouched. */
[data-theme="light"] .surfdoc-post-card-meta {
color: #1d4ed8;
}
[data-theme="light"] .surfdoc-feature-icon {
background: #d6e2ff;
color: #1d4ed8;
}
/* ============================================================
HOME CTA BAND (closing call-to-action before footer)
============================================================ */
.home-cta-inner {
max-width: 720px;
margin: 0 auto;
padding: 80px 24px 96px;
text-align: center;
}
.home-cta-headline {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.home-cta-subtitle {
color: var(--text-muted);
font-size: 1.0625rem;
line-height: 1.6;
max-width: 560px;
margin: 0 auto 28px;
}
/* ============================================================
RESPONSIVE OVERRIDES
============================================================ */
@media (max-width: 768px) {
/* Mobile nav: hamburger appears to the right of theme toggle */
.nav-toggle { order: 10; }
.surfdoc-shell-theme-toggle { order: 9; }
/* Mobile nav popout: solid background to avoid gradient bleed-through */
.nav-links {
background: var(--background);
}
/* Keep the mobile bar uncluttered: site links live in the footer.
Brand logo (home), the page CTA, and theme toggle stay. */
.nav-site-link {
display: none;
}
.hero-headline {
font-size: 2.25rem;
}
.hero .section-inner {
padding-top: 80px;
padding-bottom: 60px;
}
/* Compact hero for above-the-fold platforms */
.surfdoc-logo {
padding-top: 16px;
}
.surfdoc-logo img {
width: 100px;
height: 100px;
}
.surfdoc-hero {
padding-bottom: 24px;
}
.surfdoc-hero-headline {
font-size: 2rem;
}
.surfdoc-hero-subtitle {
margin-bottom: 20px;
}
.products-section .section-inner {
padding-top: 24px;
}
.products-grid {
grid-template-columns: 1fr;
}
.values-grid {
grid-template-columns: 1fr;
}
.section-inner {
padding: 64px 16px;
}
.surfdoc-shell-footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.legal-embed iframe,
.legal-content .surfdoc-embed iframe {
height: 70vh;
}
.stats-table {
font-size: 0.8125rem;
}
.stats-table th,
.stats-table td {
padding: 8px 10px;
}
.highlights-cell {
min-width: 180px;
}
.inbox-header {
flex-direction: column;
align-items: flex-start;
}
.message-meta {
flex-direction: column;
align-items: flex-start;
}
.message-time {
margin-left: 0;
}
.message-actions {
flex-wrap: wrap;
}
.process-grid {
grid-template-columns: 1fr;
}
.stack-grid {
grid-template-columns: 1fr 1fr;
}
}
/* ============================================================
NEWS / RESEARCH / EVENTS (article subpages)
The index card grids now render from surf-parse's ::post-grid block
(.surfdoc-post-* classes in surfdoc.css). Only the single-post article
typography lives here.
============================================================ */
/* Article (single post) page */
.article-section .section-inner {
max-width: 760px;
margin: 0 auto;
padding: 110px 24px 96px;
}
/* Article body floats as a frosted sheet over the sky — without it the tiled
clouds-bg puffs drift directly behind the running text (most visible in light
theme) and hurt legibility. Frosted glass keeps the sky atmosphere while
guaranteeing the clouds never sit over article copy. */
.article {
margin-top: 24px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: var(--radius);
padding: clamp(28px, 5vw, 56px);
box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .article {
background: rgba(12, 12, 28, 0.72);
border-color: var(--border);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.article-title {
font-size: clamp(2rem, 4.5vw, 2.75rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 14px 0 16px;
color: var(--text);
}
.article-lead {
font-size: 1.1875rem;
color: var(--text);
line-height: 1.55;
margin: 0 0 28px;
}
.article-body {
display: flex;
flex-direction: column;
gap: 18px;
border-top: 1px solid var(--border);
padding-top: 28px;
}
.article-body p {
font-size: 1.0625rem;
color: var(--text-muted);
line-height: 1.7;
margin: 0;
}
/* ============================================================
SURFDOC MARKETING BLOCKS
Pure-SurfDoc landing/solutions/careers/support pages render via
surf-parse only (no raw HTML). These rules style the blocks that
replaced the old bespoke marketing sections:
::hero[layout=stacked] — logo above headline (was ::logo + .hero-actions)
::banner — centered CTA band (was .home-cta / .mission / apply)
::product-grid — grouped emblem link-cards (was .products-section)
Forms (::form), steps (::steps) and role cards (::details) inherit
their base styling from surf-parse's surfdoc.css.
============================================================ */
/* Transparent hero: drop the gradient card so the hero blends into the page
(e.g. the home starfield/sky). Text + buttons switch to theme colors with
real contrast instead of the white-on-gradient treatment. */
.surfdoc-hero-transparent {
background: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
color: var(--text);
/* A comfortable clearance (120px top) so a page whose first
block is this hero (careers, solutions, support) reads with
breathing room under the fixed nav — not jammed up against the
topbar. Base .surfdoc-hero top margin is zeroed so the 120px is
the whole story. */
margin-top: 0;
padding: 120px 2rem 64px;
}
.surfdoc-hero-transparent .surfdoc-hero-headline,
.surfdoc-hero-transparent .surfdoc-hero-subtitle {
color: var(--text);
}
/* Buttons on a transparent hero need their own contrast (the base styles
assume a dark gradient backdrop). */
.surfdoc-hero-transparent .surfdoc-hero-btn-primary {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
}
/* surf-parse's generic primary-hover default sets `color: var(--accent)` — that
reads fine on a WHITE-filled hero button (blue label on white), but on this
ACCENT-filled transparent-hero button it paints the label the same blue as
the fill and hides it. Pin the label white on hover; keep the new
filter:brightness() darken from the base (no override needed for that). */
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-primary:hover {
color: #fff;
}
.surfdoc-hero-transparent .surfdoc-hero-btn-secondary {
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
}
.surfdoc-hero-transparent .surfdoc-hero-btn-secondary:hover {
background: var(--surface-hover);
border-color: var(--accent);
}
/* Light mode: the home hero sits over the bright sky — frost the secondary
button so it stays legible. */
[data-theme="light"] .home .surfdoc-hero-transparent .surfdoc-hero-btn-secondary {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* `.back-link` is a website-only class (not emitted by surf-parse), so it keeps
its own underline-suppression. The surfdoc-* button/card anchors are now
covered by surf-parse's surfdoc.css default. */
.surfdoc .back-link:hover {
text-decoration: none;
}
/* Hero stacked logo: the CloudSurf mark is the hero image above the headline.
Clean logo presentation — override the base hero-image card border/sizing. */
.surfdoc-hero-stacked .surfdoc-hero-image {
margin: 0 auto 8px;
}
.surfdoc-hero-image img {
display: block;
width: 180px;
height: auto;
max-height: none;
margin: 0 auto;
border: none;
border-radius: 0;
}
/* CTA buttons folded into the hero (replaces the old .hero-actions row). */
.surfdoc-hero-actions {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
/* Secondary hero/banner button: frosted glass so it stays legible over the sky. */
.surfdoc-hero-btn-secondary,
.surfdoc-banner-btn-secondary {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .surfdoc-hero-btn-secondary,
[data-theme="dark"] .surfdoc-banner-btn-secondary {
background: rgba(255, 255, 255, 0.08);
}
/* Hide the honeypot field — bots fill it, humans never see it. */
.surfdoc-form-honey {
display: none;
}
/* Home page: the Innovate/Simplify/Scale ::features grid is a top-level block
(no section wrapper), so constrain + pad it like the product grid / banners
instead of letting the cards bleed to the viewport edges. */
.home .surfdoc-features {
max-width: 1040px;
margin: 2rem auto;
padding: 0 24px;
}
/* (DOG-3 / closes DOG-1 residual) The feature-card hover-lift cancel moved
upstream to the --ws-feature-card-hover-transform token (set to `none` in :root);
the surfdoc.css default lifts, cloudsurf opts out via the token. */
/* Role accordions (::details): the website wants the list rendered as a
flex/gap stack (a layout choice, not a specificity patch). Paragraph spacing
is handled by surf-parse's surfdoc.css default. */
.surfdoc-details-body ul {
margin: 0 0 14px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 6px;
}
.surfdoc-details-body strong {
color: var(--text);
}
/* ---- ::banner — centered CTA band ----
DOG-2: the structural geometry (band, inner column, action row, button shape,
secondary-button outline) now ships in surf-parse's surfdoc.css. The website
keeps only the bespoke centered-subtitle max-width; the frosted secondary
button lives in the hero section above. */
.surfdoc .surfdoc-banner-subtitle {
max-width: 600px;
margin-inline: auto;
}
/* ---- ::product-grid — grouped emblem link-cards ----
DOG-2: card/row/body/emblem/name/tagline/arrow geometry, the odd-card
centering, base hover (bg + accent border + arrow), and the mobile 1-col
collapse now ship in surfdoc.css. The website keeps only the per-product
accent values and the frosted-glass-over-sky home skin. */
.surfdoc-pg-card[data-product="surf"] { --product-accent: #2E8AD8; }
.surfdoc-pg-card[data-product="mako"] { --product-accent: #1466B4; }
.surfdoc-pg-card[data-product="wavesite"] { --product-accent: #2B6CB0; }
.surfdoc-pg-card[data-product="surfdoc"] { --product-accent: #D97706; }
.surfdoc-pg-card[data-product="surfcontext"] { --product-accent: #6366f1; }
.surfdoc-pg-card[data-product="surf-cli"] { --product-accent: #0ea5e9; }
/* Frosted home cards over the sky (light mode), same as feature cards. */
[data-theme="light"] .home .surfdoc-pg-card {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .home .surfdoc-pg-card:hover {
background: rgba(255, 255, 255, 0.72);
/* Accent border on hover. This must out-specify the light-home frosted
RESTING border rule above (both are website-only); surf-parse can't
arbitrate the [data-theme] .home context. */
border-color: var(--product-accent, var(--accent));
}
@media (max-width: 768px) {
.surfdoc-hero-image img {
width: 120px;
}
}
/* ============================================================
CAREERS PAGE (unique to cloudsurf.com) — scoped via .careers-page
============================================================ */
/* Hero: larger, more intentional headline + centered CTA, tighter rhythm so
the top of the page doesn't read as empty space. */
.careers-page .surfdoc-hero {
padding: 3.5rem 2rem 2.5rem;
}
.careers-page .surfdoc-hero .surfdoc-hero-headline {
font-size: clamp(2.5rem, 6vw, 3.75rem);
letter-spacing: -0.02em;
}
.careers-page .surfdoc-hero .surfdoc-hero-subtitle {
font-size: 1.1875rem;
max-width: 600px;
margin: 0 auto 1.75rem;
}
.careers-page .surfdoc-hero-actions,
.careers-page .surfdoc-hero-inner {
align-items: center;
}
/* Open-role cards: lift the surf-parse default into a cleaner,
scannable card with an accent rail and a hover state. */
.careers-page .surfdoc-details {
border: 1px solid var(--glass-border);
border-radius: 16px;
background: var(--surface);
margin: 16px 0;
overflow: hidden;
transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.careers-page .surfdoc-details:hover {
border-color: var(--accent);
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
}
.careers-page .surfdoc-details > summary,
.careers-page .surfdoc-details-summary {
padding: 18px 20px;
font-size: 1.0625rem;
font-weight: 650;
}
.careers-page .surfdoc-details[open] > summary,
.careers-page .surfdoc-details[open] .surfdoc-details-summary {
background: var(--surface-hover);
}
.careers-page .surfdoc-details-body {
padding: 4px 20px 20px 23px;
line-height: 1.6;
}
/* Application form */
.careers-apply {
padding: 24px 0 8px;
}
.careers-apply .section-inner {
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.careers-apply h2 {
margin-bottom: 8px;
}
.careers-apply-lead {
color: var(--text-muted);
margin-bottom: 24px;
}
.careers-apply-optional {
color: var(--text-muted);
font-weight: 400;
font-size: 0.875em;
}
.careers-apply-form input[type="file"] {
display: block;
width: 100%;
padding: 10px 12px;
border: 1px dashed var(--glass-border);
border-radius: 10px;
background: var(--surface);
color: var(--text-muted);
font-size: 0.9375rem;
cursor: pointer;
}
.careers-apply-form input[type="file"]::file-selector-button {
margin-right: 12px;
padding: 6px 12px;
border: none;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-weight: 600;
cursor: pointer;
}
.careers-apply-form .cf-turnstile-field {
margin-top: 4px;
}