/* ========================================================================== apps-2027.css — page-specific rules for /apps -------------------------------------------------------------------------- Everything generic lives upstream and is NOT repeated here: css/site-2027.css tokens, chrome, buttons, eyebrows, section rhythm, cards, hairline rows, tags, accordion, .cy27-shot striped placeholders, reveal, focus treatment css/media-2027.css phone frames, screenshot carousels, the scripted screencast player Load order is site -> media -> this file, so a plain single-class rule here already outranks an equal-specificity rule upstream by document order. That is used deliberately below (e.g. the accented "you need an app" card repainting .cy27-card) and is why nothing in this file needs !important. Specificity discipline: no bare descendant-element RESETS. Where a rule has to beat a shared 0,1,1 element rule (.cy27-page h1 / h3) it is written as `.cy27-page .cy27-apps__x` (0,2,0) rather than reaching for importance. Component-internal element selectors (.cy27-apps__ticks li) are fine — they are scoped to one component and match the shared file's own habits. ========================================================================== */ /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ /* The shared layer has no visually-hidden helper yet (pricing-2027.css owns a private one). Used for the screencast's
: the player is pure decoration, so the description of what the sequence shows has to reach assistive tech some other way. */ .cy27-apps__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; white-space: nowrap; clip-path: inset(50%); } /* -------------------------------------------------------------------------- No-JS safety net -------------------------------------------------------------------------- The accordion panels are collapsed with max-height:0, so without the script every answer would be invisible. .no-js is stamped on and removed by an inline script the moment JS runs. (The carousels and the screencast already carry their own no-JS states in css/media-2027.css.) -------------------------------------------------------------------------- */ .no-js .cy27-acc__panel { max-height: none; } /* -------------------------------------------------------------------------- 1. Hero — copy left, browser window right -------------------------------------------------------------------------- */ /* Design: 1.05fr .95fr, gap 64, vertically centred. The shared split hero is 1.1fr .9fr aligned to the top, which leaves the window floating high beside a tall copy column. */ .cy27-apps__hero .cy27-phero__inner { grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding-bottom: 110px; } .cy27-apps__hero .cy27-phero__eyebrow { margin-bottom: 22px; } /* 0,2,0 so it clears .cy27-page h1 (0,1,1) without an element selector. */ .cy27-page .cy27-apps__title { font-size: clamp(2.3rem, 4.4vw, 4rem); line-height: 1.03; margin-bottom: 26px; } .cy27-apps__hero-lead { max-width: 560px; margin-bottom: 34px; } .cy27-apps__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } /* Two columns of `auto`, not 1fr: the four trust items should sit as tight pairs against the left edge rather than spreading across the column. */ .cy27-apps__trust { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 10px 32px; font-family: var(--cy27-mono); font-size: .76rem; letter-spacing: .06em; color: var(--cy27-subtle); } .cy27-apps__hero-media { position: relative; } /* -- Browser window ------------------------------------------------------- */ /* The home page has an equivalent frame (.cy27-frame in css/home-2027.css) but that sheet is not loaded here and promoting it would mean editing a shared file. Kept page-local under its own name so a future promotion of .cy27-frame into site-2027.css cannot collide with this. */ .cy27-apps__win { overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6)); box-shadow: 0 28px 70px rgba(0, 0, 0, .5); } .cy27-apps__win-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--cy27-line-soft); } .cy27-apps__win-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); } /* min-width:0 + ellipsis: a flex child refuses to shrink below its content, so a long hostname would otherwise shove the "live" pill out of the bar. */ .cy27-apps__win-url { min-width: 0; margin-left: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--cy27-mono); font-size: .72rem; color: var(--cy27-subtle); } /* #7ce0a1 is status chrome, not part of the token scale — the same literal media-2027.css uses for the screencast badge dot. */ .cy27-apps__win-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--cy27-mono); font-size: .68rem; color: #7ce0a1; } .cy27-apps__win-live::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #7ce0a1; } /* -------------------------------------------------------------------------- 2. Section heads -------------------------------------------------------------------------- */ .cy27-apps__eyebrow { display: block; margin-bottom: 16px; } /* Margin only — the shared .cy27-page h2 rule owns size and colour and is not being fought here, so a single class is enough. */ .cy27-apps__h2 { max-width: 820px; margin-bottom: 16px; } /* Head with no lead paragraph under it carries the gap itself. */ .cy27-apps__h2--last { margin-bottom: 44px; } .cy27-apps__h2--split { max-width: none; margin-bottom: 20px; } .cy27-apps__sechead-lead { max-width: 640px; margin-bottom: 44px; } .cy27-apps__sechead-lead--wide { margin-bottom: 48px; } /* -------------------------------------------------------------------------- 3. Website vs app -------------------------------------------------------------------------- The two cards are deliberately unequal — four items left, five right, and only the right one carries the cyan wash and a cyan border. The asymmetry is the argument. Do not "fix" it into a matched pair. -------------------------------------------------------------------------- */ .cy27-apps__vs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .cy27-apps__vs-card { padding: 34px 32px; } /* Repaints .cy27-card at equal specificity — this file simply loads later. */ .cy27-apps__vs-card--accent { background: radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .12), transparent 60%), linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6)); border-color: rgba(0, 192, 250, .24); box-shadow: 0 28px 70px rgba(0, 0, 0, .5); } .cy27-apps__vs-label { display: block; margin-bottom: 20px; } .cy27-apps__vs-label--accent { color: var(--cy27-accent); } .cy27-apps__ticks { display: grid; gap: 14px; } .cy27-apps__ticks li { display: flex; gap: 12px; font-size: .98rem; line-height: 1.6; color: var(--cy27-body-strong); } .cy27-apps__ticks i { flex: 0 0 auto; padding-top: .32em; font-size: .78rem; color: var(--cy27-subtle); } /* Must follow the base tick rules — same specificity, later wins. */ .cy27-apps__ticks--accent li { color: var(--cy27-text); } .cy27-apps__ticks--accent i { color: var(--cy27-accent); } /* min-height 44px: this is a real navigation target, not a footnote. */ .cy27-apps__vs-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 26px; color: var(--cy27-body); font-size: .94rem; font-weight: 700; } .cy27-apps__vs-link:hover { color: #fff; } .cy27-apps__vs-link i { font-size: .75rem; } /* -------------------------------------------------------------------------- 4. What I build -------------------------------------------------------------------------- */ .cy27-apps__grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Column flex + margin-top:auto on the note pins every mono one-liner to the bottom of its card, so the six notes line up across a row even though the paragraphs above them are different lengths. */ .cy27-apps__build { display: flex; flex-direction: column; padding: 30px 28px; } .cy27-apps__build h3 { margin-bottom: 10px; font-size: 1.15rem; letter-spacing: -.015em; } .cy27-apps__build p { margin-bottom: 16px; font-size: .95rem; line-height: 1.7; color: var(--cy27-body); } .cy27-apps__build-note { margin-top: auto; font-family: var(--cy27-mono); font-size: .72rem; letter-spacing: .06em; color: var(--cy27-subtle); } /* -------------------------------------------------------------------------- 5. Rough spec builder -------------------------------------------------------------------------- */ /* Clears the fixed nav when the hero's "Build a rough spec" button jumps here. */ .cy27-apps__spec-sec { scroll-margin-top: 110px; } /* align-items:start is what makes the sticky output panel work: the panel box is content-height while its grid AREA stays as tall as the module column, which is the travel sticky positioning needs. */ .cy27-apps__spec { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: start; } .cy27-apps__mods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* 117px from the design, comfortably past the 44px floor every control on this page has to clear. */ .cy27-apps__mod { display: flex; flex-direction: column; gap: 8px; min-height: 117px; padding: 20px 22px; border: 1px solid var(--cy27-line-strong); border-radius: 14px; background: transparent; font-family: var(--cy27-sans); text-align: left; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .cy27-apps__mod:hover { border-color: rgba(255, 255, 255, .22); } /* EVERY selected-state paint hangs off aria-pressed. That means the state the script sets for assistive tech and the state a sighted visitor sees can never drift apart, and js/apps-2027.js needs no inline styles at all. */ .cy27-apps__mod[aria-pressed="true"] { background: rgba(0, 192, 250, .1); border-color: rgba(0, 192, 250, .4); } .cy27-apps__mod-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cy27-apps__mod-name { color: var(--cy27-body-strong); font-size: 1rem; font-weight: 700; } .cy27-apps__mod[aria-pressed="true"] .cy27-apps__mod-name { color: var(--cy27-heading); } /* aria-hidden in the markup: "on"/"off" duplicates what aria-pressed already announces, and a stray "off" read after the module name is just noise. */ .cy27-apps__mod-tick { font-family: var(--cy27-mono); font-size: .72rem; color: var(--cy27-subtle); } .cy27-apps__mod[aria-pressed="true"] .cy27-apps__mod-tick { color: var(--cy27-accent); } .cy27-apps__mod-desc { color: var(--cy27-body); font-size: .9rem; line-height: 1.6; } /* -- Output panel --------------------------------------------------------- */ /* Not .cy27-card--feature: that aims its wash at the top-LEFT corner, and this panel wants the symmetric top-centre version. */ .cy27-apps__out { position: sticky; top: 96px; padding: 32px 30px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .12), transparent 60%), linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6)); box-shadow: 0 28px 70px rgba(0, 0, 0, .5); } .cy27-apps__out-head { display: block; margin-bottom: 18px; } .cy27-apps__out-head--rule { margin-bottom: 14px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .09); } .cy27-apps__out-price { margin-bottom: 8px; font-size: 2rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--cy27-heading); } .cy27-apps__out-time { margin-bottom: 24px; font-family: var(--cy27-mono); font-size: .82rem; color: var(--cy27-accent); } /* Empty state. With nothing ticked the panel must not price an app that has no features — the figures drop to --cy27-subtle and the copy takes over. js/apps-2027.js only has to add/remove .is-empty. */ .cy27-apps__out.is-empty .cy27-apps__out-price, .cy27-apps__out.is-empty .cy27-apps__out-time, .cy27-apps__out.is-empty .cy27-apps__out-item { color: var(--cy27-subtle); } .cy27-apps__out-list { display: grid; gap: 10px; margin-bottom: 24px; } .cy27-apps__out-item { color: var(--cy27-body-strong); font-size: .94rem; line-height: 1.6; } .cy27-apps__out-note { margin-bottom: 22px; font-size: .9rem; line-height: 1.65; color: var(--cy27-body); } .cy27-apps__out-fine { margin-top: 16px; font-family: var(--cy27-mono); font-size: .68rem; letter-spacing: .06em; line-height: 1.6; color: var(--cy27-subtle); } /* -------------------------------------------------------------------------- 6. Apps in production -------------------------------------------------------------------------- */ .cy27-apps__feat { display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; border-radius: 18px; margin-bottom: 22px; } /* Reversed panel: carousel first, copy second, and a slightly wider media column because DocSmith's shots are landscape app screens. */ .cy27-apps__feat--rev { grid-template-columns: 1.15fr 1fr; margin-bottom: 0; } .cy27-apps__feat-body { padding: 44px 40px; } .cy27-apps__feat-body .cy27-sublabel { display: block; margin-bottom: 16px; } /* 0,2,0 to clear .cy27-page h3 (0,1,1) — these are panel titles, not row headings, and want display size. */ .cy27-page .cy27-apps__feat-title { margin-bottom: 16px; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; } .cy27-apps__feat-copy { margin-bottom: 26px; font-size: 1.02rem; line-height: 1.7; color: var(--cy27-body); } /*
and
are outside the shared :where() margin reset (which only covers h1-h4, p, ul and figure), so they are zeroed explicitly here. */ .cy27-apps__details { display: grid; margin: 0 0 26px; } .cy27-apps__detail { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid var(--cy27-line); font-size: .95rem; color: var(--cy27-body-strong); } .cy27-apps__details > .cy27-apps__detail:last-child { border-bottom: 1px solid var(--cy27-line); } .cy27-apps__detail dt { flex: 0 0 96px; padding-top: .15em; font-family: var(--cy27-mono); font-size: .78rem; color: var(--cy27-subtle); } .cy27-apps__detail dd { margin: 0; } .cy27-apps__feat-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: .97rem; font-weight: 700; } .cy27-apps__feat-link i { font-size: .8rem; } /* min-height is the floor for the carousel column when the copy column is short. No aspect-ratio here on purpose — the column has to stretch to the copy's height, and aspect-ratio plus min-height is the pairing that back-computes a too-wide box. */ .cy27-apps__feat-media { min-height: 340px; border-left: 1px solid var(--cy27-line-soft); } .cy27-apps__feat-media--rev { min-height: 320px; border-left: 0; border-right: 1px solid var(--cy27-line-soft); } /* The UPA carousel's last slide is the console on a phone — a 640x1209 portrait capture landing in a slot roughly 630x470. The shared `.cy27-shot img` rule crops with object-fit:cover, which on a 1.9:1-tall image inside a 1.3:1-wide box would keep the top ~13% and throw the queue away, leaving a blown-up header. So this one slide letterboxes instead. Declared after the shared rule (this sheet loads last) so the equal 0,1,1 specificity resolves here. */ .cy27-apps__feat-shot--phone { /* Overrides the striped .cy27-shot placeholder fill, which would otherwise show through the letterbox bars and read as "not installed yet". #0b0f17 is the .cy27-phone shell fill from css/media-2027.css — the same dark the three phone frames further down this page sit in, so a phone capture in a desktop-shaped slot still reads as a device. */ align-items: center; justify-content: center; padding: 16px; background: #0b0f17; } .cy27-apps__feat-shot--phone img { width: auto; max-width: 100%; object-fit: contain; object-position: center; border-radius: 10px; } /* -------------------------------------------------------------------------- 7. On the phone -------------------------------------------------------------------------- */ .cy27-apps__phones { margin-bottom: 56px; } /* Fills the 9/17 screen. .cy27-shot is position:relative by default; the screen is the relative box here, so the placeholder is pinned to it. */ .cy27-apps__phone-shot { position: absolute; inset: 0; } /* The shared caption is sized for a wide slot (22px/24px padding, max-width 60%). Inside a phone screen that leaves about three words per line. */ /* Same construction as the mobile section on websites.html — the shared .cy27-rows / .cy27-row--split primitive from css/site-2027.css poured into two columns. Only the two-column pour and the tighter measure below are this page's; the row, the label and the copy are the shared ones. */ .cy27-apps__mrows { grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 1000px; margin: 0 auto; } /* Design: a 150px label column, 20px gutter, 20px rows — tighter than the shared .cy27-row--split (.32fr / 32px / 28px) because two columns of rows share the width. See §11 for the matching collapse; this 0,2,0 override would otherwise outrank the shared 0,1,0 stacking rule inside the ≤1000px block and keep a 150px label column on a phone. */ .cy27-apps__mrows .cy27-row--split { grid-template-columns: 150px 1fr; gap: 20px; padding: 20px 0; } /* Row-major fill puts items 1/3/5 in the left column and 2/4/6 in the right, so the LAST TWO in source order are the bottom of each column and are the two that need a closing hairline. The shared `:last-child` rule only closes one of them. */ .cy27-apps__mrows > .cy27-row:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, .09); } /* -------------------------------------------------------------------------- 8. Process -------------------------------------------------------------------------- */ .cy27-apps__split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; } /* -------------------------------------------------------------------------- 9. App questions -------------------------------------------------------------------------- */ .cy27-apps__acc { max-width: 900px; } /* Each question is a real heading for document outline and screen-reader navigation, but it must not take the h3 type ramp — the trigger inside it owns the visual treatment. 0,2,0 to clear .cy27-page h3 (0,1,1). The heading's own margin is already zeroed by the :where() reset in css/site-2027.css, so font-size and weight are the whole job. */ .cy27-page .cy27-apps__acc-h { font-size: inherit; font-weight: inherit; } /* Redundant against the shared trigger's 24px vertical padding, but stated so a future copy change to a one-line question cannot quietly drop the target under 44px. */ .cy27-apps__acc .cy27-acc__trigger { min-height: 44px; } /* css/icons-2027.css is a subset and carries no chevron, so the trigger uses fa-plus like faq.html. The shared rule rotates the glyph 180 degrees, which is invisible on a plus — 45 degrees turns it into a close cross instead. 0,3,1 to outrank the shared 0,2,1. */ .cy27-apps__acc .cy27-acc__trigger[aria-expanded="true"] i { transform: rotate(45deg); } /* -------------------------------------------------------------------------- 10. Closing CTA — the one beam panel on this page -------------------------------------------------------------------------- */ .cy27-apps__cta-sec { padding-bottom: 140px; } .cy27-apps__cta { border-radius: 20px; padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 64px); text-align: center; /* Feature wash re-aimed at the top centre for a symmetric panel. */ background: radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .14), transparent 60%), linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6)); } .cy27-page .cy27-apps__cta-title { margin-bottom: 16px; font-size: clamp(1.9rem, 3.2vw, 2.9rem); } .cy27-apps__cta-lead { max-width: 540px; margin: 0 auto 32px; font-size: 1.1rem; line-height: 1.7; color: var(--cy27-body); } .cy27-apps__cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .cy27-apps__cta-note { margin-top: 28px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cy27-subtle); } /* -------------------------------------------------------------------------- 11. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1000px) { .cy27-apps__hero .cy27-phero__inner { grid-template-columns: 1fr; gap: 44px; padding-bottom: 64px; } .cy27-apps__vs, .cy27-apps__grid3, .cy27-apps__spec, .cy27-apps__feat, .cy27-apps__feat--rev { grid-template-columns: 1fr; } /* Sticky in a single column would park the panel over the modules it is summarising. */ .cy27-apps__out { position: static; } /* The reversed panel puts its carousel first in the DOM. Stacked, that would bury the copy under the shots on BOTH panels and lose the alternating rhythm entirely — so the media goes back after the copy. */ .cy27-apps__feat--rev .cy27-apps__feat-media { order: 2; } /* Side borders become a top border once the columns stack. Declared after the base rules so equal specificity resolves this way. */ .cy27-apps__feat-media, .cy27-apps__feat-media--rev { border-left: 0; border-right: 0; border-top: 1px solid var(--cy27-line-soft); } .cy27-apps__split { grid-template-columns: 1fr; gap: 32px; } /* One column: "last two in source order" stops meaning "bottom of each column" and would draw a doubled hairline between rows 5 and 6. */ .cy27-apps__mrows { grid-template-columns: 1fr; gap: 0; } .cy27-apps__mrows > .cy27-row:nth-last-child(-n + 2) { border-bottom: 0; } .cy27-apps__mrows > .cy27-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .09); } } @media (max-width: 760px) { .cy27-apps__trust { grid-template-columns: 1fr; gap: 8px; } .cy27-apps__mods { grid-template-columns: 1fr; } /* TRAP: the 0,2,0 measure override in §7 outranks the shared 0,1,0 rules that stack .cy27-row--split (≤1000px) and .cy27-row (here), so the collapse has to be restated at matching specificity or a 150px label column survives onto a phone. This page stacks at 760px rather than the 1000px websites.html uses — the rows have the full container to themselves from 1000px down, and 150px still fits. */ .cy27-apps__mrows .cy27-row--split { grid-template-columns: 1fr; gap: 10px; } .cy27-apps__vs-card, .cy27-apps__out, .cy27-apps__feat-body { padding: 28px 24px; } .cy27-apps__feat-media { min-height: 260px; } } /* -------------------------------------------------------------------------- 12. Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .cy27-apps__mod { transition: none; } }