/* Fonts are loaded via in each page (not @import) so they fetch early and avoid a font swap when navigating between pages. */ /* ============================================================ Spiel website design system (2026 redesign). Refined serif (Newsreader) + monospace (Roboto Mono), warm pale palette, restrained brand-red accent. ============================================================ */ :root { --paper: #edefea; --ink: #232321; --ink-2: #4a4a44; --muted: #8c8c83; --faint: #b6b6ad; --line: rgba(35,35,33,0.16); --line-soft: rgba(35,35,33,0.09); --accent: #ff3b30; --serif: "Newsreader", Georgia, "Times New Roman", serif; --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --shell: 1160px; --gut: 40px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13.5px; line-height: 1.85; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: rgba(255,59,48,.14); } .shell { width: min(var(--shell), calc(100% - var(--gut)*2)); margin: 0 auto; } .skip-link { position: absolute; left: -9999px; top: auto; } .skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; font-family: var(--mono); font-size: 12px; } .mono { font-family: var(--mono); } .serif { font-family: var(--serif); } h1,h2,h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; } .label { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .arrow { color: var(--accent); display: inline-block; transition: transform .18s ease; } a:hover .arrow { transform: translate(2px,-2px); } /* header */ .hdr { position: sticky; top: 0; z-index: 60; background: rgba(237,239,234,.86); backdrop-filter: blur(12px); } .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 76px; } .brand { justify-self: start; font-family: var(--serif); font-size: 23px; font-weight: 400; letter-spacing: -0.01em; } .nav { justify-self: center; display: flex; gap: 30px; } .nav a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); } .nav a:hover { color: var(--accent); } .nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; } .hdr .dl { justify-self: end; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .hdr .dl:hover { color: var(--accent); } .navcb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .navtoggle { display: none; } .nav-home { display: none; } @media (max-width: 860px){ .hdr-in { grid-template-columns: auto 1fr; } .brand { display: none; } .nav { display: none; } .navtoggle { display: inline-flex; align-items: center; justify-content: center; justify-self: start; width: 32px; height: 32px; margin-left: -4px; cursor: pointer; } .navtoggle span { position: relative; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: background .2s ease; } .navtoggle span::before, .navtoggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, top .2s ease; } .navtoggle span::before { top: -6px; } .navtoggle span::after { top: 6px; } .navcb:checked ~ .nav { display: flex; flex-direction: column; align-items: stretch; justify-self: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0,0,0,.08); padding: 4px var(--gut) 18px; } .navcb:checked ~ .nav .nav-home { display: block; font-family: var(--serif); font-size: 23px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); padding: 6px 0 14px; border-bottom: 1px solid var(--line); } .navcb:checked ~ .nav a { display: block; text-align: left; padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--line); } .navcb:checked ~ .nav a:last-child { border-bottom: 0; } .navcb:checked ~ .navtoggle span { background: transparent; } .navcb:checked ~ .navtoggle span::before { top: 0; transform: rotate(45deg); } .navcb:checked ~ .navtoggle span::after { top: 0; transform: rotate(-45deg); } } /* hero NOTE: hero content is centered TEMPORARILY. When a product video is ready, move .hero-in back to left-aligned (align-items/text-align: start, links/sub flush left) and place the video in the right half. The dot-grid .art frame below can stay as the backdrop. */ .hero { position: relative; } .art { /* centered field, a bit larger than the hero text, fading on all edges */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1060px, 94vw); height: min(600px, 86%); pointer-events: none; z-index: 0; background-image: radial-gradient(circle, rgba(35,35,33,0.17) 1px, transparent 1.7px); background-size: 17px 17px; -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 42%, transparent 76%); mask-image: radial-gradient(ellipse at center, #000 0%, #000 42%, transparent 76%); opacity: .6; } /* reusable dot texture echoing the hero motif; fades on all edges so it blends into the section. Add `.dots-host` to a section and a `.dotlayer` child. */ .dots-host { position: relative; overflow: hidden; } .dots-host > :not(.dotlayer) { position: relative; z-index: 1; } .dotlayer { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(35,35,33,0.13) 1px, transparent 1.7px); background-size: 17px 17px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%), linear-gradient(to right, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-composite: intersect; } .dotlayer.on-red { background-image: radial-gradient(circle, rgba(255,255,255,0.20) 1px, transparent 1.7px); } /* contained dot field: wider than the content column but not full width */ .dotlayer.contained { left: 50%; right: auto; transform: translateX(-50%); width: min(900px, 94vw); } .dotlayer.contained-wide { left: 50%; right: auto; transform: translateX(-50%); width: min(1060px, 94vw); } /* faded, anchored to the lower-left of the host */ .dotlayer.soft-bl { opacity: .5; -webkit-mask-image: radial-gradient(115% 115% at 5% 96%, #000 0%, #000 12%, transparent 58%); mask-image: radial-gradient(115% 115% at 5% 96%, #000 0%, #000 12%, transparent 58%); } .hero-in { position: relative; z-index: 1; min-height: min(74vh, 660px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(40px,6vh,84px) 0; } .hero h1 { margin-top: 24px; font-family: var(--serif); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.08; font-weight: 300; letter-spacing: -0.025em; max-width: 28ch; text-wrap: balance; } .hero h1 em { font-style: italic; } .hero-badge { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; } .hero-sub { margin: 22px auto 0; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: none; white-space: nowrap; } @media (max-width:460px){ .hero-sub { max-width: 350px; white-space: normal; } } .hero .links { margin-top: 34px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; } .btn-red { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .18s ease, transform .18s ease; } .btn-red:hover { background: #e22a1e; transform: translateY(-2px); } .btn-red:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .btn-red .arrow { color: #fff; } .hero-textlink { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .hero-textlink:hover { color: var(--accent); } .appbuy { margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--muted); } .appbuy a { color: var(--ink); border-bottom: 1px solid var(--line); } .appbuy a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* main two-column with sticky contents rail */ .doc { display: grid; grid-template-columns: 164px minmax(0,620px); gap: clamp(28px, 4vw, 56px); justify-content: center; padding: clamp(60px,8vw,110px) 0; } .toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 16px; } .toc .ti { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; line-height: 1.5; color: var(--faint); padding-left: 14px; border-left: 1px solid transparent; transition: color .2s, border-color .2s; } .toc .ti .n { display: block; color: var(--faint); margin-bottom: 2px; } .toc .ti:hover { color: var(--ink-2); } .toc .ti.active { color: var(--ink); border-left-color: var(--accent); } .toc .ti.active .n { color: var(--accent); } @media (max-width: 860px){ .doc { grid-template-columns: 1fr; } .toc { display: none; } } .col { max-width: 620px; width: 100%; margin: 0 auto; } .block { padding: clamp(48px,7vw,86px) 0; } .block:first-child { padding-top: 0; } .block .lab { display: block; margin-bottom: 22px; } .block .lab .num { color: var(--accent); margin-right: 12px; } .block h2 { font-family: var(--serif); font-size: clamp(28px,3.6vw,46px); line-height: 1.08; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; } .block > .intro { margin: 18px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: none; } .col .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .col .more:hover { color: var(--accent); } /* speed (animated transcript) */ .speed { margin-top: 38px; border-top: 1px solid var(--line); } .srow { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .srow .who b { display: block; color: var(--ink); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .srow .who span { color: var(--muted); font-size: 11.5px; } .srow.fast .who span { color: var(--accent); } .srow .type { margin: 0; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); } .cursor2 { display: inline-block; width: 7px; height: 1.05em; background: var(--accent); transform: translateY(.2em); margin-left: 2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .type.done .cursor2 { opacity: .3; } @media (max-width:560px){ .srow { grid-template-columns: 1fr; gap: 10px; } } /* steps numbered */ .steps { margin-top: 30px; border-top: 1px solid var(--line); } .step { display: grid; grid-template-columns: 70px 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .step .sn { font-family: var(--mono); font-size: 12px; color: var(--accent); } .step h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; } .step p { margin: 6px 0 0; color: var(--ink-2); } /* apps */ .apps { margin-top: 38px; display: grid; grid-template-columns: repeat(8,1fr); gap: clamp(14px,2.2vw,26px); align-items: center; justify-items: center; } .apps img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(40,33,28,.12)); transition: transform .2s ease; } .apps img:hover { transform: translateY(-4px); } @media (max-width: 560px){ .apps { grid-template-columns: repeat(4,1fr); } } /* privacy points */ .ppoints { margin-top: 34px; border-top: 1px solid var(--line); } .ppoints div { display: grid; grid-template-columns: 200px 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--line); } .ppoints .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .ppoints .v { font-family: var(--serif); font-size: 19px; color: var(--ink); } @media (max-width:560px){ .ppoints div { grid-template-columns: 1fr; gap: 4px; } } /* local tools */ .tools { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .ui { border: 1px solid var(--line); padding: 18px; height: 252px; display: flex; flex-direction: column; justify-content: center; } .tools > div { display: flex; flex-direction: column; } .ui-insights { gap: 10px; justify-content: center; } .wgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .wg { border: 1px solid var(--line-soft); padding: 13px; } .wg .n { font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: -0.02em; line-height: 1; transform: translateX(-2px); } .wg .l { font-family: var(--mono); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-top: 8px; white-space: nowrap; } .wg-chart .l { margin: 0 0 10px; } .wg-chart .bars { display: flex; align-items: flex-end; gap: 7px; height: 54px; } .wg-chart .bars i { flex: 1; background: var(--accent); opacity: .82; border-radius: 2px 2px 0 0; } .ui-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-2); } .ui-row:last-child { border-bottom: 0; } .ui-row .t { color: var(--muted); } .tools h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; margin: 20px 18px 6px 0; } .tools p { margin: 0; padding-right: 18px; color: var(--ink-2); } @media (max-width:600px){ .tools { grid-template-columns: 1fr; } } /* pricing */ .prices { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .price { position: relative; padding: 30px; border: 1px solid var(--line); display: flex; flex-direction: column; } .price.feat { border: 2px solid var(--accent); } .price .badge { position: absolute; top: -10px; right: 18px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 8px; white-space: nowrap; } .price .btn-red { margin-top: auto; align-self: flex-start; } .price .plan { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .price.feat .plan { color: var(--accent); } .price .amt { font-family: var(--serif); font-size: 52px; font-weight: 300; letter-spacing: -0.03em; margin: 14px 0 0; line-height: 1; } .price .amt small { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; } .price ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; } .price li { font-size: 12.5px; color: var(--ink-2); padding-left: 18px; position: relative; } .price li::before { content: "+"; position: absolute; left: 0; color: var(--accent); } .price .buy { margin-top: auto; align-self: flex-start; height: 50px; padding: 0 22px; border: 1px solid rgba(35,35,33,0.28); border-radius: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); transition: border-color .18s ease, transform .18s ease; } .price .buy:hover { border-color: var(--ink); transform: translateY(-2px); } .req { margin-top: 22px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; } .req a { color: var(--ink); border-bottom: 1px solid var(--line); } .req a:hover { border-bottom-color: var(--accent); } @media (max-width:560px){ .prices { grid-template-columns: 1fr; } } /* faq */ .faq { margin-top: 30px; border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-family: var(--serif); font-size: 20px; font-weight: 400; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 2px; top: 22px; font-family: var(--mono); color: var(--accent); font-size: 18px; } .faq details[open] summary::after { content: "\2013"; } .faq p { margin: 0 0 22px; color: var(--ink-2); max-width: 620px; } .faq p a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .faq-section { padding: clamp(12px,2vw,28px) 0 clamp(64px,9vw,110px); } .faq-section .faq { margin-top: 0; } /* final */ .final { padding: clamp(80px,12vw,150px) 0; text-align: center; background: var(--accent); } .final h2 { font-family: var(--serif); font-size: clamp(34px,4.6vw,58px); line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; max-width: none; white-space: nowrap; color: #fff; } .final .label { display: inline-block; color: rgba(255,255,255,.8); } .final .links { margin-top: 34px; display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; } .final .links a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .final .links a:hover { opacity: .78; } .final .links a .arrow { color: #fff; } .final .appbuy { margin: 22px auto 0; color: rgba(255,255,255,.82); } .final .appbuy a { color: #fff; border-bottom-color: rgba(255,255,255,.45); } .final .appbuy a:hover { color: #fff; border-bottom-color: #fff; } .final .appbuy .arrow { color: #fff; } @media (max-width: 600px){ .final h2 { white-space: normal; } } /* footer */ footer { padding: 64px 0 44px; } .fgrid { display: grid; grid-template-columns: repeat(5, max-content); justify-content: space-between; column-gap: 30px; row-gap: 30px; align-items: start; } .fgrid > div:first-child { order: 0; } .fcol[aria-label="Product"] { order: 1; } .fcol[aria-label="Support"] { order: 2; } .fcol[aria-label="Free tools"] { order: 3; } .fcol[aria-label="Legal"] { order: 4; } .fgrid .b { font-family: var(--serif); font-size: 22px; } .fgrid .tag { color: var(--muted); margin-top: 10px; max-width: 240px; font-size: 12px; line-height: 1.7; } .fcol h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .fcol a { display: block; font-size: 12px; color: var(--ink-2); padding: 4px 0; } .fcol a:hover { color: var(--accent); } .fbot { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; } @media (max-width:760px){ .fgrid { grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 34px; justify-content: stretch; } .fgrid > div:first-child { grid-column: 1 / -1; } } @media (max-width:460px){ .fgrid { grid-template-columns: 1fr; } } /* legal / article pages */ .legal { max-width: 720px; margin: 0 auto; padding: clamp(40px,6vw,72px) 0 clamp(70px,9vw,120px); } .legal h1 { font-family: var(--serif); font-size: clamp(34px,5vw,56px); font-weight: 300; letter-spacing: -0.02em; } .legal .updated { margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .legal section { margin-top: 40px; } .legal h2 { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 0 0 12px; } .legal p { margin: 0 0 14px; color: var(--ink-2); } .legal a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } /* ============================================================ Inner-page layouts. Same components and style as the home page, arranged differently so each page reads uniquely. ============================================================ */ /* centered wide column (no sticky TOC rail) */ .page { width: min(980px, calc(100% - var(--gut)*2)); margin: 0 auto; } .psec { padding: clamp(54px,8vw,100px) 0; } .psec.tight { padding: clamp(40px,6vw,72px) 0; } .psec .lab { display: block; margin-bottom: 20px; } .psec .lab .num { color: var(--accent); margin-right: 12px; } .psec h2 { font-family: var(--serif); font-size: clamp(28px,3.6vw,46px); line-height: 1.08; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; } .psec .intro { margin: 16px 0 0; font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 620px; } .psec .more, .split .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .psec .more:hover, .split .more:hover { color: var(--accent); } .psec-center { text-align: center; } .psec-center .lab { display: inline-block; } .psec-center .intro { margin-left: auto; margin-right: auto; } /* compact page headers for subpages (no dotted art; distinct from the landing hero, and distinct from one another via modifiers) */ .phead { padding: clamp(64px,9vw,120px) 0 clamp(40px,5vw,64px); } .eyebrow { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } .phead h1 { font-family: var(--serif); font-size: clamp(36px,5vw,62px); line-height: 1.03; font-weight: 300; letter-spacing: -0.025em; max-width: 18ch; } .phead .psub { margin: 18px 0 0; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--ink-2); max-width: 520px; } .phead .links { margin-top: 26px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } .phead .hero-textlink { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .phead .hero-textlink:hover { color: var(--accent); } /* Features masthead: title left, actions right */ .phead-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: end; } .phead-row .links { margin-top: 0; } @media (max-width:760px){ .phead-row { grid-template-columns: 1fr; } .phead-row .links { margin-top: 22px; } } /* Use cases: oversized editorial lead */ .phead-lead h1 { font-size: clamp(40px,6.6vw,88px); max-width: 13ch; } /* Privacy: centered statement */ .phead-center { border-bottom: 0; text-align: center; padding: clamp(72px,11vw,148px) 0 clamp(18px,4vw,44px); } .phead-red { background: var(--accent); color: #fff; padding-bottom: clamp(56px,8vw,104px); } .phead-red .eyebrow { color: rgba(255,255,255,.82); } .phead-red h1 { color: #fff; } .phead-red .psub { color: rgba(255,255,255,.9); } .phead-center .eyebrow { display: inline-block; } .phead-center h1 { margin: 0 auto; max-width: 17ch; } .phead-center .psub { margin-left: auto; margin-right: auto; } .phead-center .links { justify-content: center; } /* FEATURES: spec-sheet card grid (hairline-ruled cells) */ .fcards { margin-top: 42px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .fcard { background: var(--paper); padding: clamp(26px,3vw,34px); text-align: left; } .fcard .fn { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .06em; } .fcard h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; margin: 16px 0 8px; letter-spacing: -0.01em; } .fcard p { margin: 0; color: var(--ink-2); } @media (max-width:680px){ .fcards { grid-template-columns: 1fr; } } /* USE CASES: margin-heading split (heading in the left margin, list right) */ .split { display: grid; grid-template-columns: minmax(0,290px) minmax(0,1fr); gap: clamp(28px,6vw,84px); padding: clamp(54px,8vw,96px) 0; border-top: 1px solid var(--line); } .split:first-of-type { border-top: 0; padding-top: 0; } .split-head { position: sticky; top: 100px; align-self: start; } .split-head .lab { display: block; margin-bottom: 16px; } .split-head .lab .num { color: var(--accent); margin-right: 12px; } .split-head h1 { font-family: var(--serif); font-size: clamp(34px,4.2vw,54px); line-height: 1.04; font-weight: 300; letter-spacing: -0.025em; } .split-head h2 { font-family: var(--serif); font-size: clamp(26px,2.8vw,38px); line-height: 1.06; font-weight: 300; letter-spacing: -0.02em; text-wrap: balance; } .split.split-intro { padding-top: clamp(80px,12vh,150px); } .split-head .intro { margin: 14px 0 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; color: var(--ink-2); } .split-list { display: grid; gap: 0; } .split-list .row { padding: 22px 0; border-top: 1px solid var(--line); } .split-list .row:first-child { padding-top: 0; border-top: 0; } .split-list h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; } .split-list p { margin: 6px 0 0; color: var(--ink-2); } @media (max-width:760px){ .split { grid-template-columns: 1fr; gap: 20px; } .split-head { position: static; } } /* subpage CTA: a quiet, left-aligned close (the full red band is landing-only) */ .cta { padding: clamp(72px,10vw,130px) 0; text-align: center; } .cta h2 { font-family: var(--serif); font-size: clamp(32px,4.4vw,54px); line-height: 1.05; font-weight: 300; letter-spacing: -0.02em; margin: 0 auto; white-space: nowrap; } .cta .links { margin-top: 30px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; } @media (max-width:600px){ .cta h2 { white-space: normal; } } /* full-bleed red band for mid-page accent on subpages (left-aligned, so it reads differently from the landing's centered red .final at the bottom) */ .band { width: 100vw; margin-left: calc(50% - 50vw); background: var(--accent); color: #fff; padding: clamp(68px,9vw,120px) 0; text-align: center; } .band-dark { background: var(--ink); } .band-dark h2 { max-width: none; } .band h2 { font-family: var(--serif); font-size: clamp(30px,4vw,50px); line-height: 1.06; font-weight: 300; letter-spacing: -0.02em; color: #fff; max-width: 22ch; margin: 0 auto; text-wrap: balance; } .band p { margin: 16px auto 0; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.86); max-width: 540px; } .band .links { margin-top: 28px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; justify-content: center; } .band .links a { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #fff; } .band .links a:hover { opacity: .78; } .band .links a .arrow { color: #fff; } /* ============================================================ Comparison pages (hub + individual vs pages). ============================================================ */ /* competitor card grid (hub + "keep comparing") */ .cmp-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cmp-card { border: 1px solid var(--line); padding: clamp(24px,3vw,30px); display: flex; flex-direction: column; background: var(--paper); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .cmp-card:hover { border-color: var(--ink); transform: translateY(-2px); } .cmp-card:hover .more { color: var(--accent); } .cmp-card .cc-head { display: flex; align-items: center; gap: 14px; } .cmp-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; } .cmp-card p { margin: 16px 0 20px; color: var(--ink-2); font-size: 13px; line-height: 1.65; } .cmp-card .more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .cmp-card .more:hover { color: var(--accent); } .tile { width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--ink); color: #fff; font-family: var(--serif); font-size: 22px; font-weight: 400; } .tile img { width: 46px; height: 46px; border-radius: 11px; } @media (max-width:640px){ .cmp-grid { grid-template-columns: 1fr; } } /* narrower centered column for the individual comparison body */ .page.cmp-page { width: min(720px, calc(100% - var(--gut)*2)); } .cmp-page h2 { font-size: clamp(24px,2.6vw,34px); } /* vs hero (individual comparison page) — text only, kept on one line */ .phead .vs-title { font-size: clamp(30px,4.2vw,48px); line-height: 1.12; white-space: nowrap; } .vs-x { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 0.62em; letter-spacing: 0; text-transform: lowercase; color: var(--muted); } .phead .psub.wide { max-width: 660px; } @media (max-width:560px){ .phead .vs-title { white-space: normal; font-size: clamp(26px,7vw,38px); } } /* side-by-side spec table */ .spec { margin-top: 38px; width: 100%; border-collapse: collapse; border: 1px solid var(--line); table-layout: fixed; } .spec th, .spec td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 13.5px; line-height: 1.5; } .spec tbody tr:first-child th, .spec tbody tr:first-child td { border-top: 1px solid var(--line); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .spec thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--muted); } .spec thead .ours-col { color: var(--accent); } .spec thead th:first-child, .spec tbody th { width: 18%; } .spec thead th:nth-child(2), .spec td.ours { width: 47%; } .spec thead th:nth-child(3), .spec td.theirs { width: 35%; } .spec tbody th { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; font-weight: 400; color: var(--muted); white-space: nowrap; overflow-wrap: normal; word-break: normal; } .spec td.ours { color: var(--ink); font-weight: 500; } .spec td.ours a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .spec td.ours a:hover { color: var(--accent); } .spec td.theirs { color: var(--ink-2); } @media (max-width:640px){ .spec th, .spec td { padding: 12px 10px; font-size: 12.5px; } .spec thead th:first-child, .spec tbody th { width: 24%; } .spec thead th:nth-child(2), .spec td.ours { width: 44%; } .spec thead th:nth-child(3), .spec td.theirs { width: 32%; } .spec tbody th { font-size: 10px; letter-spacing: .02em; } } /* Press kit (use-cases split layout: sticky head left, content right) */ .split-head .links { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .split-head .links .more { margin-top: 0; } .press-blurb p { margin: 0 0 18px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-2); } .press-blurb p:last-child { margin-bottom: 0; } .press-assets { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.5vw, 28px); align-items: start; } /* center the icon on the screenshots' image midline: the figures' cells are taller by their caption block (12px padding + 21px line = 33px), so plain align-self:center sits low by half that */ .press-icon { width: 96px; height: 96px; align-self: center; margin-bottom: 33px; } .press-asset { margin: 0; min-width: 0; } .press-asset img { width: 100%; aspect-ratio: 1814 / 1134; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); box-shadow: 0 6px 20px rgba(35,35,33,.08); } .press-asset figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 2px 0; color: var(--ink-2); line-height: 1.4; text-align: left; } .press-asset figcaption span { font-family: var(--serif); font-size: 15px; color: var(--ink); } .press-links a { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .press-links a:hover { color: var(--accent); } .press-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: start; } .press-links a { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px; background: var(--paper); } .press-band p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .press-band p a:hover { opacity: .78; } @media (max-width:760px){ .press-links { grid-template-columns: 1fr; } .press-assets { grid-template-columns: 1fr; } .press-icon { width: 72px; height: 72px; margin-bottom: 0; } } /* "Ask an AI about Spiel" buttons (compare hub) */ .askai { text-align: center; padding: clamp(64px,9vw,110px) 0; background: var(--ink); color: #fff; } .askai h2 { font-family: var(--serif); font-size: clamp(30px,4vw,46px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.06; } .askai p { margin: 16px auto 0; max-width: 540px; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.6; } .ai-btns { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } .ai-btn { display: inline-flex; align-items: center; gap: 11px; height: 50px; padding: 0 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: border-color .18s ease, transform .18s ease; } .ai-btn:hover { border-color: var(--ink); transform: translateY(-2px); } .ai-btn img { width: 18px; height: 18px; display: block; flex: none; } @media (prefers-reduced-motion: reduce){ * { animation: none !important; } }