| 1 | /* oficina.works, the front page, in Calma (estilo AGENTS.md, row 8). |
| 2 | |
| 3 | Colour, type and shape are estilo's theme (theme.css, loaded first): |
| 4 | this file only lays the page out. Each app's card, and the Memoria |
| 5 | section, take their accent from estilo's colour ring through |
| 6 | [data-app] (apps.css), so the page is every app's colour at once and |
| 7 | each app is its own. The sky behind the hero is estilo's (sky.css), |
| 8 | seeded as the suite's own. Light and dark follow the reader's system; |
| 9 | the page runs no script to switch them. */ |
| 10 | |
| 11 | *, *::before, *::after { box-sizing: border-box; } |
| 12 | body { |
| 13 | margin: 0; |
| 14 | background: var(--rst-bg); |
| 15 | color: var(--rst-text); |
| 16 | font: 400 16px/1.55 var(--rst-font); |
| 17 | -webkit-font-smoothing: antialiased; |
| 18 | text-rendering: optimizeLegibility; |
| 19 | } |
| 20 | img { display: block; } |
| 21 | a { color: var(--rst-accent); } |
| 22 | :focus-visible { outline: 2px solid var(--rst-accent); outline-offset: 3px; border-radius: 6px; } |
| 23 | h1, h2, h3 { text-wrap: balance; } |
| 24 | |
| 25 | .shell { max-width: 1180px; margin: 0 auto; padding-inline: 32px; } |
| 26 | |
| 27 | .skip { position: absolute; left: 16px; top: -48px; z-index: 10; padding: 10px 14px; border-radius: 10px; background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); } |
| 28 | .skip:focus { top: 12px; } |
| 29 | |
| 30 | /* ── The bar ── */ |
| 31 | .bar { position: relative; z-index: 2; } |
| 32 | .bar-in { display: flex; align-items: center; gap: 28px; padding-block: 18px; } |
| 33 | .mark { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--rst-text); text-decoration: none; font: 650 19px/1 var(--rst-font); letter-spacing: -0.01em; } |
| 34 | .nav { display: flex; gap: 26px; } |
| 35 | .nav a { color: var(--rst-text-muted); text-decoration: none; font-size: 15px; } |
| 36 | .nav a:hover { color: var(--rst-text); } |
| 37 | |
| 38 | /* ── Buttons ── */ |
| 39 | .btn { |
| 40 | display: inline-flex; align-items: center; justify-content: center; gap: 8px; |
| 41 | padding: 12px 18px; border-radius: 10px; |
| 42 | background: var(--rst-accent); color: var(--rst-on-accent); |
| 43 | font: 600 15px/1 var(--rst-font); text-decoration: none; |
| 44 | transition: background-color .15s ease; |
| 45 | } |
| 46 | .btn:hover { background: var(--rst-accent-strong); } |
| 47 | .btn-quiet { background: var(--rst-surface); color: var(--rst-text); box-shadow: inset 0 0 0 1px var(--rst-line); } |
| 48 | .btn-quiet:hover { background: var(--rst-surface-2); } |
| 49 | .btn-sm { padding: 9px 14px; font-size: 14px; } |
| 50 | |
| 51 | /* ── Hero: the sky behind the headline, the product beneath it ── */ |
| 52 | .hero { --estilo-sky-top: -10%; --estilo-sky-height: 74%; } |
| 53 | .hero-in { text-align: center; padding-block: 72px 0; } |
| 54 | .hero-h { |
| 55 | margin: 0 auto 22px; max-width: 13ch; |
| 56 | font: 620 clamp(44px, 7.2vw, 78px)/1.02 var(--rst-font); letter-spacing: -0.035em; |
| 57 | } |
| 58 | .hero-lead { margin: 0 auto 32px; max-width: 46ch; color: var(--rst-text-muted); font-size: clamp(17px, 1.6vw, 19.5px); line-height: 1.55; } |
| 59 | .acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } |
| 60 | |
| 61 | .stage { |
| 62 | position: relative; height: 470px; margin-top: 60px; |
| 63 | border-radius: 24px 24px 0 0; overflow: hidden; |
| 64 | background: color-mix(in oklab, var(--rst-accent) 7%, var(--rst-surface-2)); |
| 65 | } |
| 66 | .launch { |
| 67 | position: absolute; left: 6%; top: 56px; width: 400px; |
| 68 | padding: 18px 20px 22px; border-radius: 16px; |
| 69 | background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); |
| 70 | } |
| 71 | .launch-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 13px; } |
| 72 | .launch-h b { font-size: 15px; font-weight: 620; } |
| 73 | .launch-h span { margin-left: auto; color: var(--rst-text-faint); } |
| 74 | .launch-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; } |
| 75 | .launch-apps li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 12px; font: 500 13px/1 var(--rst-font); } |
| 76 | .doc { |
| 77 | position: absolute; right: 5%; top: 92px; width: 540px; height: 420px; |
| 78 | border-radius: 16px; overflow: hidden; |
| 79 | background: var(--rst-surface); box-shadow: var(--rst-shadow-lift); |
| 80 | } |
| 81 | .doc-bar { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--rst-line); font-size: 13px; } |
| 82 | .doc-bar b { font-weight: 620; } |
| 83 | .doc-bar span:last-child { color: var(--rst-text-faint); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } |
| 84 | .lights { display: flex; gap: 6px; margin-right: 4px; } |
| 85 | .lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--rst-line); } |
| 86 | .doc-page { padding: 26px 40px; } |
| 87 | .doc-h { margin: 0 0 12px; font: 620 22px/1.2 var(--rst-font); letter-spacing: -0.02em; } |
| 88 | .doc-page p:not(.doc-h) { margin: 0 0 10px; color: var(--rst-text-muted); font-size: 14px; line-height: 1.6; } |
| 89 | .doc mark { background: var(--rst-accent-soft); color: inherit; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -2px 0 var(--rst-accent); } |
| 90 | |
| 91 | /* ── Bands ── */ |
| 92 | .band { padding-block: 92px; } |
| 93 | .band-quiet { background: var(--rst-surface); border-block: 1px solid var(--rst-line); } |
| 94 | .band h2, .sec-head h2 { margin: 0 0 14px; font: 620 clamp(28px, 3.4vw, 40px)/1.1 var(--rst-font); letter-spacing: -0.03em; } |
| 95 | .sec-head { max-width: 60ch; margin-bottom: 40px; } |
| 96 | .prose { margin: 0 0 16px; max-width: 58ch; color: var(--rst-text-muted); font-size: 17px; line-height: 1.65; } |
| 97 | .prose.sm { font-size: 15px; } |
| 98 | .lnk { font-weight: 600; } |
| 99 | .two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; } |
| 100 | |
| 101 | /* ── The family: one card per app, in its own colour ── */ |
| 102 | .family { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; } |
| 103 | .family li { |
| 104 | padding: 24px 24px 22px; border-radius: 18px; |
| 105 | background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line); |
| 106 | transition: box-shadow .2s ease, transform .2s ease; |
| 107 | } |
| 108 | .family li:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--rst-accent) 30%, var(--rst-line)), var(--rst-shadow-lift); } |
| 109 | .family img { filter: drop-shadow(0 5px 9px rgba(20, 24, 33, .16)); } |
| 110 | .family h3 { margin: 16px 0 4px; font: 620 18px/1.2 var(--rst-font); letter-spacing: -0.01em; } |
| 111 | .family h3 em { |
| 112 | margin-left: 6px; padding: 3px 8px; border-radius: 999px; vertical-align: 2px; |
| 113 | background: var(--rst-accent-soft); color: var(--rst-accent); |
| 114 | font: 600 11.5px/1 var(--rst-font); font-style: normal; |
| 115 | } |
| 116 | .family p { margin: 0; color: var(--rst-text-muted); font-size: 15px; } |
| 117 | .family .get { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; } |
| 118 | .get a { font-weight: 600; font-size: 14px; text-decoration: none; } |
| 119 | .get a:hover { text-decoration: underline; } |
| 120 | .get .soon { color: var(--rst-text-faint); font-weight: 500; } |
| 121 | .get .none { color: var(--rst-text-faint); font-size: 14px; } |
| 122 | |
| 123 | /* ── Memoria's answer, and the sign-in card ── */ |
| 124 | .ask { padding: 24px 28px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); } |
| 125 | .band:not(.band-quiet) .ask { background: var(--rst-surface); } |
| 126 | .ask-q { margin: 0 0 10px; font: 620 17px/1.35 var(--rst-font); } |
| 127 | .ask-a { margin: 0 0 14px; color: var(--rst-text-muted); } |
| 128 | .ask-cite { margin: 0; font-size: 14px; } |
| 129 | .ask-cite a { font-weight: 600; text-decoration: none; } |
| 130 | .ask-note { margin: 12px 0 0; color: var(--rst-text-faint); font-size: 14px; } |
| 131 | |
| 132 | /* ── Isolation ── */ |
| 133 | .facts { display: grid; gap: 12px; margin: 0; } |
| 134 | .facts div { padding: 18px 20px; border-radius: 16px; background: var(--rst-surface); box-shadow: 0 0 0 1px var(--rst-line); } |
| 135 | .facts dt { font-weight: 620; } |
| 136 | .facts dd { margin: 4px 0 0; color: var(--rst-text-muted); font-size: 15px; } |
| 137 | |
| 138 | /* ── Native apps ── */ |
| 139 | /* One tile per Mac app: its icon and name, the download beneath. */ |
| 140 | .dl-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } |
| 141 | .dl-list li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 12px; padding: 18px; border-radius: 18px; background: var(--rst-bg); box-shadow: 0 0 0 1px var(--rst-line); } |
| 142 | .dl-app { font-weight: 620; } |
| 143 | .dl-list .btn { grid-column: 1 / -1; } |
| 144 | .dl-req { margin: 20px 0 0; max-width: 60ch; color: var(--rst-text-faint); font-size: 14px; } |
| 145 | .tf { margin-top: 44px; max-width: 62ch; } |
| 146 | .tf h3 { margin: 0 0 10px; font: 620 20px/1.25 var(--rst-font); letter-spacing: -0.015em; } |
| 147 | .tf p { margin: 0 0 10px; color: var(--rst-text-muted); } |
| 148 | |
| 149 | /* ── Footer ── */ |
| 150 | .foot { padding-block: 56px 64px; border-top: 1px solid var(--rst-line); background: var(--rst-surface); } |
| 151 | .foot-in { display: grid; grid-template-columns: auto auto 1fr; gap: 56px; } |
| 152 | .foot-h { margin: 0 0 12px; color: var(--rst-text-faint); font: 650 13px/1 var(--rst-font); } |
| 153 | .foot ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } |
| 154 | .foot a { color: var(--rst-text-muted); text-decoration: none; font-size: 14.5px; } |
| 155 | .foot a:hover { color: var(--rst-text); } |
| 156 | .colophon { justify-self: end; max-width: 52ch; margin: 0; color: var(--rst-text-faint); font-size: 13.5px; line-height: 1.6; } |
| 157 | |
| 158 | /* ── Narrower screens ── */ |
| 159 | @media (max-width: 1060px) { |
| 160 | .family { grid-template-columns: repeat(2, 1fr); } |
| 161 | .doc { width: 460px; } |
| 162 | } |
| 163 | @media (max-width: 880px) { |
| 164 | .stage { height: auto; padding: 18px 14px 0; } |
| 165 | .launch { position: static; width: auto; } |
| 166 | .doc { position: static; width: auto; height: 250px; margin-top: 14px; border-radius: 16px 16px 0 0; } |
| 167 | .doc-page { padding: 18px 22px; } |
| 168 | .two { grid-template-columns: 1fr; gap: 32px; } |
| 169 | .foot-in { grid-template-columns: 1fr 1fr; gap: 32px; } |
| 170 | .colophon { grid-column: 1 / -1; justify-self: start; } |
| 171 | } |
| 172 | @media (max-width: 640px) { |
| 173 | .shell { padding-inline: 20px; } |
| 174 | .nav { display: none; } |
| 175 | .hero-in { padding-top: 44px; } |
| 176 | .stage { margin-top: 40px; } |
| 177 | .band { padding-block: 64px; } |
| 178 | .family { grid-template-columns: 1fr; } |
| 179 | .launch-apps li { padding: 10px 4px; } |
| 180 | } |
| 181 | /* In dark the sky runs brighter (estilo's gain) and the muted lead on its |
| 182 | brightest band fell under 4.5:1 (review, discussion 75): the hero's sky |
| 183 | is quieter there, and its words full-strength. */ |
| 184 | @media (prefers-color-scheme: dark) { |
| 185 | .hero { --estilo-sky-strength: 0.32; } |
| 186 | .hero-lead { color: var(--rst-text); } |
| 187 | } |
| 188 | |
| 189 | @media (prefers-reduced-motion: reduce) { |
| 190 | .btn, .family li { transition: none; } |
| 191 | } |
| 192 | |
amadan